No history yet

Introduction to JavaScript

The Language of the Web

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 brings websites to life, making them interactive and dynamic. Without JavaScript, the web would be a static collection of documents. With it, we get applications, animations, and real-time updates.

JavaScript runs directly in your web browser. This means you don't need any special software to get started. It works hand-in-hand with HTML and CSS to create the rich experiences you use every day, from social media feeds that update automatically to interactive maps that respond to your clicks.

Lesson image

Setting Up Your Workspace

The simplest way to run JavaScript is right inside your browser's developer tools. Every modern browser like Chrome, Firefox, or Safari has a 'console' that lets you execute code instantly.

To open the console: Right-click anywhere on a webpage, select 'Inspect' or 'Inspect Element', and then click on the 'Console' tab.

Once the console is open, you can type code and press Enter to run it. Let's try the traditional first program, "Hello, World!".

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

The command console.log() is a way to print messages. It's incredibly useful for checking your work and seeing what your code is doing behind the scenes. For writing longer scripts, you'll use a text editor (like Visual Studio Code, Sublime Text, or Atom) to write your code in files ending with .js.

Connecting JavaScript and HTML

To make a webpage interactive, you need to connect your JavaScript file to your HTML file. This is done using the <script> tag in HTML.

Let's create a simple project. We'll have two files: index.html and script.js. First, here's the HTML. It contains a heading and a button.

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

  <h1 id="greeting">Hello!</h1>
  <button id="changeButton">Click Me</button>

  <script src="script.js"></script>
</body>
</html>

Notice the <script src="script.js"></script> tag right before the closing </body> tag. Placing it here is a common practice. It ensures that the browser loads all the HTML elements on the page before it tries to run any JavaScript that might manipulate them.

Now, let's write the JavaScript code in a file named script.js. This script will find the button and the heading by their id attributes. Then, it will wait for a user to click the button. When the button is clicked, it will change the heading's text.

// Get the elements from the HTML page
const greeting = document.getElementById('greeting');
const changeButton = document.getElementById('changeButton');

// Wait for the button to be clicked
changeButton.addEventListener('click', () => {
  // Change the text of the heading
  greeting.textContent = 'Welcome to JavaScript!';
});

When you open index.html in your browser, you'll see the heading "Hello!" and a button. Click the button, and the text will change. You've just used JavaScript to manipulate the content of a webpage.

Time to check your understanding of these core concepts.

Quiz Questions 1/5

In the common analogy for web technologies, if HTML is the skeleton and CSS is the clothing, what is JavaScript?

Quiz Questions 2/5

What is the primary purpose of the console.log() command?