JS Syntax

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Syntax

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

Example

// How to create variables:

var x;

let y;

// How to use variables:

x = 5;

y = 6;

let z = x + y;

JavaScript Values

The JavaScript syntax specifies two types of values:

1) Fixed values.

2) Variable values.

Fixed values are called Literals.

Variable values are called Variables.

JavaScript Literals

The two important syntax rules for fixed values are:

1) Numbers are written with or without decimals:

<!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>

Output

JavaScript Numbers

Number can be written with or without decimals.

2) Strings are text, written inside the double or single quotes:

<!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>

Output

JavaScript Strings

Strings can be written with double or single quotes.

JavaScript Variables

In a programming language, variables are stored in data values.

JavaScript uses the keywords var, let, and const to declare variables.

An equal sign assigns values to variables.

In this example, x specifies as a variable. Then, x is assigned (given) the value 6:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Variables</h2>

<p>In this example, x is defined as a variable.

Then, x is assigned the value of 6:</p>

<p id=”demo”></p>

<script>

let x;

x = 6;

document.getElementById(“demo”).innerHTML = x;

</script>

</body>

</html>

Output

JavaScript Variables

In this example, x is defined as a variable. Then, x is assigned the value of 6:

JavaScript Operators

JavaScript uses arithmetic operators ( + – * / ) to compute values:

Example

<!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>

Output

JavaScript Operators

JavaScript uses arithmetic operators to compute values (just like algebra).

JavaScript uses an assignment operator ( = ) to assign values to variables:

Example

<!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>

Output

Assigning JavaScript Values

In JavaScript the = operator is used to assign values to variables.

11

JavaScript Expressions

An expression is a combination of values, variables, and operators, which computes a value.

The computation is called an evaluation.

For example, 5 * 10 evaluates to 50:

Example

<!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>

Output

JavaScript Expressions

Expressions compute to values.

Expressions can also contain variable values:

Example

<!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>

Output

JavaScript Expressions

Expressions compute to values.

15

The values are of various types, such as numbers and strings.

For example, “John” + ” ” + “Doe”, evaluates to “John Doe”:

Example

<!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>

Output

JavaScript Expressions

Expressions compute to values.

John Doe

JavaScript Keywords

JavaScript keywords identify actions to be performed.

The let keyword indicates the browser to create variables:

Example

<!DOCTYPE html>

<html>

<body>

<p>The <b>let</b> Keyword Creates Variables</p>

<p id=”demo”></p>

<script>

let x, y;

x = 5 + 6;

y = x * 10;

document.getElementById(“demo”).innerHTML = y;

</script>

</body>

</html>

Output

The let Keyword Creates Variables

110

The var keyword also tells the browser to create variables:

Example

<!DOCTYPE html>

<html>

<body>

<p>The var Keyword Creates Variables</p>

<p id=”demo”></p>

<script>

var x, y;

x = 5 + 6;

y = x * 10;

document.getElementById(“demo”).innerHTML = y;

</script>

</body>

</html>

Output

The var Keyword Creates Variables

180

JavaScript Comments

All JavaScript statements are not “executed” .

Code after double slashes // or between /* and */ is treated as a comment.

Comments are ignored, and will not be executed:

Example

<!DOCTYPE html>

<html>

<body>

<p>JavaScript Comments are NOT Executed</p>

<p id=”demo”></p>

<script>

let x;

x = 5;

// x = 6; I will not be executed

document.getElementById(“demo”).innerHTML = x;

</script>

</body>

</html>

Output

JavaScript Comments are NOT Executed

JavaScript Identifiers / Names

Identifiers are JavaScript names.

Identifiers are named variables and keywords, and functions.

The rules for legal names are the same in most programming languages.

A JavaScript name should begin with:

1) A letter (A-Z or a-z).

2) A dollar sign ($).

3) Or an underscore (_).

Subsequent characters may be letters, digits, underscores, or dollar signs.

JavaScript is Case Sensitive

All JavaScript identifiers are case-sensitive.

The variables lastName and lastname, are two different variables:

Example

<!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>

Output

JavaScript is Case Sensitive

Try to change lastName to lastname.

Doe

JavaScript and Camel Case

Historically, programmers use different ways of joining multiple words into single variable name:

Hyphens:

first-name, last-name, master-card, inter-city.

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.