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
