Scribd
Upload
2 views

chapter08

Chapter 8 of 'Fundamentals of Web Development' covers the fundamentals of JavaScript, including its history, data types, and various programming constructs such as conditionals, loops, arrays, and objects. It explains how JavaScript can be integrated into web pages through inline, embedded, and external scripts, and discusses the dynamic typing of variables. Additionally, the chapter introduces functions, their declarations, expressions, and the concept of prototypes in JavaScript.

Uploaded by

Azthyn Zax
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

chapter08

Chapter 8 of 'Fundamentals of Web Development' covers the fundamentals of JavaScript, including its history, data types, and various programming constructs such as conditionals, loops, arrays, and objects. It explains how JavaScript can be integrated into web pages through inline, embedded, and external scripts, and discusses the dynamic typing of variables. Additionally, the chapter introduces functions, their declarations, expressions, and the concept of prototypes in JavaScript.

Uploaded by

Azthyn Zax
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 62

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 - 2nd 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 10
Functions Object
Prototypes

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 10
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 10
Functions Object
Prototypes

11 Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Object Prototypes
There’s a better way

While the constructor function is simple to use, it can


be an inefficient approach for objects that contain
methods.
Prototypes are an essential syntax mechanism in
JavaScript, and are used to make JavaScript behave
more like an object-oriented language.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Object Prototypes
Methods get duplicated…

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Object Prototypes
Using Prototypes reduces duplication at run time.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Object Prototypes
Using Prototypes to Extend Other Objects

String.prototype.countChars = function (c) {


var count=0;
for (var i=0;i<this.length;i++) {
if (this.charAt(i) == c)
count++;
}
return count;
}
var msg = "Hello World";
console.log(msg + "has" + msg.countChars("l") + " letter l's");

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
Chapter 8 cont.
9 10
Functions Object
Prototypes

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.

You might also like