Scribd
Upload
171 views

Introduction To Javascript: What You Should Already Know

JavaScript functions allow reusable blocks of code to be executed. A function is defined using the function keyword and name, followed by parentheses. Code is placed inside curly braces. Functions can be executed by calling their name, such as when an event like a button click occurs. Parameters can also be passed into functions. Functions allow code to be reused, reducing errors and improving efficiency.

Uploaded by

Mahera Shaikh
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
171 views

Introduction To Javascript: What You Should Already Know

JavaScript functions allow reusable blocks of code to be executed. A function is defined using the function keyword and name, followed by parentheses. Code is placed inside curly braces. Functions can be executed by calling their name, such as when an event like a button click occurs. Parameters can also be passed into functions. Functions allow code to be reused, reducing errors and improving efficiency.

Uploaded by

Mahera Shaikh
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 34

Introduction to JavaScript

JavaScript is used in millions of Web pages to improve the design, validate forms, and much more. JavaScript was developed by Netscape and is the most popular scripting language on the internet. JavaScript works in all major browsers that are version 3.0 or higher.

What You Should Already Know Before you continue you should have a basic understanding of the following: WWW, HTML and the basics of building Web pages

If you want to study these subjects first, go to our Home Page. What is JavaScript?
JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language - a scripting language is a lightweight programming language A JavaScript is lines of executable computer code A JavaScript is usually embedded directly in HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license JavaScript is supported by all major browsers, like Netscape and Internet Explorer

Are Java and JavaScript the same?


NO! Java and JavaScript are two completely different languages in both concept and design! Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.

What can a JavaScript Do?


JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server, this will save the server from extra processing

JavaScript How To ...


The HTML <script> tag is used to insert a JavaScript into an HTML page.

Java Script Tutorial From W3school.com Posted to IMSF by Manish

Examples
Write text How to write text on a page. Write text with formatting How to format the text on your page with HTML tags.

How to Put a JavaScript Into an HTML Page


<html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>
The code above will produce this output on an HTML page: Hello World! Example Explained To insert a script in an HTML page, we use the <script> tag. Use the type attribute to define the scripting language

<script type="text/javascript">
Then the JavaScript starts: The JavaScript command for writing some output to a page is document.write

document.write("Hello World!")
Then the <script> tag has to be closed

</script>

Ending Statements With a Semicolon?


With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon. Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line.

How to Handle Older Browsers


Browsers that do not support scripts will display the script as page content. To prevent them from doing this, we may use the HTML comment tag:

<script type="text/javascript"> <!-some statements

Java Script Tutorial From W3school.com Posted to IMSF by Manish

//--> </script>
The two forward slashes at the end of comment line (//) are a JavaScript comment symbol. This prevents the JavaScript compiler from compiling the line. Note: You cannot put // in front of the first comment line (like //<!--), because older browsers will display it. Strange? Yes! But that's the way it is.

JavaScript Where To
Scripts in the body section will be executed WHILE the page loads. Scripts in the head section will be executed when CALLED.

Examples
Head section Scripts that contain functions go in the head section of the document. Then we can be sure that the script is loaded before the function is called. Body section Execute a script that is placed in the body section. External script How to access an external script.

Where to Put the JavaScript


Scripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event. Scripts in the head section: Scripts to be executed when they are called, or when an event is triggered, go in the head section. When you place a script in the head section, you will ensure that the script is loaded before anyone uses it.

<html> <head> <script type="text/javascript"> some statements </script> </head>


Scripts in the body section: Scripts to be executed when the page loads go in the body section. When you place a script in the body section it generates the content of the page.

<html> <head> </head> <body> <script type="text/javascript"> some statements </script> </body>
Scripts in both the body and the head section: You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section.

Java Script Tutorial From W3school.com Posted to IMSF by Manish

<html> <head> <script type="text/javascript"> some statements </script> </head> <body> <script type="text/javascript"> some statements </script> </body>

How to Run an External JavaScript


Sometimes you might want to run the same script on several pages, without writing the script on each and every page. To simplify this you can write a script in an external file, and save it with a .js file extension, like this:

document.write("This script is external")


Save the external file as xxx.js. Note: The external script cannot contain the <script> tag Now you can call this script, using the "src" attribute, from any of your pages:

<html> <head> </head> <body> <script src="xxx.js"></script> </body> </html>


Remember to place the script exactly where you normally would write the script

JavaScript Variables
A variable is a "container" for information you want to store.

Examples
Variable Variables are used to store data. This example will show you how.

Variables
A variable is a "container" for information you want to store. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value. Rules for Variable names:

Variable names are case sensitive They must begin with a letter or the underscore character

Java Script Tutorial From W3school.com Posted to IMSF by Manish

Declare a Variable
You can create a variable with the var statement:

var strname = some value


You can also create a variable without the var statement:

strname = some value

Assign a Value to a Variable


You assign a value to a variable like this:

var strname = "Hege"


Or like this:

strname = "Hege"
The variable name is on the left side of the expression and the value you want to assign to the variable is on the right. Now the variable "strname" has the value "Hege".

Lifetime of Variables
When you declare a variable within a function, the variable can only be accessed within that function. When you exit the function, the variable is destroyed. These variables are called local variables. You can have local variables with the same name in different functions, because each is recognized only by the function in which it is declared. If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.

JavaScript Operators
Operators are used to operate on values.

Arithmetic Operators
Operator + * / % Description Addition Subtraction Multiplication Division Modulus (division remainder) Example x=2 x+2 x=2 5-x x=4 x*5 15/5 5/2 5%2 10%8 10%2 x=5 x++ Result 4 3 20 3 2.5 1 2 0 x=6

++

Increment

Java Script Tutorial From W3school.com Posted to IMSF by Manish

--

Decrement

x=5 x--

x=4

Assignment Operators
Operator = += -= *= /= %= Example x=y x+=y x-=y x*=y x/=y x%=y Is The Same As x=y x=x+y x=x-y x=x*y x=x/y x=x%y

Comparison Operators
Operator == === Description is equal to is equal to (checks for both value and type) Example 5==8 returns false x=5 y="5" x==y returns true x===y returns false != > < >= <= is not equal is greater than is less than is greater than or equal to is less than or equal to 5!=8 returns true 5>8 returns false 5<8 returns true 5>=8 returns false 5<=8 returns true

Logical Operators
Operator && Description and Example x=6 y=3 (x < 10 && y > 1) returns true || or x=6 y=3 (x==5 || y==5) returns false ! not x=6 y=3 !(x==y) returns true

String Operator
A string is most often text, for example "Hello World!". To stick two or more string variables together, use the + operator.

txt1="What a very" txt2="nice day!" txt3=txt1+txt2


The variable txt3 now contains "What a verynice day!". To add a space between two string variables, insert a space into the expression, OR in one of the strings.

Java Script Tutorial From W3school.com Posted to IMSF by Manish

txt1="What a very" txt2="nice day!" txt3=txt1+" "+txt2 or txt1="What a very " txt2="nice day!" txt3=txt1+txt2
The variable txt3 now contains "What a very nice day!".

JavaScript Functions
A function is a reusable code-block that will be executed by an event, or when the function is called.

Examples
Function How to call a function. <html> <head>

<script type="text/javascript"> function myfunction() { alert("HELLO") } </script>

</head> <body>

<form> <input type="button" onclick="myfunction()" value="Call function"> </form>

Java Script Tutorial From W3school.com Posted to IMSF by Manish

<p>By pressing the button, a function will be called. The function will alert a message.</p> </body> </html>

Function with arguments How to pass a variable to a function, and use the variable value in the function. Function with arguments 2 How to pass variables to a function, and use these variable values in the function. Function that returns a value How to let the function return a value. A function with arguments, that returns a value How to let the function find the sum of 2 arguments and return the result. <html> <head> <script type="text/javascript"> function total(numberA,numberB) { return numberA + numberB } </script> </head> <body> <script type="text/javascript"> document.write(total(2,3)) </script> <p>The script in the body section calls a function with two arguments, 2 and 3.</p> <p>The function returns the sum of these two arguments.</p> </body> </html>

output:5
Java Script Tutorial From W3school.com Posted to IMSF by Manish

The script in the body section calls a function with two arguments, 2 and 3. The function returns the sum of these two arguments

Functions
A function contains some code that will be executed by an event or a call to that function. A function is a set of statements. You can reuse functions within the same script, or in other documents. You define functions at the beginning of a file (in the head section), and call them later in the document. It is now time to take a lesson about the alert-box: This is JavaScript's method to alert the user.

alert("This is a message")

How to Define a Function


To create a function you define its name, any values ("arguments"), and some statements:

function myfunction(argument1,argument2,etc) { some statements }


A function with no arguments must include the parentheses:

function myfunction() { some statements }


Arguments are variables used in the function. The variable values are values passed on by the function call. By placing functions in the head section of the document, you make sure that all the code in the function has been loaded before the function is called. Some functions return a value to the calling expression

function result(a,b) { c=a+b return c }

How to Call a Function


A function is not executed before it is called. You can call a function containing arguments:

Java Script Tutorial From W3school.com Posted to IMSF by Manish

myfunction(argument1,argument2,etc)
or without arguments:

myfunction()

The return Statement


Functions that will return a result must use the "return" statement. This statement specifies the value which will be returned to where the function was called from. Say you have a function that returns the sum of two numbers:

function total(a,b) { result=a+b return result }


When you call this function you must send two arguments with it:

sum=total(2,3)
The returned value from the function (5) will be stored in the variable called sum

JavaScript Conditional Statements


Conditional statements in JavaScript are used to perform different actions based on different conditions.

Examples
If statement How to write an If statement. Use this statement if you want to execute a set of code if a specified condition is true. If...else statement How to write an If...Else statement. Use this statement if you want to execute one set of code if the condition is true and another set of code if the condition is false. If..elseif...else statement How to write an if..else if...else statement. Random link This example demonstrates a link, when you click on the link it will take you to W3Schools.com OR to RefsnesData.no. There is a 50% chance for each of them. Switch statement How to write a switch statement. Use this statement if you want to select one of many blocks of code to execute.

Conditional Statements

Java Script Tutorial From W3school.com Posted to IMSF by Manish

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 three conditional statements:

if statement - use this statement if you want to execute a set of code when a condition is true if...else statement - use this statement if you want to select one of two sets of lines to execute if...else if....else statement - use this statement if you want to select one of many sets of lines to execute switch statement - use this statement if you want to select one of many sets of lines to execute

If and If...else Statement


You should use the if statement if you want to execute some code if a condition is true.

Syntax if (condition) { code to be executed if condition is true } Example <script type="text/javascript"> //If the time on your browser is less than 10, //you will get a "Good morning" greeting. 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 just tell the code to execute some code if the condition is true. If you want to execute some code if a condition is true and another code if a condition is false, use the if....else statement.

Syntax if (condition) { code to be executed if condition is true } else { code to be executed if condition is false } Example <script type="text/javascript"> //If the time on your browser is less than 10, //you will get a "Good morning" greeting. //Otherwise you will get a "Good day" greeting.

Java Script Tutorial From W3school.com Posted to IMSF by Manish

var d = new Date() var time = d.getHours() if (time < 10) { document.write("Good morning!") } else { document.write("Good day!") } </script>

If...else if...else Statement


You should use the if....else if...else statement if you want to select one of many sets of lines to execute.

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 condition1 and condition2 are false } Example <script type="text/javascript"> var d = new Date() var time = d.getHours() if (time<10) { document.write("<b>Good morning</b>") } else if (time>10 & time<16) { document.write("<b>Good day</b>") } else { document.write("<b>Hello World!</b>") } </script>

Switch Statement
You should use the Switch statement if you want to select one of many blocks of code to be executed.

Syntax switch (expression) {

Java Script Tutorial From W3school.com Posted to IMSF by Manish

case label1: code to be executed if expression = label1 break case label2: code to be executed if expression = label2 break default: code to be executed if expression is different from both label1 and label2 }
This is how it works: First we have a single expression (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 <script type="text/javascript"> //You will receive a different greeting based //on what day it is. Note that Sunday=0, //Monday=1, Tuesday=2, etc. var d=new Date() theDay=d.getDay() switch (theDay) { case 5: document.write("Finally Friday") break case 6: document.write("Super Saturday") break case 0: document.write("Sleepy Sunday") break default: document.write("I'm looking forward to this weekend!") } </script>

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 is equal to PRES, then put the string "Dear President " in the variable named greeting. If the variable visitor is not equal to PRES, then put the string "Dear " into the variable named greeting.

JavaScript Looping
Looping statements in JavaScript are used to execute the same block of code a specified number of times.

Java Script Tutorial From W3school.com Posted to IMSF by Manish

Examples
For loop How to write a For loop. Use a For loop to run the same block of code a specified number of times Looping through HTML headers How to use the For loop to write the HTML headers. While loop How to write a While loop. Use a While loop to run the same block of code while or until a condition is true Do while loop How to write a Do While loop. Use a Do While loop to run the same block of code while or until a condition is true. This loop will always be executed once, even if the condition is false, because the statements are executed before the condition is tested

Looping
Very often when you write code, you want the same block of code to run a number of times. You can use looping statements in your code to do this. In JavaScript we have the following looping statements:

while

while - loops through a block of code while a condition is true do...while - loops through a block of code once, and then repeats the loop while a condition is true for - run statements a specified number of times

The while statement will execute a block of code while a condition is true..

while (condition) { code to be executed }

do...while
The do...while statement will execute a block of code once, and then it will repeat the loop while a condition is true

do {

code to be executed } while (condition)

for
The for statement will execute a block of code a specified number of times

for (initialization; condition; increment) {

Java Script Tutorial From W3school.com Posted to IMSF by Manish

code to be executed

JavaScript Guidelines
Some things to know about JavaScript.

JavaScript is Case Sensitive


A function named "myfunction" is not the same as "myFunction". Therefore watch your capitalization when you create or call variables, objects and functions.

Symbols
Open symbols, like ( { [ " ', must have a matching closing symbol, like ' " ] } ).

White Space
JavaScript ignores extra spaces. You can add white space to your script to make it more readable. These 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!")
Note: You can not break up a code line like this:

document.write \ ("Hello World!")


The example above will cause an error.

Insert Special Characters


You can insert special characters (like " ' ; &) with the backslash:

document.write ("You \& I sing \"Happy Birthday\".")


The example above will produce this output:

You & I sing "Happy Birthday".

Java Script Tutorial From W3school.com Posted to IMSF by Manish

Comments
You can add a comment to your JavaScript code starting the comment with two slashes "//":

sum=a + b

//calculating the sum

You can also add a comment to the JavaScript code, starting the comment with "/*" and ending it with "*/"

sum=a + b

/*calculating the sum*/

Using "/*" and "*/" is the only way to create a multi-line comment:

/* This is a comment block. It contains several lines*/

Javascript refrence:-

JavaScript Array Object


The Array object is used to store a set of values in a single variable name.

Examples
Create an array with a numeric parameter and assign data to it Create an array and assign data to it. <html> <body> <script type="text/javascript"> var famname = new Array(6) famname[0] = "Jan Egil" famname[1] = "Tove" famname[2] = "Hege" famname[3] = "Stale" famname[4] = "Kai Jim" famname[5] = "Borge" for (i=0; i<6; i++) { document.write(famname[i] + "<br>") }

Java Script Tutorial From W3school.com Posted to IMSF by Manish

</script> </body> </html>

Jan Egil Tove Hege Stale Kai Jim Borge


output:Create a literal array Create a literal array. Note that the length method is used to find out how many elements the array contains. Array - some properties and methods Some properties and methods to use with the Array object. Array - sort() The sort() method. What happens if we want to sort an array that consists of numbers? What is the sort order <html> <body <p> <b>Note:</b> If we do not use a compareFunction to define the sort order, the array is always sorted lexicographically. "500" comes before "7" in lexicographic order, but in a numeric sort 7 comes before 500. This example shows how to use a compare function - which will sort correctly whether the elements in the array are numbers or numeric strings. </p> <script type="text/javascript"> array1=new Array("Red","Blue","Green") array2=new Array("70","9","800") array3=new Array(50,10,2,300) array4=new Array("70","8","850",30,10,5,400) function compareNum(a,b) { return a-b }

document.write("Sorted: " + array1.sort())

Java Script Tutorial From W3school.com Posted to IMSF by Manish

document.write("<br /><br />") document.write("Sorted without compareNum: " + array2.sort()) document.write("<br />") document.write("Sorted with compareNum: " + array2.sort(compareNum)) document.write("<br /><br />") document.write("Sorted without compareNum: " + array3.sort()) document.write("<br />") document.write("Sorted with compareNum: " + array3.sort(compareNum)) document.write("<br /><br />") document.write("Sorted without compareNum: " + array4.sort()) document.write("<br />") document.write("Sorted with compareNum: " + array4.sort(compareNum)) </script> </body> </html> Array - concat() and slice() How to use concat() and slice(). <html> <body> <script type="text/javascript"> var famname = new Array(3) famname[0] = "Jani" famname[1] = "Tove" famname[2] = "Hege" var famname2 = new Array(3) famname2[0] = "John" famname2[1] = "Andy" famname2[2] = "Wendy" var famname3 = new Array("Stale","Borge") document.write(famname.join() + "<br>")

Java Script Tutorial From W3school.com Posted to IMSF by Manish

document.write(famname.concat(famname2) + "<br>") document.write(famname.concat(famname2,famname3) + "<br>") document.write(famname.slice(1) + "<br>") </script> </body> </html> output:-

Jani,Tove,Hege Jani,Tove,Hege,John,Andy,Wendy Jani,Tove,Hege,John,Andy,Wendy,Stale,Borge Tove,Hege

Array - splice() How to use the splice() method. <html> <body> <script type="text/javascript"> myCars=["BMW","Volvo","Saab","Ford"] document.write("myCars: " + myCars) document.write("<br /><br />") removed=myCars.splice(2,0,"Volkswagen") document.write("After adding 1: " + myCars) document.write("<br /><br />") removed=myCars.splice(3,1) document.write("After removing 1: " + myCars) document.write("<br /><br />")

removed=myCars.splice(2,1,"Seat") document.write("After replacing 1: " + myCars) document.write("<br /><br />")

Java Script Tutorial From W3school.com Posted to IMSF by Manish

removed=myCars.splice(0,2,"Peugeot","Honda","Toyota") document.write("After replacing 2 and adding 1: " + myCars) </script>

</body> </html> output:- myCars: BMW,Volvo,Saab,Ford

After adding 1: BMW,Volvo,Volkswagen,Saab,Ford After removing 1: BMW,Volvo,Volkswagen,Ford After replacing 1: BMW,Volvo,Seat,Ford After replacing 2 and adding 1: Peugeot,Honda,Toyota,Seat,Ford Array Object
The Array object is used to store a set of values in a single variable name. Each value is an element of the array and has an associated index number. You create an instance of the Array object with the "new" keyword. The following example creates two arrays, both of three elements:

var family_names=new Array(3) var family_names=new Array("Tove","Jani","Stale")


You can refer to a particular element in the array by using the name of the array and the index number. The index number starts at 0. If you create an array with a single numeric parameter, you can assign data to each of the elements in the array like this:

family_names[0]="Tove" family_names[1]="Jani" family_names[2]="Stale"


And the data can be retrieved by using the index number of the particular array element you want, like this:

mother=family_names[0] father=family_names[1]
The Array object's properties and methods are described below: NN: Netscape, IE: Internet Explorer

Properties
Syntax: object.property_name

Java Script Tutorial From W3school.com Posted to IMSF by Manish

Property constructor length prototype

Description Contains the function that created an object's prototype Returns the number of elements in the array Allows you to add properties to an array

NN IE 4 3 3 4 4 4

Methods
Syntax: object.method_name() Method concat() join(delimiter) Description Puts all the elements of an array into a string separated by a specified delimiter (comma is default) NN IE 4 4 3

Joins two or more arrays and returns a new array 4

pop() push("element1","element2") reverse() shift() slice(begin[,end]) sort() splice(index,howmany[,el1,el2]) toSource() toString() unshift("element1","element2") valueOf()

Removes and returns the last element of an array 4 Adds one or more elements to the end of an array 4 and returns the new length Reverses the order of the elements in an array 3 Removes and returns the first element of an array 4 Creates a new array from a selected section of an 4 existing array Sorts the elements of an array Adds and/or removes elements of an array Returns a string that represents the source code of the array Returns a string that represents the specified array and its elements 3 4

5.5 5.5 4 5.5 4 4 5.5

4.06 4 3 4 5.5 3

Adds one or more elements to the beginning of an 4 array and returns the new length Returns the primitive value of an array 4

JavaScript Boolean Object


The Boolean object is an object wrapper for a Boolean value and it is used to convert a non-Boolean value to a Boolean value.

Examples
Boolean Check if the Boolean object is true or false. <html> <body> <script type="text/javascript"> var b1=new Boolean( 0) var b2=new Boolean(1) var b3=new Boolean("") var b4=new Boolean(null)

Java Script Tutorial From W3school.com Posted to IMSF by Manish

var b5=new Boolean(NaN) var b6=new Boolean("false")

document.write("0 is boolean "+ b1 +"<br />") document.write("1 is boolean "+ b2 +"<br />") document.write("An empty string is boolean "+ b3 + "<br />") document.write("null is boolean "+ b4+ "<br />") document.write("NaN is boolean "+ b5 +"<br />") document.write("The string 'false' is boolean "+ b6 +"<br />") </script> </body> </html> output:-

0 is boolean false 1 is boolean true An empty string is boolean false null is boolean false NaN is boolean false The string 'false' is boolean true Boolean Object
The Boolean object is an object wrapper for a Boolean value and it is used to convert a non-Boolean value to a Boolean value, either true or false. If the Boolean object has no initial value or if it is 0, null, "", false, or NaN, the initial value is false. Otherwise it is true (even with the string "false"). All the following lines of code create Boolean objects with an initial value of false:

var var var var var var

b1=new b2=new b3=new b4=new b5=new b6=new

Boolean() Boolean(0) Boolean(null) Boolean("") Boolean(false) Boolean(NaN)

All the following lines of code create Boolean objects with an initial value of true:

var var var var

b1=new b2=new b3=new b4=new

Boolean(true) Boolean("true") Boolean("false") Boolean("Richard")

Java Script Tutorial From W3school.com Posted to IMSF by Manish

The Boolean object's properties and methods are described below: NN: Netscape, IE: Internet Explorer

Properties
Syntax: object.property_name Property constructor prototype Description Contains the function that created an object's prototype Allows addition of properties and methods to the object NN IE 4 3 4 4

Methods
Syntax: object.method_name() Method toString() Description Converts a Boolean value to a string. This method is called by JavaScript automatically whenever a Boolean object is used in a situation requiring a string NN IE 4 4

valueOf()

Returns a primitive value ("true" or "false") for the Boolean 4 object

JavaScript Date Object


The Date object is used to work with dates and times.

Examples
Date Returns today's date including date, month, and year. Note that the getMonth method returns 0 in January, 1 in February etc. So add 1 to the getMonth method to display the correct date. <html> <body> <script type="text/javascript"> var d = new Date() document.write(d.getDate()) document.write(".") document.write(d.getMonth() + 1) document.write(".") document.write(d.getFullYear()) </script> </body>

Java Script Tutorial From W3school.com Posted to IMSF by Manish

</html> Time Returns the current local time including hour, minutes, and seconds. To return the GMT time use getUTCHours, getUTCMinutes etc. <html> <body> <script type="text/javascript"> var d = new Date() d.setFullYear("1990") document.write(d) </script> </body> </html> Output:-

Fri Jul 6 11:46:09 UTC+0530 1990


Set date You can also set the date or time into the date object, with the setDate, setHour etc. Note that in this example, only the FullYear is set. UTC time The getUTCDate method returns the Universal Coordinated Time which is the time set by the World Time Standard. Display weekday A simple script that allows you to write the name of the current day instead of the number. Note that the array object is used to store the names, and that Sunday=0, Monday=1 etc. Display full date How to write a complete date with the name of the day and the name of the month. <html> <body> <script type="text/javascript"> var d=new Date() var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") document.write(weekday[d.getDay()] + " ")

Java Script Tutorial From W3school.com Posted to IMSF by Manish

document.write(d.getDate() + ". ") document.write(monthname[d.getMonth()] + " ") document.write(d.getFullYear()) </script> </body> </html> Output:-

Wednesday 6. Jul 2005


Display time How to display the time on your pages. Note that this script is similar to the Time example above, only this script writes the time in an input field. And it continues writing the time one time per second. <html> <head> <script type="text/javascript"> var timer = null function stop() { clearTimeout(timer) } function start() { var time = new Date() var hours = time.getHours() var minutes = time.getMinutes() minutes=((minutes < 10) ? "0" : "") + minutes var seconds = time.getSeconds() seconds=((seconds < 10) ? "0" : "") + seconds var clock = hours + ":" + minutes + ":" + seconds document.forms[0].display.value = clock timer = setTimeout("start()",1000)

Java Script Tutorial From W3school.com Posted to IMSF by Manish

} </script> </head> <body onload="start()" onunload="stop()"> <form> <input type="text" name="display" size="20"> </form> </body> </html>

Date Object
The Date object is used to work with dates and times. To create an instance of the Date object and assign it to a variable called "d", you do the following:

var d=new Date()


After creating an instance of the Date object, you can access all the methods of the Date object from the "d" variable. To return the current day in a month (from 1-31) of a Date object, write the following:

d.getDate()
The Date object can also have the following parameters:

new Date(milliseconds) new Date(dateString) new Date(yr_num, mo_num, day_num [, hr_num, min_num, sec_num, ms_num])

milliseconds - the number of milliseconds since 01 January, 1970 00:00:00 dateString - the date in a format that is recognized by the Date.parse method yr_num, mo_num, day_num - the year, month or day of the date hr_num, min_num, sec_num, ms_num - the hours, minutes, seconds and milliseconds

If you only use Date(), JavaScript creates an object for today's date according to the time on the local machine. Here are some examples on how to create Date objects:

var var var var

d=new d=new d=new d=new

Date("October 12, 1988 13:14:00") Date("October 12, 1988") Date(88,09,12,13,14,00) Date(88,09,12)

Java Script Tutorial From W3school.com Posted to IMSF by Manish

var d=new Date(500)


The Date object's properties and methods are described below: NN: Netscape, IE: Internet Explorer

Properties
Syntax: object.property_name Property constructor prototype Description Contains the function that created an object's prototype Allows addition of properties to a date NN IE 4 3 4 4

Methods
Syntax: object.method_name() Method Date() getDate() getDay() getMonth() getFullYear() getYear() getHours() getMinutes() getSeconds() getMilliseconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCMonth() getUTCFullYear() getUTCHours() getUTCMinutes() getUTCSeconds() getUTCMilliseconds() parse() setDate() setFullYear() setHours() setMilliseconds() setMinutes() Description Returns a Date object Returns the date of a Date object (from 1-31) Returns the day of a Date object (from 0-6. 0=Sunday, 1=Monday, etc.) NN IE 2 2 2 3 3 3 3 4 3 3 3 3 4 3 3 4 4 4 4 4 4 4 4 3 3 4 3 4 3

Returns the month of a Date object (from 0-11. 0=January, 2 1=February, etc.) Returns the year of a Date object (four digits) Returns the year of a Date object (from 0-99). Use getFullYear instead !! Returns the hour of a Date object (from 0-23) Returns the minute of a Date object (from 0-59) Returns the second of a Date object (from 0-59) Returns the millisecond of a Date object (from 0-999) Returns the number of milliseconds since midnight 1/11970 Returns the time difference between the user's computer and GMT Returns the date of a Date object in universal (UTC) time Returns the day of a Date object in universal time Returns the month of a Date object in universal time Returns the four-digit year of a Date object in universal time Returns the hour of a Date object in universal time Returns the minutes of a Date object in universal time Returns the seconds of a Date object in universal time Returns the milliseconds of a Date object in universal time Returns a string date value that holds the number of milliseconds since January 01 1970 00:00:00 Sets the date of the month in the Date object (from 1-31) Sets the year in the Date object (four digits) Sets the hour in the Date object (from 0-23) Sets the millisecond in the Date object (from 0-999) Set the minute in the Date object (from 0-59) 4 2 2 2 2 4 2 2 4 4 4 4 4 4 4 4 2 2 4 2 4 2

Java Script Tutorial From W3school.com Posted to IMSF by Manish

setMonth() setSeconds() setTime() setYear() setUTCDate() setUTCDay() setUTCMonth() setUTCFullYear() setUTCHours() setUTCMinutes() setUTCSeconds() setUTCMilliseconds() toGMTString() toLocaleString() toString()

Sets the month in the Date object (from 0-11. 0=January, 1=February) Sets the second in the Date object (from 0-59) Sets the milliseconds after 1/1-1970 Sets the year in the Date object (00-99)

2 2 2 2

3 3 3 3 4 4 4 4 4 4 4 4 3 3

Sets the date in the Date object, in universal time (from 1- 4 31) Sets the day in the Date object, in universal time (from 0-6. 4 Sunday=0, Monday=1, etc.) Sets the month in the Date object, in universal time (from 0-11. 0=January, 1=February) Sets the year in the Date object, in universal time (four digits) 4 4

Sets the hour in the Date object, in universal time (from 0- 4 23) Sets the minutes in the Date object, in universal time (from 4 0-59) Sets the seconds in the Date object, in universal time (from 4 0-59) Sets the milliseconds in the Date object, in universal time (from 0-999) Converts the Date object to a string, set to GMT time zone 4 2

Converts the Date object to a string, set to the current time 2 zone Converts the Date object to a string 2

JavaScript Math Object


The built-in Math object includes mathematical constants and functions.

Examples
Round How to round a specified number to the nearest whole number <html> <body> <script type="text/javascript"> document.write(Math.round(7.25)) </script> </body> </html> output:-7 Random number The random method returns a random number between 0 and 1

Java Script Tutorial From W3school.com Posted to IMSF by Manish

Random number from 0 to 10 How to find a random number from 0 to 10 using the random() and round() methods. <html> <body> <script type="text/javascript"> document.write(Math.random()) </script> </body> </html> output:-

0.16367640687028068

Max number How to test which of two numbers has the higher value. <html> <body> <script type="text/javascript"> document.write(Math.max(2,4)) </script> </body> </html> output:-4 Min number How to test which of two numbers has the lower value.

Math Object
The built-in Math object includes mathematical constants and functions. You do not need to create the Math object before using it. To store a random number between 0 and 1 in a variable called "r_number":

r_number=Math.random()
To store the rounded number of 8.6 in a variable called "r_number":

r_number=Math.round(8.6)
The Math object's properties and methods are described below:

Java Script Tutorial From W3school.com Posted to IMSF by Manish

NN: Netscape, IE: Internet Explorer

Properties
Syntax: object.property_name Property E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2 Description Returns the base of a natural logarithm Returns the natural logarithm of 2 Returns the natural logarithm of 10 Returns the base-2 logarithm of E Returns the base-10 logarithm of E Returns PI Returns 1 divided by the square root of 2 Returns the square root of 2 NN IE 2 2 2 2 2 2 2 2 3 3 3 3 3 3 3 3

Methods
Syntax: object.method_name() Method abs(x) acos(x) asin(x) atan(x) atan2(y,x) 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) Description Returns the absolute value of x Returns the arccosine of x Returns the arcsine of x Returns the arctangent of x Returns the angle from the x axis to a point Returns the nearest integer greater than or equal to x Returns the cosine of x Returns the value of E raised to the power of x Returns the nearest integer less than or equal to x Returns the natural log of x Returns the number with the highest value of x and y Returns the number with the lowest value of x and y Returns the value of the number x raised to the power of y Returns a random number between 0 and 1 Rounds x to the nearest integer Returns the sine of x Returns the square root of x Returns the tangent of x NN IE 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3

JavaScript String Object


The String object is used to work with text.

Examples
The length property This example returns the number of characters in a string. <html>

Java Script Tutorial From W3school.com Posted to IMSF by Manish

<body> <script type="text/javascript"> var str="W3Schools is great!" document.write("<p>" + str + "</p>") document.write(str.length) </script> </body> </html> output:-

W3Schools is great! 19
The fontcolor() method This example returns a string in a specified color. The indexOf() method This example tests if a string contains a specified text and returns the position of where the text was found. The match() method This example tests if a string contains a specified text and returns the text if it was found. <html> <body> <script type="text/javascript"> var str = "W3Schools is great!" document.write(str.match("great")) </script> <p>This example tests if a string contains a specified word. If the word is found it returns the word.</p> </body> </html> output:-

great This example tests if a string contains a specified word. If the word is found it returns the word Java Script Tutorial From W3school.com Posted to IMSF by Manish

The substr() and substring() methods This example returns a specified part of a string. The toLowerCase() and toUpperCase() methods This example converts a string to lowercase and uppercase.

String object
The String object is used to work with text. The String object's properties and methods are described below: NN: Netscape, IE: Internet Explorer

Properties
Syntax: object.property_name Property constructor length Returns the number of characters in a string Description NN IE 4 2 4 3

Methods
Syntax: object.method_name() Method anchor("anchorname") big() blink() bold() charAt(index) charCodeAt(i) concat() fixed() fontcolor() fontsize() fromCharCode() indexOf() italics() lastIndexOf() Description Returns a string as an anchor Returns a string in big text Returns a string blinking Returns a string in bold Returns the character at a specified position Returns the Unicode of the character at a specified position Returns two concatenated strings Returns a string as teletype Returns a string in a specified color Returns a string in a specified size Returns the character value of a Unicode Returns the position of the first occurrence of a specified string inside another string. Returns -1 if it never occurs Returns a string in italic Returns the position of the first occurrence of a specified string inside another string. Returns -1 if it never occurs. Note: This method starts from the right and moves left! Returns a string as a hyperlink Similar to indexOf and lastIndexOf, but this method returns the specified string, or "null", instead of a numeric value Replaces some specified characters with some new specified characters Returns an integer if the string contains some specified characters, if not it returns -1 Returns a string containing a specified character index Returns a string as small text NN IE 2 2 2 2 2 4 4 2 2 2 4 2 2 2 3 3 4 4 3 3 3 4 3 3 3 3 3

link() match() replace() search() slice() small()

2 4 4 4 4 2

3 4 4 4 4 3

Java Script Tutorial From W3school.com Posted to IMSF by Manish

split() strike() sub() substr() substring() sup() toLowerCase() toUpperCase()

Splits a string into an array of strings Returns a string strikethrough Returns a string as subscript

4 2 2

4 3 3 4 3 3 3 3

Returns the specified characters. 14,7 returns 7 characters, from 4 the 14th character (starts at 0) Returns the specified characters. 7,14 returns all characters from 2 the 7th up to but not including the 14th (starts at 0) Returns a string as superscript Converts a string to lower case Converts a string to upper case 2 2 2

JavaScript HTML DOM Objects


With JavaScript you can access and manipulate all of the HTML DOM objects.

HTML DOM Objects


Follow the links to learn more about the objects and their collections, properties, methods and events. Object Anchor Applet Area Base Basefont Body Button Checkbox Description Represents an HTML a element (a hyperlink) Represents an HTML applet element. The applet element is used to place executable content on a page Represents an area of an image-map. An image-map is an image with clickable regions Represents an HTML base element Represents an HTML basefont element Represents the body of the document (the HTML body) Represents a push button on an HTML form. For each instance of an HTML <input type="button"> tag on an HTML form, a Button object is created Represents a checkbox on an HTML form. For each instance of an HTML <input type="checkbox"> tag on an HTML form, a Checkbox object is created Used to access all elements in a page Represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons For each instance of an HTML <input type="file"> tag on a form, a FileUpload object is created Forms are used to prompt users for input. Represents an HTML form element Represents an HTML frame Represents an HTML frameset Represents a hidden field on an HTML form. For each instance of an HTML <input type="hidden"> tag on a form, a Hidden object is created A predefined object which can be accessed through the history property of the Window object. This object consists of an array of URLs. These URLs are all the URLs the user has visited within a browser window Represents an HTML inline-frame Represents an HTML img element Represents an HTML link element. The link element can only be used within

Document Event

FileUpload Form Frame Frameset Hidden History

Iframe Image Link

Java Script Tutorial From W3school.com Posted to IMSF by Manish

the <head> tag Location Meta Navigator Option Contains information about the current URL Represents an HTML meta element Contains information about the client browser Represents an option in a selection list on an HTML form. For each instance of an HTML <option> tag in a selection list on a form, an Option object is created Represents a password field on an HTML form. For each instance of an HTML <input type="password"> tag on a form, a Password object is created Represents radio buttons on an HTML form. For each instance of an HTML <input type="radio"> tag on a form, a Radio object is created Represents a reset button on an HTML form. For each instance of an HTML <input type="reset"> tag on a form, a Reset object is created Automatically created by the JavaScript runtime engine and it contains information about the client's display screen Represents a selection list on an HTML form. For each instance of an HTML <select> tag on a form, a Select object is created Represents an individual style statement. This object can be accessed from the document or from the elements to which that style is applied Represents a submit button on an HTML form. For each instance of an HTML <input type="submit"> tag on a form, a Submit object is created Represents an HTML table element Represents an HTML td element Represents an HTML th element Represents an HTML tr element Represents a text field on an HTML form. For each instance of an HTML <input type="text"> tag on a form, a Text object is created Represents an HTML textarea element Corresponds to the browser window. A Window object is created automatically with every instance of a <body> or <frameset> tag

Password

Radio Reset Screen Select Style Submit Table TableData TableHeader TableRow Text Textarea Window

Java Script Tutorial From W3school.com Posted to IMSF by Manish

You might also like