programming in javascript

8/12/2019 Programming in JavaScript

1/62

XP

1

JavaScript

Creating a Programmable Web Page


2/62

XP

2

Tutorial Objectives

Understand basic JavaScript syntaxCreate an embedded and external scriptWork with variables and dataWork with data objects and extract valuesfrom datesWork with expressions and operators

Create and call a JavaScript functionWork with arrays and conditional statementsLearn about program loops


3/62

XP

3

Server-Side Scripting

a user must be connected to the Webserver to run the server-side scriptonly the programmer can create or alterthe scriptthe system administrator has to beconcerned about users continuallyaccessing the server and potentiallyoverloading the system


4/62

XP

4

Client-Side Scripting

solve many of the problems associated withserver-side scripts

can be tested locally without first uploadingit to a Web server

are likely to be more responsive to the user

can never completely replace server-sidescripts


5/62

XP

5

Introduction to JavaScriptJavaScript is an interpreted script languagefrom Netscape.JavaScript is used in Web site development to

such things as:automatically change a formatted date on aWeb pagecause a linked-to-page to appear in a popup

windowcause text or a graphic image to changeduring a mouse rollover


6/62

XP

6

Java vs. JavaScriptRequires the JDK tocreate the appletRequires a Java virtualmachine to run the applet

Applet files are distinctfrom the XHTML codeSource code is hiddenfrom the userPrograms must be savedas separate files andcompiled before they canbe runPrograms run on theserver side

Requires a text editorRequired a browser thatcan interpret JavaScriptcodeJavaScript can be placedwithin HTML and XHTMLSource code is madeaccessible to the userPrograms cannot writecontent to the hard diskPrograms run on theclient side


7/62

XP

7

Other Client-side Languages

Internet Explorer supports JScript.

JScript is identical to JavaScript, but thereare some JavaScript commands notsupported in JScript, and vice versa.

Other client-side programming languagesare also available to Web page designers,

such as the Internet Explorer scriptinglanguage, VBScript.


8/62

XP

8

Example of Web Site usingJavaScript


9/62

XP

9

Writing a JavaScript Program

The Web browser runs a JavaScript programwhen the Web page is first loaded, or inresponse to an event.

JavaScript programs can either be placeddirectly into the HTML file or they can besaved in external files.

placing a program in an external file allowsyou to hide the program code from the usersource code placed directly in the HTML filecan be viewed by anyone


10/62

XP

10

Writing a JavaScript Program

A JavaScript program can be placed anywherewithin the HTML file.Many programmers favor placing their

programs between tags in order toseparate the programming code from the Webpage content and layout.Some programmers prefer placing programs

within the body of the Web page at thelocation where the program output isgenerated and displayed.


11/62

XP

11

Using the Tag

To embed a client-side script in a Webpage, use the element:

script commands and comments

To access an external script, use:


12/62

XP

12

CommentsThe syntax for a single-line comment is:// comment text

The syntax of a multi-line comment is:/*

comment text covering several lines*/


13/62

XP

13

Hiding Script from Older Browsers

You can hide the script from these browsersusing comment tags:

When a Web browser that doesnt supportscripts encounters this code, it ignores the tag.


14/62

XP

14

Writing Output to a Web Page

JavaScript provides two methods to write textto a Web page:

document.write(text);

document.writeln(text); The document.writeln() method differs fromdocument.write() in that it attaches a carriagereturn to the end of each text string sent to the

Web page.

document.write("News Flash!
");


15/62


16/62

XP

16

Working with Variables & Data

A variable is a named element in a programthat stores information. The followingrestrictions apply to variable names:

the first character must be either a letter oran underscore character ( _ )the remaining characters can be letters,numbers, or underscore characters

variable names cannot contain spacesVariable names are case-sensitive.document.write(Year);


17/62

XP

17

Types of Variables

JavaScript supports four different types ofvariables:

numeric variables can be a number, such as

13, 22.5, or -3.14159string variables is any group of characters,such as Hello or Happy Holidays! Boolean variables are variables that accept one

of two values, either true or falsenull variables is a variable that has no value atall


18/62

XP

18

Declaring a Variable

Before you can use a variable in yourprogram, you need to declare a variableusing the var command or by assigning the

variable a value.Any of the following commands is alegitimate way of creating a variable named

Month:

var Month;var Month = December; Month = December;


19/62

XP

19

Working with Expressionsand Operators

Expressions are JavaScript commands thatassign values to variables.

Expressions are created using variables,values, and operators.

The + operator performs the action ofadding or combining two elements. For

example,var ThisMonth = Today.getMonth()+1;


20/62

XP

20

Operators

Unary operators work on only onevariable.Binary operators work on two elementsin an expression.Ternary operators work on threestatement in an expression.


21/62

XP

Operators in JavaScript

ArithmeticRelational / Comparison

LogicalIncrement / DecrementAssignment

ConditionalConcatenation


22/62

XP

Arithmetic Operators

+ (Addition)- (Subtraction)

* (Multiplication) / (Division)% (Modulus)


23/62

XP

Relational / Comparison

=== (Equal to)

!= (Not equal to)


24/62

XP

Logical Operator

&& (AND)|| (OR)

! (NOT)


25/62

XP

Increment / Decrement Op.

++--


26/62

XP

26

Assignment Operators

Expressions assign values using assignmentoperators. = is the most common one. Additional includes the += operator

The following create the same results:x = x + y;x += yEither of the following increase the value ofthe x variable by 2:x = x + 2;x += 2


27/62

XP

Assignment Operator

=+=

-=*=

/=

%=


28/62

XP

28

A Conditional Operator

tests whether a specific condition is true andreturns one value if the condition is true and adifferent value if the condition is false.

Message = (mail == Yes) ? You havemail: No mail; tests whether the mail variable is equal to thevalue Yes

if it is, the Message variable has the value You have mail ; otherwise, the Message variable has thevalue No mail .


29/62

XP

Concatenation operator

+ is used to concatenate two string.

var num = 10;document.write(Value of number is + num);


30/62

XP

Control Flow Statements

SequentialConditional/Branching

If else statementSwitch statement

Iterative/LoopingForWhileDo while


31/62

XP

31

If statementif ( condition ) {

JavaScript Commands}

condition is an expression that is either trueor falseif the condition is true, the JavaScriptCommands in the command block are

executedif the condition is not true, then no action istaken


32/62

XP

32

Using an If...Else Statement

if ( condition ) { JavaScript Commands if true

} else

JavaScript Commands if false}

condition is an expression that is either trueor false, and one set of commands is run ifthe expression is true, and another is run ifthe expression is false


33/62

XP

Switch statementThe switch statement is used to perform differentaction based on different conditions.switch(expr){case 1:

execute code block 1 break;

case 2:execute code block 2 break;

default:code to be executed if expr is different from

case 1 and 2}


34/62

XP

34

Iterative/Looping

A program loop is a set of instructionsthat is executed repeatedly.There are two types of loops:

loops that repeat a set number oftimes before quittingloops that repeat as long as a certaincondition is met


35/62

XP

35

The For Loop

The For loop allows you to create a group ofcommands to be executed a set number oftimes through the use of a counter that tracks

the number of times the command block hasbeen run.Set an initial value for the counter, and eachtime the command block is executed, the

counter changes in value.When the counter reaches a value above orbelow a certain stopping value, the loop ends.


36/62

XP

36

The For Loop Continued

for ( start ; condition ; update ) { JavaScript Commands

}

start is the starting value of the counter condition is a Boolean expression that must

be true for the loop to continue update specifies how the counter changes in

value each time the command block isexecuted


37/62

XP

37

The While Loop

The While loop runs a command group aslong as a specific condition is met, but it doesnot employ any counters.

The general syntax of the While loop is:while ( condition ) { JavaScript Commands

} condition is a Boolean expression that can

be either true or false


38/62

XP

The do while loop

In this loop will execute the codeblock once, before checking if thecondition is true, then it will repeatthe loop as long as the condition istrue.


39/62

XP

Syntax of do while loop

do{code block to be executed}

while ( condition );


40/62

XP

40

Using Arrays

An array is an ordered collection of valuesreferenced by a single variable name.The syntax for creating an array variable is:

var variable = new Array( size ); variable is the name of the array variablesize is the number of elements in the array(optional)

To populate the array with values, use:variable [ i]= value ; where i is the i th item of the array. The 1 st itemhas an index value of 0 .


41/62

XP

41

Using Arrays

To create and populate the array in a singlestatement, use:var variable = new Array( values );

values are the array elements enclosed inquotes and separated by commasvar MonthTxt =new Array(, January , February , March , April , May , June ,

July , August , September , October , November , December ); January will have an index value of 1.


42/62

XP

42

Creating JavaScript Functions

function function_name ( parameters ) {

JavaScript commands

}

parameters are the values sent to thefunction (note: not all functions requireparameters)

{ and } are used to mark the beginning andend of the commands in the function.


43/62

XP

43

Creating JavaScript Functions

Function names are case-sensitive.The function name must begin with a letter orunderscore ( _ ) and cannot contain any

spaces.There is no limit to the number of functionparameters that a function may contain.The parameters must be placed within

parentheses, following the function name, andthe parameters must be separated bycommas.


44/62

XP

44

Performing an Action with aFunction

The following function displays a message withthe current date:

function ShowDate ( date ) {

document.write(Today is + date +
);

}

there is one line in the functions command

block, which displays the current date alongwith a text string


45/62

XP

45

Performing an Action with aFunction

To call the ShowDate function, enter:

var Today = 3/9/2006;

ShowDate(Today);

the first command creates a variable named Today and assigns it the text string, 3/9/2006 the second command runs the ShowDatefunction, using the value of the Today variableas a parameterresult is Today is 3/9/2006


46/62

XP

46

Returning a Value from aFunction

To use a function to calculate a value use thereturn command along with a variable or value.function Area ( Width, Length ) {

var Size = Width*Length;return Size;

}the Area function calculates the area of a

rectangular region and places the value in avariable named Size the value of the Size variable is returned bythe function


47/62

XP

47

Placing a Functionin an HTML File

The function definition must be placedbefore the command that calls the function.One convention is to place all of the

function definitions in the section.A function is executed only when called byanother JavaScript command.

Its common practice for JavaScriptprogrammers to create libraries of functionslocated in external files.


48/62

XP

Example of Function

function showmessage() {alert("WebCheatSheet - JavaScript Tutorial!");

}


49/62

XP

JavaScript Events

Events are normally used incombination with functions, and thefunction will not be executed beforethe event occurs (such as when auser clicks a button).


50/62

XP

Mouse Events


51/62


52/62

XP

Form Events


53/62

XP

Objects in JavaScript

JavaScript is an Object OrientedScripting language because itprovides us following features

EncapsulationInheritancePolymerphism


54/62

XP

Object in JavaScript

Object contains two elementsProperties or DataMethods or Functions

For example if STUDENT is an objectProperties (rollnumber, name, course)Methods (deposit fees, issue books)

To access properties or methodsObject.method, object.property


55/62

XPUser-defined objects

// Define a function which will work as a methodfunction addPrice(amount){

this.price = amount;}

function book(title, author){this.title = title;this.author = author;this.addPrice = addPrice; // Assign that method as property.

}


56/62

XP

var myBook = new book("Perl", "Mohtashim");myBook.addPrice(100);document.write("Book title is : " + myBook.title + "
");

document.write("Book author is : " + myBook.author +"
");

document.write("Book price is : " + myBook.price +"
");


57/62

XP

JavaScript Native Objects

Number ObjectBoolean Object

String ObjectArray ObjectDate Object

Math ObjectRegExp Object


58/62

XP

Number ObjectMAX_VALUE The largest possible value a

number in JavaScript can have1.7976931348623157E+308

MIN_VALUE The smallest possible value anumber in JavaScript can have5E-324


59/62

XP

Number Methods

toFixed() Formats a number with a specificnumber of digits to the right of thedecimal.

toPrecision() Defines how many total digits (including

digits to the left and right of the decimal)to display of a number.
http://www.tutorialspoint.com/javascript/number_tofixed.htmhttp://www.tutorialspoint.com/javascript/number_toprecision.htmhttp://www.tutorialspoint.com/javascript/number_toprecision.htmhttp://www.tutorialspoint.com/javascript/number_tofixed.htm


60/62

XP

String Object

The String object let's you work with aseries of characters and wrapsJavascript's string primitive data typewith a number of helper methods.


61/62


62/62

XP

String Methods

programming in javascript

Documents