Advanced JavaScript
MODULE-3
Contents
● JSON Basics,
● DOM Manipulation,
● Event Handling,
● Simple Interactive Page.
JSON Basics
JavaScript Object Notation
It’s a lightweight data format used to store and exchange data between a server and a web
application.
JSON Rules
1. JSON always starts and ends with { } for an object, or [ ] for an array.
2. Every piece of data is a key–value pair.
3. Keys must be inside double quotes " "
It stores data in three ways:
JSON Object {} JSON Array []
● Used to store related information in key–value ● Used to store multiple items (like a list of
pairs. objects)
● Square brackets [] are used
● Curly braces {} are used.
● Each item inside the array can be an object,
● Keys are always strings (double quotes "key"), number, string, or another array
values can be different types.
[
{
{ "name": "Varshini", "age": 21 },
"name": "Varshini",
{ "name": "Priya", "age": 22 },
"age": 21,
{ "name": "Ananya", "age": 20 }
"city": "Chennai"
]
}
Nested JSON (Object inside Object)
Sometimes you need more details inside a single item
You can put an object inside another object
{
"name": "Varshini",
"age": 21,
"address": {
"city": "Chennai",
"pincode": 600001
}
}
JS Object → JSON String ([Link])
JS objects exist only in your browser’s memory.
If you want to send this data to a server (like when saving a form, logging in, etc.), it
must be in text format.
JSON is a standard text format that all languages understand, not just JavaScript.
let student = { name: "Priya", age: 21 };
// Convert JS object → JSON string
let jsonData = [Link](student);
[Link](jsonData);
// Output: {"name":"Priya","age":21}
JSON String → JS Object ([Link])
When data comes from a server, it’s usually JSON text.
To use it in JS, convert it back into a JS object.
let response = '{"name":"Varshini","age":21}';
// Convert JSON string → JS object
let student = [Link](response);
[Link]([Link]);
// Output: Varshini
DOM
DOM
It acts as a structured representation of an HTML document.
it as a tree structure where every HTML element is a node.
Using the DOM, JavaScript can read, modify, add, or delete elements on the webpage
dynamically.
DOM Manipulation
DOM Manipulation is the process of accessing, changing, adding, or removing elements and
content of a webpage dynamically using JavaScript.
Accessing Elements
getElementById
Select one element by its unique ID.
<body>
<h1 id="unique">Hello World!</h1>
<script>
let heading = [Link]("unique");
[Link] = "red"; // Changes text color
</script>
</body>
getElementsByClassName()
Select multiple elements that share the same class name..
<body>
<p class="myText">Hello</p>
<p class="myText">Hi</p>
<script>
let x = [Link]("myText");
x[0].[Link] = "red";
</script>
</body>
getElementsByTagName()
select all elements with the same HTML tag name — like all <p>, <div>, <h1>, etc
<p>Hello</p>
<p>Welcome</p>
<script>
let tags = [Link]("p");
tags[0].[Link] = "green";
</script>
querySelector()
First element that matches a CSS selector.
<body>
<p class="text">Hello</p>
<p class="text">Hi</p>
<script>
// Select the first element with class "text"
let first = [Link](".text");
// Change its text color
[Link] = "red";
</script>
</body>
querySelectorAll()
select all elements that match a given CSS selector.
<body>
<p class="text">Hello</p>
<p class="text">Hi</p>
<p class="text">Welcome</p>
<script>
// Select all elements with class "text"
let allTexts = [Link](".text");
// Loop through all and change color
[Link](function(item) {
[Link] = "blue";
});
</script>
[Link]() / remove() / toggle()
Add, remove, or toggle CSS classes dynamically.
<p id="demo4">Click the button to change color</p>
<button onclick="toggleColor()">Toggle Color</button>
<style>
.red { color: red; }
.blue { color: blue; }
</style>
<script>
let para = [Link]("demo4");
function toggleColor() {
[Link]("red"); // Adds red if not present, removes if present
}
</script>
Changing content
Innerhtml Text Content
<h2 id="demo">Hello!</h2> <h2 id="demo">Hello!</h2>
<button onclick="changeHTML()">Click here for <button onclick="changeText()">Change Text</button>
text update</button> <script>
<script> function changeText() {
function changeHTML() { [Link]("demo").textContent =
"<b>Hello, Text with tags!</b>";
[Link]("demo").innerHTML =
"<b>Hello i can change the content using }
innerhtml!</b>";}
</script>
</script>
Creating and Appending Elements
<div id="container"></div>
<button onclick="addPara()">Add Paragraph</button>
<script>
function addPara() {
let newPara = [Link]("p"); // Create <p>
[Link] = "I am a new paragraph!";
[Link]("container").appendChild(newPara); // Add to div
}
</script>
Event Handling
Making web pages respond to user actions.
Event handling is how JavaScript detects these actions and responds to them — for example, showing a message when a button
is clicked.
Onclick()
<button onclick="showMessage()">Click Me</button>
<script>
function showMessage() {
alert("Button was clicked!")}
</script>
mouseover / mouseout
Dblclick
When the mouse enters or leaves an element.
single click might be accidental; a double-click
usually shows intentional interaction. <p id="hoverText">Hover over this text</p>
<h2 id="demo">Hello!</h2> <script>
const text =
<button ondblclick="alert('Double [Link]("hoverText")
Clicked!')">Double Click Me</button>
[Link] = () => [Link] =
"blue";
[Link] = () => [Link] =
"black";
</script>
keydown / keyup load
When a key is pressed or released.
When the page (or image) finishes loading.
<input type="text" id="nameBox" placeholder="Type
something"> <body onload="alert('Page Loaded
<script> Successfully!')">
const box = [Link]("nameBox"); </body>
[Link] = () => [Link]("Key pressed!");
Or for an image:
[Link] = () => [Link]("Key released!");
<img src="[Link]" onload="alert('Image
</script>
Loaded!')">
submit change
When a form is submitted. When the input value changes (like dropdowns or
textboxes).
<form onsubmit="alert('Form Submitted!'); return
<select onchange="alert('You changed the option!')">
false;">
<option>Apple</option>
<input type="text" placeholder="Enter name">
<option>Banana</option>
<input type="submit" value="Submit">
<option>Cherry</option>
</form>
</select>
Purpose of Event handling:
Interact with users
● React to clicks, typing, mouse movements, scrolling,
and more.
focus / blur ● Example: Show/hide menus, validate forms, update
content instantly.
When an input gains or loses focus. Create dynamic and responsive interfaces
<input type="text" id="focusBox" ● Pages change based on user behavior without
placeholder="Click inside me"> reloading.
● Example: Changing background color on hover or
updating results while typing.
<script>
Control program flow
const f = [Link]("focusBox");
● Decide what happens and when, based on specific
[Link] = () => [Link] = "yellow"; user actions.
● Example: Prevent form submission until input is
[Link] = () => [Link] = "white"; valid.
Improve user experience
</script>
● Makes websites more interactive and engaging.
● Example: Tooltips, sliders, pop-ups, animations on
user actions.
TASK
Simple interactive Page
THANK YOU