PAGE 1

What is JavaScript?

JavaScript is a is a cross-platform, object-oriented scripting

programming language that allows you to implement complex features
on web pages.

The third layer of the layer cake of standard web

technologies, two of which (HTML and CSS).

Displaying timely content updates, interactive maps,

animated 2D/3D graphics, scrolling video jukeboxes.

PAGE 2
 — Ranked the most commonly used programming
History of language, with 67.8% of developers employing it
in 2019.
JavaScript
— World’s most popular programming language is
synonymous with the rise of the internet itself.

— Created out of necessity, it is used to build

95.2% (1.52 billion) of websites

PAGE 3
 HISTORY
Early Releases ECMAScript
Origins (1995) & Adoption Standardization
(1995-1997) (1997-1999)

Created by Brendan Eich in Netscape handed over JavaScript

Made its official debut in
just 10 days while working at to ECMA International for
Netscape Navigator 2.0 in 1995.
Netscape Communications standardization.
Corporation.
Microsoft introduced its own The standardized
Initially named "Mocha" and version called JScript to specification, was released in
later changed to "LiveScript." compete with JavaScript. 1997 to ensure cross-browser
compatibility.
Renamed JavaScript, despite
having no relation to Java Quickly gained popularity for
JavaScript 1.1 and 1.2
(due to java being the most its ability to add dynamic
introduced additional features,
talked about language at the and interactive elements to
laying the groundwork for
time). static HTML pages.
modern JavaScript.

PAGE 4
 HISTORY
DOM and Dynamic
Web Pages
AJAX and Web 2.0 ECMAScript 5 & 6
(Late 1990s) (Early 2000s) (2009-2015)
Asynchronous JavaScript and XML (AJAX)
emerged, revolutionizing web development.
The Document Object Model ECMAScript 5 (2009)
(DOM) was introduced, AJAX allowed for asynchronous data introduced features like strict
retrieval from the server without requiring
allowing dynamic manipulation a page refresh. mode, JSON support, and new
of HTML documents. Played a crucial role in the development of
array methods.
Web 2.0 applications with enhanced user
interactivity.

Libraries and Frameworks

(Mid-2000s Onward): ECMAScript 6 (ES6 or ES2015)
JavaScript's interaction brought significant
jQuery (2006), became a widely adopted
with the DOM enabled JavaScript library, simplifying DOM enhancements, including
developers to create more manipulation and event handling. arrow functions, classes, and
responsive and interactive JavaScript frameworks like Angular Promises, making JavaScript
web pages. (2010), React (2013), and Vue.js (2014) more powerful and expressive.
streamlined the development of
complex, single-page applications.

PAGE 5
 HISTORY
Node.js and Server-
Modern JavaScript JavaScript in the
Side JavaScript
(2015 Onward) 2020s
(2009 Onward)

ECMAScript continues to Remains a dominant language

Developed by Ryan Dahl,
evolve with yearly updates, in web development, powering
allowed JavaScript to be run
bringing new features and a vast majority of websites
on the server side.
improvements to the language. and applications.

Marked a shift from Prominent features include Plays a key role in emerging
JavaScript's traditional role as async/await for better technologies such as Progressive
a client-side language to a asynchronous programming Web Apps (PWAs), serverless
versatile, full-stack language. and enhanced support for computing, and Internet of
modules. Things (IoT) applications.

PAGE 6
 FUNCTIONS

AESTHETIC

STRUCTURE

PAGE 7
 The Building Blocks of the Used to control presentation, Used to control the behavior
Internet formatting, and layout. of different elements.

Most difficult of the three.

Enhances the
Builds a webpage's Make websites more
webpage by adding
content structure interactive and allows for
formatting and style.
the building of more
complex sites.

PAGE 8
 HTML + CSS + JAVASCRIPT
PAGE 8
 PROCESS
HTML produces and arranges
the website's information

CSS adds style and formatting

to these structures

JS transforms those stylistic

All build on each other, from components into something with
which the user can interact
the most basic website
structures to the most complex
interactive features. Animated Web Designs
Interactive Elements
Browser Games

PAGE 9
 Example:
Bejeweled
Puzzle
Game

PAGE 10
 Core JavaScript
Client-side Server-side
JavaScript JavaScript
Extends the core language by Extends the core language
supplying objects to control a by supplying objects
browser and its Document Object relevant to running
Model (DOM). JavaScript on a server

Example: Example:
Communicate with a database, provide
Place elements on an HTML form and
continuity of information from one
respond to user events such as mouse
invocation to another of the application,
clicks, form input, and page navigation.
or perform file manipulations on a server.

PAGE 11
 javascript and java

JavaScript language resembles Java but does not

have Java's static typing and strong type checking.

JavaScript follows most Java expression syntax, naming

conventions and basic control-flow constructs which was the
reason why it was renamed from LiveScript to JavaScript.

PAGE 12
 JavaScript

Lightweight programming language(“scripting language”) and is

used to make web pages interactive. It can insert dynamic text
into HTML. JavaScript is also known as the browser’s language.

Java
Object-oriented programming language and has a virtual machine
platform that allows you to create compiled programs that run on
nearly every platform. Java promised, “Write Once, Run Anywhere”.

PAGE 13
 JavaScript Java

loosely typed language and has a strongly typed language & variables must
more relaxed syntax and rules be declared first to use in the program

contained within a web page and

standalone language
integrates with its HTML content.

does not support multithreading, supports multithreading, which allows

although it can simulate it through multiple threads of execution to run
the use of web workers. concurrently within a single program

wide variety of libraries and frameworks rich set of libraries and frameworks for
for building web applications, such as building enterprise applications, such as
React, Angular, and Vue Spring, Hibernate, and Struts.

uses less memory uses more memory

PAGE 14
 Basics
of
JavaScript

PAGE 15
 DOCUMENT OBJECT MODEL
( DOM )
Programming interface for web documents.

It represents the structure of a document as a tree of objects, where

each object corresponds to a part of the document, such as elements,
attributes, and text.

Provides a way for scripts to dynamically access and manipulate

the content, structure, and style of a document.

PAGE 16
 DOM Tree Analogy

Often conceptualized as a tree-like

structure, where each element in
an HTML or XML document is
represented as a node in the tree.

The DOM tree analogy helps

developers understand how
elements are nested and tree structure is known as the
DOM tree
structured within a document.

PAGE 17
 Root of The
Branches Tree

The HTML or XML

Branches stemming document itself is
from the root. like the root of
These elements can the tree. It
contain other represents the
elements, forming entire document.
a hierarchical
structure.

Text content, attributes, and other non-

Leaves element data are like the leaves of the
tree.They exist at the ends of the branches.

PAGE 18
 Selecting Elements in the DOM

1) getElementById
Selects an element based on its unique ID.

CODE:

var element = document.getElementById("myElementId");

PAGE 19
 Selecting Elements in the DOM

2) getElementsByClassName
Selects elements based on their class name. It
returns a collection (HTMLCollection).

CODE:

var elements =
document.getElementsByClassName("myClassName");

PAGE 20
 Selecting Elements in the DOM

3) getElementsByTagName
Selects elements based on their tag name. It returns
a collection (HTMLCollection).

CODE:

var elements = document.getElementsByTagName("div");

PAGE 21
 Selecting Elements in the DOM

4) getElementsByName
Selects elements based on their name attribute. It
returns a collection (NodeList).

CODE:

var elements = document.getElementsByName("myName");

PAGE 22
 Selecting Elements in the DOM

5) querySelector
Selects the first element that matches a CSS selector.

CODE:

var element = document.querySelector("#myElementId");

PAGE 23
 Selecting Elements in the DOM

6) querySelectorAll

Selects all elements that match a CSS selector. It returns a NodeList.

CODE:

var elements =
document.querySelectorAll(".myClassName");

PAGE 24
 basic JS PROPERTIES
.innerHTML .style .value
The Style object represents Sets or returns the value of the
The innerHTML property sets
an individual style statement. value attribute of a text field.
or returns the HTML content
list of properties: Contains the default value OR
(inner HTML) of an element.
HTTPS://WWW.W3SCHOOLS.COM/JSREF/DOM_OBJ
_STYLE.ASP
the value a user types in.

Return the innerHTML property: Return the style property: Return the value property:

element.innerHTML element.style textObject.value

Set the style property of an obj:

Set the innerHTML property: Set the value property:
(sample)
element.innerHTML =
element.style.color = element.value = text
text
"red";

PAGE 25
 element
selector use
=EXAMPLES=

PAGE 26
 Styling an Element
CODE:

INITIAL OUTPUT

FINAL OUTPUT

PAGE 27
 Creating Elements (destructive)
CODE:

FINAL OUTPUT:

PAGE 28
 Creating Elements (non-destructive)
CODE:

FINAL OUTPUT:

PAGE 29
 Creating Elements (non-destructive)
CODE:

FINAL OUTPUT:

PAGE 30
 Modify Text
CODE:

FINAL OUTPUT:

PAGE 31
 Modify Text
CODE:

FINAL OUTPUT:

PAGE 32
 Modifying Element Attributes
CODE:

INFLUENCES:

FINAL OUTPUT:

PAGE 33
 Modifying Element Attributes

CODE:

INFLUENCES:

FINAL OUTPUT:

PAGE 34
 Modifying Element Attributes

CODE:

INFLUENCES:

FINAL OUTPUT:

PAGE 35
 Modifying Element Attributes

CODE:

INFLUENCES:

FINAL OUTPUT:

PAGE 36
 ACTIVITY 1
(ELEMENT SELECTORS)

Make use of at least 3 selectors mentioned in

this presentation, and utilize at least 2
properties. No specific way of usage, but
application MUST be seen.

PAGE 37
 VARIABLES
Variables are used to store and manipulate data

4 Ways to Declare Variables

AUTOMATICALLY Instantly declare themselves.

It cannot be redeclared when using the let keyword.

LET Before being used, variables declared with let must be
declared.

It cannot be redeclared when using the const

CONST keyword. It is not possible to modify or reassign
these variables.

It can be redeclared when using the var keyword. If

VAR you have to support older browsers, then use var.

PAGE 38
 LET VS. VAR
LET

works only in the immediate

{ enclosing brackets }

VAR

can work anywhere INSIDE

the function

PAGE 39
 IDENTIFIERS
Every JavaScript variable needs to have a unique name

1) It must be UNIQUE (can be either short/descriptive names)

2) Identifiers are CASE SENSITIVE

3) No RESERVE KEYWORDS

4) Names MUST start with a letter, dollar sign($), or underscore ( _ )

5) No SPECIAL CHARACTERS

PAGE 40
 ASSIGNMENT OPERATOR

In JavaScript is a "assignment"
operator, not a "equal to" operator.
= equal symbol

ARITHMETIC OPERATORS

ADDITION + DIVISION /
Carry out
arithmetic on SUBTRACTION - MODULUS %
numbers
MULTIPLICATION * EXPONENTIATION **

PAGE 41
 Order of Increment &
Precedence Decrement
explains the sequence in INCREMENT (++)
which operations execute in
an arithmetic expression. is used to increase a
variable's value by one.

1) Parenthesis ( )
2) Exponents DECREMENT (--)
3) Multiplication / Division is used to decrease a
4) Addition / Subtraction variable’s value by one.

PAGE 42
 DATA TYPES
The type of data that the variable presently holds

Group of characters. Quotes are used when writing “Hello World”

1) STRING strings. Single or double quotations are acceptable. ‘Hi’

It can represent both integers and floating-

2) NUMBER point numbers.
10
3.14

3) BOOLEAN The only possible values for booleans are true and false.

JavaScript objects are containers for named values, called

4) OBJECT properties and methods.

5) ARRAY An array is a special variable, which can hold more than one value

PAGE 43
 Display String
Variables Concatenation
The console.log() method is Strings can be combined by
commonly used to display using the + operator between
variables. them.

EXAMPLES:

“Hello “ + “World”
We can display the
value of a variable by “100” + “200”
putting its identifier ‘abc’ + “def”
inside the parentheses.
2 + “5”

PAGE 44
 CONDITIONAL STATEMENTS
These are statements that execute actions depending on different
conditions. They work with both logical and comparison operators.

Comparison Logical
Operators Operators

PAGE 45
 Comparison Operators
These are used to compare two values.

EQUAL == GREATER THAN >

EQUAL VALUE AND
DATA TYPE
=== LESS THAN <

GREATER THAN OR
NOT EQUAL != EQUAL TO
>=

NOT EQUAL VALUE LESS THAN OR

AND DATA TYPE
!== EQUAL TO
<=

PAGE 46
 LOGICAL oPERATORS
These are combined with conditional statements to construct more
complex conditions. It enables programmers to combine multiple
conditions in a single expression.

AND && Both conditions should be TRUE

OR || At least one of the conditions is TRUE

NOT ! Inverts the outcome of a CONDITION

PAGE 47
 IF STATEMENT ELSE IF STATEMENT

Use the IF keyword and { } to check for a Use the EVEN IF keyword along with { } in
certain condition. combination with the IF keyword if you
want additional specific conditions. You
can add as many as you want.
NOTE: The code inside { }
will only be run if the
comparison is TRUE. Java has the NOTE: ELSE executes when IF
comparison is FALSE.
Following
NOTE: ELSE executes when IF
Conditional
comparison is FALSE. Statements: It refers to an if
statement within
The ELSE keyword and { } is used in
combination with the IF keyword. an if statement.

ELSE STATEMENT NESTED CONDITIONAL

STATEMENTS

PAGE 48
 CONDITIONAL
STATEMENTS
=EXAMPLES=

PAGE 49
 IF ELSE
STATEMENT STATEMENT

ELSE IF
STATEMENT NESTED
CONDITIONAL
STATEMENT

PAGE 50
 ACTIVITY 2
(IF STATEMENTS)

Create a program that will check the remarks of a student

based on the given average below.

98 - 100 = W/ HIGHEST HONORS 75 - 89 = PASSED

95 - 97 = W/ HIGH HONORS 0 - 74 = FAILED

90 - 94 = W/ HONORS 101 ABOVE = INVALID GRADE

PAGE 51
 SWITCH STATEMENTS
The switch statement chooses one of several code blocks
to execute.

You can utilize the switch statement instead of writing numerous

if...else statements.

The switch statement evaluates an expression, comparing its value

to an a series of case clauses, and then executes statements after
the first case clause with a matching value until a break statement
is met. If no case matches the value of the expression, the switch
statement's default clause is reached.

PAGE 52
 SWITCH
STATEMENTS
=eXAMPLE=

PAGE 53
 ACTIVITY 3
(SWITCH STATEMENT)

Create a program that outputs the equivalent level of

difficulty of a number variable.

1 - VERY EASY 4 - HARD

2 - EASY 5 - EXTREME

3 - NORMAL 6 - INSANE

PAGE 54
 syntax

Expression 1 Initialising variable, used as the counter

Expression 2 The given condition

Changes the value of the variable used as

Expression 3
the counter

PAGE 55
 ‘For’ Loop

Loops can execute a block of code a number of times.

PAGE 56
 ‘While’ Loop
The while loop loops through a block of code as long as
a specified condition is true.

PAGE 57
 ACTIVITY 4
(FOR AND WHILE LOOPS)

Create a loop that iterates and prints the

numbers: 1, 2, 4... until 10. Use
console.log to print your output.

PAGE 58
 Functions
The code to be executed, by the Defined with the function
function, is placed inside curly keyword, followed by a name,
brackets: {} followed by parentheses ().

Function names can contain The parentheses may include

letters, digits, underscores, and parameter names separated by
dollar signs (same rules as commas: (parameter1,
variables). parameter2, ...)

PAGE 59
 ARROW Functions
JavaScript Arrow functions provide us with a more precise
approach to writing Javascript Functions. The arrow functions
are introduced in the ES6 version. Arrow functions enable us
to write functions with simpler and shorter syntax and make
our code more readable and organized.

Ordinary JS Function
Sample:

PAGE 59
 ARROW Function sample

One-statement Arrow Function

Multi-statement Arrow Function

PAGE 59
 Arrays

A single variable that is used to store

elements of different data types.
JavaScript arrays are zero-indexed.
Javascript Arrays are not associative in
nature. It is an object that allows you to
store keyed collections of values.

PAGE 60
 Arrays (visual Diagram)

PAGE 60
 2 standard ways in
Declaring of an Array
1. Creating an array using array literal notation:

Let Array Name = [value1, value2, ...];

// Initializing while declaring

let courses = ["HTML", "CSS", "Javascript", "React"];
console.log(courses)

Output:
[ 'HTML', 'CSS', 'Javascript', 'React' ]

PAGE 61
 2 standard ways in
Declaring of an Array
1. Creating an array using array constructor:

Let Array Name = new Array [length];

array [index]

// Initializing while declaring

let myArray = new Array(2);
myArray[0]= HTML;
myArray[1]= CSS;
console.log(myArray);

Output:
[ 'HTML', 'CSS' ]

PAGE 62
Declaration // Initializing while declaring // Creates an array of 5
of an Array
let arr1 = new Array(3) undefined elements
arr1[0] = 10 let arr3 = new Array(5);
2. Creating an arr1[1] = 20 console.log("Array 3: ", arr3)
array using the arr1[2] = 30
JavaScript new console.log("Array 1: ", arr1)
// Creates an array with one
keyword: element
let arr4 = new Array("1BHK");
// Creates an array having
Let Array Name elements 10, 20, 30, 40, 50
console.log("Array 4: ", arr4)
= new Array();
let arr2 = new Array(10, 20, 30, Output:
40, 50); Array 1: [ 10, 20, 30 ]
Array 2: [ 10, 20, 30, 40, 50 ]
console.log("Array 2: ", arr2) Array 3: [ <5 empty items> ]
Array 4: [ '1BHK' ]

PAGE 63
 Recognizing a JavaScript Array
There are two methods by which we can recognize a
JavaScript array:
By using Array.isArray() method
By using instanceof method

two JavaScript array functions.

Both of these functions are widely used in industry and make the JavaScript
code clean, modularized, and easy to understand.
Array.prototype.every()
Array.prototype.some()

PAGE 64
 Array.isArray()
method
In JavaScript, Array.isArray() checks whether the provided argument is an
array or not. Array.isArray() checks if the passed value is an Array. It does
not check the value's prototype chain, nor does it rely on the Array
constructor it is attached to. It returns true for any value that was created
using the array literal syntax or the Array constructor. This makes it safe to
use with cross-realm objects, where the identity of the Array constructor is
different and would therefore cause instanceof Array to fail.

Syntax:
arr.every(callback(element[, index[, array]])[, thisArg])

PAGE 65
 Array.instanceof
() method

In JavaScript, the instanceof operator is used to check

whether an object belongs to a specific class or
constructor function. It checks the prototype chain of an
object to determine if the constructor appears in the
prototype chain.

Syntax:
object instanceof constructor

PAGE 66
 Array.prototype.
every()
This function is used when you need to validate each element of a given
array. It accepts a callback function as an argument which is called for
each element of the array. The callback function has to return either true
or false. If all elements of the array satisfy the validation function and thus
the callback function returns true on all elements of the array, then it
returns true. Otherwise, it returns false, as soon as it encounters the first
element which does not satisfy the validator function.

Syntax:
arr.every(callback(element[, index[, array]])[, thisArg])

PAGE 67
 Array.prototype.
some()
This is in a way opposite to Array.every(). This function is used when
you need to check if at least one element of a given array passes the test
implemented by the callback function. Array.some() accepts a callback
function as an argument which has to return either a true or false. The
callback function is called for each element of the array until it returns true
for at least one element of the array. If neither of the elements in the array
passes the test of the callback function, it returns false.

Syntax:
arr.some(callback(element[, index[, array]])[, thisArg])

PAGE 68
2 array methods
Array.Prototype.filter()
that modify the array and
return the modified array. It is used to get a new array that has
only those array elements which pass
the test implemented by the callback
Array.Prototype.filter() function. It accepts a callback function
Array.Prototype.map() as an argument. This callback function
has to return a true or false. Elements
for which the callback function
returned true are added to the newly
Syntax:
returned array.
array.filter(callback(element,
index, arr), thisValue)

PAGE 69
 Array.prototype.
map()
The map() method of Array instances creates a new array populated with the
results of calling a provided function on every element in the calling array.
Iterates over each element of an array: map() goes through each item in
the array one by one.
Applies a function to each element: For each element in the array, you can
apply a function that defines what you want to do with that element.
Creates a new array: It creates a new array based on the results of applying
the function to each element of the original array, without changing the
original array.

Syntax:
map(callbackFn) AND map(callbackFn, thisArg)

PAGE 70
 callback: This parameter holds the function
to be called for each element of the array.
currentValue: The parameter holds the
value of the elements being processed
Parameters currently.
index: This parameter is optional, it holds the
index of the currentValue element in the
This function accepts five array starting from 0.
array: This parameter is optional, it holds the
parameters as mentioned complete array on which Array.every is
above and described called.
below: thisArg: This parameter is optional, it holds
the context to be passed as this is to be used
while executing the callback function. If the
context is passed, it will be used as this for
each invocation of the callback function,
otherwise undefined is used as default.

PAGE 71
 Additional Info

Difference between Javascript arrays and object

Javascript arrays use indexes as numbers
objects use indexes as names.
When to use JavaScript Arrays and Objects?
Arrays are used when we want element names to be numeric.
Objects are used when we want element names to be strings.
JavaScript new Array() :
JavaScript has a built-in array constructor new Array().
[] can also be used.

PAGE 72
 ACTIVITY 5
(ARRAYS)

Create an array of at least 5 elements about

anything, and apply at least one method from
what was discussed. Use the documentation
to further give idea.

PAGE 73
 Objects
Objects in JavaScript, like objects in many other programming
languages, may be compared to real-world items. An object in
JavaScript is a self-contained entity having attributes and a
type. Consider a cup as an example. A cup is a physical item
having qualities. A cup has a color, a pattern, a weight, a
material made of, and so on. JavaScript objects, too, may have
attributes that determine their qualities. You can specify your
own objects in addition to those that are preset in the browser.

PAGE 74
 Objects
Objects in JavaScript are collections of key/value
pairs. The values can consist of properties and
methods, and may contain all other JavaScript data
types, such as strings, numbers, and Booleans.
Documentation if
needed:
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Referen
ce/Global_Objects/Object/assign

PAGE 75
 Objects vs Arrays
Arrays whenever we want to In objects, instead of just
create and store an ordered the item inside a list, they
list of multiple items in a consist of a key and a value.
single variable.

PAGE 76
 Object
property

Properties refer to the collection of values

which are associated with the JavaScript
object values which are associated with the
JavaScript object. This collection may not
follow any particular order. JavaScript
provides the feature to add, delete and
modify the properties. Properties are
denoted by name: values pairs.

PAGE 77
 Syntax: properties:

addition: It can
add new objects by
objectName.property simply giving
values to those
objectName["property"]
new objects.
objectName[expression] deletion: It uses
delete keyword, to
delete a property
from an object.

PAGE 78
 Object
METHOD

1. Object.create() method

The Object.create() method is used to create a new object

and link it to the prototype of an existing object. We can
create a job object instance, and extend it to a more
specific object.

PAGE 79
 Object
METHOD

2. Object.keys()

It creates an array containing the keys of an object. We can

create an object and print the array of keys. Object.keys()
and Object.values() allow you to return the data from an
object. As Object.keys converts your object’s keys into an
array of keys, the forEach() array method can be used to
iterate through the keys and values.

PAGE 80
 Object
METHOD

3. Object.values()

creates an array containing the values of an object.

Object.keys() and Object.values() allow you to return
the data from an object.

PAGE 81
 Object
METHOD

4. Object.entries()

creates a nested array of the key/value pairs of an

object. The Object.entries() method will only return
the object instance’s own properties, and not any
properties that may be inherited through its prototype.

PAGE 82
 Object
METHOD

5. Object.assign()

is used to copy values from one object to another. We

can create two objects, and merge them with
Object.assign().

PAGE 83
 Object
METHOD

6. Object.freeze()

prevents modification to properties and values of an

object, and prevents properties from being added or
removed from an object. Object.isFrozen() is available
to determine whether an object has been frozen or
not, and returns a Boolean.

PAGE 84
 Object
METHOD

7. Object.seal()

prevents new properties from being added to an object,

but allows the modification of existing properties. This
method is similar to Object.freeze(). Refresh your
console before implementing the code below to avoid
an error.

PAGE 85
 OBJECT
METHODS
=EXAMPLE=

PAGE 87
 OBJECT.freeze()

CODE: FINAL OUTPUT:

PAGE 88
 ACTIVITY 6
(OBJECTS)

Create an object list with the given arrays:

name = [Jed, Mary, Karl, Fiona]
age = [19, 20, 21, 22]
Then apply at least one object function as indicated in the
presentation.

PAGE 89
 Events
- An event is an action that occurs as per the user's
instruction as input and gives the output in response.

In Javascript, when the user hits the button, it goes as

requested and provides the response to the user in a form of
output. JavaScript implements a component called an event
handler that helps you acknowledge the certain action to the
events.

PAGE 90
 Events
ESSENTIALLY, an event handler is a section of code that
can be considered as a user-defined JavaScript function
that operates when a particular event fires. We can define
it as the registration of an event handler and can consider
it as an event listener that performs and listens as an event
and returns the result.
SYNTAX:

PAGE 91
 For example:

The user selects, clicks, or hovers the cursor over a

certain element.
The user chooses a key on the keyboard.
The user resizes or closes the browser window.
A web page finishes loading.
A form is submitted.
A video is played, paused, or ends.
An error occurs.

PAGE 92
 Common Event Listeners

Following is the list of JavaScript listeners’ definitions which

have specific types of methods.

Onload: When your page loads, it performs accordingly.

Onclick: When a user clicks on a button or inputs it occurs.
Onmouseover: When a user mouses over on the button.
Onfocus: Certain scenarios when a user keeps the cursor in
a form field.
Onblur: If a particular form field leaves within it.

PAGE 93
 event
listeners
=EXAMPLE=

PAGE 94
 event Listener
CODE:

FINAL OUTPUT:

PAGE 95
 ACTIVITY 7
(EVENTS LISTENER)

Showcase at least 2 of the events detailed in

this presentation and apply it to any element
of your choosing.

PAGE 96
 Asynchronous JavaScript

Asynchronous JavaScript is a programming paradigm that

allows certain operations to be performed independently of
the main program flow. This is particularly useful when
dealing with tasks that may take some time to complete,
such as fetching data from a server, reading a file, or
executing a time-consuming computation.

PAGE 97
 1. Callbacks:

Callbacks are functions that are passed as arguments to other

functions and are executed later, often after the asynchronous
operation is complete.

2. Promises:

Promises provide a cleaner way to work with asynchronous code.

They represent the eventual completion or failure of an
asynchronous operation and allow chaining of operations.

PAGE 98
 3. Async/Await:

Async functions and the await keyword provide a more

synchronous-looking way of dealing with asynchronous code.
Async functions return a Promise, and await is used to wait for
the resolution of a Promise.

PAGE 99
 libraries

JavaScript contains a standard library of

objects, such as Array, Date, and Math, and a
core set of language elements such as
operators, control structures, and
statements.

PAGE 100
 ARRAY
Can hold many values under a Enables storing a collection of
single name, and you can access multiple items under a single variable
the values by referring to an name, and has members for
index number performing common array operations.

ARRAY CONSTANT
DEMO:
SYNTAX: const cars = ["Saab", "Volvo", "BMW"];
const array_name = [item1, item2, ...]; document.getElementById("demo").i
nnerHTML = cars

ex: list of items (a list of car names, for RESULT:

example), storing the cars in single Saab,Volvo,BMW
variables could look like this:

PAGE 101
 ARRAY CONSTANT

— Array length() Array join() —

— Array toString() Array concat() —
— Array pop() Array flat() —
— Array push() Array splice() —
— Array shift() Array slice() —
— Array unshift()

PAGE 102
 ARRAY methods
METHOD DESCRIPTION SYNTAX

Array Is used to retrieve the number of array.length

length() items stored in a list. array.length = number

Array Returns a string representing the

toString()
toString() specified array and its elements.

Removes the last element from an

Array array and returns that value to the pop()
pop() caller.

PAGE 102
 ARRAY methods
METHOD DESCRIPTION SYNTAX
push()
Adds the specified elements to push(element1)
Array the end of an array and returns push(element1,element2)
push() the new length of the array. push(element1, element2,
/* …, */ elementN)

removes the element at the zeroth

index and shifts the values at
Array consecutive indexes down, then
shift()
shift() returns the removed value. If the
length property is 0, undefined is
returned.

PAGE 102
 ARRAY methods
METHOD DESCRIPTION SYNTAX

inserts the given values to the unshift()

beginning of an array-like object. unshift(element1)
Array Array.prototype.push() has similar unshift(element1,element2)
unshift() behavior to unshift(), but applied unshift(element1,element2,
to the end of an array. /* …, */ elementN)

Creates and returns a new string by

Array concatenating all of the elements in join()
join() this array, separated by commas or a join(separator)
specified separator string.

PAGE 102
 ARRAY methods
METHOD DESCRIPTION SYNTAX
concat()
concat(value1)
Array The concat method creates a
concat(value1, value2)
concat() new array
concat(value1, value2, /* …,
*/ valueN)

Instances creates a new array

Array with all sub-array elements flat()
flat() concatenated into it recursively flat(depth)
up to the specified depth.

PAGE 102
 ARRAY methods
METHOD DESCRIPTION SYNTAX

Changes the contents of an array

splice(start)
Array by removing or replacing existing
splice(start, deleteCount)
splice() elements and/or adding new splice(start, deleteCount, tem 1)
elements in place.

Returns a shallow copy of a

portion of an array into a new
slice()
Array array object selected from start
slice(start)
slice() to end (end not included) where
slice(start, end)
start and end represent the
index of items in that array.

PAGE 102
 ARRAY
Methods
=EXAMPLES=

PAGE 109
 array Length

CODE:

FINAL OUTPUT:

PAGE 110
 ARRAY SORT
CODE: FINAL OUTPUT:

<script>
// Create and display an array: The reverse() method reverses
const fruits = ["Banana", "Orange", "Apple", "Mango"]; the elements in an array.
document.getElementById("demo1").innerHTML = fruits; By combining sort() and
// First sort the array reverse() you can sort an array
fruits.sort(); in descending order:
// Then reverse it:
fruits.reverse(); Banana,Orange,Apple,Mango
document.getElementById("demo2").innerHTML = fruits; Orange,Mango,Banana,Apple
</script>

PAGE 110
 ARRAY SORT
FINAL OUTPUT:
CODE:

<script>
const numbers = [45, 4, 9, 16, 25]; 45
let txt = ""; 4
numbers.forEach(myFunction);
9
document.getElementById("demo").innerHTML = txt;
function myFunction(value, index, array) { 16
txt += value + "<br>"; 25
}
</script>

PAGE 110
 ARRAY Slice pt.1
(GETTING A LIST OF ELEMENTS WITH A GIVEN INDEX)

CODE:

FINAL OUTPUT:

PAGE 110
 ARRAY Slice pt.2
(GETTING A LIST OF SPECIFIC ELEMENTS OF THE ARRAY)

CODE:

FINAL OUTPUT:

PAGE 110
 ARRAY Slice pt.3
(GETTING A SPECIFIC ELEMENT AT THE END OF THE ARRAY)

CODE:

FINAL OUTPUT:

PAGE 110
 ACTIVITY 8
(ARRAY METHODS)

With the array made before in Activity 5

Find:
The 3rd element of the array
The Last element of the array
Reverse the array

PAGE 117
 DATE
Let us work with dates:

ex. Tue Dec 05 2023 20:40:21 GMT+0800 (China Standard Time)

new Date()

3 types of js date input formats:

TYPE EXAMPLE
ISO Date "2015-03-25" (The International Standard)
Short Date "03/25/2015"
Long Date "Mar 25 2015" or "25 Mar 2015"

PAGE 118
 DATE GET METHODS
Method Description
getFullYear() Get year as a four digit number (yyyy)
getMonth() Get month as a number (0-11)
getDate() Get day as a number (1-31)
getDay() Get weekday as a number (0-6)
getHours() Get hour (0-23)
getMinutes() Get minute (0-59)
getSeconds() Get second (0-59)
getMilliseconds() Get millisecond (0-999)
getTime() Get time (milliseconds since January 1, 1970)

PAGE 119
 SET DATE METHODS
let you set date values (years, months, days, hours, minutes,
seconds, milliseconds) for a Date Object.
Method Description
setDate() Set the day as a number (1-31)
setFullYear() Set the year (optionally month and day)
setHours() Set the hour (0-23)
setMilliseconds() Set the milliseconds (0-999)
setMinutes() Set the minutes (0-59)
setMonth() Set the month (0-11)
setSeconds() Set the seconds (0-59)
setTime() Set the time (milliseconds since January 1, 1970)

PAGE 120
 DATE
Methods
=EXAMPLE=

PAGE 121
 DATE methods

CODE:

FINAL OUTPUT:

PAGE 122
 ACTIVITY 9
(Date Method)

Play around with the functions indicated

in this presentation, use at least 5 of ANY
date methods and output it in 5 different
paragraph tags.

PAGE 123
 MATH
allows you to perform mathematical tasks on numbers.
Syntax: Math.property
Demo:
<p>Math.PI returns the ratio of a circle's circumference to its diameter:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.PI;
</script>

Result:
Math.PI returns the ratio of a circle's circumference to its diameter:
3.141592653589793

PAGE 124
 MATHEMATICAL CONSTANTS
(Math properties)

Math.E // returns Euler's number

Math.PI // returns PI
Math.SQRT2 // returns the square root of 2
Math.SQRT1_2 // returns the square root of ½
Math.LN2 // returns the natural logarithm of 2
Math.LN10 // returns the natural logarithm of 10
Math.LOG2E // returns base 2 logarithm of E
Math.LOG10E // returns base 10 logarithm of E

PAGE 125
 NUMBER TO INTEGER

Math.round(x) Returns x rounded to its nearest integer

Math.ceil(x) Returns x rounded up to its nearest integer
Math.floor(x) Returns x rounded down to its nearest integer
Math.trunc(x) Returns the integer part of x (new in ES6)

PAGE 126
JS MATH METHOD
abs(x) Returns the absolute value of x
acos(x) Returns the arccosine of x, in radians
acosh(x) Returns the hyperbolic arccosine of x
asin(x) Returns the arcsine of x, in radians
asinh(x) Returns the hyperbolic arcsine of x
atan(x) Returns the arctangent of x as a numeric value between -
PI/2 and PI/2 radians
atan2(y, x) Returns the arctangent of the quotient of its arguments
atanh(x) Returns the hyperbolic arctangent of x
cbrt(x) Returns the cubic root of

PAGE 127
 JS MATH METHOD
ceil(x) Returns x, rounded upwards to the nearest integer
cos(x) Returns the cosine of x (x is in radians)
cosh(x) Returns the hyperbolic cosine of x
exp(x) Returns the value of Ex
floor(x) Returns x, rounded downwards to the nearest integer
log(x) Returns the natural logarithm (base E) of x
max(x, y, z, ..., n) Returns the number with the highest value
min(x, y, z, ..., n) Returns the number with the lowest value
pow(x, y) Returns the value of x to the power of y

PAGE 128
 JS MATH METHOD
random() Returns a random number between 0 and 1
round(x) Rounds x to the nearest integer
sign(x) Returns if x is negative, null or positive (-1, 0, 1)
sin(x) Returns the sine of x (x is in radians)
sinh(x) Returns the hyperbolic sine of x
sqrt(x) Returns the square root of x
tan(x) Returns the tangent of an angle
tanh(x) Returns the hyperbolic tangent of a number
trunc(x) Returns the integer part of a number (x)

PAGE 129
 math
Methods
=EXAMPLES=

PAGE 130
 math.max

CODE:

OUTPUT:

PAGE 131
 math.min

CODE:

OUTPUT:

PAGE 132
 math.ceil

CODE:

OUTPUT:

PAGE 133
 ACTIVITY 10
(Math Methods)

Create a variable with a number, and

then use at least 6 Math Methods and
apply it. Show output through
console.log().

PAGE 134
 JAVASCRIPT LIBRARIES
JavaScript libraries are collections of functions,
methods, or objects designed to execute practical tasks
in web pages or JavaScript-based applications.

These libraries, akin to a book library, allow developers

to reuse and repurpose code for various functions, such
as creating slideshows. Like readers revisiting favorite
books or exploring new perspectives, developers can use
these libraries to save time and effort.

PAGE 135
 JAVASCRIPT LIBRARIES
The purpose of JavaScript libraries is to
streamline the development process, providing
pre-written code that developers can leverage
for specific tasks, ultimately enhancing
efficiency and simplicity in web development.

PAGE 136
 What are JS
Libraries
Used For?
What Else
Can JS Do?

PAGE 137
 1. Data Visualization in Maps EXAMPLES: Chart.js, Apexcharts,
and Charts Algolia Places

2. DOM Manipulation EXAMPLES: jQuery, Umbrella JS

3. Data Handling EXAMPLES: D3.js

4. Database EXAMPLES: TaffyDB, ActiveRecord.js

EXAMPLES: wForms, LiveValidation,

5. Forms
Validanguage, qForms

PAGE 138
 6. Animations EXAMPLES: Anime.js, JSTweener

7. Image Effects EXAMPLES: ImageFX, Reflection.js

8. Fonts EXAMPLES: typeface.js

EXAMPLES: Date.js, Sylvester,

9. Math and String Function
JavaScript URL Library

10. URL Library and its

EXAMPLES: ReactJS, Glimmer.js
Components

PAGE 139
 The Most Popular JavaScript Libraries
YOU CAN USE JAVASCRIPT LIBRARIES FOR:

1. jQuery 10. Chart.js 19. Masonry

As we’ve said, JavaScript
2. React.js 11. Cleave.js 20. Omniscient
libraries are used to
perform specific functions. 3. D3.js 12. Choreographer.js 21. Parsley

There are around 83 of 4. Underscore.js 13. Glimmer 22. Popper.js

them, each created to serve 5. Lodash 14. Granim.js 23. Three.js

some purpose, and we are 6. Algolia Places 15. fullPage.js 24. Screenfull.js

going to cover some of their 7. Anime.js 16. Leaflet 25. Polymer

usability in this section. 8. Animate On Scroll 17. Multiple.js 26. Vc

9. Bideo.js 18. Moment.js

PAGE 140
 JAVASCRIPT FRAMEWORK
JavaScript frameworks are tools for developing applications that
enable developers to customize code to meet specific requirements.
Comparatively, web application development is likened to
constructing a house. While creating everything from scratch is an
option, it is time-consuming and costly. Alternatively, using pre-built
materials, akin to bricks in construction, accelerates development,
saving time and money. Similarly, in application development,
frameworks provide pre-written code as building blocks, aligning with
the application's architecture. This approach streamlines the
development process, facilitates quicker adaptation to website
design, and simplifies working with JavaScript.

PAGE 141
 The Most Popular JavaScript Frameworks

1. Angular JS 4. Vue.js 7. Backbone.js 10. Ionic 13. Meteor.js

2. Bootstrap 5. Ember.js 8. Next.js 11. Webix 14. MithrilJS

3. Aurelia 6. Node.js 9. Mocha 12. Gatsby 15. ExpressJS

Some Useful Must-Know JavaScript Tools

1. Slick 3. iziModal 5. Shave

2. Babel 4. ESLint 6. Webpack

PAGE 142
 jquery
jQuery is a lightweight,
"write less, do more",
JavaScript library.
The purpose of jQuery
is to make it much
easier to use
JavaScript on your
website.

PAGE 143
 jquery
jQuery takes a lot of common tasks that require many lines
of JavaScript code to accomplish and wraps them into
methods that you can call with a single line of code.
BASIC SYNTAX: LEGEND:
1. A $ sign to define/access
jQuery
2. A (selector) to "query (or
find)" HTML elements
3. A jQuery action() to be
performed on the
element(s)

PAGE 144
 jquery
jQuery also simplifies a lot of the complicated things from
JavaScript, like AJAX calls and DOM manipulation.
The jQuery syntax is tailor-made for selecting HTML
elements and performing some action on the element(s).

vs

PAGE 145
 d3.js
JQUERY
DOCUMENTATION:
LIVE
DEMONSTRATION
OF JQUERY

PAGE 146
 anime.js
Anime.js is a small,
lightweight JavaScript
library with a simple and
powerful API. It works with
the DOM element, CSS, and
JavaScript objects.

PAGE 147
 anime.js

DOCUMENTATION:
https://animejs.com/do
LIVE
cumentation/ DEMONSTRATION
OF ANIME.JS

PAGE 148
 d3.js
A JavaScript library called D3.js is
used to create dynamic and
interactive data visualizations in
web browsers. It is an acronym for
Data-Driven Documents, which
enables programmers to use data,
HTML, CSS, and SVG to generate
unique graphics.

PAGE 149
 d3.js
d3.js
DOCUMENTATION: LIVE
DEMONSTRATION
OF D3.JS

PAGE 150
 conclusion

PAGE 151
 https://developer.mozilla.org/enUS/docs/Web/JavaScript/Guide/Introduction#javascript_and_java
https://www.w3schools.com/js/default.asp
Difference between Java and JavaScript - GeeksforGeeks
https://techbootcamps.utexas.edu/blog/html-css
javascript/#:~:text=Like%20we%20mentioned%20earlier%2C%20HTML,a%20form%20for%20a%20contest.
https://blog.hubspot.com/marketing/web-design-html-css-javascript
How does JavaScript work with HTML and CSS? | Reintech media
https://www.simplilearn.com/tutorials/javascript-tutorial/javascript-events
https://www.geeksforgeeks.org/javascript-object-properties/
https://www.digitalocean.com/community/tutorials/how-to-use-object-methods-in-javascript#object-
assign
https://www.geeksforgeeks.org/javascript-arrays/
JavaScript Functions (w3schools.com)
https://careerkarma.com/blog/javascript-array-length/
https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

PAGE 1