JavaScript Basics Introduction

Introduction to JavaScript

• JavaScript is a high-level, interpreted programming language essential for web development alongside HTML and CSS.
• It enables the creation of interactive and dynamic web pages.
• Key benefits include:
  • Interactivity: Enables features like forms, animations, and games.
  • Client-Side Validation: Validates user input before server submission, enhancing speed and user experience.
  • Dynamic Content: Allows content modification without refreshing the page, improving responsiveness.
  • Ecosystem: Abundant libraries and frameworks (e.g., React, Angular, Vue) enhance development capabilities.

Setting Up JavaScript

• Embedding in HTML: JavaScript can be directly included in HTML using the <script> tag.
• External Files: JavaScript can exist in separate .js files, which are then linked to the HTML document.
• Example of embedding:

  <script>
      alert("Welcome to JavaScript!");
  </script>
  

• Example of external JavaScript: HTML:

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

  External JS (script.js):

  alert("Welcome to JavaScript!");
  

Basic JavaScript Syntax

• Variables: Used to store and manipulate data.
  • Declared using let, const, or var.
  • Example declarations:

    let message = "Hello, World!";
    const PI = 3.14;
    var age = 25;
    

Variable Declaration Differences

• var:
  • Function-scoped; globally scoped if outside any function.
  • Hoisted to scope top and initialized to undefined.
  • Allows re-declaration without errors.
  • Example:

    function exampleVar() {
        console.log(x); // undefined
        var x = 5;
        console.log(x); // 5
    }
    

• let:
  • Block-scoped; only accessible within the block defined by {}.
  • Hoisted but not initialized; accessing it first results in a ReferenceError.
  • Cannot be re-declared in the same scope.
  • Example:

    function exampleLet() {
        console.log(x); // ReferenceError
        let x = 5;
        console.log(x); // 5
    }
    

• const:
  • Block-scoped and hoisted; must be initialized at declaration.
  • Cannot be re-declared or reassigned, but contents of objects/arrays can change.
  • Example:

    const constantValue = 10; // Must be initialized at declaration
    

Data Types in JavaScript

• Common data types include:
  • Strings, e.g., let name = "Alice";
  • Numbers, e.g., let score = 85;
  • Booleans, e.g., let isPassed = true;
  • Arrays, e.g., let students = ["Alice", "Bob", "Charlie"];
  • Objects, e.g., let person = { name: "Alice", age: 25 };
  • Null, e.g., let unknown = null;
  • Undefined, e.g., let notDefined;

Operators in JavaScript

• Arithmetic Operators: +, -, *, /, %
• Assignment Operators: =, +=, -=, *=, /=
  • Example usage:

    let x = 10; 
    x += 5; // x = 15
    x -= 3; // x = 7
    

• Comparison Operators: ==, !=, ===, !==, >, <, >=, <=

Control Flow and Loops

• If Statements: Used for conditional logic based on comparisons.
• For Loop: Iterates over a block of code a set number of times.

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

• While Loop: Continues to execute a block of code while a specified condition is true.

  let i = 0;
  while (i < 5) {
      console.log(i);
      i++;
  }