11.2 Basic Syntax of JavaScript

Basic Syntax of JavaScript (15 mins)

  1. Embedding JavaScript in HTML:

    • JavaScript code can be placed directly into an HTML file using the <script> tag.

    • The <script> tag can be included in two places:

      • In the head section:

        <head>
  <script>
    // JavaScript code here
  </script>
</head>

        This can be used for code that should load before the body of the page is rendered.

      • In the body section:

        <body>
  <!-- Page content -->
  <script>
    // JavaScript code here
  </script>
</body>

        Placing the script just before the </body> tag ensures that the entire page loads before the JavaScript is executed, preventing potential issues with elements not yet being available.

    • Alternatively, you can also link to an external JavaScript file:

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

      This keeps your HTML and JavaScript code separate for easier maintenance and readability.

  2. Basic Structure of JavaScript:

    • Comments:

      • Used to add explanations or notes in the code. They do not affect the code’s functionality.

      • Single-line comment: Use //

        // This is a single-line comment
console.log("Hello World");

      • Multi-line comment: Use /* */

        /*
  This is a multi-line comment
  It can span multiple lines
*/
console.log("Hello World");

    • Case Sensitivity:

      • JavaScript is case-sensitive, meaning myVariable and myvariable are treated as different identifiers.

      • Example:

        let myVariable = "Hello";
let MyVariable = "World";
console.log(myVariable);  // Outputs: Hello
console.log(MyVariable);  // Outputs: World

    • JavaScript Statements:

      • JavaScript statements are the instructions you give to the browser. Each statement is usually terminated with a semicolon (;), although it is optional in most cases.

      • Example of basic statements:

        let x = 10;  // Declare a variable
x += 5;      // Add 5 to x
console.log(x);  // Outputs: 15

    • Whitespace and Line Breaks:

      • JavaScript ignores extra whitespace and line breaks. This allows for better formatting and readability.

        let y = 20;
let z = 30;
console.log(y + z);  // Outputs: 50

    • Execution Flow:

      • JavaScript code is executed line-by-line from top to bottom.

Student Activity (15 mins):

  • Objective: Students will write simple JavaScript code that demonstrates embedding JavaScript into HTML, using comments, and understanding case sensitivity.

  • Task: Create an HTML file with an embedded script that logs different messages to the console.

    Instructions:

    1. Create an HTML file (e.g., index.html) with the following structure:

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Syntax</title>
</head>
<body>
  <h1>Check the Console</h1>
  <div id="showResult"></div>
  <script>
    // Declare a variable
    let message = "Welcome to JavaScript!";
    
    
    function updateResult(content) {
        document.getElementById("showResult").textContent = content;
      }
    // Single-line comment
    console.log(message);  // Outputs: Welcome to JavaScript!
    
    // Multi-line comment
    /*
      This block of code demonstrates basic syntax rules.
      Make sure to use case-sensitive names.
    */
    
    // Case sensitivity example
    let greeting = "Hello";
    let Greeting = "Hi";
    console.log(greeting);  // Outputs: Hello
    console.log(Greeting);  // Outputs: Hi
    
    // Basic math statement
    let x = 5;
    x += 3;
    console.log("The value of x is: " + x);  // Outputs: The value of x is: 8
    updateResult("The value of x is: " + x);
  </script>
</body>
</html>

    2. Instructions for the activity:

      • Open the file in a browser and use the developer tools (usually accessible with F12 or right-click and "Inspect") to view the console output.

      • Try adding your own comments in the code.

      • Change variable names slightly to see how case sensitivity affects the program.

      • Experiment with different statements, like basic math operations or string concatenation.

Follow-up Discussion:

  • Ask students how placing the script in the head versus the body affects the execution of the script.

  • Review the role of comments and why they are important for readability and collaboration.

  • Discuss what errors occur if they mistype variable names and how JavaScript handles case sensitivity.

Expected Outcome:

Students will understand how to embed JavaScript into HTML, write basic JavaScript statements, use comments effectively, and grasp the importance of case sensitivity in JavaScript code.

Previous11.1 Introduction to JavaScriptNext11.3 Variables

Last updated