JS: Introduction to JavaScript | Amr Tarek

JavaScript (JS) is one of the most popular coding languages in the world. It allows web pages to become interactive. While HTML is used to create the website structure and content, JavaScript is used to control the functionality of web pages.

Without JavaScript, a page would have no interactive elements and would always be static — the same content delivered the same way to every visitor.

What JavaScript Does

JavaScript can:

Dynamically update the page in real time — change content, styles, and structure without reloading
Respond to user events — clicks, keyboard input, mouse movement, form submissions
Display moving animations — CSS transitions triggered by JS, canvas drawings, WebGL
Communicate with servers — fetch data from APIs and update the page without a full reload (AJAX / Fetch API)

User clicks a button
        |
        v
JavaScript event listener fires
        |
        v
JS updates the DOM (Document Object Model)
        |
        v
Browser re-renders the changed section

Adding JavaScript to a Page

JavaScript is added within the HTML page source code in two ways.

Inline Script Tags

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1 id="demo">Hello World</h1>

    <script>
      document.getElementById("demo").innerHTML = "Hello from JavaScript!";
    </script>
  </body>
</html>

External Script File (Recommended)

<!-- Load an external JS file -->
<script src="/location/of/javascript_file.js"></script>

Placing the <script> tag at the end of the <body> ensures the HTML is fully parsed before the script runs, avoiding errors from trying to access elements that do not yet exist.

Interacting with the DOM

JavaScript interacts with HTML through the DOM (Document Object Model) — the browser's in-memory representation of the page.

Finding and Changing Elements

// Find element by ID and change its content
document.getElementById("demo").innerHTML = "Hack the Planet";

// Find elements by CSS class
const items = document.getElementsByClassName("product-item");

// Modern: find element using CSS selector
const heading = document.querySelector("h1");
heading.style.color = "blue";

Changing Styles

const button = document.getElementById("main-btn");
button.style.backgroundColor = "green";
button.style.fontSize = "18px";

Handling Events

Events are actions that happen in the browser — a user clicking a button, hovering over an element, pressing a key, or submitting a form. JavaScript responds to events using event listeners.

Inline Event Handler (HTML attribute)

<button onclick='document.getElementById("demo").innerHTML = "Button Clicked!";'>
  Click Me!
</button>

Event Listener (Recommended)

Separating JavaScript from HTML by attaching event listeners in the script is the preferred approach:

document.getElementById("main-btn").addEventListener("click", function () {
  document.getElementById("demo").innerHTML = "Button Clicked!";
});

Common Events

Event	When It Fires
`click`	User clicks an element
`mouseover`	Mouse enters an element
`keydown`	User presses a keyboard key
`submit`	A form is submitted
`load`	Page finishes loading
`change`	Input field value changes

Variables and Data Types

JavaScript variables hold values of different types:

// Modern variable declarations
let name = "Alice";          // string
const age = 30;              // number (integer)
let price = 9.99;            // number (float)
let isActive = true;         // boolean
let items = ["a", "b", "c"]; // array
let user = { name: "Alice", age: 30 }; // object

// var (older, avoid in modern code)
var oldStyle = "not recommended";

Keyword	Scope	Reassignable	Use Case
`const`	Block	No	Values that do not change
`let`	Block	Yes	Values that may change
`var`	Function	Yes	Avoid — legacy code only

A Simple Interactive Example

Putting it all together — a button that shows and hides a message:

<!DOCTYPE html>
<html>
<body>

  <button id="toggle-btn">Show Message</button>
  <p id="message" style="display: none;">Hello! JavaScript is working.</p>

  <script>
    const button = document.getElementById("toggle-btn");
    const message = document.getElementById("message");

    button.addEventListener("click", function () {
      if (message.style.display === "none") {
        message.style.display = "block";
        button.innerText = "Hide Message";
      } else {
        message.style.display = "none";
        button.innerText = "Show Message";
      }
    });
  </script>

</body>
</html>

Summary

JavaScript is what brings the web to life. It bridges the gap between static HTML/CSS and dynamic, user-driven experiences.

Key things to understand from the start:

JavaScript runs in the browser and interacts with the page through the DOM
Events are how JavaScript knows when the user does something
document.getElementById and querySelector are the primary ways to find elements
Use const and let for variable declarations in modern JavaScript

JavaScript is the language of the web — every interactive feature you have ever used in a browser is powered by it.