11.1 Introduction to JavaScript

Introduction to JavaScript(10 mins)

• History of JavaScript:

  • JavaScript was created by Brendan Eich in 1995 during his time at Netscape.

  • Originally called Mocha, it was later renamed to LiveScript before finally becoming JavaScript.

  • Designed as a lightweight scripting language for adding interactivity to web pages.

  • Initially, it was primarily used on the client-side (browser), but with the advent of Node.js, it can now be used on the server-side as well.

• JavaScript's Role in Web Development:

  • JavaScript is one of the core technologies of the web, alongside HTML (structure) and CSS (style).

  • It allows developers to make web pages interactive by manipulating the DOM (Document Object Model), handling events (like user clicks or form submissions), and making asynchronous requests (e.g., with AJAX or fetch API).

  • Examples of JavaScript’s role:

    • Validating user inputs (e.g., checking if an email format is correct).

    • Displaying dynamic content (e.g., live form validation, real-time chat applications).

• How JavaScript Fits into the Web Development Stack:

  • HTML (HyperText Markup Language): Provides the basic structure of a web page (e.g., headers, paragraphs, links).

  • CSS (Cascading Style Sheets): Handles the presentation of the page (e.g., colors, layout, fonts).

  • JavaScript: Brings interactivity to the page.

    • Example: A button defined in HTML (<button>) can be styled with CSS and made interactive (e.g., clickable to show an alert) using JavaScript.

    • The document.getElementById() method is a fundamental way to interact with elements in an HTML document using JavaScript.

    • It allows you to select a specific element based on its unique id attribute

  • DOM element event handling

    • Event Handling Properties (Older Approach): Elements have properties for common events like onclick, onmouseover, onkeydown, etc. You can assign a function directly to these properties.

    • Event Listeners (Modern Approach): The preferred method for attaching event handlers is to use element.addEventListener(eventName, handlerFunction, options). When an event occurs, an Event object is passed to the handler function. This object contains information about the event, such as: target, type, clientX, clientY,keyCode

  • Client-Side vs. Server-Side:

    • Client-Side: JavaScript runs in the user’s browser, manipulating the page without needing to reload.

    • Server-Side: With tools like Node.js, JavaScript can run on a web server to handle backend tasks (e.g., fetching data from databases).

Student Activity (10 mins)

• Objective: Familiarize students with embedding JavaScript in HTML and observe its effects.

• Task: Create a simple HTML page that demonstrates how JavaScript interacts with the HTML elements.

  Instructions:

  1. Create an HTML file (e.g., index.html).

  2. Inside the body, add a button element:

     <button id="myButton">Click Me!</button>

  3. Embed JavaScript within the <script> tags that makes the button display an alert when clicked:

  4. Event Handling Properties (Older Approach):

     // Old Approach
     <script>
       document.getElementById("myButton").onclick = function() {
         alert("Button clicked!");
       };
     </script>

1. Event Listeners (Modern Approach):

// Modern Approach
const button = document.getElementById("myButton");

function handleClick(event) {
  console.log("Button clicked!");
  console.log("Event target:", event.target);
  alert("Button Clicked");
  event.preventDefault(); // If the button is part of a form, prevents default submission.
}

button.addEventListener("click", handleClick);

// To remove the listener later:
// button.removeEventListener("click", handleClick);

1. Open the HTML file in a browser and click the button to see how JavaScript works in action.

2. You can add another button event alongside the existing button event.

// Some code

function showConsoleOutput(showOutput) {
        document.getElementById("showConsoleOutput").innerHTML =
          "You Clicked 'Click Me!' button";
      }


button.addEventListener("click", showConsoleOutput);

1. Open the HTML file in a browser and click the button to see how JavaScript works in action.

• Follow-up Discussion:

  • Ask students to describe how the HTML, CSS, and JavaScript parts of the file work together to create a basic interactive experience.

Expected Outcome:

Students will understand JavaScript’s role in web development, its relationship with HTML and CSS, and have hands-on experience with a basic JavaScript interaction (handling button clicks).