Downloaded 36 times
More Related Content
![Fundamental JavaScript [UTC, March 2014]](https://cdn.slidesharecdn.com/ss_thumbnails/fundamentaljavascriptutcmarch2014-140305104047-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![ES6 in Production [JSConfUY2015]](https://cdn.slidesharecdn.com/ss_thumbnails/es6inproduction1-150430082007-conversion-gate01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to JavaScript 1 for high school
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
JavaScript 1 for high school
- 1. JAVASCRIPT SCRIPT OF THEINTERNET
- 2. WHAT IS JAVASCRIPT? Thede facto scripting language on the Web. Powerful, versatile, ubiquitous. Every personal computer in the world uses it because⌠Every modern browser implements it. It has started to supplant Flash.
- 3. JAVASCRIPT ORIGINS Mid-90s At Netscape(built to go head-to-head with MSâs VB) Originally: validated forms Originally: minimal page manipulation Now: Build rich client-side apps
- 4.
- 5. THE BROWSER CONSOLE 1. GoogleChrome (CTRL+SHIFT+J) Mac (option command J) 1. Firefox (CTRL+SHIFT+K) Mac (option command K) 1. Internet Explorer (F12) Safari = Enable with âcommand commaâ, check âShow Develop Menuâ Later: option command C Hi
- 6. IN HTML CODE Inline Separatefile <script> <script src=âhello.jsâ> </script> alert(âHello, world!â); </script>
- 7. LOADING SCRIPTS 1. Inthe pageâs onload function 2. Immediately before the closing </body> tag (You cannot execute JavaScript before the objects on the page it will interact with are created.) (onload only runs after all the img tags (and everything) are loaded, so to run JS before that, use the latter method.)
- 8.
- 9. PROGRAMMING IS⌠Programming Data Manipulation StoreData Words Phrases ⢠name ⢠tax ⢠length ⢠width ⢠firstName ⢠taskList ⢠timeToLive Camel casing (first letter of subsequent words = capital)
- 10. COMMENTS ARE⌠Non-executing bitsof code to describe what is happening. Inline: //this is a Javascript comment Multiline: /* this style is similar to CSS style comments */
- 11. DECLARATIONS ARE⌠var task= âMake an assignment.â; (String) var complete = true; (Boolean) var task = âMake an assignment.â, (Multi) complete = true; (Remember to terminate it) (Note: JS is case sensitive, so task and Task are different.) (Note: We are declaring and initializing variables here. You can do each separately. â Next slide)
- 12. âŚJUST THE BEGINNING //variable declaration var task, complete; // variable initialization (assign a value) task = âMake an assignment.â; complete = true; (Note: This is better for debugging.)
- 13. THE 6 DATATYPES ARE⌠(Note: JavaScript is loosely typed â i.e. you donât need to declare types) you can change types on a whim object null number Boolean string undefined
- 14. DATATYPE: number Numbers caninclude: 1. All possible number values 2. *Special Not-a-Number (NaN) values 3. Positive infinity 4. Negative infinity
- 15. NaN ASIDE NaN =when math/parse functions donât return a number NaN = the only value that doesnât equal itself NaN==NaN and NaN===NaN return false (the best test) â 2 markers demo isNaN() function: 1. Converts the value to a number (type conversion) isNaN(NaN) = true isNaN(undefined) = true isNan({}) = true isNaN(true) = false isNaN(null) = false isNaN(â42â) = false isNaN(ââ) = false isNaN(â â) = false isNaN(âfooâ) = true
- 16. DATATYPE: string Strings are: 1.Anything treated as text 2. Surrounded by quotation marks â â 3. âHello, world!â 4. â1, 2, 3, 4, 5â 5. â!@#$%^&*()_+â
- 17. DATATYPE: Boolean Booleans (capitalB) are: 1. True 2. False
- 18. DATATYPE: undefined Undefined variablesare: 1. Declared variables 2. With no values assigned to them
- 19. DATATYPE: null Null variablesare: 1. Declared variables 2. Specifically assigned null (absent value)
- 20. DATATYPE: object Objects are: 1.A collection of properties 2. Properties can include any previous type 3. Can also include other objects 4. Can also include functions
- 21. OPERATIONS ARE⌠Concatenate strings(+) Math: +, -, *, /, % (R) % = Remainder 10%3 = 1 var fname, lname, fullName; var provincial, federal, subtot al, total; fname = âJohnâ; lname = âDoeâ; fullName = fname + â â + lname; // fullName is âJohn Doeâ provincial = 0.095; federal = 0.05; subtotal = 10; total = subtotal + (subtotal * provincial) + (subtotal * federal); // total is 11.45
- 22. LOOSE TYPING TROUBLE John has11 tasks, Jane has 42. We want to add them. var johnTaskCount = 11, janeTaskCount = â42â, totalTaskCount = johnTaskCount + janeTaskCount; // this produces â1142â because of the string var johnTaskCount = 11, janeTaskCount = 42, totalTaskCount = johnTaskCount + janeTaskCount; // this produces 53 This is Type Conversion. Number + string = change Number to string & concat Number + Boolean = change Boolean to number (1 = T, 0 = F) & add
- 23. THE 8 COMPARISONOPS ARE⌠(Note: Compare two values and return either true or false) Greater than > Equal == Greater than or Equal to >= Strict Equal === Less than < Not Equal != Strict Not Equal !== Less than or Equal to <=
- 24. COMPARISON OP: == Ifnot the same type, JS converts, then compares: 1. Number + Boolean = convert both to numbers 2. String? = convert both to strings 3. Object? = true if both refer to same memory location Example: 1 == 1 â1â == 1 1 == true 0 == false ââ == 0 â â == 0 // // // // // // returns returns returns returns returns returns true true (â1â converts to 1) true true true (ââ converts to 0) true (â â converts to 0) 0 == 1 // returns false 1 == false // returns false 0 == true // returns false var x, y; x = {}; y = x; x == y; x == {}; // // // // // declare x and y create object and assign x to it point y to x returns true (same object in memory) returns false (not the same object)
- 25. COMPARISON OP: != Sameas previous, but opposite. Example: 1 != 1 â1â != 1 1 != true 0 != false ââ != 0 â â != 0 // // // // // // returns returns returns returns returns returns false false (â1â converts to 1) false false false (ââ converts to 0) false (â â converts to 0) 0 != 1 // returns true 1 != false // returns true 0 != true // returns true var x, y; x = {}; y = x; x != y; x != {}; // // // // // declare x and y create object and assign x to it point y to x returns false (same object in mem) returns true (not the same object)
- 26. COMPARISON OP: === StrictEqual = no conversion of types Example: 1 === 1 â1â === 1 1 === true 0 === false ââ === 0 â â === 0 // // // // // // returns returns returns returns returns returns true false (â1â not converted) false false false (ââ not converted) false (â â not converted) 0 === 1 // returns false 1 === false // returns false 0 === true // returns false var x, y; x = {}; y = x; x === y; x === {}; // // // // // declare x and y create object and assign x to it point y to x returns true (same object in mem) returns false (not the same object)
- 27. COMPARISON OP: !== Sameas previous, but opposite. Example: 1 !== 1 â1â !== 1 1 !== true 0 !== false ââ !== 0 â â !== 0 // // // // // // returns returns returns returns returns returns false true (â1â not converted) true true true (ââ not converted) true (â â not converted) 0 !== 1 // returns true 1 !== false // returns true 0 !== true // returns true var x, y; x = {}; y = x; x !== y; x !== {}; // // // // // declare x and y create object and assign x to it point y to x returns false (same object in mem) returns true (not the same object)
- 28. COMPARISON OP: >,>= Type conversion implicitly occurs before comparison. Example: 0 1 2 2 > > > > 1 1 1 ââ // // // // returns returns returns returns false false true true (ââ converts to 0) 0 >= 1 // returns false 1 >= 1 // returns true â1â >= 1 // returns true (â1â converts to 1)
- 29. COMPARISON OP: <,<= Same as previous, but less than. Example: 0 1 2 2 < < < < 1 1 1 ââ // // // // returns returns returns returns 0 <= 1 // returns 1 <= 1 // returns â1â <= 1 // returns 2 <= 1 // returns â2â <= 1 // returns true false false false (ââ converts to 0) true true true (â1â converts to 1) false false (â2â converts to 2)
- 30. THE 3 LOGICOPERATORS ARE⌠(Note: These convert values to Booleans and return one of the values.) Logic AND && Logic NOT ! Logic OR ||
- 31. LOGIC OP: && Ifthe first of two values = false, it is returned; otherwise the second value is returned. Example: true && true; true && false; false && true; 0 && 1; 0 && 2; 1 && 0; 2 && 0; âfooâ && âbarâ; // // // // // // // // returns returns returns returns returns returns returns returns true false false 0 0 0 0 âbarâ
- 32. LOGIC OP: || Ifthe first of two values = true, it is returned; otherwise the second value is returned. Example: true || true; true || false; false || true; 0 || 1; 0 || 2; 1 || 0; 2 || 0; âfooâ || âbarâ; // // // // // // // // returns returns returns returns returns returns returns returns true true true 1 2 1 2 foo
- 33. LOGIC OP: ! Itinverts the Boolean value. Example: !true; !false; !0; !1; !âfooâ; // // // // // returns returns returns returns returns false true true false false
- 34. LOGICAL FLOW IS⌠Weuse ifâŚelse statements and logical operators to evaluate conditions and fork code execution. Which path should we take?
- 35. CODE FOR ABOVE EXAMPLE vard, hours, minutes, time, message; // Get the current timeâs hour and minute components d = new Date(); hours = d.getHours(); minutes = d.getMinutes(); // Make sure the hour is a double digit string if (hours < 10) { hours = â0â + hours; // converts hours to string } else { hours = hours.toString(); } //Make sure the minutes are a double digit string if (minutes < 10) { minutes = â0â + minutes; // converts minutes to string } else { minutes = minutes.toString(); } // Concatenate hours and minutes into a quadruple digit number representing the time in 24-hour format time = Number(hours + minutes); if (time >= 0000 && time < 1200) { message = âGood morning!â; } else if (time >= 1200 && time < 1700) { message = âGood afternoon!â; } else if (time >= 1700 && time < 2100) { message = âGood evening!â; } else if (time >= 2100 && time <=2359) { message = âGood night!â; } alert(message);
- 36. WITH TERNARY OPERATOR vard, hours, minutes, time, message; // Get the current timeâs hour and minute components d = new Date(); hours = d.getHours(); minutes = d.getMinutes(); // Make sure the hour is a double digit string hours = (hours < 10) ? â0â + hours : hours.toString(); // Make sure the minutes are a double digit string minutes = (minutes < 10) ? â0â + minutes : minutes.toString(); // Concatenate hours and minutes into a quadruple digit number representing the time in 24-hour format time = Number(hours + minutes); message = (time >= 0000 && time < 1200) ? âGood morning!â : (time >= 1200 && time < 1700) ? âGood afternoon!â : (time >= 1700 && time < 2100) ? âGood evening!â : (time >= 2100 && time <=2359) ? âGood night!â; alert(message); Ternary Operator = shortened ifâŚelse condition ? expression1 : expression2;
- 37. PROJECT 1.0 Create aTask Manager Make a .js file and add this code var task1, task2, task3; task1 = âPay phone billâ; task2 = âWrite best-selling novelâ; task3 = âWalk the dogâ;