Scribd
Upload
10 views48 pages

Week 5 All Topics Slides

This document provides an overview of JavaScript, including its history, evolution, and various scripting methods such as inline, embedded, and external JavaScript. It covers fundamental concepts like variables, data types, arrays, loops, and functions, highlighting their syntax and usage in contemporary software development. Additionally, it discusses the significance of JavaScript in the context of Web 2.0 and modern web applications.

Uploaded by

Mahiraa Shahzadi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views48 pages

Week 5 All Topics Slides

This document provides an overview of JavaScript, including its history, evolution, and various scripting methods such as inline, embedded, and external JavaScript. It covers fundamental concepts like variables, data types, arrays, loops, and functions, highlighting their syntax and usage in contemporary software development. Additionally, it discusses the significance of JavaScript in the context of Web 2.0 and modern web applications.

Uploaded by

Mahiraa Shahzadi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as 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 repeat
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
repeat
• 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