Scribd
Upload
18 views62 pages

FSD Unit 2 2.3 A

Uploaded by

Muskan gupta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views62 pages

FSD Unit 2 2.3 A

Uploaded by

Muskan gupta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, 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 - 2 nd
Ed.
http://www.funwebdev.com
Chapter 8
JavaScript 1:
1 Language
Fundamentals
2 Where Does
JavaScript Go?

3 Variables and
Data Types 4 JavaScript
Output

5 Conditionals
6 Loops

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

11 Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Chapter 8
JavaScript 1:
1 Language
Fundamentals
2 Where Does
JavaScript Go?

3 Variables and
Data Types 4 JavaScript
Output

5 Conditionals
6 Loops

Objects
8
Arrays
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
What is JavaScript & What Can It Do?
Client-Side Scripting

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd 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 - 2 nd Ed.


What is JavaScript & What Can It Do?
JavaScript in Contemporary Software Development

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Chapter 8
JavaScript 1:
1 Language
Fundamentals
2 Where Does
JavaScript Go?

3 Variables and
Data Types 4 JavaScript
Output

5 Conditionals
6 Loops

Objects
8
Arrays
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd 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 - 2 nd 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 - 2 nd 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 - 2 nd Ed.


Chapter 8
JavaScript 1:
1 Language
Fundamentals
2 Where Does
JavaScript Go?

3 Variables and
Data Types 4 JavaScript
Output

5 Conditionals
6 Loops

Objects
8
Arrays
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.


Variables and Data Types
Example variable declarations and Assignments

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.


Variables and Data Types
Reference Types

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Chapter 8
JavaScript 1:
1 Language
Fundamentals
2 Where Does
JavaScript Go?

3 Variables and
Data Types 4 JavaScript
Output

5 Conditionals
6 Loops

Objects
8
Arrays
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
JavaScript Output

alert("Hello world");

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd 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 - 2 nd Ed.


JavaScript Output
Chrome JavaScript Console

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


JavaScript Output
Fun with document.write()

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Chapter 8
JavaScript 1:
1 Language
Fundamentals
2 Where Does
JavaScript Go?

3 Variables and
Data Types 4 JavaScript
Output

5 Conditionals
6 Loops

Objects
8
Arrays
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd 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 - 2 nd Ed.


Conditionals
Conditional Assignment

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.


Chapter 8
JavaScript 1:
1 Language
Fundamentals
2 Where Does
JavaScript Go?

3 Variables and
Data Types 4 JavaScript
Output

5 Conditionals
6 Loops

Objects
8
Arrays
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.


Loops
For Loops

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Chapter 8
JavaScript 1:
1 Language
Fundamentals
2 Where Does
JavaScript Go?

3 Variables and
Data Types 4 JavaScript
Output

5 Conditionals
6 Loops

Objects
8
Arrays
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd 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 - 2 nd 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 - 2 nd Ed.


Arrays
Arrays Illustrated

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Chapter 8
JavaScript 1:
1 Language
Fundamentals
2 Where Does
JavaScript Go?

3 Variables and
Data Types 4 JavaScript
Output

5 Conditionals
6 Loops

Objects
8
Arrays
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Objects
Object Creation—Object Literal Notation

var objName = {
name1: value1,
name2: value2,
// ...
nameN: valueN
};

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Objects
Object Creation—Object Literal Notation

Access using either of:


• objName.name1
• objName["name1"]

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.


Chapter 8 cont.
Functions
9 10 Object
Prototypes

11 Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd 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 - 2 nd 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 - 2 nd 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 - 2 nd Ed.


Functions
Hoisting in JavaScript

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Functions
Callback Functions

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Functions
Callback Functions

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Functions
Objects and Functions Together

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Functions
Scope in JavaScript

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Functions
Scope in JavaScript

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Functions
Scope in JavaScript

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Functions
Function Constructors

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Chapter 8 cont.
Functions
9 10 Object
Prototypes

11 Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.


Object Prototypes
Methods get duplicated…

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Object Prototypes
Using Prototypes reduces duplication at run time.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.


Chapter 8 cont.
Functions
9 10 Object
Prototypes

11 Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Summary
Key Terms
ActionScript ES6 method
Adobe Flash exception minification
anonymous functions expressions module pattern
assignment external JavaScript files namespace conflict
AJAX falsy problem
applet fail-safe design objects
arrays for loops object literal notation
arrow functions functions primitive types
associative arrays function constructor property
browser extension function declaration prototypes
browser plug-in function expression reference types
built-in objects inline JavaScript scope (local and global)
callback function immediately-invoked strict mode
client-side scripting function throw
closure Java applet truthy
conditional assignment JavaScript frameworks try. . . catch block
dot notation JavaScript Object Notation undefined
dynamically typed JSON variables
ECMAScript lexical scope
embedded JavaScript libraries
ES2015 loop control variable

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.


Summary
Questions?

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy