Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JAVASCRIPT
SCRIPT OF THE INTERNET
WHAT IS JAVASCRIPT?
The de facto scripting language on the Web.

Powerful, versatile, ubiquitous.
Every personal computer ...
JAVASCRIPT ORIGINS
Mid-90s

At Netscape (built to go head-to-head with MS’s VB)
Originally: validated forms
Originally: mi...
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 ...
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 JavaSc...
CHAPTER TWO

VARIABLES
PROGRAMMING IS…
Programming

Data Manipulation
Store Data
Words

Phrases

• name
• tax
• length
• width

• firstName
• tas...
COMMENTS ARE…
Non-executing bits of code to describe what is happening.

Inline: //this is a Javascript comment
Multiline:...
DECLARATIONS ARE…
var task = “Make an assignment.”;

(String)

var complete = true;

(Boolean)

var task = “Make an assign...
…JUST THE BEGINNING
// variable declaration

var task, complete;
// variable initialization (assign a value)
task = “Make ...
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...
DATATYPE: number
Numbers can include:

1. All possible number values
2. *Special Not-a-Number (NaN) values
3. Positive inf...
NaN ASIDE
NaN = when math/parse functions don’t return a number

NaN = the only value that doesn’t equal itself
NaN==NaN a...
DATATYPE: string
Strings are:

1. Anything treated as text
2. Surrounded by quotation marks “ ”
3. “Hello, world!”
4. “1, ...
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 inclu...
OPERATIONS ARE…
Concatenate strings (+)

Math: +, -, *, /, % (R)
% = Remainder
10%3 = 1

var fname, lname, fullName;

var
...
LOOSE TYPING
TROUBLE
John has 11 tasks, Jane has 42. We want to add them.
var johnTaskCount = 11, janeTaskCount = “42”,
to...
THE 8 COMPARISON OPS ARE…
(Note: Compare two values and return either true or false)

Greater
than
>

Equal
==

Greater
th...
COMPARISON OP: ==
If not the same type, JS
converts, then compares:

1.

Number + Boolean =
convert both to numbers

2.

S...
COMPARISON OP: !=
Same as previous, but
opposite.

Example:

1 != 1
“1” != 1
1 != true
0 != false
“” != 0
“ ” != 0

//
//
...
COMPARISON OP: ===
Strict Equal = no conversion
of types

Example:

1 === 1
“1” === 1
1 === true
0 === false
“” === 0
“ ” ...
COMPARISON OP: !==
Same as previous, but
opposite.

Example:

1 !== 1
“1” !== 1
1 !== true
0 !== false
“” !== 0
“ ” !== 0
...
COMPARISON OP: >, >=
Type conversion implicitly
occurs before comparison.

Example:

0
1
2
2

>
>
>
>

1
1
1
“”

//
//
//
...
COMPARISON OP: <, <=
Same as previous, but less
than.

Example:

0
1
2
2

<
<
<
<

1
1
1
“”

//
//
//
//

returns
returns
...
THE 3 LOGIC OPERATORS ARE…
(Note: These convert values to Booleans and return one of the values.)

Logic AND
&&
Logic NOT
...
LOGIC OP: &&
If the first of two values =
false, it is returned;
otherwise the second value
is returned.

Example:

true &...
LOGIC OP: ||
If the first of two values =
true, it is returned; otherwise
the second value is returned.

Example:

true ||...
LOGIC OP: !
It inverts the Boolean value.

Example:

!true;
!false;
!0;
!1;
!“foo”;

//
//
//
//
//

returns
returns
retur...
LOGICAL FLOW IS…
We use if…else statements
and logical operators to
evaluate conditions and fork
code execution.
Which pat...
CODE FOR ABOVE
EXAMPLE
var d, hours, minutes, time, message;
// Get the current time’s hour and minute
components
d = new ...
WITH TERNARY OPERATOR
var d, hours, minutes, time, message;
// Get the current time’s hour and minute
components
d = new D...
PROJECT 1.0
Create a Task Manager

Make a .js file and add this code
var task1, task2, task3;

task1 = “Pay phone bill”;
t...
Upcoming SlideShare
Loading in …5
×

JavaScript 1 for high school

728 views

Published on

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

Published in: Technology
  • Be the first to comment

JavaScript 1 for high school

  1. 1. JAVASCRIPT SCRIPT OF THE INTERNET
  2. 2. 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.
  3. 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. 4. CHAPTER ONE SETTING UP
  5. 5. 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
  6. 6. IN HTML CODE Inline Separate file <script> <script src=“hello.js”> </script> alert(“Hello, world!”); </script>
  7. 7. 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.)
  8. 8. CHAPTER TWO VARIABLES
  9. 9. PROGRAMMING IS… Programming Data Manipulation Store Data Words Phrases • name • tax • length • width • firstName • taskList • timeToLive Camel casing (first letter of subsequent words = capital)
  10. 10. 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 */
  11. 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. 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. 13. 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
  14. 14. DATATYPE: number Numbers can include: 1. All possible number values 2. *Special Not-a-Number (NaN) values 3. Positive infinity 4. Negative infinity
  15. 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. 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. 17. DATATYPE: Boolean Booleans (capital B) are: 1. True 2. False
  18. 18. DATATYPE: undefined Undefined variables are: 1. Declared variables 2. With no values assigned to them
  19. 19. DATATYPE: null Null variables are: 1. Declared variables 2. Specifically assigned null (absent value)
  20. 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. 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. 22. 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
  23. 23. 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 <=
  24. 24. 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)
  25. 25. 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)
  26. 26. 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)
  27. 27. 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)
  28. 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. 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. 30. THE 3 LOGIC OPERATORS ARE… (Note: These convert values to Booleans and return one of the values.) Logic AND && Logic NOT ! Logic OR ||
  31. 31. 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”
  32. 32. 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
  33. 33. LOGIC OP: ! It inverts the Boolean value. Example: !true; !false; !0; !1; !“foo”; // // // // // returns returns returns returns returns false true true false false
  34. 34. LOGICAL FLOW IS… We use if…else statements and logical operators to evaluate conditions and fork code execution. Which path should we take?
  35. 35. 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);
  36. 36. 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;
  37. 37. 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”;

×