JavaScript Examples

JavaScript is a versatile and powerful programming language primarily used in web development. It allows developers to create dynamic and interactive web pages by manipulating the HTML and CSS. JavaScript is an essential technology for front-end development and is also used in back-end development with environments like Node.js.

Key Features of JavaScript

  1. Client-side Scripting: JavaScript runs in the browser, providing interactive features without the need to reload the page.
  2. Dynamic Typing: Variables in JavaScript can hold different data types at different times.
  3. Event-driven Programming: JavaScript allows developers to create responses to user actions like clicks, form submissions, and mouse movements.
  4. Prototype-based Inheritance: JavaScript uses prototypes for inheritance, making it different from class-based languages.
  5. Asynchronous Programming: JavaScript supports asynchronous operations using callbacks, promises, and async/await.

Basic Syntax and Examples

Variables

In JavaScript, you can declare variables using var, let, and const.

// Using var
var name = "John Doe";
console.log(name);

// Using let
let age = 25;
console.log(age);

// Using const
const pi = 3.14159;
console.log(pi);

Data Types

JavaScript supports various data types including strings, numbers, booleans, objects, and arrays.

// String
let greeting = "Hello, World!";
console.log(greeting);

// Number
let number = 42;
console.log(number);

// Boolean
let isJavaScriptFun = true;
console.log(isJavaScriptFun);

// Object
let person = {
    firstName: "Jane",
    lastName: "Doe",
    age: 30
};
console.log(person);

// Array
let colors = ["red", "green", "blue"];
console.log(colors);

Functions

Functions are reusable blocks of code that perform a specific task.

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

console.log(greet("Alice"));

// Function expression
const square = function(number) {
    return number * number;
};

console.log(square(5));

// Arrow function (ES6)
const add = (a, b) => {
    return a + b;
};

console.log(add(3, 4));

Conditionals

JavaScript uses if, else if, and else statements to perform different actions based on conditions.

let score = 85;

if (score >= 90) {
    console.log("A");
} else if (score >= 80) {
    console.log("B");
} else if (score >= 70) {
    console.log("C");
} else {
    console.log("F");
}

Loops

Loops are used to repeat a block of code multiple times.

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

// While loop
let i = 0;
while (i < 5) {
    console.log("Iteration " + i);
    i++;
}

// For...of loop (ES6)
let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
    console.log(fruit);
}

Events

JavaScript can respond to user interactions through events.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Events</title>
</head>
<body>
    <button id="myButton">Click me!</button>

    <script>
        // Event handling
        document.getElementById("myButton").addEventListener("click", function() {
            alert("Button was clicked!");
        });
    </script>
</body>
</html>

Conclusion

JavaScript is a fundamental language for web development, providing the ability to create dynamic and interactive experiences. Its versatility extends beyond the browser with the advent of server-side environments like Node.js, making it an essential skill for modern developers. By understanding the basics of variables, data types, functions, conditionals, loops, and events, you can start building powerful web applications.