What is JavaScript? Your first program

When you tap “Like” on a social network, the heart turns red instantly and the page does not reload. You drag a map with your finger, and a search box suggests words while you are still typing. Behind all of this there is usually the same language — JavaScript.

What is JavaScript?

JavaScript is a programming language that makes web pages alive and interactive. HTML defines a page's content and CSS defines its look. JavaScript controls the page's behaviour: what happens when you click a button, whether the data in a form is valid, how new posts are loaded.

At first JavaScript ran only in browsers. Today it is almost everywhere:

• Websites: menus, forms, maps, online games.
• Servers: thanks to Node.js, JavaScript also runs without a browser, on computers and servers.
• Apps: for example, the popular code editor Visual Studio Code is built with web technologies.

Your first program: console.log

By tradition, programmers learning a new language first print “Hello, world!”. In JavaScript you use the console.log() command for this: it prints whatever is inside the parentheses to the console. Run the code below and look at the result.

console.log('Hello, world!');
console.log('I am learning JavaScript');
console.log(2 + 3);

Hello, world!
I am learning JavaScript
5

Each line is a separate statement, and the computer executes them one by one from top to bottom. Text in quotes — a string — is printed exactly as written, while 2 + 3 without quotes is calculated first. The semicolon ; at the end marks where a statement finishes.

console.log can also print several values at once: separate them with commas and they appear on one line with spaces between them. Notice the difference between '2 + 3' in quotes and 2 + 3 without quotes.

console.log('2 + 3');
console.log(2 + 3);
console.log('Score:', 95, 'points');
console.log('Baku', 'Ganja', 'Sumqayit');

2 + 3
5
Score: 95 points
Baku Ganja Sumqayit

Comments and typical mistakes

A comment is a note for people that the computer ignores. Everything from // to the end of the line is a comment. A comment over several lines starts with /* and ends with */. Comments help you remember later what the code does and explain it to others.

// This line is a comment: it is not executed
console.log('Comments are for people');

/* A comment
   over several lines */
console.log('Done'); // a comment can also stand here

Comments are for people
Done

Where can you run code?

• In these lessons: press the run button next to an example — the code runs right in your browser.
• In the browser console: open the developer tools and switch to the Console tab.
• In an HTML page: put the code inside a <script> tag.
• On your computer: install Node.js and run a file with the command node app.js.

In a browser, JavaScript can also change the page itself. In the example below the HTML says “Hello!” in the heading, but the script changes it as soon as the page opens. Don't worry if you don't understand every line yet — you will learn this in detail in the DOM lesson.

<h1 id="title">Hello!</h1>
<p>This paragraph comes from HTML.</p>
<script>
  document.getElementById('title').textContent = 'Hello from JavaScript!';
</script>

// 1) print the text Hello, Educora!
// 2) print the result of 365 * 24

Hello, Educora!
8760