L4

Introduction to JavaScript

  • JavaScript Functionality

    • Access and manipulate HTML elements and attributes

    • Change HTML content using getElementById() method

  • Examples:

    • Display message:

      <p id="demo">JavaScript can change HTML content.</p>
<button onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

JavaScript Manipulations

  • Hide HTML Elements:

    • Change style.display property to none.

    • Example:

      <button onclick="document.getElementById('demo').style.display ='none'">Click Me!</button>

  • Show HTML Elements:

    • Set style.display to block.

    • Example:

      <button onclick="document.getElementById('demo').style.display ='block'">Click Me!</button>

Including JavaScript in HTML

  • Placement:

    • Between <script> tags within HTML

    • Can be placed in the <head> or <body> sections

  • JavaScript Function:

    • Executed when called, often tied to event handlers (e.g., button clicks)

External JavaScript Files

  • Separation:

    • External scripts improve readability and performance (

    • Example for referencing:

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

Displaying Outputs in JavaScript

  • Methods:

    • innerHTML - change content of an HTML element.

    • document.write() - writes directly to the HTML page, but overwrites if used after page load.

    • window.alert() - displays an alert box.

    • console.log() - logs to the console for debugging.

    • window.print() - outputs to print.

JavaScript Variables

  • Declaration:

    • Using var, let, const

  • Naming Rules:

    • Must begin with a letter, underscore, or dollar sign; case-sensitive; can include letters, digits, underscores, dollar signs.

  • Assignment:

    • Example: let x = 5;

JavaScript Functions

  • Definition:

    • A block of code executed when invoked.

  • Syntax:

    function name(param1, param2) { /* code */ }

Common JavaScript Data Types

  • Types:

    • String, Number, Boolean, Undefined, Object

  • Objects:

    • Collections of properties in the form name:value.

    • Example: const person = {name: "John", age: 25};

DOM Manipulations

  • Accessing Elements:

    • document.getElementById() for single elements

    • document.getElementsByClassName() or document.getElementsByTagName() for multiple elements

  • Changing Content and Style:

    • Use JavaScript to manipulate HTML content and CSS styles

Handling Events

  • Event Types:

    • Mouse, Keyboard, Focus events, etc.

  • Example of an Event:

    document.getElementById("myBtn").onclick = function() { /* code */ };

Error Handling in JavaScript

  • Try-Catch:

    • Use try { /* code */ } catch (error) { /* handle error */}

  • Common Errors:

    • ReferenceError, SyntaxError, TypeError

Regular Expressions

  • Usage:

    • Search and replace patterns in text

  • Example:

    let n = text.search(/pattern/i);

Summary

  • JavaScript provides functionality to manipulate HTML and CSS, manage events, handle errors, and work with data collections like arrays and objects, enhancing user interaction on web pages.