Introduction to JavaScript

What is JavaScript?

JavaScript (JS) is the programming language of the web. HTML builds the structure, CSS styles it and JavaScript makes it interactive: menus, forms, animations, games and apps. It also runs on servers through Node.js.

Adding JavaScript to a page

<!DOCTYPE html>
<html>
<body>
  <h1 id="title">Hello</h1>
  <button onclick="greet()">Click me</button>

  <script>
    function greet() {
      document.getElementById("title").textContent = "Welcome to JavaScript!";
    }
  </script>
</body>
</html>

You can also link an external file, which is the best practice for real projects:

<script src="app.js" defer></script>

defer makes the script run after the page has loaded.

The browser console

Press F12 in your browser, open the Console tab and try:

console.log("Hello, world!");

console.log() prints values. You will use it constantly for debugging.

Statements and comments

// A single-line comment
/* A multi-line
   comment */
console.log("Each instruction is a statement");

Practice

Create a page with a button that changes the heading text and logs a message to the console.