No history yet

Introduction to JavaScript

Bringing Websites to Life

If HTML is the skeleton of a webpage and CSS is its clothing, then JavaScript is the nervous system. It's the programming language that makes websites interactive. Without it, the web would be a static collection of documents. With it, we get dynamic applications that respond to our actions.

JavaScript was created in 1995 at Netscape, originally under the name LiveScript. Its name was changed to JavaScript as a marketing move to ride the popularity of the Java language, but the two are completely unrelated. Today, JavaScript is a core technology of the web, supported by all modern browsers.

How It Works

JavaScript code is run directly in your web browser. When you visit a website, the browser downloads the HTML for content, the CSS for styling, and the JavaScript files for interactivity. The browser's JavaScript engine then executes the code, allowing the page to change in response to your input.

This is called client-side scripting, because the script is executed by the client (your browser), not on the server.

JavaScript code is embedded within an HTML document using the <script> tag. This tag tells the browser that the content inside it is JavaScript and should be executed. You can place <script> tags either in the <head> or <body> section of your HTML.

<!DOCTYPE html>
<html>
<head>
  <title>My First JS Page</title>
</head>
<body>

  <h1>A Web Page</h1>
  <p>This is a paragraph.</p>

  <script>
    // This is a JavaScript comment
    alert('Hello, World!');
  </script>

</body>
</html>

In the example above, the alert('Hello, World!'); command is a simple piece of JavaScript. When the browser loads this page, it will display a pop-up box with the message "Hello, World!". This is a basic but clear demonstration of JavaScript's ability to perform an action.

Basic Building Blocks

JavaScript code is made up of statements. Each statement is an instruction for the browser to follow, and they usually end with a semicolon ;.

let message = "Welcome!";

This is a statement. It declares a variable named message and assigns it the text value "Welcome!".

These statements can be grouped into functions, which are reusable blocks of code that perform a specific task. They allow you to organize your code and run it whenever you need it, for example, when a user clicks a button.

<button onclick="showMessage()">Click Me</button>

<script>
function showMessage() {
  alert('Thanks for clicking!');
}
</script>

Here, clicking the button triggers the showMessage function, which in turn executes the alert() statement inside it. This is the fundamental way JavaScript creates interactive experiences.

Quiz Questions 1/6

What is the primary role of JavaScript on a webpage?

Quiz Questions 2/6

Where is client-side JavaScript code executed?