1

Lesson 1: Introduction to JavaScript

JavaScript is a powerful programming language used to make websites interactive. While HTML structures the content and CSS styles it, JavaScript adds behavior to your website. It's essential for modern web development, allowing you to build dynamic, user-friendly websites.

What is JavaScript?

JavaScript is a high-level, interpreted language primarily used for scripting web pages. It runs in the browser and is used to create dynamic content like interactive forms, animations, and even games. JavaScript is an integral part of web development alongside HTML and CSS.

Why Learn JavaScript?

  • It is essential for web development.
  • JavaScript can be used on both the client-side (browser) and server-side (with Node.js).
  • It has a vast ecosystem with many libraries and frameworks, such as React, Vue, and Angular.
  • It powers modern web applications, enhancing user experience.

Basic Structure of JavaScript

Before diving deeper, let’s quickly review the basic structure of JavaScript. You’ll write JavaScript inside a <script> tag or link it externally using a .js file. 

<script>
        // This is a comment
        console.log("Hello, JavaScript!");
      </script>

Example

Here’s a simple example that prints "Hello, JavaScript!" to the browser’s console:

<!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>JavaScript Example</title>
      </head>
      <body>
      
          <h1>Welcome to JavaScript!</h1>
          <script>
              console.log("Hello, JavaScript!");
          </script>
      
      </body>
      </html>

Key Points to Remember

  • JavaScript is case-sensitive, meaning myVariable and MyVariable are different.
  • Statements in JavaScript are typically ended with a semicolon (;), though it's optional in most cases.
  • You can use the browser’s console to test JavaScript quickly by using console.log() to print messages or values.

Assignment

Your task: Create a simple HTML page that includes a <script> tag. Inside the script, print a message of your choice using console.log(). Open the browser’s developer tools and view the message in the console.

Personal Notes

Remember, JavaScript is mainly used to bring interactivity to websites. As you move forward, keep practicing writing small scripts, and check your browser’s console for errors and outputs. This will be key in debugging your code in future lessons.