Basic JavaScript

Introduction:-

A scripting language is a lightweight programming language.
JavaScript is programming code that can be inserted into HTML pages.
JavaScript inserted into HTML pages, can be executed by all modern web browsers.
JavaScript is easy to learn.

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.

Example:-

JavaScript is Case Sensitive

JavaScript is case sensitive.
Watch your capitalization closely when you write JavaScript statements.
A function getElementById is not the same as getElementbyID.
A variable named myVariable is not the same as MyVariable.

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 name=”Hege”;
var name = “Hege”;

Break up a Code Line

You can break up a code line within a text string with a backslash. The example below will be displayed properly:

document.write(“Hello \
World!”);

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

document.write \
(“Hello World!”);

JavaScript Comments

Single line comments start with //.

JavaScript Multi-Line Comments

Multi line comments start with /* and end with */.

JavaScript in <head> or <body>

You can place an unlimited number of scripts in an HTML document.

Scripts can be in the <body> or in the <head> section of HTML, and/or in both.

It is a common practice to put functions in the <head> section, or at the bottom of the page. This way they are all in one place and do not interfere with page content.

A JavaScript Function in <head>

In this example, a JavaScript function is placed in the <head> section of an HTML page.

The function is called when a button is clicked:

Example

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction()
{
document.getElementById(“demo”).innerHTML=”My First JavaScript Function”;
}
</script>
</head>

<body>

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

</body>
</html>

A JavaScript Function in <body>

In this example, a JavaScript function is placed in the <body> section of an HTML page.

The function is called when a button is clicked:

Example

<!DOCTYPE html>
<html>
<body>

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

External JavaScripts

Scripts can be placed in external files. External files often contain code to be used by several different web pages. External JavaScript files have the file extension .js. To use an external script, point to the .js file in the “src” attribute of the <script> tag:

JavaScript Statements

JavaScript statements are “commands” to the browser. The purpose of the statements is to tell the browser what to do.

This JavaScript statement tells the browser to write “Hello Dolly” inside an HTML element with id=”demo”:

document.getElementById(“demo”).innerHTML=”Hello Dolly”;

Semicolon

Semicolon separates JavaScript statements.Normally you add a semicolon at the end of each executable statement. Using semicolons also makes it possible to write many statements on one line.

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 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?”;
}

JavaScript Data Types

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 is a variable which 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″;
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”;;

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

JavaScript Booleans

Booleans can only have two values: true or false.

var x=true
var y=false

Booleans are often used in conditional testing.

JavaScript Arrays

The following code creates an Array called cars:

var cars=new Array();
cars[0]=”Saab”;
cars[1]=”Volvo”;
cars[2]=”BMW”;

or (condensed array):

var cars=new Array(“Saab”,”Volvo”,”BMW”);

or (literal array):

Example

var cars=[“Saab”,”Volvo”,”BMW”];

Array indexes are zero-based, which means the first item is [0], second is [1], and so on.

JavaScript Objects

An object is delimited by curly braces. Inside the braces the object’s properties are defined as name and value pairs (name : value). The properties are separated by commas:

var person={firstname:”John”, lastname:”Doe”, id:5566};

The object (person) in the example above has 3 properties: firstname, lastname, and id.

Spaces and line breaks are not important. Your declaration can span multiple lines:

var person={
firstname : “John”,
lastname : “Doe”,
id : 5566
};

You can address the object properties in two ways:

Example

name=person.lastname;
name=person[“lastname”];
Undefined and Null

Undefined is the value of a variable with no value. Variables can be emptied by setting the value to null.

Example

cars=null;
person=null;

Javascript Variable

When you declare a new variable, you can declare its type using the “new” keyword:

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

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 must begin with a letter
Variable names can also begin with $ and _ (but we will not use it)
Variable names are case sensitive (y and Y are different variables)

Declaring (Creating) JavaScript Variables

Creating a variable in JavaScript is most often referred to as “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”;

However, 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, assigns the value “Volvo” to it, and put the value inside the HTML paragraph with id=”demo”:

Example

<p id=”demo”></p>
var carname=”Volvo”;
document.getElementById(“demo”).innerHTML=carname;

JavaScript Objects

“Everything” in JavaScript is an Object: a String, a Number, an Array, a Date… In JavaScript, an object is data, with properties and methods.

Properties and Methods

Properties are values associated with an object. Methods are actions that can be performed on objects.

A Real Life Object. A Car:

Properties:

car.name=Fiat

car.model=500

car.weight=850kg

car.color=white

Methods:

car.start()

car.drive()

car.brake()

The properties of the car include name, model, weight, color, etc.All cars have these properties, but the values of those properties differ from car to car.The methods of the car could be start(), drive(), brake(), etc.All cars have these methods, but they are performed at different times.

Objects in JavaScript:

In JavaScript, objects are data (variables), with properties and methods.When you declare a JavaScript variable like this:

var txt = “Hello”;

You actually create a JavaScript String object. The String object has a built-in property called length. For the string above, length has the value 5. The String object also have several built-in methods.

Properties:

txt.length=5

“Hello”

Methods:

txt.indexOf()

txt.replace()

txt.search()

In object oriented languages, properties and methods are often called object members.

Creating JavaScript Objects

Almost “everything” in JavaScript is an object. Strings, Dates, Arrays, Functions.

You can also create your own objects.

This example creates an object called “person”, and adds four properties to it:

Example

person=new Object();
person.firstname=”John”;
person.lastname=”Doe”;
person.age=50;
person.eyecolor=”blue”;

There are many different ways to create new JavaScript objects, and you can also add properties and methods to existing objects.

Accessing Object Properties

The syntax for accessing the property of an object is:

objectName.propertyName

This example uses the length property of the String object to find the length of a string:

var message=”Hello World!”;
var x=message.length;

The value of x, after execution of the code above will be:

Accessing Object Methods

You can call a method with the following syntax:

objectName.methodName()

This example uses the toUpperCase() method of the String object, to convert a text to uppercase:var message=”Hello world!”;
var x=message.toUpperCase();

The value of x, after execution of the code above will be:

HELLO WORLD!

JavaScript Function Syntax

A function is written as a code block (inside curly { } braces), preceded by the function keyword:

function functionname()
{
some code to be executed
}

The code inside the function will be executed when “someone” calls the function.

The function can be called directly when an event occurs (like when a user clicks a button), and it can be called from “anywhere” by JavaScript code.

JavaScript Functions

A function is a block of code that will be executed when “someone” calls it:

Example

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert(“Hello World!”);
}
</script>
</head>

Calling a Function with Arguments

When you call a function, you can pass along some values to it, these values are called arguments or parameters.

These arguments can be used inside the function.

You can send as many arguments as you like, separated by commas (,)

myFunction(argument1,argument2)

Declare the argument, as variables, when you declare the function:

function myFunction(var1,var2)
{
some code
}

The variables and the arguments must be in the expected order. The first variable is given the value of the first passed argument etc.

Example

Functions With a Return Value

Sometimes you want your function to return a value back to where the call was made.

This is possible by using the return statement.

When using the return statement, the function will stop executing, and return the specified value.

Syntax

function myFunction()
{
var x=5;

return x;
}

The function above will return the value 5.

The function-call will be replaced with the returnvalue:

var myVar=myFunction();

The variable myVar holds the value 5, which is what the function “myFunction()” returns.

You can also use the returnvalue without storing it as a variable:

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

The innerHTML of the “demo” element will be 5, which is what the function “myFunction()” returns.

Example

Calculate the product of two numbers, and return the result:

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

document.getElementById(“demo”).innerHTML=myFunction(4,3);

The innerHTML of the “demo” element will be:12

The return statement is also used when you simply want to exit a function. The return value is optional:

function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}

The function above will exit the function if a>b, and will not calculate the sum of a and b.

Local JavaScript Variables

A variable declared (using var) within a JavaScript function becomes LOCAL and can only be accessed from within that function. (the variable has local scope).

You can have local variables with the same name in different functions, because local variables are only recognized by the function in which they are declared.

Local variables are deleted as soon as the function is completed.

Global JavaScript Variables

Variables declared outside a function, become GLOBAL, and all scripts and functions on the web page can access it.

The Lifetime of JavaScript Variables

The lifetime JavaScript variables starts when they are declared.

Local variables are deleted when the function is completed.

Global variables are deleted when you close the page.

Assigning Values to Undeclared JavaScript Variables

If you assign a value to variable that has not yet been declared, the variable will automatically be declared as a GLOBAL variable.

This statement:

carname=”Volvo”;

JavaScript Operators

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;
z=2;
x=y+z;

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 of x	Result of y
+	Addition	x=y+2	7	5
–	Subtraction	x=y-2	3	5
*	Multiplication	x=y*2	10	5
/	Division	x=y/2	2.5	5
%	Modulus (division remainder)	x=y%2	1	5
++	Increment	x=++y	6	6
++	Increment	x=y++	5	6
—	Decrement	x=–y	4	4
—	Decrement	x=y–	5	4

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
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

The + Operator Used on Strings

The + operator can also be used to add string variables or text values together.

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

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

JavaScript Comparison and Logical Operators

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
==	is equal to	x==8	false
==	is equal to	x==5	true
===	is exactly equal to (value and type)	x===”5″	false
===	is exactly equal to (value and type)	x===5	true
!=	is not equal	x!=8	true
!==	is not equal (neither value nor type)	x!==”5″	true
!==	is not equal (neither value nor type)	x!==5	false
>	is greater than	x>8	false
<	is less than	x<8	true
>=	is greater than or equal to	x>=8	false
<=	is less than or equal to	x<=8	true

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

eg. voteable=(age<18)?”Too young”:”Old enough”;

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:

If Statement

Use the if statement to execute some code only if a specified condition is true.

Syntax

if (condition)
{
code to be executed if condition is true
}

Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error!

Example

Make a “Good day” greeting if the time is less than 20:00:

if (time<20)
{
x=”Good day”;
}

The result of x will be:

Good day

Notice that there is no ..else.. in this syntax. You tell the browser to execute some code only if the specified condition is true.

If…elseStatement

Use the if….else statement to execute some code if a condition is true and another code if the condition is not true.

Syntax

if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}

Example

If the time is less than 20:00, you will get a “Good day” greeting, otherwise you will get a “Good evening” greeting

if (time<20)
{
x=”Good day”;
}
else
{
x=”Good evening”;
}

The result of x will be:

Good day

If…else if…else Statement

Use the if….else if…else statement to select one of several blocks of code to be executed.

Syntax

if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 is true
}

Example

If the time is less than 10:00, you will get a “Good morning” greeting, if not, but the time is less than 20:00, you will get a “Good day” greeting, otherwise you will get a “Good evening” greeting:

if (time<10)
{
x=”Good morning”;
}
else if (time<20)
{
x=”Good day”;
}
else
{
x=”Good evening”;
}

The result of x will be:

Good day

JavaScript Switch Statement

The switch statement is used to perform different action based on different conditions.

Syntax

switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}

This is how it works: First we have a single expression n (most often a variable), that is evaluated once. The value of the expression is then compared with the values for each case in the structure. If there is a match, the block of code associated with that case is executed. Use break to prevent the code from running into the next case automatically.

Example

Display today’s weekday-name. Note that Sunday=0, Monday=1, Tuesday=2, etc:

var day=new Date().getDay();
switch (day)
{
case 0:
x=”Today it’s Sunday”;
break;
case 1:
x=”Today it’s Monday”;
break;
case 2:
x=”Today it’s Tuesday”;
break;
case 3:
x=”Today it’s Wednesday”;
break;
case 4:
x=”Today it’s Thursday”;
break;
case 5:
x=”Today it’s Friday”;
break;
case 6:
x=”Today it’s Saturday”;
break;
}

The result of x will be:

Today it’s Tuesday

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:

document.write(cars[0] + “<br>”);
document.write(cars[1] + “<br>”);
document.write(cars[2] + “<br>”);
document.write(cars[3] + “<br>”);
document.write(cars[4] + “<br>”);
document.write(cars[5] + “<br>”);

You can write:

for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + “<br>”);
}

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)
{
the code block to be executed
}

Statement 1 is executed before the loop (the code block) starts.

Statement 2 defines the condition for running the loop (the code block).

Statement 3 is executed each time after the loop (the code block) has been executed.

Example

for (var i=0; i<5; i++)
{
x=x + “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.

The For/In Loop

The JavaScript for/in statement loops through the properties of an object:

Example

var person={fname:”John”,lname:”Doe”,age:25};

for (x in person)
{
txt=txt + person[x];
}

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

The loop in this example will continue to run as long as the variable i is less than 5:

while (i<5)
{
x=x + “The number is ” + i + “<br>”;
i++;
}
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

do
{
x=x + “The number is ” + i + “<br>”;
i++;
}
while (i<5);

Comparing For and While

If you have read the previous chapter, about the for loop, you will discover that a while loop is much the same as a for loop, with statement 1 and statement 3 omitted.

The loop in this example uses a for loop to display all the values in the cars array:

Example

cars=[“BMW”,”Volvo”,”Saab”,”Ford”];
var i=0;
for (;cars[i];)
{
document.write(cars[i] + “<br>”);
i++;
}

The loop in this example uses a while loop to display all the values in the cars array:

Example

cars=[“BMW”,”Volvo”,”Saab”,”Ford”];
var i=0;
while (cars[i])
{
document.write(cars[i] + “<br>”);
i++;
}

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;
}
x=x + “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;
x=x + “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;
x=x + “The number is ” + i + “<br>”;
}
JavaScript Labels

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 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:
{
document.write(cars[0] + “<br>”);
document.write(cars[1] + “<br>”);
document.write(cars[2] + “<br>”);
break list;
document.write(cars[3] + “<br>”);
document.write(cars[4] + “<br>”);
document.write(cars[5] + “<br>”);
}
JavaScript Errors – Throw and Try to Catch

The try statement lets you to test a block of code for errors.

The catch statement lets you handle the error.

The throw statement lets you create custom errors.

Errors Will Happen!

When the JavaScript engine is executing JavaScript code, different errors can occur:

It can be syntax errors, typically coding errors or typos made by the programmer.

It can be misspelled or missing features in the language (maybe due to browser differences).

It can be errors due to wrong input, from a user, or from an Internet server.

And, of course, it can be many other unforeseeable things.

JavaScript Throws Errors

When an error occurs, when something goes wrong, the JavaScript engine will normally stop, and generate an error message.

The technical term for this is: JavaScript will throw an error.

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.

Syntax

try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}

In the example below we have deliberately made a typo in the code in the try block.

The catch block catches the error in the try block, and executes code to handle it:

Example

<!DOCTYPE html>
<html>
<head>
<script>
var txt=””;
function message()
{
try
{
adddlert(“Welcome guest!”);
}
catch(err)
{
txt=”There was an error on this page.\n\n”;
txt+=”Error description: ” + err.message + “\n\n”;
txt+=”Click OK to continue.\n\n”;
alert(txt);
}
}
</script>
</head>

</html>

The Throw Statement

The throw statement allows you to create a custom error.

The correct technical term is to create or throw an exception.

If you use the throw statement together with try and catch, you can control program flow and generate custom error messages.

Syntax

throw exception

The exception can be a JavaScript String, a Number, a Boolean or an Object.

This example examines the value of an input variable. If the value is wrong, an exception (error) is thrown. The error is caught by the catch statement and a custom error message is displayed:

Example

<h1>My First JavaScript</h1>
<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=”mess”></p>

JavaScript Form Validation

JavaScript can be used to validate data in HTML forms before sending off the content to a server.

Form data that typically are checked by a JavaScript could be:

has the user left required fields empty?
has the user entered a valid e-mail address?
has the user entered a valid date?
has the user entered text in a numeric field?

Required Fields

The function below checks if a field has been left empty. If the field is blank, an alert box alerts a message, the function returns false, and the form will not be submitted:

function validateForm()
{
var x=document.forms[“myForm”][“fname”].value;
if (x==null || x==””)
{
alert(“First name must be filled out”);
return false;
}
}

The function above could be called when a form is submitted:

Example

<form name=”myForm” action=”demo_form.asp” onsubmit=”return validateForm()” method=”post”>
First name: <input type=”text” name=”fname”>
<input type=”submit” value=”Submit”>
</form>
E-mail Validation

The function below checks if the content has the general syntax of an email.

This means that the input data must contain an @ sign and at least one dot (.). Also, the @ must not be the first character of the email address, and the last dot must be present after the @ sign, and minimum 2 characters before the end:

function validateForm()
{
var x=document.forms[“myForm”][“email”].value;
var atpos=x.indexOf(“@”);
var dotpos=x.lastIndexOf(“.”);
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert(“Not a valid e-mail address”);
return false; }
}

The function above could be called when a form is submitted:

Example

<form name=”myForm” action=”demo_form.asp” onsubmit=”return validateForm();” method=”post”>
Email: <input type=”text” name=”email”>
<input type=”submit” value=”Submit”>
</form>