JavaScript Syntax

❮ Previous Next ❯

JavaScript syntax is the set of rules, how JavaScript programs are constructed:

// How to create variables:
var x;
let y;

// How to use variables:
x = 5;
y = 6;
let z = x + y;

JavaScript Values

The way JavaScript is written talks about two different kinds of things.:

Fixed values
Variable values

Numbers that don't change are known as literals.

Variable values are referred to as Variables.

JavaScript Literals

The top two essential rules for fixed values are:

1. Numbers can be written with or without decimal points.

2. Strings are words or sentences enclosed in either double or single quotation marks:

JavaScript Variables

In a programming code, variables are like containers used to hold data..

JavaScript uses special words like var, let and const to create and name variables.

A "equal sign" is used to give values to variables.

In this example, we have a variable called "x." We're saying that "x" is given the value of 6.

JavaScript Operators

JavaScript uses math symbols like plus (+), minus (-), multiply (*), and divide (/) to calculate values.

In HTML, JavaScript uses something called an assignment operator, which is represented by the equal sign (=). Its job is to put values into variables.

JavaScript Expressions

An expression is when you put numbers, letters, and symbols together to get a result.

The calculation is referred to as an assessment.

For instance, when you multiply 5 by 10, you get the result of 50:

Expressions can also contain variable values:

The values can come in different forms, like numbers and words.

For example, "John" + " " + "Doe", evaluates to "John Doe":

JavaScript Keywords

JavaScript keywords are words that tell the computer what to do.

The let keyword in HTML instructs the web browser to make variables.

The word var tells the web browser to make some containers for storing things:

In these examples, using var or let will produce the same result.

You will learn more about var and let later in this tutorial.

JavaScript Comments

Not all JavaScript commands are executed.

Computer code uses special symbols to create comments. Comments are messages within the code that are not meant to be executed. In code, if you write between two forward slashes // or between / and /, it's treated as a comment and the computer ignores it when running the program.

Comments are not considered and won't be carried out:

You will learn more about comments in a later chapter.

JavaScript Identifiers / Names

Identifiers in JavaScript are simply names.

Identifiers are like names for variables, keywords, and functions.

The naming guidelines for legal names are consistent across many programming languages.

A JavaScript name must begin with:

A letter (A-Z or a-z)
A dollar sign ($)
Or an underscore (_)

Following characters can be letters, numbers, underscores, or dollar signs.

Note

Numbers are not allowed as the first character in names.

In this way, JavaScript can easily tell apart names from numbers.

JavaScript is Case Sensitive

All JavaScript names are sensitive to letter case.

The words 'lastName' and 'lastname' represent distinct variables.

JavaScript doesn't treat LET or Let as the special let keyword.

JavaScript and Camel Case

In the past, programmers have employed various methods to combine multiple words into a single variable name in their code.

Hyphens:

First name, last name, MasterCard, intercity.

Hyphens are not allowed in JavaScript. They are reserved for subtractions.

Underscore:

first_name, last_name, master_card, inter_city.

Upper Camel Case (Pascal Case):

FirstName, LastName, MasterCard, InterCity.

Lower Camel Case:

JavaScript programmers tend to use camel case that starts with a lowercase letter:

firstName, lastName, masterCard, interCity.

JavaScript Character Set

JavaScript uses the Unicode character set with the same width and height settings as mentioned in the HTML tags and class attributes.

Unicode includes almost every character, punctuation mark, and symbol from around the world.

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Statements</h2>
    <p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a computer. </p>
    <p id="demo"></p>
    <script>
      let x, y, z; // Statement 1
      x = 5; // Statement 2
      y = 6; // Statement 3
      z = x + y; // Statement 4
      document.getElementById("demo").innerHTML = "The value of z is " + z + ".";
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Numbers</h2>
    <p>Number can be written with or without decimals.</p>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = 10.50;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Strings</h2>
    <p>Strings can be written with double or single quotes.</p>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = 'John Doe';
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Operators</h2>
    <p>JavaScript uses arithmetic operators to compute values (just like algebra).</p>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = (5 + 6) * 10;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>Assigning JavaScript Values</h2>
    <p>In JavaScript the = operator is used to assign values to variables.</p>
    <p id="demo"></p>
    <script>
      let x, y;
      x = 5;
      y = 6;
      document.getElementById("demo").innerHTML = x + y;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Expressions</h2>
    <p>Expressions compute to values.</p>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = 5 * 10;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Expressions</h2>
    <p>Expressions compute to values.</p>
    <p id="demo"></p>
    <script>
      var x;
      x = 5;
      document.getElementById("demo").innerHTML = x * 10;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Expressions</h2>
    <p>Expressions compute to values.</p>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "John" + " " + "Doe";
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>The <b>let</b> Keyword Creates Variables </h2>
    <p id="demo"></p>
    <script>
      let x, y;
      x = 5 + 6;
      y = x * 10;
      document.getElementById("demo").innerHTML = y;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>The var Keyword Creates Variables</h2>
    <p id="demo"></p>
    <script>
      var x, y;
      x = 5 + 6;
      y = x * 10;
      document.getElementById("demo").innerHTML = y;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Comments are NOT Executed</h2>
    <p id="demo"></p>
    <script>
      let x;
      x = 5;
      // x = 6; I will not be executed
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript is Case Sensitive</h2>
    <p>Try to change lastName to lastname.</p>
    <p id="demo"></p>
    <script>
      let lastname, lastName;
      lastName = "Doe";
      lastname = "Peterson";
      document.getElementById("demo").innerHTML = lastName;
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics