JavaScript 1:
Language
Fundamentals
Chapter 8
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
© 2017 Pearson
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd
Ed.
http://www.funwebdev.com
Chapter 8
1 2
JavaScript 1: Where Does
Language
JavaScript Go?
Fundamentals
3 Variables and
Data Types 4 JavaScript
Output
5 Conditionals
6 Loops
7 8
Arrays Objects
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 8 cont.
9
Functions Object
11 Summary
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 8
1 2
JavaScript 1: Where Does
Language
JavaScript Go?
Fundamentals
3 Variables and
Data Types 4 JavaScript
Output
5 Conditionals
6 Loops
7 8
Arrays Objects
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
What is JavaScript & What Can It Do?
Client-Side Scripting
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
What is JavaScript & What Can It Do?
JavaScript’s History
• JavaScript was introduced by Netscape in their
Navigator browser back in 1996
• JavaScript that is supported by your browser
contains language features
• not included in the current ECMAScript
specification and
• missing certain language features from that
specification
The latest version of ECMAScript is the Sixth
Edition (generally referred to as ES6 or ES2015 ).
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
What is JavaScript & What Can It Do?
JavaScript and Web 2.0
• Early JavaScript had only a few common uses:
• 2000s onward saw more sophisticated uses for
JavaScript
• AJAX as both an acronym and a general term
• Chapters 10 and 19 will cover AJAX in much more
detail.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
What is JavaScript & What Can It Do?
JavaScript in Contemporary Software Development
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 8
1 2
JavaScript 1: Where Does
Language
JavaScript Go?
Fundamentals
3 Variables and
Data Types 4 JavaScript
Output
5 Conditionals
6 Loops
7 8
Arrays Objects
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Where Does JavaScript Go?
Inline JavaScript
Inline JavaScript refers to the practice of including JavaScript
code directly within certain HTML attributes
<a href="JavaScript:OpenWindow();">more info</a>
<input type="button" onClick="alert('Are you sure?');" />
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Where Does JavaScript Go?
Embedded JavaScript
Embedded JavaScript refers to the practice of placing
JavaScript code within a <script> element
<script type="text/javascript">
/* A JavaScript Comment */
alert("Hello World!");
</script>
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Where Does JavaScript Go?
External JavaScript
external JavaScript files typically contain function definitions,
data definitions, and entire frameworks.
<head>
<script type="text/javascript" src="greeting.js"></script>
</head>
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Where Does JavaScript Go?
Users without JavaScript
• Web crawler
• Browser plug-in.
• Text-based client.
• Visually disabled client.
• The <NoScript> Tag
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 8
1 2
JavaScript 1: Where Does
Language
JavaScript Go?
Fundamentals
3 Variables and
Data Types 4 JavaScript
Output
5 Conditionals
6 Loops
7 8
Arrays Objects
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Variables and Data Types
Variables in JavaScript are dynamically typed
This simplifies variable declarations, since we do not
require the familiar data-type identifiers
Instead we simply use the var keyword
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Variables and Data Types
Example variable declarations and Assignments
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Variables and Data Types
Data Types
two basic data types:
• reference types (usually referred to as objects) and
• primitive types
Primitive types represent simple forms of data.
• Boolean, Number, String, …
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Variables and Data Types
Reference Types
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 8
1 2
JavaScript 1: Where Does
Language
JavaScript Go?
Fundamentals
3 Variables and
Data Types 4 JavaScript
Output
5 Conditionals
6 Loops
7 8
Arrays Objects
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
JavaScript Output
alert("Hello world");
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
JavaScript Output
var name = "Randy";
document.write("<h1>Title</h1>");
// this uses the concatenate operator (+)
document.write("Hello " + name + " and welcome");
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
JavaScript Output
• alert() Displays content within a pop-up box.
• console.log() Displays content in the Browser’s
JavaScript console.
• document.write() Outputs the content (as markup)
directly to the HTML document.
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
JavaScript Output
Chrome JavaScript Console
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
JavaScript Output
Fun with document.write()
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 8
1 2
JavaScript 1: Where Does
Language
JavaScript Go?
Fundamentals
3 Variables and
Data Types 4 JavaScript
Output
5 Conditionals
6 Loops
7 8
Arrays Objects
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Conditionals
If, else if, else
if (hourOfDay > 4 && hourOfDay < 12) {
greeting = "Good Morning";
}
else if (hourOfDay >= 12 && hourOfDay < 18) {
greeting = "Good Afternoon";
}
else {
greeting = "Good Evening";
}
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Conditionals
switch
switch (artType) {
case "PT":
output = "Painting";
break;
case "SC":
output = "Sculpture";
break;
default:
output = "Other";
}
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Conditionals
Conditional Assignment
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Conditionals
Truthy and Falsy
In JavaScript, a value is said to be truthy if it
translates to true, while a value is said to be falsy if it
translates to false.
• Almost all values in JavaScript are truthy
• false, null, "", '', 0, NaN, and undefined are falsy
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 8
1 2
JavaScript 1: Where Does
Language
JavaScript Go?
Fundamentals
3 Variables and
Data Types 4 JavaScript
Output
5 Conditionals
6 Loops
7 8
Arrays Objects
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Loops
While and do . . . while Loops
var count = 0;
while (count < 10) {
// do something
// ...
count++;
}
count = 0;
do {
// do something
// ...
count++;
} while (count < 10);
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Loops
For Loops
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 8
1 2
JavaScript 1: Where Does
Language
JavaScript Go?
Fundamentals
3 Variables and
Data Types 4 JavaScript
Output
5 Conditionals
6 Loops
7 8
Arrays Objects
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Arrays
Arrays are one of the most commonly used data
structures in programming.
JavaScript provides two main ways to define an array.
• object literal notation
• use the Array() constructor
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Arrays
object literal notation
The literal notation approach is generally preferred
since it involves less typing, is more readable, and
executes a little bit quicker
var years = [1855, 1648, 1420];
var countries = ["Canada", "France",
"Germany", "Nigeria",
"Thailand", "United States"];
var mess = [53, "Canada", true, 1420];
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Arrays
Some common features
• arrays in JavaScript are zero indexed
• [] notation for access
• .length gives the length of the array
• .push()
• .pop()
• concat(), slice(), join(), reverse(), shift(), and sort()
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Arrays
Arrays Illustrated
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 8
1 2
JavaScript 1: Where Does
Language
JavaScript Go?
Fundamentals
3 Variables and
Data Types 4 JavaScript
Output
5 Conditionals
6 Loops
7 8
Arrays Objects
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Objects
Object Creation—Object Literal Notation
var objName = {
name1: value1,
name2: value2,
// ...
nameN: valueN
};
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Objects
Object Creation—Object Literal Notation
Access using either of:
• objName.name1
• objName["name1"]
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Objects
Object Creation—Constructed Form
// first create an empty object
var objName = new Object();
// then define properties for this object
objName.name1 = value1;
objName.name2 = value2;
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 8 cont.
9
Functions Object
Prototypes
11 Summary
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Functions
Function Declarations vs. Function Expressions
Functions are the building block for modular code in
JavaScript.
function subtotal(price,quantity) {
return price * quantity;
}
The above is formally called a function declaration,
called or invoked by using the () operator
var result = subtotal(10,2);
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Functions
Function Declarations vs. Function Expressions
// defines a function using a function expression
var sub = function subtotal(price,quantity) {
return price * quantity;
};
// invokes the function
var result = sub(10,2);
It is conventional to leave out the function name in function
expressions
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Functions
Anonymous Function Expressions
// defines a function using an anonymous function expression
var calculateSubtotal = function (price,quantity) {
return price * quantity;
};
// invokes the function
var result = calculateSubtotal(10,2);
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Functions
Nested Functions
function calculateTotal(price,quantity) {
var subtotal = price * quantity;
return subtotal + calculateTax(subtotal);
// this function is nested
function calculateTax(subtotal) {
var taxRate = 0.05;
var tax = subtotal * taxRate;
return tax;
}
}
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Functions
Hoisting in JavaScript
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Functions
Callback Functions
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Functions
Callback Functions
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Functions
Objects and Functions Together
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Functions
Scope in JavaScript
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Functions
Scope in JavaScript
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Functions
Scope in JavaScript
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Functions
Function Constructors
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 8 cont.
9
Functions
11 Summary
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 8 cont.
9 10
Functions
11 Summary
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Summary
Key Terms
ActionScript ES2015 libraries
Adobe Flash ES6 loop control variable
anonymous functions exception method
assignment expressions minification
AJAX external JavaScript files module pattern
applet falsy namespace conflict
arrays fail-safe design problem
arrow functions for loops objects
associative arrays functions object literal notation
browser extension function constructor primitive types
browser plug-in function declaration property
built-in objects function expression prototypes
callback function inline JavaScript reference types
client-side scripting immediately-invoked scope (local and global)
closure function strict mode
conditional assignment Java applet throw
dot notation JavaScript frameworks truthy
dynamically typed JavaScript Object Notation try. . . catch block
ECMAScript JSON undefined
embedded JavaScript lexical scope variables
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Summary
Questions?
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
