JavaScript Commands in a Nutshell: Learn How to Write JavaScript Code

HTML and CSS scripts are simply called code. However, as JavaScript mainly gives commands to the browser rather than creates a display, the code you write is called JavaScript commands or statements.

If you already know how to write HTML and CSS code, you should keep in mind that JavaScript syntax is very different from other front-end development languages. This tutorial will teach you all about writing JavaScript commands, their syntax and essential points to remember.

You should be aware of the usage of JavaScript semicolon. It can be used to separate commands, but it is optional if a line break follows them.

JavaScript Commands: Main Tips

• JavaScript code gives instructions to the web browser.
• JavaScript commands are usually called JavaScript code.
• Each command should end with a semicolon. It helps your code be more readable to you and the browser, too.

Note: most programming languages give commands to the computer. However, JavaScript commands the web browser.

Programs

Usually, programs contain many statements, which give instructions to the browser. In JavaScript programs, every command is executed one by one in order from top to bottom.

The example below displays a simple program. At first, three variables are created, then the program displays the z value.

var x = 6;
var y = 9;
var z = x + y;
document.getElementById("output").innerHTML = z;

Writing Clean Code

As in every language, there are some rules in JavaScript that could be called grammar. Some of them affect the way codes are executed (like JavaScript semicolon). Others offer no real functionality, but they help make the code easier to read. It is especially useful if your code is meant to be read by others.

Let's review these rules and see how they're implemented with code examples.

Semicolons

In JavaScript semicolons are used to separate commands:

x = 6;
y = 9;  
z = x + y;

Technically, you could even write commands in the same line when the JavaScript semicolon separates them. However, you should keep your code tidy and practice writing different JavaScript commands in separate lines.

x = 6; y = 9; z = x + y;

White Spaces

White spaces make no difference to the browser. It will ignore them when executing code. However, white spaces help make the code more readable to you and other programmers:

var firstName = "John";
var lastName="Thompson";

It is good programming practice to surround operators (mathematical symbols, such as +, -, =, etc.) with white spaces so they're more noticeable:

var x = y + z;

Line Length and Breaks

Among developers, it is accepted not to use lines exceeding 80 characters for better readability. Long lines of code are difficult to read as you have to scroll sideways. Therefore, you should avoid writing long lines: it's much better to divide the code, and place part of it on a new line:

var text = "More text";
document.getElementById("test").innerHTML = "Hello there!" 
  + text;

Code Blocks

JavaScript commands can be grouped by using curly braces ({}). When grouped, they form code blocks. These are executed together like a single JavaScript command. A function is also a common occurrence of a code block is a function:

function myFunction() {      
  document.getElementById("test1").innerHTML = "Hello stranger!";
  document.getElementById("test2").innerHTML = "Ready to learn?";  
}

Using Keywords

Usually, JavaScript commands start with a specific keyword which defines what the browser should do. These keywords define an action which will be performed.
Find a list of JavaScript keywords in the table below:

Note: JavaScript keywords cannot be used as variable names.

JavaScript Commands: Summary

• JavaScript commands have a distinctive syntax.
• You should practice writing readable code.
• JavaScript keywords are essential when writing commands.