Day 4: JavaScript Basics - Syntax, Variables, and Functions

Day 4: JavaScript Basics - Syntax, Variables, and Functions

“Getting Started with JavaScript - The Language of the Web”

Introduction:

Introduce JavaScript as the backbone of interactivity on the web. Highlight its role in enhancing HTML and CSS and making web pages dynamic.

Example:

"JavaScript is the magic behind interactive web pages. From dynamic content updates to interactive features, JavaScript empowers developers to bring life to the web. Today, we’ll dive into the basics of this versatile programming language, covering its syntax, variables, and functions."


Main Content:

  1. JavaScript Basics:

    • Adding JavaScript to HTML:

      • Inline: <button onclick="alert('Hello!')">Click Me</button>

      • Internal:

          <script>  
              console.log('Hello, JavaScript!');  
          </script>
        
      • External (recommended):

          <script src="script.js"></script>
        
  2. JavaScript Syntax:

    • Case sensitivity and semicolons.

    • Writing a simple console.log() statement:

        console.log('Welcome to JavaScript Basics!');
      
  3. Variables:

    • Explain var, let, and const.

        let name = 'John';  
        const age = 25;  
        var city = 'New York';  
        console.log(name, age, city);
      
    • Discuss variable naming conventions and scope.

  4. Data Types:

    • Primitive types: string, number, boolean, undefined, null.

    • Example:

        let isLearning = true;  
        let message = 'JavaScript is fun!';  
        let score = 100;  
        console.log(typeof isLearning, typeof message, typeof score);
      
  5. Functions:

    • Declaring and calling functions:

        function greet(name) {  
            return `Hello, ${name}!`;  
        }  
        console.log(greet('Alice'));
      
    • Arrow functions:

        const add = (a, b) => a + b;  
        console.log(add(5, 10));
      

Practical Task for Readers:

  • Create a JavaScript file (script.js) and link it to an HTML file.

  • Write code to:

    1. Declare variables for name, age, and a favorite hobby.

    2. Create a function that returns a personalized greeting using these variables.

    3. Log the output in the browser console.


Conclusion:

  • Recap key points about JavaScript syntax, variables, and functions.

  • Encourage readers to experiment with writing small scripts.

  • Tease Day 5: "Tomorrow, we’ll explore the DOM and learn how to interact with web pages dynamically."