1

2
Please read this disclaimer before proceeding:
This document is confidential and intended solely for the educational purpose of
RMK Group of Educational Institutions. If you have received this document
through email in error, please notify the system manager. This document
contains proprietary information and is intended only to the respective group /
learning community as intended. If you are not the addressee you should not
disseminate, distribute or copy through e-mail. Please notify the sender
immediately by e-mail if you have received this document by mistake and delete
this document from your system. If you are not the intended recipient you are
notified that disclosing, copying, distributing or taking any action in reliance on
the contents of this information is strictly prohibited.
 22CS403/22IT403/22IT407
WEB DEVELOPMENT FRAMEWORKS
(Lab Integrated)
Batch / Year / Semester: 2023-2027 / II / 4

Name of the Faculty Members

RMKEC
1.Dr. S.D. Lalitha, ASP, CSE, RMKEC
2.Ms. V. Haritha, AP, CSE, RMKEC
3.Ms. J. Latha, AP, CSE,RMKEC
4.Dr. G. Manikandan, Professor, ADS, RMKEC
5.Dr. Gladiss Merlin N R, ASP, ADS, RMKEC
6.Dr. A. Ponmalar, ASP, ADS,RMKEC
7.Dr. P. Umaeswari, ASP, CSBS, RMKEC
8.Dr. M.S. Girija ,ASP,CSD,RMKEC
9.Ms. M. Kanniga Parameshwari, AP ,IT, RMKEC
RMDEC
1.Dr. G. Amudha , Professor & Head, CSBS, RMDEC
2.Dr. P.M. Joe Prathap , Professor, CSE, RMDEC
3.Mrs. D. Vishnu Sakthi , AP, CSE, RMDEC
4.Dr. K. Roslin Dayana, ASP, CSE, RMDEC
5.Dr. R .Jothilakshmi , ASP, IT, RMDEC
6.Dr. B. Kalpana, ASP, IT, RMDEC
7.Dr. K. Sudharson, ASP, AIML, RMDEC
8.Dr. K. Sudha, ASP, CSBS, RMDEC
RMKCET
1.Dr. Sivasubramanian R , ASP, CSE, RMKCET
2.Dr. Prasath R, ASP, CSE, RMKCET
3.Ms. Saranya R, ASP, CSE, RMKCET
4.Dr. L. Maria Michael Visuwasam, ASP, ADS, RMKCET

4
 1. CONTENTS
S.NO. CONTENTS PAGE NO

1 Contents 4
2 Course Objectives 5
3 Pre Requisites 6
4 Syllabus 7
5 Course Outcomes 12
6 CO- PO/PSO Mapping 13
7 Lecture Plan 14
8 Activity Based Learning 15
9 Lecture Notes 17-42
10 Assignment – 1 to 5 43-45
11 Part A Questions & Answers 46-47
12 Part B Questions 48-49
Supportive Online Certification
13 50
Courses
14 Real time Applications 51-52
15 Contents Beyond the Syllabus 53
16 Assessment Schedule 54
Prescribed Text Books & Reference 55
17
Books
18 Mini Project – 1 to 5 56-57

5
 2. COURSE OBJECTIVES
OBJECTIVES:

The Course will enable learners:

● To understand web semantics and related tools and framework

● Able to get hands on latest JS based web frameworks

● To develop a scalable and responsive web application

● To develop an industry ready application web enterprise feature

6
 3. PRE REQUISITES

• Pre-requisite Chart

22CS403/22IT403/22IT407
WEB DEVELOPMENT
FRAMEWORKS

22CS102
SOFTWARE DEVELOPMENT PRACTICES

7
 4. Syllabus
22IT407 – WEB DEVELOPMENT FRAMEWORKS (Lab Integrated) – L T P C - 3 0 2 4

UNIT I - ADVANCED JAVASCRIPT – 9+6

Introduction to HTML5 and CSS3, Media Queries, JS, DOM, BootStrap, Variables, Loops,
Operators, Scope, Hoisting, Arrays, Spread, REST, DeStructuring
List of Exercise/Experiments
1)Create a JS Object for Bank Account (w attributes like à customer name, account type,
balance, data of creation, bank name, branch name, pan card number). Using JS Object
keyword, try to perform following activities
➢ List down all the entries of the bank object
➢ Check the existence of a key
➢ If key found, get the value for the key
2)Spread Operator
➢ Merge Customer and Account Arrays
➢ Update the Customer Object with the new values
➢ Develop a function that takes a Spread Argument and calculates total balance.
UNIT II - INTRODUCTION TO REACTJS - 9+6
Class-Inheritance, Methods, Extended Class-Map, filter and Reduce Functions, Functions -
Arrow Functions, Lambda Expressions, REST - Introduction, Why JSX, Hello World Apps,
Project Structure
List of Exercise/Experiments
1) Create a list of Bank Objects (same kind of object you used in above lab,
but in an array format)
➢ Display the banks where balance is greater than 200
➢ deduct 10% of the Bank account balance, as part of monthly service
fees
➢ Display the banks where balance is greater than 200 and branch
code is “Chennai”
➢ Add a new Bank to the given array
➢ Delete a bank from the array (use splice operator)
➢ Calculate the total balance of all bank accounts

6
 4. Syllabus
1) Develop a Scientific calculator that does following operations
➢ Rounded Value
➢ Area of Circle
➢ Calculating of Sin, Cos and Tan functions
➢ Permiter of a Rectangle
➢ Employ Arrow functions
➢ Employ HOC
UNIT III - REACT COMPONENTS – 9+6
Class vs Functional Components, Lifecycle methods - React Class Based Components
– component DidMount, WillUpdate, shouldupate, didcatchetc - State - UseState,
UseRef, USeEffect,UseHistory Usage and Props(difference, when to use what, mutable
or immutabilty,direction of flow), PropTypes, Auxillary Components, Controlled and
Uncontrolled Components,Component Interaction (Parent to Child and Child to
Parent), Iteration & Conditional Response
List of Exercise/Experiments
1) Create a collection of Customer by using
➢ Weak Map and Map Collection in JS
➢ Show Case the different feature set of the same.
2) Add Login Page, Dash Board Page, Admin Page
➢ Enable React Routing
➢ Add React Protected Route, for authorization
UNIT IV - REACT LIBRARY – I – 9+6
Event Bubbleup - Component Wrapper - Integration of CSS Modules - Forms
Validations(YUP, Formik, Standard), Events Handling, Data Binding - Redux
List of Exercise/Experiments
1) Develop a React application that has User Registration Form w field
level validations, data submission to a rest api end point, boot strap
for responsive.
➢ Use YUP or Formik to implement the same
 4. Syllabus
2) Build a Redux Counter Application
Requirements:
➢ React application with Redux integrated.
➢ A counter with:
➢ Increment button
➢ Decrement button
➢ Reset button
➢ Display the current counter value.
UNIT V - REACT LIBRARY – II – 9+6
Custom Hooks, HTTP - Fetch, Axios, and Context API, Services, Behaviour Subjects -
StateLess, StateFulll and Container Components, Error Handling - Build, Env, CORS, Unit
Testing w React Testing Library - Introduction to react-native - Introduction to
StoryBook
List of Exercise/Experiments
1) Employ backend API for Login Page functionality (authentication). Post login, store
the user context (received from the back end server) in browser’s session storage as
objects. And use the same as creds during protected route verification.
➢ On the dashboard page, have a grid of Students. The data has to be bought from
backend api
➢ Employ useref, useeffect & usestate, and useHistory
2) Enable Exception Handling
3) Enable HOC and Aux Components
4) Implement React-Testing Library
5) Basic Context Setup
Objective: Set up a React Context to manage theme (light or dark).
➢ Create a ThemeContext using React.createContext.
➢ Create a provider component ThemeProvider with state to toggle between
"light" and "dark" themes.
➢ Use the context in a functional component to display the current theme.
➢ Add a button to toggle the theme.
 4. SYLLABUS
Business Use Case Implementations

1) Student Management System

2) Retail Bank System

3) E-Commerce System
4) Student LMS Management System
TOTAL:45+30=75 PERIODS

TEXTBOOK:

1. David Flanagan, Javascript The Definitive Guide, Paperback, 7th Edition, 2020.

2. David Choi ,Full-Stack React, TypeScript, and Node: Build cloud-ready web
applications using React 17 with Hooks and GraphQL Paperback – Import, 18
December 2020
3. Mehul Mohan, Advanced Web Development with React Paperback – 1 January
2020

E-RESOURCES:
1.Parental Website - https://reactjs.org/
2.The Road to Learn React: Your journey to master plain yet pragmatic React.js by
Robin Wieruch
3.Learning React: Functional Web Development with React and Redux by Alex Banks
and Eve Porcello
4. Learning React by KirupaChinnathambi
5. "React Up & Running" by StoyanStefanov
6. https://www.edureka.co/reactjs-redux-certification-training
7. CodePen
8. CodeSandbox (Preferred)
9. Stackblitz

11
 4. SYLLABUS
LIST OF EQUIPMENTS:

• NodeJS (v9.11.2)

• Github as code repository

• Visual studio code as IDE

• RTL as unit testing framework

• Responsive design w bootstrap

• ReactJS installation (v17)

• Chrome / FIreFox Browsers (latest)

• Responsive using Media Queries & Bootstrap Material & Antdesign

• Design based Apps

12
 5. Course Outcomes
Course Outcomes with Knowledge Levels:
CO1: Personalize web pages using text formatting, graphics, audio,
and video. - K3
CO2: Hands on knowledge on Rest API , propTypes. - K3
CO3: Able to develop a web application using latest React
Framework – K3
CO4: Apply various React features including functions,
components, and services. – K3
CO5: Able to develop application using ReactJshooks. – K3
CO6: Design and integrate complex web components to enhance
user interface and user experience in React applications. – K5

11
 6. CO-PO/PSO Mapping

PROGRAM OUTCOMES PSO

CO
PO PO PO PO PO PO PO PO PO PO PO PO P P P
S S S
1 2 3 4 5 6 7 8 9 10 11 12 O O O
1 2 3
CO1 3 3 3 1 1 - - - 2 1 - 1 - - -

CO2 3 2 3 1 2 - - - 2 1 - 1 - - -

CO3 3 3 3 1 2 - - 1 2 1 - 1 - - -

CO4 3 3 3 1 2 - - - 2 1 - 1 - - -

CO5 3 3 3 1 2 - - 1 2 1 - 1 - - -

CO6 2 3 3 - 3 - - 1 2 2 - 3 - - -

CO 2.83 2.83 3.00 1.00 2.00 - - 1.00 2.00 1.17 - 1.33 - - -

Correlation Level
1. Slight (Low)
2. Moderate (Medium)
3. Substantial (High) ,
If there is no correlation, put “-“.

12
 7. LECTURE PLAN
Sl. Taxono
No. of. Proposed Actual Pertaining Mode of
No Topics my
Periods Date Date CO Delivery
. Level

Introduction to MD 1,
1 1 18.12.2024 18.12.2024 CO1, CO2 K3
HTML5 MD 4

Introduction to
MD 1,
2 CSS3, Media 1 19.12.2024 19.12.2024 CO1, CO2 K3
MD 4
Queries

MD 1,
3 Advanced JS 1 21.12.2024 21.12.2024 CO1, CO2 K3
MD 4

Document Object
MD 1,
4 Model , Variables 1 23.12.2024 23.12.2024 CO1, CO2 K3
MD 4
in JS

MD 1,
5 BootStrap 4 & 5 1 26.12.2024 26.12.2024 CO1, CO2 K3
MD 4

MD 1,
6 Loops , Operators 1 27.12.2024 27.12.2024 CO1, CO2 K3
MD 4

MD 1,
7 Hoisting, Arrays 1 28.12..2024 28.12.2024 CO1, CO2 K3
MD 4

MD 1,
8 Spread, REST 1 3.1.2025 3.1.2025 CO1, CO2 K3
MD 4

DeStructuring MD 1,
9 1 4.1.2025 4.1.2025 CO1, CO2 K3
MD 4

From From
10
18.12.2024 18.12.2024
- Lab Exercises 6 CO1, CO2 K3 Iamneo
To To
15
4.1.2025 4.1.2025

* MD1 – Oral Presentation

* MD 4 – Hands on using any IDE
 8. Activity Based Learning

Common Activities

Learning Methods Activities

Class Exercises, Challenge Yourself,

Learn by Solving Problems Practice At Home exercises posted in
iamneo Portal

Knowledge Check / MCQ Using

Learn by Questioning
iamneo portal and RMK Nextgen App

Learn by Hands on Practice available in iamneo Portal

Unit I Activity : - Mind Map Diagram

➢ Draw a detailed Mind Map diagram to create a visual representation of JavaScript's key

concepts, objects, and methods.

Include:

❑ Core JavaScript constructs like variables, data types, and operators.

❑ Objects and their properties/methods, such as Math, Date, Array, Object, and String.

❑ Advanced topics, including closures, promises, and async/await.

❑ Browser-related APIs, such as the DOM, events, and storage.

❑ Frameworks and Libraries for building front-end and back-end applications.

8. Activity Based Learning

MIND MAP FOR UNDERSTANDING JS

17
 9. Lecture Notes
Unit I
ADVANCED JAVASCRIPT

18
9. Lecture Notes – Advanced JavaScript
Introduction to HTML5 and CSS3, Media Queries, JS, DOM, BootStrap, Variables,
Loops, Operators, Scope, Hoisting, Arrays, Spread, REST, DeStructuring

HTML5 and CSS3 are two essential technologies used for creating and styling websites.
HTML (Hypertext Markup Language) is responsible for structuring the content of a web
page, while CSS (Cascading Style Sheets) is used to define the presentation and visual
appearance of the HTML elements.

HTML5:

HTML5 is the latest version of HTML, which introduced several new features and
improvements over its predecessors. It provides a more robust and semantic way to
structure web content. Some key features of HTML5 include:

Semantic Elements: HTML5 introduced new semantic elements like <header>, <nav>,
<section>, <article>, <footer>, etc., which give more meaning and structure to
different parts of a web page.

Multimedia Support: HTML5 includes native support for embedding multimedia

elements like <video> and <audio> without the need for third-party plugins like Flash.

Form Enhancements: HTML5 introduced new input types (<input type="email">,

<input type="date">, etc.) and attributes to create better and more accessible web
forms.

Canvas and SVG: HTML5 introduced the <canvas> element, which allows dynamic
rendering of graphics, animations, and interactive content using JavaScript.
Additionally, HTML5 supports Scalable Vector Graphics (SVG) for creating resolution-
independent vector graphics on the web.

CSS3:

CSS3 is the latest version of CSS, which brought significant advancements in styling
and presentation capabilities. It provides a wide range of features and techniques to
style and layout HTML elements. Some notable features of CSS3 include:

19
9. Lecture Notes – Advanced JavaScript
Selectors : CSS3 introduced new and advanced selectors, allowing more
precise targeting of HTML elements based on various criteria.
Box Model Enhancements : CSS3 introduced properties like box-sizing
and border-radius to control the size, spacing, and shape of elements
more effectively.

Flexbox and Grid Layout: CSS3 introduced the Flexbox and Grid layout
models, which provide powerful and flexible ways to create responsive
and complex layouts.

Transitions, Animations, and Transformations : CSS3 introduced

properties like transition, animation, and transform to create smooth
transitions, animations, and transformations on HTML elements.

Media Queries: CSS3 added Media Queries, which allow one to apply
different styles based on the device's screen size or other media-
specific conditions, enabling responsive design.

By combining HTML5 and CSS3, developers can create modern,

dynamic, and visually appealing websites with enhanced functionality
and improved user experiences .

Media Queries

Media Queries are a feature of CSS3 that allow developers to apply

different styles to web content based on the characteristics of the
device or media being used to view the website. Media Queries enable
responsive web design by adapting the layout and appearance of a
website to different screen sizes, resolutions, orientations, and other
media-specific conditions.

Media Queries work by using CSS rules that are applied only when
specific conditions are met. These conditions are defined using media
features, such a s screen size, device aspect ratio, device
orientation, and more. When a media feature matches the specified
condition, the associated CSS rules will be applied.

An example of a Media Query that changes the background color of a

webpage when the viewport width is less than or equal to 600 pixels:

20
9. Lecture Notes – Advanced JavaScript

```css

@media (max-width: 600px) {

body {

background-color: lightblue;

```

In the above example, the `@media` rule is used to define a Media

Query. The condition `(max -width: 600px)` specifies that the following
CSS rules will be applied when the viewport width is 600 pixels or less.
Inside the Media Query block, we define a rule that sets the
`background-color` of the `body` element to `lightblue`.

@media (min-width: 600px) and (min-height: 400px) {

.my-element {

width: 50%;

height: 300px;

Media Queries can be used to adapt various aspects of the website,

such as font sizes, column layouts, image sizes, and more. Here are a
few commonly used media features:

- `max-width` and `min-width`: Control styles based on the viewport

width.

- `max-height` and `min-height`: Control styles based on the viewport

height.

- `orientation`: Control styles based on the orientation of the device

21
(portrait or landscape).
9. Lecture Notes – Advanced JavaScript

Here are some examples of media queries that target specific device features:

@media (orientation: landscape) { .my-element { width: 100%; height: 50%; } }

@media (min-resolution: 1920dpi) { .my-element { font-size: 16px; } }

Media Queries can be placed directly in a CSS file or within the `<style>` tag of an
HTML document. By using Media Queries effectively, developers can create
responsive websites that adapt to different devices, ensuring optimal user
experiences across a wide range of screen sizes and devices.

JS

JavaScript (JS) is a high-level, interpreted programming language that is primarily

used for adding interactivity and dynamic behavior to web pages. It is one of the
core technologies of web development alongside HTML and CSS. JavaScript allows
developers to create interactive features, manipulate the content of web pages,
handle user interactions, perform calculations, make HTTP requests, and much
more.

Here are some key features and concepts of JavaScript:

1. Variables and Data Types: JavaScript provides variables to store and manipulate
data. It supports various data types such as numbers, strings, booleans, arrays,
objects, and more. Variables can be declared using the `var`, `let`, or `const`
keywords.

2. Functions: JavaScript allows one to define reusable blocks of code called

functions. Functions can take parameters, perform actions, and return values. They
play a crucial role in structuring and organizing JavaScript code.

3. Control Flow and Conditional Statements: JavaScript provides control flow

statements like `if`, `else`, `switch`, `for`, `while`, and `do-while` to control the
execution of code based on different conditions.

22
9. Lecture Notes – Advanced JavaScript
4. DOM Manipulation: JavaScript can interact with the Document Object Model
(DOM) of a web page. It allows one to select elements, modify their content,
attributes, and styles, create new elements, attach event listeners, and respond to
user interactions.

5. Asynchronous Programming: JavaScript supports asynchronous programming

through concepts like callbacks, promises, and async/await. Asynchronous
operations, such as fetching data from an API or performing time-consuming tasks,
can be handled without blocking the execution of other code.

6. Error Handling: JavaScript provides mechanisms for error handling and exception
handling. Developers can use try-catch blocks to catch and handle errors, preventing
the program from crashing.

7. Libraries and Frameworks: JavaScript has a vast ecosystem of libraries and

frameworks that extend its capabilities. Popular JavaScript libraries and frameworks
include React, Angular, Vue.js, jQuery, and many more. These libraries provide pre-
built components, utilities, and abstractions to simplify web development tasks.

JavaScript can be used not only in web browsers but also on the server-side with
technologies like Node.js. It has a wide range of applications, including web
development, mobile app development, game development, server-side
programming, and more.

To run JavaScript code, one can include it within `<script>` tags in an HTML file,
link an external JavaScript file, or use JavaScript within a dedicated JavaScript file.
Modern JavaScript development often involves using tools like package managers
(e.g., npm, yarn) and build systems (e.g., webpack, Babel) to manage
dependencies, bundle code, and optimize the development workflow.

DOM
The Document Object Model (DOM) is a programming interface for web documents.
It represents the structure of an HTML or XML document as a hierarchical tree-like
structure, where each element in the document is

23
9. Lecture Notes – Advanced JavaScript
represented by a node in the tree. The DOM provides a way to interact with and
manipulate the content, structure, and style of a web page dynamically using
scripting languages like JavaScript.

In simpler terms, the DOM acts as a bridge between web pages and scripts, allowing
scripts to access and modify the elements and content of a web page.

Here are some key points about the DOM:

1. Structure and Hierarchy: The DOM represents an HTML or XML document as a

tree structure, where each element (such as `<div>`, `<p>`, `<a>`, etc.) is a
node in the tree. The nodes are organized in a parent-child relationship, forming a
hierarchical structure that mirrors the nesting of elements in the document.

2. Nodes and Elements: In the DOM, different types of nodes represent different
elements or components of a web page. The most common types of nodes are
element nodes (representing HTML elements), text nodes (representing the text
within elements), and attribute nodes (representing attributes of elements). Other
types of nodes include comment nodes, document nodes, etc.

3. Accessing Nodes: JavaScript provides methods and properties to access and

manipulate the nodes in the DOM tree. one can use methods like `getElementById`,
`getElementsByTagName`, `querySelector`, etc., to select specific nodes based on
their ID, tag name, class, or other selectors.

4. Modifying Nodes: Once one have selected a node, one can modify its content,
attributes, or style using JavaScript. For example, one can change the text inside an
element, add or remove classes, update attributes, create new elements, append or
remove nodes, and more.

5. Event Handling: The DOM allows one to handle various events, such as clicks,
mouse movements, form submissions, and keyboard interactions. one can attach
event listeners to specific nodes and define JavaScript code to be executed when an
event occurs. This enables interactivity and responsiveness in web applications.

24
9. Lecture Notes – Advanced JavaScript
6. Cross-Browser Compatibility: The DOM provides a standardized interface for web
scripting, ensuring cross-browser compatibility. However, different browsers may
have slight variations in their implementation, so it's important to consider browser
compatibility when working with the DOM.

By using the DOM, developers can create dynamic and interactive web pages.
JavaScript code can manipulate the DOM to respond to user actions, update content
dynamically, validate forms, create animations, modify styles, and perform other
operations to enhance the user experience on the web.

BootStrap
Bootstrap is a free and open-source front-end framework for developing websites
and web applications. It is one of the most popular frameworks in the world, used
by millions of developers to create responsive, mobile-first websites.

Bootstrap includes a number of features that make it a valuable tool for web
development, including:

A grid system for creating responsive layouts

Reusable components for common UI elements, such as buttons, forms, and

navigation bars

A JavaScript library for adding interactivity to your websites

A large community of developers and resources to help one get started

Bootstrap is not a programming language, but it does use CSS, HTML, and
JavaScript. It is a framework that provides a set of tools and pre-written code that
one can use to speed up the development of your websites.

Here are some of the benefits of using Bootstrap:

Speed up development time: Bootstrap provides a number of pre-written code that

one can use to quickly create common UI elements. This can save one a lot of time
and effort when developing your websites.

25
9. Lecture Notes – Advanced JavaScript
Create responsive websites: Bootstrap is built with a mobile-first approach, which
means that your websites will look good on all devices, from smartphones to
desktops.

Easy to use: Bootstrap is easy to learn and use, even for beginners. There are a
number of tutorials and resources available online to help one get started.

Large community: Bootstrap has a large and active community of developers who
are always willing to help. This means that one can get help with any problems one
encounter when using Bootstrap.

Here are some specific examples of Bootstrap components that one can use to build
these websites:

Grid system: Bootstrap's grid system is used to create responsive layouts that look
good on all devices.

Buttons: Bootstrap provides a variety of buttons that one can use to add interactivity
to your websites.

Forms: Bootstrap provides a number of form components that one can use to create
user-friendly forms.

Navigation bars: Bootstrap provides a variety of navigation bars that one can use to
help users navigate your websites.

Other components: Bootstrap provides a number of other components that one can
use to build your websites, such as images, tables, and alerts.

Variable

In JavaScript, a variable is a named container for a value, like a number we might

use in a sum, or a string that we might use as part of a sentence.

To declare a variable in JavaScript, one use the var keyword:

var carName;

26
9. Lecture Notes – Advanced JavaScript
This declares a variable called carName, but it doesn't have any value yet. To assign
a value to the variable, one use the equal sign:

carName = "Volvo";

This assigns the value "Volvo" to the variable carName.

It can declare and assign a value to a variable in one line:

var carName = "Volvo";

Variables can be used to store any type of value, including numbers, strings,
objects, and arrays.

Here is an example of how to use a variable to store a number:

var number = 10;

console.log(number); // 10

Here is an example of how to use a variable to store a string:

var string = "Hello, world!";

console.log(string); // Hello, world!

Here is an example of how to use a variable to store an object:

var object = {

name: "John Doe",

age: 30,

address: "123 Main Street, Anytown, CA"

};

console.log(object.name); // John Doe

27
9. Lecture Notes – Advanced JavaScript
console.log(object.age); // 30

console.log(object.address); // 123 Main Street, Anytown, CA

Here is an example of how to use a variable to store an array:

var array = [1, 2, 3, 4, 5];

console.log(array[0]); // 1

console.log(array[1]); // 2

console.log(array[2]); // 3

Variables can be used to store any type of value, and they can be used to perform
all sorts of calculations and operations. They are a fundamental part of JavaScript,
and they are essential for writing any kind of JavaScript program.

Here are some additional things to keep in mind about variables in JavaScript:

Variable names must start with a letter or underscore, and they can only contain
letters, numbers, and underscores.

Variable names are case-sensitive, so carName and CarName are different variables.

Variables are not declared in blocks, so they are accessible from anywhere in the
program.

Variables can be overwritten with new values.

Variables are destroyed when they go out of scope.

There are three types of variables in JavaScript:

var: This is the oldest type of variable in JavaScript. It is not recommended to use
var anymore, as it has some limitations. For example, var variables are not hoisted,
which means that they are not created until they are first used. This can lead to
errors if one try to access a var variable before it has been created.

28
9. Lecture Notes – Advanced JavaScript
let: Let variables are hoisted, which means that they are created when the variable
declaration is encountered, even if the variable is not used until later. This prevents
errors from occurring when one try to access a let variable before it has been
created. Let variables are also block-scoped, which means that they are only
accessible within the block in which they are declared. This prevents name collisions
from occurring between variables that are declared in different blocks.

const: Const variables are similar to let variables, but they cannot be changed after
they are declared. This makes const variables a good choice for variables that
should not be changed, such as constants. Const variables are also block-scoped.

JavaScript has four types of loops:

for loop: The for loop is the most common type of loop in JavaScript. It is used to
repeat a block of code a specified number of times.

while loop: The while loop is used to repeat a block of code while a specified
condition is true.

do while loop: The do while loop is similar to the while loop, but it executes the
block of code once, even if the condition is false.

for...in loop: The for...in loop is used to iterate over the properties of an object.

Here is an example of a for loop that iterates over the numbers from 1 to 10:

for (var i = 1; i <= 10; i++) {

console.log(i);

This loop will first set the variable i to 1. Then, it will check if i is less than or equal
to 10. If it is, the loop will execute the block of code, which in this case is just the
console.log() statement. The loop will then increment the value of i by 1 and check
the condition again. This will continue until i is greater than 10, at which point the
loop will exit.

29
9. Lecture Notes – Advanced JavaScript
Here is an example of a while loop that adds the numbers from 1 to 10:

var sum = 0;

var i = 1;

while (i <= 10) {

sum += i;

i++;

console.log(sum); // 55

This loop first sets the variables sum and i to 0 and 1, respectively. Then, it checks if
i is less than or equal to 10. If it is, the loop will add i to sum and increment the
value of i by 1. The loop will then check the condition again. This will continue until i
is greater than 10, at which point the loop will exit and the value of sum will be
logged to the console.

Here is an example of a do while loop that prints the message "Hello, world!" twice:

var counter = 0;

do {

console.log("Hello, world!");

counter++;

} while (counter < 2);

This loop first sets the variable counter to 0. Then, it prints the message "Hello,
world!" and increments the value of counter by 1. The loop will then check if
counter is less than 2. If it is, the loop will execute the block of code again. This will
continue until counter is equal to 2, at which point the loop will exit.

30
9. Lecture Notes – Advanced JavaScript
Here is an example of a for...in loop that iterates over the properties of an object:

var object = {

name: "John Doe",

age: 30,

address: "123 Main Street, Anytown, CA"

};

for (var property in object) {

console.log(property);

Operators

JavaScript has a variety of operators that can be used to perform operations on

variables, expressions, and values.

Here are some of the most common operators in JavaScript:

Arithmetic operators: These operators are used to perform arithmetic operations on

numbers. For example, the addition operator (+) can be used to add two numbers
together.

Assignment operators: These operators are used to assign values to variables. For
example, the assignment operator (=) can be used to assign the value 10 to the
variable x.

Comparison operators: These operators are used to compare two values. For
example, the greater than operator (>) can be used to compare two numbers and
see if the first number is greater than the second number.

Logical operators: These operators are used to combine logical expressions. For
example, the logical AND operator (&&) can be used to combine two logical
expressions and see if both expressions are true.

31
9. Lecture Notes – Advanced JavaScript
String operators: These operators are used to manipulate strings. For example, the
concatenation operator (+) can be used to combine two strings together.

Bitwise operators: These operators are used to perform bitwise operations on

numbers. For example, the bitwise AND operator (&) can be used to combine two
numbers together and see if the bits in the two numbers are both set.

Scope

In JavaScript, the scope of a variable refers to the part of the program where the
variable can be accessed. There are three types of scopes in JavaScript:

Global scope: Variables declared outside of any function have global scope. This
means that the variable can be accessed from anywhere in the program.

Local scope: Variables declared inside a function have local scope. This means that
the variable can only be accessed from within the function in which it is declared.

Block scope: Variables declared in a block of code, such as an if statement or a for

loop, have block scope. This means that the variable can only be accessed from
within the block in which it is declared.

var globalVariable = "This is a global variable";

function myFunction() {

console.log(globalVariable); // This is a global variable

myFunction();

In this example, the variable globalVariable has global scope. This means that it can
be accessed from anywhere in the program, including from within the function
myFunction().

32
9. Lecture Notes – Advanced JavaScript
Local scope:

function myFunction() {

var localVariable = "This is a local variable";

console.log(localVariable); // This is a local variable

myFunction();

In this example, the variable localVariable has local scope. This means that it can
only be accessed from within the function myFunction(). If one try to access
localVariable from outside of the function, one will get an error.

Block scope:

if (true) {

var blockVariable = "This is a block variable";

console.log(blockVariable); // This is a block variable

console.log(blockVariable); // Error: Cannot access 'blockVariable' outside of its

scope

Arrays

Arrays are a fundamental data structure in JavaScript. They can be used to store a
collection of values, such as numbers, strings, and objects. Arrays are zero-indexed,
which means that the first element of an array has an index of 0.

Here is an example of how to declare an array in JavaScript:

var array = [1, 2, 3, 4, 5];

This declares an array called array that contains the values 1, 2, 3, 4, and 5.

33
9. Lecture Notes – Advanced JavaScript
One can access the elements of an array by using their index. For example, to
access the value 3 in the array array, one would use the following code:

var value = array[2];

This code will assign the value 3 to the variable value.

One can also add elements to an array using the push() method. The push()
method takes a value as its argument and adds it to the end of the array. For
example, the following code will add the value 6 to the array array:

array.push(6);

One can also remove elements from an array using the pop() method. The pop()
method removes the last element from the array and returns it. For example, the
following code will remove the last element from the array array and assign it to the
variable value:

var value = array.pop();

One can also iterate over the elements of an array using a for loop. The following
code will iterate over the elements of the array array and print each element to the
console:

for (var i = 0; i < array.length; i++) {

console.log(array[i]);

Here are some of the most common methods for working with arrays in JavaScript:

push(): Adds an element to the end of an array.

pop(): Removes the last element from an array and returns it.

unshift(): Adds an element to the beginning of an array.

shift(): Removes the first element from an array and returns it.

34
9. Lecture Notes – Advanced JavaScript
slice(): Returns a new array that contains a slice of the original array.

concat(): Combines two or more arrays into a new array.

indexOf(): Returns the index of the first occurrence of a value in an array.

lastIndexOf(): Returns the index of the last occurrence of a value in an array.

some(): Returns true if at least one element of an array satisfies a condition.

every(): Returns true if all elements of an array satisfy a condition.

var array = [];

array.push(1);

array.push(2);

array.push(3);

console.log(array); // [1, 2, 3]

This code will first create an empty array called array. Then, it will use the push()
method to add the values 1, 2, and 3 to the array. Finally, it will print the array to
the console.

Here is an example of how to use the pop() method to remove an element from an
array:

var array = [1, 2, 3];

var value = array.pop();

console.log(array); // [1, 2]

console.log(value); // 3

This code will first create an array called array that contains the values 1, 2, and 3.
Then, it will use the pop() method to remove the last element from the array. The
value that is removed will be assigned to the variable value. Finally, the array and
the value will be printed to the console.

35
9. Lecture Notes – Advanced JavaScript
Here is an example of how to use the indexOf() method to find the index of a value
in an array:

var array = [1, 2, 3, 4, 5];

var index = array.indexOf(3);

console.log(index); //

This code will first create an array called array that contains the values 1, 2, 3, 4,
and 5. Then, it will use the indexOf() method to find the index of the value 3 in the
array. The index of the value 3 is 2, so the value 2 will be assigned to the variable
index. Finally, the index will be printed to the console.

Spread operator

The spread operator (...) is a new feature in JavaScript that was introduced in ES6.
It allows one to spread the elements of an array or iterable object into another array
or object.

Here is an example of how to use the spread operator to spread the elements of an
array into another array:

var array1 = [1, 2, 3];

var array2 = [4, 5, 6];

var array3 = array1.concat(array2);

console.log(array3); // [1, 2, 3, 4, 5, 6]

// Using the spread operator

var array3 = [...array1, ...array2];

console.log(array3); // [1, 2, 3, 4, 5, 6]

In the first code snippet, we use the concat() method to concatenate the two arrays
array1 and array2. This creates a new array called array3 that contains all of the
elements of array1 and array2.

36
9. Lecture Notes – Advanced JavaScript
In the second code snippet, we use the spread operator to spread the elements of
array1 and array2 into a new array called array3. This is the same result as using
the concat() method, but it is more concise and easier to read.

The spread operator can also be used to spread the elements of an iterable object
into an array or object. For example, the following code will spread the elements of
the object object into the array array:

var object = {

name: "John Doe",

age: 30,

address: "123 Main Street, Anytown, CA"

};

var array = [...object];

console.log(array); // ["John Doe", 30, "123 Main Street, Anytown, CA"]

The spread operator is a powerful new feature in JavaScript that can be used to
write more concise and readable code. It is a valuable tool for anyone who is
working with arrays and iterable objects.

One can use the spread operator to create a new array that is a copy of an existing
array:

var array = [1, 2, 3];

var newArray = [...array];

console.log(newArray); // [1, 2, 3]

One can use the spread operator to merge two arrays:

var array1 = [1, 2, 3];

var array2 = [4, 5, 6];

37
9. Lecture Notes – Advanced JavaScript
var mergedArray = [...array1, ...array2];

console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

One can use the spread operator to initialize an object with the properties of
another object:

var object1 = {

name: "John Doe",

age: 30,

address: "123 Main Street, Anytown, CA"

};

var object2 = { ...object1 };

console.log(object2); // { name: "John Doe", age: 30, address: "123 Main Street,
Anytown, CA" }

One can use the spread operator to iterate over an array of objects:

var objects = [{ name: "John Doe", age: 30 }, { name: "Jane Doe", age: 25 }];

for (var object of objects) {

console.log(object.name);

// John Doe

// Jane Doe

The spread operator can be used in many different ways to make your JavaScript
code more concise and readable.

REST
RESTful APIs are a popular way to expose data and functionality to other
applications. REST stands for Representational State Transfer, and it is a set of
architectural principles that define how web services should interact with each other.
38
9. Lecture Notes – Advanced JavaScript
JavaScript is a powerful language that can be used to create RESTful APIs. There
are a number of libraries and frameworks that can help one to create RESTful APIs
in JavaScript, such as Express, Axios, and Superagent.

Here is a simple example of a RESTful API that can be created in JavaScript:

const express = require("express");

const app = express();

app.get("/users", (req, res) => {

res.json([

{ id: 1, name: "John Doe" },

{ id: 2, name: "Jane Doe" }

]);

});

app.listen(3000, () => {

console.log("Server is running on port 3000");

});

This code defines a simple RESTful API that exposes a /users endpoint. The /users
endpoint returns a JSON array of users.

To use this API, one can use a tool like Postman to make a GET request to the
/users endpoint. The response will be a JSON array of users.

RESTful APIs are a powerful way to expose data and functionality to other
applications. JavaScript is a great language for creating RESTful APIs, and there are
a number of libraries and frameworks that can help one to get started.

The first line imports the express library. Express is a popular web framework for
Node.js that makes it easy to create RESTful APIs.

39
9. Lecture Notes – Advanced JavaScript
The next line creates an Express application. The application is assigned to the
variable app.

The third line defines a route for the /users endpoint. The get method defines a GET
request handler. The handler function takes two arguments: req and res. req is an
object that contains information about the request, such as the headers and the
body. res is an object that is used to send the response.

The handler function in this example simply returns a JSON array of users. The
JSON array is created using the JSON.stringify() method.

The fourth line tells the application to listen on port 3000.

The fifth line logs a message to the console when the server starts.

This is a very simple example of a RESTful API. However, it shows the basic
concepts of RESTful APIs. RESTful APIs are based on the following principles:

Resources: Resources are the nouns in your API. For example, a user resource
might represent a user in your database.

URIs: URIs are used to identify resources. For example, the URI /users might
identify the users resource.

HTTP methods: HTTP methods are used to perform actions on resources. The most
common HTTP methods are GET, POST, PUT, and DELETE.

Data formats: RESTful APIs typically use JSON to represent data.

DeStructuring

Destructuring is a JavaScript feature that allows one to extract the values from an
object or array into individual variables. This can be useful for making your code
more concise and readable.

Here is an example of how to use destructuring to extract the values from an object:

40
9. Lecture Notes – Advanced JavaScript
const user = {

name: "John Doe",

age: 30,

address: "123 Main Street, Anytown, CA"

};

const { name, age } = user;

console.log(name); // John Doe

console.log(age); // 30

In this example, we use the destructuring syntax to extract the name and age
properties from the object user. The name and age properties are assigned to the
variables name and age respectively.

Here is another example of how to use destructuring to extract the values from an
array:

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

const [first, second, third] = numbers;

console.log(first); // 1

console.log(second); // 2

console.log(third); // 3

In this example, we use the destructuring syntax to extract the first three elements
from the array numbers. The first three elements are assigned to the variables first,
second, and third respectively.

Destructuring is a powerful feature that can be used to make your JavaScript code
more concise and readable. It is a valuable tool for anyone who is writing JavaScript
code.

41
9. Lecture Notes – Advanced JavaScript
Destructuring can be used to extract any number of values from an object or array.

The values that are extracted are assigned to variables in the order that they are
declared.

The variables that are used to store the extracted values do not need to have the
same names as the properties or elements that are being extracted.

Destructuring can be used to extract multiple properties from an object in a single

line of code.

Destructuring can be used to extract multiple elements from an array in a single line
of code.

Destructuring is a powerful feature that can be used to make your JavaScript code
more concise and readable. It is a valuable tool for anyone who is writing JavaScript
code.

Here are some additional examples of how to use destructuring:

One can use destructuring to extract all of the properties from an object:

const user = {

name: "John Doe",

age: 30,

address: "123 Main Street, Anytown, CA"

};

const { name, age, address } = user;

One can use destructuring to extract a subset of the properties from an object:

const user = {

name: "John Doe",

42
9. Lecture Notes – Advanced JavaScript
age: 30,

address: "123 Main Street, Anytown, CA"

};

const { name, age } = user;

One can use destructuring to extract all of the elements from an array:

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

const [first, second, third, fourth, fifth] = numbers;

One can use destructuring to extract a subset of the elements from an array:

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

const [first, second, third] = numbers;

Destructuring is a powerful feature that can be used to make JavaScript code more
concise and readable. It is a valuable tool for anyone who is writing JavaScript code.

43
 10. ASSIGNMENT – 1 To 5

Type 1:
1. Basics of JavaScript:
❑ Create a simple webpage using HTML5, CSS3, and JavaScript.
❑ Add a form to collect user information (Name, Email, and Age).
❑ Use JavaScript to validate the form inputs and display error messages
for invalid entries.
2. DOM Manipulation:
❑ Create a JavaScript program to display a list of items dynamically on the
webpage.
❑ Allow users to add, update, and remove items from the list using buttons.

Type 2:
1. JavaScript Objects:
Write a program to create a Bank Account Object with attributes: customer name,
account type, balance, date of creation, bank name, branch name, and PAN card
number.
❑ Use JavaScript methods to:
❑ Add a new account.
❑ List all account details.

2. Spread and REST Operators:

❑ Create two arrays: customers and accounts. Use the Spread Operator to merge them
into a new array.
❑ Write a function using the REST Parameter that accepts an array of balances and
calculates the total balance.

44
 10. ASSIGNMENT – 1 To 5

Type 3:
1. De-structuring and Scope:
❑ Create a nested object for a library system (attributes: library name, location, list of
books, and list of members). Use object de-structuring to extract and print individual
properties.
❑ Demonstrate the difference between var, let, and const for declaring variables within
different scopes.
2. Bootstrap and Responsive Design:
Design a responsive webpage using Bootstrap for a mock "Banking Services" page.
❑ Include a navigation bar, a services section, and a customer feedback form.
❑ Use Media Queries to make it mobile-friendly.

Type 4:
1. Advanced JavaScript Concepts:
Develop a JavaScript program to calculate the average balance of all customers in a
bank.
❑ Use an array of objects where each object contains account details.
❑ Implement Array.map() and Array.reduce() to perform the calculation.

2. DOM Events and Interactivity:

Create a webpage with a "Loan EMI Calculator" using HTML, CSS, and JavaScript.
❑ Allow users to input loan amount, interest rate, and tenure.
❑ Use JavaScript to calculate and display the monthly EMI dynamically as the user
types.

45
 10. ASSIGNMENT – 1 To 5

Type 5:
1. Complex Object Operations:
Build a banking application using JavaScript.
❑ Include features like adding customer details, updating balances, and checking
transaction history.
❑ Use Object.keys(), Object.values(), and Object.entries() to list, retrieve, and
manage customer data.

2. Async Programming and Promises:

Create a JavaScript application to fetch and display data from a mock banking API.
❑ Use Promises and async/await to fetch account details and display them on
the webpage.
❑ Handle errors gracefully and notify the user if data is unavailable..

46
 11. PART A : Questions & Answers
1. What is the purpose of HTML5 in web development?
HTML5 provides the structure for web pages and supports multimedia elements like audio
and video without additional plugins. (CO1,K1)
2. What are Media Queries in CSS3? (CO1,K1)
Media Queries allow developers to apply CSS rules based on device characteristics like
screen size or resolution.
3. What are the different types of JavaScript operators? (CO1,K1)
JavaScript operators include arithmetic, comparison, logical, assignment, and bitwise
operators.
4. Define Hoisting in JavaScript. (CO1,K1)
Hoisting is a behavior where variable and function declarations are moved to the top of
their scope during compilation.
5. What is a JavaScript Object? (CO2,K1)
A JavaScript object is a collection of key-value pairs used to store multiple values.
6. What is the purpose of the Spread Operator in JavaScript? (CO1,K1)
The Spread Operator allows copying or merging arrays/objects or spreading values into
function arguments.
7. Explain the concept of Scope in JavaScript. (CO1,K2)
Scope determines the accessibility of variables—global or local—within the code.
8. How is REST Parameter different from Spread Operator? (CO1,K2)
REST Parameter gathers arguments into an array, while the Spread Operator expands an
array into individual elements
9. What is the significance of Bootstrap in web development? (CO1,K2)
Bootstrap is a framework for creating responsive and mobile-first websites using pre-
styled components.
10. How does Destructuring work in JavaScript? (CO2,K2)
Destructuring extracts properties from objects or elements from arrays and assigns them
to variables.

47
 11. PART A : Questions & Answers
11. Write a simple use case for using Hoisting in JavaScript. (CO1,K3)
Declaring a function before its actual usage ensures cleaner code and better readability.
12. How can you check the existence of a key in a JavaScript object? (CO2,K3)
Use the in operator or hasOwnProperty() method to check if a key exists.
13. How can you merge two arrays using the Spread Operator? (CO2,K3)
Example: let merged = [...array1, ...array2];
14. Demonstrate variable declaration using let and const. (CO1,K3)
Example: let x = 5; const y = 10;—let is reassignable, const is not.
15. How do you dynamically add a new property to a JavaScript object?
(CO2,K3)
Use dot notation or bracket notation. Example: object.newKey = value;
16. How does Media Queries enhance responsive design? (CO1,K3)
Media Queries apply specific CSS rules based on the device's screen properties to improve
user experience.
17. What is the benefit of using Object.entries() in JavaScript? (CO1,K3)
It converts an object into an array of key-value pairs, making it easier to iterate through.
18. Compare var and let in terms of scope. (CO1,K3)
var is function-scoped, while let is block-scoped, reducing potential errors.
19. How does Destructuring improve code readability? (CO2,K3)
It simplifies extracting multiple properties from an object or elements from an array.
20. Why is Bootstrap preferred for responsive design? (CO1,K3)
Its pre-built components and grid system simplify creating layouts compatible with all
devices.
21. Write the importance of Hoisting in debugging. (CO1,K3)
Hoisting helps identify undefined variables or functions early in the program execution.
22.How can you determine if an object is empty in JavaScript? (CO2,K3)
Check if Object.keys(obj).length equals 0.
23. Assess the impact of using const over let. (CO1,K3)
Using const enforces immutability, enhancing code stability and predictability.

48
 12. PART B QUESTIONS

1. Explain the key features of HTML5 and CSS3 that make them suitable
for modern web development. (CO1,K2)

2. Discuss the significance of Media Queries in CSS3 and demonstrate how

they are used to create responsive designs. (CO1,K2)

3. Write a JavaScript program to create a bank account object with

attributes (customer name, account type, balance, date of creation, etc.).
Perform operations to list all entries, check the existence of a key, and
retrieve its value. (CO2,K3)

4. Using the Spread Operator, demonstrate how to merge two arrays and
update the properties of an existing object in JavaScript. (CO2,K3)

5. Analyze the behavior of Hoisting in JavaScript by providing an example

that includes variable and function declarations. Explain the output.
(CO1,K4)

6. Compare the usage of var, let, and const in JavaScript with respect to
scope, hoisting, and reassignment. Provide suitable examples. (CO1,K4)

7. Evaluate the importance of Destructuring in JavaScript for simplifying

object and array manipulation. Write a program to illustrate its benefits.
(CO2,K5)

8. Assess the impact of using Bootstrap for creating responsive web

designs. Include examples of Bootstrap components that enhance user
interfaces. (CO1,K5)

49
 12. PART B QUESTIONS : UNIT – I

9. Design a JavaScript function using REST parameters to calculate the

total balance of multiple bank accounts. Demonstrate the function with
sample inputs. (CO2,K6)
10. Develop a mini-project where you create a responsive webpage using
HTML5, CSS3, Bootstrap, and JavaScript. Include features like a dynamic
navigation bar and a JavaScript-based form validation system.
Mapping: (CO1, CO2,K6)
11. Describe the Document Object Model (DOM) and its significance in
JavaScript for manipulating web page elements. Provide
examples.(CO1,K2)

12. Explain the difference between the Spread operator and the REST
operator in JavaScript with examples of their usage. (CO2,K2)

13. Write a JavaScript program to demonstrate how loops (for, while, do-
while) can be used to iterate over an array of customer bank accounts.
(CO1,K3)

14. Using Destructuring, write a program to extract specific attributes

from a bank account object. Explain the advantages of using this
approach. (CO2,K3)

15. Design and implement a responsive webpage using Media Queries and
Bootstrap that displays customer account information dynamically loaded
from a JavaScript object. (CO1, CO2,K6)

50
13. SUPPORTIVE ONLINE CERTIFICATION COURSES

• Introduction to Javascript – Infosys Springboard

https://infosysspringboard.ausnz.onwingspan.com/en/app/toc/l
ex_18109698366332810000_shared/overview

• Responsive Website Basics: Code with HTML, CSS, and

JavaScript - coursera

https://www.coursera.org/learn/website-coding

• Web Design for Beginners: Real World Coding in

HTML & CSS -Udemy

https://www.udemy.com/course/web-design-for-beginners-
real-world-coding-in-html-css/

51
 14. REAL TIME APPLICATIONS
1) A WEB APPLICATION PROVIDING RANGE OF OPTIONS TO CAR BUYERS

Car selling website is where the customer can buy and sell their car. This website is
user friendly and ease to use for any customer, it has effective search box to get the
precise and suitable car for the user. A rich search facility is always there from where
customer can search vehicle via category, keywords, price range, brand, types, fuel
types, etc. The website displays information of the customer support person on the
homepage so that user can directly contact them or meet them which help in
decreasing the communication gap. This website also provides a facility for road side
assistance. The social media plugin will help the company to know their popularity over
the social media.

2) PLAY YOUR FANTASY SPORTS ONLINE USING WEB APPLICATION

This application is developed for users who are interested in playing fantasy sports
online. Users can play fantasy sports with close friends or people you met over the
internet. Users can create their own leagues and can invite friends to play in their
league or they can play in others leagues. Users can easily change the league size,
payment deadlines, payout verifications and payout timelines. This system guarantee
the professional safekeeping of the funds through full-featured security measures.
User can withdraw funds from their account. User can refer a friend to play a particular
league.

3) BOOTSTRAP & RESPONSIVE DESIGN

Responsive web design is a way of making a single website that works effectively on
both desktop browsers and the myriad of mobile devices on the market. It involves
having a website that enhances the viewing experience, irrespective of which device is
being used. Bootstrap makes the front-end web development faster and easier. It is
made for the users of all skill levels, devices of all shapes and projects of all sizes. It is
considered the most popular HTML, CSS, and JavaScript framework for developing
responsive & mobile-first websites. With a responsive website design,

52
 14. REAL TIME APPLICATIONS
Not to worry about having different websites for various devices or making sure that
your website runs properly on a mobile device.

At Spaculus, we can incorporate your new website design or we modify it and make it
responsive if you already own a website. Our team of experts uses various tools and
technologies to make your website more accessible such as media queries, flexible grid
based layouts that use re-sizing and flexible images & media.
4) Navigating the Internet

HTML is an essential element in navigating between web pages. Navigation is possible

using the hypertext concept. The linking is also simpler. From the internet user’s point
of view, they click on a text which takes them to the next page. HTML facilitates
navigation by hyperlinking with the help of an anchor tag.

<a href="geeksforgeeks.org"> Click here to open! </a>Navigation can increase

visitors to a website. It increases user activity on the website. It also helps the web
user to look at the content structure and organization.

5)Storage Function in the Browser

Storage of data in the browser was tedious in the past. For a user to save the data of
the browser that persists between two sessions, the user’s cookies or infrastructure is
to be built from the server end. This process has now been eased with
HTML5. HTML5 has roped in new features. Such storage features are localStorage and
IndexDB.

The web storage objects window.localStorage and window.sessionStorage store data

with no expiration date and storage for one session respectively. The localStorage
object will have the data saved even when the browser is closed. setItem and
removeItem are the functions commonly used to store and remove data from the
storage. Also, the most important part is that these features are supported by all
browsers.

To Store – localStorage.setItem(“username”, “Nisha”);

To Retrieve – document.getElementById(“result”).innerHTML =
localStorage.getItem(“username”); 53

To Remove – localStorage.removeItem(“username”);
 15. CONTENT BEYOND SYLLABUS
Composing Functions in Functional Programming
Function composition in JavaScript is a technique where the output of one function
becomes the input of another, enabling the chaining of functions. This simplifies
complex workflows by breaking them into smaller, reusable, and testable units. It
aligns with the principle of modularity, making code cleaner and easier to maintain.
Implementation: Reusable Pipeline for User Data Processing
Scenario:
Suppose we have user data, and we need to:
1. Normalize the user's name (convert to lowercase).
2. Filter out users under a specific age.
3. Format the data for display.
Code Example:
// Individual processing functions
const normalizeName = (user) => ({ ...user, name: user.name.toLowerCase() });
const filterByAge = (ageLimit) => (user) => user.age >= ageLimit;
const formatForDisplay = (user) => `${user.name} (${user.age} years old)`;
// Function composition utility
const compose = (...functions) => (data) => functions.reduce((result, func) =>
func(result), data);
// Sample pipeline for user data processing
const processUserData = compose( normalizeName, filterByAge(18),
formatForDisplay);
// Example usage
const user = { name: "John Doe", age: 20 };
const processedUser = processUserData(user);
console.log(processedUser); // Output: "john doe (20 years old)“
Modularity: Each function handles a specific part of the workflow, improving code
clarity.
Reusability: Functions like filterByAge and normalizeName can be reused in other
pipelines.
Flexibility: The compose utility allows chaining any combination of functions, making
the pipeline highly adaptable to different workflows. 54
 15. ASSESSMENT SCHEDULE

• Tentative schedule for the Assessment During

2024-2025 Even Semester

Name of the
S.NO Start Date End Date Portion
Assessment
As per schedule after
1 Unit Test 1 UNIT 1
Unit I completion
2 IAT 1 28.01.2025 03.02.2025 UNIT 1 & 2

As per schedule after

3 Unit Test 2 UNIT 3
Unit III completion

4 IAT 2 10.03.2025 15.03.2025 UNIT 3 & 4

5 Model 03.04.2025 17.04.2025 ALL 5 UNITS

163

55
 16. PRESCRIBED TEXT BOOKS
&
REFERENCE BOOKS

TEXT BOOKS:
1. Andy Harris, “HTML5 and CSS3 All-in-One For Dummies Book”, 3rd Edition, 2014.
2. David McFarland, “JavaScript and JQuery: Interactive Front-End Web
Development”.
REFERENCES:

1. Robert. W. Sebesta, "Programming the World Wide Web", Pearson Education,

Fourth Edition, 2007 .

2. Deitel, Deitel, Goldberg, "Internet and World Wide Web How To Program",

Pearson Education, Third Edition, 2006.

3. Marty Hall and Larry Brown, “Core Web Programming”, Pearson Education,

Second Edition, Volume I and II, 2001.

4. Bates, “Developing Web Applications”, Wiley, 2006

5. https://www.w3schools.com/js/js_es6.asp

6. http://es6-features.org/

7. https://www.tutorialspoint.com/es6/index.htm

56
 17. MINI PROJECT – 1 to 5

Type 1:
Create a static website for a "Customer Feedback Portal" for a
bank.
❑ Use HTML5, CSS3, and basic JavaScript to collect feedback (name,
email, and comments).

❑ Display the submitted feedback dynamically on the webpage.

Type 2:

Build a banking dashboard using HTML, CSS, and JavaScript.

❑ Include sections for customer details, account details, and recent
transactions.

❑ Use JavaScript Objects to dynamically update the dashboard content.

Type 3:

Develop a responsive "Banking Services Website" using

Bootstrap.
❑ Include features like an About Us page, Contact Us page, and a "Check
Balance" functionality (using JavaScript).

57
 17. MINI PROJECT – 1 to 5

Type 4:

Build a Loan Eligibility Calculator as a single-page

application.
❑ Use JavaScript to collect user details and calculate their loan eligibility based
on predefined conditions.

❑ Make the page interactive with Bootstrap components.

Type 5:
Create a fully functional Online Banking System.

❑ Allow users to add customer details, manage transactions, and

check account balances.

❑ Use advanced JavaScript concepts like Promises, async/await,

and the Fetch API to handle data operations.

❑ Integrate responsive design using Bootstrap.

58
 Thank you

Disclaimer:

This document is confidential and intended solely for the educational purpose of
RMK Group of Educational Institutions. If you have received this document through
email in error, please notify the system manager. This document contains
proprietary information and is intended only to the respective group / learning
community as intended. If you are not the addressee you should not disseminate,
distribute or copy through e-mail. Please notify the sender immediately by e-mail if
you have received this document by mistake and delete this document from your
system. If you are not the intended recipient you are notified that disclosing,
copying, distributing or taking any action in reliance on the contents of this
information is strictly prohibited.

59