javascript 1 for high school
DESCRIPTION
Using SitePoint's Jump Start JavaScript, we'll get started with some basic JavaScript programming.TRANSCRIPT
JAVASCRIPTSCRIPT 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
SETTING UP
CHAPTER ONE
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
IN HTML CODE
Inline
<script>
alert(“Hello, world!”);
</script>
Separate file
<script src=“hello.js”></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.)
VARIABLES
CHAPTER TWO
PROGRAMMING IS…
Store DataWords• name• tax• length• width
Phrases• firstName• taskList• timeToLive
Data Manipulation
Programming
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…
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
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) = trueisNaN(undefined) = trueisNan({}) = true
isNaN(true) = falseisNaN(null) = false
isNaN(“42”) = falseisNaN(“”) = falseisNaN(“ ”) = falseisNaN(“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 (+)
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
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
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)
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: ==
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: !=
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: ===
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: !==
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: >, >=
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: <, <=
THE 3 LOGIC OPERATORS ARE…
Logic OR| |
Logic NOT!
Logic AND&&
(Note: These convert values to Booleans and return one of the values.)
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: &&
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: ||
Example:
!true; // returns false!false; // returns true!0; // returns true!1; // returns false!“foo”; // returns false
It inverts the Boolean value.
LOGIC OP: !
We use if…else statements and logical operators to evaluate conditions and fork code execution.
Which path should we take?
LOGICAL FLOW IS…
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);
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;
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”;