Introduction to JavaScript

1. What is JavaScript? (History, Purpose, Uses)

JavaScript is a high-level programming language primarily used for creating dynamic content and enhancing interactivity in web pages. It's one of the three core web technologies (along with HTML and CSS), enabling the creation of interactive and dynamic websites.

History: JavaScript was created by Brendan Eich at Netscape in 1995. It was initially called Mocha, later renamed to LiveScript, and finally, JavaScript. The language's primary purpose was to add interactivity to websites, a feature that HTML and CSS couldn't handle at the time.

Purpose: JavaScript allows you to manipulate HTML and CSS to create interactive web pages. It can handle everything from updating content, validating forms, controlling multimedia, to handling events (like button clicks or mouse movements).

Uses: JavaScript is used in web development, web apps, mobile apps, server-side applications, game development, browser extensions, etc.

2. JavaScript vs. Other Languages (e.g., HTML, CSS)

HTML is a markup language used to structure the content of web pages, while CSS is a styling language used to style the appearance. JavaScript, however, is a programming language that adds interactivity and logic to a webpage.

3. Setting up a Development Environment

To work with JavaScript, you can use any modern browser with developer tools (such as Chrome, Firefox, Edge). You can also set up a development environment with Node.js for server-side JavaScript. Additionally, you can use text editors like VS Code or Sublime Text to write JavaScript code.

4. Including JavaScript in HTML

There are two main ways to include JavaScript in HTML:

<script>
    console.log("Hello from inline JavaScript!");
</script>
        

Example Output:

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

Example Output:

5. The Console (Using the Browser's Developer Console)

You can access the console via your browser's developer tools. It's used for running JavaScript code and debugging. You can log output using console.log().

6. Basic Syntax: Statements, Semicolons, Comments

In JavaScript, statements are individual instructions. While semicolons are optional, it's a good practice to include them. Comments can be written using // for single-line comments and /* */ for multi-line comments.

let x = 5;  // Single-line comment
console.log(x);  // Output the value
        

Example Output:

7. Variables: Declaring Variables (var, let, const), Variable Scope

Variables in JavaScript can be declared using var, let, or const. let and const are more modern and have block-level scope, while var has function-level scope.

let name = "John";
const birthYear = 1990;
name = "Doe"; // This is allowed, but birthYear = 1991 would cause an error.
console.log(name); // "Doe"
        

Example Output:

8. Data Types

JavaScript has several data types: Numbers, Strings, Booleans, Null, Undefined, Symbols, BigInt, and Objects. Each type is used for different kinds of data.

let num = 42;
let name = "John";
let isActive = true;
let nothing = null;
let und;
let sym = Symbol("id");
let bigIntNum = 1234567890123456789012345678901234567890n;
let person = { name: "John", age: 30 };

console.log(num, name, isActive, nothing, und, sym, bigIntNum, person);
        

Example Output:

9. Operators

JavaScript uses various operators like Arithmetic, Assignment, Comparison, and Logical operators.

let a = 10;
let b = 5;

console.log(a + b); // 15 (addition)
console.log(a - b); // 5 (subtraction)
console.log(a * b); // 50 (multiplication)
console.log(a / b); // 2 (division)
        

Example Output:

10. Type Coercion and Type Conversion

JavaScript automatically converts types when necessary (coercion). However, you can also manually convert between types (conversion).

let x = 5;
let y = "10";
console.log(x + y); // "510" (coercion: number is converted to string)
let z = Number(y);
console.log(z); // 10 (conversion: string to number)
        

Example Output: