JavaScript Syntax

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

JavaScript Programs

JavaScript Output

<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html> 
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

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

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

JavaScript Statements

JavaScript statements are composed of:

JavaScript Values

JavaScript Literals

The most important rules for writing fixed values are:

JavaScript Variables

<html>
<body>

<h1>JavaScript Variables</h1>

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

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

<script>
var x;
x = 6;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript Operators

JavaScript uses an assignment operator ( = ) to assign values to variables:
var x = 5; var y = 6;
JavaScript uses arithmetic operators ( + - * / ) to compute values:
(5 + 6) * 10

JavaScript Expressions

An expression is a combination of values, variables, and operators, which computes to a value.
5 * 10 or x * 10
<html>
<body>

<h1>JavaScript Statements</h1>

<p>Statements are separated by semicolons.</p>

<p>The variables x, y, and z are assigned the values 5, 6, and 11:</p>

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

<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

JavaScript Comments

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

JavaScript Variables

JavaScript variables are containers for storing data values. In this example, x, y, and z, are variables:
var x = 5;
var y = 6;
var z = x + y;

JavaScript Identifiers

All JavaScript variables must be identified with unique names. These unique names are called identifiers. Identifiers can be short names (like x and y), or more descriptive names (age, sum, totalVolume). The general rules for constructing names for variables (unique identifiers) are:

JavaScript Data Types

JavaScript variables can hold numbers like 100, and text values like "John Doe".
Strings are written inside double or single quotes. Numbers are written without quotes.
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';

Declaring (Creating) JavaScript Variables

Creating a variable in JavaScript is called "declaring" a variable.
You declare a JavaScript variable with the var keyword:
var carName;
To assign a value to the variable, use the equal sign:
carName = "Volvo";
You can also assign a value to the variable when you declare it:
var carName = "Volvo";
<p id="demo"></p>

<script>
var carName = "Volvo"<br>
document.getElementById("demo").innerHTML = carName;<br>
</script>

One Statement, Many Variables

You can declare many variables in one statement. Start the statement with var and separate the variables by comma:
var person = "John Doe", carName = "Volvo", price = 200;

JavaScript Data Types

JavaScript variables can hold many data types: numbers, strings, arrays

JavaScript Arrays

JavaScript arrays are used to store multiple values in a single variable.

<html>
<body>

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

<script>
var cars = ["Saab", "Volvo", "BMW"];
var x = cars.length;         // The length property returns the number of elements in cars
var y = cars.sort();         // The sort() method sort cars in alphabetical order
document.getElementById("demo").innerHTML = cars[2]+x;

</script>

</body>
</html>
<html>
<body>

<p>The best way to loop through an array is using a standard for loop:</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
    var index;
    var text = "<ul>";
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    for (index = 0; index < fruits.length; index++) {
        text += "<li>" + fruits[index] + "</li>";
    }
    text += "</ul>";
    document.getElementById("demo").innerHTML = text;
}
</script>

JavaScript If...Else Statements

Conditional statements are used to perform different actions based on different conditions.
In JavaScript we have the following conditional statements:
1. The switch statement is used to perform different actions based on different conditions.
2. The switch statement is used to select one of many blocks of code to be executed.
3. Syntax :
switch(expression) {
    case n:
        code block
        break;
    case n:
        code block
        break;
    default:
        default code block
}

4. The value of the expression is compared with the values of each case.
5. If there is a match, the associated block of code is executed.
6. When the JavaScript code interpreter reaches a break keyword, it breaks out of the switch block.
7. The default keyword specifies the code to run if there is no case match.
JavaScript For Loop : Loops can execute a block of code a number of times.
Different Kinds of Loops for - loops through a block of code a number of times
while - loops through a block of code while a specified condition is true
do/while - also loops through a block of code while a specified condition is true
For 
===============
for (statement 1; statement 2; statement 3) {
    code block to be executed
}

while 
================
while (condition) {
    code block to be executed
}

do 
================
do {
    code block to be executed
}
while (condition);

JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when asked for.
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). For example, a function can be executed when an event occurs, like when the user clicks a button.

1. JavaScript in <head>

<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>

<h1>JavaScript in Head</h1>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

2. JavaScript in <body>

<html>
<body> 

<h1>My Web Page</h1>

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

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

3. External JavaScript

<html>
<head>
<script src="myScript.js"></script>
</head>

<body>

<h1>JavaScript in Head</h1>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>