Advanced JavaScript CHP 03

Advanced JavaScript encompasses more complex features and concepts of the

language, which are essential for building efficient and scalable web
applications.
JavaScript Features
1. First-Class Functions: Functions are treated as first-class citizens,
meaning they can be assigned to variables, passed as arguments, and
returned from other functions.
2. Closures: Functions that remember their lexical scope, even when
executed outside that scope.
3. Prototypes: Allows object inheritance.
4. Asynchronous Programming: Use of callbacks, promises, and
async/await for handling asynchronous operations.

Features of JavaScript
JavaScript offers several powerful features that make it a preferred language for
web development:
1. Dynamic Typing: Variables in JavaScript can hold different data types at
different times.
2. Interpreted Language: JavaScript code is executed line by line, making
it platform-independent.
3. Lightweight and Fast: Designed to perform efficiently in web browsers.
4. Event-Driven Programming: JavaScript supports events such as user
actions and browser events.
5. Platform Independent: Runs on any device with a compatible browser.
6. Rich Libraries and Frameworks: Supported by frameworks like React,
Angular, and libraries like jQuery.
7. Object-Oriented: Supports object creation using classes and prototypes.
8. High Interactivity: Enables dynamic content updates without page
reloads (e.g., AJAX).
Types of Scripting
Scripting can be categorized into the following main types based on its use and
execution:
1. Client-Side Scripting
• Executes in the user’s browser.
• Used for creating interactive web pages and user interface elements.
• Common examples include:
o Languages: JavaScript, VBScript.
o Tasks: Form validation, animations, and DOM manipulation.
• Advantages:
o Reduces server load.
o Provides faster feedback to users.

2. Server-Side Scripting
• Executes on the server before sending the page to the browser.
• Handles database interactions, file management, and user authentication.
• Common examples include:
o Languages: PHP, Python, Ruby, [Link], [Link].
o Tasks: Fetching data from databases, creating dynamic content,
and managing user sessions.
• Advantages:
o Provides security for sensitive operations.
o Enables dynamic content generation.
Difference Between Server-Side Scripting and Client-Side Scripting

Aspect Client-Side Scripting Server-Side Scripting

Execution Executes on the user’s Executes on the web server.
web browser.
Languages JavaScript, VBScript, PHP, Python, Ruby, [Link],
HTML (embedded [Link].
scripting).
Purpose Enhances user interaction Handles backend processes,
and provides dynamic database interaction, and
content. secure operations.
Speed Faster since it doesn't Slower as it requires
require server interaction communication with the server.
for execution.
Examples Validating form data Handling login authentication,
before submission, fetching data from databases,
animations, and DOM and generating web pages
updates. dynamically.
Dependency Requires a web browser Requires a server to process
to execute scripts. and run scripts.
Security Less secure as the code is More secure as the code
visible to the user. remains hidden on the server.
Usage Used for user interface Used for core logic, business
enhancements. processes, and data storage.
Communication No interaction with the Communicates with databases
server required once and servers for data exchange.
loaded.
Switch Case
The switch statement is used for conditional branching based on different cases. It provides a cleaner
way to handle multiple conditions compared to using multiple if-else statements.

let day = 3;
switch(day) {
case 1:
[Link]("Monday");
break;
case 2:
[Link]("Tuesday");
break;
case 3:
[Link]("Wednesday");
break;
default:
[Link]("Invalid day");
}

Looping Structures
Loops are used to execute a block of code repeatedly as long as a specified condition is true.
1. For Loop
Used to repeat a block of code a specific number of times.
[Link] Loop
Executes a block of code as long as the condition is true
[Link]-While Loop
Executes a block of code at least once before checking the condition.
[Link]-In Loop
Iterates over the properties of an object.
Break and Continue Statements in JavaScript
Break Statement
The break statement is used to immediately terminate a loop or a switch statement. When a break
statement is encountered, the control exits the loop or switch and continues with the next statement
after it.

Continue Statement
The continue statement is used to skip the current iteration of a loop and move to the next iteration
without terminating the loop entirely.

Key Differences Between break and continue

Aspect Break Continue

Functionality Terminates the loop or switch. Skips the current iteration only.

Effect Exits the loop or switch entirely. Moves to the next iteration.

Usage Used when you want to stop a loop or Used when you want to skip specific
Context switch. iterations.

Objects in JavaScript

Definition
In JavaScript, an object is a standalone entity with properties and type. Objects
are used to store collections of data and more complex entities.

Creating Objects
1. Using Object Literals:
The simplest way to create an object.

const person = {
name: "John",
age: 30,
greet: function() {
return `Hello, my name is ${[Link]}.`;
 }
};
[Link]([Link]());

2. Using the Object Constructor:

const person = new Object();
[Link] = "John";
[Link] = 30;
[Link] = function() {
return `Hello, my name is ${[Link]}.`;
};
[Link]([Link]());

Document Object Model (DOM)

What is the DOM?

The Document Object Model (DOM) is a programming interface for web
documents. It represents the structure of a web page as a tree of objects,
allowing developers to manipulate the content, structure, and style of a website
dynamically using JavaScript.

Key Features of the DOM

1. Tree-Like Structure:
o Represents HTML or XML documents as a hierarchy of nodes.
o Each node represents an element, attribute, or piece of text.
2. Live Updates:
o The DOM reflects real-time changes to the document, and updates
are immediately rendered in the browser.
3. Platform-Independent:
 o Provides a standardized way to interact with documents across
different platforms and browsers.
4. Event Handling:
o Enables developers to respond to user actions like clicks, keyboard
input, and more.

The window object is a global object in JavaScript that represents the browser
window in which the script is running. It provides various methods and
properties to interact with and control the browser environment, such as
managing the DOM (Document Object Model), handling events, and accessing
the browser's features.
Here are some key features and properties of the window object:
1. Window Methods:
o [Link](): Displays an alert dialog box.
o [Link](): Displays a confirmation dialog box and returns
a boolean based on the user's action.
o [Link](): Displays a prompt dialog box to get input from
the user.
o [Link](): Opens a new browser window or tab.
o [Link](): Closes the current browser window.
o [Link](): Sets a timer to execute a function after a
specified delay.
o [Link](): Sets a timer to execute a function at regular
intervals.
2. Window Properties:
o [Link]: Provides access to the document object,
allowing manipulation of the DOM.
o [Link]: Represents the current URL of the window, with
properties for the protocol, host, pathname, etc.
o [Link]: Provides methods to interact with the browser's
history, such as back(), forward(), and go().
 o [Link]: Provides information about the user's screen, such
as width, height, and color depth.
o [Link] and [Link]: Return the inner
width and height of the window (excluding scrollbars).

In JavaScript, events are actions or occurrences that happen in the browser,

usually as a result of user interactions, such as clicking a button, submitting a
form, or moving the mouse. These events can be captured and handled using
JavaScript to trigger specific functions when they occur.
Common Types of Events:
1. Mouse Events:
o click: Occurs when a user clicks on an element.
o dblclick: Occurs when a user double-clicks on an element.
o mouseover: Occurs when the mouse pointer enters an element.
o mouseout: Occurs when the mouse pointer leaves an element.
o mousemove: Occurs when the mouse pointer is moved over an
element.
2. Keyboard Events:
o keydown: Occurs when a key is pressed down.
o keyup: Occurs when a key is released.
o keypress: Occurs when a key is pressed (deprecated in modern
browsers, use keydown or keyup).
3. Form Events:
o submit: Occurs when a form is submitted.
o change: Occurs when the value of an input element changes.
o focus: Occurs when an element gains focus (e.g., an input field).
o blur: Occurs when an element loses focus.
o input: Occurs when the value of an input element is changed (e.g.,
typing in a text box).
 4. Window Events:
o load: Occurs when the page finishes loading.
o resize: Occurs when the browser window is resized.
o scroll: Occurs when the user scrolls the page.
o beforeunload: Occurs before the user leaves the page or closes the
browser.
5. Touch Events (for touch-enabled devices):
o touchstart: Occurs when the user touches the screen.
o touchmove: Occurs when the user moves their finger across the
screen.
o touchend: Occurs when the user releases their finger from the
screen.

In JavaScript, the String object is a built-in object that is used to represent and
manipulate a sequence of characters. Strings in JavaScript are immutable,
meaning once a string is created, it cannot be changed, but new strings can be
generated from operations on existing strings.
String Creation:
You can create a string in JavaScript using either single quotes ('), double quotes
("), or backticks (`) for template literals
Key Properties of String:
1. length: Returns the number of characters in the string.
2. charAt(index): Returns the character at the specified index.
3. charCodeAt(index): Returns the Unicode value of the character at the
specified index.
4. indexOf(searchValue): Returns the index of the first occurrence of a
specified substring, or -1 if not found.
5. lastIndexOf(searchValue): Returns the index of the last occurrence of a
specified substring, or -1 if not found.
6. slice(startIndex, endIndex): Extracts a portion of the string from
startIndex to endIndex (not including endIndex).
 7. substring(startIndex, endIndex): Similar to slice(), but does not accept
negative indices. It extracts a portion of the string between startIndex and
endIndex.
8. toUpperCase(): Converts the string to uppercase.
9. toLowerCase(): Converts the string to lowercase.
[Link](): Removes whitespace from both ends of the string.
[Link](searchValue, newValue): Replaces the first occurrence of a
specified substring with a new substring.
[Link](separator): Splits the string into an array of substrings, based on a
specified separator.
[Link](searchValue): Checks if the string contains a specified
substring.
[Link](searchValue): Checks if the string starts with a specified
substring.
[Link](searchValue): Checks if the string ends with a specified
substring.

Date object in JavaScript!

What is the Date Object?
• The Date object in JavaScript represents a specific point in time.
• It's used to work with dates and times, such as getting the current date and
time, setting specific dates, and performing date/time calculations.
Creating a Date Object
• Without arguments: Creates a Date object representing the current date
and time.
• With arguments:
1. Year, Month, Day
2. Year, Month, Day, Hours, Minutes, Seconds, Milliseconds:
3. Date string
Methods of the Date Object
• Getting Date/Time Components:
o getFullYear(): Returns the year (4 digits)
o getMonth(): Returns the month (0-11)
o getDate(): Returns the day of the month (1-31)
o getHours(): Returns the hour (0-23)
o getMinutes(): Returns the minutes (0-59)
o getSeconds(): Returns the seconds (0-59)
o getMilliseconds(): Returns the milliseconds (0-999)

Setting Date/Time Components:

• setFullYear(year, month, day)
• setMonth(month)
• setDate(day)
• setHours(hours)
• setMinutes(minutes)
• setSeconds(seconds)
• setMilliseconds(milliseconds)

Other Useful Methods:

• getTime(): Returns the number of milliseconds since January 1, 1970,
[Link] UTC.
• toString(): Returns a string representation of the date.
• toDateString(): Returns a short date string.
• toTimeString(): Returns a short time string.
• toISOString(): Returns an ISO 8601 extended format string.
• toLocaleString(): Returns a localized string representation.
Number object in JavaScript!
What is the Number Object?
• In JavaScript, the Number object is a wrapper for primitive number
values.
• It provides methods and properties to work with numbers in a more
object-oriented way.
• While you can often work directly with primitive numbers, the Number
object can be useful in certain situations.
•

Creating a Number Object

• Using the Number() constructor:
Properties of the Number Object
• MAX_VALUE: Represents the maximum representable number in
JavaScript.
• MIN_VALUE: Represents the minimum representable number in
JavaScript.
• NaN: Represents "Not-a-Number." It's a special value that indicates a
number that is not a valid number (e.g., the result of [Link](-1)).
• POSITIVE_INFINITY: Represents positive infinity.
• NEGATIVE_INFINITY: Represents negative infinity.
• prototype: Allows you to add methods to all Number objects.
Methods of the Number Object
• toString(): Converts the number to a string.
• toFixed(): Formats the number with a specified number of digits after the
decimal point.
• toExponential(): Converts the number to exponential notation.
• toPrecision(): Formats the number to a specified number of significant
digits.
• valueOf(): Returns the primitive value of the Number object.
• isNaN(): Checks if a value is NaN.
Array object in JavaScript!
What is the Array Object?
• In JavaScript, an Array is an ordered collection of values.
• These values, which can be of any data type (numbers, strings, objects,
etc.), are stored in indexed positions.
• Arrays are fundamental data structures for organizing and manipulating
data.
Creating an Array
• Using the Array() constructor:
• Using array literal syntax (more common):
Accessing Array Elements
• Use zero-based indexing to access elements:
Modifying Array Elements
• Assign new values to specific indices:
Array Methods
• Adding/Removing Elements:
o push(): Adds one or more elements to the end of the array.
o pop(): Removes the last element from the array.
o unshift(): Adds one or more elements to the beginning of the array.
o shift(): Removes the first element from the array.
o splice(): Adds/removes elements at a specific index.
o slice(): Creates a shallow copy of a portion of the array.
• Searching/Iterating:
o indexOf(): Returns the index of the first occurrence of an element.
o includes(): Checks if an element exists in the array.
o forEach(): Executes a provided function once for each array
element.
 o map(): Creates a new array by applying a function to each
element.
o filter(): Creates a new array with elements that pass a test
condition.
o reduce(): Applies a function to accumulate a single value from the
array.
• Other Methods:
o join(): Joins all array elements into a string.
o reverse(): Reverses the order of elements in the array.
o sort(): Sorts the elements of the array.
o concat(): Creates a new array by concatenating existing arrays.