Javascript W 3 S
Uploaded by
Maya JennyJavascript W 3 S
Uploaded by
Maya JennyJavascript
JavaScript is the most popular programming language in the world.
This page contains some examples of what JavaScript can do.
JavaScript Can Change HTML Content
One of many HTML methods is getElementById().
This example uses the method to "find" an HTML element (with id="demo"),
and changes the element content (innerHTML) to "Hello JavaScript":
Example"
document.getElementById("demo").innerHTML = "Hello JavaScript";
Try it Yourself
JavaScript Can Change HTML Attributes
This example changes an HTML image, by changing the src attribute of an
<img> tag:
The Light bulb
Click the light bulb to turn on/off the light
Try it Yourself
JavaScript Can Change HTML Styles (CSS)
Changing the style of an HTML element, is a variant of changing an HTML
attribute:
Example
document.getElementById("demo").style.fontSize = "25px";
Try it Yourself
JavaScript Can Validate Data
JavaScript is often used to validate input:
Please input a number between 1 and 10
Submit
Try it Yourself
Did You Know?
JavaScript and Java are completely different languages, both in concept
and design.
JavaScript was invented by Brendan Eich in 1995, and became an ECMA
standard in 1997.
ECMA-262 is the official name. ECMAScript 6 (released in June 2015) is
the latest official version of JavaScript.
JavaScript can be placed in the <body> and the <head> sections of an
HTML page.
The <script> Tag
In HTML, JavaScript code must be inserted between <script> and </script>
tags.
Example
<script>
document.getElementById("demo").innerHTML = "My First
JavaScript";
</script>
Older examples may use a type attribute: <script
type="text/javascript">.
The type attribute is not required. JavaScript is the default scripting
language in HTML.
JavaScript Functions and Events
A JavaScript function is a block of JavaScript code, that can be executed when
"asked" for.
For example, a function can be executed when an event occurs, like when the
user clicks a button.
You will learn much more about functions and events in later chapters.
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML
page, or in both.
Keeping all code in one place, is always a good habit.
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an
HTML page.
The function is invoked (called) when a button is clicked:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Try it Yourself
JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an
HTML page.
The function is invoked (called) when a button is clicked:
Example
<!DOCTYPE html>
<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>
Try it Yourself
It is a good idea to place scripts at the bottom of the <body> element.
This can improve page load, because HTML display is not blocked by
scripts loading.
External JavaScript
Scripts can also be placed in external files.
External scripts are practical when the same code is used in many different web
pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source)
attribute of the <script> tag:
Example
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
Try it yourself
You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is
located.
External scripts cannot contain <script> tags.
External JavaScript Advantages
Placing JavaScripts in external files has some advantages:
It separates HTML and code
It makes HTML and JavaScript easier to read and maintain
Cached JavaScript files can speed up page loads
JavaScript Output
Previous
Next Chapter
JavaScript does NOT have any built-in print or display functions.
JavaScript Display Possibilities
JavaScript can "display" data in different ways:
Writing
Writing
Writing
Writing
into
into
into
into
an alert box, using window.alert().
the HTML output using document.write().
an HTML element, using innerHTML.
the browser console, using console.log().
Using window.alert()
You can use an alert box to display data:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Try it Yourself
Using document.write()
For testing purposes, it is convenient to use document.write():
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Try it Yourself
Using document.write() after an HTML document is fully loaded, will delete all
existing HTML:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
Try it Yourself
The document.write() method should be used only for testing.
Using innerHTML
To access an HTML element, JavaScript can use the
document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines
the HTML content:
Example
<!DOCTYPE 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>
Try it Yourself
To "display data" in HTML, (in most cases) you will set the value of an
innerHTML property.
Using console.log()
In your browser, you can use the console.log() method to display data.
Activate the browser console with F12, and select "Console" in the menu.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript Syntax
Previous
Next Chapter
JavaScript syntax is the set of rules, how JavaScript programs are
constructed.
JavaScript Programs
A computer program is a list of "instructions" to be "executed" by the
computer.
In a programming language, these program instructions are called statements.
JavaScript is a programming language.
JavaScript statements are separated by semicolons.
Example
var x = 5;
var y = 6;
var z = x + y;
Try it Yourself
In HTML, JavaScript programs can be executed by the web browser.
JavaScript Statements
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
JavaScript Values
The JavaScript syntax defines two types of values: Fixed values and variable
values.
Fixed values are called literals. Variable values are called variables.
JavaScript Literals
The most important rules for writing fixed values are:
Numbers are written with or without decimals:
10.50
1001
Try it Yourself
Strings are text, written within double or single quotes:
"John Doe"
'John Doe'
Try it Yourself
JavaScript Variables
In a programming language, 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.
In this example, x is defined as a variable. Then, x is assigned (given) the value
6:
var x;
x = 6;
Try it Yourself
JavaScript Operators
JavaScript uses an assignment operator ( = ) to assign values to variables:
var x = 5;
var y = 6;
Try it Yourself
JavaScript uses arithmetic operators ( + - * / ) to compute values:
(5 + 6) * 10
Try it Yourself
JavaScript Expressions
An expression is a combination of values, variables, and operators, which
computes to a value.
The computation is called an evaluation.
For example, 5 * 10 evaluates to 50:
5 * 10
Try it Yourself
Expressions can also contain variable values:
x * 10
Try it Yourself
The values can be of various types, such as numbers and strings.
For example, "John" + " " + "Doe", evaluates to "John Doe":
"John" + " " + "Doe"
Try it Yourself
JavaScript Keywords
JavaScript keywords are used to identify actions to be performed.
The var keyword tells the browser to create a new variable:
var x = 5 + 6;
var y = x * 10;
Try it Yourself
JavaScript Comments
Not all JavaScript statements are "executed".
Code after double slashes // or between /* and */ is treated as a comment.
Comments are ignored, and will not be executed:
var x = 5;
// var x = 6;
// I will be executed
I will NOT be executed
Try it Yourself
JavaScript Identifiers
Identifiers are names.
In JavaScript, identifiers are used to name variables (and keywords, and
functions, and labels).
The rules for legal names are much the same in most programming languages.
In JavaScript, the first character must be a letter, an underscore (_), or a dollar
sign ($).
Subsequent characters may be letters, digits, underscores, or dollar signs.
Numbers are not allowed as the first character.
This way JavaScript can easily distinguish identifiers from numbers.
JavaScript is Case Sensitive
All JavaScript identifiers are case sensitive.
The variables lastName and lastname, are two different variables.
lastName = "Doe";
lastname = "Peterson";
Try it Yourself
JavaScript does not interpret VAR or Var as the keyword var.
JavaScript and Camel Case
Historically, programmers have used three ways of joining multiple words into
one variable name:
Hyphens:
first-name, last-name, master-card, inter-city.
Underscore:
first_name, last_name, master_card, inter_city.
Camel Case:
FirstName, LastName, MasterCard, InterCity.
In programming languages, especially in JavaScript, camel case often starts
with a lowercase letter:
firstName, lastName, masterCard, interCity.
Hyphens are not allowed in JavaScript. It is reserved for subtractions.
JavaScript Character Set
JavaScript uses the Unicode character set.
Unicode covers (almost) all the characters, punctuations, and symbols in the
world.
For a closer look, please study our Complete Unicode Reference.
JavaScript Statements
Previous
Next Chapter
In HTML, JavaScript statements are "instructions" to be "executed" by the web
browser.
JavaScript Statements
This statement tells the browser to write "Hello Dolly." inside an HTML element
with id="demo":
Example
document.getElementById("demo").innerHTML = "Hello Dolly.";
Try it Yourself
JavaScript Programs
Most JavaScript programs contain many JavaScript statements.
The statements are executed, one by one, in the same order as they are
written.
In this example, x, y, and z is given values, and finally z is displayed:
Example
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
Try it yourself
JavaScript programs (and JavaScript statements) are often called
JavaScript code.
Semicolons ;
Semicolons separate JavaScript statements.
Add a semicolon at the end of each executable statement:
a = 5;
b = 6;
c = a + b;
Try it Yourself
When separated by semicolons, multiple statements on one line are allowed:
a = 5; b = 6; c = a + b;
Try it Yourself
On the web, you might see examples without semicolons.
Ending statements with semicolon is not required, but highly
recommended.
JavaScript White Space
JavaScript ignores multiple spaces. You can add white space to your script to
make it more readable.
The following lines are equivalent:
var person = "Hege";
var person="Hege";
A good practice is to put spaces around operators ( = + - * / ):
var x = y + z;
JavaScript Line Length and Line Breaks
For best readability, programmers often like to avoid code lines longer than 80
characters.
If a JavaScript statement does not fit on one line, the best place to break it, is
after an operator:
Example
document.getElementById("demo").innerHTML =
"Hello Dolly.";
Try it Yourself
JavaScript Code Blocks
JavaScript statements can be grouped together in code blocks, inside curly
brackets {...}.
The purpose of code blocks is to define statements to be executed together.
One place you will find statements grouped together in blocks, are in JavaScript
functions:
Example
function myFunction() {
document.getElementById("demo").innerHTML = "Hello Dolly.";
document.getElementById("myDIV").innerHTML = "How are you?";
Try it Yourself
In this tutorial we use 4 spaces of indentation for code blocks.
You will learn more about functions later in this tutorial.
JavaScript Keywords
JavaScript statements often start with a keyword to identify the JavaScript
action to be performed.
Here is a list of some of the keywords you will learn about in this tutorial:
Keywor
Description
break
Terminates a switch or a loop
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 ...
Executes a block of statements, and repeats the block, while a
while
condition is true
for
Marks a block of statements to be executed, as long as a condition
is true
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
try ...
Implements error handling to a block of statements
catch
var
Declares a variable
JavaScript keywords are reserved words. Reserved words cannot be used
as names for variables.
JavaScript Comments
Previous
Next Chapter
JavaScript comments can be used to explain JavaScript code, and to make it
more readable.
JavaScript comments can also be used to prevent execution, when testing
alternative code.
Single Line Comments
Single line comments start with //.
Any text between // and the end of the line, will be ignored by JavaScript (will
not be executed).
This example uses a single line comment before each line, to explain the code:
Example
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";
// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";
Try it yourself
This example uses a single line comment at the end of each line, to explain the
code:
Example
var x = 5;
// Declare x, give it the value of 5
var y = x + 2;
// Declare y, give it the value of x + 2
Try it yourself
Multi-line Comments
Multi-line comments start with /* and end with */.
Any text between /* and */ will be ignored by JavaScript.
This example uses a multi-line comment (a comment block) to explain the
code:
Example
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
Try it yourself
It is most common to use single line comments.
Block comments are often used for formal documentation.
Using Comments to Prevent Execution
Using comments to prevent execution of code, is suitable for code testing.
Adding // in front of a code line changes the code lines from an executable line
to a comment.
This example uses // to prevent execution of one of the code lines:
Example
//document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
Try it yourself
This example uses a comment block to prevent execution of multiple lines:
Example
/*
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
*/
Try it yourself
JavaScript Variables
Previous
Next Chapter
JavaScript Variables
JavaScript variables are containers for storing data values.
In this example, x, y, and z, are variables:
Example
var x = 5;
var y = 6;
var z = x + y;
Try it Yourself
From the example above, you can expect:
x stores the value 5
y stores the value 6
z stores the value 11
Much Like Algebra
In this example, price1, price2, and total, are variables:
Example
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
Try it Yourself
In programming, just like in algebra, we use variables (like price1) to hold
values.
In programming, just like in algebra, we use variables in expressions (total =
price1 + price2).
From the example above, you can calculate the total to be 11.
JavaScript variables are containers for storing data values.
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:
Names can contain letters, digits, underscores, and dollar signs.
Names must begin with a letter
Names can also begin with $ and _ (but we will not use it in this tutorial)
Names are case sensitive (y and Y are different variables)
Reserved words (like JavaScript keywords) cannot be used as names
JavaScript identifiers are case-sensitive.
The Assignment Operator
In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to"
operator.
This is different from algebra. The following does not make sense in algebra:
x = x + 5
In JavaScript, however, it makes perfect sense: it assigns the value of x + 5 to
x.
(It calculates the value of x + 5 and puts the result into x. The value of x is
incremented by 5.)
The "equal to" operator is written like == in JavaScript.
JavaScript Data Types
JavaScript variables can hold numbers like 100, and text values like "John Doe".
In programming, text values are called text strings.
JavaScript can handle many types of data, but for now, just think of numbers
and strings.
Strings are written inside double or single quotes. Numbers are written without
quotes.
If you put quotes around a number, it will be treated as a text string.
Example
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
Try it Yourself
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;
After the declaration, the variable has no value. (Technically it has the value of
undefined)
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";
In the example below, we create a variable called carName and assign the value
"Volvo" to it.
Then we "output" the value inside an HTML paragraph with id="demo":
Example
<p id="demo"></p>
<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
Try it yourself
It's a good programming practice to declare all variables at the beginning
of a 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;
Try it yourself
A declaration can span multiple lines:
var person = "John Doe",
carName = "Volvo",
price = 200;
Try it yourself
Value = undefined
In computer programs, variables are often declared without a value. The value
can be something that has to be calculated, or something that will be provided
later, like user input.
A variable declared without a value will have the value undefined.
The variable carName will have the value undefined after the execution of this
statement:
Example
var carName;
Try it yourself
Re-Declaring JavaScript Variables
If you re-declare a JavaScript variable, it will not lose its value.
The variable carName will still have the value "Volvo" after the execution of
these statements:
Example
var carName = "Volvo";
var carName;
Try it yourself
JavaScript Arithmetic
As with algebra, you can do arithmetic with JavaScript variables, using
operators like = and +:
Example
var x = 5 + 2 + 3;
Try it yourself
You can also add strings, but strings will be concatenated (added end-to-end):
Example
var x = "John" + " " + "Doe";
Try it Yourself
Also try this:
Example
var x = "5" + 2 + 3;
Try it Yourself
If you add a number to a string, the number will be treated as string,
and concatenated.
Test Yourself with Exercises!
Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6
JavaScript Operators
Previous
Next Chapter
Example
Assign values to variables and add them together:
var x = 5;
// assign the value 5 to x
var y = 2;
// assign the value 2 to y
var z = x + y;
// assign the value 7 to z (x + y)
Try it yourself
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic on numbers (literals or
variables).
Operator
Description
Addition
Subtraction
Multiplication
Division
Modulus
++
Increment
--
Decrement
The addition operator (+) adds numbers:
Adding
var x = 5;
var y = 2;
var z = x + y;
Try it Yourself
The multiplication operator (*) multiplies numbers.
Multiplying
var x = 5;
var y = 2;
var z = x * y;
Try it Yourself
You will learn more about JavaScript operators in the next chapters.
JavaScript Assignment Operators
Assignment operators assign values to JavaScript variables.
Operator
Example
Same As
x=y
x=y
+=
x += y
x=x+y
-=
x -= y
x=x-y
*=
x *= y
x=x*y
/=
x /= y
x=x/y
%=
x %= y
x=x%y
The assignment operator (=) assigns a value to a variable.
Assignment
var x = 10;
Try it Yourself
The addition assignment operator (+=) adds a value to a variable.
Assignment
var x = 10;
x += 5;
Try it Yourself
JavaScript String Operators
The + operator can also be used to add (concatenate) strings.
When used on strings, the + operator is called the concatenation
operator.
Example
txt1 = "John";
txt2 = "Doe";
txt3 = txt1 + " " + txt2;
The result of txt3 will be:
John Doe
Try it Yourself
The += assignment operator can also be used to add (concatenate) strings:
Example
txt1 = "What a very ";
txt1 += "nice day";
The result of txt1 will be:
What a very nice day
Try it Yourself
Adding Strings and Numbers
Adding two numbers, will return the sum, but adding a number and a string will
return a string:
Example
x = 5 + 5;
y = "5" + 5;
z= "Hello" + 5;
The result of x, y, and z will be:
10
55
Hello5
Try it Yourself
The rule is: If you add a number and a string, the result will be a string!
JavaScript Comparison and Logical
Operators
Opera
Description
tor
==
equal to
===
equal value and equal type
!=
not equal
!==
not equal value or not equal type
>
greater than
<
less than
>=
greater than or equal to
<=
less than or equal to
Comparison and logical operators are described in the JS Comparisons
chapter.
JavaScript Arithmetic
Previous
Next Chapter
A typical thing to do with numbers is arithmetic.
JavaScript Arithmetic Operators
Arithmetic operators perform arithmetic on numbers (literals or variables).
Operator
Description
Addition
Subtraction
Multiplication
Division
Modulus
++
Increment
--
Decrement
Arithmetic Operations
A typical arithmetic operation operates on two numbers.
The two numbers can be literals:
Example
var x = 100 + 50;
Try it Yourself
or variables:
Example
var x = a + b;
Try it Yourself
or expressions:
Example
var x = (100 + 50) * a;
Try it Yourself
Operators and Operands
The numbers (in an arithmetic operation) are called operands.
The operation (to be performed between the two operands) is defined by an
operator.
Operand
100
Operator
Operand
50
The addition operator (+) adds numbers:
Adding
var x = 5;
var y = 2;
var z = x + y;
Try it Yourself
The subtraction operator (-) subtracts numbers.
Subtracting
var x = 5;
var y = 2;
var z = x - y;
Try it Yourself
The multiplication operator (*) multiplies numbers.
Multiplying
var x = 5;
var y = 2;
var z = x * y;
Try it Yourself
The division operator (/) divides numbers.
Dividing
var x = 5;
var y = 2;
var z = x / y;
Try it Yourself
The modular operator (%) returns the division remainder.
Modulus
var x = 5;
var y = 2;
var z = x % y;
Try it Yourself
The increment operator (++) increments numbers.
Incrementing
var x = 5;
x++;
var z = x;
Try it Yourself
The decrement operator (--) decrements numbers.
Decrementing
var x = 5;
x--;
var z = x;
Try it Yourself
Operator Precedence
Operator precedence describes the order in which operations are performed in
an arithmetic expression.
Example
var x = 100 + 50 * 3;
Try it Yourself
Is the result of example above the same as 150 * 3, or is it the same as 100 +
150?
Is the addition or the multiplication done first?
As in traditional school mathematics, the multiplication is done first.
Multiplication (*) and division (/) have higher precedence than addition (+)
and subraction (-).
And (as in school mathematics) the precedence can be changed by using
parentheses:
Example
var x = (100 + 50) * 3;
Try it Yourself
When using parentheses, the operations inside the parentheses are computed
first.
When many operations have the same precedence (like addition and
subtraction), they are computed from left to right:
Example
var x = 100 + 50 - 3;
Try it Yourself
Arithmetic Operator Precedence
The following table lists JavaScript arithmetic operators, ordered from highest to
lowest precedence:
Operator
Precedence
()
Expression grouping
++ --
Increment and decrement
*/%
Multiplication, division, and modulo division
+-
Addition and subtraction
Expressions in parentheses are fully computed before the value is used in
the rest of the expression.
Test Yourself with Exercises!
Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5
JavaScript Assignment
Previous
Next Chapter
JavaScript Assignment Operators
Assignment operators assign values to JavaScript variables.
Operator
Example
Same As
x=y
x=y
+=
x += y
x=x+y
-=
x -= y
x=x-y
*=
x *= y
x=x*y
/=
x /= y
x=x/y
%=
x %= y
x=x%y
The = assignment operator assigns a value to a variable.
Assignment
var x = 10;
Try it Yourself
The += assignment operator adds a value to a variable.
Assignment
var x = 10;
x += 5;
Try it Yourself
The -= assignment operator subtracts a value from a variable.
Assignment
var x = 10;
x -= 5;
Try it Yourself
The *= assignment operator multiplies a variable.
Assignment
var x = 10;
x *= 5;
Try it Yourself
The /= assignment divides a variable.
Assignment
var x = 10;
x /= 5;
Try it Yourself
The %= assignment operator assigns a remainder to a variable.
Assignment
var x = 10;
x %= 5;
Try it Yourself
Test Yourself with Exercises!
Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5
JavaScript Data Types
Previous
Next Chapter
String, Number, Boolean, Array, Object.
JavaScript Data Types
JavaScript variables can hold many data types: numbers, strings, arrays,
objects and more:
var length = 16;
// Number
var lastName = "Johnson";
// String
var cars = ["Saab", "Volvo", "BMW"];
// Array
var x = {firstName:"John", lastName:"Doe"};
// Object
The Concept of Data Types
In programming, data types is an important concept.
To be able to operate on variables, it is important to know something about the
type.
Without data types, a computer cannot safely solve this:
var x = 16 + "Volvo";
Does it make any sense to add "Volvo" to sixteen? Will it produce a result? Will
it produce an error?
JavaScript will treat the example above as:
var x = "16" + "Volvo";
If the second operand is a string, JavaScript will also treat the first
operand as a string.
Example
var x = 16 + "Volvo";
Try it Yourself
JavaScript evaluates expressions from left to right. Different sequences can
produce different results:
JavaScript:
var x = 16 + 4 + "Volvo";
Result:
20Volvo
Try it Yourself
JavaScript:
var x = "Volvo" + 16 + 4;
Result:
Volvo164
Try it Yourself
In the first example, JavaScript treats 16 and 4 as numbers, until it reaches
"Volvo".
In the second example, since the first operand is a string, all operands are
treated as strings.
JavaScript Has Dynamic Types
JavaScript has dynamic types. This means that the same variable can be used
as different types:
Example
var x;
// Now x is undefined
var x = 5;
// Now x is a Number
var x = "John";
// Now x is a String
JavaScript Strings
A string (or a text string) is a series of characters like "John Doe".
Strings are written with quotes. You can use single or double quotes:
Example
var carName = "Volvo XC60";
// Using double quotes
var carName = 'Volvo XC60';
// Using single quotes
You can use quotes inside a string, as long as they don't match the quotes
surrounding the string:
Example
var answer = "It's alright";
// Single quote inside
double quotes
var answer = "He is called 'Johnny'";
// Single quotes inside
double quotes
var answer = 'He is called "Johnny"';
// Double quotes inside
single quotes
Try it yourself
You will learn more about strings later in this tutorial.
JavaScript Numbers
JavaScript has only one type of numbers.
Numbers can be written with, or without decimals:
Example
var x1 = 34.00;
// Written with decimals
var x2 = 34;
// Written without decimals
Extra large or extra small numbers can be written with scientific (exponential)
notation:
Example
var y = 123e5;
// 12300000
var z = 123e-5;
// 0.00123
Try it yourself
You will learn more about numbers later in this tutorial.
JavaScript Booleans
Booleans can only have two values: true or false.
Example
var x = true;
var y = false;
Booleans are often used in conditional testing.
You will learn more about conditional testing later in this tutorial.
JavaScript Arrays
JavaScript arrays are written with square brackets.
Array items are separated by commas.
The following code declares (creates) an array called cars, containing three
items (car names):
Example
var cars = ["Saab", "Volvo", "BMW"];
Try it Yourself
Array indexes are zero-based, which means the first item is [0], second is [1],
and so on.
You will learn more about arrays later in this tutorial.
JavaScript Objects
JavaScript objects are written with curly braces.
Object properties are written as name:value pairs, separated by commas.
Example
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
Try it Yourself
The object (person) in the example above has 4 properties: firstName,
lastName, age, and eyeColor.
You will learn more about objects later in this tutorial.
The typeof Operator
You can use the JavaScript typeof operator to find the type of a JavaScript
variable:
Example
typeof "John"
// Returns string
typeof 3.14
// Returns number
typeof false
// Returns boolean
typeof [1,2,3,4]
// Returns object
typeof {name:'John', age:34} // Returns object
Try it Yourself
In JavaScript, an array is a special type of object. Therefore typeof
[1,2,3,4] returns object.
Undefined
In JavaScript, a variable without a value, has the value undefined. The typeof
is also undefined.
Example
var person;
// Value is undefined, type is
undefined
Try it Yourself
Any variable can be emptied, by setting the value to undefined. The type will
also be undefined.
Example
person = undefined;
// Value is undefined, type is
undefined
Try it Yourself
Empty Values
An empty value has nothing to do with undefined.
An empty string variable has both a value and a type.
Example
var car = "";
// The value is "", the typeof is
string
Try it Yourself
Null
In JavaScript null is "nothing". It is supposed to be something that doesn't exist.
Unfortunately, in JavaScript, the data type of null is an object.
You can consider it a bug in JavaScript that typeof null is an object. It
should be null.
You can empty an object by setting it to null:
Example
var person = null;
an object
// Value is null, but type is still
Try it Yourself
You can also empty an object by setting it to undefined:
Example
var person = undefined;
// Value is undefined, type is
undefined
Try it Yourself
Difference Between Undefined and Null
typeof undefined
// undefined
typeof null
// object
null === undefined
// false
null == undefined
// true
Try it Yourself
JavaScript Functions
Previous
Next Chapter
A JavaScript function is a block of code designed to perform a particular
task.
A JavaScript function is executed when "something" invokes it (calls it).
Example
function myFunction(p1, p2) {
return p1 * p2;
// The function returns the
product of p1 and p2
Try it yourself
JavaScript Function Syntax
A JavaScript function is defined with the function keyword, followed by a
name, followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs (same
rules as variables).
The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3) {
code to be executed
Function parameters are the names listed in the function definition.
Function arguments are the real values received by the function when it is
invoked.
Inside the function, the arguments behaves as local variables.
A Function is much the same as a Procedure or a Subroutine, in other
programming languages.
Function Invocation
The code inside the function will execute when "something" invokes (calls) the
function:
When an event occurs (when a user clicks a button)
When it is invoked (called) from JavaScript code
Automatically (self invoked)
You will learn a lot more about function invocation later in this tutorial.
Function Return
When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to execute
the code after the invoking statement.
Functions often compute a return value. The return value is "returned" back to
the "caller":
Example
Calculate the product of two numbers, and return the result:
var x = myFunction(4, 3);
// Function is called, return
value will end up in x
function myFunction(a, b) {
return a * b;
// Function returns the product
of a and b
The result in x will be:
12
Try it yourself
Why Functions?
You can reuse code: Define the code once, and use it many times.
You can use the same code many times with different arguments, to produce
different results.
Example
Convert Fahrenheit to Celsius:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
document.getElementById("demo").innerHTML = toCelsius(77);
Try it yourself
The () Operator Invokes the Function
Using the example above, toCelsius refers to the function object, and
toCelsius() refers to the function result.
Example
Accessing a function without () will return the function definition:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
document.getElementById("demo").innerHTML = toCelsius;
Try it Yourself
Functions Used as Variables
In JavaScript, you can use functions the same way as you use variables.
Example
You can use:
var text = "The temperature is " + toCelsius(77) + " Celsius";
Instead of:
var x = toCelsius(32);
var text = "The temperature is " + x + " Celsius";
Try it Yourself
You will learn a lot more about functions later in this tutorial.
Test Yourself with Exercises!
Exercise 1
Exercise 2
Exercise 3
Exercise 4
Exercise 5
JavaScript Objects
Previous
Next Chapter
Real Life Objects, Properties, and Methods
In real life, a car is an object.
A car has properties like weight and color, and methods like start and stop:
Object
Properties
Methods
car.name = Fiat
car.start()
car.model = 500
car.drive()
car.weight =
car.brake()
850kg
car.stop()
car.color = white
All cars have the same properties, but the property values differ from car to
car.
All cars have the same methods, but the methods are performed at different
times.
JavaScript Objects
You have already learned that JavaScript variables are containers for data
values.
This code assigns a simple value (Fiat) to a variable named car:
var car = "Fiat";
Try it Yourself
Objects are variables too. But objects can contain many values.
This code assigns many values (Fiat, 500, white) to a variable named car:
var car = {type:"Fiat", model:500, color:"white"};
Try it Yourself
The values are written as name:value pairs (name and value separated by a
colon).
JavaScript objects are containers for named values.
Object Properties
The name:values pairs (in JavaScript objects) are called properties.
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
Property
Property Value
firstName
John
lastName
Doe
age
50
eyeColor
blue
Object Methods
Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions.
Property
Property Value
firstName
John
lastName
Doe
age
50
eyeColor
blue
fullName
function() {return this.firstName + " " + this.lastName;}
JavaScript objects are containers for named values (called properties)
and methods.
Object Definition
You define (and create) a JavaScript object with an object literal:
Example
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
Try it Yourself
Spaces and line breaks are not important. An object definition can span multiple
lines:
Example
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
Try it Yourself
Accessing Object Properties
You can access object properties in two ways:
objectName.propertyName
or
objectName["propertyName"]
Example1
person.lastName;
Try it Yourself
Example2
person["lastName"];
Try it Yourself
Accessing Object Methods
You access an object method with the following syntax:
objectName.methodName()
Example
name = person.fullName();
Try it Yourself
If you access the fullName property, without (), it will return the function
definition:
Example
name = person.fullName;
Try it Yourself
Do Not Declare Strings, Numbers, and
Booleans as Objects!
When a JavaScript variable is declared with the keyword "new", the variable is
created as an object:
var x = new String();
// Declares x as a String object
var y = new Number();
// Declares y as a Number object
var z = new Boolean();
//
Declares z as a Boolean object
Avoid String, Number, and Boolean objects. They complicate your code and slow
down execution speed.
You will learn more about objects later in this tutorial.
Test Yourself with Exercises!
Exercise 1
Exercise 2
Exercise 3
JavaScript Scope
Previous
Next Chapter
Scope is the set of variables you have access to.
JavaScript Scope
In JavaScript, objects and functions are also variables.
In JavaScript, scope is the set of variables, objects, and functions you
have access to.
JavaScript has function scope: The scope changes inside functions.
Local JavaScript Variables
Variables declared within a JavaScript function, become LOCAL to the function.
Local variables have local scope: They can only be accessed within the
function.
Example
// code here can not use carName
function myFunction() {
var carName = "Volvo";
// code here can use carName
Try it Yourself
Since local variables are only recognized inside their functions, variables with
the same name can be used in different functions.
Local variables are created when a function starts, and deleted when the
function is completed.
Global JavaScript Variables
A variable declared outside a function, becomes GLOBAL.
A global variable has global scope: All scripts and functions on a web page can
access it.
Example
var carName = " Volvo";
// code here can use carName
function myFunction() {
// code here can use carName
Try it Yourself
Automatically Global
If you assign a value to a variable that has not been declared, it will
automatically become a GLOBAL variable.
This code example will declare carName as a global variable, even if it is
executed inside a function.
Example
// code here can use carName
function myFunction() {
carName = "Volvo";
// code here can use carName
Try it Yourself
The Lifetime of JavaScript Variables
The lifetime of a JavaScript variable starts when it is declared.
Local variables are deleted when the function is completed.
Global variables are deleted when you close the page.
Function Arguments
Function arguments (parameters) work as local variables inside functions.
Global Variables in HTML
With JavaScript, the global scope is the complete JavaScript environment.
In HTML, the global scope is the window object: All global variables belong to
the window object.
Example
// code here can use window.carName
function myFunction() {
carName = "Volvo";
Try it Yourself
Did You Know?
Your global variables (or functions) can overwrite window variables (or
functions).
Any function, including the window object, can overwrite your global
variables and functions.
JavaScript Events
Previous
Next Chapter
HTML events are "things" that happen to HTML elements.
When JavaScript is used in HTML pages, JavaScript can "react" on these
events.
HTML Events
An HTML event can be something the browser does, or something a user does.
Here are some examples of HTML events:
An HTML web page has finished loading
An HTML input field was changed
An HTML button was clicked
Often, when events happen, you may want to do something.
JavaScript lets you execute code when events are detected.
HTML allows event handler attributes, with JavaScript code, to be added to
HTML elements.
With single quotes:
<some-HTML-element some-event='some JavaScript'>
With double quotes:
<some-HTML-element some-event="some JavaScript">
In the following example, an onclick attribute (with code), is added to a button
element:
Exampleo
<button onclick='getElementById("demo").innerHTML=Date()'>The
time is?</button>
Try it Yourself
In the example above, the JavaScript code changes the content of the element
with id="demo".
In the next example, the code changes the content of its own element (using
this.innerHTML):
Example
<button onclick="this.innerHTML=Date()">The time is?</button>
Try it Yourself
JavaScript code is often several lines long. It is more common to see
event attributes calling functions:
Example
<button onclick="displayDate()">The time is?</button>
Try it Yourself
Common HTML Events
Here is a list of some common HTML events:
Event
Description
onchange
An HTML element has been changed
onclick
The user clicks an HTML element
onmouseover
The user moves the mouse over an HTML element
onmouseout
The user moves the mouse away from an HTML element
onkeydown
The user pushes a keyboard key
onload
The browser has finished loading the page
The list is much longer: W3Schools JavaScript Reference HTML DOM Events.
What can JavaScript Do?
Event handlers can be used to handle, and verify, user input, user actions, and
browser actions:
Things that should be done every time a page loads
Things that should be done when the page is closed
Action that should be performed when a user clicks a button
Content that should be verified when a user inputs data
And more ...
Many different methods can be used to let JavaScript work with events:
HTML event attributes can execute JavaScript code directly
HTML event attributes can call JavaScript functions
You can assign your own event handler functions to HTML elements
You can prevent events from being sent or being handled
And more ...
You will learn a lot more about events and event handlers in the HTML
DOM chapters.
Test Yourself with Exercises!
Exercise 1
Exercise 2
Exercise 3
JavaScript Strings
Previous
Next Chapter
JavaScript strings are used for storing and manipulating text.
JavaScript Strings
A JavaScript string simply stores a series of characters like "John Doe".
A string can be any text inside quotes. You can use single or double quotes:
Example
var carname = "Volvo XC60";
var carname = 'Volvo XC60';
Try it Yourself
You can use quotes inside a string, as long as they don't match the quotes
surrounding the string:
Example
var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';
Try it Yourself
String Length
The length of a string is found in the built in property length:
Example
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
Try it Yourself
Special Characters
Because strings must be written within quotes, JavaScript will misunderstand
this string:
var y = "We are the so-called "Vikings" from the north."
The string will be chopped to "We are the so-called ".
The solution to avoid this problem, is to use the \ escape character.
The backslash escape character turns special characters into string characters:
Example
var x = 'It\'s alright';
var y = "We are the so-called \"Vikings\" from the north."
Try it Yourself
The escape character (\) can also be used to insert other special characters in a
string.
This is the list of special characters that can be added to a text string with the
backslash sign:
Code
\'
Outputs
single quote
\"
double quote
\\
backslash
\n
new line
\r
carriage return
\t
tab
\b
backspace
\f
form feed
Breaking Long Code Lines
For best readability, programmers often like to avoid code lines longer than 80
characters.
If a JavaScript statement does not fit on one line, the best place to break it is
after an operator:
Example
document.getElementById("demo").innerHTML =
"Hello Dolly.";
Try it Yourself
You can also break up a code line within a text string with a single backslash:
Example
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
Try it Yourself
The \ method is not a ECMAScript (JavaScript) standard.
Some browsers do not allow spaces behind the \ character.
The safest (but a little slower) way to break a long string is to use string
addition:
Example
document.getElementById("demo").innerHTML = "Hello" +
"Dolly!";
Try it Yourself
You cannot break up a code line with a backslash:
Example
document.getElementById("demo").innerHTML = \
"Hello Dolly!";
Try it Yourself
Strings Can be Objects
Normally, JavaScript strings are primitive values, created from literals: var
firstName = "John"
But strings can also be defined as objects with the keyword new: var
firstName = new String("John")
Example
var x = "John";
var y = new String("John");
// typeof x will return string
// typeof y will return object
Try it Yourself
Don't create strings as objects. It slows down execution speed, and
produces nasty side effects:
When using the == equality operator, equal strings looks equal:
Example
var x = "John";
var y = new String("John");
// (x == y) is true because x and y have equal values
Try it Yourself
When using the === equality operator, equal strings are not equal, because the
=== operator expects equality in both type and value.
Example
var x = "John";
var y = new String("John");
// (x === y) is false because x and y have different types
Try it Yourself
Or even worse. Objects cannot be compared:
Example
var x = new String("John");
var y = new String("John");
// (x == y) is false because objects cannot be compared
Try it Yourself
JavaScript objects cannot be compared.
String Properties and Methods
Primitive values, like "John Doe", cannot have properties or methods (because
they are not objects).
But with JavaScript, methods and properties are also available to primitive
values, because JavaScript treats primitive values as objects when executing
methods and properties.
String methods are covered in next chapter.
String Properties
Property
constructor
Description
Returns the function that created the String object's
prototype
length
Returns the length of a string
prototype
Allows you to add properties and methods to an object
String Methods
Method
Description
charAt()
Returns the character at the specified index (position)
charCodeAt()
Returns the Unicode of the character at the specified index
concat()
Joins two or more strings, and returns a copy of the joined
strings
fromCharCode()
Converts Unicode values to characters
indexOf()
Returns the position of the first found occurrence of a
specified value in a string
lastIndexOf()
Returns the position of the last found occurrence of a
specified value in a string
localeCompare()
Compares two strings in the current locale
match()
Searches a string for a match against a regular expression,
and returns the matches
replace()
Searches a string for a value and returns a new string with
the value replaced
search()
Searches a string for a value and returns the position of
the match
slice()
Extracts a part of a string and returns a new string
split()
Splits a string into an array of substrings
substr()
Extracts a part of a string from a start position through a
number of characters
substring()
Extracts a part of a string between two specified positions
toLocaleLowerCa
Converts a string to lowercase letters, according to the
se()
host's locale
toLocaleUpperCa
Converts a string to uppercase letters, according to the
se()
host's locale
toLowerCase()
Converts a string to lowercase letters
toString()
Returns the value of a String object
toUpperCase()
Converts a string to uppercase letters
trim()
Removes whitespace from both ends of a string
valueOf()
Returns the primitive value of a String object
Test Yourself with Exercises!
Exercise 1
Exercise 2
Exercise 3
Exercise 4
JavaScript String Methods
Previous
Next Chapter
String methods help you to work with strings.
Finding a String in a String
The indexOf() method returns the index of (the position of) the first
occurrence of a specified text in a string:
Example
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");
Try it Yourself
The lastIndexOf() method returns the index of the last occurrence of a
specified text in a string:
Example
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate");
Try it Yourself
Both the indexOf(), and the lastIndexOf() methods return -1 if the text is not
found.
JavaScript counts positions from zero.
0 is the first position in a string, 1 is the second, 2 is the third ...
Both methods accept a second parameter as the starting position for the search.
Searching for a String in a String
The search() method searches a string for a specified value and returns the
position of the match:
Example
var str = "Please locate where 'locate' occurs!";
var pos = str.search("locate");
Try it Yourself
Did You Notice?
The two methods, indexOf() and search(), are equal.
They accept the same arguments (parameters), and they return the same
value.
The two methods are equal, but the search() method can take much more
powerful search values.
You will learn more about powerful search values in the chapter about regular
expressions.
Extracting String Parts
There are 3 methods for extracting a part of a string:
slice(start, end)
substring(start, end)
substr(start, length)
The slice() Method
slice() extracts a part of a string and returns the extracted part in a new string.
The method takes 2 parameters: the starting index (position), and the ending
index (position).
This example slices out a portion of a string from position 7 to position 13:
Example
var str = "Apple, Banana, Kiwi";
var res = str.slice(7,13);
The result of res will be:
Banana
Try it yourself
If a parameter is negative, the position is counted from the end of the string.
This example slices out a portion of a string from position -12 to position -6:
Example
var str = "Apple, Banana, Kiwi";
var res = str.slice(-12,-6);
The result of res will be:
Banana
Try it Yourself
If you omit the second parameter, the method will slice out the rest of the
string:
Example
var res = str.slice(7);
Try it Yourself
or, counting from the end:
Example
var res = str.slice(-12);
Try it Yourself
Negative positions does not work in Internet Explorer 8 and earlier.
The substring() Method
substring() is similar to slice().
The difference is that substring() cannot accept negative indexes.
Example
var str = "Apple, Banana, Kiwi";
var res = str.substring(7,13);
The result of res will be:
Banana
Try it yourself
If you omit the second parameter, substring() will slice out the rest of the
string.
The substr() Method
substr() is similar to slice().
The difference is that the second parameter specifies the length of the
extracted part.
Example
var str = "Apple, Banana, Kiwi";
var res = str.substr(7,6);
The result of res will be:
Banana
Try it yourself
If the first parameter is negative, the position counts from the end of the string.
The second parameter can not be negative, because it defines the length.
If you omit the second parameter, substr() will slice out the rest of the string.
Replacing String Content
The replace() method replaces a specified value with another value in a string:
Example
str = "Please visit Microsoft!";
var n = str.replace("Microsoft","W3Schools");
Try it Yourself
The replace() method can also take a regular expression as the search value.
Converting to Upper and Lower Case
A string is converted to upper case with toUpperCase():
Example
var text1 = "Hello World!";
// String
var text2 = text1.toUpperCase();
// text2 is text1 converted to
upper
Try it Yourself
A string is converted to lower case with toLowerCase():
Example
var text1 = "Hello World!";
// String
var text2 = text1.toLowerCase();
// text2 is text1 converted to
lower
Try it Yourself
The concat() Method
concat() joins two or more strings:
Example
var text1 = "Hello";
var text2 = "World";
text3 = text1.concat("
",text2);
Try it Yourself
The concat() method can be used instead of the plus operator. These two lines
do the same:
Example
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");
All string methods return a new string. They don't modify the original
string.
Formally said: Strings are immutable: Strings cannot be changed, only
replaced.
Extracting String Characters
There are 2 safe methods for extracting string characters:
charAt(position)
charCodeAt(position)
The charAt() Method
The charAt() method returns the character at a specified index (position) in a
string:
Example
var str = "HELLO WORLD";
str.charAt(0);
// returns H
Try it Yourself
The charCodeAt() Method
The charCodeAt() method returns the unicode of the character at a specified
index in a string:
Example
var str = "HELLO WORLD";
str.charCodeAt(0);
// returns 72
Try it Yourself
Accessing a String as an Array is Unsafe
You might have seen code like this, accessing a string as an array:
var str = "HELLO WORLD";
str[0];
// returns H
This is unsafe and unpredictable:
It does not work in all browsers (not in IE5, IE6, IE7)
It makes strings look like arrays (but they are not)
str[0] = "H" does not give an error (but does not work)
If you want to read a string as an array, convert it to an array first.
Converting a String to an Array
A string can be converted to an array with the split() method:
Example
var txt = "a,b,c,d,e";
txt.split(",");
// String
// Split on commas
txt.split(" ");
// Split on spaces
txt.split("|");
// Split on pipe
Try it Yourself
If the separator is omitted, the returned array will contain the whole string in
index [0].
If the separator is "", the returned array will be an array of single characters:
Example
var txt = "Hello";
// String
txt.split("");
// Split in characters
Try it Yourself
Complete String Reference
For a complete reference, go to our Complete JavaScript String Reference.
The reference contains descriptions and examples of all string properties and
methods.
Test Yourself with Exercises!
Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6
JavaScript Numbers
Previous
Next Chapter
JavaScript has only one type of number.
Numbers can be written with, or without, decimals.
JavaScript Numbers
JavaScript numbers can be written with, or without decimals:
Example
var x = 34.00;
// A number with decimals
var y = 34;
// A number without decimals
Extra large or extra small numbers can be written with scientific (exponent)
notation:
Example
var x = 123e5;
// 12300000
var y = 123e-5;
// 0.00123
JavaScript Numbers are Always 64-bit
Floating Point
Unlike many other programming languages, JavaScript does not define different
types of numbers, like integers, short, long, floating-point etc.
JavaScript numbers are always stored as double precision floating point
numbers, following the international IEEE 754 standard.
This format stores numbers in 64 bits, where the number (the fraction) is stored
in bits 0 to 51, the exponent in bits 52 to 62, and the sign in bit 63:
Value (aka Fraction/Mantissa)
52 bits (0 - 51)
Exponent
11 bits (52 - 62)
Sign
1 bit (63)
Precision
Integers (numbers without a period or exponent notation) are considered
accurate up to 15 digits.
Example
var x = 999999999999999;
// x will be 999999999999999
var y = 9999999999999999;
// y will be 10000000000000000
Try it Yourself
The maximum number of decimals is 17, but floating point arithmetic is not
always 100% accurate:
Example
var x = 0.2 + 0.1;
// x will be 0.30000000000000004
Try it yourself
To solve the problem above, it helps to multiply and divide:
Example
var x = (0.2 * 10 + 0.1 * 10) / 10;
// x will be 0.3
Try it Yourself
Hexadecimal
JavaScript interprets numeric constants as hexadecimal if they are preceded by
0x.
Example
var x = 0xFF;
// x will be 255
Try it Yourself
Never write a number with a leading zero (like 07).
Some JavaScript versions interpret numbers as octal if they are written
with a leading zero.
By default, Javascript displays numbers as base 10 decimals.
But you can use the toString() method to output numbers as base 16 (hex),
base 8 (octal), or base 2 (binary).
Example
var myNumber = 128;
myNumber.toString(16);
// returns 80
myNumber.toString(8);
// returns 200
myNumber.toString(2);
// returns 10000000
Try it Yourself
Infinity
Infinity (or -Infinity) is the value JavaScript will return if you calculate a number
outside the largest possible number.
Example
var myNumber = 2;
while (myNumber != Infinity) {
// Execute until Infinity
myNumber = myNumber * myNumber;
Try it yourself
Division by 0 (zero) also generates Infinity:
Example
var x =
2 / 0;
var y = -2 / 0;
// x will be Infinity
// y will be -Infinity
Try it Yourself
Infinity is a number: typeOf Infinity returns number.
Example
typeof Infinity;
// returns "number"
Try it Yourself
NaN - Not a Number
NaN is a JavaScript reserved word indicating that a value is not a number.
Trying to do arithmetic with a non-numeric string will result in NaN (Not a
Number):
Example
var x = 100 / "Apple";
// x will be NaN (Not a Number)
Try it Yourself
However, if the string contains a numeric value , the result will be a number:
Example
var x = 100 / "10";
// x will be 10
Try it Yourself
You can use the global JavaScript function isNaN() to find out if a value is a
number.
Example
var x = 100 / "Apple";
isNaN(x);
// returns true because x is Not a Number
Try it Yourself
Watch out for NaN. If you use NaN in a mathematical operation, the result will
also be NaN:
Example
var x = NaN;
var y = 5;
var z = x + y;
// z will be NaN
Try it Yourself
Or the result might be a concatenation:
Example
var x = NaN;
var y = "5";
var z = x + y;
// z will be NaN5
Try it Yourself
NaN is a number, and typeof NaN returns number:
Example
typeof NaN;
// returns "number"
Try it Yourself
Numbers Can be Objects
Normally JavaScript numbers are primitive values created from literals: var x =
123
But numbers can also be defined as objects with the keyword new: var y =
new Number(123)
Example
var x = 123;
var y = new Number(123);
// typeof x returns number
// typeof y returns object
Try it yourself
Don't create Number objects. They slow down execution speed, and
produce nasty side effects:
When using the == equality operator, equal numbers looks equal:
Example
var x = 500;
var y = new Number(500);
// (x == y) is true because x and y have equal values
Try it Yourself
When using the === equality operator, equal numbers are not equal, because
the === operator expects equality in both type and value.
Example
var x = 500;
var y = new Number(500);
// (x === y) is false because x and y have different types
Try it Yourself
Or even worse. Objects cannot be compared:
Example
var x = new Number(500);
var y = new Number(500);
// (x == y) is false because objects cannot be compared
Try it Yourself
JavaScript objects cannot be compared.
Number Properties and Methods
Primitive values (like 3.14 or 2014), cannot have properties and methods
(because they are not objects).
But with JavaScript, methods and properties are also available to primitive
values, because JavaScript treats primitive values as objects when executing
methods and properties.
Number Properties
Property
Description
MAX_VALUE
Returns the largest number possible in JavaScript
MIN_VALUE
Returns the smallest number possible in JavaScript
NEGATIVE_INFINI
Represents negative infinity (returned on overflow)
TY
NaN
Represents a "Not-a-Number" value
POSITIVE_INFINI
Represents infinity (returned on overflow)
TY
Example
var x = Number.MAX_VALUE;
Try it yourself
Number properties belongs to the JavaScript's number object wrapper called
Number.
These properties can only be accessed as Number.MAX_VALUE.
Using myNumber.MAX_VALUE, where myNumber is a variable, expression, or
value, will return undefined:
Example
var x = 6;
var y = x.MAX_VALUE;
// y becomes undefined
Try it yourself
Number methods are covered in the next chapter
Test Yourself with Exercises!
Exercise 1
Exercise 2
Exercise 3
Exercise 4
JavaScript Number Methods
Previous
Next Chapter
Number methods help you to work with numbers.
Global Methods
JavaScript global functions can be used on all JavaScript data types.
These are the most relevant methods, when working with numbers:
Method
Description
Number()
Returns a number, converted from its argument.
parseFloat()
Parses its argument and returns a floating point number
parseInt()
Parses its argument and returns an integer
Number Methods
JavaScript number methods are methods that can be used on numbers:
Method
Description
toString()
Returns a number as a string
toExponential()
Returns a string, with a number rounded and written
using exponential notation.
toFixed()
Returns a string, with a number rounded and written with
a specified number of decimals.
toPrecision()
Returns a string, with a number written with a specified
length
valueOf()
Returns a number as a number
All number methods return a new value. They do not change the original
variable.
The toString() Method
toString() returns a number as a string.
All number methods can be used on any type of numbers (literals, variables, or
expressions):
Example
var x = 123;
x.toString();
// returns 123 from variable x
(123).toString();
// returns 123 from literal 123
(100 + 23).toString();
// returns 123 from expression 100 + 23
Try it Yourself
The toExponential() Method
toExponential() returns a string, with a number rounded and written using
exponential notation.
A parameter defines the number of characters behind the decimal point:
Example
var x = 9.656;
x.toExponential(2);
// returns 9.66e+0
x.toExponential(4);
// returns 9.6560e+0
x.toExponential(6);
// returns 9.656000e+0
Try it yourself
The parameter is optional. If you don't specify it, JavaScript will not round the
number.
The toFixed() Method
toFixed() returns a string, with the number written with a specified number of
decimals:
Example
var x = 9.656;
x.toFixed(0);
// returns 10
x.toFixed(2);
// returns 9.66
x.toFixed(4);
// returns 9.6560
x.toFixed(6);
// returns 9.656000
Try it yourself
toFixed(2) is perfect for working with money.
The toPrecision() Method
toPrecision() returns a string, with a number written with a specified length:
Example
var x = 9.656;
x.toPrecision();
// returns 9.656
x.toPrecision(2);
// returns 9.7
x.toPrecision(4);
// returns 9.656
x.toPrecision(6);
// returns 9.65600
Try it Yourself
Converting Variables to Numbers
There are 3 JavaScript functions that can be used to convert variables to
numbers:
The Number() method
The parseInt() method
The parseFloat() method
These methods are not number methods, but global JavaScript methods.
The Number() Method
Number(), can be used to convert JavaScript variables to numbers:
Example
x = true;
Number(x);
// returns 1
x = false;
Number(x);
// returns 0
x = new Date();
Number(x);
// returns 1404568027739
x = "10"
Number(x);
// returns 10
x = "10 20"
Number(x);
// returns NaN
Try it Yourself
Used on Date(), the Number() method returns the number of
milliseconds since 1.1.1970.
The parseInt() Method
parseInt() parses a string and returns a whole number. Spaces are allowed.
Only the first number is returned:
Example
parseInt("10");
// returns 10
parseInt("10.33");
// returns 10
parseInt("10 20 30");
// returns 10
parseInt("10 years");
// returns 10
parseInt("years 10");
// returns NaN
Try it yourself
If the number cannot be converted, NaN (Not a Number) is returned.
The parseFloat() Method
parseFloat() parses a string and returns a number. Spaces are allowed. Only
the first number is returned:
Example
parseFloat("10");
// returns 10
parseFloat("10.33");
// returns 10.33
parseFloat("10 20 30");
// returns 10
parseFloat("10 years");
// returns 10
parseFloat("years 10");
// returns NaN
Try it yourself
If the number cannot be converted, NaN (Not a Number) is returned.
The valueOf() Method
valueOf() returns a number as a number.
Example
var x = 123;
x.valueOf();
// returns 123 from variable x
(123).valueOf();
// returns 123 from literal 123
(100 + 23).valueOf();
// returns 123 from expression 100 + 23
Try it Yourself
In JavaScript, a number can be a primitive value (typeof = number) or an
object (typeof = object).
The valueOf() method is used internally in JavaScript to convert Number objects
to primitive values.
There is no reason to use it in your code.
In JavaScript, all data types have a valueOf() and a toString() method.
Complete JavaScript Number Reference
For a complete reference, go to our Complete JavaScript Number Reference.
The reference contains descriptions and examples of all Number properties and
methods.
JavaScript Math Object
Previous
Next Chapter
The Math object allows you to perform mathematical tasks on numbers.
The Math Object
The Math object allows you to perform mathematical tasks.
The Math object includes several mathematical methods.
One common use of the Math object is to create a random number:
Example
Math.random();
// returns a random number
Try it yourself
Math has no constructor. No methods have to create a Math object first.
Math.min() and Math.max()
Math.min() and Math.max() can be used to find the lowest or highest value in a
list of arguments:
Example
Math.min(0, 150, 30, 20, -8, -200);
// returns -200
Try it yourself
Example
Math.max(0, 150, 30, 20, -8, -200);
// returns 150
Try it yourself
Math.random()
Math.random() returns a random number between 0 (inclusive), and 1
(exclusive):
Example
Math.random();
// returns a random number
Try it Yourself
Math.random() always returns a number lower than 1.
Math.round()
Math.round() rounds a number to the nearest integer:
Example
Math.round(4.7);
// returns 5
Math.round(4.4);
// returns 4
Try it Yourself
Math.ceil()
Math.ceil() rounds a number up to the nearest integer:
Example
Math.ceil(4.4);
// returns 5
Try it Yourself
Math.floor()
Math.floor() rounds a number down to the nearest integer:
Example
Math.floor(4.7);
// returns 4
Try it Yourself
Math.floor() and Math.random() can be used together to return a random
number between 0 and 10:
Example
Math.floor(Math.random() * 11);
// returns a random number
between 0 and 10
Try it Yourself
Math Constants
JavaScript provides 8 mathematical constants that can be accessed with the
Math object:
Example
Math.E
// returns Euler's number
Math.PI
// returns PI
Math.SQRT2
// returns the square root of 2
Math.SQRT1_2
// returns the square root of 1/2
Math.LN2
// returns the natural logarithm of 2
Math.LN10
// returns the natural logarithm of 10
Math.LOG2E
// returns base 2 logarithm of E
Math.LOG10E
// returns base 10 logarithm of E
Try it yourself
Math Object Methods
Method
Description
abs(x)
Returns the absolute value of x
acos(x)
Returns the arccosine of x, in radians
asin(x)
Returns the arcsine of x, in radians
atan(x)
Returns the arctangent of x as a numeric value between -PI/2
and PI/2 radians
atan2(y,x)
Returns the arctangent of the quotient of its arguments
ceil(x)
Returns x, rounded upwards to the nearest integer
cos(x)
Returns the cosine of x (x is in radians)
exp(x)
Returns the value of Ex
floor(x)
Returns x, rounded downwards to the nearest integer
log(x)
Returns the natural logarithm (base E) of x
max(x,y,z,...,
Returns the number with the highest value
n)
min(x,y,z,...,
Returns the number with the lowest value
n)
pow(x,y)
Returns the value of x to the power of y
random()
Returns a random number between 0 and 1
round(x)
Rounds x to the nearest integer
sin(x)
Returns the sine of x (x is in radians)
sqrt(x)
Returns the square root of x
tan(x)
Returns the tangent of an angle
Complete Math Reference
For a complete reference, go to our complete Math object reference.
The reference contains descriptions and examples of all Math properties and
methods.
Test Yourself with Exercises!
Exercise 1
Exercise 2
Exercise 3
Exercise 4
JavaScript Dates
Previous
Next Chapter
The Date object lets you work with dates (years, months, days, hours,
minutes, seconds, and milliseconds)
JavaScript Date Formats
A JavaScript date can be written as a string:
Fri Sep 18 2015 16:47:48 GMT-0600 (Canada Central Standard Time)
or as a number:
1442616468042
Dates written as numbers, specifies the number of milliseconds since January 1,
1970, 00:00:00.
Displaying Dates
In this tutorial we use a script to display dates inside a <p> element with
id="demo":
Example
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Date();
</script>
Try it Yourself
The script above says: assign the value of Date() to the content (innerHTML) of
the element with id="demo".
You will learn how to display a date, in a more readable format, at the
bottom of this page.
Creating Date Objects
The Date object lets us work with dates.
A date consists of a year, a month, a day, an hour, a minute, a second, and
milliseconds.
Date objects are created with the new Date() constructor.
There are 4 ways of initiating a date:
new Date()
new Date(milliseconds)
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
Using new Date(), creates a new date object with the current date and time:
Example
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
Try it Yourself
Using new Date(date string), creates a new date object from the specified
date and time:
Example
<script>
var d = new Date("October 13, 2014 11:13:00");
document.getElementById("demo").innerHTML = d;
</script>
Try it Yourself
Valid date strings (date formats) are described in the next chapter.
Using new Date(number), creates a new date object as zero time plus the
number.
Zero time is 01 January 1970 00:00:00 UTC. The number is specified in
milliseconds:
Example
<script>
var d = new Date(86400000);
document.getElementById("demo").innerHTML = d;
</script>
Try it Yourself
JavaScript dates are calculated in milliseconds from 01 January, 1970
00:00:00 Universal Time (UTC). One day contains 86,400,000
millisecond.
Using new Date(7 numbers), creates a new date object with the specified
date and time:
The 7 numbers specify the year, month, day, hour, minute, second, and
millisecond, in that order:
Example
<script>
var d = new Date(99,5,24,11,33,30,0);
document.getElementById("demo").innerHTML = d;
</script>
Try it Yourself
Variants of the example above let us omit any of the last 4 parameters:
Example
<script>
var d = new Date(99,5,24);
document.getElementById("demo").innerHTML = d;
</script>
Try it Yourself
JavaScript counts months from 0 to 11. January is 0. December is 11.
Date Methods
When a Date object is created, a number of methods allow you to operate on
it.
Date methods allow you to get and set the year, month, day, hour, minute,
second, and millisecond of objects, using either local time or UTC (universal, or
GMT) time.
Date methods are covered in a later chapter.
Displaying Dates
When you display a date object in HTML, it is automatically converted to a
string, with the toString() method.
Example
<p id="demo"></p>
<script>
d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
Is the same as:
<p id="demo"></p>
<script>
d = new Date();
document.getElementById("demo").innerHTML = d.toString();
</script>
Try it Yourself
The toUTCString() method converts a date to a UTC string (a date display
standard).
Example
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toUTCString();
</script>
Try it Yourself
The toDateString() method converts a date to a more readable format:
Example
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
</script>
Try it Yourself
Date objects are static, not dynamic. The computer time is ticking, but
date objects, once created, are not.
Test Yourself with Exercises!
Exercise 1
Exercise 2
Exercise 3
JavaScript Date Formats
Previous
Next Chapter
Valid JavaScript Date Strings
There are generally three types of valid JavaScript date formats:
ISO Dates
Long Dates
Short Dates
JavaScript ISO Dates
The ISO 8601 syntax (YYYY-MM-DD) is the newest (and preferred) JavaScript
date format:
Example
var d = new Date("2015-03-25");
Try it Yourself
Or as: "2015-12" (YYYY-MM):
Example
var d = new Date("2015-03");
Try it Yourself
Or as "2015" (YYYY):
Example
var d = new Date("2015");
Try it Yourself
Or as "2015-12-24T12:00:00":
Example
var d = new Date("2015-03-25T12:00:00");
Try it Yourself
The T in the date string, between the date and time, indicates UTC time.
UTC (Universal Time Coordinated) is the same as GMT (Greenwich Mean
Time).
JavaScript Long Dates.
Long dates are most often written with a "MMM DD YYYY" syntax like this:
Example
var d = new Date("Mar 25 2015");
Try it Yourself
But, year, month, and day can be in any order:
Example
var d = new Date("25 Mar 2015");
Try it Yourself
Example
var d = new Date("2015 Mar 25");
Try it Yourself
And, month can be written in full (January), or abbreviated (Jan):
Example
var d = new Date("January 25 2015");
Try it Yourself
Example
var d = new Date("Jan 25 2015");
Try it Yourself
Commas are ignored. Names are case insensitive:
Example
var d = new Date("2015, JANUARY, 25");
Try it Yourself
JavaScript Short Dates.
Short dates are most often written with an "MM/DD/YYYY" syntax like this:
Example
var d = new Date("03/25/2015");
Try it Yourself
Either "/" or "-" can be used as a separator:
Example
var d = new Date("03-25-2015");
Try it Yourself
JavaScript will also accept "YYYY/MM/DD":
Example
var d = new Date("2015/03/25");
Try it Yourself
Month is written before day in all short date and ISO date formats.
Full Format
JavaScript will accept date strings in "full JavaScript format":
Example
var d = new Date("Wed Mar 25 2015 09:56:24 GMT+0100 (W. Europe
Standard Time)");
Try it Yourself
JavaScript will ignore errors both in the day name and in the time parentheses:
Example
var d = new Date("Fri Mar 25 2015 09:56:24 GMT+0100 (Tokyo
Time)");
Try it Yourself
JavaScript Date Methods
Previous
Next Chapter
Date methods let you get and set date values (years, months, days, hours,
minutes, seconds, milliseconds)
Date Get Methods
Get methods are used for getting a part of a date. Here are the most common
(alphabetically):
Method
Description
getDate()
Get the day as a number (1-31)
getDay()
Get the weekday as a number (0-6)
getFullYear()
Get the four digit year (yyyy)
getHours()
Get the hour (0-23)
getMilliseconds()
Get the milliseconds (0-999)
getMinutes()
Get the minutes (0-59)
getMonth()
Get the month (0-11)
getSeconds()
Get the seconds (0-59)
getTime()
Get the time (milliseconds since January 1, 1970)
The getTime() Method
getTime() returns the number of milliseconds since January 1, 1970:
Example
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
</script>
Try it Yourself
The getFullYear() Method
getFullYear() returns the year of a date as a four digit number:
Example
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
</script>
Try it Yourself
The getDay() Method
getDay() returns the weekday as a number (0-6):
Example
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getDay();
</script>
Try it Yourself
In JavaScript, the first of the week (0) means "Sunday", even if some
countries in the world consider the first day of the week to be "Monday".
You can use an array of names, and getDay() to return the weekday as a name:
Example
<script>
var d = new Date();
var days =
["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Sat
urday"];
document.getElementById("demo").innerHTML = days[d.getDay()];
</script>
Try it Yourself
Date Set Methods
Set methods are used for setting a part of a date. Here are the most common
(alphabetically):
Method
Description
setDate()
Set the day as a number (1-31)
setFullYear()
Set the year (optionally month and day)
setHours()
Set the hour (0-23)
setMilliseconds()
Set the milliseconds (0-999)
setMinutes()
Set the minutes (0-59)
setMonth()
Set the month (0-11)
setSeconds()
Set the seconds (0-59)
setTime()
Set the time (milliseconds since January 1, 1970)
The setFullYear() Method
setFullYear() sets a date object to a specific date. In this example, to January
14, 2020:
Example
<script>
var d = new Date();
d.setFullYear(2020, 0, 14);
document.getElementById("demo").innerHTML = d;
</script>
Try it Yourself
The setDate() Method
setDate() sets the day of the month (1-31):
Example
<script>
var d = new Date();
d.setDate(20);
document.getElementById("demo").innerHTML = d;
</script>
Try it Yourself
The setDate() method can also be used to add days to a date:
Example
<script>
var d = new Date();
d.setDate(d.getDate() + 50);
document.getElementById("demo").innerHTML = d;
</script>
Try it Yourself
If adding days, shifts the month or year, the changes are handled
automatically by the Date object.
Date Input - Parsing Dates
If you have a valid date string, you can use the Date.parse() method to
convert it to milliseconds.
Date.parse() returns the number of milliseconds between the date and
January 1, 1970:
Example
<script>
var msec = Date.parse("March 21, 2012");
document.getElementById("demo").innerHTML = msec;
</script>
Try it Yourself
You can then use the number of milliseconds to convert it to a date object:
Example
<script>
var msec = Date.parse("March 21, 2012");
var d = new Date(msec);
document.getElementById("demo").innerHTML = d;
</script>
Try it Yourself
Compare Dates
Dates can easily be compared.
The following example compares today's date with January 14, 2100:
Example
var today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(2100, 0, 14);
if (someday > today) {
text = "Today is before January 14, 2100.";
} else {
text = "Today is after January 14, 2100.";
document.getElementById("demo").innerHTML = text;
Try it Yourself
JavaScript counts months from 0 to 11. January is 0. December is 11.
Complete JavaScript Date Reference
For a complete reference, go to our Complete JavaScript Date Reference.
The reference contains descriptions and examples of all Date properties and
methods.
JavaScript Arrays
Previous
Next Chapter
JavaScript arrays are used to store multiple values in a single variable.
Displaying Arrays
In this tutorial we will use a script to display arrays inside a <p> element with
id="demo":
Example
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
The first line (in the script) creates an array named cars.
The second line "finds" the element with id="demo", and "displays" the array in
the "innerHTML" of it.
Try it Yourself
Create an array, and assign values to it:
Example
var cars = ["Saab", "Volvo", "BMW"];
Try it Yourself
Spaces and line breaks are not important. A declaration can span multiple lines:
Example
var cars = [
"Saab",
"Volvo",
"BMW"
];
Try it Yourself
Never put a comma after the last element (like "BMW",). The effect is
inconsistent across browsers.
What is an Array?
An array is a special variable, which can hold more than one value at a time.
If you have a list of items (a list of car names, for example), storing the cars in
single variables could look like this:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
However, what if you want to loop through the cars and find a specific one? And
what if you had not 3 cars, but 300?
The solution is an array!
An array can hold many values under a single name, and you can access the
values by referring to an index number.
Creating an Array
Using an array literal is the easiest way to create a JavaScript Array.
Syntax:
var array-name = [item1, item2, ...];
Example:
var cars = ["Saab", "Volvo", "BMW"];
Using the JavaScript Keyword new
The following example also creates an Array, and assigns values to it:
Example
var cars = new Array("Saab", "Volvo", "BMW");
Try it Yourself
The two examples above do exactly the same. There is no need to use
new Array().
For simplicity, readability and execution speed, use the first one (the
array literal method).
Access the Elements of an Array
You refer to an array element by referring to the index number.
This statement accesses the value of the first element in cars:
var name = cars[0];
This statement modifies the first element in cars:
cars[0] = "Opel";
[0] is the first element in an array. [1] is the second. Array indexes start
with 0.
You Can Have Different Objects in One
Array
JavaScript variables can be objects. Arrays are special kinds of objects.
Because of this, you can have variables of different types in the same Array.
You can have objects in an Array. You can have functions in an Array. You can
have arrays in an Array:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Arrays are Objects
Arrays are a special type of objects. The typeof operator in JavaScript returns
"object" for arrays.
But, JavaScript arrays are best described as arrays.
Arrays use numbers to access its "elements". In this example, person[0]
returns John:
Array:
var person = ["John", "Doe", 46];
Try it Yourself
Objects use names to access its "members". In this example, person.firstName
returns John:
Object:
var person = {firstName:"John", lastName:"Doe", age:46};
Try it Yourself
Array Properties and Methods
The real strength of JavaScript arrays are the built-in array properties and
methods:
Examples
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
Array methods are covered in the next chapter.
The length Property
The length property of an array returns the length of an array (the number of
array elements).
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;
// the length of fruits is 4
Try it Yourself
The length property is always one more than the highest array index.
Adding Array Elements
The easiest way to add a new element to an array is using the push method:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");
// adds a new element (Lemon)
to fruits
Try it Yourself
New element can also be added to an array using the length property:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";
// adds a new element
(Lemon) to fruits
Try it Yourself
Adding elements with high indexes can create undefined "holes" in an array:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon";
// adds a new element
(Lemon) to fruits
Try it Yourself
Looping Array Elements
The best way to loop through an array, is using a "for" loop:
Example
var index;
var fruits = ["Banana", "Orange", "Apple", "Mango"];
for
(index = 0; index < fruits.length; index++) {
text += fruits[index];
Try it Yourself
Associative Arrays
Many programming languages support arrays with named indexes.
Arrays with named indexes are called associative arrays (or hashes).
JavaScript does not support arrays with named indexes.
In JavaScript, arrays always use numbered indexes.
Example
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;
// person.length will return 3
var y = person[0];
// person[0] will return "John"
Try it Yourself
WARNING !!
If you use a named index, JavaScript will redefine the array to a standard
object.
After that, all array methods and properties will produce incorrect
results.
Example:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;
// person.length will return 0
var y = person[0];
// person[0] will return undefined
Try it Yourself
The Difference Between Arrays and Objects
In JavaScript, arrays use numbered indexes.
In JavaScript, objects use named indexes.
Arrays are a special kind of objects, with numbered indexes.
When to Use Arrays. When to use Objects.
JavaScript does not support associative arrays.
You should use objects when you want the element names to be strings
(text).
You should use arrays when you want the element names to be numbers.
Avoid new Array()
There is no need to use the JavaScript's built-in array constructor new Array().
Use [] instead.
These two different statements both create a new empty array named points:
var points = new Array();
// Bad
var points = [];
// Good
These two different statements both create a new array containing 6 numbers:
var points = new Array(40, 100, 1, 5, 25, 10)
// Bad
var points = [40, 100, 1, 5, 25, 10];
// Good
Try it Yourself
The new keyword complicates your code and produces nasty side effects:
var points = new Array(40, 100);
// Creates an array with two
elements (40 and 100)
What if I remove one of the elements?
var points = new Array(40);
// Creates an array with 40
undefined elements !!!!!
Try it Yourself
How to Recognize an Array
A common question is: How do I know if a variable is an array?
The problem is that the JavaScript operator typeof returns "object":
var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;
// typeof returns object
Try it Yourself
The typeof operator returns object because a JavaScript array is an object.
To solve this problem you can create your own isArray() function:
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
Try it Yourself
The function above always returns true if the argument is an array.
Or more precisely: it returns true if the object prototype of the argument is
"[object array]".
Test Yourself with Exercises!
Exercise 1
Exercise 2
Exercise 3
Exercise 4
JavaScript Array Methods
Exercise 5
Previous
Next Chapter
The strength of JavaScript arrays lies in the array methods.
Converting Arrays to Strings
In JavaScript, all objects have the valueOf() and toString() methods.
The valueOf() method is the default behavior for an array. It returns an array
as a string:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.valueOf();
Try it Yourself
For JavaScript arrays, valueOf() and toString() are equal.
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Try it Yourself
The join() method also joins all array elements into a string.
It behaves just like toString(), but you can specify the separator:
Example
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>
Try it Yourself
Popping and Pushing
When you work with arrays, it is easy to remove elements and add new
elements.
This is what popping and pushing is:
Popping items out of an array, or pushing items into an array.
Popping
The pop() method removes the last element from an array:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
// Removes the last element ("Mango")
from fruits
Try it Yourself
The pop() method returns the value that was "popped out":
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();
// the value of x is "Mango"
Try it Yourself
Pushing
The push() method adds a new element to an array (at the end):
Remember: [0] is the first element in an array. [1] is the second. Array
indexes start with 0.
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
//
Adds a new element ("Kiwi") to
fruits
Try it Yourself
The push() method returns the new array length:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi");
//
the value of x is 5
Try it Yourself
Shifting Elements
Shifting is equivalent to popping, working on the first element instead of the
last.
The shift() method removes the first element of an array, and "shifts" all other
elements one place up.
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
// Removes the first element "Banana"
from fruits
Try it Yourself
The unshift() method adds a new element to an array (at the beginning), and
"unshifts" older elements:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
// Adds a new element "Lemon" to
fruits
Try it Yourself
The shift() method returns the string that was "shifted out".
The unshift() method returns the new array length.
Changing Elements
Array elements are accessed using their index number:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";
// Changes the first element of fruits
to "Kiwi"
Try it Yourself
The length property provides an easy way to append a new element to an
array:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";
fruit
Try it Yourself
// Appends "Kiwi" to
Deleting Elements
Since JavaScript arrays are objects, elements can be deleted by using the
JavaScript operator delete:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
// Changes the first element in
fruits to undefined
Try it Yourself
Using delete on array elements leaves undefined holes in the array. Use
pop() or shift() instead.
Splicing an Array
The splice() method can be used to add new items to an array:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
Try it Yourself
The first parameter (2) defines the position where new elements should be
added (spliced in).
The second parameter (0) defines how many elements should be removed.
The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be
added.
Using splice() to Remove Elements
With clever parameter setting, you can use splice() to remove elements without
leaving "holes" in the array:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);
// Removes the first element of
fruits
Try it Yourself
The first parameter (0) defines the position where new elements should be
added (spliced in).
The second parameter (1) defines how many elements should be removed.
The rest of the parameters are omitted. No new elements will be added.
Sorting an Array
The sort() method sorts an array alphabetically:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
// Sorts the elements of fruits
Try it Yourself
Reversing an Array
The reverse() method reverses the elements in an array.
You can use it to sort an array in descending order:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
// Sorts the elements of fruits
fruits.reverse();
// Reverses the order of the elements
Try it Yourself
Numeric Sort
By default, the sort() function sorts values as strings.
This works well for strings ("Apple" comes before "Banana").
However, if numbers are sorted as strings, "25" is bigger than "100", because
"2" is bigger than "1".
Because of this, the sort() method will produce incorrect result when sorting
numbers.
You can fix this by providing a compare function:
Example
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
Try it Yourself
Use the same trick to sort an array descending:
Example
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
Try it Yourself
The Compare Function
The purpose of the compare function is to define an alternative sort order.
The compare function should return a negative, zero, or positive value,
depending on the arguments:
function(a, b){return a-b}
When the sort() function compares two values, it sends the values to the
compare function, and sorts the values according to the returned (negative,
zero, positive) value.
Example:
When comparing 40 and 100, the sort() method calls the compare
function(40,100).
The function calculates 40-100, and returns -60 (a negative value).
The sort function will sort 40 as a value lower than 100.
Find the Highest (or Lowest) Value
How to find the highest value in an array?
Example
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
// now points[0] contains the highest value
Try it Yourself
And the lowest:
Example
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
// now points[0] contains the lowest value
Try it Yourself
Joining Arrays
The concat() method creates a new array by concatenating two arrays:
Example
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias","Linus"];
var myChildren = myGirls.concat(myBoys);
// Concatenates
(joins) myGirls and myBoys
Try it Yourself
The concat() method can take any number of array arguments:
Example
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias","Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);
// Concatenates
arr1 with arr2 and arr3
Try it Yourself
Slicing an Array
The slice() method slices out a piece of an array into a new array:
Example
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
Try it Yourself
The slice() method selects elements starting at the start argument, and ends at,
but does not include, the end argument.
If the end argument is omitted, the slice() method slices out the rest of the
array:
Example
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
Try it Yourself
Complete Array Reference
For a complete reference, go to our Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and
methods.
Test Yourself with Exercises!
Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5
A JavaScript Boolean represents one of two values: true or false.
Boolean Values
Very often, in programming, you will need a data type that can only have one of
two values, like
YES / NO
ON / OFF
TRUE / FALSE
For this, JavaScript has a Boolean data type. It can only take the values true
or false.
The Boolean() Function
You can use the Boolean() function to find out if an expression (or a variable) is
true:
Example
Boolean(10 > 9)
// returns true
Try it yourself
Or even easier:
Example
(10 > 9)
// also returns true
10 > 9
// also returns true
Try it yourself
Comparisons and Conditions
The chapter JS Comparisons gives a full overview of comparison operators.
The chapter JS Conditions gives a full overview of conditional statements.
Here are some examples:
Oper
Description
Example
ator
==
equal to
if (day == "Monday")
>
greater than
if (salary > 9000)
<
less than
if (age < 18)
The Boolean value of an expression is the fundament for JavaScript
comparisons and conditions.
Everything With a "Real" Value is True
Examples
100
3.14
-15
"Hello"
"false"
7 + 1 + 3.14
5 < 6
Try it yourself
Everything Without a "Real" is False
The Boolean value of 0 (zero) is false:
var x = 0;
Boolean(x);
// returns false
Try it yourself
The Boolean value of -0 (minus zero) is false:
var x = -0;
Boolean(x);
// returns false
Try it yourself
The Boolean value of "" (empty string) is false:
var x = "";
Boolean(x);
// returns false
Try it yourself
The Boolean value of undefined is false:
var x;
Boolean(x);
// returns false
Try it yourself
The Boolean value of null is false:
var x = null;
Boolean(x);
// returns false
Try it yourself
The Boolean value of false is (you guessed it) false:
var x = false;
Boolean(x);
// returns false
Try it yourself
The Boolean value of NaN is false:
var x = 10 / "H";
Boolean(x);
// returns false
Try it yourself
Boolean Properties and Methods
Primitive values, like true and false, cannot have properties or methods
(because they are not objects).
But with JavaScript, methods and properties are also available to primitive
values, because JavaScript treats primitive values as objects when executing
methods and properties.
Complete Boolean Reference
For a complete reference, go to our Complete JavaScript Boolean Reference.
The reference contains descriptions and examples of all Boolean properties and
methods.
JavaScript Comparison and Logical
Operators
Previous
Next Chapter
Comparison and Logical operators are used to test for true or false.
Comparison Operators
Comparison operators are used in logical statements to determine equality or
difference between variables or values.
Given that x = 5, the table below explains the comparison operators:
Opera
Description
tor
==
===
equal to
equal value and equal type
Comparin
Return
Try it
x == 8
false
Try it
x == 5
true
Try it
x == "5"
true
Try it
x === 5
true
Try it
x === "5"
false
Try it
!=
not equal
x != 8
true
Try it
!==
not equal value or not equal
x !== "5"
true
Try it
x !== 5
false
Try it
type
>
greater than
x>8
false
Try it
<
less than
x<8
true
Try it
>=
greater than or equal to
x >= 8
false
Try it
<=
less than or equal to
x <= 8
true
Try it
How Can it be Used
Comparison operators can be used in conditional statements to compare values
and take action depending on the result:
if (age < 18) text = "Too young";
You will learn more about the use of conditional statements in the next chapter
of this tutorial.
Logical Operators
Logical operators are used to determine the logic between variables or values.
Given that x = 6 and y = 3, the table below explains the logical operators:
Opera
Description
Example
Try it
tor
&&
and
(x < 10 && y > 1) is true
Try it
||
or
(x == 5 || y == 5) is false
Try it
not
!(x == y) is true
Try it
Conditional (Ternary) Operator
JavaScript also contains a conditional operator that assigns a value to a variable
based on some condition.
Syntax
variablename = (condition) ? value1:value2
Example
var voteable = (age < 18) ? "Too young":"Old enough";
Try it Yourself
If the variable age is a value below 18, the value of the variable voteable will be
"Too young", otherwise the value of voteable will be "Old enough".
Comparing Different Types
Comparing data of different types may give unexpected results.
When comparing a string with a numeric constant, JavaScript will treat the
number as a string when doing the comparison. The result of this is commonly
not the same as a numeric comparison.
When comparing two strings, "2" will be greater than "12", because
(alphabetically) 1 is less than 2.
To secure a proper result, variables should be converted to the proper type
before comparison:
age = Number(age);
if (isNaN(age)) {
voteable = "Error in input";
} else {
voteable = (age < 18) ? "Too young" : "Old enough";
Try it Yourself
The Number() function converts an empty string to 0, and a non numeric
string to NaN.
JavaScript Bitwise Operators
Bit operators work on 32-bit numbers.
Any numeric operand in the operation is converted into a 32-bit number.
The result is converted back to a JavaScript number.
Example
x = 5 & 1;
The result in x:
Try it Yourself
Opera
Description
Example
Same as
Result
Decimal
tor
&
AND
x=5&1
0101 & 0001
0001
OR
x=5|1
0101 | 0001
0101
NOT
x=~5
1010
10
XOR
x=5^1
0101 ^ 0001
0100
<<
Left shift
x = 5 << 1
0101 << 1
1010
10
>>
Right shift
x = 5 >> 1
0101 >> 1
0010
~0101
The examples above uses 4 bits unsigned examples. But JavaScript uses
32-bit signed numbers.
Because of this, in JavaScript, ~ 5 will not return 10. It will return -6.
~00000000000000000000000000000101 will return
11111111111111111111111111111010
Test Yourself with Exercises!
Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6
JavaScript If...Else Statements
Previous
Next Chapter
Conditional statements are used to perform different actions based on
different conditions.
Conditional Statements
Very often when you write code, you want to perform different actions for
different decisions.
You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
Use
Use
Use
Use
if to specify a block of code to be executed, if a specified condition is true
else to specify a block of code to be executed, if the same condition is false
else if to specify a new condition to test, if the first condition is false
switch to specify many alternative blocks of code to be executed
The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a
condition is true.
Syntax
if (condition) {
block of code to be executed if the condition is true
}
Note that if is in lowercase letters. Uppercase letters (If or IF) will
generate a JavaScript error.
Example
Make a "Good day" greeting if the hour is less than 18:00:
if (hour < 18) {
greeting = "Good day";
The result of greeting will be:
Good day
Try it yourself
The else Statement
Use the else statement to specify a block of code to be executed if the condition
is false.
if (condition) {
block of code to be executed if the condition is true
} else {
block of code to be executed if the condition is false
}
Example
If the hour is less than 18, create a "Good day" greeting, otherwise "Good
evening":
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
The result of greeting will be:
Good day
Try it yourself
The else if Statement
Use the else if statement to specify a new condition if the first condition is
false.
Syntax
if (condition1) {
block of code to be executed if condition1 is true
} else if (condition2) {
block of code to be executed if the condition1 is false and
condition2 is true
} else {
block of code to be executed if the condition1 is false and
condition2 is false
Example
If time is less than 10:00, create a "Good morning" greeting, if not, but time is
less than 20:00, create a "Good day" greeting, otherwise a "Good evening":
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
The result of greeting will be:
Good day
Try it yourself
More Examples
Random link
This example will write a link to either W3Schools or to the World Wildlife
Foundation (WWF). By using a random number, there is a 50% chance for each
of the links.
Test Yourself with Exercises!
Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6
JavaScript Switch Statement
Previous
Next Chapter
The switch statement is used to perform different actions based on different
conditions.
The JavaScript Switch Statement
Use the switch statement to select one of many blocks of code to be executed.
Syntax
switch(expression) {
case n:
code block
break;
case n:
code block
break;
default:
default code block
}
This is how it works:
The switch expression is evaluated once.
The value of the expression is compared with the values of each case.
If there is a match, the associated block of code is executed.
Example
The getDay() method returns the weekday as a number between 0 and 6.
(Sunday=0, Monday=1, Tuesday=2 ..)
Use the weekday number to calculate weekday name:
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
The result of day will be:
Monday
Try it yourself
The break Keyword
When the JavaScript code interpreter reaches a break keyword, it breaks out of
the switch block.
This will stop the execution of more code and case testing inside the block.
When a match is found, and the job is done, it's time for a break.
There is no need for more testing.
The default Keyword
The default keyword specifies the code to run if there is no case match:
Example
The getDay() method returns the weekday as a number between 0 and 6.
If today is neither Saturday (6) nor Sunday (0), write a default message:
switch (new Date().getDay()) {
case 6:
text = "Today is Saturday";
break;
case 0:
text = "Today is Sunday";
break;
default:
text = "Looking forward to the Weekend";
The result of text will be:
Looking forward to the Weekend
Try it yourself
Common Code and Fall-Through
Sometimes, in a switch block, you will want different cases to use the same
code, or fall-through to a common default.
Note from the next example, that cases can share the same code block, and
that the default case does not have to be the last case in a switch block:
Example
switch (new Date().getDay()) {
case 1:
case 2:
case 3:
default:
text = "Looking forward to the Weekend";
break;
case 4:
case 5:
text = "Soon it is Weekend";
break;
case 0:
case 6:
text = "It is Weekend";
Try it yourself
If default is not the last case in the switch block, remember to end it with
a break.
Test Yourself with Exercises!
Exercise 1
Exercise 2
Exercise 3
Exercise 4
JavaScript For Loop
Previous
Next Chapter
Loops can execute a block of code a number of times.
JavaScript Loops
Loops are handy, if you want to run the same code over and over again, each
time with a different value.
Often this is the case when working with arrays:
Instead of writing:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
You can write:
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
Try it Yourself
Different Kinds of Loops
JavaScript supports different kinds of loops:
for - loops through a block of code a number of times
for/in - loops through the properties of an object
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
The For Loop
The for loop is often the tool you will use when you want to create a loop.
The for loop has the following syntax:
for (statement 1; statement 2; statement 3) {
code block to be executed
}
Statement 1 is executed before the loop (the code block) starts.
Statement 2 defines the condition for running the loop (the code block).
Statement 3 is executed each time after the loop (the code block) has been
executed.
Example
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
Try it yourself
From the example above, you can read:
Statement 1 sets a variable before the loop starts (var i = 0).
Statement 2 defines the condition for the loop to run (i must be less than 5).
Statement 3 increases a value (i++) each time the code block in the loop has
been executed.
Statement 1
Normally you will use statement 1 to initiate the variable used in the loop (i =
0).
This is not always the case, JavaScript doesn't care. Statement 1 is optional.
You can initiate many values in statement 1 (separated by comma):
Example
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
Try it Yourself
And you can omit statement 1 (like when your values are set before the loop
starts):
Example
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
Try it Yourself
Statement 2
Often statement 2 is used to evaluate the condition of the initial variable.
This is not always the case, JavaScript doesn't care. Statement 2 is also
optional.
If statement 2 returns true, the loop will start over again, if it returns false, the
loop will end.
If you omit statement 2, you must provide a break inside the loop.
Otherwise the loop will never end. This will crash your browser. Read
about breaks in a later chapter of this tutorial.
Statement 3
Often statement 3 increases the initial variable.
This is not always the case, JavaScript doesn't care, and statement 3 is
optional.
Statement 3 can do anything like negative increment (i--), positive increment (i
= i + 15), or anything else.
Statement 3 can also be omitted (like when you increment your values inside
the loop):
Example
var i = 0;
var len = cars.length;
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
Try it Yourself
The For/In Loop
The JavaScript for/in statement loops through the properties of an object:
Example
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
text += person[x];
Try it yourself
The While Loop
The while loop and the do/while loop will be explained in the next chapter.
Test Yourself with Exercises!
Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6
JavaScript While Loop
Previous
Next Chapter
Loops can execute a block of code as long as a specified condition is true.
The While Loop
The while loop loops through a block of code as long as a specified condition is
true.
Syntax
while (condition) {
code block to be executed
}
Example
In the following example, the code in the loop will run, over and over again, as
long as a variable (i) is less than 10:
Example
while (i < 10) {
text += "The number is " + i;
i++;
Try it yourself
If you forget to increase the variable used in the condition, the loop will
never end. This will crash your browser.
The Do/While Loop
The do/while loop is a variant of the while loop. This loop will execute the code
block once, before checking if the condition is true, then it will repeat the loop
as long as the condition is true.
Syntax
do {
code block to be executed
}
while (condition);
Example
The example below uses a do/while loop. The loop will always be executed at
least once, even if the condition is false, because the code block is executed
before the condition is tested:
Example
do {
text += "The number is " + i;
i++;
while (i < 10);
Try it yourself
Do not forget to increase the variable used in the condition, otherwise the loop
will never end!
Comparing For and While
If you have read the previous chapter, about the for loop, you will discover that
a while loop is much the same as a for loop, with statement 1 and statement 3
omitted.
The loop in this example uses a for loop to collect the car names from the cars
array:
Example
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
for (;cars[i];) {
text += cars[i] + "<br>";
i++;
Try it Yourself
The loop in this example uses a while loop to collect the car names from the
cars array:
Example
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
while (cars[i]) {
text += cars[i] + "<br>";
i++;
Try it Yourself
Test Yourself with Exercises!
Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5
JavaScript Break and Continue
Previous
Next Chapter
The break statement "jumps out" of a loop.
The continue statement "jumps over" one iteration in the loop.
The Break Statement
You have already seen the break statement used in an earlier chapter of this
tutorial. It was used to "jump out" of a switch() statement.
The break statement can also be used to jump out of a loop.
The break statement breaks the loop and continues executing the code after
the loop (if any):
Example
for (i = 0; i < 10; i++) {
if (i === 3) { break; }
text += "The number is " + i + "<br>";
Try it yourself
The Continue Statement
The continue statement breaks one iteration (in the loop), if a specified
condition occurs, and continues with the next iteration in the loop.
This example skips the value of 3:
Example
for (i = 0; i < 10; i++) {
if (i === 3) { continue; }
text += "The number is " + i + "<br>";
Try it yourself
JavaScript Labels
To label JavaScript statements you precede the statements with a label name
and a colon:
label:
statements
The break and the continue statements are the only JavaScript statements that
can "jump out of" a code block.
Syntax:
break labelname;
continue labelname;
The continue statement (with or without a label reference) can only be used to
skip one loop iteration.
The break statement, without a label reference, can only be used to jump out
of a loop or a switch.
With a label reference, the break statement can be used to jump out of any
code block:
Example
var cars = ["BMW", "Volvo", "Saab", "Ford"];
list: {
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
break list;
text += cars[4] + "<br>";
text += cars[5] + "<br>";
Try it Yourself
A code block is a block of code between { and }.
Test Yourself with Exercises!
Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5
JavaScript Type Conversion
Previous
Next Chapter
Number() converts to a Number, String() converts to a String, Boolean()
converts to a Boolean.
JavaScript Data Types
In JavaScript there are 5 different data types that can contain values:
string
number
boolean
object
function
There are 3 types of objects:
Object
Date
Array
And 2 data types that cannot contain values:
null
undefined
The typeof Operator
You can use the typeof operator to find the data type of a JavaScript variable.
Example
typeof "John"
// Returns string
typeof 3.14
// Returns number
typeof NaN
// Returns number
typeof false
// Returns boolean
typeof [1,2,3,4]
// Returns object
typeof {name:'John', age:34}
// Returns object
typeof new Date()
// Returns object
typeof function () {}
// Returns function
typeof myCar
// Returns undefined (if myCar is
not declared)
typeof null
// Returns object
Try it Yourself
Please observe:
The
The
The
The
The
data
data
data
data
data
type
type
type
type
type
of
of
of
of
of
NaN is number
an array is object
a date is object
null is object
an undefined variable is undefined
You cannot use typeof to determine if a JavaScript object is an array (or
a date).
The Data Type of typeof
The typeof operator is not a variable. It is an operator. Operators ( + - * / ) do
not have any data type.
But, the typeof operator always returns a string containing the type of the
operand.
The constructor Property
The constructor property returns the constructor function for all JavaScript
variables.
Example
"John".constructor
// Returns function String()
{ [native code] }
(3.14).constructor
// Returns function Number()
{ [native code] }
false.constructor
// Returns function Boolean()
{ [native code] }
[1,2,3,4].constructor
// Returns function Array()
{ [native code] }
{name:'John', age:34}.constructor
// Returns function Object()
{ [native code] }
new Date().constructor
// Returns function Date()
{ [native code] }
function () {}.constructor
// Returns function Function()
{ [native code] }
Try it Yourself
You can check the constructor property to find out if an object is an Array
(contains the word "Array"):
Example
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
Try it Yourself
You can check the constructor property to find out if an object is a Date
(contains the word "Date"):
Example
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
Try it Yourself
JavaScript Type Conversion
JavaScript variables can be converted to a new variable and another data type:
By the use of a JavaScript function
Automatically by JavaScript itself
Converting Numbers to Strings
The global method String() can convert numbers to strings.
It can be used on any type of numbers, literals, variables, or expressions:
Example
String(x)
// returns a string from a number variable x
String(123)
// returns a string from a number literal 123
String(100 + 23)
// returns a string from a number from an
expression
Try it Yourself
The Number method toString() does the same.
Example
x.toString()
(123).toString()
(100 + 23).toString()
Try it Yourself
In the chapter Number Methods, you will find more methods that can be used to
convert numbers to strings:
Method
toExponential()
Description
Returns a string, with a number rounded and written
using exponential notation.
toFixed()
Returns a string, with a number rounded and written with
a specified number of decimals.
toPrecision()
Returns a string, with a number written with a specified
length
Converting Booleans to Strings
The global method String() can convert booleans to strings.
String(false)
String(true)
// returns "false"
// returns "true"
The Boolean method toString() does the same.
false.toString()
// returns "false"
true.toString()
// returns "true"
Converting Dates to Strings
The global method String() can convert dates to strings.
String(Date())
// returns Thu Jul 17 2014 15:38:19 GMT+0200 (W.
Europe Daylight Time)
The Date method toString() does the same.
Example
Date().toString()
// returns Thu Jul 17 2014 15:38:19 GMT+0200
(W. Europe Daylight Time)
In the chapter Date Methods, you will find more methods that can be used to
convert dates to strings:
Method
getDate()
Description
Get the day as a number (1-31)
getDay()
Get the weekday a number (0-6)
getFullYear()
Get the four digit year (yyyy)
getHours()
Get the hour (0-23)
getMilliseconds()
Get the milliseconds (0-999)
getMinutes()
Get the minutes (0-59)
getMonth()
Get the month (0-11)
getSeconds()
Get the seconds (0-59)
getTime()
Get the time (milliseconds since January 1, 1970)
Converting Strings to Numbers
The global method Number() can convert strings to numbers.
Strings containing numbers (like "3.14") convert to numbers (like 3.14).
Empty strings convert to 0.
Anything else converts to NaN (Not a number).
Number("3.14")
// returns 3.14
Number(" ")
// returns 0
Number("")
// returns 0
Number("99 88")
// returns NaN
In the chapter Number Methods, you will find more methods that can be used to
convert strings to numbers:
Method
Description
parseFloat()
Parses a string and returns a floating point number
parseInt()
Parses a string and returns an integer
The Unary + Operator
The unary + operator can be used to convert a variable to a number:
Example
var y = "5";
// y is a string
var x = + y;
// x is a number
Try it Yourself
If the variable cannot be converted, it will still become a number, but with the
value NaN (Not a number):
Example
var y = "John";
// y is a string
var x = + y;
// x is a number (NaN)
Try it Yourself
Converting Booleans to Numbers
The global method Number() can also convert booleans to numbers.
Number(false)
// returns 0
Number(true)
// returns 1
Converting Dates to Numbers
The global method Number() can be used to convert dates to numbers.
d = new Date();
Number(d)
// returns 1404568027739
The date method getTime() does the same.
d = new Date();
d.getTime()
// returns 1404568027739
Automatic Type Conversion
When JavaScript tries to operate on a "wrong" data type, it will try to convert
the value to a "right" type.
The result is not always what you expect:
5 + null
// returns 5
"5" + null
// returns "5null"
because null is converted to 0
because null is converted to
"null"
"5" + 2
// returns 52
because 2 is converted to "2"
"5" - 2
// returns 3
because "5" is converted to 5
"5" * "2"
// returns 10
because "5" and "2" are converted
to 5 and 2
Try it Yourself
Automatic String Conversion
JavaScript automatically calls the variable's toString() function when you try to
"output" an object or a variable:
document.getElementById("demo").innerHTML = myVar;
// if myVar = {name:"Fjohn"}
// toString converts to "[object
Object]"
// if myVar = [1,2,3,4]
// toString converts to "1,2,3,4"
// if myVar = new Date()
// toString converts to "Fri Jul 18
2014 09:08:55 GMT+0200"
Numbers and booleans are also converted, but this is not very visible:
// if myVar = 123
// if myVar = true
// toString converts to "123"
// toString converts to "true"
// if myVar = false
// toString converts to "false"
JavaScript Type Conversion Table
This table shows the result of converting different JavaScript values to Number,
String, and Boolean:
Original
Converted
Converted
Converted
Value
to Number
to String
to Boolean
Try it
false
"false"
false
Try it
true
"true"
true
Try it
"0"
false
Try it
"1"
true
Try it
"0"
"0"
true
Try it
"1"
"1"
true
Try it
NaN
NaN
"NaN"
false
Try it
Infinity
Infinity
"Infinity"
true
Try it
-Infinity
-Infinity
"-Infinity"
true
Try it
""
""
false
Try it
"20"
20
"20"
true
Try it
"twenty"
NaN
"twenty"
true
Try it
[]
""
true
Try it
[20]
20
"20"
true
Try it
[10,20]
NaN
"10,20"
true
Try it
["twenty"]
NaN
"twenty"
true
Try it
["ten","twenty"]
NaN
"ten,twenty"
true
Try it
function(){}
NaN
"function(){}"
true
Try it
{}
NaN
"[object Object]"
true
Try it
null
"null"
false
Try it
undefined
NaN
"undefined"
false
Try it
Values in quotes indicate string values.
Red values indicate values (some) programmers might not expect.
JavaScript Regular Expressions
Previous
Next Chapter
A regular expression is a sequence of characters that forms a search pattern.
The search pattern can be used for text search and text replace operations.
What Is a Regular Expression?
A regular expression is a sequence of characters that forms a search pattern.
When you search for data in a text, you can use this search pattern to describe
what you are searching for.
A regular expression can be a single character, or a more complicated pattern.
Regular expressions can be used to perform all types of text search and text
replace operations.
Syntax
/pattern/modifiers;
Example
var patt = /w3schools/i;
Example explained:
/w3schools/i is a regular expression.
w3schools is a pattern (to be used in a search).
i is a modifier (modifies the search to be case-insensitive).
Using String Methods
In JavaScript, regular expressions are often used with the two string methods:
search() and replace().
The search() method uses an expression to search for a match, and returns
the position of the match.
The replace() method returns a modified string where the pattern is replaced.
Using String search() With a Regular
Expression
Example
Use a regular expression to do a case-insensitive search for "w3schools" in a
string:
var str = "Visit W3Schools";
var n = str.search(/w3schools/i);
The result in n will be:
Try it Yourself
Using String search() With String
The search method will also accept a string as search argument. The string
argument will be converted to a regular expression:
Example
Use a string to do a search for "W3schools" in a string:
var str = "Visit W3Schools!";
var n = str.search("W3Schools");
Try it Yourself
Use String replace() With a Regular
Expression
Example
Use a case insensitive regular expression to replace Microsoft with W3Schools in
a string:
var
str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3Schools");
The result in res will be:
Visit W3Schools!
Try it Yourself
Using String replace() With a String
The replace() method will also accept a string as search argument:
var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "W3Schools");
Try it Yourself
Did You Notice?
Regular expression arguments (instead of string arguments) can be used
in the methods above.
Regular expressions can make your search much more powerful (case
insensitive for example).
Regular Expression Modifiers
Modifiers can be used to perform case-insensitive more global searches:
Modifier
Description
Perform case-insensitive matching
Perform a global match (find all matches rather than
stopping after the first match)
Perform multiline matching
Regular Expression Patterns
Brackets are used to find a range of characters:
Expression
[abc]
Description
Find any of the characters between the brackets
[0-9]
Find any of the digits between the brackets
(x|y)
Find any of the alternatives separated with |
Metacharacters are characters with a special meaning:
Metacharacte
Description
\d
Find a digit
\s
Find a whitespace character
\b
Find a match at the beginning or at the end of a word
\uxxxx
Find the Unicode character specified by the hexadecimal
number xxxx
Quantifiers define quantities:
Quantifier
Description
n+
Matches any string that contains at least one n
n*
Matches any string that contains zero or more occurrences
of n
n?
Matches any string that contains zero or one occurrences of
n
Using the RegExp Object
In JavaScript, the RegExp object is a regular expression object with predefined
properties and methods.
Using test()
The test() method is a RegExp expression method.
It searches a string for a pattern, and returns true or false, depending on the
result.
The following example searches a string for the character "e":
Example
var patt = /e/;
patt.test("The best things in life are free!");
Since there is an "e" in the string, the output of the code above will be:
true
Try it yourself
You don't have to put the regular expression in a variable first. The two lines
above can be shortened to one:
/e/.test("The best things in life are free!");
Using exec()
The exec() method is a RegExp expression method.
It searches a string for a specified pattern, and returns the found text.
If no match is found, it returns null.
The following example searches a string for the character "e":
Example 1
/e/.exec("The best things in life are free!");
Since there is an "e" in the string, the output of the code above will be:
Try it yourself
Complete RegExp Reference
For a complete reference, go to our Complete JavaScript RegExp Reference.
The reference contains descriptions and examples of all RegExp properties and
methods.
JavaScript Errors - Throw and Try to
Catch
Previous
Next Chapter
The try statement lets you test a block of code for errors.
The catch statement lets you handle the error.
The throw statement lets you create custom errors.
The finally statement lets you execute code, after try and catch, regardless
of the result.
Errors Will Happen!
When executing JavaScript code, different errors can occur.
Errors can be coding errors made by the programmer, errors due to wrong
input, and other unforeseeable things:
Example
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
catch(err) {
document.getElementById("demo").innerHTML = err.message;
</script>
</body>
</html>
Try it yourself
In the example above we have made a typo in the code (in the try block).
The catch block catches the error, and executes code to handle it.
JavaScript try and catch
The try statement allows you to define a block of code to be tested for errors
while it is being executed.
The catch statement allows you to define a block of code to be executed, if an
error occurs in the try block.
The JavaScript statements try and catch come in pairs:
try {
Block of code to try
catch(err) {
Block of code to handle errors
JavaScript can Raise Errors
When an error occurs, JavaScript will normally stop, and generate an error
message.
The technical term for this is: JavaScript will raise (or throw) an exception.
The throw Statement
The throw statement allows you to create a custom error.
Technically you can raise (throw) an exception.
The exception can be a JavaScript String, a Number, a Boolean or an Object:
throw "Too big";
// throw a text
throw 500;
// throw a number
If you use throw together with try and catch, you can control program flow
and generate custom error messages.
Input Validation Example
This example examines input. If the value is wrong, an exception (err) is
thrown.
The exception (err) is caught by the catch statement and a custom error
message is displayed:
<!DOCTYPE html>
<html>
<body>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="number" min="5" max="10" step="1">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="message"></p>
<script>
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "empty";
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too high";
catch(err) {
message.innerHTML = "Input is " + err;
</script>
</body>
</html>
Try it yourself
The finally Statement
The finally statement lets you execute code, after try and catch, regardless of
the result:
try {
Block of code to try
catch(err) {
Block of code to handle errors
finally {
Block of code to be executed regardless of the try / catch
result
Example
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "is empty";
if(isNaN(x)) throw "is not a number";
x = Number(x);
if(x > 10) throw "is too high";
if(x < 5) throw "is too low";
catch(err) {
message.innerHTML = "Error: " + err + ".";
finally {
document.getElementById("demo").value = "";
Try it yourself
JavaScript Debugging
Previous
Next Chapter
You will soon get lost, writing JavaScript code without a debugger.
JavaScript Debugging
It is difficult to write JavaScript code without a debugger.
Your code might contain syntax errors, or logical errors, that are difficult to
diagnose.
Often, when JavaScript code contains errors, nothing will happen. There are no
error messages, and you will get no indications where to search for errors.
Normally, errors will happen, every time you try to write some new
JavaScript code.
JavaScript Debuggers
Searching for errors in programming code is called code debugging.
Debugging is not easy. But fortunately, all modern browsers have a built-in
debugger.
Built-in debuggers can be turned on and off, forcing errors to be reported to the
user.
With a debugger, you can also set breakpoints (places where code execution can
be stopped), and examine variables while the code is executing.
Normally, otherwise follow the steps at the bottom of this page, you activate
debugging in your browser with the F12 key, and select "Console" in the
debugger menu.
The console.log() Method
If your browser supports debugging, you can use console.log() to display
JavaScript values in the debugger window:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
Try it Yourself
Setting Breakpoints
In the debugger window, you can set breakpoints in the JavaScript code.
At each breakpoint, JavaScript will stop executing, and let you examine
JavaScript values.
After examining values, you can resume the execution of code (typically with a
play button).
The debugger Keyword
The debugger keyword stops the execution of JavaScript, and calls (if
available) the debugging function.
This has the same function as setting a breakpoint in the debugger.
If no debugging is available, the debugger statement has no effect.
With the debugger turned on, this code will stop executing before it executes
the third line.
Example
var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;
Try it Yourself
Major Browsers' Debugging Tools
Normally, you activate debugging in your browser with F12, and select
"Console" in the debugger menu.
Otherwise follow these steps:
Chrome
Open the browser.
From the menu, select tools.
From tools, choose developer tools.
Finally, select Console.
Firefox Firebug
Open the browser.
Go to the web page:
http://www.getfirebug.com
Follow the instructions how to:
install Firebug
Internet Explorer
Open the browser.
From the menu, select tools.
From tools, choose developer tools.
Finally, select Console.
Opera
Open the browser.
Go to the webpage:
http://dev.opera.com
Follow the instructions how to:
add a Developer Console button to your toolbar.
Safari Firebug
Open the browser.
Go to the webpage:
http://extensions.apple.com
Follow the instructions how to:
install Firebug Lite.
Safari Develop Menu
Go to Safari, Preferences, Advanced in the main menu.
Check "Enable Show Develop menu in menu bar".
When the new option "Develop" appears in the menu:
Choose "Show Error Console".
Did You Know?
Debugging is the process of testing, finding, and reducing bugs (errors)
in computer programs.
The first known computer bug was a real bug (an insect), stuck in the
electronics.
JavaScript Hoisting
Previous
Next Chapter
Hoisting is JavaScript's default behavior of moving declarations to the top.
JavaScript Declarations are Hoisted
In JavaScript, a variable can be declared after it has been used.
In other words; a variable can be used before it has been declared.
Example 1 gives the same result as Example 2:
Example 1
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;
// Display x in the
element
var x; // Declare x
Try it yourself
Example 2
var x; // Declare x
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;
// Display x in the
element
Try it yourself
To understand this, you have to understand the term "hoisting".
Hoisting is JavaScript's default behavior of moving all declarations to the top of
the current scope (to the top of the current script or the current function).
JavaScript Initializations are Not Hoisted
JavaScript only hoists declarations, not initializations.
Example 1 does not give the same result as Example 2:
Example 1
var x = 5; // Initialize x
var y = 7; // Initialize y
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;
// Display x and y
Try it yourself
Example 2
var x = 5; // Initialize x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;
var y = 7; // Initialize y
// Display x and y
Try it yourself
Does it make sense that y is undefined in the last example?
This is because only the declaration (var y), not the initialization (=7) is hoisted
to the top.
Because of hoisting, y has been declared before it is used, but because
initializations are not hoisted, the value of y is undefined.
Example 2 is the same as writing:
Example
var x = 5; // Initialize x
var y;
// Declare y
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;
y = 7;
// Assign 7 to y
Try it yourself
// Display x and y
Declare Your Variables At the Top !
Hoisting is (to many developers) an unknown or overlooked behavior of
JavaScript.
If a developer doesn't understand hoisting, programs may contain bugs
(errors).
To avoid bugs, always declare all variables at the beginning of every scope.
Since this is how JavaScript interprets the code, it is always a good rule.
JavaScript in strict mode does not allow variables to be used if they are
not declared.
Study "use strict" in the next chapter.
JavaScript Use Strict
Previous
Next Chapter
"use strict"; Defines that JavaScript code should be executed in "strict
mode".
The "use strict" Directive
The "use strict" directive is new in JavaScript 1.8.5 (ECMAScript version 5).
It is not a statement, but a literal expression, ignored by earlier versions of
JavaScript.
The purpose of "use strict" is to indicate that the code should be executed in
"strict mode".
With strict mode, you can not, for example, use undeclared variables.
Strict mode is supported in:
Internet Explorer from version 10. Firefox from version 4.
Chrome from version 13. Safari from version 5.1. Opera from version 12.
Declaring Strict Mode
Strict mode is declared by adding "use strict"; to the beginning of a JavaScript
file, or a JavaScript function.
Declared at the beginning of a JavaScript file, it has global scope (all code will
execute in strict mode):
Example
"use strict";
x = 3.14;
// This will cause an error
Try it Yourself
Example
"use strict";
myFunction();
function myFunction() {
y = 3.14;
// This will also cause an error
Try it Yourself
Declared inside a function, it has local scope (only the code inside the function
is in strict mode):
x = 3.14;
// This will not cause an error.
myFunction();
function myFunction() {
"use strict";
y = 3.14;
// This will cause an error
Try it Yourself
The "use strict"; Syntax
The syntax, for declaring strict mode, was designed to be compatible with older
versions of JavaScript.
Compiling a numeric literal (4 + 5;) or a string literal ("John Doe";) in a
JavaScript program has no side effects. It simply compiles to a non existing
variable and dies.
So "use strict"; only matters to new compilers that "understand" the meaning of
it.
Why Strict Mode?
Strict mode makes it easier to write "secure" JavaScript.
Strict mode changes previously accepted "bad syntax" into real errors.
As an example, in normal JavaScript, mistyping a variable name creates a new
global variable. In strict mode, this will throw an error, making it impossible to
accidentally create a global variable.
In normal JavaScript, a developer will not receive any error feedback assigning
values to non-writable properties.
In strict mode, any assignment to a non-writable property, a getter-only
property, a non-existing property, a non-existing variable, or a non-existing
object, will throw an error.
Not Allowed in Strict Mode
Using a variable (property or object) without declaring it, is not allowed:
"use strict";
x = 3.14;
// This will cause an error (if x has
not been declared)
Deleting a variable, a function, or an argument, is not allowed.
"use strict";
x = 3.14;
delete x;
// This will cause an error
Defining a property more than once, is not allowed:
"use strict";
var x = {p1:10, p1:20};
// This will cause an error
Duplicating a parameter name is not allowed:
"use strict";
function x(p1, p1) {};
// This will cause an error
Octal numeric literals and escape characters are not allowed:
"use strict";
var x = 010;
// This will cause an error
var y = \010;
// This will cause an error
Writing to a read-only property is not allowed:
"use strict";
var obj = {};
obj.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14;
// This will cause an error
Writing to a get-only property is not allowed:
"use strict";
var obj = {get x() {return 0} };
obj.x = 3.14;
// This will cause an error
Deleting an undeletable property is not allowed:
"use strict";
delete Object.prototype; // This will cause an error
The string "eval" cannot be used as a variable:
"use strict";
var eval = 3.14;
// This will cause an error
The string "arguments" cannot be used as a variable:
"use strict";
var arguments = 3.14;
// This will cause an error
The with statement is not allowed:
"use strict";
with (Math){x = cos(2)}; // This will cause an error
For security reasons, eval() is not allowed to create variables in the scope from
which it was called:
"use strict";
eval ("var x = 2");
alert (x)
// This will cause an error
In function calls like f(), the this value was the global object. In strict mode, it is
now undefined.
Future reserved keywords are not allowed. These are:
implements
interface
package
private
protected
public
static
field
Watch Out!
The "use strict" directive is only recognized at the beginning of a script
or a function.
JavaScript Style Guide and Coding
Conventions
Previous
Next Chapter
Always use the same coding conventions for all your JavaScript projects.
JavaScript Coding Conventions
Coding conventions are style guidelines for programming. They typically
cover:
Naming and declaration rules for variables and functions.
Rules for the use of white space, indentation, and comments.
Programming practices and principles
Coding conventions secure quality:
Improves code readability
Make code maintenance easier
Coding conventions can be documented rules for teams to follow, or just be
your individual coding practice.
This page describes the general JavaScript code conventions used by
W3Schools.
You should also read the next chapter "Best Practices", and learn how to
avoid coding pitfalls.
Variable Names
At W3schools we use camelCase for identifier names (variables and functions).
All names start with a letter.
At the bottom of this page, you will find a wider discussion about naming rules.
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
Spaces Around Operators
Always put spaces around operators ( = + - * / ), and after commas:
Examples:
var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];
Code Indentation
Always use 4 spaces for indentation of code blocks:
Functions:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
Do not use tabs (tabulators) for indentation. Different editors interpret
tabs differently.
Statement Rules
General rules for simple statements:
Always end a simple statement with a semicolon.
Examples:
var values = ["Volvo", "Saab", "Fiat"];
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
General rules for complex (compound) statements:
Put the opening bracket at the end of the first line.
Use one space before the opening bracket.
Put the closing bracket on a new line, without leading spaces.
Do not end a complex statement with a semicolon.
Functions:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
Loops:
for (i = 0; i < 5; i++) {
x += i;
Conditionals:
if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
Object Rules
General rules for object definitions:
Place the opening bracket on the same line as the object name.
Use colon plus one space between each property and its value.
Use quotes around string values, not around numeric values.
Do not add a comma after the last property-value pair.
Place the closing bracket on a new line, without leading spaces.
Always end an object definition with a semicolon.
Example
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
Short objects can be written compressed, on one line, using spaces only
between properties, like this:
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
Line Length < 80
For readability, avoid lines longer than 80 characters.
If a JavaScript statement does not fit on one line, the best place to break it, is
after an operator or a comma.
Example
document.getElementById("demo").innerHTML =
"Hello Dolly.";
Try it Yourself
Naming Conventions
Always use the same naming convention for all your code. For example:
Variable and function names written as camelCase
Global variable written in UPPERCASE
Constants (like PI) written in UPPERCASE
Should you use hyp-hens, camelCase, or under_scores in variable names?
This is a question programmers often discuss. The answer depends on who you
ask:
Hyphens in HTML and CSS:
HTML5 attributes can start with data- (data-quantity, data-price).
CSS uses hyphens in property-names (font-size).
Hyphens can be mistaken as subtraction attempts. Hyphens are not
allowed in JavaScript names.
Underscores:
Many programmers prefer to use underscores (date_of_birth), especially in SQL
databases.
Underscores are often used in PHP documentation.
PascalCase:
PascalCase is often preferred by C programmers.
camelCase:
camelCase is used by JavaScript itself, by jQuery, and other JavaScript libraries.
Don't start names with a $ sign. It will put you in conflict with many
JavaScript library names.
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the type attribute is not
necessary):
<script src="myscript.js">
Accessing HTML Elements
A consequence of using "untidy" HTML styles, might result in JavaScript errors.
These two JavaScript statements will produce different results:
var obj = getElementById("Demo")
var obj = getElementById("demo")
If possible, use the same naming convention (as JavaScript) in HTML.
Visit the HTML Style Guide.
File Extensions
HTML files should have a .html extension (not .htm).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Use Lower Case File Names
Most web servers (Apache, Unix) are case sensitive about file names:
london.jpg cannot be accessed as London.jpg.
Other web servers (Microsoft, IIS) are not case sensitive:
london.jpg can be accessed as London.jpg or london.jpg.
If you use a mix of upper and lower case, you have to be extremely consistent.
If you move from a case insensitive, to a case sensitive server, even small
errors can break your web site.
To avoid these problems, always use lower case file names (if possible).
Performance
Coding conventions are not used by computers. Most rules have little impact on
the execution of programs.
Indentation and extra spaces are not significant in small scripts.
For code in development, readability should be preferred. Larger production
scripts should be minified.
JavaScript Best Practices
Previous
Next Chapter
Avoid global variables, avoid new, avoid ==, avoid eval()
Avoid Global Variables
Minimize the use of global variables.
This includes all data types, objects, and functions.
Global variables and functions can be overwritten by other scripts.
Use local variables instead, and learn how to use closures.
Always Declare Local Variables
All variables used in a function should be declared as local variables.
Local variables must be declared with the var keyword, otherwise they will
become global variables.
Strict mode does not allow undeclared variables.
Declarations on Top
It is a good coding practice to put all declarations at the top of each script or
function.
This will:
Give cleaner code
Provide a single place to look for local variables
Make it easier to avoid unwanted (implied) global variables
Reduce the possibility of unwanted re-declarations
// Declare at the beginning
var firstName, lastName, price, discount, fullPrice;
// Use later
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;
This also goes for loop variables:
// Declare at the beginning
var i;
// Use later
for (i = 0; i < 5; i++) {
By default, JavaScript moves all declarations to the top (JavaScript
hoisting).
Initialize Variables
It is a good coding practice to initialize variables when you declare them.
This will:
Give cleaner code
Provide a single place to initialize variables
Avoid undefined values
// Declare and initiate at the beginning
var firstName = "",
lastName = "",
price = 0,
discount = 0,
fullPrice = 0,
myArray = [],
myObject = {};
Initializing variables provides an idea of the intended use (and intended
data type).
Never Declare Number, String, or Boolean
Objects
Always treat numbers, strings, or booleans as primitive values. Not as objects.
Declaring these types as objects, slows down execution speed, and produces
nasty side effects:
Example
var x = "John";
var y = new String("John");
(x === y) // is false because x is a string and y is an object.
Try it Yourself
Or even worse:
Example
var x = new String("John");
var y = new String("John");
(x == y) // is false because you cannot compare objects.
Try it Yourself
Don't Use new Object()
Use {} instead of new Object()
Use "" instead of new String()
Use 0 instead of new Number()
Use
Use
Use
Use
false instead of new Boolean()
[] instead of new Array()
/()/ instead of new RegExp()
function (){} instead of new function()
Example
var x1 = {};
// new object
var x2 = "";
// new primitive string
var x3 = 0;
// new primitive number
var x4 = false;
// new primitive boolean
var x5 = [];
// new array object
var
x6 = /()/;
// new regexp object
var x7 = function(){}; // new function object
Try it Yourself
Beware of Automatic Type Conversions
Beware that numbers can accidentally be converted to strings or NaN (Not a
Number).
JavaScript is loosely typed. A variable can contain different data types, and a
variable can change its data type:
Example
var x = "Hello";
// typeof x is a string
x = 5;
// changes typeof x to a number
Try it yourself
When doing mathematical operations, JavaScript can convert numbers to
strings:
Example
var x = 5 + 7;
// x.valueOf() is 12,
typeof x is a number
var x = 5 + "7";
// x.valueOf() is 57,
typeof x is a string
var x = "5" + 7;
// x.valueOf() is 57,
typeof x is a string
var x = 5 - 7;
// x.valueOf() is -2,
typeof x is a number
var x = 5 - "7";
// x.valueOf() is -2,
typeof x is a number
var x = "5" - 7;
// x.valueOf() is -2,
typeof x is a number
var x = 5 - "x";
// x.valueOf() is NaN, typeof x is a number
Try it Yourself
Subtracting a string from a string, does not generate an error but returns NaN
(Not a Number):
Example
"Hello" - "Dolly"
// returns NaN
Try it Yourself
Use === Comparison
The == comparison operator always converts (to matching types) before
comparison.
The === operator forces comparison of values and type:
Example
0 == "";
// true
1 == "1";
// true
1 == true;
// true
0 === "";
// false
1 === "1";
// false
1 === true;
// false
Try it Yourself
Use Parameter Defaults
If a function is called with a missing argument, the value of the missing
argument is set to undefined.
Undefined values can break your code. It is a good habit to assign default
values to arguments.
Example
function myFunction(x, y) {
if (y === undefined) {
y = 0;
Try it Yourself
Read more about function parameters and arguments at Function Parameters
End Your Switches with Defaults
Always end your switch statements with a default. Even if you think there is no
need for it.
Example
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
default:
day = "Unknown";
Try it Yourself
Avoid Using eval()
The eval() function is used to run text as code. In almost all cases, it should not
be necessary to use it.
Because it allows arbitrary code to be run, it also represents a security problem.
JavaScript Common Mistakes
Previous
Next Chapter
This chapter points out some common JavaScript mistakes.
Accidentally Using the Assignment
Operator
JavaScript programs may generate unexpected results if a programmer
accidentally uses an assignment operator (=), instead of a comparison operator
(==) in an if statement.
This if statement returns false (as expected) because x is not equal to 10:
var x = 0;
if (x == 10)
Try it Yourself
This if statement returns true (maybe not as expected), because 10 is true:
var x = 0;
if (x = 10)
Try it Yourself
This if statement returns false (maybe not as expected), because 0 is false:
var x = 0;
if (x = 0)
Try it Yourself
An assignment always returns the value of the assignment.
Expecting Loose Comparison
In regular comparison, data type does not matter. This if statement returns
true:
var x = 10;
var y = "10";
if (x == y)
Try it Yourself
In strict comparison, data type does matter. This if statement returns false:
var x = 10;
var y = "10";
if (x === y)
Try it Yourself
It is a common mistake to forget that switch statements use strict comparison:
This case switch will display an alert:
var x = 10;
switch(x) {
case 10: alert("Hello");
Try it Yourself
This case switch will not display an alert:
var x = 10;
switch(x) {
case "10": alert("Hello");
Try it Yourself
Confusing Addition & Concatenation
Addition is about adding numbers.
Concatenation is about adding strings.
In JavaScript both operations use the same + operator.
Because of this, adding a number as a number will produce a different result
from adding a number as a string:
var x = 10 + 5;
// the result in x is 15
var x = 10 + "5";
// the result in x is "105"
Try it Yourself
When adding two variables, it can be difficult to anticipate the result:
var x = 10;
var y = 5;
var z = x + y;
// the result in z is 15
var x = 10;
var y = "5";
var z = x + y;
// the result in z is "105"
Try it Yourself
Misunderstanding Floats
All numbers in JavaScript are stored as 64-bits Floating point numbers
(Floats).
All programming languages, including JavaScript, have difficulties with precise
floating point values:
var x = 0.1;
var y = 0.2;
var z = x + y
// the result in z will not be 0.3
if (z == 0.3)
// this if test will fail
Try it Yourself
To solve the problem above, it helps to multiply and divide:
Example
var z = (x * 10 + y * 10) / 10;
// z will be 0.3
Try it Yourself
Breaking a JavaScript String
JavaScript will allow you to break a statement into two lines:
Example 1
var x =
"Hello World!";
Try it Yourself
But, breaking a statement in the middle of a string will not work:
Example 2
var x = "Hello
World!";
Try it Yourself
You must use a "backslash" if you must break a statement in a string:
Example 3
var x = "Hello \
World!";
Try it Yourself
Misplacing Semicolon
Because of a misplaced semicolon, this code block will execute regardless of the
value of x:
if (x == 19);
// code block
Try it Yourself
Breaking a Return Statement
It is a default JavaScript behavior to close a statement automatically at the end
of a line.
Because of this, these two examples will return the same result:
Example 1
function myFunction(a) {
var power = 10
return a * power
Try it Yourself
Example 2
function myFunction(a) {
var power = 10;
return a * power;
Try it Yourself
JavaScript will also allow you to break a statement into two lines.
Because of this, example 3 will also return the same result:
Example 3
function myFunction(a) {
var
power = 10;
return a * power;
Try it Yourself
But, what will happen if you break the return statement in two lines like this:
Example 4
function myFunction(a) {
var
power = 10;
return
a * power;
Try it Yourself
The function will return undefined!
Why? Because JavaScript thinks you meant:
Example 5
function myFunction(a) {
var
power = 10;
return;
a * power;
Try it Yourself
Explanation
If a statement is incomplete like:
var
JavaScript will try to complete the statement by reading the next line:
power = 10;
But since this statement is complete:
return
JavaScript will automatically close it like this:
return;
This happens because closing (ending) statements with semicolon is optional in
JavaScript.
JavaScript will close the return statement at the end of the line, because it is a
complete statement.
Never break a return statement.
Accessing Arrays with Named Indexes
Many programming languages support arrays with named indexes.
Arrays with named indexes are called associative arrays (or hashes).
JavaScript does not support arrays with named indexes.
In JavaScript, arrays use numbered indexes:
Example
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;
// person.length will return 3
var y = person[0];
// person[0] will return "John"
Try it Yourself
In JavaScript, objects use named indexes.
If you use a named index, when accessing an array, JavaScript will redefine the
array to a standard object.
After the automatic redefinition, array methods and properties will produce
undefined or incorrect results:
Example:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;
// person.length will return 0
var y = person[0];
// person[0] will return undefined
Try it Yourself
Ending an Array Definition with a Comma
Incorrect:
points = [40, 100, 1, 5, 25, 10,];
Some JSON and JavaScript engines will fail, or behave unexpectedly.
Correct:
points = [40, 100, 1, 5, 25, 10];
Ending an Object Definition with a Comma
Incorrect:
person = {firstName:"John", lastName:"Doe", age:46,}
Some JSON and JavaScript engines will fail, or behave unexpectedly.
Correct:
person = {firstName:"John", lastName:"Doe", age:46}
Undefined is Not Null
With JavaScript, null is for objects, undefined is for variables, properties, and
methods.
To be null, an object has to be defined, otherwise it will be undefined.
If you want to test if an object exists, this will throw an error if the object is
undefined:
Incorrect:
if (myObj !== null && typeof myObj !== "undefined")
Because of this, you must test typeof() first:
Correct:
if (typeof myObj !== "undefined" && myObj !== null)
Expecting Block Level Scope
JavaScript does not create a new scope for each code block.
It is true in many programming languages, but not true in JavaScript.
It is a common mistake, among new JavaScript developers, to believe that this
code returns undefined:
Example
for (var i = 0; i < 10; i++) {
// some code
return i;
Try it Yourself
JavaScript Performance
Previous
Next Chapter
How to speed up your JavaScript code.
Reduce Activity in Loops
Loops are often used in programming.
Each statement in a loop, including the for statement, is executed for each
iteration of the loop.
Search for statements or assignments that can be placed outside the loop.
Bad Code:
for (i = 0; i < arr.length; i++) {
Better Code:
l = arr.length;
for (i = 0; i < l; i++) {
The bad code accesses the length property of an array each time the loop is
iterated.
The better code accesses the length property outside the loop, and makes the
loop run faster.
Reduce DOM Access
Accessing the HTML DOM is very slow, compared to other JavaScript
statements.
If you expect to access a DOM element several times, access it once, and use it
as a local variable:
Example
obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Try it Yourself
Reduce DOM Size
Keep the number of elements in the HTML DOM small.
This will always improve page loading, and speed up rendering (page display),
especially on smaller devices.
Every attempt to search the DOM (like getElementsByTagName) will benefit
from a smaller DOM.
Avoid Unnecessary Variables
Don't create new variables if you don't plan to save values.
Often you can replace code like this:
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
With this:
document.getElementById("demo").innerHTML = firstName + " " +
lastName
Delay JavaScript Loading
Putting your scripts at the bottom of the page body, lets the browser load the
page first.
While a script is downloading, the browser will not start any other downloads. In
addition all parsing and rendering activity might be blocked.
The HTTP specification defines that browsers should not download more
than two components in parallel.
An alternative is to use defer="true" in the script tag. The defer attribute
specifies that the script should be executed after the page has finished parsing,
but it only works for external scripts.
If possible, you can add your script to the page by code, after the page has
loaded:
Example
<script>
window.onload = downScripts;
function downScripts() {
var element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
</script>
Avoid Using with
Avoid using the with keyword. It has a negative effect on speed. It also
clutters up JavaScript scopes.
The with keyword is not allowed in strict mode.
JavaScript Reserved Words
Previous
Next Chapter
In JavaScript, some identifiers are reserved words and cannot be used as
variables or function names.
JavaScript Standards
ECMAScript 3 (ES3) was released in December 1999.
ECMAScript 4 (ES4) was abandoned.
ECMAScript 5 (ES5) was released in December 2009.
ECMAScript 6 (ES6) was released in June 2015, and is the latest official version
of JavaScript.
Time passes, and we are now beginning to see complete support for ES5/ES6 in
all modern browsers.
JavaScript Reserved Words
In JavaScript you cannot use these reserved words as variables, labels, or
function names:
abstract
arguments
boolean
break
byte
case
catch
char
class*
const
continue
debugger
default
delete
do
double
else
enum*
eval
export*
extends*
false
final
finally
float
for
function
goto
if
implements
import*
in
instanceof
int
interface
let
long
native
new
null
package
private
protected
public
return
short
static
super*
switch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
volatile
while
with
yield
Words marked with* are new in ECMAScript5
JavaScript Objects, Properties, and
Methods
You should also avoid using the name of JavaScript built-in objects, properties,
and methods:
Array
Date
eval
function
hasOwnProperty
Infinity
isFinite
isNaN
isPrototypeOf
length
Math
NaN
name
Number
Object
prototype
String
toString
undefined
valueOf
Java Reserved Words
JavaScript is often used together with Java. You should avoid using some Java
objects and properties as JavaScript identifiers:
getClass
java
JavaArray
javaClass
JavaObject
JavaPackage
Windows Reserved Words
JavaScript can be used outside HTML. It can be used as the programming
language in many other applications.
In HTML you must (for portability you should) avoid using the name of HTML
and Windows objects and properties:
alert
all
anchor
anchors
area
assign
blur
button
checkbox
clearInterval
clearTimeou
clientInformation
close
closed
confirm
crypto
decodeU
decodeURIComp
defaultStatus
RI
onent
constructor
document
element
elements
embed
embeds
encodeURI
encodeURIComp
escape
event
fileUpload
onent
focus
form
forms
frame
innerHeight
innerWidth
layer
layers
link
location
mimeTypes
navigate
navigato
frames
frameRate
hidden
history
image
images
offscreenBuff
ering
open
opener
option
outerHeight
outerWidth
packages
pageXOffset
pageYOff
parent
parseFloat
set
parseInt
password
pkcs11
plugin
prompt
propertyIsE
radio
reset
screenX
screenY
scroll
secure
select
self
setInterval
setTimeout
status
submit
taint
text
textarea
top
unescap
untaint
window
num
HTML Event Handlers
In addition you should avoid using the name of all HTML event handlers.
Examples:
onblur
onclick
onerror
onfocus
onkeydown
onkeypress
onkeyup
onmouseover
onload
onmouseup
onmousedown
onsubmit
JavaScript JSON
Previous
Next Chapter
JSON is a format for storing and transporting data.
JSON is often used when data is sent from a server to a web page.
What is JSON?
JSON
JSON
JSON
JSON
stands for JavaScript Object Notation
is lightweight data interchange format
is language independent *
is "self-describing" and easy to understand
* The JSON syntax is derived from JavaScript object notation syntax, but the
JSON format is text only. Code for reading and generating JSON data can be
written in any programming language.
JSON Example
This JSON syntax defines an employees object: an array of 3 employee records
(objects):
JSON Example
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna",
"lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
The JSON Format Evaluates to JavaScript
Objects
The JSON format is syntactically identical to the code for creating JavaScript
objects.
Because of this similarity, a JavaScript program can easily convert JSON data
into native JavaScript objects.
JSON Syntax Rules
Data is in name/value pairs
Data is separated by commas
Curly braces hold objects
Square brackets hold arrays
JSON Data - A Name and a Value
JSON data is written as name/value pairs, just like JavaScript object properties.
A name/value pair consists of a field name (in double quotes), followed by a
colon, followed by a value:
"firstName":"John"
JSON names require double quotes. JavaScript names don't.
JSON Objects
JSON objects are written inside curly braces.
Just like in JavaScript, objects can contain multiple name/value pairs:
{"firstName":"John", "lastName":"Doe"}
JSON Arrays
JSON arrays are written inside square brackets.
Just like in JavaScript, an array can contain objects:
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
In the example above, the object "employees" is an array. It contains three
objects.
Each object is a record of a person (with a first name and a last name).
Converting a JSON Text to a JavaScript
Object
A common use of JSON is to read data from a web server, and display the data
in a web page.
For simplicity, this can be demonstrated using a string as input (or read more in
our JSON tutorial):
First, create a JavaScript string containing JSON syntax:
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
Then, use the JavaScript built-in function JSON.parse() to convert the string into
a JavaScript object:
var obj = JSON.parse(text);
Finally, use the new JavaScript object in your page:
Example
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
Try it Yourself
You can read more about JSON in our JSON tutorial.
JavaScript Forms
Previous
Next Chapter
JavaScript Form Validation
HTML form validation can be done by a JavaScript.
If a form field (fname) is empty, this function alerts a message, and returns
false, to prevent the form from being submitted:
JavaScript Example
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
The function can be called when the form is submitted:
HTML Form Example
<form name="myForm" action="demo_form.asp" onsubmit="return
validateForm()"method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
Try it Yourself
HTML Form Validation
HTML form validation can be performed automatically by the browser:
If a form field (fname) is empty, the required attribute prevents this form from
being submitted:
HTML Form Example
<form action="demo_form.asp" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
Try it Yourself
HTML form validation does not work in Internet Explorer 9 or earlier.
Data Validation
Data validation is the process of ensuring that computer input is clean, correct,
and useful.
Typical validation tasks are:
has the user filled in all required fields?
has the user entered a valid date?
has the user entered text in a numeric field?
Most often, the purpose of data validation is to ensure correct input to a
computer application.
Validation can be defined by many different methods, and deployed in many
different ways.
Server side validation is performed by a web server, after input has been sent
to the server.
Client side validation is performed by a web browser, before input is sent to a
web server.
HTML Constraint Validation
HTML5 introduced a new HTML validation concept called constraint validation.
HTML constraint validation is based on:
Constraint validation HTML Input Attributes
Constraint validation CSS Pseudo Selectors
Constraint validation DOM Properties and Methods
Constraint Validation HTML Input Attributes
Attribute
Description
disabled
Specifies that the input element should be disabled
max
Specifies the maximum value of an input element
min
Specifies the minimum value of an input element
pattern
Specifies the value pattern of an input element
required
Specifies that the input field requires a element
type
Specifies the type of an input element
For a full list, go to HTML Input Attributes.
Constraint Validation CSS Pseudo
Selectors
Selector
:disabled
Description
Selects input elements with the "disabled" attribute
specified
:invalid
Selects input elements with invalid values
:optional
Selects input elements with no "required" attribute
specified
:required
Selects input elements with the "required" attribute
specified
:valid
Selects input elements with valid values
For a full list, got to CSS Pseudo Classes.
JavaScript Validation API
Previous
Next Chapter
Constraint Validation DOM Methods
Property
Description
checkValidity()
Returns true if an input element contains valid data.
setCustomValidity
Sets the validationMessage property of an input element.
()
If an input field contains invalid data, display a message:
The checkValidity() Method
<input id="id1" type="number" min="100" max="300">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML =
inpObj.validationMessage;
</script>
Try it Yourself
Constraint Validation DOM Properties
Property
validity
Description
Contains boolean properties related to the validity of an
input element.
validationMessag
Contains the message a browser will display when the
validity is false.
willValidate
Indicates if an input element will be validated.
Validity Properties
The validity property of an input element contains a number of properties
related to the validity of data:
Property
Description
customError
Set to true, if a custom validity message is set.
patternMismatch
Set to true, if an element's value does not match its
pattern attribute.
rangeOverflow
Set to true, if an element's value is greater than its max
attribute.
rangeUnderflow
Set to true, if an element's value is less than its min
attribute.
stepMismatch
Set to true, if an element's value is invalid per its step
attribute.
tooLong
Set to true, if an element's value exceeds its maxLength
attribute.
typeMismatch
Set to true, if an element's value is invalid per its type
attribute.
valueMissing
Set to true, if an element (with a required attribute) has
no value.
valid
Set to true, if an element's value is valid.
Examples
If the number in an input field is greater than 100 (the input's max attribute),
display a message:
The rangeOverflow Property
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "Value too large";
document.getElementById("demo").innerHTML = txt;
</script>
Try it Yourself
If the number in an input field is less than 100 (the input's min attribute),
display a message:
The rangeUnderflow Property
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeUnderflow)
{
txt = "Value too small";
document.getElementById("demo").innerHTML = txt;
</script>
Try it Yourself
JavaScript Objects
Previous
Next Chapter
JavaScript Objects
In JavaScript, objects are king. If you understand objects, you
understand JavaScript.
In JavaScript, almost "everything" is an object.
Booleans can be objects (or primitive data treated as objects)
Numbers can be objects (or primitive data treated as objects)
Strings can be objects (or primitive data treated as objects)
Dates are always objects
Maths are always objects
Regular expressions are always objects
Arrays are always objects
Functions are always objects
Objects are objects
In JavaScript, all values, except primitive values, are objects.
Primitive values are: strings ("John Doe"), numbers (3.14), true, false, null, and
undefined.
Objects are Variables Containing Variables
JavaScript variables can contain single values:
Example
var person = "John Doe";
Try it Yourself
Objects are variables too. But objects can contain many values.
The values are written as name : value pairs (name and value separated by a
colon).
Example
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
Try it Yourself
A JavaScript object is an unordered collection of variables called named
values.
Object Properties
The named values, in JavaScript objects, are called properties.
Property
Value
firstName
John
lastName
Doe
age
50
eyeColor
blue
Objects written as name value pairs are similar to:
Associative arrays in PHP
Dictionaries in Python
Hash tables in C
Hash maps in Java
Hashes in Ruby and Perl
Object Methods
Methods are actions that can be performed on objects.
Object properties can be both primitive values, other objects, and functions.
An object method is an object property containing a function definition.
Property
Value
firstName
John
lastName
Doe
age
50
eyeColor
blue
fullName
function() {return this.firstName + " " + this.lastName;}
JavaScript objects are containers for named values, called properties and
methods.
You will learn more about methods in the next chapters.
Creating a JavaScript Object
With JavaScript, you can define and create your own objects.
There are different ways to create new objects:
Define and create a single object, using an object literal.
Define and create a single object, with the keyword new.
Define an object constructor, and then create objects of the constructed type.
In ECMAScript 5, an object can also be created with the function
Object.create().
Using an Object Literal
This is the easiest way to create a JavaScript Object.
Using an object literal, you both define and create an object in one statement.
An object literal is a list of name:value pairs (like age:50) inside curly braces
{}.
The following example creates a new JavaScript object with four properties:
Example
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
Try it Yourself
Spaces and line breaks are not important. An object definition can span multiple
lines:
Example
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
Try it Yourself
Using the JavaScript Keyword new
The following example also creates a new JavaScript object with four properties:
Example
var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Try it Yourself
The two examples above do exactly the same. There is no need to use
new Object().
For simplicity, readability and execution speed, use the first one (the
object literal method).
Using an Object Constructor
The examples above are limited in many situations. They only create a single
object.
Sometimes we like to have an "object type" that can be used to create many
objects of one type.
The standard way to create an "object type" is to use an object constructor
function:
Example
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");
Try it yourself
The above function (person) is an object constructor.
Once you have an object constructor, you can create new objects of the same
type:
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");
The this Keyword
In JavaScript, the thing called this, is the object that "owns" the JavaScript
code.
The value of this, when used in a function, is the object that "owns" the
function.
The value of this, when used in an object, is the object itself.
The this keyword in an object constructor does not have a value. It is only a
substitute for the new object.
The value of this will become the new object when the constructor is used to
create an object.
Note that this is not a variable. It is a keyword. You cannot change the
value of this.
Built-in JavaScript Constructors
JavaScript has built-in constructors for native objects:
Example
var x1 = new Object();
// A new Object object
var x2 = new String();
// A new String object
var x3 = new Number();
// A new Number object
var x4 = new Boolean()
// A new Boolean object
var x5 = new Array();
// A new Array object
var
x6 = new RegExp();
// A new RegExp object
var x7 = new Function();
// A new Function object
var x8 = new Date();
// A new Date object
Try it Yourself
The Math() object is not in the list. Math is a global object. The new keyword
cannot be used on Math.
Did You Know?
As you can see, JavaScript has object versions of the primitive data types
String, Number, and Boolean.
There is no reason to create complex objects. Primitive values execute much
faster.
And there is no reason to use new Array(). Use array literals instead: []
And there is no reason to use new RegExp(). Use pattern literals instead: /()/
And there is no reason to use new Function(). Use function expressions instead:
function () {}.
And there is no reason to use new Object(). Use object literals instead: {}
Example
var x1 = {};
// new object
var x2 = "";
// new primitive string
var x3 = 0;
// new primitive number
var x4 = false;
// new primitive boolean
var x5 = [];
// new array
var
x6 = /()/
var x7 = function(){};
object
// new regexp object
// new function object
Try it Yourself
JavaScript Objects are Mutable
Objects are mutable: They are addressed by reference, not by value.
If y is an object, the following statement will not create a copy of y:
var x = y;
// This will not create a copy of y.
The object x is not a copy of y. It is y. Both x and y points to the same object.
Any changes to y will also change x, because x and y are the same object.
Example
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"}
var x = person;
x.age = 10;
// This will change both x.age and
person.age
Try it Yourself
JavaScript Object Properties
Previous
Next Chapter
Properties are the most important part of any JavaScript object.
JavaScript Properties
Properties are the values associated with a JavaScript object.
A JavaScript object is a collection of unordered properties.
Properties can usually be changed, added, and deleted, but some are read only.
Accessing JavaScript Properties
The syntax for accessing the property of an object is:
objectName.property
// person.age
or
objectName["property"]
// person["age"]
or
objectName[expression]
// x = "age"; person[x]
The expression must evaluate to a property name.
Example 1
person.firstname + " is " + person.age + " years old.";
Try it Yourself
Example 2
person["firstname"] + " is " + person["age"] + " years old.";
Try it Yourself
JavaScript for...in Loop
The JavaScript for...in statement loops through the properties of an object.
Syntax
for (variable in object) {
code to be executed
}
The block of code inside of the for...in loop will be executed once for each
property.
Looping through the properties of an object:
Example
var person = {fname:"John", lname:"Doe", age:25};
for (x in person) {
txt += person[x];
Try it yourself
Adding New Properties
You can add new properties to an existing object by simply giving it a value.
Assume that the person object already exists - you can then give it new
properties:
Example
person.nationality = "English";
Try it Yourself
You cannot use reserved words for property (or method) names.
JavaScript naming rules apply.
Deleting Properties
The delete keyword deletes a property from an object:
Example
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
delete person.age;
// or delete person["age"];
Try it Yourself
The delete keyword deletes both the value of the property and the property
itself.
After deletion, the property cannot be used before it is added back again.
The delete operator is designed to be used on object properties. It has no effect
on variables or functions.
The delete operator should not be used on predefined JavaScript object
properties. It can crash your application.
Property Attributes
All properties have a name. In addition they also have a value.
The value is one of the property's attributes.
Other attributes are: enumerable, configurable, and writable.
These attributes define how the property can be accessed (is it readable?, is it
writable?)
In JavaScript, all attributes can be read, but only the value attribute can be
changed (and only if the property is writable).
( ECMAScript 5 has methods for both getting and setting all property attributes)
Prototype Properties
JavaScript objects inherit the properties of their prototype.
The delete keyword does not delete inherited properties, but if you delete a
prototype property, it will affect all objects inherited from the prototype.
JavaScript Object Methods
Previous
Next Chapter
JavaScript Methods
JavaScript methods are the actions that can be performed on objects.
A JavaScript method is a property containing a function definition.
Property
Value
firstName
John
lastName
Doe
age
50
eyeColor
blue
fullName
function() {return this.firstName + " " + this.lastName;}
Methods are functions stored as object properties.
Accessing Object Methods
You create an object method with the following syntax:
methodName : function() { code lines }
You access an object method with the following syntax:
objectName.methodName()
You will typically describe fullName() as a method of the person object, and
fullName as a property.
The fullName property will execute (as a function) when it is invoked with ().
This example accesses the fullName() method of a person object:
Example
name = person.fullName();
Try it Yourself
If you access the fullName property, without (), it will return the function
definition:
Example
name = person.fullName;
Try it Yourself
Using Built-In Methods
This example uses the toUpperCase() method of the String object, to convert a
text to uppercase:
var message = "Hello world!";
var x = message.toUpperCase();
The value of x, after execution of the code above will be:
HELLO WORLD!
Adding New Methods
Defining methods to an object is done inside the constructor function:
Example
function person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
The changeName() function assigns the value of name to the person's lastName
property.
Now You Can Try:
myMother.changeName("Doe");
Try it Yourself
JavaScript knows which person you are talking about by "substituting" this with
myMother.
JavaScript Object Prototypes
Previous
Next Chapter
Every JavaScript object has a prototype. The prototype is also an object.
All JavaScript objects inherit their properties and methods from their
prototype.
JavaScript Prototypes
All JavaScript objects inherit the properties and methods from their prototype.
Objects created using an object literal, or with new Object(), inherit from a
prototype called Object.prototype.
Objects created with new Date() inherit the Date.prototype.
The Object.prototype is on the top of the prototype chain.
All JavaScript objects (Date, Array, RegExp, Function, ....) inherit from the
Object.prototype.
Creating a Prototype
The standard way to create an object prototype is to use an object constructor
function:
Example
function person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
With a constructor function, you can use the new keyword to create new
objects from the same prototype:
Example
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");
Try it Yourself
The constructor function is the prototype for your person objects.
Adding Properties and Methods to Objects
Sometimes you want to add new properties (or methods) to an existing object.
Sometimes you want to add new properties (or methods) to all existing objects
of a given type.
Sometimes you want to add new properties (or methods) to an object
prototype.
Adding a Property to an Object
Adding a new property to an existing object is easy:
Example
myFather.nationality = "English";
Try it Yourself
The property will be added to myFather. Not to myMother. Not to any other
person objects.
Adding a Method to an Object
Adding a new method to an existing object is also easy:
Example
myFather.name = function () {
return this.firstName + " " + this.lastName;
};
Try it Yourself
The method will be added to myFather. Not to myMother.
Adding Properties to a Prototype
You cannot add a new property to a prototype the same way as you add a new
property to an existing object, because the prototype is not an existing object.
Example
person.nationality = "English";
Try it Yourself
To add a new property to a constructor, you must add it to the constructor
function:
Example
function person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English"
Try it Yourself
Prototype properties can have prototype values (default values).
Adding Methods to a Prototype
Your constructor function can also define methods:
Example
function person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.name = function() {return this.firstName + " " +
this.lastName;};
Try it Yourself
Using the prototype Property
The JavaScript prototype property allows you to add new properties to an
existing prototype:
Example
function person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
person.prototype.nationality = "English";
Try it Yourself
The JavaScript prototype property also allows you to add new methods to an
existing prototype:
Example
function person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};
Try it Yourself
Only modify your own prototypes. Never modify the prototypes of
standard JavaScript objects.
JavaScript Function Definitions
Previous
Next Chapter
JavaScript functions are defined with the function keyword.
You can use a function declaration or a function expression.
Function Declarations
Earlier in this tutorial, you learned that functions are declared with the
following syntax:
function functionName(parameters) {
code to be executed
}
Declared functions are not executed immediately. They are "saved for later
use", and will be executed later, when they are invoked (called upon).
Example
function myFunction(a, b) {
return a * b;
Try it yourself
Semicolons are used to separate executable JavaScript statements.
Since a function declaration is not an executable statement, it is not
common to end it with a semicolon.
Function Expressions
A JavaScript function can also be defined using an expression.
A function expression can be stored in a variable:
Example
var x = function (a, b) {return a * b};
Try it Yourself
After a function expression has been stored in a variable, the variable can be
used as a function:
Example
var x = function (a, b) {return a * b};
var z = x(4, 3);
Try it Yourself
The function above is actually an anonymous function (a function without a
name).
Functions stored in variables do not need function names. They are always
invoked (called) using the variable name.
The function above ends with a semicolon because it is a part of an
executable statement.
The Function() Constructor
As you have seen in the previous examples, JavaScript functions are defined
with the function keyword.
Functions can also be defined with a built-in JavaScript function constructor
called Function().
Example
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
Try it Yourself
You actually don't have to use the function constructor. The example above is
the same as writing:
Example
var myFunction = function (a, b) {return a * b};
var x = myFunction(4, 3);
Try it Yourself
Most of the time, you can avoid using the new keyword in JavaScript.
Function Hoisting
Earlier in this tutorial, you learned about "hoisting".
Hoisting is JavaScript's default behavior of moving declarations to the top of
the current scope.
Hoisting applies to variable declarations and to function declarations.
Because of this, JavaScript functions can be called before they are declared:
myFunction(5);
function myFunction(y) {
return y * y;
}
Functions defined using an expression are not hoisted.
Self-Invoking Functions
Function expressions can be made "self-invoking".
A self-invoking expression is invoked (started) automatically, without being
called.
Function expressions will execute automatically if the expression is followed by
().
You cannot self-invoke a function declaration.
You have to add parentheses around the function to indicate that it is a function
expression:
Example
(function () {
var x = "Hello!!";
// I will invoke myself
})();
Try it Yourself
The function above is actually an anonymous self-invoking function
(function without name).
Functions Can Be Used as Values
JavaScript functions can be used as values:
Example
function myFunction(a, b) {
return a * b;
var x = myFunction(4, 3);
Try it Yourself
JavaScript functions can be used in expressions:
Example
function myFunction(a, b) {
return a * b;
var x = myFunction(4, 3) * 2;
Try it Yourself
Functions are Objects
The typeof operator in JavaScript returns "function" for functions.
But, JavaScript functions can best be described as objects.
JavaScript functions have both properties and methods.
The arguments.length property returns the number of arguments received when
the function was invoked:
Example
function myFunction(a, b) {
return arguments.length;
Try it Yourself
The toString() method returns the function as a string:
Example
function myFunction(a, b) {
return a * b;
var txt = myFunction.toString();
Try it Yourself
A function defined as the property of an object, is called a method to the
object.
A function designed to create new objects, is called an object constructor.
JavaScript Function Parameters
Previous
Next Chapter
A JavaScript function does not perform any checking on parameter values
(arguments).
Function Parameters and Arguments
Earlier in this tutorial, you learned that functions can have parameters:
functionName(parameter1, parameter2, parameter3) {
code to be executed
Function parameters are the names listed in the function definition.
Function arguments are the real values passed to (and received by) the
function.
Parameter Rules
JavaScript function definitions do not specify data types for parameters.
JavaScript functions do not perform type checking on the passed arguments.
JavaScript functions do not check the number of arguments received.
Parameter Defaults
If a function is called with missing arguments (less than declared), the
missing values are set to: undefined
Sometimes this is acceptable, but sometimes it is better to assign a default
value to the parameter:
Example
function myFunction(x, y) {
if (y === undefined) {
y = 0;
Try it Yourself
If a function is called with too many arguments (more than declared), these
arguments cannot be referred, because they don't have a name. They can only
be reached in the arguments object.
The Arguments Object
JavaScript functions have a built-in object called the arguments object.
The argument object contains an array of the arguments used when the
function was called (invoked).
This way you can simply use a function to find (for instance) the highest value
in a list of numbers:
Example
x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
var i;
var max = -Infinity;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
return max;
Try it Yourself
Or create a function to summarize all input values:
Example
x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() {
var i, sum = 0;
for (i = 0; i < arguments.length; i++) {
sum += arguments[i];
return sum;
Try it Yourself
Arguments are Passed by Value
The parameters, in a function call, are the function's arguments.
JavaScript arguments are passed by value: The function only gets to know the
values, not the argument's locations.
If a function changes an argument's value, it does not change the parameter's
original value.
Changes to arguments are not visible (reflected) outside the function.
Objects are Passed by Reference
In JavaScript, object references are values.
Because of this, objects will behave like they are passed by reference:
If a function changes an object property, it changes the original value.
Changes to object properties are visible (reflected) outside the
function.
JavaScript Function Invocation
Previous
Next Chapter
JavaScript functions can be invoked in 4 different ways.
Each method differs in how this is initialized.
The this Keyword
In JavaScript, the thing called this, is the object that "owns" the current code.
The value of this, when used in a function, is the object that "owns" the
function.
Note that this is not a variable. It is a keyword. You cannot change the
value of this.
Invoking a JavaScript Function
You have already learned that the code inside a JavaScript function will execute
when "something" invokes it.
The code in a function is not executed when the function is defined. It is
executed when the function is invoked.
Some people use the term "call a function" instead of "invoke a function".
It is also quite common to say "call upon a function", "start a function", or
"execute a function".
In this tutorial, we will use invoke, because a JavaScript function can be
invoked without being called.
Invoking a Function as a Function
Example
function myFunction(a, b) {
return a * b;
myFunction(10, 2);
// myFunction(10, 2) will return 20
Try it Yourself
The function above does not belong to any object. But in JavaScript there is
always a default global object.
In HTML the default global object is the HTML page itself, so the function above
"belongs" to the HTML page.
In a browser the page object is the browser window. The function above
automatically becomes a window function.
myFunction() and window.myFunction() is the same function:
Example
function myFunction(a, b) {
return a * b;
window.myFunction(10, 2);
// window.myFunction(10, 2) will
also return 20
Try it Yourself
This is a common way to invoke a JavaScript function, but not a good
practice in computer programming.
Global variables, methods, or functions can easily create name conflicts
and bugs in the global object.
The Global Object
When a function is called without an owner object, the value of this becomes
the global object.
In a web browser the global object is the browser window.
This example returns the window object as the value of this:
Example
function myFunction() {
return this;
myFunction();
// Will return the window object
Try it Yourself
Invoking a function as a global function, causes the value of this to be
the global object.
Using the window object as a variable can easily crash your program.
Invoking a Function as a Method
In JavaScript you can define function as object methods.
The following example creates an object (myObject), with two properties
(firstName and lastName), and a method (fullName):
Example
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
myObject.fullName();
// Will return "John Doe"
Try it Yourself
The fullName method is a function. The function belongs to the object.
myObject is the owner of the function.
The thing called this, is the object that "owns" the JavaScript code. In this case
the value of this is myObject.
Test it! Change the fullName method to return the value of this:
Example
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
myObject.fullName();
// Will return [object Object] (the
owner object)
Try it Yourself
Invoking a function as an object method, causes the value of this to be
the object itself.
Invoking a Function with a Function
Constructor
If a function invocation is preceded with the new keyword, it is a constructor
invocation.
It looks like you create a new function, but since JavaScript functions are
objects you actually create a new object:
Example
// This is a function constructor:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName
= arg2;
// This
creates a new object
var x = new myFunction("John","Doe");
x.firstName;
// Will return "John"
Try it Yourself
A constructor invocation creates a new object. The new object inherits the
properties and methods from its constructor.
The this keyword in the constructor does not have a value.
The value of this will be the new object created when the function is
invoked.
Invoking a Function with a Function
Method
In JavaScript, functions are objects. JavaScript functions have properties and
methods.
call() and apply() are predefined JavaScript function methods. Both methods
can be used to invoke a function, and both methods must have the owner
object as first parameter.
Example
function myFunction(a, b) {
return a * b;
myObject = myFunction.call(myObject, 10, 2);
// Will return
20
Try it Yourself
Example
function myFunction(a, b) {
return a * b;
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);
return 20
Try it Yourself
// Will also
Both methods takes an owner object as the first argument. The only difference
is that call() takes the function arguments separately, and apply() takes the
function arguments in an array.
In JavaScript strict mode, the first argument becomes the value of this in the
invoked function, even if the argument is not an object.
In "non-strict" mode, if the value of the first argument is null or undefined, it is
replaced with the global object.
With call() or apply() you can set the value of this, and invoke a function
as a new method of an existing object.
JavaScript Closures
Previous
Next Chapter
JavaScript variables can belong to the local or global scope.
Private variables can be made possible with closures.
Global Variables
A function can access all variables defined inside the function, like this:
Example
function myFunction() {
var a = 4;
return a * a;
Try it Yourself
But a function can also access variables defined outside the function, like this:
Example
var a = 4;
function myFunction() {
return a * a;
Try it Yourself
In the last example, a is a global variable.
In a web page, global variables belong to the window object.
Global variables can be used (and changed) by all scripts in the page (and in
the window).
In the first example, a is a local variable.
A local variable can only be used inside the function where it is defined. It is
hidden from other functions and other scripting code.
Global and local variables with the same name are different variables. Modifying
one, does not modify the other.
Variables created without the keyword var, are always global, even if
they are created inside a function.
Variable Lifetime
Global variables live as long as your application (your window / your web page)
lives.
Local variables have short lives. They are created when the function is invoked,
and deleted when the function is finished.
A Counter Dilemma
Suppose you want to use a variable for counting something, and you want this
counter to be available to all functions.
You could use a global variable, and a function to increase the counter:
Example
var counter = 0;
function add() {
counter += 1;
add();
add();
add();
// the counter is now equal to 3
Try it Yourself
The counter should only be changed by the add() function.
The problem is, that any script on the page can change the counter, without
calling add().
If I declare the counter inside the function, nobody will be able to change it
without calling add():
Example
function add() {
var counter = 0;
counter += 1;
add();
add();
add();
// the counter should now be 3, but it does not work !
Try it Yourself
It did not work! Every time I call the add() function, the counter is set to 1.
A JavaScript inner function can solve this.
JavaScript Nested Functions
All functions have access to the global scope.
In fact, in JavaScript, all functions have access to the scope "above" them.
JavaScript supports nested functions. Nested functions have access to the scope
"above" them.
In this example, the inner function plus() has access to the counter variable in
the parent function:
Example
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
Try it Yourself
This could have solved the counter dilemma, if we could reach the plus()
function from the outside.
We also need to find a way to execute counter = 0 only once.
We need a closure.
JavaScript Closures
Remember self-invoking functions? What does this function do?
Example
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
// the counter is now 3
Try it Yourself
Example Explained
The variable add is assigned the return value of a self-invoking function.
The self-invoking function only runs once. It sets the counter to zero (0), and
returns a function expression.
This way add becomes a function. The "wonderful" part is that it can access the
counter in the parent scope.
This is called a JavaScript closure. It makes it possible for a function to have
"private" variables.
The counter is protected by the scope of the anonymous function, and can only
be changed using the add function.
A closure is a function having access to the parent scope, even after the
parent function has closed.
JavaScript HTML DOM
Previous
Next Chapter
With the HTML DOM, JavaScript can access and change all the elements of
an HTML document.
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of
the page.
The HTML DOM model is constructed as a tree of Objects:
The HTML DOM Tree of Objects
With the object model, JavaScript gets all the power it needs to create dynamic
HTML:
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
can
can
can
can
can
can
can
change all the HTML elements in the page
change all the HTML attributes in the page
change all the CSS styles in the page
remove existing HTML elements and attributes
add new HTML elements and attributes
react to all existing HTML events in the page
create new HTML events in the page
What You Will Learn
In the next chapters of this tutorial you will learn:
How
How
How
How
to
to
to
to
change the content of HTML elements
change the style (CSS) of HTML elements
react to HTML DOM events
add and delete HTML elements
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral
interface that allows programs and scripts to dynamically access and update the
content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
What is the HTML DOM?
The HTML DOM is a standard object model and programming interface for
HTML. It defines:
The
The
The
The
HTML elements as objects
properties of all HTML elements
methods to access all HTML elements
events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add,
or delete HTML elements.
JavaScript - HTML DOM Methods
Previous
Next Chapter
HTML DOM methods are actions you can perform (on HTML Elements).
HTML DOM properties are values (of HTML Elements) that you can set or
change.
The DOM Programming Interface
The HTML DOM can be accessed with JavaScript (and with other programming
languages).
In the DOM, all HTML elements are defined as objects.
The programming interface is the properties and methods of each object.
A property is a value that you can get or set (like changing the content of an
HTML element).
A method is an action you can do (like add or deleting an HTML element).
Example
The following example changes the content (the innerHTML) of the <p>
element with id="demo":
Example
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
Try it Yourself
In the example above, getElementById is a method, while innerHTML is a
property.
The getElementById Method
The most common way to access an HTML element is to use the id of the
element.
In the example above the getElementById method used id="demo" to find the
element.
The innerHTML Property
The easiest way to get the content of an element is by using the innerHTML
property.
The innerHTML property is useful for getting or replacing the content of HTML
elements.
The innerHTML property can be used to get or change any HTML
element, including <html> and <body>.
JavaScript HTML DOM Document
Previous
Next Chapter
The HTML DOM document object is the owner of all other objects in your
web page.
The HTML DOM Document Object
The document object represents your web page.
If you want to access any element in an HTML page, you always start with
accessing the document object.
Below are some examples of how you can use the document object to access
and manipulate HTML.
Finding HTML Elements
Method
document.getElementById()
Description
Find an element by element id
document.getElementsByTagName()
Find elements by tag name
document.getElementsByClassName()
Find elements by class name
Changing HTML Elements
Method
Description
element.innerHTML=
Change the inner HTML of an element
element.attribute=
Change the attribute of an HTML
element
element.setAttribute(attribute,value)
Change the attribute of an HTML
element
element.style.property=
Change the style of an HTML element
Adding and Deleting Elements
Method
document.createElement()
Description
Create an HTML element
document.removeChild()
Remove an HTML element
document.appendChild()
Add an HTML element
document.replaceChild()
Replace an HTML element
document.write(text)
Write into the HTML output stream
Adding Events Handlers
Method
Description
document.getElementById(id).onclick=fu
Adding event handler code to an
nction(){code}
onclick event
Finding HTML Objects
The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections,
and properties. These are still valid in HTML5.
Later, in HTML DOM Level 3, more objects, collections, and properties were
added.
Property
Description
DO
M
document.anchors
Returns all <a> elements that have a name
attribute
document.applets
Returns all <applet> elements (Deprecated in
HTML5)
document.baseURI
Returns the absolute base URI of the document
document.body
Returns the <body> element
document.cookie
Returns the document's cookie
document.doctype
Returns the document's doctype
document.documentE
Returns the <html> element
Returns the mode used by the browser
Returns the URI of the document
lement
document.documentM
ode
document.documentU
RI
document.domain
Returns the domain name of the document
server
document.domConfig
Obsolete. Returns the DOM configuration
document.embeds
Returns all <embed> elements
document.forms
Returns all <form> elements
document.head
Returns the <head> element
document.images
Returns all <img> elements
document.implement
Returns the DOM implementation
document.inputEncodi
Returns the document's encoding (character
ng
set)
document.lastModifie
Returns the date and time the document was
updated
document.links
Returns all <area> and <a> elements that have
ation
a href attribute
document.readyState
Returns the (loading) status of the document
document.referrer
Returns the URI of the referrer (the linking
document)
document.scripts
Returns all <script> elements
document.strictErrorC
Returns if error checking is enforced
document.title
Returns the <title> element
document.URL
Returns the complete URL of the document
hecking
JavaScript HTML DOM Elements
Previous
Next Chapter
This page teaches you how to find and access HTML elements in an HTML
page.
Finding HTML Elements
Often, with JavaScript, you want to manipulate HTML elements.
To do so, you have to find the elements first. There are a couple of ways to do
this:
Finding
Finding
Finding
Finding
Finding
HTML
HTML
HTML
HTML
HTML
elements
elements
elements
elements
elements
by
by
by
by
by
id
tag name
class name
CSS selectors
HTML object collections
Finding HTML Element by Id
The easiest way to find an HTML element in the DOM, is by using the element
id.
This example finds the element with id="intro":
Example
var myElement = document.getElementById("intro");
Try it Yourself
If the element is found, the method will return the element as an object (in
myElement).
If the element is not found, myElement will contain null.
Finding HTML Elements by Tag Name
This example finds all <p> elements:
Example
var x = document.getElementsByTagName("p");
Try it Yourself
This example finds the element with id="main", and then finds all <p>
elements inside "main":
Example
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Try it Yourself
Finding HTML Elements by Class Name
If you want to find all HTML elements with the same class name, use
getElementsByClassName().
This example returns a list of all elements with class="intro".
Example
var x = document.getElementsByClassName("intro");
Try it Yourself
Finding elements by class name does not work in Internet Explorer 8 and
earlier versions.
Finding HTML Elements by CSS Selectors
If you want to find all HTML elements that matches a specified CSS selector (id,
class names, types, attributes, values of attributes, etc), use the
querySelectorAll() method.
This example returns a list of all <p> elements with class="intro".
Example
var x = document.querySelectorAll("p.intro");
Try it Yourself
The querySelectorAll() method does not work in Internet Explorer 8 and
earlier versions.
Finding HTML Elements by HTML Object
Collections
This example finds the form element with id="frm1", in the forms collection,
and displays all element values:
Example
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
document.getElementById("demo").innerHTML = text;
Try it Yourself
The following HTML objects (and object collections) are also accessible:
document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
document.title
Test Yourself with Exercises!
Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5
JavaScript HTML DOM - Changing
HTML
Previous
Next Chapter
The HTML DOM allows JavaScript to change the content of HTML elements.
Changing the HTML Output Stream
JavaScript can create dynamic HTML content:
Date: Wed Sep 30 2015 16:52:34 GMT-0600 (Canada Central Standard
Time)
In JavaScript, document.write() can be used to write directly to the HTML
output stream:
Example
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Try it yourself
Never use document.write() after the document is loaded. It will
overwrite the document.
Changing HTML Content
The easiest way to modify the content of an HTML element is by using the
innerHTML property.
To change the content of an HTML element, use this syntax:
document.getElementById(id).innerHTML = new HTML
This example changes the content of a <p> element:
Example
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Try it Yourself
This example changes the content of an <h1> element:
Example
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>
Try it Yourself
Example explained:
The HTML document above contains an <h1> element with id="header"
We use the HTML DOM to get the element with id="header"
A JavaScript changes the content (innerHTML) of that element
Changing the Value of an Attribute
To change the value of an HTML attribute, use this syntax:
document.getElementById(id).attribute=new value
This example changes the value of the src attribute of an <img> element:
Example
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Try it Yourself
Example explained:
The HTML document above contains an <img> element with id="myImage"
We use the HTML DOM to get the element with id="myImage"
A JavaScript changes the src attribute of that element from "smiley.gif" to
"landscape.jpg"
Test Yourself with Exercises!
Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5
JavaScript HTML DOM - Changing
CSS
Previous
Next Chapter
The HTML DOM allows JavaScript to change the style of HTML elements.
Changing HTML Style
To change the style of an HTML element, use this syntax:
document.getElementById(id).style.property=new style
The following example changes the style of a <p> element:
Example
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
Try it Yourself
Using Events
The HTML DOM allows you to execute code when an event occurs.
Events are generated by the browser when "things happen" to HTML elements:
An element is clicked on
The page has loaded
Input fields are changed
You will learn more about events in the next chapter of this tutorial.
This example changes the style of the HTML element with id="id1", when the
user clicks a button:
Example
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>
Try it Yourself
More Examples
Visibility How to make an element invisible. Do you want to show the element or
not?
HTML DOM Style Object Reference
For all HTML DOM style properties, look at our complete HTML DOM Style Object
Reference.
Test Yourself with Exercises!
Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5
JavaScript HTML DOM Events
Previous
Next Chapter
HTML DOM allows JavaScript to react to HTML events:
Mouse Over Me
Click Me
Reacting to Events
A JavaScript can be executed when an event occurs, like when a user clicks on
an HTML element.
To execute code when a user clicks on an element, add JavaScript code to an
HTML event attribute:
onclick=JavaScript
Examples of HTML events:
When
When
When
When
When
When
When
a user clicks the mouse
a web page has loaded
an image has been loaded
the mouse moves over an element
an input field is changed
an HTML form is submitted
a user strokes a key
In this example, the content of the <h1> element is changed when a user clicks
on it:
Example
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
Try it Yourself
In this example, a function is called from the event handler:
Example
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
</script>
</body>
</html>
Try it Yourself
HTML Event Attributes
To assign events to HTML elements you can use event attributes.
Example
Assign an onclick event to a button element:
<button onclick="displayDate()">Try it</button>
Try it Yourself
In the example above, a function named displayDate will be executed when the
button is clicked.
Assign Events Using the HTML DOM
The HTML DOM allows you to assign events to HTML elements using JavaScript:
Example
Assign an onclick event to a button element:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Try it Yourself
In the example above, a function named displayDate is assigned to an HTML
element with the id="myBtn".
The function will be executed when the button is clicked.
The onload and onunload Events
The onload and onunload events are triggered when the user enters or leaves
the page.
The onload event can be used to check the visitor's browser type and browser
version, and load the proper version of the web page based on the information.
The onload and onunload events can be used to deal with cookies.
Example
<body onload="checkCookies()">
Try it Yourself
The onchange Event
The onchange event are often used in combination with validation of input
fields.
Below is an example of how to use the onchange. The upperCase() function will
be called when a user changes the content of an input field.
Example
<input type="text" id="fname" onchange="upperCase()">
Try it yourself
The onmouseover and onmouseout Events
The onmouseover and onmouseout events can be used to trigger a function
when the user mouses over, or out of, an HTML element:
Mouse Over Me
Try it Yourself
The onmousedown, onmouseup and
onclick Events
The onmousedown, onmouseup, and onclick events are all parts of a mouseclick. First when a mouse-button is clicked, the onmousedown event is
triggered, then, when the mouse-button is released, the onmouseup event is
triggered, finally, when the mouse-click is completed, the onclick event is
triggered.
Click Me
Try it Yourself
More Examples
onmousedown and onmouseup
Change an image when a user holds down the mouse button.
onload
Display an alert box when the page has finished loading.
onfocus
Change the background-color of an input field when it gets focus.
Mouse Events
Change the color of an element when the cursor moves over it.
HTML DOM Event Object Reference
For a list of all HTML DOM events, look at our complete HTML DOM Event Object
Reference.
Test Yourself with Exercises!
Exercise 1
Exercise 2
Exercise 3
JavaScript HTML DOM
EventListener
Previous
Next Chapter
The addEventListener() method
Example
Add an event listener that fires when a user clicks a button:
document.getElementById("myBtn").addEventListener("click",
displayDate);
Try it yourself
The addEventListener() method attaches an event handler to the specified
element.
The addEventListener() method attaches an event handler to an element
without overwriting existing event handlers.
You can add many event handlers to one element.
You can add many event handlers of the same type to one element, i.e two
"click" events.
You can add event listeners to any DOM object not only HTML elements. i.e the
window object.
The addEventListener() method makes it easier to control how the event reacts
to bubbling.
When using the addEventListener() method, the JavaScript is separated from
the HTML markup, for better readability and allows you to add event listeners
even when you do not control the HTML markup.
You can easily remove an event listener by using the removeEventListener()
method.
Syntax
element.addEventListener(event, function, useCapture);
The first parameter is the type of the event (like "click" or "mousedown").
The second parameter is the function we want to call when the event occurs.
The third parameter is a boolean value specifying whether to use event bubbling
or event capturing. This parameter is optional.
Note that you don't use the "on" prefix for the event; use "click" instead
of "onclick".
Add an Event Handler to an Element
Example
Alert "Hello World!" when the user clicks on an element:
element.addEventListener("click", function(){ alert("Hello
World!"); });
Try it yourself
You can also refer to an external "named" function:
Example
Alert "Hello World!" when the user clicks on an element:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
Try it yourself
Add Many Event Handlers to the Same
Element
The addEventListener() method allows you to add many events to the same
element, without overwriting existing events:
Example
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Try it yourself
You can add events of different types to the same element:
Example
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Try it yourself
Add an Event Handler to the Window
Object
The addEventListener() method allows you to add event listeners on any HTML
DOM object such as HTML elements, the HTML document, the window object, or
other objects that supports events, like the xmlHttpRequest object.
Example
Add an event listener that fires when a user resizes the window:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Try it yourself
Passing Parameters
When passing parameter values, use an "anonymous function" that calls the
specified function with the parameters:
Example
element.addEventListener("click", function(){ myFunction(p1, p2);
});
Try it yourself
Event Bubbling or Event Capturing?
There are two ways of event propagation in the HTML DOM, bubbling and
capturing.
Event propagation is a way of defining the element order when an event occurs.
If you have a <p> element inside a <div> element, and the user clicks on the
<p> element, which element's "click" event should be handled first?
In bubbling the inner most element's event is handled first and then the outer:
the <p> element's click event is handled first, then the <div> element's click
event.
In capturing the outer most element's event is handled first and then the inner:
the <div> element's click event will be handled first, then the <p> element's
click event.
With the addEventListener() method you can specify the propagation type by
using the "useCapture" parameter:
addEventListener(event, function, useCapture);
The default value is false, which will use the bubbling propagation, when the
value is set to true, the event uses the capturing propagation.
Example
document.getElementById("myP").addEventListener("click",
myFunction, true);
document.getElementById("myDiv").addEventListener("click",
myFunction, true);
Try it yourself
The removeEventListener() method
The removeEventListener() method removes event handlers that have been
attached with the addEventListener() method:
Example
element.removeEventListener("mousemove", myFunction);
Try it yourself
Browser Support
The numbers in the table specifies the first browser version that fully supports
these methods.
Method
addEventListener
1.0
9.0
1.0
1.0
7.0
1.0
9.0
1.0
1.0
7.0
()
removeEventList
ener()
Note: The addEventListener() and removeEventListener() methods are not
supported in IE 8 and earlier versions and Opera 6.0 and earlier versions.
However, for these specific browser versions, you can use the attachEvent()
method to attach an event handlers to the element, and the detachEvent()
method to remove it:
element.attachEvent(event, function);
element.detachEvent(event, function);
Example
Cross-browser solution:
var x = document.getElementById("myBtn");
if (x.addEventListener) {
browsers, except IE 8 and earlier
// For all major
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and
earlier versions
x.attachEvent("onclick", myFunction);
Try it yourself
HTML DOM Event Object Reference
For a list of all HTML DOM events, look at our complete HTML DOM Event Object
Reference.
JavaScript HTML DOM Navigation
Previous
Next Chapter
With the HTML DOM, you can navigate the node tree using node
relationships.
DOM Nodes
According to the W3C HTML DOM standard, everything in an HTML document is
a node:
The entire document is a document node
Every HTML element is an element node
The text inside HTML elements are text nodes
Every HTML attribute is an attribute node
All comments are comment nodes
With the HTML DOM, all nodes in the node tree can be accessed by JavaScript.
New nodes can be created, and all nodes can be modified or deleted.
Node Relationships
The nodes in the node tree have a hierarchical relationship to each other.
The terms parent, child, and sibling are used to describe the relationships.
In a node tree, the top node is called the root (or root node)
Every node has exactly one parent, except the root (which has no parent)
A node can have a number of children
Siblings (brothers or sisters) are nodes with the same parent
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
From the HTML above you can read:
<html> is the root node
<html> has no parents
<html> is the parent of <head> and <body>
<head> is the first child of <html>
<body> is the last child of <html>
and:
<head> has one child: <title>
<title> has one child (a text node): "DOM Tutorial"
<body> has two children: <h1> and <p>
<h1> has one child: "DOM Lesson one"
<p> has one child: "Hello world!"
<h1> and <p> are siblings
Navigating Between Nodes
You can use the following node properties to navigate between nodes with
JavaScript:
parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling
Warning !
A common error in DOM processing is to expect an element node to contain
text.
In this example: <title>DOM Tutorial</title>, the element node <title>
does not contain text. It contains atext node with the value "DOM Tutorial".
The value of the text node can be accessed by the node's innerHTML property,
or the nodeValue.
Child Nodes and Node Values
In addition to the innerHTML property, you can also use the childNodes and
nodeValue properties to get the content of an element.
The following example collects the node value of an <h1> element and copies it
into a <p> element:
Example
<html>
<body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello!</p>
<script>
var myText =
document.getElementById("intro").childNodes[0].nodeValue;
document.getElementById("demo").innerHTML = myText;
</script>
</body>
</html>
Try it Yourself
In the example above, getElementById is a method, while childNodes and
nodeValue are properties.
In this tutorial we use the innerHTML property. However, learning the method
above is useful for understanding the tree structure and the navigation of the
DOM.
Using the firstChild property is the same as using childNodes[0]:
Example
<html>
<body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello World!</p>
<script>
myText = document.getElementById("intro").firstChild.nodeValue;
document.getElementById("demo").innerHTML = myText;
</script>
</body>
</html>
Try it Yourself
DOM Root Nodes
There are two special properties that allow access to the full document:
document.body - The body of the document
document.documentElement - The full document
Example
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b>
property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
Try it Yourself
Example
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.documentElement</b>
property.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>
Try it Yourself
The nodeName Property
The nodeName property specifies the name of a node.
nodeName
nodeName
nodeName
nodeName
nodeName
is read-only
of an element node is the same as the tag name
of an attribute node is the attribute name
of a text node is always #text
of the document node is always #document
Note: nodeName always contains the uppercase tag name of an HTML element.
The nodeValue Property
The nodeValue property specifies the value of a node.
nodeValue for element nodes is undefined
nodeValue for text nodes is the text itself
nodeValue for attribute nodes is the attribute value
The nodeType Property
The nodeType property returns the type of node. nodeType is read only.
The most important node types are:
Element type
NodeType
Element
Attribute
Text
Comment
Document
JavaScript HTML DOM Elements
(Nodes)
Previous
Next Chapter
Adding and Removing Nodes (HTML Elements)
Creating New HTML Elements (Nodes)
To add a new element to the HTML DOM, you must create the element (element
node) first, and then append it to an existing element.
Example
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
Try it Yourself
Example Explained
This code creates a new <p> element:
var para = document.createElement("p");
To add text to the <p> element, you must create a text node first. This code
creates a text node:
var node = document.createTextNode("This is a new paragraph.");
Then you must append the text node to the <p> element:
para.appendChild(node);
Finally you must append the new element to an existing element.
This code finds an existing element:
var element = document.getElementById("div1");
This code appends the new element to the existing element:
element.appendChild(para);
Creating new HTML Elements insertBefore()
The appendChild() method in the previous example, appended the new element
as the last child of the parent.
If you don't want that you can use the insertBefore() method:
Example
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script>
Try it Yourself
Removing Existing HTML Elements
To remove an HTML element, you must know the parent of the element:
Example
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
Try it Yourself
Example Explained
This HTML document contains a <div> element with two child nodes (two <p>
elements):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Find the element with id="div1":
var parent = document.getElementById("div1");
Find the <p> element with id="p1":
var child = document.getElementById("p1");
Remove the child from the parent:
parent.removeChild(child);
It would be nice to be able to remove an element without referring to the
parent.
But sorry. The DOM needs to know both the element you want to
remove, and its parent.
Here is a common workaround: Find the child you want to remove, and use its
parentNode property to find the parent:
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
Replacing HTML Elements
To replace an element to the HTML DOM, use the replaceChild() method:
Example
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
</script>
Try it Yourself
JavaScript HTML DOM Node List
Previous
Next Chapter
A node list is a collection of nodes
HTML DOM Node List
The getElementsByTagName() method returns a node list. A node list is an
array-like collection of nodes.
The following code selects all <p> nodes in a document:
Example
var x = document.getElementsByTagName("p");
The nodes can be accessed by an index number. To access the second <p>
node you can write:
y = x[1];
Try it Yourself
Note: The index starts at 0.
HTML DOM Node List Length
The length property defines the number of nodes in a node list:
Example
var
myNodelist = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myNodelist.length;
Try it Yourself
Example explained:
1. Get all <p> elements in a node list
2. Display the length of the node list
The length property is useful when you want to loop through the nodes in a
node list:
Example
Change the background color of all <p> elements in a node list:
var
myNodelist = document.getElementsByTagName("p");
var i;
for (i = 0; i <
myNodelist.length; i++) {
myNodelist[i].style.backgroundColor = "red";
Try it Yourself
A node list is not an array!
A node list may look like an array, but it is not. You can loop through the
node list and refer to its nodes like an array. However, you cannot use
Array Methods, like valueOf() or join() on the node list.
JavaScript Window - The Browser
Object Model
Previous
Next Chapter
The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.
The Browser Object Model (BOM)
There are no official standards for the Browser Object Model (BOM).
Since modern browsers have implemented (almost) the same methods and
properties for JavaScript interactivity, it is often referred to, as methods and
properties of the BOM.
The Window Object
The window object is supported by all browsers. It represents the browser's
window.
All global JavaScript objects, functions, and variables automatically become
members of the window object.
Global variables are properties of the window object.
Global functions are methods of the window object.
Even the document object (of the HTML DOM) is a property of the window
object:
window.document.getElementById("header");
is the same as:
document.getElementById("header");
Window Size
Three different properties can be used to determine the size of the browser
window (the browser viewport, NOT including toolbars and scrollbars).
For Internet Explorer, Chrome, Firefox, Opera, and Safari:
window.innerHeight - the inner height of the browser window
window.innerWidth - the inner width of the browser window
For Internet Explorer 8, 7, 6, 5:
document.documentElement.clientHeight
document.documentElement.clientWidth
or
document.body.clientHeight
document.body.clientWidth
A practical JavaScript solution (covering all browsers):
Example
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
Try it yourself
The example displays the browser window's height and width: (NOT including
toolbars/scrollbars)
Other Window Methods
Some other methods:
window.open() - open a new window
window.close() - close the current window
window.moveTo() -move the current window
window.resizeTo() -resize the current window
You might also like
- CSE132A Solutions HW 1: Sname Sid Pid Color RedNo ratings yetCSE132A Solutions HW 1: Sname Sid Pid Color Red5 pages
- JavaScript Is The Programming Language of HTML and The WebNo ratings yetJavaScript Is The Programming Language of HTML and The Web58 pages
- Javascript Tutorial: Examples in Each ChapterNo ratings yetJavascript Tutorial: Examples in Each Chapter285 pages
- April 8 Learning MaterialActivity Switch StatementNo ratings yetApril 8 Learning MaterialActivity Switch Statement37 pages
- Introduction To Javascript: What You Should Already KnowNo ratings yetIntroduction To Javascript: What You Should Already Know34 pages
- JavaScript Fundamentals: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event Handlers: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event HandlersFrom EverandJavaScript Fundamentals: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event Handlers: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event HandlersNo ratings yet
- JavaScript Fundamentals: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event HandlersFrom EverandJavaScript Fundamentals: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event HandlersNo ratings yet
- % Parent (X, Y) Means: X Is A % Parent (Father or Mother) of YNo ratings yet% Parent (X, Y) Means: X Is A % Parent (Father or Mother) of Y1 page
- Horsepower To Kilowatt (HP To KW) and KW To HP (Kilowatts To MeNo ratings yetHorsepower To Kilowatt (HP To KW) and KW To HP (Kilowatts To Me2 pages
- Q1 PR2 LAS WEEK 1 Characterisics, Strngths ND WeaknessNo ratings yetQ1 PR2 LAS WEEK 1 Characterisics, Strngths ND Weakness14 pages
- Mechanical Engineering Mechanical Engineering: ISRO RAC 2014 Question Paper With AnswersNo ratings yetMechanical Engineering Mechanical Engineering: ISRO RAC 2014 Question Paper With Answers12 pages
- Introduction To Differential Calculus: Christopher ThomasNo ratings yetIntroduction To Differential Calculus: Christopher Thomas49 pages
- (Ebook) Philosophy of Language : 50 Puzzles, Paradoxes, and Thought Experiments by Michael P. Wolf ISBN 9781032023854, 9781003183167, 9781000829501, 9781000829617, 9781032023861, 1032023856, 1003183166, 1000829502, 1000829618 - Own the complete ebook with all chapters in PDF format100% (2)(Ebook) Philosophy of Language : 50 Puzzles, Paradoxes, and Thought Experiments by Michael P. Wolf ISBN 9781032023854, 9781003183167, 9781000829501, 9781000829617, 9781032023861, 1032023856, 1003183166, 1000829502, 1000829618 - Own the complete ebook with all chapters in PDF format78 pages
- HGEO Notes 7.4 Properties of Special ParallelogramsNo ratings yetHGEO Notes 7.4 Properties of Special Parallelograms9 pages
- Huang 2021 Smart Mater. Struct. 30 085012No ratings yetHuang 2021 Smart Mater. Struct. 30 08501218 pages
- Ivan Sutherland's Historic 1965 VR Talk: The Ultimate DisplayNo ratings yetIvan Sutherland's Historic 1965 VR Talk: The Ultimate Display2 pages
- ASTM D 3776 Standard Test Method For Mass Per Unit Area (Weight) of Fabric1No ratings yetASTM D 3776 Standard Test Method For Mass Per Unit Area (Weight) of Fabric15 pages
- Design and Fabrication of Automatic Balancing Bicycle: Mukeshkumar Prasad, Nilesh W. NirwanNo ratings yetDesign and Fabrication of Automatic Balancing Bicycle: Mukeshkumar Prasad, Nilesh W. Nirwan5 pages
- Hydrogen Purity Analysis For Fuel Cell VehiclesNo ratings yetHydrogen Purity Analysis For Fuel Cell Vehicles1 page
- Design and Sizing of A Grid Connected SoNo ratings yetDesign and Sizing of A Grid Connected So9 pages
- Malaysian Institute of Aviation Technology: Agas/Sept 2010 1No ratings yetMalaysian Institute of Aviation Technology: Agas/Sept 2010 177 pages
- KSB KWP: Non-Clogging Centrifugal PumpsNo ratings yetKSB KWP: Non-Clogging Centrifugal Pumps12 pages
- An Efficient Scenario Based Stochastic PNo ratings yetAn Efficient Scenario Based Stochastic P16 pages
