• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript 1 for high school
 

JavaScript 1 for high school

on

  • 438 views

Using SitePoint's Jump Start JavaScript, we'll get started with some basic JavaScript programming.

Using SitePoint's Jump Start JavaScript, we'll get started with some basic JavaScript programming.

Statistics

Views

Total Views
438
Views on SlideShare
422
Embed Views
16

Actions

Likes
1
Downloads
20
Comments
0

2 Embeds 16

http://jjuenglish.com 14
http://192.168.6.179 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript 1 for high school JavaScript 1 for high school Presentation Transcript

    • JAVASCRIPT SCRIPT OF THE INTERNET
    • WHAT IS JAVASCRIPT? The de 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.
    • 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
    • CHAPTER ONE SETTING UP
    • THE BROWSER CONSOLE 1. Google Chrome (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
    • IN HTML CODE Inline Separate file <script> <script src=“hello.js”> </script> alert(“Hello, world!”); </script>
    • LOADING SCRIPTS 1. In the 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.)
    • CHAPTER TWO VARIABLES
    • PROGRAMMING IS… Programming Data Manipulation Store Data Words Phrases • name • tax • length • width • firstName • taskList • timeToLive Camel casing (first letter of subsequent words = capital)
    • COMMENTS ARE… Non-executing bits of code to describe what is happening. Inline: //this is a Javascript comment Multiline: /* this style is similar to CSS style comments */
    • 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)
    • …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.)
    • THE 6 DATA TYPES 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
    • DATATYPE: number Numbers can include: 1. All possible number values 2. *Special Not-a-Number (NaN) values 3. Positive infinity 4. Negative infinity
    • 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
    • DATATYPE: string Strings are: 1. Anything treated as text 2. Surrounded by quotation marks “ ” 3. “Hello, world!” 4. “1, 2, 3, 4, 5” 5. “!@#$%^&*()_+”
    • DATATYPE: Boolean Booleans (capital B) are: 1. True 2. False
    • DATATYPE: undefined Undefined variables are: 1. Declared variables 2. With no values assigned to them
    • DATATYPE: null Null variables are: 1. Declared variables 2. Specifically assigned null (absent value)
    • 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
    • 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
    • LOOSE TYPING TROUBLE John has 11 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
    • THE 8 COMPARISON OPS 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 <=
    • COMPARISON OP: == If not 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)
    • COMPARISON OP: != Same as 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)
    • COMPARISON OP: === Strict Equal = 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)
    • COMPARISON OP: !== Same as 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)
    • 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)
    • 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)
    • THE 3 LOGIC OPERATORS ARE… (Note: These convert values to Booleans and return one of the values.) Logic AND && Logic NOT ! Logic OR ||
    • LOGIC OP: && If the 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”
    • LOGIC OP: || If the 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
    • LOGIC OP: ! It inverts the Boolean value. Example: !true; !false; !0; !1; !“foo”; // // // // // returns returns returns returns returns false true true false false
    • LOGICAL FLOW IS… We use if…else statements and logical operators to evaluate conditions and fork code execution. Which path should we take?
    • CODE FOR ABOVE EXAMPLE var d, 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);
    • WITH TERNARY OPERATOR var d, 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;
    • PROJECT 1.0 Create a Task 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”;