JavaScript Operators

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

(5 + 6) * 10

Try it Yourself »

JavaScript uses an assignment operator to assign values to variables (just like algebra):

x = 5;
y = 6;
z = (x + y) * 10;

Try it Yourself »

JavaScript Statements A computer program is a sequences of "executable commands" called statements. JavaScript statements are separated by semicolon: x = 5 + 6; y = x * 10; Multiple statements on one line is allowed: x = 5 + 6; y = x * 10;

 JavaScript Keywords

A JavaScript statement often starts with a keyword.
The var keyword tells the browser to create a new variable:

var x = 5 + 6;
var y = x * 10; 

JavaScript Data Types

JavaScript variables can hold many data types: numbers, text strings, arrays, objects and more:

var length = 16;                               // Number assigned by a number literal var points = x * 10;                           // Number assigned by an expression literal var lastName = "Johnson";                      // String assigned by a string literal var cars = ["Saab", "Volvo", "BMW"];           // Array  assigned by an array literalvar x = {firstName:"John", lastName:"Doe"};    // Object assigned by an object literal

  JavaScript Functions

JavaScript statements written inside a function, can be invoked and reused many times.
Invoke a function = call a function (ask for the code in the function to be executed).

function myFunction(a, b) {
    return a * b;                   // return the product of a and b } 

 

---

JavaScript Statement

In HTML, JavaScript statements are "command lines" executed by the web browser.

---

In HTML, JavaScript statements are "commands" to the browser.
The purpose, of the statements, is to tell the browser what to do.
This statement tells the browser to write "Hello Dolly" inside an HTML element identified with id="demo":

Example

document.getElementById("demo").innerHTML = "Hello Dolly.";

Try it Yourself »

 JavaScript Code

JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
Each statement is executed by the browser in the sequence they are written.
This example will manipulate two different HTML elements:

Example

document.getElementById("demo").innerHTML = "Hello Dolly.";
document.getElementById("myDiv").innerHTML = "How are you?";

Try it Yourself »

---

Semicolon ;

Semicolon separates JavaScript statements.
Normally you add a semicolon at the end of each executable statement:

a = 5;
b = 6;
c = a + b;

Try it Yourself »

N/B 

You might see examples without semicolons.
Ending statements with semicolon is optional in JavaScript.

 JavaScript Code Blocks

JavaScript statements can be grouped together in blocks.
Blocks start with a left curly bracket, and end with a right curly bracket.
The purpose of a block is to make the sequence of statements execute together.
A good example of statements grouped together in blocks, are in JavaScript functions.
This example will run a function that will manipulate two HTML elements:

Example

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello Dolly.";
    document.getElementById("myDIV").innerHTML = "How are you?";
}

Try it Yourself »

 

JavaScript Statement Identifiers

JavaScript statements often start with a statement identifier to identify the JavaScript action to be performed.
Statement identifiers are reserved words and cannot be used as variable names (or any other things).
Here is a list of some of the JavaScript statements (reserved words) you will learn about in this tutorial:

Statement	Description
break	Terminates a switch or a loop
catch	Marks the block of statements to be executed when an error occurs in a try block
continue	Jumps out of a loop and starts at the top
debugger	Stops the execution of JavaScript, and calls (if available) the debugging function
do ... while	Executes a block of statements, and repeats the block, while a condition is true
for	Marks a block of statements to be executed, as long as a condition is true
for ... in	Marks a block of statements to be executed, for each element of an object (or array)
function	Declares a function
if ... else	Marks a block of statements to be executed, depending on a condition
return	Exits a function
switch	Marks a block of statements to be executed, depending on different cases
throw	Throws (generates) an error
try	Implements error handling to a block of statements
var	Declares a variable
while	Marks a block of statements to be executed, while a condition is true

JavaScript Syntax

JavaScript is a scripting language. A scripting language is a lightweight programming language.
The sentences in a programming language are called statements.
The principles, how sentences are constructed in a language, are called language syntax.

JavaScript Literals

In a programming language, a literal is a constant value, like 3.14. Number literals can be written with or without decimals, and with or without scientific notation (e):

3.14
1001
123e5

 String literals can be written with double or single quotes:

"John Doe"
'John Doe'

Expression literals evaluate (compute) to values:

5 + 6
5 * 10

Try it Yourself »

Array literals defines an array:

[40, 100, 1, 5, 25, 10]

Object literals defines an object:

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

Function literals defines a function:

function myFunction(a, b) { return a * b;} 

JavaScript Variables

In a programming language (and in algebra), variables are used to store data values.
JavaScript uses the var keyword to define variables.
An equal sign is used to assign values to variables (just like algebra).
In this example, length is defined as a variable. Then, it is assigned (given) the value 6:

var length;

length = 6;

Try it Yourself »

		A literal is a fixed value. A variable is a name that can have variable values.

---

JavaScript Output

JavaScript Output

JavaScript does not have any print or output functions.

In HTML, JavaScript can only be used to manipulate HTML elements.

Manipulating HTML Elements

To access an HTML element from JavaScript, you can use the document.getElementById(id) method.
Use the id attribute to identify the HTML element, and innerHTML to refer to the element content:
______________________________________________________________________________

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p id="demo">My First Paragraph</p>

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

</body>
</html>

_______________________________________________________________________________

The JavaScript statement above (inside the

JAVA SCRIPT

Javascript Tutorials

JavaScript is one of 3 languages all web developers must learn:
 1. HTML to define the content of web pages 
2. CSS to specify the layout of web pages 
3. JavaScript to program the behavior of web pages
The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).
The following example changes the content (innerHTML) of an HTML element identified with id="demo": 

Example

document.getElementById("demo").innerHTML = "Hello JavaScript";

 The method document.getElementById() is one of many methods in the HTML DOM.

You can use JavaScript to:

• Change HTML elements
• Delete HTML elements
• Create new HTML elements
• Copy and clone HTML elements
• And much more ... 
• 
  
  
  
  

  My First JavaScript

  
  
  JavaScript can change the content of an HTML element:
  
  
  
  
  
  This is a demonstration.