Learn JavaScript step by step and build interactive, dynamic webpages.
Written by Admin Updated 35 min read
Introduction to JavaScript
Understand JavaScript and how it works with HTML and CSS.
What You Will Learn
- What is JavaScript?
- JavaScript vs HTML vs CSS
- Where JavaScript is used
- Client-side JavaScript
- How to add JavaScript to HTML
JavaScript Example
<script>
alert("Welcome to JavaScript!");
</script>External JavaScript File
<script src="script.js"></script>Variables
Variables are used to store data.
JavaScript provides three keywords for declaring variables:
Example
let name = "Ram";
let age = 25;
const website = "My Website";
console.log(name);
console.log(age);let and const.
Understand var mainly for older JavaScript code.
Data Types
Learn how JavaScript stores different types of values.
Examples
let name = "Ram"; // String
let age = 25; // Number
let isActive = true; // Boolean
let data = null; // Null
let value; // UndefinedPrimitive
String, Number, Boolean, Null, Undefined
Object
Stores related key-value data.
Array
Stores multiple values.
Operators
Perform calculations, comparisons and logical operations.
Arithmetic Operators
let a = 10;
let b = 5;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);| Operator | Meaning |
|---|---|
+ |
Addition |
- |
Subtraction |
* |
Multiplication |
/ |
Division |
% |
Modulus |
** |
Power |
Comparison Operators
let age = 20;
console.log(age >= 18);
Learn:
==,
===,
!=,
!==,
>,
<,
>=,
<=
== and ===.
Conditional Statements
Execute different code based on conditions.
if
let age = 20;
if (age >= 18) {
console.log("Eligible");
}if...else
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}else if
let marks = 75;
if (marks >= 90) {
console.log("Grade A");
} else if (marks >= 60) {
console.log("Grade B");
} else {
console.log("Grade C");
}Loops
Loops repeat code multiple times.
for Loop
for (let i = 1; i <= 5; i++) {
console.log(i);
}while Loop
let i = 1;
while (i <= 5) {
console.log(i);
i++;
}Also Learn
for...of for...in break continueFunctions
Functions allow you to reuse code.
Basic Function
function greet() {
console.log("Welcome!");
}
greet();Function with Parameters
function greet(name) {
console.log("Hello " + name);
}
greet("Ram");Return Value
function add(a, b) {
return a + b;
}
let result = add(10, 20);
console.log(result);Arrow Function
const add = (a, b) => {
return a + b;
};Arrays
Store multiple values inside one variable.
let courses = [
"HTML",
"CSS",
"Bootstrap",
"JavaScript"
];
console.log(courses[0]);Important Methods
push() pop() length map() filter() find() forEach() includes()courses.forEach(function(course) {
console.log(course);
});Objects
Store related information using key-value pairs.
let student = {
name: "Ram",
age: 25,
course: "Computer Science"
};
console.log(student.name);
student.age = 26;Strings
Work with text and string methods.
let message = "Learn JavaScript";
console.log(message.length);
console.log(message.toUpperCase());
console.log(message.toLowerCase());
console.log(message.includes("Java"));
console.log(
message.replace("JavaScript", "CSS")
);Template Literals
let name = "Ram";
let message = `Welcome ${name}`;
console.log(message);DOM – Document Object Model
Learn how JavaScript interacts with HTML.
HTML
<h1 id="heading">
Welcome
</h1>JavaScript
let heading =
document.getElementById("heading");
heading.innerHTML =
"Welcome to JavaScript";Learn
-
document.getElementById() -
document.querySelector() -
document.querySelectorAll()
Changing HTML Content
Change HTML content dynamically using JavaScript.
HTML
<p id="message">
Old Message
</p>
<button onclick="changeMessage()">
Change Message
</button>JavaScript
function changeMessage() {
document.getElementById("message").innerHTML =
"New Message";
}Old Message
Events
JavaScript responds to user actions.
Common events include:
click change input submit keydown keyup mouseoverExample
let button =
document.querySelector("#myButton");
button.addEventListener("click", function() {
alert("Button clicked!");
});Changing CSS Using JavaScript
Modify styles dynamically.
let text =
document.getElementById("text");
text.style.color = "blue";
text.style.fontSize = "24px";Using Classes
text.classList.add("highlight");
text.classList.remove("highlight");
text.classList.toggle("highlight");
text.classList.contains("highlight");Creating and Removing Elements
Create, add and remove HTML elements dynamically.
let paragraph =
document.createElement("p");
paragraph.innerHTML = "New Paragraph";
document.body.appendChild(paragraph);
paragraph.remove();Learn
createElement() appendChild() append() remove()Forms and Input Handling
Read user input and respond to form actions.
HTML
<input
type="text"
id="name"
placeholder="Enter your name">
<button id="submitButton">
Submit
</button>JavaScript
document
.getElementById("submitButton")
.addEventListener("click", function() {
let name =
document.getElementById("name").value;
alert("Hello " + name);
});Learn
.value- Form submission
preventDefault()- Basic validation
JavaScript Form Validation
Check user input before processing a form.
let name =
document.getElementById("name").value;
if (name === "") {
alert("Name is required.");
}Practice Validating
Scope
Understand where variables can be accessed.
let globalVariable = "Hello";
function test() {
let localVariable =
"Inside Function";
console.log(localVariable);
}Learn
- Global scope
- Function scope
- Block scope
Error Handling
Handle errors safely in JavaScript programs.
try {
let result = someFunction();
} catch (error) {
console.log(error);
}Modern JavaScript — ES6+
Learn modern syntax and features.
let and const
const website = "My Website";Arrow Functions
const square = number => number * number;Template Literals
let name = "Ram";
console.log(`Hello ${name}`);Destructuring
const student = {
name: "Ram",
age: 25
};
const { name, age } = student;Spread Operator
const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4];JSON
Work with JSON data used by APIs and applications.
const student = {
name: "Ram",
age: 25
};Object → JSON
JSON.stringify(student);JSON → Object
JSON.parse(jsonData);Fetch API
Use JavaScript to get data from an API.
Using Promises
fetch("data.json")
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});Async / Await
async function getData() {
try {
const response =
await fetch("data.json");
const data =
await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}Local Storage
Store simple data in the browser.
localStorage.setItem(
"username",
"Ram"
);
let user =
localStorage.getItem("username");
localStorage.removeItem("username");Useful For
- Theme preference
- Simple settings
- Temporary application data
Bootstrap + JavaScript
Combine Bootstrap components with JavaScript.
Modal
Interactive Bootstrap modals.
Dynamic Cards
Create cards using JavaScript.
Forms
Dynamic form validation.
Dynamic Tables
Add and filter table records.
Search / Filter
Filter content dynamically.
Show / Hide
Control page content.
Final JavaScript Practice Projects
1 Digital Counter
Learn:
- Variables
- Events
- DOM
2 To-Do List
Learn:
- Input handling
- Arrays
- DOM manipulation
- Add/remove elements
3 Form Validation
Learn:
- Forms
- Events
- Conditions
- Validation
4 Dynamic Search
| Name | Department |
|---|---|
| Ram | Computer |
| Amit | Mathematics |
| Priya | Science |
Use JavaScript to filter rows dynamically.
5 Image Gallery
Build a dynamic image gallery using JavaScript.
Learn:
- Arrays
- Events
- DOM
- Dynamic content
6 Dynamic Components
- Dark/light mode
- Back-to-top button
- Dynamic navigation
- FAQ show/hide
- Search functionality
Recommended Learning Sequence
Suggested 15-Day Learning Plan
| Day | Topic |
|---|---|
| Day 1 | Introduction + JavaScript Setup |
| Day 2 | Variables + Data Types |
| Day 3 | Operators + Conditions |
| Day 4 | Loops |
| Day 5 | Functions |
| Day 6 | Arrays |
| Day 7 | Objects + Strings |
| Day 8 | DOM Basics |
| Day 9 | Events + DOM Manipulation |
| Day 10 | Forms + Validation |
| Day 11 | Modern JavaScript ES6+ |
| Day 12 | JSON |
| Day 13 | Fetch API + Async/Await |
| Day 14 | Local Storage |
| Day 15 | Build a Complete JavaScript Project |