Learn JavaScript step by step and build interactive, dynamic webpages.

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>

JavaScript provides three keywords for declaring variables:

Example

let name = "Ram";
let age = 25;

const website = "My Website";

console.log(name);
console.log(age);

Examples

let name = "Ram";       // String
let age = 25;            // Number
let isActive = true;     // Boolean
let data = null;         // Null
let value;               // Undefined

Arithmetic Operators

let a = 10;
let b = 5;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

Comparison Operators

let age = 20;

console.log(age >= 18);

Learn: ==, ===, !=, !==, >, <, >=, <=

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");
}

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

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;
};

let courses = [
    "HTML",
    "CSS",
    "Bootstrap",
    "JavaScript"
];

console.log(courses[0]);

Important Methods

courses.forEach(function(course) {
    console.log(course);
});

let student = {
    name: "Ram",
    age: 25,
    course: "Computer Science"
};

console.log(student.name);

student.age = 26;

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);

HTML

<h1 id="heading">
    Welcome
</h1>

JavaScript

let heading =
    document.getElementById("heading");

heading.innerHTML =
    "Welcome to JavaScript";

Learn

• document.getElementById()
• document.querySelector()
• document.querySelectorAll()

HTML

<p id="message">
    Old Message
</p>

<button onclick="changeMessage()">
    Change Message
</button>

JavaScript

function changeMessage() {
    document.getElementById("message").innerHTML =
        "New Message";
}

Old Message

Common events include:

Example

let button =
    document.querySelector("#myButton");

button.addEventListener("click", function() {
    alert("Button clicked!");
});

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");

let paragraph =
    document.createElement("p");

paragraph.innerHTML = "New Paragraph";

document.body.appendChild(paragraph);

paragraph.remove();

Learn

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

let name =
    document.getElementById("name").value;

if (name === "") {
    alert("Name is required.");
}

Practice Validating

let globalVariable = "Hello";

function test() {

    let localVariable =
        "Inside Function";

    console.log(localVariable);
}

Learn

• Global scope
• Function scope
• Block scope

try {

    let result = someFunction();

} catch (error) {

    console.log(error);

}

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];

const student = {
    name: "Ram",
    age: 25
};

Object → JSON

JSON.stringify(student);

JSON → Object

JSON.parse(jsonData);

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);
    }
}

localStorage.setItem(
    "username",
    "Ram"
);

let user =
    localStorage.getItem("username");

localStorage.removeItem("username");

Useful For

• Theme preference
• Simple settings
• Temporary application data