JavaScript (JS)

JavaScript is a programming language that allows you to add interactivity to your website. In this context, it is a client-side language, which means it runs on the user’s browser directly, without the need for a server.

JavaScript is a very powerful language that can be used to create all sorts of interactive effects on a webpage, which can get quite complex. The simplest way to learn JavaScript is to start with the basics and build your way up.

We will start by giving you a simple JavaScript playground to work with, below, and then we will introduce you to the basic syntax and concepts of the language in the following lessons.

Remember, most coding languages “make sense” once you see the relationship between the syntax and the actual code you are writing. Think critically about the things you see below, and try to understand how they work.

JavaScript Playground

Editor

Console

Including JavaScript in your HTML

Just like with CSS, you can include JavaScript in your HTML either directly in the <script> tag, or by linking to an external JavaScript file. The latter is recommended in most cases, as it makes your code more organized and easier to maintain.


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <script>
    // Your JavaScript goes here!
    console.log("Hello, World!")
  </script>
</body>
</html>

Save and open this file up in a web browser and then open up the browser’s console by right-clicking on the blank webpage and selecting “Inspect” or “Inspect Element”. In the developer tools, find and select the “Console” tab, where you should see the output of our console.log statement.

console.log() is the command to print something to the developer console in your browser. You can use this to print the results from any of the following articles and exercises to the console. We encourage you to code along with all of the examples in this and future lessons.

Another way to include JavaScript in a webpage is through an external script. This is very similar to linking external CSS docs to your website.


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

JavaScript files have the extension .js similar to .css for stylesheets.