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”;