javascript 1 for high school
DESCRIPTION
Using SitePoint's Jump Start JavaScript, we'll get started with some basic JavaScript programming.TRANSCRIPT
![Page 1: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/1.jpg)
JAVASCRIPTSCRIPT OF THE INTERNET
![Page 2: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/2.jpg)
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.
![Page 3: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/3.jpg)
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
![Page 4: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/4.jpg)
SETTING UP
CHAPTER ONE
![Page 5: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/5.jpg)
Hi1. Google Chrome (CTRL+SHIFT+J)
Mac (option command J)
2. Firefox (CTRL+SHIFT+K)
Mac (option command K)
3. Internet Explorer (F12)
THE BROWSER CONSOLE
Safari = Enable with “command comma”, check “Show Develop Menu”Later: option command C
![Page 6: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/6.jpg)
IN HTML CODE
Inline
<script>
alert(“Hello, world!”);
</script>
Separate file
<script src=“hello.js”></script>
![Page 7: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/7.jpg)
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.)
![Page 8: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/8.jpg)
VARIABLES
CHAPTER TWO
![Page 9: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/9.jpg)
PROGRAMMING IS…
Store DataWords• name• tax• length• width
Phrases• firstName• taskList• timeToLive
Data Manipulation
Programming
Camel casing (first letter of subsequent words = capital)
![Page 10: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/10.jpg)
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
*/
![Page 11: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/11.jpg)
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)
![Page 12: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/12.jpg)
…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.)
![Page 13: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/13.jpg)
THE 6 DATA TYPES ARE…
string
Boolean
number null
object
undefined
(Note: JavaScript is loosely typed – i.e. you don’t need to declare types)
you can change types on a whim
![Page 14: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/14.jpg)
DATATYPE: number
Numbers can include:
1. All possible number values
2. *Special Not-a-Number (NaN) values
3. Positive infinity
4. Negative infinity
![Page 15: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/15.jpg)
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) = trueisNaN(undefined) = trueisNan({}) = true
isNaN(true) = falseisNaN(null) = false
isNaN(“42”) = falseisNaN(“”) = falseisNaN(“ ”) = falseisNaN(“foo”) = true
![Page 16: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/16.jpg)
DATATYPE: string
Strings are:
1. Anything treated as text
2. Surrounded by quotation marks “ ”
3. “Hello, world!”
4. “1, 2, 3, 4, 5”
5. “!@#$%^&*()_+”
![Page 17: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/17.jpg)
DATATYPE: Boolean
Booleans (capital B) are:
1. True
2. False
![Page 18: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/18.jpg)
DATATYPE: undefined
Undefined variables are:
1. Declared variables
2. With no values assigned to them
![Page 19: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/19.jpg)
DATATYPE: null
Null variables are:
1. Declared variables
2. Specifically assigned null (absent value)
![Page 20: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/20.jpg)
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
![Page 21: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/21.jpg)
OPERATIONS ARE…
Concatenate strings (+)
var fname, lname, fullName;
fname = “John”;
lname = “Doe”;
fullName = fname + “ ” + lname; // fullName is “John Doe”
Math: +, -, *, /, % (R)
var provincial, federal, subtotal, total;
provincial = 0.095;
federal = 0.05;
subtotal = 10;
total = subtotal + (subtotal * provincial) + (subtotal * federal);// total is 11.45
% = Remainder10%3 = 1
![Page 22: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/22.jpg)
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 & concatNumber + Boolean = change Boolean to number (1 = T, 0 = F) & add
![Page 23: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/23.jpg)
THE 8 COMPARISON OPS ARE…
Not Equal!=
Strict Equal===
Equal==
Greater than
>
Greater than or Equal to
>=
Less than<
Strict Not Equal!==
Less than or Equal to
<=
(Note: Compare two values and return either true or false)
![Page 24: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/24.jpg)
Example:
1 == 1 // returns true“1” == 1 // returns true (“1” converts to 1)1 == true // returns true0 == false // returns true“” == 0 // returns true (“” converts to 0)“ ” == 0 // returns true (“ ” converts to 0)
0 == 1 // returns false1 == false // returns false0 == true // returns false
var x, y; // declare x and yx = {}; // create object and assign x to ity = x; // point y to xx == y; // returns true (same object in memory)x == {}; // returns false (not the same object)
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
COMPARISON OP: ==
![Page 25: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/25.jpg)
Example:
1 != 1 // returns false“1” != 1 // returns false (“1” converts to 1)1 != true // returns false0 != false // returns false“” != 0 // returns false (“” converts to 0)“ ” != 0 // returns false (“ ” converts to 0)
0 != 1 // returns true1 != false // returns true0 != true // returns true
var x, y; // declare x and yx = {}; // create object and assign x to ity = x; // point y to xx != y; // returns false (same object in mem)x != {}; // returns true (not the same object)
Same as previous, but opposite.
COMPARISON OP: !=
![Page 26: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/26.jpg)
Example:
1 === 1 // returns true“1” === 1 // returns false (“1” not converted)1 === true // returns false0 === false // returns false“” === 0 // returns false (“” not converted)“ ” === 0 // returns false (“ ” not converted)
0 === 1 // returns false1 === false // returns false0 === true // returns false
var x, y; // declare x and yx = {}; // create object and assign x to ity = x; // point y to xx === y; // returns true (same object in mem)x === {}; // returns false (not the same object)
Strict Equal = no conversion of types
COMPARISON OP: ===
![Page 27: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/27.jpg)
Example:
1 !== 1 // returns false“1” !== 1 // returns true (“1” not converted)1 !== true // returns true0 !== false // returns true“” !== 0 // returns true (“” not converted)“ ” !== 0 // returns true (“ ” not converted)
0 !== 1 // returns true1 !== false // returns true0 !== true // returns true
var x, y; // declare x and yx = {}; // create object and assign x to ity = x; // point y to xx !== y; // returns false (same object in mem)x !== {}; // returns true (not the same object)
Same as previous, but opposite.
COMPARISON OP: !==
![Page 28: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/28.jpg)
Example:
0 > 1 // returns false1 > 1 // returns false2 > 1 // returns true2 > “” // returns true (“” converts to 0)
0 >= 1 // returns false1 >= 1 // returns true“1” >= 1 // returns true (“1” converts to 1)
Type conversion implicitly occurs before comparison.
COMPARISON OP: >, >=
![Page 29: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/29.jpg)
Example:
0 < 1 // returns true1 < 1 // returns false2 < 1 // returns false2 < “” // returns false (“” converts to 0)
0 <= 1 // returns true1 <= 1 // returns true“1” <= 1 // returns true (“1” converts to 1)2 <= 1 // returns false“2” <= 1 // returns false (“2” converts to 2)
Same as previous, but less than.
COMPARISON OP: <, <=
![Page 30: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/30.jpg)
THE 3 LOGIC OPERATORS ARE…
Logic OR| |
Logic NOT!
Logic AND&&
(Note: These convert values to Booleans and return one of the values.)
![Page 31: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/31.jpg)
Example:
true && true; // returns truetrue && false; // returns falsefalse && true; // returns false0 && 1; // returns 00 && 2; // returns 01 && 0; // returns 02 && 0; // returns 0“foo” && “bar”; // returns “bar”
If the first of two values = false, it is returned; otherwise the second value is returned.
LOGIC OP: &&
![Page 32: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/32.jpg)
Example:
true || true; // returns truetrue || false; // returns truefalse || true; // returns true0 || 1; // returns 10 || 2; // returns 21 || 0; // returns 12 || 0; // returns 2“foo” || “bar”; // returns foo
If the first of two values = true, it is returned; otherwise the second value is returned.
LOGIC OP: ||
![Page 33: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/33.jpg)
Example:
!true; // returns false!false; // returns true!0; // returns true!1; // returns false!“foo”; // returns false
It inverts the Boolean value.
LOGIC OP: !
![Page 34: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/34.jpg)
We use if…else statements and logical operators to evaluate conditions and fork code execution.
Which path should we take?
LOGICAL FLOW IS…
![Page 35: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/35.jpg)
CODE FOR ABOVE EXAMPLE
var d, hours, minutes, time, message;
// Get the current time’s hour and minute componentsd = new Date();hours = d.getHours();minutes = d.getMinutes();
// Make sure the hour is a double digit stringif (hours < 10) { hours = “0” + hours; // converts hours to string} else { hours = hours.toString();}
//Make sure the minutes are a double digit stringif (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 formattime = 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);
![Page 36: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/36.jpg)
WITH TERNARY OPERATOR
var d, hours, minutes, time, message;
// Get the current time’s hour and minute componentsd = new Date();hours = d.getHours();minutes = d.getMinutes();
// Make sure the hour is a double digit stringhours = (hours < 10) ? “0” + hours : hours.toString();
// Make sure the minutes are a double digit stringminutes = (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;
![Page 37: JavaScript 1 for high school](https://reader034.vdocument.in/reader034/viewer/2022052504/54b753284a795917738b458c/html5/thumbnails/37.jpg)
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”;