1.1 - Introduction To Javascript

Introduction to JavaScript
Copyright 2007 Accenture All Rights Reserved. Accenture, its logo, and Accenture High Performance Delivered are trademarks of Accenture.
Contents
What is JavaScript Features of JavaScript JavaScript in HTML page
Copyright 2007 Accenture All Rights Reserved.
Objectives
At the end of this section, you should be able to: Understand what JavaScript is Understand the need of JavaScript Understand how to use JavaScript
What is JavaScript?
Javascript is a scripting language which can be used in Web pages to do client side validations. It is supported by all the browsers. It is also used to validate web pages to improve design and add functionality to web pages.
Features of JavaScript
Features of Java
Programming Tool for interactive HTML pages Interpreted Language Saves time as validation is done on Client side Event-Driven Programming Detects Client browser, hence platform independent
JavaScript in an HTML page

JavaScript is inserted in a HTML file. The Internet browser will read the HTML file and interpret the JavaScript and display the desired result.
Displayed in browser
Where to put the JavaScript?

JavaScripts are executed when: A web page loads into the browser. An event is triggered. Depending on the above two conditions, JavaScript will be included in the body section or in the head section of the HTML file.
Scripts Execution Head Section

Scripts, placed in the head section will be executed When they are called or When an event is triggered.
<html> <head> <script language=javascript"> some statements </script> </head> </html> Advantage The script will be loaded before anyone uses it.
Scripts Execution - Body Section

A script to be executed while the page is being loaded is placed in the body section.
<html> <head> </head> <body> <script type=javascript"> some statements </script> </body> </html> Advantage The script generates the content of the page.
Scripts in body and head section

Document can contain unlimited number of scripts. They can be placed in head or body or in both the sections simultaneously. <html> <head> <script type =javascript"> --some statements </script> </head> <body> <script type =javascript"> --some statements </script> </body> </html>
Example
<html> <head> <script type="text/javascript"> document.write(Welcome to Javascript - Head Section") </script> </head> <body> <script type="text/javascript"> document.write(Welcome to Javascript - Body Section") </script> </body> </html>
Output:
What is a Variable?
Information is stored in variables. Its value can be change during the execution of script. It can be referenced by its name to see its value or to change its value. Datatype supported Variant. Variant can store any type of data.
Variant
Integer Boolean Float Char
Variant
Declaring Variables
There are two ways of declaring a variable. Implicit Declaration Explicit Declaration Implicit Declaration Declare variables by using its name directly in the script. For example : name=Tom Explicit declaration - Using var keyword For example : var name name=Tom
Rules for Variable Names

Must begin with a letter Cannot contain a period (.) Cannot exceed 255 characters One variable cannot be used to store multiples values in a scope. For example: var name age =Tom
Name of variable
Value of variable
Operators
The operators in JavaScript are the same as in any other language or scripting engine. Each operator denotes a specific operation. They can be classified into three categories: Arithmetic Operators + , - ,* , / ,% Logical Operators && , || , ! Relational Operators < , > , = , >= , <= , == ,!=
Conditional Statements
In JavaScript we have three conditional statements: if statement if...else statement if... else if statement switch statement
Conditional Statement - if.... Statement

if...statements are used to execute only a true condition. For example: if (count=5) { document.write(Five); } In the above example, only a single statement will be performed if the condition is true.
Conditional Statement - if....else

In order to execute true and false conditions, if ..else conditions are used. For example:
if (a=5) { document.write(Five); } else { a = a+1; }
Conditional Statement - ifelse ifelse

In order to execute many blocks of code, use the if...then...elseif statement.
If (age<=5 ) { document.write(You are very young!); }
else if (age >5 && age<=15) { else { document.write( Not ready to disclose age); } document.write(You are a teenager); }
Conditional Statement - switch

switch statement is used to execute one of many blocks of code depending on the value passed.
var loc=Bang1 switch (loc ) { case Bang1: document.write( Cunningham Road Office); break; case Bang2: document.write(Bannerghatta Road Office); break; default: document.write( Dairy Circle Office " ); }
JavaScript Popup Boxes

There are three popup boxes supported by JavaScript
Alert Confirm Prompt
JavaScript - Alert Boxes

An alert box is used to ensure that the user gets the information.
For example
<html> <head> <script type="text/javascript"> alert(" Beware of pickpocketers"); </script> </head> </html>
Output:
JavaScript - Confirm Boxes

An confirm box is used to make the user confirm the information before entering the page. For example Output:
<html> <head> <script type="text/javascript"> confirm(" Are you awake ?"); if ("OK") document.write("Good for you"); </script> </head> </html>
JavaScript - Prompt Boxes

A prompt box is used to accept a value from the user before opening the page.
Output:
For example
<html> <head> <script type="text/javascript"> var name=prompt(" Enter your name"); document.write(name + ",Come let's rock !"); </script> </head></html>
JavaScript - Functions
Can called from anywhere within the page Can be placed both in the body and in the head section Can be independent or can also return a value Begins with the keyword function followed by the name of function along with ( ) Statements within the function are enclosed in { }
JavaScript - Functions (contd)

For example
<html> <head> <script type="text/javascript"> function disp() { alert( Function called from the body section"); } </script> </head> <body> <script type="text/javascript"> disp(); </script> </body> </html>
Output:
Events in JavaScript
Interaction between the user and the web page is through a set of events. Events are pieces of code that are run when an action is taken by the user. Events in windows generate messages. These messages update the operating system and the application about the activities going on.
Events (contd)
Each web browser has it's own specific set of events that can be triggered. Following are some of the events which are supported by both Internet Explorer and Netscape Navigator (Ver.4.0 and above)
OnClick OnBlur OnFocus
Events (contd)
OnClick This is the event that is implemented most often and supported by all browsers. It is added to <input type="button"> tags and <a> links. This event is triggered when the button or the hyperlink is clicked For example: <input type="Button" value="Save" onclick=alert('This is the event of Button')">
When the Button is clicked, the alert box will be displayed.
Events (contd)
OnBlur Supported by almost all browsers This event occurs when an element loses focus , that is when the user selects another element. It can be added to any element. For example:
<html> <form> <input type="Button" value="Save" onblur="confirm('This is the Blur event on SAVE button')"> <input type="Button" value="Cancel"> </form> </html>
When the user moves the focus from SAVE button to CANCEL button , the confirm message will be displayed.
Events (contd.)
OnFocus
This event occurs when the cursor focus is on the element and can be applied to all elements. It can be added to Select ,text boxes and textareas. It is activated only after the element loses focus For example:
<html> <head> <script type="text/javascript"> function disp() { alert("The focus is on the textbox"); </script> </head> <form> <input type="text" onfocus="disp()"><br> <input type="Button" value="Save"> </form> </html>
When the user places the focus on the Textbox , the disp() function will be invoked.
Key Points
JavaScript is a scripting language for html pages on the WWW and Intranets. Only one datatype Variant JavaScript supports conditional and looping statements. Functions form an integral part of JavaScript OnClick ,OnBlur and OnFocus are some of the events supported by JavaScript.
Available Resources
Sites
http://www.w3schools.com/JS/default.asp http://www.tutorialized.com/tutorials/Javascript http://www.beansoftware.com/ASP.NET-Tutorials/JavascriptFunctions.aspx http://www.java-scripts.net/
On-Line Books
www.programmerworld.net/personal/free_books.htm www.learnasp.com/freebook/learn/ www.asp.net/community/books/
Questions and Comments

1.1 - Introduction To Javascript

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

1.1 - Introduction To Javascript

Încărcat de

Drepturi de autor:

Formate disponibile

Introduction to JavaScript

Copyright 2007 Accenture All Rights Reserved.

Copyright 2007 Accenture All Rights Reserved.

Copyright 2007 Accenture All Rights Reserved.

Copyright 2007 Accenture All Rights Reserved.

JavaScript in an HTML page

Where to put the JavaScript?

Copyright 2007 Accenture All Rights Reserved.

Scripts Execution Head Section

Scripts Execution - Body Section

Scripts in body and head section

Copyright 2007 Accenture All Rights Reserved.

Copyright 2007 Accenture All Rights Reserved.

Copyright 2007 Accenture All Rights Reserved.

Rules for Variable Names

Copyright 2007 Accenture All Rights Reserved.

Copyright 2007 Accenture All Rights Reserved.

Copyright 2007 Accenture All Rights Reserved.

Conditional Statement - if.... Statement

Copyright 2007 Accenture All Rights Reserved.

Conditional Statement - if....else

Copyright 2007 Accenture All Rights Reserved.

Conditional Statement - ifelse ifelse

If (age<=5 ) { document.write(You are very young!); }

Copyright 2007 Accenture All Rights Reserved.

Conditional Statement - switch

Copyright 2007 Accenture All Rights Reserved.

JavaScript Popup Boxes

Copyright 2007 Accenture All Rights Reserved.

JavaScript - Alert Boxes

JavaScript - Confirm Boxes

JavaScript - Prompt Boxes

Copyright 2007 Accenture All Rights Reserved.

JavaScript - Functions (contd)

Copyright 2007 Accenture All Rights Reserved.

Copyright 2007 Accenture All Rights Reserved.

Copyright 2007 Accenture All Rights Reserved.

Copyright 2007 Accenture All Rights Reserved.

Copyright 2007 Accenture All Rights Reserved.

Questions and Comments

Copyright 2007 Accenture All Rights Reserved.

S-ar putea să vă placă și