Javascript Day1

8/8/2019 Javascript Day1

1/97

1

JavaScript


2/97

2007 IBM Corporation2

Objectives

Introduction to JavaScriptIntroduction to JavaScript languageUsing Script tagInserting Java Script into tagsLinking Java Script from separate files

JavaScript expression and OperatorsDefining and naming variablesData TypesExpressionOperators Arithmetic, String, Logical, Assignment, typeof


3/97


Objectives (Contd.)

Functions and Flow ControlFlow Control

Ifelse For loops while loops Break and continue statements

Using JavaScript functions Built in functions User defined functions Returning values from functions Events, Event Handlers


4/97


Objectives (Contd.)

Objects and ArraysProperties and MethodsBrowser Object HierarchyAddressing ObjectsCreating ObjectsObjects and VariablesExternal ObjectsSecurity ImplicationsArrays and Objects


5/97


Objectives (Contd.)

Document Object ModelIntroduction to DOMThe Navigator ObjectThe Window ObjectCommunicating between windowsWorking With Frames in the DOMThe Document objectThe Location & History ObjectImage ObjectLink Object


6/97


Objectives (Contd.)

Form Validation The Form Object ModelRecap of Form ElementsForm Tag EventsControlling SubmissionForms as NavigationList EventsButtonsText Processing


7/97


Objectives (Contd.)

CookiesIntroduction to HTTP CookiesFormatting CookiesPersisting CookiesCookie SecurityJavaScript & CookiesReading / Writing CookiesModifying and deleting Cookies


8/97

8

IntroductionTo

JavaScript


9/97


Introduction to Java Scripts

What is JavaScript???JavaScript is a scripting Language created by Netscape

What is a

Scripting

Language???

Scripting Language is a lightweightprogramming language.

Scripting Languages are notneeded to be compiled.

The language is interpreted atruntime.


10/97


Introduction to JavaScript (Contd.)

A JavaScript is usually directly embedded in an HTML page.External JavaScripts can be created which can be used by

HTML pages.

JavaScript adds interactivity to HTML pages.JavaScript's are integrated into the browsing environment.


11/97


Introduction to JavaScript (Contd.) Javais a programming

language which requires

compilation and interpretation.

Java is used to make largescale applications.

JavaScriptis a scriptinglanguage which just requires

interpretation. The script is

some set of commands which

the browser interprets.

JavaScript is used to addinteractivity in HTML Pages.

Is

JavaScript

same as

Java???


12/97


Types of JavaScript

Client-Side JavaScript (CSJS) -- an extendedversion of JavaScript that enables the enhancement

and manipulation of web pages and client browsers.

Server-Side JavaScript (SSJS) -- an extendedversion of JavaScript that enables back-end access

to databases, file systems, and servers.

Core JavaScript -- the base JavaScript language.


13/97


Core JavaScript

Core JavaScript encompasses all of the statements,operators, objects, and functions that make up thebasic JavaScript language.

The following objects are part of core JavaScript:arraydatemathnumberstring


14/97


Client Side Java Scripting

CSJS is composed of core JavaScript and manyadditional objects, such as the following:

documentformframewindownavigator


15/97


Server Side JavaScript

SSJS is composed of core JavaScript and additionalobjects and functions for accessing databases and file

systems, sending e-mail, and so on.


16/97


Uses of JavaScript (Client Side)

Menus for NavigationForm ValidationPopup WindowsPassword ProtectingMath FunctionsSpecial effects with document and backgroundStatus bar manipulationMessagesMouse Cursor EffectsLinks


17/97


Client Side JavaScript


Core JavaScript

________________ is an extendedversion of JavaScript that enables

the enhancement and manipulation

of web pages and client browsers

Test Your Understanding


18/97


Client Side JavaScript


Core JavaScript

________________ is an extendedversion of JavaScript that enables

the enhancement and manipulation

of web pages and client browsers



19/97


Syntax rules of JavaScript

Statements may or may not contain a semicolon at theend.

Multiple statements on one line must be separated bya semicolon.

JavaScript is case sensitive.


20/97


Using tag

The HTML tag is used to enter JavaScript into a HTML. The tag can be embedded within tag. tag.

JavaScript in the head section will be executed when called. JavaScript in the body section will be executed while the HTML

page is loaded.

Unlimited number of JavaScripts can be placed both in head andbody section in a HTML document.


21/97


Using tag

Eg:

Example

document.write("Hello World!")

Is a standard command for writing output

to a page


22/97


How to Handle Older Browsers

Browsers that do not support JavaScript will displaythe script as it is. Use the HTML comment tag to

prevent this.

Eg.

The two forward slashes at the end of comment line

(//) are a JavaScript comment symbol. This prevents

the JavaScript compiler from compiling the line.


23/97


Using an External JavaScript

A JavaScript can be written in an external file, whichcan be used by different HTML pages.

The external script cannot contain the tag.

The external file needs to end with the .js extension.


24/97


Using External JavaScript (contd.)

document.write("This line

has been writen in the

External JavaScript!!!")

External.js

Example

>

This line has been written in the

html page!!!

JavaScript.html


25/97



is embedded within


26/97



is embedded within


27/97


Summary JavaScript is a scripting Language created by Netscape. The Three types of JavaScript are:Client Side JavaScript.Server Side JavaScript.Core JavaScript.

Client Side Java Script can be written within an HTML page or as anexternal Java Script.

Client Side Java Script are integrated into the browsing environment. Statements in Java Script may or may not contain semicolons. JavaScript is case sensitive. The HTML tag is used to enter JavaScript into a HTML. The tag can be embedded within tag. tag.


28/97

28

JavaScriptOperators &

Expressions


29/97


JavaScript Variables and expression

JavaScript VariablesVariable:

A variable is a symbolic name that representssome data in the memory.

A variable value can change during the executionof the JavaScript.

A variable can be referred by its name to see orchange its value.

Variables names are case sensitive.Must begin with a letter or underscore.


30/97


Rules of a Variable

Variable DeclarationVariables can be declared using the var statement

var =some value

Variables can also be created without using var statement=some value

Eg

var firstname=SamuelOR

firstname=Samuel


31/97

2007 IBM Corporation

31

Data Type in JavaScript

JavaScript is a loosely typed language.

Data Type of Variableneed not be specifiedduring declaration.

Data types areautomatically convertedduring script execution.

Loosely

Typed??


32/97


32

Data Type in JavaScript (contd.)

JavaScript recognizes the following type of values:Values

string

numbers

null

boolean

9, 3.56 true orfalse

Samuel, Samuel J Palmisano

A Special keyword which refers to

nothing


33/97


33

Data Type in JavaScript (contd.)


34/97


34

JavaScript Operators

Arithmetic Assignment Conditional

StringComparison

Logical

Operators

typeof


35/97


35

JavaScript Operator (contd.)

Arithmetic


36/97


36


Comparison

Strict equal to


37/97


37


Assignment


38/97


38


Logical


39/97


39


String


40/97


40


Conditional


41/97


41


typeof


42/97


42

number

string

null

x=20

x=Test

typeof(x) evaluates to



43/97


43

number

string

null

x=20

x=Test

typeof(x) evaluates to



44/97


44

Summary

A variable value can change during the execution of theJavaScript.

Variable names are case sensitive.Must begin with a letter or underscore.

Data Type of Variable need not be specified during declaration. Data types are automatically converted during script execution. The values recognized by JavaScript are:stringbooleannumbernull


45/97


45

Summary (contd.)

The different JavaScript operators areArithmeticConditionalComparisonLogicalAssignmentTypeofString


46/97

46

Flow Control&

Functions


47/97


47

Flow Control

Conditional Statementsif statement - use this statement if you want to execute some

code only if a specified condition is true.

if...else statement - use this statement if you want to executesome code if the condition is true and another code if thecondition is false.

if...else if....else statement - use this statement if you want toselect one of many blocks of code to be executed.

switch statement - use this statement if you want to selectone of many blocks of code to be executed.


48/97


48

Syntax of if..else.

Syntax

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

Syntax

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

{ code to be executed if condition is not true }


49/97


49

Syntax of if.else if.. else

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 not true }


50/97


50

Switch statement

You should use the switch statement if you want toselect one of many blocks of code to be executed.

Syntax

switch(n) { case 1: execute code block 1

break

case 2: execute code block 2

break

default: code to be executed if n is

different from case 1 and 2}


51/97


51

while statement


52/97


52

For loop


53/97


53

break and continue Statements There are two special statements that can be used inside loops: break. continue.

BreakThe break command will break the loop and continue executing the

code that follows after the loop (if any).

ContinueThe continue command will break the current loop and continue with

the next value.


54/97


54

Example of break statement

var i=0

while(i


55/97


55

Example of continue statement

for(i=0;i


56/97


56

Functions

A function is a reusable piece of code that will beexecuted when called for.

A function can be called from anywhere from withinthe page or even from other pages if the function is

stored in an external JavaScript (.js) file.

Functions can be embedded in the and within the tag.


57/97


57

Predefined functions in JavaScript DialogBoxesalert( message)Displays an alert box with a

message defined by thestring message.

Eg.

alert(An Error Occurred!)


58/97


58

Predefined functions in JavaScript (contd.) confirm(message)When called, it will display the

message and two boxes. One box

is "OK" and the other is "Cancel". If

OK is selected, a value of true is

returned, otherwise a value of false

is returned.

Eg.

confirm(Do you wish to Continue?)


59/97


59

prompt(message)Displays a box with the message

passed to the function displayed.

The user can then enter text inthe prompt field, and choose OKor Cancel.

If the user chooses Cancel, aNULL value is returned. If theuser chooses OK, the string valueentered in the field is returned.

Eg:prompt(enter your Name)

Predefined functions in JavaScript (contd.)


60/97


60

Conversion Functionseval(string)Converts a string to an integer or a float value.

Eg

x=20

y=eval(x)+10

y contains the value 30



61/97


61

isNAN(value)If the value passed is not a number then a boolean value of

true is returned else the boolean value of false is returned.

Egx=Samuel

y=isNAN(x)

The value stored in y is true



62/97


62

parseInt(string)Converts a string to an integer returning the first integer

encountered which is contained in the string.

Egx=77

y=parseInt(x)

y stores the value 77



63/97


63

parseFloat(string)Converts a string to an float value .

Eg

x=77.5

y=parseFloat(x)

y stores the value 77.5



64/97


64

User Defined Functions


65/97


65

User Defined Functions (contd.)


66/97


66

User Defined Functions (contd.)


67/97


67

Events


68/97


68

Events (contd.)


69/97


69

Event Handlers


70/97


70

Common Event Handlers


71/97


71

Common Event Handlers (contd.)


72/97


72

onLoad and onUnloadThe onload and onUnload events are triggered when the user

enters or leaves the page.

The onload event is also triggered when the image is loaded.

The showstatus() function will be called when a user enters a page

Common Event Handlers (contd.)


73/97


73

Common Event Handlers (contd.)onFocus, onBlur and onChangeThe onFocus, onBlur and onChange events are often used in

combination with validation of form fields.

The checkEmail() function will be called whenever the user changes the

content of the field:

;


74/97


74

Common Event Handlers (contd.)onSubmitThe onSubmit event is used to validate ALL form fields before

submitting it.

The checkForm() function will be called when the user clicks the submit

button in the form.


75/97


75

Common Event Handlers (contd.)onMouseOver and onMouseOutonMouseOver and onMouseOut are often used to create

"animated" buttons.

An alert box appears when an onMouseOver event is detected:


76/97


76

Example of calling a function on an event


77/97


77



78/97




79/97


Example


80/97


Example (contd.)


81/97


Example (contd.)


82/97


Example (contd.)


83/97


Example (contd.)


84/97


Example (contd.)


85/97


Example (contd.)

function Addition(x,y)

{

var x1=document.form1.text1.value

var y1=document.form1.text2.value

var Ans=document.form1.text3.value

var temp=x1+y1

}


86/97


function Addition (x,y) {

var x1=parseInt(x)

var y1=parseInt(y)


var temp=x1+y1

}

Example (contd.)


87/97


Example (contd.)

function Addition (x,y) {

var x1=parseInt(x)

var y1=parseInt(y)


var temp=x1+y1

}


88/97


Example (contd.)

function Addition (x,y) {var x1=parseInt(x)

var y1=parseInt(y)


var temp=x1+y1

if(Ans==temp){alert(Your Result agrees with JavaScript!)

document.form1.text1.value=



}

else{

alert(No, JavaScript evalutes this operation differently)document.form1.text3.value=

}}


89/97




90/97




91/97


A Complete Program

function myfunction(txt)

{

alert(txt)

}

When you click on one of the buttons, a

function will be called. The function willalert

the argument that is passed to it.


92/97


Output


93/97


myfunction (txt) receives Good Morning!


94/97


myfunction (txt) receives Good Evening !


95/97


Summary (Flow Control)Flow of the JavaScript can be controlled byIfelseIfelse ifelseswitchwhilefor


96/97


Summary (Functions) JavaScript enables you to include user-defined functions in your

code.

The syntax of the function statement is shown here. It is good practice to define your functions in the head of your

program and to call them from anywhere in the body of yourprogram.

You can execute a function's statements by calling the functionby name.

A function is more than just a block of statements, and you canpass values to your function in the arguments.


97/97

Summary (Functions contd.)JavaScript supports a range of event types.The code you write to perform an action when the

user triggers an event is called an event handler.

Javascript Day1

Documents

Transcript of Javascript Day1