Introduction

JavaScript is one of the most popular programming languages used to make websites interactive. If you've ever clicked a button on a webpage, filled out a form, or played a game online, you've probably interacted with JavaScript!

What is JavaScript?

  • JavaScript (often abbreviated as JS) is a programming language that runs in web browsers.
  • It adds functionality and interactivity to websites. For example:
    • Animating a slideshow
    • Showing or hiding content
    • Validating form inputs
  • JavaScript is often used with HTML (the structure of a webpage) and CSS (the design/styling).

What Can JavaScript Do?

JavaScript can:

  1. Update Content: Change the text, images, or styles on a page without refreshing it.
  2. Respond to Users: React when someone clicks, hovers, or types.
  3. Control the Browser: Open new tabs, get the browser's location, or save data in storage.
  4. Work with Servers: Fetch or send data to/from a server (e.g., for a login form).

How Does JavaScript Work?

  • JavaScript runs directly in the browser (e.g., Chrome, Firefox, Edge).
  • All modern browsers come with a JavaScript engine that processes the code.
  • You write JavaScript in the browser's Developer Tools (or in a .js file), and the browser executes it.

How to Add JavaScript to a Web Page

You can include JavaScript in an HTML file in three ways:

1. Inline JavaScript

Write JavaScript directly inside an HTML tag.

Python
Copy
<button onclick="alert('Hello!')">Click Me</button>

When the button is clicked, it shows a popup saying "Hello!"

2. Internal JavaScript

Write JavaScript inside a <script> tag in the HTML file.

HTML
Copy
<!DOCTYPE html>
<html>
<head>
    <title>My First JavaScript</title>
</head>
<body>
    <h1>Welcome!</h1>
    <script>
        alert("Welcome to JavaScript!");
    </script>
</body>
</html>

The alert appears when the page loads.

3. External JavaScript

Save JavaScript in a separate .js file and link it to your HTML file.

HTML
Copy
<!-- HTML File -->
<script src="script.js"></script>

Javascript
Copy
// script.js
console.log("This is an external JavaScript file!");

This is the preferred method for larger projects because it keeps the code organized.

Basic Syntax

Here's how JavaScript code looks:

Javascript
Copy
// This is a comment
let name = "Alice"; // Declare a variable
console.log("Hello, " + name); // Print to the console
  • Comments: Use // for single-line comments or /* */ for multi-line comments.
  • Statements: JavaScript code is written as statements, ending with a semicolon (;).
  • Variables: Use let, const, or var to store data.

Hello World Example

Let's write a simple JavaScript program that displays a message on a webpage:

HTML
Copy
<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World Example</h1>
    <script>
        document.write("Hello, World!"); // Displays this text on the webpage
    </script>
</body>
</html>

document.write() outputs content directly to the webpage.

Testing JavaScript

  1. Open your browser (e.g., Chrome).
  2. Right-click on a webpage and select "Inspect".
  3. Go to the Console tab.
  4. Type some JavaScript code like:
Javascript
Copy
console.log("Hello from the console!");

Press Enter, and it will display the message.

Why Learn JavaScript?

  • JavaScript is beginner-friendly and versatile.
  • It powers nearly all modern websites and apps.
  • With JavaScript, you can build:
    • Web apps
    • Mobile apps (e.g., React Native)
    • Backend services (e.g., Node.js)