JavaScript Intro

Date :	13 Feb 2025
Author :	DeepSeek
Tags :	javascript web development beginner

JavaScript is the programming language of the web. It allows you to add interactivity, dynamic content, and complex functionality to websites. Whether you’re building a simple form validation or a full-fledged web application, JavaScript is an essential tool in your web development toolkit. In this blog, we’ll cover the basics of JavaScript, its syntax, and how it works in the browser.

What is JavaScript?

JavaScript (often abbreviated as JS) is a lightweight, interpreted programming language that runs in web browsers. It was created in 1995 by Brendan Eich and has since become one of the most popular programming languages in the world. Unlike HTML (which structures content) and CSS (which styles content), JavaScript makes web pages interactive and dynamic.

JavaScript Basics

Writing JavaScript

JavaScript code can be written directly in an HTML file using the <script> tag or in an external .js file.

Inline JavaScript

<script>
    console.log("Hello, World!");
</script>

External JavaScript

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

Variables

Variables are used to store data. In JavaScript, you can declare variables using let, const, or var.

let name = "DeepSeek"; // `let` allows reassignment
const age = 25;        // `const` is for constants (cannot be reassigned)
var isDeveloper = true; // `var` is older and less commonly used now

Data Types

JavaScript supports several data types:

Strings: Text data (e.g., "Hello").
Numbers: Numeric data (e.g., 42, 3.14).
Booleans: True or false values (e.g., true, false).
Objects: Collections of key-value pairs (e.g., { name: "DeepSeek", age: 25 }).
Arrays: Ordered lists of values (e.g., [1, 2, 3]).
Undefined: A variable that has not been assigned a value.
Null: Represents an intentional absence of value.

let greeting = "Hello, World!"; // String
let score = 100;                // Number
let isActive = true;            // Boolean
let user = { name: "DeepSeek", age: 25 }; // Object
let numbers = [1, 2, 3];        // Array

Functions

Functions are reusable blocks of code that perform a specific task. They are defined using the function keyword.

function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("DeepSeek")); // Output: Hello, DeepSeek!

Conditional Statements

Conditional statements allow you to execute code based on certain conditions.

let age = 18;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

Loops

Loops allow you to repeat a block of code multiple times.

for (let i = 0; i < 5; i++) {
    console.log("Iteration: " + i);
}

JavaScript Syntax

Case Sensitivity

JavaScript is case-sensitive. For example, myVariable and myvariable are considered different.

Semicolons

Semicolons (;) are used to separate statements. While they are optional in many cases, it’s good practice to use them.

Comments

Comments are used to explain code and are ignored by the browser.

// This is a single-line comment

/*
This is a
multi-line comment
*/

How JavaScript Works in the Browser

The JavaScript Engine

When you load a web page, the browser’s JavaScript engine (e.g., V8 in Chrome, SpiderMonkey in Firefox) executes the JavaScript code. The engine:

Parses the code.
Compiles it into machine code.
Executes the machine code.

The Document Object Model (DOM)

The DOM is a programming interface for HTML and XML documents. It represents the structure of a web page as a tree of objects, which JavaScript can manipulate.

// Change the text of an HTML element
document.getElementById("demo").innerText = "Hello, JavaScript!";

Event Handling

JavaScript can respond to user actions (e.g., clicks, keypresses) using event listeners.

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

Asynchronous JavaScript

JavaScript can perform tasks asynchronously using features like setTimeout, Promises, and async/await.

// Example of setTimeout
setTimeout(function() {
    console.log("This runs after 2 seconds.");
}, 2000);

Putting It All Together

Here’s a simple example that combines variables, functions, and DOM manipulation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Example</title>
</head>
<body>
    <h1 id="greeting">Hello, World!</h1>
    <button id="changeText">Change Text</button>

    <script>
        function changeText() {
            document.getElementById("greeting").innerText = "Hello, JavaScript!";
        }

        document.getElementById("changeText").addEventListener("click", changeText);
    </script>
</body>
</html>

Conclusion

JavaScript is a powerful and versatile language that brings interactivity and dynamism to the web. By understanding its basics, syntax, and how it works in the browser, you can start building your own interactive web applications. Whether you’re a beginner or an experienced developer, JavaScript is a skill worth mastering.