Java Script
Java Script
JavaScript is the most popular scripting language on the internet, and works
in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and
Safari.
HTML / XHTML
If you want to study these subjects first, find the tutorials on our Home page.
What is JavaScript?
JavaScripts in the body section will be executed WHILE the page loads.
JavaScripts in the head section will be executed when CALLED.
If you place a script in the head section, you will ensure that the script is
loaded before anyone uses it.
Example
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>
<body onload="message()">
</body>
</html>
Note: Remember to place the script exactly where you normally would write
the script!
JavaScript Statements
JavaScript Statements
A JavaScript statement is a command to a browser. The purpose of the
command is to tell the browser what to do.
This JavaScript statement tells the browser to write "Hello Dolly" to the web
page:
document.write("Hello Dolly");
It is normal to add a semicolon at the end of each executable statement.
Most people think this is a good programming practice, and most often you
will see this in JavaScript examples on the web.
The semicolon is optional (according to the JavaScript standard), and the
browser is supposed to interpret the end of the line as the end of the
statement. Because of this you will often see examples without the semicolon
at the end.
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 write a heading and two paragraphs to a web page:
Example
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
JavaScript Blocks
JavaScript statements can be grouped together in blocks.
Blocks start with a left curly bracket {, and ends with a right curly bracket }.
The purpose of a block is to make the sequence of statements execute
together.
This example will write a heading and two paragraphs to a web page:
Example
<script type="text/javascript">
{
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
}
</script>
The example above is not very useful. It just demonstrates the use of a
block. Normally a block is used to group statements together in a function or
in a condition (where a group of statements should be executed if a condition
is met).
You will learn more about functions and conditions in later chapters.
JavaScript Comments
JavaScript Comments
Comments can be added to explain the JavaScript, or to make the code more
readable.
Single line comments start with //.
The following example uses single line comments to explain the code:
Example
<script type="text/javascript">
// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
This is a paragraph.
This is another paragraph.
JavaScript Variables
As with algebra, JavaScript variables are used to hold values or expressions.
A variable can have a short name, like x, or a more descriptive name, like
carname.
Variable names are case sensitive (y and Y are two different variables)
Variable names must begin with a letter or the underscore character
Example
A variable's value can change during the execution of a script. You can refer
to a variable by its name to display or change its value.
<html>
<body>
<script type="text/javascript">
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br />");
firstname="Tove";
document.write(firstname);
</script>
<p>The script above declares a variable, assigns a value to it, displays the
value, changes the value, and displays the value again.</p>
</body>
</html>
Ouput of the Program
Hege
Tove
The script above declares a variable, assigns a value to it, displays the value, changes the value,
and displays the value again.
var x=5;
var carname="Volvo";
JavaScript Arithmetic
As with algebra, you can do arithmetic operations with JavaScript variables:
y=x-5;
z=y+5;
You will learn more about the operators that can be used in the next chapter
of this tutorial.
JavaScript Operators
Example
Result
Addition
x=y+2
x=7
Subtraction
x=y-2
x=3
Multiplication
x=y*2
x=10
Division
x=y/2
x=2.5
x=y%2
x=1
++
Increment
x=++y
x=6
--
Decrement
x=--y
x=4
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
10
55
55
55
The rule is: If you add a number and a string, the result will be a string.
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
Example
==
is equal to
x==8 is false
===
!=
is not equal
x!=8 is true
>
is greater than
x>8 is false
<
is less than
x<8 is true
>=
x>=8 is false
<=
x<=8 is 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
||
or
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
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
If the variable visitor has the value of "PRES", then the variable greeting
will be assigned the value "Dear President " else it will be assigned "Dear".
JavaScript If...Else Statements
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
<script type="text/javascript">
//Write a "Good morning" greeting if
//the time is less than 10
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>
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...else Statement
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
<script type="text/javascript">
//If the time is less than 10, you will get a "Good morning"
greeting.
//Otherwise you will get a "Good day" greeting.
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>
JavaScript has three kind of popup boxes: Alert box, Confirm box, and
Prompt box.
Alert Box
An alert box is often used if you want to make sure information comes
through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax
alert("sometext");
Example
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert
box" />
</body>
</html>
Output of the Program:I am an alert box! : - This message is shown in the message box
with one button Ok When you click in the Show alert box Button.
Confirm Box
A confirm box is often used if you want the user to verify or accept
something.
When a confirm box pops up, the user will have to click either "OK" or
"Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the
box returns false.
Syntax
confirm("sometext");
Example
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
document.write("You pressed OK!");
}
else
{
document.write("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show
confirm box" />
</body>
</html>
Output of the Program:Press a Button is shown in the message box with two buttons when you click
on the button Show Confirm .One is ok and other is Cancel.
If you press the ok button, then you pressed Ok is printed
Otherwise you pressed Cancel is printed
Prompt Box
A prompt box is often used if you want the user to input a value before
entering a page.
When a prompt box pops up, the user will have to click either "OK" or
"Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks
"Cancel" the box returns null.
Syntax
prompt("sometext","defaultvalue");
Example
<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_prompt()" value="Show prompt
box" />
</body>
</html>
JavaScript Functions
To keep the browser from executing a script when the page loads, you can
put your script into a function.
A function contains code that will be executed by an event or by a call to the
function.
You may call a function from anywhere within a page (or even from other
pages if the function is embedded in an external .js file).
Functions can be defined both in the <head> and in the <body> section of a
document. However, to assure that a function is read/loaded by the browser
before it is called, it could be wise to put functions in the <head> section.
Syntax
function functionname(var1,var2,...,varX)
{
some code
}
The parameters var1, var2, etc. are variables or values passed into the
function. The { and the } defines the start and end of the function.
Note: A function with no parameters must include the parentheses () after
the function name.
Note: Do not forget about the importance of capitals in JavaScript! The word
function must be written in lowercase letters, otherwise a JavaScript error
occurs! Also note that you must call a function with the exact same capitals
as in the function name.
If the line: alert("Hello world!!") in the example above had not been put
within a function, it would have been executed as soon as the line was
loaded. Now, the script is not executed before a user hits the input button.
The function displaymessage() will be executed if the input button is clicked.
You will learn more about JavaScript events in the JS Events chapter.
JavaScript Loops
Often when you write code, you want the same block of code to run over and
over again in a row. Instead of adding several almost equal lines in a script
we can use loops to perform a task like this.
In JavaScript, there are two different kind of loops:
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>
The while loop loops through a block of code while a specified condition is
true.
Syntax
while (var<=endvalue)
{
code to be executed
}
Note: The <= could be any comparing statement.
Example
The example below defines a loop that starts with i=0. The loop will continue
to run as long as i is less than, or equal to 5. i will increase by 1 each time
the loop runs:
Example
<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>
While i is less than , or equal to, 5, the loop will continue to run.
i will increase by 1 each time the loop runs.
{
code to be executed
}
while (var<=endvalue);
Example
The example below uses a do...while loop. The do...while loop will always be
executed at least once, even if the condition is false, because the statements
are executed before the condition is tested:
Example
<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
while (i<=5);
</script>
</body>
</html>
The number is 2
The number is 3
The number is 4
The number is 5
Explanation:
i equal to 0.
The loop will run
i will increase by 1 each time the loop runs.
While i is less than , or equal to, 5, the loop will continue to run.
The number is 0
The number is 1
The number is 2
Explanation: The loop will break when i=3.
Saab
Volvo
BMW
JavaScript Events
Events are actions that can be detected by JavaScript.
Events
By using JavaScript, we have the ability to create dynamic web pages. Events
are actions that can be detected by JavaScript.
Every element on a web page has certain events which can trigger a
JavaScript. For example, we can use the onClick event of a button element to
indicate that a function will run when a user clicks on the button. We define
the events in the HTML tags.
Examples of events:
A mouse click
A web page or an image loading
Mousing over a hot spot on the web page
Selecting an input field in an HTML form
Submitting an HTML form
A keystroke
Note: Events are normally used in combination with functions, and the
function will not be executed before the event occurs!
Events are normally used in combination with functions, and the function will
not be executed before the event occurs!
Event Handlers
New to HTML 4.0 was the ability to let HTML events trigger actions in the
browser, like starting a JavaScript when a user clicks on an HTML element.
Below is a list of the attributes that can be inserted into HTML tags to define
event actions.
FF: Firefox, IE: Internet Explorer
Attribute
FF IE
onabort
onblur
onchange
onclick
ondblclick
onerror
onfocus
onkeydown
onkeypress
onkeyup
onload
onmouseout
onmouseup
onreset
onresize
onselect
Text is selected
onsubmit
onunload
The onFocus, onBlur and onChange events are often used in combination
with validation of form fields.
Below is an example of how to use the onChange event. The checkEmail()
function will be called whenever the user changes the content of the field:
<input type="text" size="30" id="email" onchange="checkEmail()">
onSubmit
The onSubmit event is used to validate ALL form fields before submitting it.
Below is an example of how to use the onSubmit event. The checkForm()
function will be called when the user clicks the submit button in the form. If
the field values are not accepted, the submit should be cancelled. The
function checkForm() returns either true or false. If it returns true the form
will be submitted, otherwise the submit will be cancelled:
<form method="post" action="xxx.htm" onsubmit="return
checkForm()">
onMouseOver and onMouseOut
onMouseOver and onMouseOut are often used to create "animated" buttons.
Below is an example of an onMouseOver event. An alert box appears when
an onMouseOver event is detected:
<a href="http://www.w3schools.com" onmouseover="alert('An
onMouseOver event');return false"><img src="w3s.gif"
alt="W3Schools" /></a>
This chapter will teach you how to catch and handle JavaScript error
messages, so you don't lose your audience.
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
Example 2
The next example uses a confirm box to display a custom message telling
users they can click OK to continue viewing the page or click Cancel to go to
the homepage. If the confirm method returns false, the user clicked Cancel,
and the code redirects the user. If the confirm method returns true, the code
does nothing:
Example
<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Click OK to continue viewing this page,\n";
txt+="or Cancel to return to the home page.\n\n";
if(!confirm(txt))
{
document.location.href="http://www.w3schools.com/";
}
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","");
try
{
if(x>10)
{
throw "Err1";
}
else if(x<0)
{
throw "Err2";
}
else if(isNaN(x))
{
throw "Err3";
}
}
catch(er)
{
if(er=="Err1")
{
alert("Error! The value is too high");
}
if(er=="Err2")
{
alert("Error! The value is too low");
}
if(er=="Err3")
{
alert("Error! The value is not a number");
}
}
</script>
</body>
</html>
Outputs
\'
single quote
\"
double quote
\&
ampersand
\\
backslash
\n
new line
\r
carriage return
\t
tab
\b
backspace
\f
form feed
JavaScript Guidelines
JavaScript is Case Sensitive
A function named "myfunction" is not the same as "myFunction" and a
variable named "myVar" is not the same as "myvar".
JavaScript is case sensitive - therefore watch your capitalization closely
when you create or call variables, objects and functions.
White Space
JavaScript ignores extra spaces. You can add white space to your script
to make it more readable. The following lines are equivalent:
name="Hege";
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!");
HELLO WORLD!
</script>
</body>
</html>
Output of the Program
Big: Hello World!
Small: Hello World!
Bold: Hello World!
Italic: Hello World!
Blink: Hello World! (does not work in IE, Chrome, or Safari)
Fixed: Hello World!
Strike: Hello World!
Fontcolor: Hello World!
Fontsize:
Hello World!
Hello World!
Superscript:
Hello World!
How to use the indexOf() method to return the position of the first
occurrence of a specified string value in a string?
<html>
<body>
<script type="text/javascript">
var str="Hello world!";
document.write(str.indexOf("Hello") + "<br />");
document.write(str.indexOf("World") + "<br />");
document.write(str.indexOf("world"));
</script>
</body>
</html>
Output of the Program
0
-1
6
How to use the match() method to search for a specified string value within
a string and return the string value if found?
<html>
<body>
<script type="text/javascript">
var str="Hello world!";
document.write(str.match("world") + "<br />");
document.write(str.match("World") + "<br />");
document.write(str.match("worlld") + "<br />");
document.write(str.match("world!"));
</script>
</body>
</html>
Output of the program
world
null
null
world!
How to use the replace() method to replace some characters with some other
characters in a string.?
<html>
<body>
<script type="text/javascript">
var str="Visit Microsoft!";
document.write(str.replace(/Microsoft/,"W3Schools"));
</script>
</body>
</html>
Output of the Program
Visit W3Schools!
String object
The String object is used to manipulate a stored piece of text.
Examples of use:
The following example uses the length property of the String object to find
the length of a string:
var txt="Hello world!";
document.write(txt.length);
The code above will result in the following output:
12
The following example uses the toUpperCase() method of the String object to
convert a string to uppercase letters:
var txt="Hello world!";
document.write(txt.toUpperCase());
The code above will result in the following output:
HELLO WORLD!
Description
FF IE
constructor
length
prototype
Description
FF IE
anchor()
big()
blink()
bold()
charAt()
charCodeAt()
concat()
fixed()
fontcolor()
fontsize()
fromCharCode()
indexOf()
italics()
lastIndexOf()
link()
match()
replace()
search()
slice()
small()
split()
strike()
sub()
substr()
substring()
sup()
toLowerCase()
toUpperCase()
toSource()
valueOf()
Constructor
The constructor property is a reference to the function that created the
object.
Syntax
object.constructor
<html>
<body>
<script type="text/javascript">
var test=new Boolean();
if (test.constructor==Array)
{
document.write("This is an Array");
}
if (test.constructor==Boolean)
{
document.write("This is a Boolean");
}
if (test.constructor==Date)
{
document.write("This is a Date");
}
if (test.constructor==String)
{
document.write("This is a String");
}
</script>
</body>
</html>
Output of the Program
This is a Boolean
Prototype
The prototype property allows you to add properties and methods to an object.
Syntax
object.prototype.name=value
Example
In this example we will show how to use the prototype property to add a property to an object:
<script type="text/javascript">
function employee(name,jobtitle,born)
{
this.name=name;
this.jobtitle=jobtitle;
this.born=born;
}
var fred=new employee("Fred Flintstone","Caveman",1970):
employee.prototype.salary=null;
fred.salary=20000;
document.write(fred.salary+ "<br />");
employee.prototype.dept=null;
fred.dept="STD;
document.write(fred.dept);
</script>
The output of the code above will be:
20000
STD
Syntax
stringObject.anchor(anchorname)
Parameter
Description
anchorname
Example
In this example we will add an anchor to a text:
<script type="text/javascript">
var txt="Hello world!";
document.write(txt.anchor("myanchor"));
</script>
The code above could be written in plain HTML, like this:
Syntax
stringObject.charAt(index)
Parameter
Description
index
<html>
<body>
<script type="text/javascript">
var str="Hello world!";
document.write("The first character is: " + str.charAt(0) + "<br />");
document.write("The second character is: " + str.charAt(1) + "<br />");
document.write("The third character is: " + str.charAt(2));
</script>
</body>
</html>
Output of the following Program:-
Syntax
stringObject.charCodeAt(index)
Parameter
Description
index
<html>
<body>
<script type="text/javascript">
var str="Hello world!";
document.write("The Unicode for the first character is: " + str.charCodeAt(0) + "<br />");
document.write("The Unicode for the second character is: " + str.charCodeAt(1) + "<br>");
document.write("The Unicode for the third character is: " + str.charCodeAt(2));
</script>
</body>
</html>
Output of the program:The Unicode for the first character is: 72
The Unicode for the second character is: 101
The Unicode for the third character is: 108
Concatenating:<html>
<body>
<script type="text/javascript">
var str1="Hello ";
var str2="world!";
document.write(str1.concat(str2));
</script>
</body>
</html>
Output of the Program:
Hello world!
fromCharCode():The fromCharCode() takes the specified Unicode values and returns a string.
<html>
<body>
<script type="text/javascript">
document.write(String.fromCharCode(72,69,76,76,79));
document.write("<br />");
document.write(String.fromCharCode(65,66,67));
</script>
</body>
</html>
Output of the Program
HELLO
ABC
Syntax
stringObject.lastIndexOf(searchvalue,fromindex)
Parameter
Description
search
fromindex
Optional. Specifies where to start the search. Starting backwards in the string
Example
In this example we will do different searches within a "Hello world!" string:
<script type="text/javascript">
var str="Hello world!";
document.write(str.lastIndexOf("Hello") + "<br />");
document.write(str.lastIndexOf("World") + "<br />");
document.write(str.lastIndexOf("world"));
</script>
The output of the code above will be:
0
-1
6
Syntax
stringObject.search(searchstring)
Parameter
Description
searchstring
<script type="text/javascript">
var str="Visit W3Schools!";
document.write(str.search(/W3Schools/));
</script>
The output of the code above will be:
Syntax
stringObject.slice(start,end)
Parameter
Description
start
end
Example 1
In this example we will extract all characters from a string, starting at position 0:
<script type="text/javascript">
var str="Hello happy world!";
document.write(str.slice(0));
</script>
The output of the code above will be:
Example 2
In this example we will extract all characters from a string, starting at position 6:
<script type="text/javascript">
var str="Hello happy world!";
document.write(str.slice(6));
</script>
The output of the code above will be:
happy world!
Example 3
In this example we will extract only the first character from a string:
<script type="text/javascript">
var str="Hello happy world!";
document.write(str.slice(0,1));
</script>
The output of the code above will be:
Example 4
In this example we will extract all the characters from position 6 to position 11:
<script type="text/javascript">
var str="Hello happy world!";
document.write(str.slice(6,11));
</script>
The output of the code above will be:
happy
Syntax
stringObject.split(separator, howmany)
Parameter
Description
separator
howmany
Optional. Specify how many times split should occur. Must be a numeric value
Example
In this example we will split up a string in different ways:
<script type="text/javascript">
var str="How are you doing today?";
document.write(str.split(" ") + "<br />");
document.write(str.split("") + "<br />");
document.write(str.split(" ",3));
</script>
The output of the code above will be:
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you
Syntax
stringObject.substr(start,length)
Parameter
Description
start
length
Example 1
In this example we will use substr() to extract some characters from a string:
<script type="text/javascript">
var str="Hello world!";
document.write(str.substr(3));
</script>
The output of the code above will be:
lo world!
Example 2
In this example we will use substr() to extract some characters from a string:
<script type="text/javascript">
var str="Hello world!";
document.write(str.substr(3,7));
</script>
lo worl
Syntax
stringObject.substring(start,stop)
Parameter
Description
start
stop
Example 1
In this example we will use substring() to extract some characters from a string:
<script type="text/javascript">
var str="Hello world!";
document.write(str.substring(3));
</script>
The output of the code above will be:
lo world!
Example 2
In this example we will use substring() to extract some characters from a string:
<script type="text/javascript">
var str="Hello world!";
document.write(str.substring(3,7));
</script>
The output of the code above will be:
lo w
Syntax
object.toSource()
Example
In this example we will show how to use the toSource() method:
<script type="text/javascript">
function employee(name,jobtitle,born)
{
this.name=name;
this.jobtitle=jobtitle;
this.born=born;
}
var fred=new employee("Fred Flintstone","Caveman",1970);
document.write(fred.toSource());
</script>
The output of the code above will be:
Syntax
stringObject.valueOf()
var t = d.getTime();
var y = t/years;
document.write("It's been: " + y + " years since 1970/01/01!");
</script>
</body>
</html>
Output of the Program
It's been: 39.68162548255962 years since 1970/01/01!
Use getDay() and an array to write a weekday, and not just a number.
<html>
<body>
<script type="text/javascript">
var d=new Date();
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
document.write("Today it is " + weekday[d.getDay()]);
</script>
</body>
</html>
Output of the Program
Today it is Thursday
Output of the program:It will show the time which is continuously changing.
Syntax
dateObject.getFullYear()
Example
In this example we get the current year and print it:
<script type="text/javascript">
var d = new Date();
document.write(d.getFullYear());
</script>
The output of the code above will be:
2009
Example 2
Here we will extract the year out of the specific date:
<script type="text/javascript">
var born = new Date("March 07, 1983 01:15:00");
document.write("I was born in " + born.getFullYear());
</script>
The output of the code above will be:
GetTimezoneOffset()
The getTimezoneOffset() method returns the difference in minutes between Greenwich Mean Time
(GMT) and local time.
For example, If your time zone is GMT+2, -120 will be returned.
Syntax
dateObject.getTimezoneOffset()
Example
In the following example we get the difference in minutes between Greenwich Mean Time (GMT)
and local time:
<script type="text/javascript">
var d = new Date();
document.write(d.getTimezoneOffset());
</script>
The output of the code above will be:
420
Example 2
Now we will convert the example above into GMT +/- hours:
<script type="text/javascript">
var d = new Date()
var gmtHours = -d.getTimezoneOffset()/60;
document.write("The local time zone is: GMT " + gmtHours);
</script>
SetDate()
In this example we set the day of the current month to 15 with the setDate() method:
<script type="text/javascript">
var d = new Date();
d.setDate(15);
document.write(d);
</script>
The output of the code above will be:
SetFullYear():Example 1
In this example we set the year to 1992 with the setFullYear() method:
<script type="text/javascript">
var d = new Date();
d.setFullYear(1992);
document.write(d);
</script>
The output of the code above will be:
Example 2
In this example we set the date to November 3, 1992 with the setFullYear() method:
<script type="text/javascript">
var d = new Date();
d.setFullYear(1992,10,3);
document.write(d);
</script>
SetHour():Example 1
In this example we set the hour of the current time to 15, with the setHours() method:
<script type="text/javascript">
var d = new Date();
d.setHours(15);
document.write(d);
</script>
The output of the code above will be:
Example 2
In this example we set the time to 15:35:01, with the setHours() method:
<script type="text/javascript">
var d = new Date();
d.setHours(15,35,1);
document.write(d);
</script>
The output of the code above will be:
SetMilliseconds:In this example we set the milliseconds of the current time to 001, with the setMilliseconds()
method:
<script type="text/javascript">
var d = new Date();
d.setMilliseconds(1);
document.write(d);
</script>
The output of the code above will be:
SetMinutes:In this example we set the minutes of the current time to 01, with the setMinutes() method:
<script type="text/javascript">
var d = new Date();
d.setMinutes(1);
document.write(d);
</script>
The output of the code above will be:
SetMonth():<script type="text/javascript">
var d=new Date();
d.setMonth(0);
document.write(d);
</script>
The output of the code above will be:
Setseconds():<script type="text/javascript">
var d = new Date();
d.setSeconds(1);
document.write(d);
</script>
The output of the code above will be:
Example
In this example we will subtract 77771564221 milliseconds from 1970/01/01 and display the new
date and time:
<script type="text/javascript">
var d = new Date();
d.setTime(-77771564221);
document.write(d);
</script>
The output of the code above will be:
SetUTCDate():<script type="text/javascript">
var d = new Date();
d.setUTCDate(15);
document.write(d);
</script>
The output of the code above will be:
SetUTCMonth():<script type="text/javascript">
var d=new Date();
d.setUTCMonth(0);
document.write(d);
</script>
The output of the code above will be:
SetUTCFullYear():<script type="text/javascript">
var d = new Date();
d.setUTCFullYear(1992);
document.write(d);
</script>
Example 2
In this example we set the date to November 3, 1992 with the setUTCFullYear() method:
<script type="text/javascript">
var d = new Date();
d.setUTCFullYear(1992,10,3);
document.write(d);
</script>
The output of the code above will be:
SetUTCHours():<script type="text/javascript">
var d = new Date();
d.setUTCHours(15);
document.write(d);
</script>
The output of the code above will be:
Example 2
In this example we set the time to 15:35:01, with the setUTCHours() method:
<script type="text/javascript">
var d = new Date();
d.setUTCHours(15,35,1);
document.write(d);
</script>
The output of the code above will be:
SetUTCMinutes:-
<script type="text/javascript">
var d = new Date();
d.setUTCMinutes(1);
document.write(d);
</script>
The output of the code above will be:
SetUTCSeconds:<script type="text/javascript">
var d = new Date();
d.setUTCSeconds(1);
document.write(d);
</script>
The output of the code above will be:
SetUTCMilliseconds:<script type="text/javascript">
var d = new Date();
d.setUTCMilliseconds(1);
document.write(d);
</script>
The output of the code above will be:
setYear:<script type="text/javascript">
var d = new Date();
d.setYear(1891);
document.write(d);
</script>
The output of the code above will be:
ToDateString:<script type="text/javascript">
ToGMTString:<script type="text/javascript">
var d = new Date();
document.write (d.toGMTString());
</script>
The output of the code above will be:
Example 2
In the example below we will convert a specific date (according to GMT) to a string:
<script type="text/javascript">
var born = new Date("July 21, 1983 01:15:00");
document.write(born.toGMTString());
</script>
The output of the code above will be:
ToLocaleDateString():<script type="text/javascript">
Example 2
In the example below we will convert a specific date (according to local time) to a string:
<script type="text/javascript">
var born = new Date("July 21, 1983 01:15:00");
document.write(born.toLocaleDateString());
</script>
The output of the code above will be:
ToLocaleTimeString():In the example below we will convert today's date (according to local time) to a string, and return
the time portion:
<script type="text/javascript">
var d = new Date();
document.write(d.toLocaleTimeString());
</script>
The output of the code above will be:
1:05:02 PM
Example 2
In the example below we will convert a specific date (according to local time) to a string, and return
the time portion:
<script type="text/javascript">
var x = new Date("July 21, 1983 01:15:00");
document.write(x.toLocaleTimeString());
</script>
1:15:00 AM
ToLocaleString:<script type="text/javascript">
var d = new Date();
document.write(d.toLocaleString());
</script>
The output of the code above will be:
Example 2
In the example below we will convert a specific date (according to local time) to a string:
<script type="text/javascript">
var born = new Date("July 21, 1983 01:15:00");
document.write(born.toLocaleString());
</script>
The output of the code above will be:
Method
Description
FF IE
Date()
getDate()
Returns the day of the month from a Date object (from 1-31)
getDay()
Returns the day of the week from a Date object (from 0-6)
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCMonth()
getUTCFullYear()
getUTCHours()
getUTCMinutes()
getUTCSeconds()
getUTCMilliseconds()
getYear()
parse()
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCMonth()
setUTCFullYear()
setUTCHours()
setUTCMinutes()
setUTCSeconds()
setUTCMilliseconds()
setYear()
Sets the year in the Date object (two or four digits). Use
setFullYear() instead !!
toDateString()
toGMTString()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toSource()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()
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:
cars1="Saab";
cars2="Volvo";
cars3="BMW";
However, what if you want to loop through the cars and find a specific one? And what if you had not
3 cars, but 300?
The best solution here is to use an array!
An array can hold all your variable values under a single name. And you can access the values by
referring to the array name.
Each element in the array has its own ID so that it can be easily accessed.
Create an Array
The following code creates an Array object called myCars:
myCars[1]="Volvo";
myCars[2]="BMW";
You could also pass an integer argument to control the array's size:
Access an Array
You can refer to a particular element in an array by referring to the name of the array and the index
number. The index number starts at 0.
The following code line:
document.write(myCars[0]);
will result in the following output:
Saab
myCars[0]="Opel";
Now, the following code line:
document.write(myCars[0]);
will result in the following output:
Opel
Join two array:- Two arrays are joined by the use of concat function
<html>
<body>
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "Jani";
arr[1] = "Tove";
arr[2] = "Hege";
var arr2 = new Array(3);
arr2[0] = "John";
arr2[1] = "Andy";
arr2[2] = "Wendy";
document.write(arr.concat(arr2));
</script>
</body>
</html>
Output of the Program
Jani,Tove,Hege,John,Andy,Wendy
How to use the join() method to put all the elements of an array into a string.
<html>
<body>
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
document.write(arr.join() + "<br />");
document.write(arr.join("."));
</script>
</body>
</html>
Output of the Program
Jani,Hege,Stale
Jani.Hege.Stale
How to use the sort() method to sort a literal array.
<html>
<body>
<script type="text/javascript">
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
document.write(arr + "<br />");
document.write(arr.pop() + "<br />");
document.write(arr);
</script>
The output of the code above will be:
Jani,Hege,Stale
Stale
Jani,Hege
Push Method():- To add one or more elements to the beginning of an array, use the unshift()
method.
Example
In this example we will create an array, and then change the length of it by adding a element:
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
document.write(arr + "<br />");
document.write(arr.push("Kai Jim") + "<br />");
document.write(arr);
</script>
The output of the code above will be:
Jani,Hege,Stale
4
Jani,Hege,Stale,Kai Jim
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
document.write(arr + "<br />");
document.write(arr.reverse());
</script>
The output of the code above will be:
Jani,Hege,Stale
Stale,Hege,Jani
Shift() :-To remove and return the last element of an array, use the
pop() method.
Example
In this example we will create an array, and then remove the first element of the array. Note that
this will also change the length of the array:
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
document.write(arr + "<br />");
document.write(arr.shift() + "<br />");
document.write(arr);
</script>
The output of the code above will be:
Jani,Hege,Stale
Jani
Hege,Stale
Slice() Method :- The slice() method returns selected elements from an existing array.
<html>
<body>
<script type="text/javascript">
var arr = new Array(6);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";
arr[5] = "Tove";
document.write(arr + "<br />");
document.write(arr.slice(0,1) + "<br />");
document.write(arr.slice(2,4) + "<br />");
document.write(arr);
</script>
</body>
</html>
Output of the Program:Jani,Hege,Stale,Kai Jim,Borge,Tove
Jani
Stale,Kai Jim
Jani,Hege,Stale,Kai Jim,Borge,Tove
Sort() Method :- The sort() method will sort the elements alphabetically by default. However,
this means that numbers will not be sorted correctly (40 comes before 5). To sort numbers, you
must create a function that compare numbers.
Note: After using the sort() method, the array is changed.
Example 1
In this example we will create an array and sort it alphabetically:
<script type="text/javascript">
var arr = new Array(6);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";
arr[5] = "Tove";
document.write(arr + "<br />");
document.write(arr.sort());
</script>
The output of the code above will be:
Jani,Hege,Stale,Kai Jim,Borge,Tove
Borge,Hege,Jani,Kai Jim,Stale,Tove
Example 2
In this example we will create an array containing numbers and sort it:
<script type="text/javascript">
var arr = new Array(6);
arr[0] = "10";
arr[1] = "5";
arr[2] = "40";
arr[3] = "25";
arr[4] = "1000";
arr[5] = "1";
10,5,40,25,1000,1
1,10,1000,25,40,5
Note that the numbers above are NOT sorted correctly (by numeric value). To solve this
problem, we must add a function that handles this problem:
<script type="text/javascript">
function sortNumber(a,b)
{
return a - b;
}
var arr = new Array(6);
arr[0] = "10";
arr[1] = "5";
arr[2] = "40";
arr[3] = "25";
arr[4] = "1000";
arr[5] = "1";
document.write(arr + "<br />");
document.write(arr.sort(sortNumber));
</script>
The output of the code above will be:
10,5,40,25,1000,1
1,5,10,25,40,1000
Syntax
arrayObject.splice(index,howmany,element1,.....,elementX)
Parameter
Description
index
howmany
Required Specify how many elements should be removed. Must be a number, but
can be "0"
element1
elementX
Example 1
In this example we will create an array and add an element to it:
<script type="text/javascript">
var arr = new Array(5);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";
document.write(arr + "<br />");
arr.splice(2,0,"Lene");
document.write(arr + "<br />");
</script>
The output of the code above will be:
Jani,Hege,Stale,Kai Jim,Borge
Jani,Hege,Lene,Stale,Kai Jim,Borge
Example 2
In this example we will remove the element at index 2 ("Stale"), and add a new element ("Tove")
there instead:
<script type="text/javascript">
var arr = new Array(5);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";
document.write(arr + "<br />");
arr.splice(2,1,"Tove");
document.write(arr);
</script>
The output of the code above will be:
Jani,Hege,Stale,Kai Jim,Borge
Jani,Hege,Tove,Kai Jim,Borge
Example 3
In this example we will remove three elements starting at index 2 ("Stale"), and add a new element
("Tove") there instead:
<script type="text/javascript">
var arr = new Array(5);
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";
document.write(arr + "<br />");
arr.splice(2,3,"Tove");
document.write(arr);
</script>
The output of the code above will be:
Jani,Hege,Stale,Kai Jim,Borge
Jani,Hege,Tove
Unshift() Method:- The unshift() method adds one or more elements to the beginning of
an array and returns the new length.
Syntax
arrayObject.unshift(newelement1,newelement2,....,newelementX)
Parameter
Description
newelement1
newelement2
newelementX
Tip: To add one or more elements to the end of an array, use the push() method.
Example
In this example we will create an array, add an element to the beginning of the array and then
return the new length:
<script type="text/javascript">
var arr = new Array();
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
document.write(arr + "<br />");
document.write(arr.unshift("Kai Jim") + "<br />");
document.write(arr);
</script>
The output of the code above will be:
Jani,Hege,Stale
4
Kai Jim,Jani,Hege,Stale
Description
FF IE
concat()
join()
Puts all the elements of an array into a string. The elements are
separated by a specified delimiter
pop()
5.5
push()
Adds one or more elements to the end of an array and returns the new
length
5.5
reverse()
shift()
5.5
slice()
sort()
splice()
5.5
toSource()
toString()
unshift()
Adds one or more elements to the beginning of an array and returns the 1
new length
valueOf()
var
var
var
var
var
var
myBoolean=new
myBoolean=new
myBoolean=new
myBoolean=new
myBoolean=new
myBoolean=new
Boolean();
Boolean(0);
Boolean(null);
Boolean("");
Boolean(false);
Boolean(NaN);
And all the following lines of code create Boolean objects with an initial value of true:
var
var
var
var
myBoolean=new
myBoolean=new
myBoolean=new
myBoolean=new
Boolean(true);
Boolean("true");
Boolean("false");
Boolean("Richard");
<script type="text/javascript">
document.write(Math.random());
</script>
</body>
</html>
Output of the Program
0.6124556044849889
Max ():- How to find the maximum values. Same as Min() Function
<html>
<body>
<script type="text/javascript">
document.write(Math.max(5,7) + "<br />");
document.write(Math.max(-3,5) + "<br />");
document.write(Math.max(-3,-5) + "<br />");
document.write(Math.max(7.25,7.30));
</script>
</body>
</html>
Output of the Program
7, 5,-3, 7.30
Description
FF IE
LN2
LN10
LOG2E
LOG10E
PI
SQRT1_2
SQRT2
Description
FF IE
abs(x)
acos(x)
asin(x)
atan(x)
atan2(y,x)
Returns the angle theta of an (x,y) point as a numeric value between -PI 1
and PI radians
ceil(x)
cos(x)
exp(x)
floor(x)
log(x)
max(x,y)
min(x,y)
pow(x,y)
random()
round(x)
sin(x)
sqrt(x)
tan(x)
toSource()
valueOf()
Math Object
The Math object allows you to perform mathematical tasks.
The Math object includes several mathematical constants and methods.
Syntax for using properties/methods of Math:
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(16);
Note: Math is not a constructor. All properties and methods of Math can be called by using Math as
an object without creating it.
Mathematical Constants
JavaScript provides eight mathematical constants that can be accessed from the Math object. These
are: E, PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2 log of E,
and base-10 log of E.
You may reference these constants from your JavaScript like this:
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
Mathematical Methods
In addition to the mathematical constants that can be accessed from the Math object there are also
several methods available.
The following example uses the round() method of the Math object to round a number to the
nearest integer:
document.write(Math.round(4.7));
The code above will result in the following output:
5
The following example uses the random() method of the Math object to return a random number
between 0 and 1:
document.write(Math.random());
The code above can result in the following output:
0.40387035318835657
The following example uses the floor() and random() methods of the Math object to return a
random number between 0 and 10:
document.write(Math.floor(Math.random()*11));
The code above can result in the following output:
Regular Expression:- When you search in a text, you can use a pattern to describe
what you are searching for. RegExp IS this pattern.
A simple pattern can be a single character.
A more complicated pattern consists of more characters, and can be used for
parsing, format checking, substitution and more.
You can specify where in the string to search, what type of characters to search for,
and more
Defining RegExp
The RegExp object is used to store the search pattern.
We define a RegExp object with the new keyword. The following code line defines a RegExp object
called patt1 with the pattern "e":
test()
The test() method searches a string for a specified value. Returns true or false
Example
var patt1=new RegExp("e");
document.write(patt1.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
exec()
The exec() method searches a string for a specified value. Returns the text of the found value. If no
match is found, it returns null
Example 1
var patt1=new RegExp("e");
document.write(patt1.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
You can add a second parameter to the RegExp object, to specify your search. For example; if you
want to find all occurrences of a character, you can use the "g" parameter ("global").
When using the "g" parameter, the exec() method works like this:
Example 2
var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)
Since there is six "e" letters in the string, the output of the code above will be:
eeeeeenull
compile()
The compile() method is used to change the RegExp.
compile() can change both the search pattern, and add or remove the second parameter.
Example
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
Since there is an "e" in the string, but not a "d", the output of the code above will be:
truefalse