JavaScript Introduction

1. JavaScript Introduction .................................................................................................................................. 1

2. JavaScript Syntax .......................................................................................................................................... 5
3. JavaScript Statements .................................................................................................................................... 7
4. JavaScript Variables .................................................................................................................................... 10
5. JavaScript Data Types ................................................................................................................................. 13
6. JavaScript Objects ....................................................................................................................................... 14
7. JavaScript Functions .................................................................................................................................... 16
8. JavaScript Scope ......................................................................................................................................... 18
9. JavaScript Events ........................................................................................................................................ 19
10. JavaScript Strings ........................................................................................................................................ 20
11. JavaScript String Methods ........................................................................................................................... 22
12. JavaScript Numbers ..................................................................................................................................... 25
13. JavaScript Number Methods ........................................................................................................................ 27
14. JavaScript Operators.................................................................................................................................... 30
15. JavaScript Math Object ............................................................................................................................... 32
16. JavaScript Dates .......................................................................................................................................... 34
17. JavaScript Date Methods ............................................................................................................................. 36
18. JavaScript Arrays ........................................................................................................................................ 38
19. JavaScript Booleans .................................................................................................................................... 41
20. JavaScript Statements .................................................................................................................................. 42
21. JavaScript Regular Expressions ................................................................................................................... 44
22. JavaScript Type Conversion ........................................................................................................................ 46
23. JavaScript Comparison and Logical Operators ............................................................................................. 49
24. JavaScript If...Else Statements ..................................................................................................................... 50
25. JavaScript Switch Statement ........................................................................................................................ 51
26. JavaScript For Loop .................................................................................................................................... 53
27. JavaScript While Loop ................................................................................................................................ 55
28. JavaScript Errors - Throw and Try to Catch ................................................................................................. 57
29. JavaScript Debugging .................................................................................................................................. 59
30. JavaScript Hoisting...................................................................................................................................... 61
31. JavaScript Use Strict.................................................................................................................................... 62
32. JavaScript Coding Conventions ................................................................................................................... 64
33. JavaScript Best Practices ............................................................................................................................. 66
34. JavaScript Performance ............................................................................................................................... 68
35. JavaScript Reserved Words ......................................................................................................................... 69
36. JavaScript JSON.......................................................................................................................................... 70

1|P a ge
 1. JavaScript Introduction

 JavaScript is the most popular programming language in the world.

 It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones,
and more.
 This page contains some examples of what JavaScript can do in HTML.

JavaScript Can Change HTML Elements

 The HTML DOM (the Document Object Model) is the official W3C standard for accessing
HTML elements.
 JavaScript can manipulate the DOM (change HTML contents).
 The following example changes the content (innerHTML) of an HTML element identified with
id="demo":
Example
document.getElementById("demo").innerHTML = "Hello JavaScript";
 The method document.getElementById() is one of many methods in the HTML DOM.
You can use JavaScript to:
 Change HTML elements
 Delete HTML elements
 Create new HTML elements
 Copy and clone HTML elements
 And much more ...

JavaScript Can Change HTML Attributes

 This example changes the value of the source attribute (src) of an HTML <img> element:
The Light bulb

Click the light bulb to turn on/off the light

 With JavaScript, you can change almost any HTML attribute.

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";
 With JavaScript, you can change almost any CSS value.

JavaScript Can Validate Data

 JavaScript is often used to validate input:
 Please input a number between 1 and 10

Did You Know?

JavaScript and Java are different languages, both in concept and design.
JavaScript was invented by Brendan Eich, to be used in Netscape (a no longer existing browser)
in 1995,and was adopted by the ECMA standard association in 1997.
ECMA-262 is the official name. ECMAScript 5 (version 1.8.5 - July 2010) is the latest standard.

JavaScript Where To

1|P a ge
  In HTML, JavaScripts must be inserted between <script> and </script> tags.
 JavaScripts can be put in the <body> and in the <head> section of an HTML page.

The <script> Tag

 To insert a JavaScript into an HTML page, use the <script> tag.
 The <script> and </script> tells where the JavaScript starts and ends.
 The lines between <script> and </script> contain the JavaScript code:
Example
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "My First JavaScript Function";
}
</script>
 You don't have to understand the code above.
 Just take it for a fact, that the browser will interpret the code as JavaScript.
Old examples may have type="text/javascript" in the <script> tag. This is no longer required.
JavaScript is the default scripting language in all modern browsers, and in HTML5.

JavaScript Functions and Events

 Often, JavaScript code is written to be executed when an event occurs, like when the user clicks
a button.
 JavaScript code inside a function can be invoked, when an event occurs.
 Invoke a function = call upon a function (ask for the code in the function to be executed).
 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.
 Often you will see scripts at the bottom of the <body> section. This can reduce display time.
 Sometimes you will see all JavaScript functions in the <head> section.
 Anyway, separating HTML and JavaScript, and putting 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>
Draft Copy 2 | P a g e
 </body>
</html>

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>
It is a good idea to place scripts at the bottom of the <body> element.
This improves page load, because HTML loading is not blocked by scripts loading.

External JavaScripts
 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 source (src) attribute of the
<script> tag:
Example
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
 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 you put the reference in the HTML
document.
External scripts cannot contain <script> tags.

JavaScript Output

 JavaScript does not have any print or output functions.

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

Manipulating HTML Elements

 To access an HTML element from JavaScript, you can use the document.getElementById(id)
method.
Draft Copy 3 | P a g e
  Use the id attribute to identify the HTML element, and innerHTML to refer to the element
content:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML = "Paragraph changed.";
</script>
</body>
</html>
 The JavaScript statement above (inside the <script> tags) is executed by the web browser:
 document.getElementById("demo") is JavaScript code for finding an HTML element using the
id attribute.
 innerHTML = "Paragraph changed." is JavaScript code for changing an element's HTML
content (innerHTML).

Writing to The HTML Document

 For testing purposes, you can use JavaScript to write directly to the HTML document:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(Date());
</script>
</body>
</html>
Use document.write for testing only.
If you execute it, on a loaded HTML document, all HTML elements will be overwritten.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.write(Date());
}
</script>
</body>
</html>

Writing to The Console

Draft Copy 4 | P a g e
  If your browser supports debugging, you can use the console.log() method to display JavaScript
values.
 Activate debugging in your browser with F12, and select "Console" in the debugger menu.
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>

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.

2. JavaScript Syntax

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

JavaScript Literals
 In a programming language, a literal is a constant value, like 3.14.
 Number literals can be written with or without decimals, and with or without scientific
notation (e):
3.14
1001
123e5
String literals can be written with double or single quotes:
"John Doe"
'John Doe'
Expression literals evaluate (compute) to values:
5+6
5 * 10
 Array literals defines an array:
[40, 100, 1, 5, 25, 10]
 Object literals defines an object:
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
 Function literals defines a function:
function myFunction(a, b) { return a * b;}

JavaScript Variables
 In a programming language (and in algebra), variables are used to store data values.

Draft Copy 5 | P a g e
  JavaScript uses the var keyword to define variables.
 An equal sign is used to assign values to variables (just like algebra).
 In this example, length is defined as a variable. Then, it is assigned (given) the value 6:
var length;
length = 6;

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

JavaScript Operators
 JavaScript uses arithmetic operators to compute values (just like algebra):
(5 + 6) * 10
 JavaScript uses an assignment operator to assign values to variables (just like algebra):
x = 5;
y = 6;
z = (x + y) * 10;
 The JavaScript language has many types of operators:
Type Examples Description
Assignment, arithmetic, and bitwise operators = + - * / Described in JS Operators
Conditional, comparison, and logical operators == != < > Described in JS Comparisons

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

JavaScript Keywords
 A JavaScript statement often starts with a keyword.
 The var keyword tells the browser to create a new variable:
var x = 5 + 6;
var y = x * 10;

JavaScript Identifiers
 All programming languages must identify all variables with unique names.
 These unique names are called identifiers.
 Identifiers can contain letters, digits, underscores, and dollar signs, but cannot begin with a
number.
 Reserved words (like JavaScript keywords) cannot be used as identifiers.

JavaScript Comments
 Not all JavaScript statements are "executable commands".
 Anything after double slashes // is treated as a comment, ignored, and not executed:
// x = 5 + 6; Will not be executed

JavaScript Data Types

 JavaScript variables can hold many data types: numbers, text strings, arrays, objects and more:
var length = 16; // Number assigned by a number literal
var points = x * 10; // Number assigned by an expression literal

Draft Copy 6 | P a g e
 var lastName = "Johnson"; // String assigned by a string literal
var cars = ["Saab", "Volvo", "BMW"]; // Array assigned by an array literal
var x = {firstName:"John", lastName:"Doe"}; // Object assigned by an object literal

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:
16 + "Volvo"
 Does it make any sense to add "Volvo" to sixteen? Will it produce an error or a result?
"16Volvo"
 You will learn much more about data types in a later chapter.

JavaScript Functions
 JavaScript statements written inside a function, can be invoked and reused many times.
 Invoke a function = call a function (ask for the code in the function to be executed).
function myFunction(a, b)
{
return a * b; // return the product of a and b
}

JavaScript is Case Sensitive

 JavaScript identifiers are case sensitive.
 The variables lastName and lastname, are different variables.
 The functions myFunction and myfunction, are different functions.
 JavaScript does not interpret Var as the keyword var.

JavaScript Character Set

 JavaScript uses the Unicode character set.
 Unicode covers (almost) all the characters, punctuations, and symbols in the world.

Did You Know?

It is common, in JavaScript, to use camelCase names.
You will often see identifier names written like lastName (instead of lastname).

3. JavaScript Statements

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

JavaScript Statements
 In HTML, JavaScript statements are "commands" to the browser.
 The purpose, of the statements, is to tell the browser what to do.
 This statement tells the browser to write "Hello Dolly" inside an HTML element identified with
id="demo":
Example
document.getElementById("demo").innerHTML = "Hello Dolly.";

JavaScript Code
 JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
 Each statement is executed by the browser in the sequence they are written.
Draft Copy 7 | P a g e
  This example will manipulate two different HTML elements:
Example
document.getElementById("demo").innerHTML = "Hello Dolly.";
document.getElementById("myDiv").innerHTML = "How are you?";

Semicolon;
 Semicolon separates JavaScript statements.
 Normally you add a semicolon at the end of each executable statement:
a = 5;
b = 6;
c = a + b;
 Multiple statements on one line is allowed:
a = 5; b = 6; c = a + b;
You might see examples without semicolons.
Ending statements with semicolon is optional in JavaScript.

JavaScript Code Blocks

 JavaScript statements can be grouped together in blocks.
 Blocks start with a left curly bracket, and end with a right curly bracket.
 The purpose of a block is to make the sequence of statements execute together.
 A good example of statements grouped together in blocks, are in JavaScript functions.
 This example will run a function that will manipulate two HTML elements:
Example
function myFunction() {
document.getElementById("demo").innerHTML = "Hello Dolly.";
document.getElementById("myDIV").innerHTML = "How are you?";
}
In this tutorial we use 4 spaces of indentation for code blocks.
You will learn much more about functions later in this tutorial.

JavaScript Statement Identifiers

 JavaScript statements often start with a statement identifier to identify the JavaScript action to
be performed.
 Statement identifiers are reserved words and cannot be used as variable names (or any other
things).
 Here is a list of some of the JavaScript statements (reserved words) you will learn about in this
tutorial:
Statement Description
break Terminates a switch or a loop
catch Marks the block of statements to be executed when an error occurs in a try block
continue Jumps out of a loop and starts at the top
debugger Stops the execution of JavaScript, and calls (if available) the debugging function
do ... while Executes a block of statements, and repeats the block, while a condition is true
for Marks a block of statements to be executed, as long as a condition is true
for ... in Marks a block of statements to be executed, for each element of an object (or array)
function Declares a function
if ... else Marks a block of statements to be executed, depending on a condition
return Exits a function

Draft Copy 8 | P a g e
switch Marks a block of statements to be executed, depending on different cases
throw Throws (generates) an error
try Implements error handling to a block of statements
var Declares a variable
while Marks a block of statements to be executed, while a condition is true

JavaScript White Space

 JavaScript ignores extra 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";

JavaScript Line Length and Line Breaks

 For best readability, programmers often like to 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.";

JavaScript Line Break in a String

 You can break up a code line within a text string with a backslash:
Example
document.getElementById("demo").innerHTML = "Hello \
Dolly!";

However, you cannot break up a code line like this:

Example

document.getElementById("demo").innerHTML = \
"Hello Dolly!";
JavaScript Comments

 JavaScript comments can be used to explain the code, and make the code 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 a line, will be ignored by JavaScript (will not be executed).
 The following example uses a single line comment in front of 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.";
 This example uses a single line comment at the end of each line, to explain the code:
Example

Draft Copy 9 | P a g e
 var x = 5; // Declare x, give it the value of 5
var y = x + 2; // Declare y, give it the value of x + 2

Multi-line Comments
 Multi-line comments start with /* and end with */.
 Any text between /* and */ will be ignored by JavaScript.
 The following 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.";
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, can be very suitable for testing.
 Adding // in front of a code line changes the code lines from an executable line to a comment.
 The next 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.";

The following 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.";
*/
4. JavaScript Variables

 JavaScript variables are "containers" for storing data values

JavaScript Variables Stores Data

Example
var x = 5;
var y = 6;
var z = x + y;
 From the example we can expect: x stores the value 5, y stores the value 6, and z stores the value
11.

Much Like Algebra

x=5
y=6
z=x+y

Draft Copy 10 | P a g e
  In algebra we use letters (like x) to hold values (like 5).
 From the expression z = x + y above, we can calculate the value of z to be 11.
 In JavaScript these letters are called variables.
JavaScript variables are containers for storing values.

JavaScript Variables
 As with algebra, JavaScript variables can be used to hold values (x = 5) or expressions (z = x +
y).
 Variable can have short names (like x and y) or more descriptive names (age, sum,
totalVolume).
 Variable names can contain letters, digits, underscores, and dollar signs.
o Variable names must begin with a letter
o Variable names can also begin with $ and _ (but we will not use it)
o Variable names are case sensitive (y and Y are different variables)
o Reserved words (like JavaScript keywords) cannot be used as variable names

Both JavaScript statements and JavaScript variables are case-sensitive.

The Assignment Operator

 In JavaScript, the equal sign (=) is an "assignment" operator, is not an "equal to" operator.
 This is different from algebra. The following does not make any sense in algebra:
x=x+5
 In JavaScript, however it makes perfect sense: Assign the value of x + 5 to the variable x.
 In reality: Calculate the value of x + 5. Then put the result into the variable x.
The "equal to" operator in JavaScript, is written like == or ===. You will see it soon!

JavaScript Data Types

 JavaScript variables can hold many types of data, like text values (person = "John Doe").
 In JavaScript texts are called strings or text strings.
 JavaScript can handle many types of data, but for now, just think of numbers and strings.
 When you assign a string value to a variable, you put double or single quotes around the value.
 When you assign a numeric value to a variable, you do not put quotes around the value.
 If you put quotes around a numeric value, it will be treated as a text string.
Example
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';

Declaring (Creating) JavaScript Variables

 Creating a variable in JavaScript is called "declaring" a variable.
 You declare JavaScript variables with the var keyword:
var carName;
 After the declaration, the variable is empty (it has no value).
 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.

Draft Copy 11 | P a g e
  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>
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 lastName = "Doe", age = 30, job = "carpenter";
 Your declaration can also span multiple lines:
var lastName = "Doe",
age = 30,
job = "carpenter";
 In JavaScript you can always separate statements by semicolon, but then you cannot omit the
var keyword.
Wrong:
var lastName = "Doe"; age = 30; job = "carpenter";
Right:
var lastName = "Doe"; var age = 30; var job = "carpenter";

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. Variable
declared without a value will have the value undefined.
 The variable carName will have the value undefined after the execution of the following
statement:
var carName;

Re-Declaring JavaScript Variables

 If you re-declare a JavaScript variable, it will not lose its value:.
 The value of the variable carName will still have the value "Volvo" after the execution of the
following two statements:
var carName = "Volvo";
var carName;

JavaScript Arithmetic
 As with algebra, you can do arithmetic with JavaScript variables, using operators like = and +:
Example
var y = 5;
var x = y + 2;
 You can also add strings, but strings will be concatenated (added end-to-end):
Example
var y = "5";
var x = y + 2;
Draft Copy 12 | P a g e
  Note that if you add a number to a string, both will be treated as strings.
 You will learn a lot more about arithmetic operators later in this tutorial
5. JavaScript Data Types

 String, Number, Boolean, Array, Object, Null, Undefined.

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
 You will learn a lot 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
 You will learn a lot more about numbers in the advanced section of this tutorial.

JavaScript Booleans
 Booleans can only have two values: true or false.
var x = true;
var y = false;
 Booleans are often used in conditional testing.
 You will learn a lot more about conditional testing later in this tutorial.

JavaScript Arrays
 JavaScript arrays are written with square brackets.
 Array items are separated by commas.

Draft Copy 13 | P a g e
  The following code declares (creates) an array called cars, containing three items (car names):
Example
var cars = ["Saab", "Volvo", "BMW"];
 Array indexes are zero-based, which means the first item is [0], second is [1], and so on.
 You will learn a lot 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"};
 The object (person) in the example above has 4 properties: firstName, lastName, age, and
eyeColor.
 You will learn a lot more about objects later in this tutorial.

Undefined and Null

 The value of a variable with no value is undefined.
 Variables can be emptied by setting the value to null.
Example
var cars; // Value is undefined
var person = null; // Value is null

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

In JavaScript, an array is a special type of object. Therefore typeof [1,2,3,4] returns object.

Do Not Declare String, Number, and Boolean 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.

6. JavaScript Objects

 JavaScript objects are containers for variables called properties and methods.

Real Life Objects, Properties, and Methods

 In real life, a car is an object.

Draft Copy 14 | P a g e
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
 In JavaScript, almost "everything" is an object.
In JavaScript, objects are king. When you understand objects, you will understand JavaScript.
 You have already learned that JavaScript variables are containers for data values.
 This code assigns the value "Fiat" to a variable named car:
var car = "Fiat";
Objects are variables too. But objects can contain many values (many variables).
var car {type:"Fiat", model:500, color:"white"};
 In the example above, 3 values ("Fiat", 500, "white") are assigned to the variable named car.
 In the example above, 3 variables (type, model, color) are assigned to the variable named car:
JavaScript objects are containers for variables.

Object Definition
 With an object literal, you define and create a JavaScript object:
Example
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
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"
};

Object Properties
 It is ok to say: "JavaScript objects are containers for variables".
 But, it is more common to say: "JavaScript objects are containers for named values.
 Named values are written as name : value pairs (name and value separated by a colon).
 The name value pairs, in JavaScript objects, are called object properties.
JavaScript objects are containers for variables called properties.
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
Draft Copy 15 | P a g e
Accessing Object Properties
 You can access object properties in two ways:
Example1
person.lastName;
Example2
person["lastName"];

Object Methods
 An object method is a function definition stored as an object property.
 It will execute (as a function) when it is invoked with ().
 This example access the fullName() method of a person object:
Example
name = person.fullName();
 If you access the fullName property of the person object, it will return the function definition:
Example
name = person.fullName;

JavaScript objects are containers for variables called properties and methods.

You will learn much more about functions, properties, and methods, later in this tutorial.

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.
 There are many different ways to create, use, and change JavaScript objects.
There are also many different ways to create, use, and change properties and methods.
You will learn much more about objects later in this tutorial.
7. JavaScript Functions

 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
}

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: {}
Draft Copy 16 | P a g e
 functionName(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 are used 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

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);
}

JavaScript Functions are Objects

 In JavaScript, functions are objects.
 JavaScript functions have properties and methods.
 You can add your own properties and methods to functions.

JavaScript Functions are Variables Too

 In JavaScript, functions can be used as variables:
Example
Instead of:
temp = toCelsius(32);
text = "The temperature is " + temp + " Centigrade";

Draft Copy 17 | P a g e
 You can use:
text = "The temperature is " + toCelsius(32) + " Centigrade";
 JavaScript functions can be redefined like ordinary variables.
 JavaScript functions can also be passed as values to other functions.
You will learn a lot more about functions later in this tutorial.
8. JavaScript Scope
 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
}
 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
}

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
}

The Lifetime of JavaScript Variables

 The lifetime of a JavaScript variable starts when it is declared.
Draft Copy 18 | P a g e
  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";
}

Did You Know?

Your global variables, or functions, can overwrite window variables or functions.
Anyone, inclusive the window object, can overwrite your global variables or functions.
9. JavaScript Events
 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:
o An HTML web page has finished loading
o An HTML input field was changed
o 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:
Example
<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>
 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 it's own element (using this.innerHTML):
Example
<button onclick="this.innerHTML=Date()">The time is?</button>
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>

Common HTML Events

 Here is a list of some common HTML events:
Draft Copy 19 | P a g e
 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

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 input 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.

10. JavaScript Strings

 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';

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"';
Or you can put quotes inside a string by using the \ escape character:
Example
var answer = 'It\'s alright';
var answer = "He is called \"Johnny\""

String Length
The length of a string (a string object) is found in the built in property length:
Example
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

Special Characters
 In JavaScript, strings are written as characters inside single or double quotes.
Draft Copy 20 | P a g e
  Because of this, JavaScript will misunderstand this string:
"We are the so-called "Vikings" from the north."
 The string will be chopped to "We are the so-called ".
 To solve this problem, you can place a backslash (\) before the double quotes in "Vikings":
"We are the so-called \"Vikings\" from the north."
 The backslash is an escape character. Escape characters turns special characters into string
characters:
 The escape character (\) can be used to insert apostrophes, new lines, quotes, and other special
characters into a string.
 The table below lists other 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

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");
// type of x will return String
// type of y will return Object
Don't create String objects. They slow down execution speed, and produce nasty side effects:

Example
var x = "John";
var y = new String("John");
// (x === y) is now false because x is a string and y is an object.

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 Properties
Property Description
constructor 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)
Draft Copy 21 | P a g e
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
toLocaleLowerCase() Converts a string to lowercase letters, according to the host's locale
toLocaleUpperCase() Converts a string to uppercase letters, according to the 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
11. JavaScript String Methods
 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");
 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");
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");
Did You Notice?
 The two methods, indexOf() and search(), are equal.
 They accept the same arguments (parameters), and they return the same value.
Draft Copy 22 | P a g e
  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
 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
 If you omit the second parameter, the method will slice out the rest of the string:
Example
var res = str.slice(7);
or, counting from the end:
Example
var res = str.slice(-12);
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
 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:

Draft Copy 23 | P a g e
 Banana
 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");
 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
 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

The concat() Method

concat() joins two or more strings:
Example
var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);
 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

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

Accessing a String as an Array is Unsafe

Draft Copy 24 | P a g e
  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"; // String
txt.split(","); // Split on commas
txt.split(" "); // Split on spaces
txt.split("|"); // Split on pipe
 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

12. JavaScript Numbers

 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) Exponent Sign
52 bits (0 - 51) 11 bits (52 - 62) 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

Draft Copy 25 | P a g e
  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
 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

Hexadecimal
 JavaScript interprets numeric constants as hexadecimal if they are preceded by 0x.
Example
var x = 0xFF; // x will be 255
 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

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;
}
 Division by 0 (zero) also generates Infinity:
Example
var x = 2 / 0; // x will be Infinity
var y = -2 / 0; // y will be -Infinity
 Infinity is a number: typeOf Infinity returns number.
Example
typeof Infinity; // returns "number"

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)
 However, if the string contains a numeric value , the result will be a number:
Example
var x = 100 / "10"; // x will be 10
 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
 Watch out for NaN. If you use NaN in a mathematical operation, the result will also be NaN.
Example

Draft Copy 26 | P a g e
 var x = NaN;
var y = 5;
var z = x + y; // z will be NaN
 NaN is a number: typeOf NaN returns number.
Example
typeof NaN; // returns "number"

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

Don't create Number objects. They slow down execution speed, and produce nasty side effects:

Example
var x = 123;
var y = new Number(123);
(x === y) // is false because x is a number and y is an object.

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_INFINITY Represents negative infinity (returned on overflow)
NaN Represents a "Not-a-Number" value
POSITIVE_INFINITY Represents infinity (returned on overflow)

Example
var x = Number.MAX_VALUE;
 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
Number methods are covered in the next chapter

13. JavaScript Number Methods

 Number methods help you to work with numbers.

Global Methods

Draft Copy 27 | P a g e
  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 variable. 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

The toExponential() Method

 toExponential() returns a string, with a number rounded and written using exponential notation.
 A parameter defines the number of character 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
 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
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
Draft Copy 28 | P a g e
 x.toPrecision(2); // returns 9.7
x.toPrecision(4); // returns 9.656
x.toPrecision(6); // returns 9.65600

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

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

Draft Copy 29 | P a g e
  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.

14. JavaScript Operators

= is used to assign values, + is used to add values, ++ is used to increment values.

 The assignment operator = is used to assign values to JavaScript variables.

 The arithmetic operator + is used to add values together.
Example
 Assign values to variables and add them together:
y = 5; // assign the value 5 to y
z = 2; // assign the value 2 to z
x = y + z; // assign the value 7 (y + z) to x
The result of x will be:
7

JavaScript Arithmetic Operators

 Arithmetic operators are used to perform arithmetic between variables and/or values.
 Given that y = 5, the table below explains the arithmetic operators:
Operator Description Example Result Result Try it
+ Addition x=y+2 y=5 x=7 Try it »
- Subtraction x=y-2 y=5 x=3 Try it »
* Multiplication x=y*2 y=5 x = 10 Try it »
/ Division x=y/2 y=5 x = 2.5 Try it »
% Modulus (division x=y%2 y=5 x=1 Try it »
remainder)
++ Increment x = ++y y=6 x=6 Try it »
x = y++ y=6 x=5 Try it »
-- Decrement x = --y y=4 x=4 Try it »
x = y-- y=4 x=5 Try it »

JavaScript Assignment Operators

 Assignment operators are used to assign values to JavaScript variables.
 Given that x = 10 and y = 5, the table below explains the assignment operators:
Operator Example Same As Result Try it
= x=y x=y x=5 Try it »
+= x += y x=x+y x = 15 Try it »
-= x -= y x=x-y x=5 Try it »
*= x *= y x=x*y x = 50 Try it »
/= x /= y x=x/y x=2 Try it »
%= x %= y x=x%y x=0 Try it »

JavaScript String Operators

The + operator can also be used to concatenate (add) strings.
 When used on strings, the + operator is called the concatenation operator.

Draft Copy 30 | P a g e
Example
 To add two or more string variables together, use the + operator.
txt1 = "What a very";
txt2 = "nice day";
txt3 = txt1 + txt2;
The result of txt3 will be:
What a verynice day
 To add a space between the two strings, insert a space into one of the strings:
Example
txt1 = "What a very ";
txt2 = "nice day";
txt3 = txt1 + txt2;
The result of txt3 will be:
What a very nice day
or insert a space into the expression:
Example
txt1 = "What a very";
txt2 = "nice day";
txt3 = txt1 + " " + txt2;
The result of txt3 will be:
What a very nice day
 The += operator can also be used to concatenate strings:
Example
txt1 = "What a very ";
txt1 += "nice day";
The result of txt1 will be:
What a very nice day

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
 The rule is: If you add a number and a string, the result will be a string!

JavaScript Bitwise Operators

 Bit operators work on 32 bits 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:
1
Operator Description Example Same as Result Decimal
& AND x=5&1 0101 & 0001 0001 1
| OR x=5|1 0101 | 0001 0101 5
~ NOT x=~5 ~0101 1010 10
^ XOR x=5^1 0101 ^ 0001 0100 4
<< Left shift x = 5 << 1 0101 << 1 1010 10
>> Right shift x = 5 >> 1 0101 >> 1 0010 2
Draft Copy 31 | P a g e
 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

The typeof operator

 The typeof operator returns the type of a variable (or an expression):
Example
var x = 5;
var y = "John";
typeof x // Returns number
typeof y // 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

The delete Operator

 The delete operator can be used to delete properties from objects:
Example
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
delete person.age;
 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.

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
 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)

15. JavaScript Math Object

 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

 Math has no constructor. No methods have to create a Math object first.

Draft Copy 32 | P a g e
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); // returns -8
Example
Math.max(0, 150, 30, 20, -8); // returns 150

Math.random()
 Math.random() returns a random number between 0 and 1:
Example
Math.random(); // returns a random number

Math.round()
 Math.round() rounds a number to the nearest integer:
Example
Math.round(4.7); // returns 5
Math.round(4.4); // returns 4

Math.ceil()
 Math.ceil() rounds a number up to the nearest integer:
Example
Math.ceil(4.4); // returns 5

Math.floor()
 Math.floor() rounds a number down to the nearest integer:
Example
Math.floor(4.7); // returns 4
 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

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

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

Draft Copy 33 | P a g e
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,...,n) Returns the number with the highest value
min(x,y,z,...,n) Returns the number with the lowest value
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

16. JavaScript Dates

 The Date object lets you work with dates (years, months, days, minutes, seconds, milliseconds)

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>
 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 week, a day, a minute, a second, and a millisecond.
 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(), without parameters, creates a new date object with the current date and time:
Example
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
 Using new Date(), with a date string, creates a new date object with the specified date and time:
Example
<script>
var d = new Date("October 13, 2014 11:13:00");
document.getElementById("demo").innerHTML = d;
</script>
 Using new Date(), with a number, creates a new date object with number of millisecond since
1970/01/01:
Example

Draft Copy 34 | P a g e
 <script>
var d = new Date(0);
document.getElementById("demo").innerHTML = d;
</script>
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(), with 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>
 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>
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.
 The next chapter, of this tutorial, covers the date object's methods.

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>
 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>
 The toDateString() method converts a date to a more readable format:
Example

Draft Copy 35 | P a g e
 <script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
</script>
Date objects are static, not dynamic. The computer time is ticking, but date objects, once created, are not.

17. JavaScript Date Methods

 Date methods let you get and set date values (years, months, days, 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 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 the number of milliseconds since 01.01.1970:
Example
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
</script>

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>

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>
 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","Saturday"];
document.getElementById("demo").innerHTML = days[d.getDay()];
</script>

Draft Copy 36 | P a g e
Date Set Methods
 Set methods are used for setting a part of a date. Here are the most common (alphabitically):
Method Description
setDate() Set the day as a number (1-31)
setFullYear() Set the year (optionally month and day yyyy.mm.dd)
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>

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>
 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>
If adding days, shifts the month or year, the changes are handled automatically by the Date object.

Date Input - Parsing Dates

 If you have an input value (or any 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>
 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);

Draft Copy 37 | P a g e
 document.getElementById("demo").innerHTML = d;
</script>

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;

JavaScript counts months from 0 to 11. January is 0. December is 11.

18. JavaScript Arrays

 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.

Example
var cars = [
"Saab",
"Volvo",
"BMW"
];
Don't put a comma after the last element (like "BMW",). It 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";

Draft Copy 38 | P a g e
  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");
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 access the value of the first element in myCars:
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];
 Objects use names to access its "members". In this example, person.firstName returns John:
Object:
var person = {firstName:"John", lastName:"Doe", age:46};

Array Properties and Methods

 The real strength of JavaScript arrays are the built-in array properties and methods:
Examples
Draft Copy 39 | P a g e
 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
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 to use the length property:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits
 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

Looping Array Elements

 The best way to loop through an array is using a standard for loop:
Example
var index;
var fruits = ["Banana", "Orange", "Apple", "Mango"];
for (index = 0; index < fruits.length; index++) {
text += fruits[index];
}

Associative Arrays? No Way!

 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.
Wrong:
var person = new Array()
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
 The example above looks like it works. But it does not.
 If you try it, person["firstName"] will return John, but person[0] will return undefined, and
person.length will return 0.
If you want to create an associative array, create an object instead.

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.
 You should use arrays when you want the element names to be sequential numbers.

Avoid new Array ()

 There is no need to use the JavaScript's built-in array constructor new Array().

Draft Copy 40 | P a g e
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
 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 !!!!!

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
 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;
}
 The function above always return true if the argument is an array.
 Or more precisely: it returns true if the object prototype of the argument is "[object array]".

19. JavaScript Booleans

 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
Or even easier:
Example
(10 > 9) // also returns true
10 > 9 // also returns true

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:
Operator Description Example
== equal to if (day == "Monday")
> greater than if (salary > 9000)

Draft Copy 41 | P a g e
< 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

Everything Without a Real Value is False

 The Boolean value of 0 (zero) is false:
var x = 0;
Boolean(x); // returns false
 The Boolean value of -0 (minus zero) is false:
var x = -0;
Boolean(x); // returns false
 The Boolean value of "" (empty string) is false:
var x = "";
Boolean(x); // returns false
 The Boolean value of undefined is false:
var x;
Boolean(x); // returns false
 The Boolean value of null is false:
var x = null;
Boolean(x); // returns false
 The Boolean value of false is (you guessed it) false:
var x = false;
Boolean(x); // returns false
 The Boolean value of NaN is false:
var x = 10 / "H";
Boolean(x); // returns false

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.

20. JavaScript Statements

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

JavaScript Statements
 In HTML, JavaScript statements are "commands" to the browser.
 The purpose, of the statements, is to tell the browser what to do.
 This statement tells the browser to write "Hello Dolly" inside an HTML element identified with
id="demo":
Example
document.getElementById("demo").innerHTML = "Hello Dolly.";

Draft Copy 42 | P a g e
JavaScript Code
 JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
 Each statement is executed by the browser in the sequence they are written.
 This example will manipulate two different HTML elements:
Example
document.getElementById("demo").innerHTML = "Hello Dolly.";
document.getElementById("myDiv").innerHTML = "How are you?";

Semicolon;
 Semicolon separates JavaScript statements.
 Normally you add a semicolon at the end of each executable statement:
a = 5;
b = 6;
c = a + b;
 Multiple statements on one line is allowed:
a = 5; b = 6; c = a + b;
You might see examples without semicolons.
Ending statements with semicolon is optional in JavaScript.

JavaScript Code Blocks

 JavaScript statements can be grouped together in blocks.
 Blocks start with a left curly bracket, and end with a right curly bracket.
 The purpose of a block is to make the sequence of statements execute together.
 A good example of statements grouped together in blocks, are in JavaScript functions.
 This example will run a function that will manipulate two HTML elements:
Example
function myFunction() {
document.getElementById("demo").innerHTML = "Hello Dolly.";
document.getElementById("myDIV").innerHTML = "How are you?";
}
In this tutorial we use 4 spaces of indentation for code blocks.
You will learn much more about functions later in this tutorial.

JavaScript Statement Identifiers

 JavaScript statements often start with a statement identifier to identify the JavaScript action to
be performed.
 Statement identifiers are reserved words and cannot be used as variable names (or any other
things).
 Here is a list of some of the JavaScript statements (reserved words) you will learn about in this
tutorial:
Statement Description
break Terminates a switch or a loop
catch Marks the block of statements to be executed when an error occurs in a try block
continue Jumps out of a loop and starts at the top
debugger Stops the execution of JavaScript, and calls (if available) the debugging function
do ... while Executes a block of statements, and repeats the block, while a condition is true
for Marks a block of statements to be executed, as long as a condition is true
for ... in Marks a block of statements to be executed, for each element of an object (or array)
function Declares a function
if ... else Marks a block of statements to be executed, depending on a condition
return Exits a function
switch Marks a block of statements to be executed, depending on different cases
Draft Copy 43 | P a g e
throw Throws (generates) an error
try Implements error handling to a block of statements
var Declares a variable
while Marks a block of statements to be executed, while a condition is true

JavaScript White Space

 JavaScript ignores extra 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";

JavaScript Line Length and Line Breaks

 For best readability, programmers often like to 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.";

JavaScript Line Break in a String

 You can break up a code line within a text string with a backslash:
Example
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
 However, you cannot break up a code line like this:
Example
document.getElementById("demo").innerHTML = \
"Hello Dolly!";

21. JavaScript Regular Expressions

 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).
Draft Copy 44 | P a g e
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:
6

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");

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!
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");

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
i Perform case-insensitive matching
g Perform a global match (find all matches rather than stopping after the first match)
m Perform multiline matching

Regular Expression Patterns

 Brackets are used to find a range of characters:
Expression Description
[abc] Find any of the characters between the brackets

Draft Copy 45 | P a g e
[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:
Metacharacter 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

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:
e

22. JavaScript Type Conversion

 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

Draft Copy 46 | P a g e
  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
Please observe:
 The data type of NaN is number
 The data type of an array is object
 The data type of a date is object
 The data type of null is object
 The data type of an undefined variable is undefined
 You cannot use typeof to define if an object is an JavaScript Array or a JavaScript Date.

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] }
 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;
}
 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;
}

Draft Copy 47 | P a g e
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
 The Number method toString() does the same.
Example
x.toString()
(123).toString()
(100 + 23).toString()

Converting Booleans to Strings

 The global method String() can convert booleans to strings.
String(false) // returns "false"
String(true) // 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)

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

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.

Draft Copy 48 | P a g e
 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 because null is converted to 0
"5" + null // returns "5null" because null is converted to "null"
"5" + 1 // returns "51" because 1 is converted to "1"
"5" - 1 // returns 4 because "5" is converted to 5

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 // toString converts to "123"
// if myVar = true // toString converts to "true"
// if myVar = false // toString converts to "false"
23. JavaScript Comparison and Logical Operators
 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:
Operator Description Comparing Returns Try it
== equal to x == 8 false Try it »
x == 5 true Try it »
=== equal value and equal type x === "5" false Try it »
x === 5 true Try it »
!= not equal x != 8 true Try it »
!== not equal value or not equal type x !== "5" true Try it »
x !== 5 false Try it »
> 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:
Operator Description Example
Draft Copy 49 | P a g e
&& and (x < 10 && y > 1) is true
|| or (x == 5 || y == 5) is false
! not !(x == y) is true

Conditional Operator
 JavaScript also contains a conditional operator that assigns a value to a variable based on some
condition.
Syntax
variablename = (condition) ? value1:value2
Example
voteable = (age < 18) ? "Too young":"Old enough";
 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".

24. JavaScript If...Else Statements

 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 if to specify a block of code to be executed, if a specified condition is true
 Use else to specify a block of code to be executed, if the same condition is false
 Use else if to specify a new condition to test, if the first condition is false
 Use 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 time is less than 20:00:
if (time < 20) {
greeting = "Good day";
}
The result of greeting will be:

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 time is less than 20:00, create a "Good day" greeting, otherwise "Good evening":

Draft Copy 50 | P a g e
 if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
The result of greeting will be:
Good evening

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 evening

25. JavaScript Switch Statement

 The switch statement is used to perform different action 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
Draft Copy 51 | P a g e
  Use today's weekday number to calculate weekday name: (Sunday=0, Monday=1, Tuesday=2,
...)
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:
Tuesday

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 execution of code and/or 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
 If today is neither Saturday nor Sunday, 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

Draft Copy 52 | P a g e
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";
}
26. JavaScript For Loop
 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>";
}

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.
Draft Copy 53 | P a g e
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>";
}
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 (var 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>";
}
 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>";
}

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--), or larger 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++;
}

The For/In Loop

 The JavaScript for/in statement loops through the properties of an object:
Example
Draft Copy 54 | P a g e
 var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
text += person[x];
}

The While Loop

 The while loop and the do/while loop will be explained in the next chapter.

27. JavaScript While Loop

 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++;
}
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);
 Do not forget to increase the variable used in the condition, otherwise the loop will never end!

Comparing For and While

Draft Copy 55 | P a g e
  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
cars = ["BMW","Volvo","Saab","Ford"];
var i = 0;
var text = "";

for (;cars[i];) {
text += cars[i] + "<br>";
i++;
}
 The loop in this example uses a while loop to collect the car names from the cars array:
Example
cars = ["BMW","Volvo","Saab","Ford"];
var i = 0;
var text = "";
while (cars[i]) {
text += cars[i] + "<br>";
i++;
}
 JavaScript Break and Continue

 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>";
}
 Since the if statement has only one single line of code, the braces can be omitted:
for (i = 0; i < 10; i++) {
if (i == 3) break;
text += "The number is " + i + "<br>";
}

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>";
}

JavaScript Labels
Draft Copy 56 | P a g e
  As you have already seen, in the chapter about the switch statement, JavaScript statements can
be labeled.
 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 inside a loop.
 The break statement, without a label reference, can only be used inside a loop or a switch.
 With a label reference, it can be used to "jump out of" any JavaScript code block:
Example
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>";
}
28. JavaScript Errors - Throw and Try to Catch
 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>
 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.
Draft Copy 57 | P a g e
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 Throws Errors

 When an error occurs, JavaScript will normally stop, and generate an error message.
 The technical term for this is: JavaScript will throw an error.

The throw Statement

 The throw statement allows you to create a custom error.
 The technical term for this is: 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="text">
<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 "is Empty";
if(isNaN(x)) throw "not a number";
if(x > 10) throw "too high";
if(x < 5) throw "too low";
}
catch(err) {
message.innerHTML = "Input " + err;
}

Draft Copy 58 | P a g e
 }
</script>
</body>
</html>

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 "Empty";
if(isNaN(x)) throw "Not a number";
if(x > 10) throw "Too high";
if(x < 5) throw "Too low";
}
catch(err) {
message.innerHTML = "Error: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
29. JavaScript Debugging
 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 of, forcing errors to be reported to the user.

Draft Copy 59 | P a g e
  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>

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;

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, chose developer tools.
 Finally, select Console.
Firefox
 Open the browser.
 Go to the web page:
http://www.getfirebug.com.
 Follow the instructions how to:
install Firebug
Internet Explorer
Draft Copy 60 | P a g e
  Open the browser.
 From the menu, select tools.
 From tools, chose developer tools.
 Finally, select Console.
Opera
 Open the browser.
 Go to the webpage:
http://dev.opera.com/articles/view/opera-developer-tools.
 Follow the instructions how to:
add a Developer Console button to your toolbar.
Safari
 Open the browser.
 Go to the webpage:
http://extentions.apple.com.
 Follow the instructions how to:
install Firebug Lite.

30. JavaScript Hoisting

 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
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
 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
Example 2
var x = 5; // Initialize x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
var y = 7; // Initialize y
 Does it make sense that y is undefined in the last example?
Draft Copy 61 | P a g e
  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; // Display x and y
y = 7; // Assign 7 to 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 "using strict"; in the next chapter.
31. JavaScript Use Strict
 "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 cannot, 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).
 Declared inside a function, it has local scope (only the code inside the function is in strict
mode).
 Global declaration:
"use strict";
function testStrict(){
var x;
x = 3.14; // This does not cause an error.
}
x = 3.14; // This causes an error.
Local declaration:
function testStrict(){
"use strict";
x = 3.14; // This causes an error.
}
x = 3.14; // This does not cause an error.

Draft Copy 62 | P a g e
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:
x = 3.14; // This causes an error (if x has not been declared).
 Deleting a variable, a function, or an argument, is not allowed.
var testStrict = 3.14;
delete testStrict; // This causes an error.
 Defining a property more than once, is not allowed:
var testStrict = {p1:10, p2:15, p1:20}; // This causes an error.
 Duplicating a parameter name is not allowed:
function testStrict(param1, param1) {}; // This causes an error.
 Octal numeric literals and escape characters are not allowed:
var testStrict = 010; // This causes an error.
var testStrict = \010; // This causes an error.
 Writing to a read-only property is not allowed:
var testObj = {};
Object.defineProperty(testObj, "x", {value:0, writable:false});
testObj.x = 3.14; // This causes an error.
 Writing to a get-only property is not allowed:
var testObj = {get x() {return 0} };
testObj.x = 3.14; // This causes an error.
 Deleting an undeletable property is not allowed:
delete Object.prototype; // This causes an error.
The string "eval" cannot be used as a variable:
var eval = 3.14; // This causes an error.
 The string "arguments" cannot be used as a variable:
var arguments = 3.14; // This causes an error.
The with statement is not allowed:
with (Math){x = cos(2)}; // This causes an error.
Future reserved keywords are not allowed. These are:
 implements
 interface
 package
 private
 protected
Draft Copy 63 | P a g e
  public
 static
 yield

Other Differences
 In function calls like f(), the this value was the global object. In strict mode, it is now undefined.
 For security reasons, in strict mode code, eval does not create a new variable in the scope from
which it was called.
 With strict mode, you cannot, for example, use undeclared variables.

Watch Out!
The "use strict" directive is only recognized at the beginning of a script or a function.
If you add two JavaScript files into one file, you will lose the effect of the directive in the second
file.
32. JavaScript Coding Conventions
 Always use the same coding conventions for all your JavaScript projects.

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 software 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 (variable and function). 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;
discount = 0.10;
fullPrice = price * 100 / discount;

Declarations on Top
 It is good coding practice to put all declarations at the top of each script or function.
 This gives better, cleaner code, and reduces the possibility of accidental re-declarations.
var firstName, lastName;
var price, discount, fullPrice;
firstName = "John";
lastName = "Doe";
price = 19.90;

Draft Copy 64 | P a g e
 discount = 0.10;
fullPrice = price * 100 / discount;
This also goes for variables in loops:
var i;
for (i = 0; i < 5; i++)
Since JavaScript moves the declarations to the top anyway (JavaScript hoisting), it is always a
good rule.

Spaces Around Operators

 Always put spaces around operators, and after commas:
x = 5 + 6; // Good
x=5+6 // Bad
[40, 100, 1, 5] // Good
[40,100,1,5] // Bad

Code Indentation
 Always use 4 spaces for indentation of code blocks:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
for (i = 1; i < 50; i++) {
sum += i;
}
Do not use tabs (tabulators) for indentation. Text editors interpret tabs differently.

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.";

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
minifyed.

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).

Draft Copy 65 | P a g e
 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.
CamelCase:
 CamelCase 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.

33. JavaScript Best Practices

 Avoid global variables, avoid new, avoid ==, avoid eval()

Avoid Global Variables

 Avoid using 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.

Never Declare Numbers, Strings, or Booleans as Objects

 Always treat numbers, strings, or booleans as primitive values. Not as objects.
 Declaring numbers, strings, or booleans 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.

Don't Use new Object()

 Use {} instead of new Object()
 Use "" instead of new String()
 Use 0 instead of new Number()
 Use false instead of new Boolean()
 Use [] instead of new Array()
 Use /(:)/ instead of new RegExp()
 Use 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

Draft Copy 66 | P a g e
 var x6 = /()/; // new regexp object
var x7 = function(){}; // new function object

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
 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
 Subtracting a string from a string, does not generate an error but returns NaN (Not a Number):
Example
"Hello" - "Dolly" // returns NaN

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

Never End a Definition with a Comma

Bad Examples
points = [40, 100, 1, 5, 25, 10, ];
person = {firstName:"John", lastName:"Doe", age:46, }
Some JSON and JavaScript engines will fail, or behave unexpectedly.

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;
}
}
Or, even simpler:

Draft Copy 67 | P a g e
 function myFunction(x, y) {
y = y || 0;
}

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.
34. JavaScript Performance
 How to speed up your JavaScript code.

Reduce Activity in Loops

 Loops are often used in programming.
 Every statement inside a loop will be executed for each iteration of the loop.
 Search for statements or assignments that can be placed outside the loop.

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";

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) is 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 before 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

Draft Copy 68 | P a g e
 <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.
35. JavaScript Reserved Words
 In JavaScript, some identifiers are reserved words and cannot be used as variables or function
names.

JavaScript Standards
 All modern browsers fully support ECMAScript 3 (ES3, the third edition of JavaScript from
1999).
 ECMAScript 4 (ES4) was never adopted.
 ECMAScript 5 (ES5, released in 2009) is the latest official version of JavaScript.
 Time passes, and we are now beginning to see complete support for ES5 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:
Draft Copy 69 | P a g e
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
clearTimeout clientInformation close closed confirm
constructor crypto decodeURI decodeURIComponent defaultStatus
document element elements embed embeds
encodeURI encodeURIComponent escape event fileUpload
focus form forms frame innerHeight
innerWidth layer layers link location
mimeTypes navigate navigator frames frameRate
hidden history image images offscreenBuffering
open opener option outerHeight outerWidth
packages pageXOffset pageYOffset parent parseFloat
parseInt password pkcs11 plugin prompt
propertyIsEnum radio reset screenX screenY
scroll secure select self setInterval
setTimeout status submit taint text
textarea top unescape untaint window

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

Nonstandard JavaScript
 In addition to reserved words, there are also some nonstandard keywords used in some
JavaScript implementations.
 One example is the const keyword used to define variables. Some JavaScript engines will treat
const as a synonym to var. Other engines will treat const as a definition for read-only variables.
 Const is an extension to JavaScript. It is supported by the JavaScript engine used in Firefox and
Chrome. But it is not a part of the JavaScript standards ES3 or ES5. Do not use it.

36. JavaScript JSON

 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 stands for JavaScript Object Notation
 JSON is lightweight data interchange format
 JSON is language independent *
 JSON is "self-describing" and easy to understand
* JSON uses JavaScript syntax, but the JSON format is text only.
Text can be read and used as a data format by any programming language.
JSON Example
Draft Copy 70 | P a g e
  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 Objects
 JSON objects are written inside curly braces.
 Just like in JavaScript, objects can contain multiple name/values 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.
 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:

Draft Copy 71 | P a g e
Example
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

Draft Copy 72 | P a g e