Scribd
Upload
13 views48 pages

Topic 37-45

Uploaded by

ayeshahs005
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
13 views48 pages

Topic 37-45

Uploaded by

ayeshahs005
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/ 48

Web System and Tecnologies CS 521

Introduction to JavaScript
Client Side Scripting
Introduction to JavaScript
JavaScript 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
• Commonly used version of ECMAScript is the Sixth Edition (ES6)
• 12th Edition (ECMAScript 2021 ) released in 2021
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
JavaScript in Contemporary
Software Development
Web System and Tecnologies CS 521
Writing and Storing the Script
Inline JavaScript

• Inline JavaScript refers to the practice of includingJavaScript


code directly within certain HTML attributes

<a href="javaScript:OpenWindow();">more info</a>

<input type="button" onClick="alert('Are you sure?');" />


Writing and Storing the Script
Embedded JavaScript

• Embedded JavaScript refers to the practice of placing


JavaScript code within a <script> element
Writing and Storing the Script
External JavaScript

• External JavaScript files typically contain function definitions,


data definitions, and entire frameworks.
Writing and Storing the Script
Users without JavaScript

• Web crawler
• Browser plug-in
• Text-based client
• Visually disabled client
• The <NoScript> Tag
Introduction to JavaScript
JavaScript 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
• Commonly used version of ECMAScript is the Sixth Edition (ES6)
• 12th Edition (ECMAScript 2021 ) released in 2021
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
JavaScript in Contemporary
Software Development
Variables and Data Types
Variables

• 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
Example variable declarations and Assignments
Data Types

• Two basic data types:


• Reference types (usually referred to as objects) and
• primitive types (Boolean, Number, String, …)
Reference Types
JavaScript Output
Output
• alert()
• Displays content within a pop-up box.
• document.write()
• Outputs the content (as markup)
• console.log()
• Displays content in the Browser’s JavaScript console.
Message (alert box)
• Syntax
• alert(“Hello World”);
• Avoid frequent use
Document

• Use the JavaScript’s document object


Fun with document.write()
Console’s Log

• Allmost all modern browsers provide a JavaScript for


developers and debugging
• Use console.log() to display output in the console
Chrome JavaScript Console
Conditions
Conditional Statements

• If ... else if ... else


• Switch
• Conditional Assignment
Conditional Statements
Switch Statement
Conditional Assignment
Truthy and Falsy
Arrays
Arrays (Object Literal Notation)
Array Constructor
• We can use the Array constructor to create
an array

var countries = new Array("Canada",


"France","Germany",
"Nigeria","Thailand", "United
States");

var A = new Array(5);


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()
Arrays
Arrays Illustrated
Loops

Types of Loops

Used for repetitively executing statements


while
do while
for
forEach
Loops
While and do . . . while Loops

var count = 0;
while (count < 10) {
// do something
// ...
count++;
}
count = 0;
do {
// do something
// ...
count++;
} while (count < 10);
Loops

For Loop
Loops
ForEach Loop

• forEach is used with an array


• Processes each element of an array

var countries = ["Canada", "France",


"Germany", "Nigeria",
"Thailand", "United States"];
countries.forEach( function(country) {
console.log(country);
}
)
Objects

Object Creation - Object Literal Notation

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

Object Creation - Object Literal Notation

• Access using either of:


objName.name1
objName["name1"]
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;
Web Systems and Technologies

Functions (1)
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);
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
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);
Functions
Arrow Functions

• Have a shorter syntax


• Can convert normal functions to arrow
• Useful for anonymous and call functions

//normal function
function square(n) {
return n*n;
}

//arrow function
sq = (n) => n*n

//Another example
sum = (n,m) => n+m

You might also like