4. JavaScript Syntax

What you will learn

• What statements are and how to end them
• Case sensitivity and naming rules
• How to write comments
• The kinds of values JavaScript uses

Statements

A JavaScript program is a list of statements, which are instructions the browser runs one after another, from top to bottom. Each statement normally ends with a semicolon.

<p id="demo"></p>

<script>
  var first = "Sam";
  var second = "Rivera";
  document.getElementById("demo").textContent = first + " " + second;
</script>

Three statements run in order: store a first name, store a last name, then show them together. You will learn about variables properly in the next lessons.

Semicolons

JavaScript can often guess where a statement ends, but relying on that causes rare, confusing bugs. Good practice is to end every statement with a semicolon.

You can put several statements on one line if you separate them with semicolons, but one per line is easier to read.

White space

JavaScript ignores extra spaces and line breaks. Use them to make your code readable. These two lines mean the same thing:

var total = 10+5;
var total   =   10 + 5;

Putting spaces around operators such as = and + is the common style.

Case sensitivity

JavaScript treats upper and lower case letters as different. myName, MyName, and myname are three different names.

<p id="demo"></p>

<script>
  var color = "blue";
  var Color = "red";
  document.getElementById("demo").textContent = color + " and " + Color;
</script>

Built-in names are also case sensitive. getElementById works, but getElementByID does not.

Naming rules (identifiers)

Names for variables and functions are called identifiers. The rules:

• They can contain letters, digits, underscores, and dollar signs.
• They cannot start with a digit.
• They cannot be a reserved word such as var, if, function, or return.
• They cannot contain spaces or hyphens.

The common style is camelCase: the first word is lower case and each next word starts with a capital letter, such as firstName or totalPrice.

Comments

Comments are notes for people. JavaScript ignores them.

<p id="demo"></p>

<script>
  // A single-line comment
  var price = 20;   // a comment after code

  /*
    A multi-line comment.
    Everything between the markers is ignored.
  */
  document.getElementById("demo").textContent = "Price: " + price;

  // document.getElementById("demo").textContent = "This line is switched off";
</script>

Use // for one line and /* ... */ for several. A common trick is to put // in front of a line to switch it off while you test.

Values: literals

A fixed value written directly in code is a literal.

• Numbers: 10, 3.14. No quotes.
• Strings (text): "Hello" or 'Hello'. In quotes.
• Booleans: true or false.

<p id="demo"></p>

<script>
  var a = 10;          // a number
  var b = "10";        // text that looks like a number
  document.getElementById("demo").textContent = (a + a) + " and " + (b + b);
</script>

Numbers add together, but text is joined together. The next lessons explain this in detail.

Keywords you will meet soon

Common mistakes

• Mixing up capital letters, such as Var or getElementByID.
• Forgetting the closing quote or bracket.
• Using a hyphen in a variable name.
• Using curly “smart” quotes copied from a word processor instead of plain straight quotes.
• Putting quotes around a number and then wondering why it joins instead of adds.

<p id="demo"></p>

<script>
  var name = "Sam";
  document.getElementById("demo").textContent = "Hello " + name;
</script>

Summary

• A program is a list of statements, each normally ended by a semicolon.
• JavaScript is case sensitive, and names usually use camelCase.
• Comments use // and /* */.
• Numbers, strings, and booleans are the basic literal values.