JavaScript Course

What is JavaScript?

JavaScript is a programming language commonly used to make websites interactive and dynamic.

HTML provides structure, CSS provides design, and JavaScript provides behavior and interaction.

A Simple JavaScript Example

<script>

    alert("Hello World!");

</script>

Using JavaScript in an HTML File

<script src="js/script.js"></script>

The <script> element allows JavaScript code to run in an HTML document.

What Can JavaScript Do?

• Change HTML content.
• Change CSS styles.
• Respond to user actions.
• Validate forms.
• Create interactive web applications.

Variables and Data Types

Variables are used to store information that a JavaScript program can use later.

Creating Variables

let name = "Ahmad";

const age = 25;

let country = "Pakistan";

Modern JavaScript commonly uses let and const for declaring variables.

Strings

let name = "Ahmad";

A string represents text.

Numbers

let age = 25;

let price = 99.99;

Boolean Values

let isStudent = true;

let isCompleted = false;

Simple Example

let name = "Ahmad";
let course = "JavaScript";

console.log(
    name + " is learning " + course
);

Variables are fundamental building blocks of JavaScript programs.

Conditions and Operators

Conditions allow a program to make decisions based on different situations.

Comparison Operators

let age = 20;

console.log(age >= 18);

console.log(age === 20);

If Statement

let age = 20;

if (age >= 18) {

    console.log("You are an adult.");

}

If / Else

let age = 16;

if (age >= 18) {

    console.log("Access granted.");

} else {

    console.log("Access denied.");

}

Else If

let score = 80;

if (score >= 90) {

    console.log("Excellent");

} else if (score >= 70) {

    console.log("Good");

} else {

    console.log("Keep practicing");

}

Common Operators

• + Addition
• - Subtraction
• * Multiplication
• / Division
• === Strict equality
• > Greater than
• < Less than

Functions

Functions are reusable blocks of code designed to perform a specific task.

Basic Function

function greet() {

    console.log("Hello Ahmad!");

}

Calling a Function

greet();

Function Parameters

function greet(name) {

    console.log("Hello " + name);

}

greet("Ahmad");

Returning a Value

function add(a, b) {

    return a + b;

}

let result = add(10, 20);

console.log(result);

Why Use Functions?

• Reuse code.
• Organize programs.
• Reduce repetition.
• Make code easier to maintain.

Arrays and Objects

Arrays and objects allow us to organize and store multiple pieces of information.

Arrays

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

console.log(courses[0]);

Array indexes normally start from 0.

Adding an Item

courses.push("GitHub");

Objects

let student = {

    name: "Ahmad",

    age: 25,

    course: "JavaScript"

};

Accessing Object Data

console.log(
    student.name
);

console.log(
    student.course
);

Practical Example

const user = {

    name: "Ahmad",

    country: "Pakistan",

    skill: "Web Development"

};

console.log(
    user.name
);

DOM and Events

The DOM, or Document Object Model, allows JavaScript to interact with HTML elements.

Selecting an Element

const title =
    document.getElementById("title");

Changing Text

const title =
    document.getElementById("title");

title.textContent =
    "Welcome to Ahmad LMS";

Changing CSS

title.style.color =
    "blue";

Button Click Event

const button =
    document.getElementById("myButton");

button.addEventListener(
    "click",
    function () {

        alert("Button clicked!");

    }
);

Practical Example

JavaScript events are important because they allow websites to respond to user interactions such as clicks, typing and form submissions.

Form Validation and Practical JavaScript

JavaScript can be used to validate information entered into forms before the information is processed.

Basic Form Validation

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

if (name.trim() === "") {

    alert("Please enter your name.");

}

Email Validation Concept

const email =
    document.getElementById("email").value;

if (!email.includes("@")) {

    alert("Enter a valid email.");

}

Combining HTML, CSS and JavaScript

A modern website often uses all three technologies together.

• HTML creates the structure.
• CSS creates the visual design.
• JavaScript adds interaction and functionality.

Practical Example

Final Challenge

Try to create a small web page that contains a heading, paragraph, button and form. Then use JavaScript to make the button interactive.

Congratulations! You have reached the final lesson of the JavaScript course.