Full Stack Web Development

TCS 693
Compiled By: Dr. Vijay Singh
Full Stack Web Development TCS 693
I
World Wide Web (WWW)?
The World Wide Web (WWW) is a system of interlinked web pages
that are accessed through the Internet using a web browser.

• Invented by Tim Berners-Lee

• Uses HTTP/HTTPS protocol

• Information is stored in the form of web pages

• Web pages are written using HTML

Client–Server Architecture
How a Website Works
• User enters URL in browser
• Browser sends request to server
• Server processes request
• Response sent back to browser
• Browser renders web page

Components
• Client: Browser (Chrome, Edge)
• Server: Apache, Nginx
• Protocol: HTTP / HTTPS
Website Structure
Frontend (Client Side)
• HTML → Structure
• CSS → Styling
• JavaScript → Behavior

Backend (Server Side)

• PHP, [Link], Python
• Database (MySQL, MongoDB)
HTML

HTML (HyperText Markup Language) is a markup language used to

structure web pages.

Features
• Easy to learn
• Platform independent
• Supports multimedia
• Not a programming language
Markup Language

A markup language is used to structure, format, and present data.

It does not perform logic, calculations, or decision-making.
Key Characteristics
Describes structure and layout
No variables, loops, or conditions
Interpreted by browsers or parsers
Used for content presentation
Examples
HTML – Web page structure
XML – Data storage and transfer
SGML – Standard generalized markup
XHTML – HTML with XML rules
Markdown – Lightweight formatting
Scripting Language
A scripting language is used to automate tasks, add interactivity, and control
behavior of applications—often inside another environment.
Key Characteristics
Interpreted (no compilation step)
Used for client-side or server-side tasks
Supports variables, loops, conditions
Executes line-by-line
Examples
JavaScript – Client-side scripting
PHP – Server-side scripting
Python – Automation & scripting
Ruby – Web scripting
Shell Script – OS automation
Programming Language

A programming language is used to develop complete software applications,

perform complex computations, and build systems from scratch.
Key Characteristics
Can be compiled or interpreted
Supports OOP, data structures, algorithms
Used to build desktop, mobile, web, and system software
High performance and scalability
Examples
C – System programming
C++ – High-performance apps
Java – Enterprise & Android apps
Python – General-purpose programming
C# – Windows & game development
•Markup language defines what the content is.
•Scripting language defines how the content behaves.
•Programming language defines how the system works.
<form>
<label>First name:</label>
<input type="text" name="firstname"><br><br>
<label>Last name:</label>
<input type="text" name="lastname"><br><br>
<label>Gender :</label>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<br><br>
<label>Email:</label>
<input type="email" name="email"><br><br>
<label>Date of Birth:</label>
<input type="date" name="dob"><br><br>
<label>Address :</label><br>
<textarea name="address" rows="4" cols="40"></textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<form id="myForm" onsubmit="displayData(); return false;">
<label>First name:</label>
<input type="text" id="firstname"><br><br>
<label>Last name:</label>
<input type="text" id="lastname"><br><br>
<label>Gender :</label>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<br><br>
<label>Email:</label>
<input type="email" id="email"><br><br>
<label>Date of Birth:</label>
<input type="date" id="dob"><br><br>
<label>Address :</label><br>
<textarea id="address" rows="4" cols="40"></textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<hr>
<h3>Entered Information</h3>
<div id="output"></div>
<script>
function displayData() {
var fname = [Link]("firstname").value;
var lname = [Link]("lastname").value;
var email = [Link]("email").value;
var dob = [Link]("dob").value;
var address = [Link]("address").value;
var gender = "";
var genders = [Link]("gender");
for (var i = 0; i < [Link]; i++) {
if (genders[i].checked) {
gender = genders[i].value;
}
}
[Link]("output").innerHTML =
"<p><b>First Name:</b> " + fname + "</p>" +
"<p><b>Last Name:</b> " + lname + "</p>" +
"<p><b>Gender:</b> " + gender + "</p>" +
"<p><b>Email:</b> " + email + "</p>" +
"<p><b>Date of Birth:</b> " + dob + "</p>" +
"<p><b>Address:</b> " + address + "</p>";
}
</script>
</body>
</html>
Check Boxes
<html>
<head> <title>Checkbox Example</title> </head>
<body>
<h2>Select Your Skills</h2>
<form onsubmit="showSkills(); return false;">
<input type="checkbox" id="html" name="skills" value="HTML">
<label for="html">HTML</label><br>
<input type="checkbox" id="css" name="skills" value="CSS">
<label for="css">CSS</label><br>
<input type="checkbox" id="js" name="skills" value="JavaScript">
<label for="js">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
<hr><h3>Selected Skills:</h3>
<div id="output"></div>
<script>
function showSkills() {
var skills = [Link]("skills");
var selectedSkills = [];

for (var i = 0; i < [Link]; i++) {

if (skills[i].checked) {
[Link](skills[i].value);
}
}
if ([Link] === 0) {
[Link]("output").innerHTML =
"<p>No skill selected</p>";
} else {
[Link]("output").innerHTML =
"<p><b>You selected:</b> " + [Link](", ") + "</p>";
}
}
</script>
</body>
</html>
Output
Dropdown
<html>
<head> <title>Dropdown Example</title> </head>
<body> <h2>Select Your Course</h2>
<form onsubmit="showCourse(); return false;">
<label for="course">Course:</label>
<select id="course">
<option value="">-- Select Course --</option>
<option value="[Link]">[Link]</option>
<option value="[Link]">[Link]</option>
<option value="BCA">BCA</option>
<option value="MCA">MCA</option>
</select> <br><br>
<input type="submit" value="Submit">
</form>
<h3>Selected Course:</h3>
<div id="output"></div>
<script>
function showCourse() {
var course = [Link]("course").value;

if (course === "") {

[Link]("output").innerHTML =
"<p>No course selected</p>";
} else {
[Link]("output").innerHTML =
"<p><b>You selected:</b> " + course + "</p>";
}
}
</script>
</body>
</html>
Popup boxes
Alert
• Displays a simple message
• No user input
• Only OK button
<html><body>
<h2>Alert Box Example</h2>
<button onclick="showAlert()">Click Me</button>
<script>
function showAlert() {
alert("Form submitted successfully!");
}
</script>
</body></html>
Confirm Box
• Takes Yes / No decision
• Returns true or false
<html> <body><h2>Confirm Box Example</h2>
<button onclick="showConfirm()">Delete Record</button>
<p id="result"></p>
<script>
function showConfirm() {
var choice = confirm("Are you sure you want to delete?");

if (choice) {
[Link]("result").innerHTML = "Record deleted";
} else {
[Link]("result").innerHTML = "Action cancelled";
}
}
</script> </body> </html>
Prompt Box
• Takes user input
• Returns entered value or null
<html> <body><h2>Prompt Box Example</h2>
<button onclick="showPrompt()">Enter Name</button>
<p id="output"></p>
<script>
function showPrompt() {
var name = prompt("Enter your name:");

if (name === null || name === "") {

[Link]("output").innerHTML = "No name entered";
} else {
[Link]("output").innerHTML =
"Hello, " + name;
}
}
</script> </body> </html>
Basic Form Validation
Form validation ensures that user input is correct and complete before
submitting data to the server.
It can be done using:
HTML5 attributes (client-side)
JavaScript logic (custom client-side)

Validation improves:
Data accuracy
User experience
<form onsubmit="return validateForm()">
Name: <input type="text" id="name"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var name = [Link]("name").value;

if (name === "") {

alert("Name is required");
return false;
}
return true;
}
</script>
Required Fields
A required field must be filled before form submission.

HTML5 Method

<form>
Name: <input type="text" required><br><br>
<input type="submit">
</form>
JavaScript Method
<input type="text" id="fname">
<button onclick="check()">Submit</button>
<script>
function check() {
if ([Link]("fname").value === "") {
alert("Field cannot be empty");
}
}
</script>
Email & Number Validation

Using HTML5
<input type="email" required>
Using JavaScript
<input type="text" id="email">
<button onclick="validateEmail()">Check</button>

<script>
function validateEmail() {
var email = [Link]("email").value;

if (![Link]("@")) {
alert("Invalid email");
}
}
</script>
Number Validation
Using HTML5
<input type="number" min="1" max="100" required>
Using JavaScript
<input type="text" id="age">
<button onclick="validateAge()">Check</button>
<script>
function validateAge() {
var age = [Link]("age").value;
if (isNaN(age)) {
alert("Enter a valid number");
}
}
</script>
Pattern Attribute
The pattern attribute uses regular expressions to restrict input format.

Mobile Number
<input type="text" pattern="[0-9]{10}" title="Enter 10 digit mobile number“
required>
Password
<input type="password"
pattern="(?=.*[A-Z])(?=.*[0-9]).{6,}"
title="Must contain uppercase letter and number">
Example
<form onsubmit="return validate()">
Email:
<input type="email" id="email" required><br><br>
Age:
<input type="number" id="age" required><br><br>
<input type="submit">
</form>
<script>
function validate() {
var age = [Link]("age").value;
if (age < 18) {
alert("Age must be 18 or above");
return false;
}
return true;
}
</script>
What are HTML5 Input Types?
HTML5 input types provide built-in validation, better UI controls, and improved
user experience by restricting the type of data a user can enter.
<input type="text" placeholder="Enter your name">
<input type="password" placeholder="Enter password">
//Hides characters for sensitive data.
<input type="email" placeholder="Enter email" required>
//Validates email format automatically.
<input type="number" min="1" max="100" placeholder="Enter age">
//Accepts only numeric values.
<input type="date"> //Provides a calendar for date selection.
<input type="time"> //Allows selection of time.
<input type="color"> //Opens a color picker.
<input type="range" min="0" max="100">//Creates a slider control for numeric range.
<input type="file">//Allows file upload.
Variables & Data Types
Variables store data values.
JavaScript has dynamic typing (type can change).
Main data types: Number, String, Boolean, Undefined, Null, BigInt, Symbol,
Object.
<script>
let a = 10; // Number
let b = "GEU"; // String
let c = true; // Boolean
let d; // Undefined
let e = null; // Null
[Link](typeof a, typeof b, typeof c, typeof d, e);
</script>
var, let, const
var → function-scoped, can be re-declared (older, avoid)
let → block-scoped, can be reassigned
const → block-scoped, cannot be reassigned (value fixed)
<script>
var x = 5;
var x = 10; // allowed (re-declare)
let y = 5;
// let y = 10; // not allowed (re-declare)
y = 10; // allowed (reassign)
const z = 5; // z = 10; // not allowed (reassign)
</script>
Primitive vs Non-Primitive Types

Primitive: stored by value (copy)

Number, String, Boolean, Undefined, Null, BigInt, Symbol

Non-primitive: stored by reference

Object, Array, Function
<script>
// Primitive (copy)
let p1 = 10;
let p2 = p1;
p2 = 20;
[Link](p1, p2); // 10 20

// Non-primitive (reference)
let arr1 = [1,2];
let arr2 = arr1;
[Link](3);
[Link](arr1, arr2); // [1,2,3] [1,2,3]
</script>
Operators
Arithmetic + - * / % ** ++ --
<script>
let a = 10, b = 3;
[Link](a+b, a-b, a*b, a/b, a%b, a**b);
</script>

Relational (Comparison)> < >= <= == != === !==

<script>
[Link](10 > 5); // true
[Link](10 <= 5); // false
</script>
Logical && || !
<script>
let age = 20;
[Link](age >= 18 && age <= 60); // true
[Link](!(age < 18)); // true
</script>
== vs ===
== compares values only (type conversion happens)
=== compares value + type (strict)

<script>
[Link](5 == "5"); // true (type conversion)
[Link](5 === "5"); // false (number vs string)
</script>
Switch

<script>
let day = 3;
switch(day) {
case 1: [Link]("Monday"); break;
case 2: [Link]("Tuesday"); break;
case 3: [Link]("Wednesday"); break;
default: [Link]("Invalid day");
}
</script>
Loops
For
<script>
for (let i = 1; i <= 5; i++) {
[Link](i);
} </script>
While
<script>
let i = 1;
while (i <= 5) {
[Link](i);
i++;
}</script>
do-while

<script>
let j = 1;
do {
[Link](j);
j++;
} while (j <= 5);
</script>
Loop with Form Inputs
<!DOCTYPE html>
<html>
<body>

<h3>Select Subjects</h3>

<form onsubmit="showSubjects(); return false;">

<input type="checkbox" name="sub" value="DBMS"> DBMS <br>
<input type="checkbox" name="sub" value="OS"> OS <br>
<input type="checkbox" name="sub" value="CN"> CN <br><br>
<input type="submit" value="Submit">
</form>

<p id="out"></p>
<script>
function showSubjects() {
let boxes = [Link]("sub");
let selected = [];

for (let i = 0; i < [Link]; i++) {

if (boxes[i].checked) {
[Link](boxes[i].value);
}
}
[Link]("out").innerHTML =
([Link] === 0) ? "No subject selected" : "Selected: " + [Link](", ");
}
</script>
</body>
</html>
Document Object Model (DOM) – Window Object
The Document Object Model (DOM) represents an HTML page as a
structured tree of objects. It allows JavaScript to access, manipulate, and
control web page elements dynamically. At the top level of the DOM
hierarchy is the window object`, which represents the browser window or tab.
All global JavaScript objects, functions, and variables automatically becom
Window Object
The window object is the global object in the browser environment. It
controls browser-related features such as alerts, navigation, timing, screen
size, and history.
• Parent of all other objects (document, navigator, screen, history)
• Represents the browser window
• Provides methods for interaction with the browse members of the window object.
Common Window Object Properties

Property Description
[Link] Refers to the HTML document
[Link] Current URL of the page
[Link] Browser history
[Link] Browser information
[Link] Screen resolution info
[Link] Width of browser window
[Link] Height of browser window
alert() – Display Message Box
<script>
[Link]("Welcome to DOM!");
</script>

confirm() – Confirmation Dialog

<script>
let result = [Link]("Do you want to continue?");
if(result){
[Link]("User clicked OK");
} else {
[Link]("User clicked Cancel");
}
</script>
prompt() – Input Dialog
<script>
let name = [Link]("Enter your name:");
[Link]("Hello " + name);
</script>
open() – Open New Window/Tab
<script>
[Link]("[Link]
</script>
close() – Close Window
<script>
[Link]();
</script>
setTimeout() – Execute After Delay
<script>
setTimeout(function(){
alert("This appears after 3 seconds");
}, 3000);
</script>

setInterval() – Repeated Execution

<script>
setInterval(function(){
[Link]("Running every 2 seconds");
}, 2000);
</script>
history Object – Browser History
<script>
[Link](); // Go to previous page
[Link](); // Go to next page
</script>

navigator Object – Browser Information

<script>
[Link]([Link]);
[Link]("<br>");
[Link]([Link]);
</script>
• window is the global object
• You can write alert() instead of [Link]()
• DOM manipulation is done through [Link]
• The Window object is the top-level object in the DOM hierarchy and
represents the browser window. It provides methods like alert(),
prompt(), setTimeout() and properties like location, history, and
navigator to control browser behavior using JavaScript.
Window Object Hierarchy

Window → Document → HTML → Head / Body → Elements

→ Location
→ History
→ Navigator
→ Screen
• window is the root object of the browser environment

• document controls the webpage content

• location manages URL navigation

• history manages browser navigation

• navigator gives browser & device info

• screen provides display details

• All JavaScript global variables & functions belong to window

DOM Manipulation (Document Object Model)
DOM represents the HTML page as a tree of objects.
JavaScript uses DOM methods to access and modify HTML elements dynamically.
getElementById()
Selects one element using its unique id.
<p id="demo">Hello</p>
<button onclick="changeText()">Click</button>
<script>
function changeText() {
[Link]("demo").innerHTML = "Welcome to GEU";
}
</script>
getElementsByName()
Selects multiple elements with same name (used for radio/checkbox).

<input type="radio" name="gender" value="Male"> Male

<input type="radio" name="gender" value="Female"> Female
<button onclick="showGender()">Submit</button>
<script>
function showGender() {
var g = [Link]("gender");
for (var i = 0; i < [Link]; i++) {
if (g[i].checked) {
alert(g[i].value);
}
}
}
</script>
getElementsByClassName()
Selects all elements of same class.

<p class="text">One</p>
<p class="text">Two</p>
<button onclick="changeAll()">Change</button>

<script>
function changeAll() {
var x = [Link]("text");
for (var i = 0; i < [Link]; i++) {
x[i].[Link] = "red";
}
}
</script>
querySelector()
Selects first matching element using CSS selector.

<p class="msg">Hello</p>
<button onclick="changeMsg()">Click</button>
<script>
function changeMsg() {
[Link](".msg").innerHTML = "DOM is Powerful";
}
</script>
JavaScript Events
Events occur due to user actions (click, type, move mouse).
onclick

<button onclick="sayHi()">Click Me</button>

<script>
function sayHi() {
alert("Button Clicked");
}
</script>
Onchange

<select onchange="showCourse([Link])">
<option value="">Select</option>
<option value="[Link]">[Link]</option>
<option value="MCA">MCA</option>
</select>

<script>
function showCourse(val) {
alert("Selected: " + val);
}
</script>
onmouseover

<p onmouseover="changeColor(this)">Hover Me</p>

<script>
function changeColor(x) {
[Link] = "blue";
}
</script>
onkeyup

<input type="text" onkeyup="showText([Link])">

<p id="out"></p>
<script>
function showText(val) {
[Link]("out").innerHTML = val;
}
</script>
Dynamic HTML
Dynamic HTML means changing content, style, and structure at runtime using JavaScript.
Change Text

<p id="t">Old Text</p>

<button onclick="change()">Change</button>
<script>
function change() {
[Link]("t").innerHTML = "New Text";
}
</script>
Change Color

<p id="c">Color Me</p>

<button onclick="color()">Red</button>

<script>
function color() {
[Link]("c").[Link] = "red";
}
</script>
Change Visibility

<p id="p">Hide Me</p>

<button onclick="hide()">Hide</button>

<script>
function hide() {
[Link]("p").[Link] = "none";
}
</script>
Password Strength Checker
Password:
<input type="password" id="pwd" onkeyup="checkStrength()">
<p id="strength"></p>

<script>
function checkStrength() {
let pwd = [Link]("pwd").value;
let strength = "Weak";
if ([Link] >= 8 && /[A-Z]/.test(pwd) && /[0-9]/.test(pwd)) {
strength = "Strong";
} else if ([Link] >= 6) {
strength = "Medium";
}
[Link]("strength").innerHTML =
"Password Strength: " + strength;
}
</script>
Show / Hide Password
Allows users to toggle password visibility for better usability.
Password:
<input type="password" id="pass">
<input type="checkbox" onclick="toggle()"> Show Password
<script>
function toggle() {
let p = [Link]("pass");
[Link] = ([Link] === "password") ? "text" : "password";
}
</script>
Character Counter in Textarea
Displays remaining or used characters while typing.

<textarea id="msg" rows="4" cols="30" onkeyup="countChar()"></textarea>

<p id="count">Characters: 0</p>
<script>
function countChar() {
let text = [Link]("msg").value;
[Link]("count").innerHTML =
"Characters: " + [Link];
}
</script>
JAVASCRIPT FUNCTIONS & ARRAYS
Functions
A function is a reusable block of code that performs a specific task.

<script>
function greet() {
alert("Welcome to JavaScript");
}
greet();
</script>
Parameterized Functions
A function that accepts parameters (inputs).

<script>
function greetUser(name) {
alert("Hello " + name);
}
greetUser(“Amit");
</script>
Return Values
Functions can return a value using return.

<script>
function add(a, b) {
return a + b;
}
let result = add(5, 3);
[Link](result);
</script>
Arrays
An array stores multiple values in a single variable.

<script>
let subjects = ["DBMS", "OS", "CN"];
[Link](subjects);
[Link](subjects);
</script>
Array Methods
<script>
let arr = ["A", "B"];
[Link]("C");//push() – Add at end
[Link](arr);
</script>

<script>
[Link]();//pop() – Remove last
[Link](arr);
</script>
shift() – Remove first
<script>
[Link]();
[Link](arr);
</script>
join() – Convert array to string
<script>
let courses = ["[Link]", "MCA", "MBA"];
[Link]([Link](", "));
</script>
//length – Number of elements
<script>
[Link]([Link]);
</script>
STRING METHODS
//toUpperCase()
Converts string to uppercase.
<script>
let name = "graphic era";
[Link]([Link]());
</script>
//trim() Removes extra spaces from both ends.
<script>
let text = " hello world ";
[Link]([Link]());
</script>
substring()
Extracts part of a string.

<script>
let str = "JavaScript";
[Link]([Link](0, 4)); // Java
</script>
Page Redirection
Page redirection is used to navigate the user to another page automatically or after an event using
JavaScript.

<button onclick="redirect()">Go to Google</button>

<script>
function redirect() {
[Link] = "[Link]
}
</script>
Form Reset using JavaScript
Form reset clears all input fields and restores default values.

<form id="myForm">
Name: <input type="text"><br><br>
Email: <input type="email"><br><br>

<button type="button" onclick="resetForm()">Reset</button>

</form>

<script>
function resetForm() {
[Link]("myForm").reset();
}
</script>
JavaScript Objects & Classes
JavaScript Objects

• A JavaScript object is a real-world entity representation that stores related data (properties) and behaviour
(methods) in the form of key–value pairs.
• Objects are used to model:
• Student, Employee, Product, User, etc.
Key Characteristics

• Properties → variables inside object

• Methods → functions inside object
• Accessed using dot (.) operator
<script>
let student = {
name: “Amit",
roll: 101,
course: "[Link]",
display: function () {
return [Link] + " - " + [Link];
}
};

[Link]([Link]);
[Link]([Link]());
</script>
Ways to Create Objects
• Using Object Literal
let obj = { key: value };

• Using Constructor Function

<script>
function Student(name, roll) {
[Link] = name;
[Link] = roll;
}

let s1 = new Student("Amit", 102);

</script>
JavaScript Classes
A class is a blueprint or template used to create multiple objects with similar properties and methods.
class keyword
constructor() initializes object
this refers to current object
Methods defined without function keyword

<script>
class Student {
constructor(name, course) {
[Link] = name;
[Link] = course;
}
info() {
return [Link] + " studies " + [Link];
}
}
let st1 = new Student("Neha", "MCA");
[Link]([Link]());
</script>
Class Inheritance
<script>
class Person {
constructor(name) {
[Link] = name;
}
greet() {
return "Hello " + [Link];
}
}
class Teacher extends Person {
constructor(name, subject) {
super(name);
[Link] = subject;
}

details() {
return [Link]() + ", Subject: " + [Link];
}
}
let t1 = new Teacher("Dr. Singh", "DBMS");
[Link]([Link]());
</script>
Full Stack vs MERN Stack
Full Stack (broad concept)
A full stack developer works on both:
• Frontend (UI): HTML, CSS, JavaScript + frameworks (React/Angular/Vue)
• Backend (server + APIs): [Link] / Java / Python / .NET / PHP, etc.
• Database: MySQL / PostgreSQL / MongoDB / Oracle, etc.
• So Full Stack = any combination of frontend + backend + database + deployment.

Examples of full stack combos

• React + Java Spring Boot + MySQL
• Angular + .NET + SQL Server
• Vue + Django + PostgreSQL
• React + Node + MongoDB (this one is MERN)
MERN Stack

MERN is a specific full-stack technology stack:

• M = MongoDB (database)
• E = [Link] (backend framework on Node)
• R = React (frontend)
• N = [Link] (runtime/backend)
So MERN ⊂ Full Stack (MERN is a subset of full stack).
Key differences
• Scope
• Full Stack: wide, many tech options
• MERN: fixed set (MongoDB + Express + React + Node)
• Flexibility
• Full Stack: more flexible (you can mix any tools)
• MERN: less flexible but very consistent as a package
• Learning path
• Full Stack: can be broader depending on chosen tech
• MERN: smoother learning path (all JavaScript-based)
• Best for
• Full Stack: enterprise stacks, varied projects
• MERN: modern web apps, startups, rapid development, JS-heavy teams
Regular Expression
A Regular Expression (RegEx) is a sequence of characters that defines a
search pattern.
In JavaScript, regular expressions are mainly used for string validation,
pattern matching, searching, and replacing text.
RegEx in JavaScript
In JavaScript, a regular expression can be created using:
Literal notation: /pattern/
RegExp object: new RegExp("pattern")

The most commonly used method is:

[Link](string)
Explanation of Password RegEx

/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/
Meaning:

^ → Start of string
(?=.*[a-z]) → At least one lowercase letter
(?=.*[A-Z]) → At least one uppercase letter
(?=.*\d) → At least one digit
(?=.*[@$!%*?&]) → At least one special character
{8,} → Minimum 8 characters
$ → End of string
Password At least 6 characters, letters and numbers:
let simplePasswordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;
let pass = "abc123";
[Link]([Link](pass)); // true

URL Validation
let urlPattern = /^(https?:\/\/)?([\w\-])+\.{1}[a-zA-Z]{2,}(\/\S*)?$/;
let url = "[Link]
[Link]([Link](url)); // true
Date Format (DD/MM/YYYY)
let datePattern = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/;
let date = "29/01/2026";
[Link]([Link](date)); // true
Only Numbers
let numberPattern = /^\d+$/;
let value = "12345";
[Link]([Link](value)); // true
PIN Code – 6 Digits
let pinPattern = /^\d{6}$/;
let pincode = "248001";
[Link]([Link](pincode)); // true
Email Address Validation
let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
let email = "user@[Link]";
[Link]([Link](email)); // true
Password Validation
let passwordPattern =/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-
z\d@$!%*?&]{8,}$/;
let password = "Admin@123";
[Link]([Link](password)); // true
JSON
JSON (JavaScript Object Notation) is a lightweight, text-based data
interchange format used to store and exchange data between a client
(browser/JavaScript) and a server.
Although it is derived from JavaScript object syntax, JSON is language-
independent, meaning it works with Java, Python, PHP, C#, etc.
JSON vs JavaScript
JavaScript Object JSON
{ name: "Amit", age: 40 } { "name": "Amit", "age": 40 }
Keys can be unquoted Keys must be in double quotes
Can store functions ❌ No functions
Used inside JS Used for data exchange
Characteristics of JSON
• Text-based format: Written in plain text, making it platform-
independent.
• Language-independent: Although derived from JavaScript syntax,
JSON is supported by almost all programming languages.
• Lightweight: Uses minimal syntax compared to XML, resulting in
faster data transmission.
• Structured data representation: Organizes data in a clear key–value
format.
JSON Data Structure
JSON represents data using two main structures:

Objects
• Unordered collections of key–value pairs
• Keys are strings; values can be strings, numbers, objects, arrays, booleans, or
null
Arrays
• Ordered lists of values
• Values can be of any valid JSON data type
JSON Data Types

• String – Text data enclosed in double quotes

• Number – Integer or floating-point values
• Boolean – true or false
• Array – Ordered collection of values
• Object – Collection of key–value pairs
• Null – Represents an empty or unknown value
Why JSON is Used

• Data exchange between client and server (e.g., web applications, APIs)
• Configuration files and data storage
• Interoperability between different systems and platforms
• Efficient alternative to XML due to simpler syntax and smaller size
JSON vs XML
Feature JSON XML
Readability Easy Verbose
Data Size Compact Larger
Parsing Speed Fast Slower
Data Structure Key–Value Tag-based
JSON is a standard data representation format designed for efficient data
exchange. Its simplicity, readability, and cross-platform support make it
the backbone of modern web services, APIs, and client-server
communication.
but No Support for comments, limited data types and Not suitable for
complex document markup.
Standard Format for Data Exchange
• JSON is the default format for APIs
• Used in AJAX, Fetch API, REST APIs
• Almost all modern web applications use JSON

{
"id": 101,
"name": "Laptop",
"price": 55000
}
Easy to Convert Between JSON and JavaScript Objects
JavaScript provides built-in methods:
[Link]() → JSON string ➝ JS object
[Link]() → JS object ➝ JSON string
JSON vs JavaScript Object
JavaScript Object//JS Object → used for programming logic
let person = {
name: “Amit",
age: 35,
department: "CSE"
};
JSON //JSON → used for data transfer
{
"name": “Amit",
"age": 35,
"department": "CSE"
}
Converting JSON to JavaScript Object

let jsonData = '{"name":“Amit","age":35}';

let obj = [Link](jsonData);
[Link]([Link]); // Amit
[Link]([Link]); // 35

[Link]() is used to convert a JSON-formatted string into a JavaScript object, so that the data can
be accessed, manipulated, and processed within a JavaScript program.
SON data received from external sources (server, API, file, localStorage) is always in string format.
JavaScript cannot directly work with JSON strings as objects—so we use [Link]().
Converting JavaScript Object to JSON
let student = {
roll: 101,
name: "Amit",
branch: "CSE"
};
let jsonString = [Link](student);
[Link](jsonString);

//[Link]() is used to convert a JavaScript object (or array) into a JSON-

formatted string, so that it can be stored, transmitted, or sent over a network.
JSON with Array
{
"students": [
{ "roll": 1, "name": "Amit" },
{ "roll": 2, "name": "Riya" },
{ "roll": 3, "name": "Neha" }
]
}

Accessing in JavaScript
let data = {
students: [
{ roll: 1, name: "Amit" },
{ roll: 2, name: "Riya" },
{ roll: 3, name: "Neha" }
]
};
[Link]([Link][1].name); // Riya
JSON Example with HTML
<!DOCTYPE html><html><body>
<h3>Student Details</h3>
<p id="output"></p>
<script>
let jsonData = '{"name":“Amit","designation":"Professor","dept":"CSE"}';
let obj = [Link](jsonData);
[Link]("output").innerHTML =
"Name: " + [Link] + "<br>" +
"Designation: " + [Link] + "<br>" +
"Department: " + [Link];
</script></body></html>
Practical Example: Student Registration + Save to JSON + Read back
!DOCTYPE html>
<html>
<head>
<title>JSON Practical Example</title>
<style>
body { font-family: Arial; margin: 20px; }
input, button { padding: 8px; margin: 5px; }
table { border-collapse: collapse; width: 60%; margin-top: 10px; }
th, td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>
</head>
<body>
<h2>Student Registration (JSON Practical)</h2>
<input id="name" placeholder="Enter Name">
<input id="roll" placeholder="Enter Roll No">
<input id="dept" placeholder="Enter Department">
<button onclick="saveStudent()">Save Student</button>
<button onclick="loadStudents()">Load Students</button>
<h3>Saved Students</h3>
<table> <thead>
<tr> <th>Roll</th>
<th>Name</th>
<th>Department</th> </tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<script>
function saveStudent() {
// 1) Read values from inputs
let name = [Link]("name").[Link]();
let roll = [Link]("roll").[Link]();
let dept = [Link]("dept").[Link]();
if (!name || !roll || !dept) {
alert("Please fill all fields!");
return;
}
// 2) Create a JavaScript object (NOT JSON yet)
let studentObj = {
roll: roll,
name: name,
dept: dept
};
// 3) Get existing students from localStorage (it is JSON string)
let oldData = [Link]("students"); // string OR null

// 4) Convert JSON string to JS array

let studentsArray = oldData ? [Link](oldData) : [];

// 5) Add new student object into array

[Link](studentObj);

// 6) Convert JS array -> JSON string (because storage needs string)

[Link]("students", [Link](studentsArray));
// clear input
[Link]("name").value = "";
[Link]("roll").value = "";
[Link]("dept").value = "";

alert("Student saved in JSON format!");

loadStudents(); // refresh table
}
function loadStudents() {
let data = [Link]("students"); // JSON string

// If no data, show empty

if (!data) {
[Link]("tableBody").innerHTML = "<tr><td
colspan='3'>No students found</td></tr>";
return;
}
// Convert JSON string back into JS array of objects
let studentsArray = [Link](data);
let rows = "";
[Link](s => {
rows += `
<tr>
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
</tr>
`;
});
[Link]("tableBody").innerHTML = rows;
}
// Auto-load table on page refresh
loadStudents();
</script>
</body>
</html>

In this program:
• We take user input and create a JavaScript object.
• We store data in localStorage, but localStorage can store only STRING.
• So we convert object/array into JSON string using [Link]()
• When reading back, we convert JSON string into object using [Link]()
Event Listener in JavaScript
What is an Event?

An event is an action that occurs in the browser, such as:

• Clicking a button
• Moving the mouse
• Typing on the keyboard
• Submitting a form
• Page loading
What is an Event Listener?
An event listener is a JavaScript mechanism that:
listens for a specific event on an element and executes a function when that
event occurs.
It is added using:

[Link](event, function);
Syntax of addEventListener()
[Link]("event", callbackFunction);

Components:
event → type of event (e.g., "click", "mouseover")
callbackFunction → function executed when event occurs
COMMON JAVASCRIPT EVENTS
Event Triggered When
Click Mouse click

dblclick Double click

Mouseover Mouse enter element

Mouseout Mouse leaves element

Keydown Key is pressed

keyup Key is released

Change Input values chages

Submit Form is submitted

load Page finishing loading

Event Object (event or e)
When an event occurs, JavaScript creates an event object.

[Link]("click", function(e) {
[Link]([Link]);
});
Common Event Object Properties:
[Link] → element that triggered the event
[Link] → event type
[Link]() → stops default action
[Link]() → stops bubbling
Button Click
<button id="btn">Click Me</button>

<script>
[Link]("btn").addEventListener("click", function ()
{
alert("Button clicked using Event Listener");
});
</script>
Mouse Over & Mouse Out
<div id="box" style="width:150px;height:150px;border:2px solid black;">
Hover Me
</div>
<script>
const box = [Link]("box");
[Link]("mouseover", () => {
[Link] = "lightgreen";
});
[Link]("mouseout", () => {
[Link] = "white";
});
</script>
Keyboard Event

<input type="text" id="name" placeholder="Type here">

<script>
[Link]("name").addEventListener("keyup",
function (e) {
[Link]("Key pressed:", [Link]);
});
</script>
Form Submit with preventDefault()
<form id="myForm">
<input type="text" required>
<button type="submit">Submit</button>
</form>

<script>
[Link]("myForm").addEventListener("submit", function (e) {
[Link]();
alert("Form submission prevented!");
});
</script>
Multiple Events on Same Element

const btn = [Link]("btn");

[Link]("click", () => [Link]("Clicked"));

[Link]("mouseover", () => [Link]("Hovered"));
CASCADING STYLE SHEETS (CSS)
Need for CSS
CSS (Cascading Style Sheets) is used to describe the presentation, formatting, and
layout of HTML documents. It controls how web content appears on different
devices.
CSS:
• Improves code readability
• Reduces HTML size
• Enhances website performance
• Enables responsive web design
• Easy to update entire website from one file
Example:
<h1 style="color: red;">Welcome</h1>
CSS stands for Cascading Style Sheets.
It defines how HTML elements should be displayed in terms of:
• Color
• Font
• Spacing
• Layout
• Animation
Characteristics
• CSS rules follow a cascade priority
• Supports multiple style sheets
• Compatible with all modern browsers
Basic CSS Syntax and Structure
selector {
property: value;
}
• Selector – HTML element to style
• Property – Styling feature
• Value – Assigned value
Example:
p{
color: blue;
font-size: 16px;
}
Multiple Properties

h1 {
color: green;
text-align: center;
text-transform: uppercase;
}
Using CSS in Web Pages
CSS controls:
• Text appearance
• Backgrounds
• Layout
• Positioning
• Animations
• Responsive behavior

body {
background-color: lightblue;
font-family: Arial;
}
Types of CSS
Inline CSS
• Written inside HTML elements
• Overrides other CSS types

Example:
<p style="color:red;">Inline CSS</p>
Disadvantage:
• Hard to maintain
• Repetition of code
Internal CSS:
• Defined inside <style> tag
• Applies to single page
<style>
p { color: blue; }
</style>
External CSS:
• Stored in .css file
• Reusable and maintainable

<link rel="stylesheet" href="[Link]">

Background Image, Color and Properties
Background Color:
body {
background-color: #f4f4f4;
}
Background Image:
body {
background-image: url("[Link]");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Using Fonts in CSS

Font Properties
p{
font-family: "Times New Roman", serif;
font-size: 18px;
font-style: italic;
font-weight: bold;
}
Borders and CSS Box Model
div {
border: 3px solid black;
}

Border Styles:
• solid
• dashed
• dotted
• double
CSS Box Model Components
• Content
• Padding
• Border
• Margin

div {
width: 300px;
padding: 20px;
border: 5px solid red;
margin: 15px;
}
Introduction to Bootstrap
Bootstrap is a free, open-source CSS framework for developing
responsive websites quickly.
Features:
• Mobile-first design
• 12-column grid system
• Ready-made components
• Browser compatibility

<link href="[Link] rel="stylesheet">

<div class="container">
<button class="btn btn-success">Submit</button>
</div>
What is Bootstrap Grid System?
The Bootstrap Grid System is a responsive, mobile-first layout system
provided by Bootstrap that allows developers to divide a web page into
rows and columns and arrange content neatly across different screen
sizes (mobile, tablet, desktop).
The Bootstrap grid system uses a 12-column layout to design flexible and
responsive web pages.
It is based on containers, rows, and columns.
Basic Structure:

Container
└── Row
└── Columns (total = 12)
Why 12 Columns?
• 12 is easily divisible by 1, 2, 3, 4, 6
• Makes layout design flexible
• Supports equal and unequal column layouts

Visual Diagram (12-Column Grid):

|1|2|3|4|5|6|7|8|9|10|11|12|

Example Layouts:
Two columns: |------6------|------6------|
Three columns: |----4----|----4----|----4----|
Sidebar layout: |----4----|--------8--------|
Main Components
Container:
Defines the width of the page.
• .container → fixed width
• .container-fluid → full width
<div class="container">
Row:
Creates a horizontal group of columns.
<div class="row">
Columns:
Specify how many columns an element occupies (out of 12).
<div class="col-md-6">
<div class="container">
<div class="row">
<div class="col-md-6">Left</div>
<div class="col-md-6">Right</div>
</div>
</div>

Behavior:
• On desktop → two columns side by side
• On mobile → columns stack vertically
Introduction to XML
XML (eXtensible Markup Language) is a text-based markup language
used to store and transport data in a structured, readable format.
It is platform independent and designed to be self-descriptive, meaning
the tags describe the data they contain.

Key points
XML is not a programming language.
XML is not meant for displaying data (HTML is for display).
XML is mainly for data representation + data exchange.
XML allows users to create custom tags.
Uses of XML
XML is used when data must be:
Structured (hierarchical)
Readable and portable
Easy to share between systems
Common uses
Data exchange between applications
Example: sharing data between a Java app and a PHP app.
Web services (SOAP)
SOAP messages are XML-based.
Configuration files
Many software tools use XML configuration.
Storing semi-structured data
Example: product catalogs, invoices, library records.
Document formats
Examples: Office formats like DOCX, XLSX are zipped XML-based formats.
Metadata and feeds
Some publishing standards use XML (e.g., RSS uses XML format).
SOAP (Simple Object Access Protocol) is an XML-based messaging
protocol for exchanging structured information between applications
over a network, enabling communication between diverse systems
regardless of their underlying programming languages or platforms.
Message Format:
All SOAP messages are fundamentally standard XML documents. The XML
structure provides a standardized, machine-parsable format for the message
payload.
Structure Definition:
SOAP uses XML Schemas (XSD) to define the precise structure, elements, and
data types that can appear in a SOAP message, ensuring a rigid contract for
communication.
Interoperability:
By leveraging XML's platform-independent nature, SOAP enables applications
built on different technologies (e.g., a C# application and a Java application) to
"understand" and process the same message format.
Structure of a SOAP Message
A SOAP message is an XML document composed of specific, standardized
elements:
<Envelope>:
The mandatory root element that identifies the XML document as a SOAP message and defines
the overall framework for processing it.
<Header>:
An optional element that contains application-specific control information, such as
authentication credentials, transaction IDs, or routing details. This information can be processed
by intermediary applications along the message path.
<Body>:
The mandatory element that contains the actual message payload, which includes the request
details for a remote procedure call (RPC) or the response data.
<Fault>:
An optional element that, if present, appears within the <Body> and is used to report error
messages and status information if a request fails.
SimpleXML
SimpleXML usually refers to the PHP extension that provides a simple
way to read and work with XML data. It converts XML into an object-
like structure so you can access elements easily.
<students>
<student>
<name>Amit</name>
<marks>85</marks>
</student>
<student>
<name>Neha</name>
<marks>90</marks>
</student>
</students>
Access elements using PHP
<?php
$xml = simplexml_load_file("[Link]");

foreach($xml->student as $s){
echo $s->name . " - " . $s->marks . "<br>";
}
?>
XML Key Components
XML Declaration
<?xml version="1.0" encoding="UTF-8"?>
Elements (Tags)
Building blocks of XML:
<name>Amit</name>
Attributes
Extra information inside a tag:
<student id="101">Amit</student>
Root Element
Every XML must have exactly one root element:
<students> ... </students>
DTD (Document Type Definition)
DTD defines the structure and legal elements of an XML document.
Purpose of DTD
Validates XML structure
Ensures correct element order
Defines allowed elements and attributes

Internal DTD Example

<!DOCTYPE student [
<!ELEMENT student (name, course)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT course (#PCDATA)>
]>
<student>
<name>Amit</name>
<course>CSE</course>
</student>
Limitations of DTD
• No data types (only text)
• Not written in XML syntax
• Less powerful
XML Schema (XSD)
XML Schema (XSD – XML Schema Definition) is an advanced way to define XML
structure with data types and constraints.

Advantages over DTD

Written in XML
Supports data types (int, string, date)
Supports constraints and validation rules
Namespace support
XSD Example
XML file
<student>
<name>Amit</name>
<age>30</age>
</student>
Schema file ([Link])
<xs:schema xmlns:xs="[Link]
<xs:element name="student">
<xs:complexType>
<xs:sequence>
<xs:element name="name" type="xs:string"/>
<xs:element name="age" type="xs:integer"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
jQuery
jQuery is a fast, lightweight, and feature-rich JavaScript library designed to
simplify:
• HTML DOM manipulation
• Event handling
• Animations
• AJAX operations
• Cross-browser compatibility

It follows the principle:

"Write less, do more."
Why jQuery?

Before jQuery, JavaScript required long code for simple tasks.

Pure JavaScript
[Link]("demo").[Link] = "red";
Same in jQuery:
$("#demo").css("color", "red");
Installing and Using jQuery Library
There are two ways to use jQuery:
1. Using CDN: Add this inside <head> or before </body>:
<script src="[Link]
No download required
Faster loading (cached globally)
2. Download and Use Locally
Download from: [Link]
Save [Link] in your project folder
Add:
<script src="[Link]"></script>

What is a CDN?
A Content Delivery Network (CDN) is a distributed network of servers located in different
geographical locations that work together to deliver web content (like images, videos, CSS,
JavaScript, APIs, etc.) to users faster and more reliably.
Basic Structure of jQuery
<html><head><title>jQuery Example</title>
<script src="[Link]
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#demo").text("Hello Students!");
});
});
</script> </head><body>
<p id="demo">Original Text</p>
<button id="btn">Click Me</button>
</body>
</html>
jQuery Syntax
$(selector).action();
Part Meaning
$ jQuery symbol
selector Selects HTML element
action() Performs action

Common Selectors:
Selector Meaning
$("p") Select all paragraphs
$("#id") Select element by ID
$(".class") Select elements by class
$("div p") Select p inside div
Common Actions
Method Purpose
.hide() Hides selected element
.show() Shows hidden element
.toggle() Switch between hide & show
.css() Changes CSS properties dynamically
.text() Changes only text (no HTML formatting)
.html() Changes content including HTML tags
.val() Gets/sets input field value
.addClass() Adds a CSS class
.removeClass() Removes a CSS class
Javascript vs jquery

[Link]("demo").innerHTML = "Hello World";

$("#demo").html("Hello World");
Hide / Show Element using javascript and jquery
<!DOCTYPE html><html><body>
<p id="para">This is JavaScript Example</p>
<button onclick="hideText()">Hide</button>
<button onclick="showText()">Show</button>
<script>
function hideText()
{
[Link]("para").[Link]="none";
}
function showText()
{
[Link]("para").[Link]="block";
}</script></body></html>
Using jquery
<!DOCTYPE html><html><head>
<script src="[Link]
</head><body>
<p id="para">This is jQuery Example</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#para").hide();
});
$("#show").click(function(){
$("#para").show();
});
});</script></body></html>
jQuery Add and Remove Class
<!DOCTYPE html><html><head>
<style>
.highlight{
color:white;
background:green;
font-size:25px;
}</style>
<script src="[Link]
</head><body>
<p id="text">Learning jQuery Classes</p>
<button id="add">Add Class</button>
<button id="remove">Remove Class</button>
<script>
$(document).ready(function(){
$("#add").click(function(){
$("#text").addClass("highlight");
});
$("#remove").click(function(){
$("#text").removeClass("highlight");
}); }); </script></body></html>
jQuery Slide Effect
<button id="slide">Show / Hide</button>
<div id="box" style="background:lightblue;padding:20px;">
This is sliding content
</div>
<script>
$(document).ready(function(){
$("#slide").click(function(){
$("#box").slideToggle();
});
});

</script>
AJAX
AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for
creating better, faster, and more interactive web applications with the help of XML,
HTML, CSS, and Java Script.

AJAX is based on the following open standards −

• Browser-based presentation using HTML and Cascading Style Sheets (CSS).

• Data is stored in XML format and fetched from the server.
• Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.
• JavaScript to make everything happen.
Working of AJAX
Traditional web applications

AJAX Working

The XMLHttpRequest − It is used to perform asynchronous data exchange between

a web browser and a web server.
Advantages of AJAX
• It creates responsive and interactive web applications.
• It supports the development of patterns and frameworks that
decrease the development time.
• It makes the best use of existing technology and feature instead of
using some new technology.
• It makes an asynchronous call to the web server which means the
client doesn't have to wait for the data to arrive before starting
rendering.
Disadvantages of AJAX

• AJAX is fully dependent on Javascript. So if anything happens with

javascript in the browser AJAX will not support.
• The debugging of AJAX applications is difficult.
• Bookmarking of AJAX-enabled pages required pre-planning.
• If one request can fail then it can fail the load of the whole webpage.
• If JavaScript is disabled in your web browser then you are not able to
run the AJAX webpage.
XMLHttpRequest − It is used to perform asynchronous data exchange
between a web browser and a web server. It is a javascript object that
performs asynchronous operations.

variableName = new XMLHttpRequest();

Steps of AJAX Operation
• A client event occurs.
• An XMLHttpRequest object is created.
• The XMLHttpRequest object is configured.
• The XMLHttpRequest object makes an asynchronous request to the
Webserver.
• The Webserver returns the result containing XML document.
• The XMLHttpRequest object calls the callback() function and
processes the result.
• The HTML DOM is updated.
<button onclick="loadData()">Load Message</button>
<p id="result">Result will appear here</p>
<script>
function loadData() {
var xhr = new XMLHttpRequest();
[Link] = function() {
if([Link] == 4 && [Link] == 200) {
[Link]("result").innerHTML = [Link];
}
};
[Link]("GET","[Link]",true);
[Link]();
}</script>
readyState values
Value Meaning

0 Request not initialized

1 Server connection established

2 Request received

3 Processing request

4 Request finished
status codes

Code Meaning

200 OK

404 File not found

500 Server error