Javascript
The soul of the web
Aditya Prakash Gupta
Software Engineer II @ ORACLE
B.Tech Electronics | IIT BHU'22
LinkedIn Profile Link
What is JavaScript?
JavaScript is a programming language that helps make websites come alive. HTML gives
structure, CSS makes it look nice, and JavaScript makes it interactive.
Think of it like this:
🦴
HTML is the skeleton
👕
CSS is the clothes
🧠
JavaScript is the brain
Introduction to JavaScript
JavaScript is a lightweight, interpreted programming language.
It runs in the browser and makes web pages interactive.
Used in web development, mobile apps, servers (Node.js), and more.
this code logs “hello, JavaScript! on the console
Variables with let
Variables are containers that store data—just
like labeled boxes.
🧠 Why let?
let is used to create a changeable variable
(but only inside a block {}).
💻 Code Example:
Constants with const
Use const when the value should not change.
Think of it like locking the box once it's packed.
Conditional Logic (if, else)
A condition is a question the computer asks before doing something.
Loops – for
Loops repeat actions—great for tasks like printing numbers or checking items in a list.
Structure of a for loop:
output
Loops – while
🧠 When to use while?
Use it when you're not sure how many times you’ll repeat.
📌 Tip: Always make sure the loop stops, or you’ll get an infinite loop!
Arrays – Storing Multiple Items
🧠 What is an array?
An array is like a row of boxes. Each box holds a value.
💡 Real Life Analogy:
Think of an array as a playlist: each song has a number (index), and you can play them
one by one.
Array Operations – Common
Methods
🧠 What can you do with arrays?
You can:
Add items ➕
Remove items ➖
Loop through them 🔁
How JavaScript Runs (JS
Engine)
🧠 What happens when we write
JS?
You write JS code.
Browser uses its JS Engine (like V8
in Chrome) to parse, compile, and
run the code.
🧪 Just-In-Time (JIT) Compilation:
JS is not pre-compiled like Java. It
is interpreted and optimized on
the fly.
fun fact - chrome uses V8 as its javascript engine
🌐 What is the DOM?
🧠 The Big Idea:
DOM stands for Document Object Model.
https://www.w3schools.com/js/js_htmldo
It’s how JavaScript interacts with HTML.
📖 Think of it like this:
m_document.asp
📚
The HTML page is like a tree , and the
DOM is a JavaScript-friendly version of that
tree—where every element (like <h1>, <p>,
or <img>) is a node that JS can access,
change, or delete.
🌲DOM Tree and Nodes
🧠 DOM as a Tree:
When a webpage loads, the browser turns
HTML into a tree of nodes. Each tag
becomes a node, and nodes can have
children.
📚 Types of Nodes:
🔍 You Can:
Element nodes: tags like <div>, <p>
Traverse (navigate)
Text nodes: the words inside elements
Edit
Attribute nodes: like id="main" or
Add/Remove nodes with JavaScript
class="title"
Short Intro to trees
🧠 What is a Tree?
A Tree is a non-linear data structure made
up of nodes connected by edges. It looks
like an upside-down family tree!
🧱 Key Terms:
Root: The top node (like the <html> tag in
DOM)
Child: A node that descends from another
Parent: A node with children
Leaf: A node with no children
🧪 Selecting Elements
🧠 How do we grab things from the DOM? example
We use selectors—just like CSS!
🧰 Useful Methods:
document.getElementById("id")
document.querySelector(".class")
document.querySelectorAll("tag")
🔁 Slide 4: Changing Content
and Style
🧠 Once we select an element, we can change it!
➕ Creating and Removing
Elements
🧠 JavaScript can create new HTML elements too!
creating a new element
removing an element
⚡Events and Interactivity
🧠 DOM becomes powerful with events (clicks, typing, etc.)
🧠 Common Events:
click
mouseover
keydown
submit
💡 You can use events to:
Show/hide content
Validate forms
Play animations
Change styles or content
Event Object and Multiple Events
🧠 What is the Event Object?
When an event happens (like a click), the 🔍 Example: Accessing the Event
browser sends an event object to your
function. This object contains details like:
What was clicked
Mouse position
Keyboard key pressed, etc.
➕ Adding Multiple Listeners:
🧠 Why Are Events Important?
They make websites interactive
Help you respond to user actions
Let you build dynamic web apps (no page reloads needed!)
🎯 Real-World Examples:
Submitting a form to log in without leaving the page
Displaying a message when a file is uploaded
Creating a shopping cart that updates instantly when items are added
🔁 What is a Callback Function?
🧠 Definition:
A callback is a function that is passed as an
argument to another function and is called after
something happens.
☎️
"Call me back when you're done!" — That's what
one function says to another.
✅ Why Use Callbacks?
To run code after a task finishes
To control the order of execution (especially in
async tasks)
To make code reusable and modular
🧩Callbacks in Real Life (with
setTimeout)
🧠 JavaScript doesn’t wait—it keeps running code. But what if we want to delay
something?
We can use setTimeout(), and pass a callback to it!
🧠 What's Happening?
1. setTimeout() starts a timer
2. JS keeps running other code
3. After 3 seconds, it calls your function
🔗Why Callbacks Matter
✅ Real-World Use Cases:
Responding to user actions (click, input)
Handling delayed tasks (setTimeout, API calls)
Writing modular and flexible code
BUILDING OUR APP
🧱 Creating the Basic Elements
🧠 First, we get the HTML elements we need from the page.
We’ll use document.getElementById() to grab inputs, buttons, and the task list.
📝 What These Do:
We store references to user input fields
Helps us read or change what's inside the HTML elements
Prepares for user interaction
💡 These are the building blocks. JavaScript needs to “know” about the HTML elements
before it can work with them
➕ Adding a New Task
🔍 What’s Happening:
We use .addEventListener('click', ...) to run a
function when the button is clicked
We read values from the input fields
If task text is empty, we show an alert
🧠 This is called event-driven programming —
JavaScript responds when the user does
something!
📌Creating Task Items in the List
💡 What’s New Here:
We dynamically create HTML elements (<li>, <input>)
checkbox lets users mark tasks done ✅
classList.toggle('done') helps style completed tasks
✨ Your webpage is generating elements with JavaScript, not just HTML!
🛠️ Add Priority, Edit, and Delete
🔍 Key Skills:
Dynamically style tasks based on priority
deleteBtn.onclick removes a task from the
list
editBtn.onclick allows updating an existing
task
🧠 This is DOM manipulation in action — you
control how your app looks and behaves with
JavaScript.
🌙 Save, Reset & Dark Mode
🧠 Final polish: clear inputs after adding a
task and toggle dark mode!
🎯 Resets the form after adding a task
🌙 Adds or removes a CSS class to switch to dark mode
