SIX WEEKS SUMMER TRAINING

ON

JAVASCRIPT FOR WEB DEVELOPMENT

BY

BOARD INFINITY

A training report

Submitted in partial fulfilment of the requirements for the award of degree of

Bachelor of Technology

Computer Science & Engineering

Submitted to

LOVELY PROFESSIONAL UNIVERSITY

PHAGWARA, PUNJAB

From 03/06/2023 to 12/07/2023

SUBMITTED BY

Name of student: Kummara Chaitanya Krishna

Registration Number: 12110151

Signature of the Student:

1
 List of Contents

S.NO. TOPIC Page No.

1. STUDENT DECLARATION 3

2. TRAINING CERTIFICATE FROM 4

ORGANIZATION (BOARD INFINITY)

3. Chapter-1 INTRODUCTION OF THE COURSE 5 - 13

UNDERTAKEN

4. CHAPTER 2. JAVASCRIPT 14 - 24
FUNDAMENTALS

5. CHAPTER 3. ADVANCED JAVSCRIPT 25 - 29

6. CHAPTER 4. JAVASCRIPT APPLICATIONS 30 - 33

7. CHAPTER 5. PROJECT 34 - 36

8. Final Chapter- CONCLUSION and FUTURE 37 - 38

PRESPECTIVES

9. REFERENCES 39 - 40

2
 Student Declaration

To whom so ever it may concern

I, Kummara Chaitanya Krishna, REG. NO.- 12110151, hereby declare that the six weeks
summer training on “JAVASCRIPT FOR WEB DEVELOPMENT” at BOARD
INFINITY from JUNE,2023 to JULY, 2023, under the guidance of MR. AKSHAY
MITTAL (Web Development tutor at Board Infinity) is a record of original work for the
partial fulfilment of the requirements for the award of the degree, Computer Science
Engineering, LOVELY PROFESSIONAL UNIVERSITY.

Name of student: Kummara Chaitanya Krishna

Registration Number: 12110151

Signature of the student:

Dated: 12/07/2023

3
TRAINING CERTIFICATE FROM BOARD INFINITY

4
 Chapter -1

1. Introduction of the course undertaken

1.1Introduction To Web Development?

Web development is the process of creating websites and web applications that are accessible
via the internet. It involves a combination of design, programming, and various technologies
to build interactive and user-friendly online experiences. Web development encompasses
everything from simple static web pages to complex dynamic web applications. Here's an
introduction to the key aspects of web development:

1. Front-End Development:

Front-end development, often referred to as client-side development, is the process of

creating and implementing the user interface and user experience of a website or web
application. It involves designing and building the parts of a website that users interact
with directly in their web browsers. Technologies commonly used in front-end
development include:

HTML (Hypertext Markup Language): HTML is used to structure the content

of a webpage. It defines the elements and layout of a page, such as headings, paragraphs,
images, links, forms, and more. HTML provides the foundation for organizing and
presenting information on the web.

CSS (Cascading Style Sheets): CSS is used to control the visual appearance and
layout of HTML elements. It enables developers to define colors, fonts, spacing,
positioning, and other stylistic aspects of a webpage. CSS allows for consistent design
and a visually pleasing user experience across different devices and screen sizes.

JavaScript: JavaScript is a programming language that adds interactivity and dynamic

behavior to web pages. With JavaScript, developers can create features like animations,
interactive forms, real-time updates, and more. It enables the manipulation of HTML and
CSS elements in response to user actions or other events.

5
2. Back-End Development:

Back-end development focuses on the server-side functionality of a website or web

application. It involves handling data, processing requests, and managing the overall
logic behind the scenes. Common back-end technologies include:
Server-Side Languages: Languages like PHP, Python (Django), Ruby (Ruby on
Rails), and Node.js are used to handle server-side logic.
Databases: Storing, managing, and retrieving data from databases such as MySQL,
PostgreSQL, MongoDB, and others.
Server Environment: Configuring and maintaining the server that hosts the web
application.

3. Full-Stack Development:
Full-stack engineers have a strong understanding of both front-end and back-end
technologies, which enables them to work on all facets of web development. They are
able to create full-blown web apps from the ground up.
4. Frameworks and libraries for web development:
Frameworks and libraries offer pre-built tools and solutions to speed up development.
They provide standardized approaches to doing typical activities, which can speed up
programming and guarantee better code organization. In both the front-end and back-
end, examples include React, Angular, Vue.js and Flask.
5. Responsive Web Design:
The importance of responsive web design has increased with the popularity of mobile
devices. All screen sizes, including those of smartphones, tablets, and desktops,
require websites to adapt and appear well.
6. Web Development Process:
The steps involved in the web development process typically include:
Defining the project's objectives, user experience, and visual design are all
parts of planning and design.
Development includes writing code, adding functionality, and making both front-
end and back-end components.

6
 Testing entails finding and repairing flaws, making sure an application is compatible
across browsers, and evaluating user interactions.
Uploading the website or application to a server and making it available to users is
known as deployment.
Maintenance Ongoing upgrades, problem repairs, and enhancements based on
feedback from users and shifting requirements.
7. Version control:
Making use of version control tools like Git enables developers to effectively
communicate, track changes, and manage codebase versions.

8. Security and performance:

In order to safeguard user information and the application itself, web developers must
take security best practices into account. Performance optimization makes ensuring
that users have a rapid and seamless experience on the website.
9. Technologies and Trends:
The construction and delivery of applications are being shaped by trends like
Progressive Web Apps (PWAs), serverless architecture, and APIs in the field of web
development, which is quickly evolving.

7
1.2 INTRODUCTION TO HTML

HTML (Hypertext
Markup Language) is a
fundamental building
block of web
development. It provides
the structure and content
for web pages, allowing
browsers to interpret and
display information to
users. Here's a brief

1. Structure:

HTML uses a series of elements to structure content within a web page. Each element
is enclosed in angle brackets ("<" and ">") and consists of a tag name. Elements can
be nested inside one another to create a hierarchical structure.

2. Tags and Elements:

HTML elements are made up of tags, which have opening and closing parts. The
opening tag denotes the start of an element, while the closing tag includes a forward
slash ("/") to indicate the end of the element. For example:

<p>This is a paragraph. </p>

3. Head and Body:

An HTML document is divided into two main sections: the <head> and the <body>.
The <head> section contains meta-information about the document, such as the title
that appears in the browser's tab. The <body> section contains the visible content of
the web page.

8
4. Text Content:

You can use various text-based elements to create headings, paragraphs, lists, and
more:

<h1>This is a Heading 1</h1>

<p>This is a paragraph.</p>

<ul>

<li>Item 1</li>

<li>Item 2</li>

</ul>

5. Links and Images:

HTML allows you to create hyperlinks using the <a> (anchor) element and embed
images using the <img> element.

6. Attributes:

HTML elements can have attributes that provide additional information about the
element. Attributes are placed within the opening tag and consist of a name and a
value.

9
1.3 INTRODUCTION TO CSS

CSS (Cascading Style

Sheets) is a crucial part
of web development that
focuses on the
presentation and visual
design of web pages. It
works alongside HTML
to control how content is
displayed on a webpage.
Here's a brief introduction to CSS

1. Selectors and Rules:

CSS uses selectors to target HTML elements and apply styles to them. A rule consists of a
selector followed by a set of declarations enclosed in curly braces. Each declaration consists
of a property and a value.

2. Inline, Internal, and External CSS:

CSS can be applied in various ways. Inline CSS is added directly to an HTML element
using the style attribute. Internal CSS is placed within a <style> element in the <head>
section of an HTML document. External CSS is stored in separate .css files and linked to
HTML documents using the <link> element.

3. Styling Properties:

CSS offers a wide range of properties to control the appearance of elements, including:

Color: Changing text and background colors.

Typography: Setting fonts, font sizes, and text alignment.

Margins and Padding: Controlling spacing around elements.

Borders: Adding borders around elements.

10
Backgrounds: Defining background colors or images.

Positioning: Controlling element placement on the page.

Layout: Creating responsive layouts with flexible boxes (Flexbox) and grid systems (CSS
Grid).

Transitions and Animations: Adding motion and effects to elements.

4. Class and ID Selectors:

You can apply styles to specific elements using class and ID selectors. Classes are denoted
with a dot (.) and can be used on multiple elements, while IDs are denoted with a hash (#)
and should be unique on a page.

5. Media Queries:

Media queries allow you to apply different styles based on the device's screen size or other
characteristics. This is crucial for creating responsive designs that adapt to various devices.

6. Pseudo-classes and Pseudo-elements:

Pseudo-classes are used to define styles for specific states of an element, such as when it's
hovered over or clicked. Pseudo-elements are used to style parts of an element, such as the
first line or first letter.

11
1.4 INTRODUCTION TO JAVASCRIPT:

JavaScript is a dynamic
programming language that is
essential to contemporary web
development. It enables
developers to produce
interactive and flexible online
apps, boosting user interaction
and usability. The primary
goal of this paper is to give
readers a fundamental understanding of JavaScript's fundamental ideas and capabilities.

HISTORY OF JAVASCRIPT:

1995: JavaScript is introduced by Brendan Eich at Netscape Communications. Originally

called "Mocha," then "LiveScript," and finally "JavaScript," it adds interactivity to web
pages.

1997: JavaScript is standardized as ECMAScript by the European Computer Manufacturers

Association (ECMA). ECMAScript 1 is released.

Early 2000s: The rise of AJAX (Asynchronous JavaScript and XML) enables more dynamic
web applications by allowing data exchange without page reloads.

Mid-2000s: JavaScript libraries like jQuery gain popularity, simplifying DOM manipulation.

2009: Node.js is introduced, enabling server-side JavaScript development and revolutionizing

backend programming.

2015: ECMAScript 2015 (ES6) is released, bringing major language enhancements like
arrow functions, classes, and modules.

12
Present: JavaScript is the cornerstone of web development, with numerous libraries and
frameworks (e.g., React, Angular, Vue.js) simplifying complex application building.

Ongoing: ECMAScript versions continue to be released annually, introducing new features

and improvements to the language.

Future: JavaScript remains integral to the web, with ongoing efforts to improve
performance, security, and developer experience. Web Assembly expands possibilities by
enabling languages beyond JavaScript for web applications.

HOW TO USE JAVASCRIPT:

JS code must be inserted between <script> and </script> tags. You can place any number of
scripts in an HTML document. Scripts can be placed in the <body>, or in the <head> section
of an HTML page, or in both. Placing scripts at the bottom of the <body> element improves
the display speed, because script interpretation slows down the display. Scripts can also be
placed in external files. External scripts are practical when the same code is used in many
different web pages. JavaScript files have the file extension .js. To use an external script, put
the name of the script file in the src (source) attribute of a <script> tag. Ex.<script
src="myScript.js"></script> You can place an external script reference in <head> or <body>
as you like. The script will behave as if it was located exactly where the <script> tag is
located. Placing scripts in external files has some advantages:

i. It separates HTML and code.

ii. It makes HTML and JavaScript easier to read and maintain.

13
 Chapter-2

2. FUNDAMENTALS OF JS PROGRAMMING

2.1. BASIC SYNTAX:

IDENTIFIERS

General rules for constructing identifiers(case-sensitive) are:

i. Names can contain letters, digits, underscores, and dollar signs.

ii. Names must begin with a letter but can also begin with $ and _.

iii. Names are case sensitive (y and Y are different variables).

iv. Reserved words (like JavaScript keywords) cannot be used as names.

Declaration: var carName; //no value (undefined)

Initialization: carName = "Volvo";

It's a good programming practice to declare all variables at the beginning of a script. A
variable declared without a value will have the value undefined. If you re-declare a
JavaScript variable, it will not lose its value.

COMMENTS:

JS comments can be used to explain JavaScript code, and to make it more readable. JS
comments can also be used to prevent execution, when testing alternative code. There are two
types:

1. Single Line Comments: It start with //. Any text between // and the end of the line will be
ignored by JS (will not be executed). Example:
// no value (undefined)
var carName;

2. Multi-line Comments: It start with /* and end with */. Any text between /* and */ will be
ignored by JS. This example uses a multi-line comment (a comment block) to explain the
code. Example:
/* A variable declared without a value will have the value undefined. */

14
DATA TYPES:

JavaScript variables can hold different data types: numbers, strings, objects and more. In
programming, data types is an important concept. To be able to operate on variables, it is
important to know something about the type. JavaScript has dynamic types. This means
that the same variable can be used to hold different data types.

i. Strings: A string (or a text string) is a series of characters like "John Doe". Strings
are written with quotes. You can use single or double quotes. Example:
a. var carName1 = "Volvo XC60"; // Using double quotes
b. var carName2 = 'Volvo XC60'; // Using single quotes
c. var answer3 = 'He is called "Johnny"'; // Double quotes inside single quotes
ii. Numbers: JS has only one type of numbers. Numbers can be written with, or without
decimals. Example:

a. var x1 = 34.00; // Written with decimals

b. var x2 = 34; // Written without decimals

iii. Booleans: They can only have two values: true or false. Example:
var x = 5, y = 5, z = 6;
(x == y) // Returns true
(x == z) // Returns false
iv. Arrays: JS arrays are written with square brackets []. Array items are separated by
commas. The following code declares (creates) an array called cars, containing three
items (car names). Example:
var cars = ["Saab", "Volvo", "BMW"];
v. Objects: JavaScript objects are written with curly braces {}. Object properties are
written as name:value pairs, separated by commas. Example:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

15
 2.2 CONDITIONS AND LOOPS IN JS:
JS conditional statements are used to perform different actions based on different
conditions. Kinds:

a. Use if to specify a block of code to be executed, if a specified condition is true

b. Use else to specify a block of code to be executed, if the same condition is false
c. Use else if to specify a new condition to test, if the first condition is false
d. Use switch to specify many alternative blocks of code to be executed.

The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a condition is
true. Syntax:
if (condition) {
// block of code to be executed if the condition is true
}

The else Statement

Use the else statement to specify a block of code to be executed if the condition is false.

if (condition) {

// block of code to be executed if the condition is true

} else {

// block of code to be executed if the condition is false

The else if Statement

Use the else if statement to specify a new condition if the first condition is false. Syntax:

if (condition1) {

// block of code to be executed if condition1 is true

} else if (condition2) {

// block of code to be executed if the condition1 is false and condition2 is true

} else {

16
 // block of code to be executed if the condition1 is false and condition2 is
false

Switch Statement:

The switch statement in JavaScript is a control structure that allows you to evaluate an
expression against multiple possible cases and execute different blocks of code based on the
matched case. Here's how the switch statement works:

EXAMPLE: -

switch (new Date().getDay()) {

case 0:

day = "Sunday"; break;

case 1:

day = "Monday"; break;

case 2:

day = "Tuesday"; break;

case 3:

day = "Wednesday"; break;

case 4:

day = "Thursday"; break;

case 5:

day = "Friday"; break;

case 6:

day = "Saturday";

17
Loops: -

JS loops can execute a block of code a number of times. Kinds:

i. for - loops through a block of code a number of times.

ii. for/in - loops through the properties of an object. (Will be covered in objects topic)

iii. for/of - loops through the values of an iterable object. It lets you loop over Arrays,
Strings, Maps, NodeLists, and more. (Will be covered in arrays topic)

iv. while - loops through a block of code while a specified condition is true.

v. do/while - will execute the code block once, before checking if the condition is true,
then it will repeat the loop as long as the condition is true.

FOR LOOP:

A for loop in JavaScript is a control structure that allows you to execute a block of code
repeatedly for a specific number of iterations. It consists of three parts: initialization,
condition, and iteration, all defined within the loop's parentheses.

Here's a brief description of the for loop's components and how it works:

for (initialization; condition; iteration) {

// Code to be executed in each iteration

1.Initialization: This part is executed before the loop starts. It typically involves declaring
and initializing a loop control variable.

2.Condition: The condition is evaluated before each iteration. If the condition evaluates to
true, the loop continues; otherwise, it terminates.

3.Iteration: The iteration part is executed after each iteration. It's usually used to modify the
loop control variable in preparation for the next iteration.

18
WHILE LOOP:

A while loop in JavaScript is a control structure that repeatedly executes a block of code as
long as a specified condition evaluates to true. The loop continues to execute as long as the
condition remains true.

Here's a brief description of how the while loop works:

while (condition) {

// Code to be executed as long as the condition is true}

In a while loop:

Condition: The condition is evaluated before each iteration. If the condition evaluates to
true, the loop body is executed. If the condition evaluates to false, the loop terminates, and
the program continues with the code following the loop.

DO-WHILE LOOP:

A do-while loop in JavaScript is a control structure that is similar to the while loop, but it
guarantees that the loop's code block is executed at least once, regardless of whether the
specified condition is true or false. After the initial execution, the loop continues as long as
the condition evaluates to true.

Here's a brief description of how the do-while loop works:

do {

// Code to be executed at least once

} while (condition);

In a do-while loop:

1.Code Block: The code block inside the do section is executed first, regardless of the
condition.

2.Condition: After executing the code block, the condition in the while section is evaluated.
If the condition is true, the loop will execute the code block again. If the condition is false,
the loop terminates.

19
2.3 FUNCTIONS AND METHODS IN JS PROGRAMMING

FUNCTIONS:

Function Definition:

At its essence, a function is a self-contained unit of code designed to execute a specific

task. By encapsulating functionality, functions promote code organization and contribute
to the creation of modular applications.

EXAMPLE: -

function greet(name) {

console.log ("Hello, " + name + "!");

greet("Alice"); // Outputs: Hello, Alice!

Parameters and Arguments:

Parameters serve as placeholders within a function's blueprint, while arguments are the
actual values passed to the function during invocation. This mechanism empowers
developers to build versatile functions that can operate on dynamic data.

EXAMPLE: -

function greet(name) {

console.log ("Hello, " + name + "!");

greet("Alice"); // "Alice" is the argument

Return Statement:

The return statement within a function marks the point at which the function concludes
and sends a value back to the caller. This allows functions to be both data processors and
providers.

20
EXAMPLE: -

function add(x, y) {

return x + y;

let sum = add (3, 5); // sum is 8

Function Expressions:

Function expressions involve defining functions within variables, fostering a flexible

approach to coding. Anonymous functions—functions without explicit names—are
commonly employed in this context.

EXAMPLE: -

const multiply = function (a, b) {

return a * b;

};

let result = multiply (3, 5); // result is 15

Arrow Functions (ES6):

Arrow functions, introduced in ECMAScript 2015 (ES6), provide a succinct syntax for
writing functions. These concise expressions are particularly valuable for short, one-line
operations.

EXAMPLE: -

const add = (x, y) => x + y;

21
Methods:

Method Definition:

Methods are functions intrinsically linked to objects. They allow objects to encapsulate
behavior, offering a means to interact with and manipulate their associated data.

Invoking Methods:

Methods are accessed via the dot notation, which enables the invocation of a specific
method associated with an object. Arguments can be passed within the parentheses.

Built-in Functions and Methods:

Built-in Functions:

JavaScript provides an array of built-in functions, granting developers immediate access

to a wide range of functionalities without requiring explicit definition. Examples include
outputting to the console (console.log ()), parsing integers (parseInt()), and generating
random numbers (Math.random()).

Built-in Methods:

Data types in JavaScript, such as arrays and strings, come equipped with built-in methods
that simplify common operations like sorting, searching, and modifying data.

2.4 ARRAY AND SORTING IN JS

Introduction:

Arrays are fundamental data structures in JavaScript that allow developers to store and
manipulate collections of values. They are versatile and play a crucial role in managing
data in web applications. Sorting is a common operation applied to arrays to organize
their elements in a particular order. In this article, we will explore arrays, their creation,
manipulation, and the process of sorting arrays in JavaScript.

22
Arrays:

Array Creation:

Arrays are created using square brackets [], and they can hold various types of data,
including numbers, strings, objects, and even other arrays.

EXAMPLE: -

let numbers = [1, 2, 3, 4, 5];

let names = ["Alice", "Bob", "Charlie"];

Accessing Array Elements:

Array elements are accessed using their index, which starts from 0.

EXAMPLE: -

let fruits = ["apple", "banana", "orange"];

let secondFruit = fruits [1]; // "banana"

Modifying Arrays:

Arrays are mutable, meaning you can change their elements, add new elements, or
remove existing ones.

EXAMPLE: -

let colors = ["red", "green", "blue"];

colors[1] = "yellow"; // Modifying an element

colors.push("purple"); // Adding an element to the end

colors.pop(); // Removing the last element

23
Sorting:

Sorting Arrays:

Sorting arrays rearranges their elements in a specified order, commonly in ascending or

descending order. JavaScript provides built-in methods for sorting arrays.

EXAMPLE: -

let numbers = [4, 2, 8, 5, 1];

numbers.sort(); // [1, 2, 4, 5, 8] (ascending order)

Custom Sorting:

For complex sorting requirements, JavaScript allows you to define custom comparison
functions.

EXAMPLE: -

let students = [

{name: "Alice", score: 85},

{name: "Bob", score: 70},

{name: "Charlie", score: 92}

];

students.sort((a, b) => a.score - b.score); // Sorting by score

Sorting Algorithms:

JavaScript's sorting methods implement underlying sorting algorithms, such as quicksort,

to efficiently arrange array elements.

24
 CHAPTER-3
ADVANCED JAVASCRIPT

Introduction:

Advanced JavaScript concepts expand upon the foundational knowledge, enabling developers
to create more sophisticated and optimized applications. This brief report highlights key
advanced concepts such as closures, prototypes, asynchronous programming with Promises,
and ES6 modules, offering a glimpse into their significance and applications.

1. Closures:
JS variables can belong to the local or global scope. All functions(even nested
functions) have access to the global scope & to the scope "above" them. Global
variables can be made local (private) with closures using these nested functions. Ex.

function makeFunc() {
var name = 'Mozilla';
return function() {
console.log(name);
}
}
const myFunc = makeFunc();
myFunc(); // Mozilla

myFunc is a reference to the instance of the anonymous function that is created when
makeFunc is run. The instance of anonymous function maintains a reference to its
lexical environment, within which the variable name exists. For this reason, when
myFunc is invoked, the variable name remains available for use, and "Mozilla" is
passed to console.log. A closure is a function having access to the parent scope, even
after the parent function has closed.Lexical scoping describes how a parser resolves
variable names when functions are nested. The word lexical refers to the fact that
lexical scoping uses the location where a variable is declared within the source code
to determine where that variable is available. Nested functions have access to

25
 variables declared in their outer scope. Hence, a closure is the combination of a
function bundled together (enclosed) with references to its surrounding state (the
lexical environment.

2. Callbacks:
A callback is a function passed as an argument to another function. This technique
allows a function to call another function. A callback function can run after another
function has finished. Ex:
function greeting(name) {
alert ('Hello ' + name);
}
function processUserInput(callback) {
const name = prompt ('Please enter your name.');
callback(name);
}
processUserInput(greeting);
The above example is a synchronous callback, as it is executed immediately.
However, that callbacks are often used to continue code execution after an
asynchronous operation has completed — these are called asynchronous callbacks. A
good example is the callback functions executed inside a. then() block chained onto
the end of a promise after that promise fulfills or rejects. This structure is used in
many modern web APIs, such as fetch (). These async code will be covered later.

3. Prototype:
JS objects inherit properties and methods from a prototype (can either be an object or
null). Ex. Date objects inherit from Date.prototype. Array objects inherit from
Array.prototype. The Object.prototype is on the top of the prototype inheritance chain.
Date objects, Array objects, and Person objects inherit from Object.prototype. Usage:
prototype property allows you to add new properties to object constructors. Ex.

function Person (first, last) {

this.firstName = first;
this.lastName = last;

26
 }
Person.prototype.nationality = "English";

Prototype property also allows you to add new methods to objects constructors. Ex.

function Person(first, last) {

this.firstName = first;
this.lastName = last;
}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};
4. CLASS:

Class is a type of function, but instead of using the keyword function to initiate it, we
use the keyword class, and the properties are assigned inside a constructor() method.
Use the keyword class to create a class, and always add the constructor() method. The
constructor method is called each time the class object is initialized. If you do not
have a constructor method, JS will add an invisible and empty constructor method.
Ex.

class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}
const mycar = new Car("Ford");

27
5. JAVASCRIPT AJAX

AJAX = Asynchronous JavaScript and XML. AJAX just uses a combination of:
1. A browser built-in XMLHttpRequest object (to request data from a web server)
2. JavaScript and HTML DOM (to display or use the data)

AJAX allows web pages to be updated asynchronously by exchanging data with a

web server behind the scenes. This means that it is possible to update parts of a web
page, without reloading the whole page. How AJAX works:

The XMLHttpRequest object can be used to exchange data with a web server behind
the scenes. This means that it is possible to update parts of a web page, without
reloading the whole page. Steps:

Create an XMLHttpRequest object. Ex.

const xhttp = new XMLHttpRequest();

A callback function is a function passed as a parameter to another function. In this

case, the callback function should contain the code to execute when the response is
ready. Ex:

28
 xhttp.onload = function() {
// What to do when the response is ready
}
To send a request to a server, you can use the open() and send() methods of the
XMLHttpRequest object. Ex:

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

6. EXCEPTION HANDLING

Exceptions are unexpected events or errors that disrupt the normal flow of a program.
They can occur due to various reasons, such as invalid inputs, network failures, or
programming mistakes. Exception handling is the practice of dealing with these
unexpected situations in a controlled manner. It prevents the application from
crashing and provides a mechanism to recover from errors. For example, try block
contains the code that might throw an exception, while the catch block is used to
handle the exception if it occurs, you can even catch specific types of errors by
specifying the error type after the catch block.

29
 CHAPTER-4
JAVASCRIPT APPLICATIONS

JAVASCRIPT DOM MANIPULATION

Introduction:
The Document Object Model (DOM) is the foundation of web page interaction,
allowing JavaScript to manipulate and modify web page content dynamically. This
article provides an overview of DOM manipulation techniques, demonstrating how
JavaScript can be used to create interactive and responsive web applications.
Understanding the DOM:
What is the DOM?
The DOM is a programming interface that represents the structure and content of a
web page as a hierarchical tree of objects. It allows scripts to interact with and
manipulate page elements.
Accessing DOM Elements:
1. Selecting Elements:
JavaScript can access DOM elements using various methods, such as
getElementById, querySelector, and getElementsByClassName.

const elementById = document.getElementById("myElement");

const firstButton = document.querySelector("button");

const allParagraphs = document.getElementsByClassName("paragraph");

2. Changing Text Content:

JavaScript can modify the text content of elements, updating what is displayed on the
page.

const heading = document.getElementById("myHeading");

heading.textContent = "New Heading Text";

30
3. Changing Attributes:
Attributes like src, href, and class can be updated to change element behavior and
appearance.

const image = document.querySelector("img");

image.src = "new_image.jpg";

4. Adding and Removing Elements:

4.1 Creating Elements:

JavaScript can dynamically create new elements and add them to the DOM.

const newParagraph = document.createElement("p");

newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

4.2 Removing Elements:

Elements can be removed from the DOM using the remove method.

const elementToRemove = document.getElementById("elementToRemove");

elementToRemove.remove();

5. Changing CSS Styles:

JavaScript can modify an element's CSS properties to change its appearance.

const elementToStyle = document.getElementById("styledElement");

elementToStyle.style.color = "blue";
elementToStyle.style.fontSize = "16px";

31
JAVA SCRIPTMANIPULATING STYLE
1. Introduction:

JavaScript offers a dynamic means to modify the styles of HTML elements, allowing
developers to create visually appealing and interactive web pages. This report outlines
the significance of style manipulation, its role in enhancing user experience, and
provides practical insights into its implementation.

2. Accessing Styles:

The style property provides direct access to an element's inline styles,

enabling real-time changes.

const element = document.getElementById("myElement");

element.style.color = "blue";
element.style.fontSize = "16px";

3. Class Manipulation:
3.1 Adding and Removing Classes:
Classes can be added or removed from elements, providing a dynamic way to apply
predefined styles.

const element = document.getElementById("myElement");

element.classList.add("highlight");
element.classList.remove("old-style");

3.2 Toggling Classes:

The toggle method allows classes to be toggled on and off, providing flexible style
adjustments.

const element = document.getElementById("myElement");

element.classList.toggle("active");

32
4. External Stylesheets:
External styles can be swapped dynamically by altering the href attribute of a linked
stylesheet.

const stylesheet = document.getElementById("myStylesheet");

stylesheet.href = "new_styles.css";

5. Inline Styles:
Individual inline styles can be directly modified using JavaScript.

const element = document.getElementById("myElement");

element.style.backgroundColor = "yellow";

33
 CHAPTER-5
PROJECT

Project Title: Random Quote Generator

Project Description:

The "Random Quote Generator" project involves creating a web-based

application that generates random quotes upon clicking a "New Quote"
button and also displays the name of the person who quoted that
quotation.

Features:
Random Quote Generation: The application will fetch and display a
random quote each time the "New Quote" button is clicked.
User-Friendly Interface: The interface will be designed for ease of use,
featuring a clearly visible "New Quote" button.

Technologies:
HTML: Used for structuring the application's components, including the
quote display area and the button.
CSS: Employed for styling the application's visual elements, including
font styles, button appearance, and layout.
JavaScript: Responsible for fetching random quotes, updating the quote
display, changing the background color, and managing user interactions.

34
Implementation Steps:
HTML Setup:
Create HTML elements for the quote display area and the "New Quote"
button.
CSS Styling:
Style the HTML elements using CSS to achieve an attractive and
readable design.
JavaScript Logic:
Implement an array of quotes that the application can draw from.
Create a function to select a random quote from the array and also display
the name of the author who quoted that quotation.
Button Functionality:
Attach an event listener to the "New Quote" button to trigger the display
of a new quote when the new button is clicked.

35
SOURCE CODE: -

OUTPUT: -

36
 FINAL CHAPTER
CONCLUSION AND FUTURE PRESPECTIVES
JavaScript (JS) programming has undergone a remarkable journey, evolving from a simple
scripting language primarily used for enhancing web interactivity to a versatile and powerful
language that powers a wide spectrum of applications. Its significance in web development
cannot be overstated; it's the cornerstone of dynamic and interactive web pages, enabling
developers to create engaging user experiences. Over the years, JavaScript has grown beyond
the browser and made its mark in server-side development, mobile apps, game development,
IoT, and more. Its dynamic nature, along with an extensive ecosystem of libraries and
frameworks, has contributed to its widespread adoption and enduring popularity. JavaScript's
impact is seen in its role as a foundation for modern web development. It has led to the
creation of sophisticated front-end libraries and frameworks like React, Angular, and Vue.js,
which simplify building complex single-page applications. On the server side, the rise of
Node.js has enabled developers to use JavaScript for server programming, fostering the
growth of full-stack development and a unified development environment.

Future Perspectives:

The future of JavaScript programming looks promising, with several exciting trends and
prospects on the horizon:

WebAssembly Integration: WebAssembly (Wasm) allows running code written in

languages other than JavaScript in web browsers with near-native performance. This opens
the door to high-performance applications and cross-language collaborations.

Machine Learning and AI: JavaScript's presence in the machine learning and AI realm is
expanding with libraries like TensorFlow.js. This trend will likely lead to AI-powered web
applications and interactive experiences.

Progressive Web Apps (PWAs): JavaScript is pivotal in creating Progressive Web Apps,
enabling web applications to behave like native apps with offline capabilities and seamless
user experiences.

37
Enhancements in Frameworks and Tools: JavaScript frameworks and development tools
will continue evolving, optimizing performance, improving developer workflows, and
enabling more efficient code maintenance.

Serverless Architecture: JavaScript is integral to the serverless paradigm, making it simpler

to build applications without worrying about infrastructure management.

Cross-Platform Development: Tools like React Native and Electron leverage JavaScript for
cross-platform app development, enabling developers to target multiple platforms with one
codebase.

Security and Performance: JavaScript will see ongoing improvements in terms of security
practices and performance optimizations, addressing security vulnerabilities and ensuring
faster loading times.

38
 REFERENCES

Introduction to JavaScript

MDN Web Docs - JavaScript:

Website: https://developer.mozilla.org/en-US/docs/Web/JavaScript

The MDN Web Docs provide comprehensive and reliable documentation for JavaScript,
covering everything from language basics to advanced topics.

JavaScript.info:

Website: https://javascript.info/

This resource offers in-depth tutorials, examples, and explanations of JavaScript concepts,
catering to both beginners and more experienced developers.

W3Schools - JavaScript Tutorial:

Website: https://www.w3schools.com/js/

W3Schools provides interactive tutorials, examples, and exercises for learning JavaScript
step by step.

freeCodeCamp - JavaScript Algorithms and Data Structures Certification:

Website: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

freeCodeCamp offers a comprehensive curriculum for learning JavaScript, including

algorithms and data structures.

Eloquent JavaScript:

Book: "Eloquent JavaScript" by Marijn Haverbeke

This book is available online for free and covers JavaScript fundamentals, programming
techniques, and advanced topics.

39
JavaScript Weekly:

Newsletter: https://javascriptweekly.com/

JavaScript Weekly is a newsletter that delivers the latest news, articles, and tutorials related to
JavaScript every week.

JavaScript Design Patterns:

Book: "Learning JavaScript Design Patterns" by Addy Osmani

This book explores various design patterns in JavaScript, helping you write more
maintainable and organized code.

40