JavaScript Fundamentals

© FPT SOFTWARE – TRAINING MATERIAL – Internal use 04e-BM/NS/HDCV/FSOFT v2/3

JavaScript Fundamentals


Agenda

The Foundation of JavaScript Syntax The Core language Objects in JavaScript The Browser Objects in JavaScript Handling Form and Form Element Events


What is JavaScript

It is a scripting language that can be used to create client-side scripts and server-side scripts.

JavaScript makes it easier to create dynamic and interactive Web pages.

JavaScript is a scripting language developed by Sun Microsystems and Netscape.

JavaScript developed from Netscapes’s Livescript.

Client applications run in a browser such as Netscape Navigator or Internet Explorer.


JavaScript effects and rules JavaScript can enhance the dynamics and interactivity of the site by using

its effects.

Provide User Interaction Dynamically Change Content Validate data

Similar to any other language, JavaScript also follows some basic grammar rules like:

Using Caps Using Pairs Using Spaces Using Comments


JavaScript Tools and Run- Time Environment

The JavaScript code-generating tools and IDE helps in creating useful JavaScript code. A few of these include:Dialog BoxPop – up Menu BuilderRemotes

Run Time EnvironmentClient Side ScriptingJava Script on Web Server


Embedding JavaScript in Web Page The JavaScript can be inserted into an HTML document in

the following ways : Using SCRIPT tag: <script language="JavaScript">

 </script>

Using an external File <script language="JavaScript" src="filename.js"> </script>

Using JavaScript Expressions within HTML Tag Attribute Values

Using JavaScript in event handlers


Program Using Msg box and write method

Example:

<HTML>

<HEAD>

<SCRIPT LANGUAGE = "Javascript">

confirm ("Are you Sure?");

alert("OK");

document.write(" Thank You !");

</SCRIPT>

</HEAD>

</HTML>

Output:


Variables A variable is a container that refers to a memory location. It is used to hold values that may change while the script is

executing. Variables follow some naming conventions. A variable is declared using the keyword ‘var’. eg. var A = 10; Variables have a scope that is determined by where they are

declared in the script. Global Variable Local Variable

Literals are fixed values that can be used in the script.


Data Types JavaScript has a relatively small set of data types.

Numbers Logical or Boolean Strings Null

JavaScript is case-sensitive.

In JavaScript, two variables of different types can be combined. example: A = “ This apple costs Rs.” + 5 will result in a string with the value "This apple costs Rs. 5".


Data Type - Example

<HTML>

<HEAD>

<SCRIPT LANGUAGE = "Javascript">

var A = "12" + 7.5;

document.write(A);

</SCRIPT>

</HEAD>

</HTML>

Output:


Literal - Types Integer – These can be expressed in decimal, hexadecimal and binary

number system.

Floating- point - These number can have a decimal point or an “e” or “”E” followed by an integer.

String - A string literal is zero or more characters enclosed in single or double quotation marks.

Boolean - This can take only two values: True or False.

null - The null type has only one value: null. Null implies no data.


Operators Operators take one or more variables or values (operands) and

return a new value.

JavaScript uses both binary and unary operators.

Operators are classified depending on the relation they perform like: Arithmetic Operator Comparison Operator Logical Operator String Operator Evaluation Operator Operator Precedence


Arithmetic Operator Arithmetic operators take numerical values (either literals or

variables) as their operands and return a single numerical value.

Arithmetic Operators include: Addition (+) Subtraction (-) Division (/) Modulus (%) Unary increment (++) Unary decrement (- -) Unary negation (-)


Comparison Operator

A comparison operator compares its operands and returns a logical value based on whether the comparison is true or not.

Comparison Operators include: Equal to (==) Not Equal to (!+) Greater than (>) Greater than or equal to (>=) Less than (<) Less than or equal to (<=)


Web Page Programming with HTML,DHTML & JavaScript/Session 7/ 15 of 28

Logical Operators

Logical operators are typically used to combine multiple comparisons into a conditional expression.

It includes:


Logical Operators - Example

Code:

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var x = 10; var y = 5; alert ("The value of x is " + x + "The value of y

is " + y); alert("x AND y = " + (x && y)); alert("x OR y = " + (x || y)); alert("NOT x = " + (!x)); </SCRIPT> </HEAD></HTML>

Output:


String Operator

The string operator takes two string operators as operands and creates a new string, which is same, as the two original strings run together.

Example: x = ‘yellow’; y = ‘green’;

z = x + y + ‘white’; which means z is “yellowgreenwhite”

w = y + 9, which means w is “green9”


Evaluation Operator

These operators generally includes:

Conditional operator (condition) ? trueVal : falseVal

Assigns a specified value to a variable if a condition is true, otherwise assigns an alternate value if condition is false.

eg. status = (age >= 18) ? "adult" : "minor"

Typeof operator The typeof operator returns a string indicating the type of the operand. eg. var x = 5; document.write(typeof(x));


Operator Precedence

When there are several operators to be evaluated in an expression, the precedence of the operator determines the sequence in which the operators are evaluated.

The following table lists the precedence of operators, from lowest to highest:


Expressions

Expressions are used to manipulate and evaluate variables in different contexts.

An expression is any valid set of literals, variables, and operators which evaluates to a single value.

Expression types available in JavaScript includes: Arithmetic: evaluates to a number Logical: evaluates to a boolean value String: evaluates to a string

Expressions combine variables and literals together via operators.


Regular Expression

A regular expression is defined pattern that can be used to match the character combinations of a string.

Regular expressions can be used to search for character patters in a string input by the user.

Regular expression can include: Simple patterns Combination of simple and special characters

Regular expressions can be created in one of two ways: Using an object initializer Calling the constructor function of the RegExp object


Using Regular Expression

The methods that can be used with Regular Expression includes: Exec, Test, Match, Search, Replace, Split

The syntax to use a method: objectname.method = function_name

The syntax for calling the method in the context of the object is: objectname.methodname(parameters)


Regular Expression - Example

Example:

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

re = /Time/

str = re.test ("Time and Tide wait for none");

window.alert(str);

</SCRIPT>

</HEAD>

</HTML>

Output:


Arrays

Arrays are used to store a series of variables with the same name. A number (an index) is used to differentiate each value. Arrays start with index zero in JavaScript. Creating arrays: Syntax arrayObjectName = new Array([element0, element1, ..., elementN])

Adding elements: We can add elements to an array when we create it. Eg. emp[0] = "Ryan Dias"

The elements of an array can be accessed by using Name or Index number of element.


Arrays(1)

Methods of the array object can be used to manipulate the array.

The methods of Array object include: join pop push reverse shift sort

JavaScript support mutli-dimensional array.



Conditional Statements

A conditional statement is used to test a condition. The result determines the statement or block of statements to be executed.

The various conditional statements include:

If….. Else Switch



Loop

Structures that control repetition in a program are known as loops.

The various types of loops include: For Do …. While While Break & continue For….in with


Function JavaScript has several pre-defined functions that we can use within the

script.

Some of pre-defined JavaScript functions includes: eval function isNaN funtion

Creating User Defined Functions function funcName(argument1,argument2,etc) { statements; }

Calling a Function

Return Statement


The Core language Objects in JavaScript


Objectives

Work on Core Language Objects

Use object Attributes and Methods


Objects

The properties (variables) that define the

object and the methods (functions) that work

on the data are included in the object

For example, a car is an object. The properties

of the car are its make, model, and color. They

have some common methods like, go (),

brake(), reverse().


Properties and Methods

To access the properties of the object, we must specify the object name and the property: objectName.propertyName

To access the methods of an object, we must

specify the object name and the required

method:

objectName.method ()


Using objects

When creating a Web page we can insert:

Browser objects

Built in script language objects (vary depending on

the scripting language used)

HTML elements

We can also create our own objects for use in

the programs.


Object Hierarchy

Browser Objects

Script Objects

HTML Elements


The this statement

The this statement is more of an internal

property.

Its value indicates the current object. It can

have standard properties such as name,

length and value applied accordingly.


The for . . . in statement

The for . . in statement is used to cycle through

each property of an object or each element of

an array.

The syntax is:for (variable in object)

{ statements; }


The with statement

The with statement is used to execute a set of statements that have a specified object as the reference.

The property is assigned to the object specified in the with statement.

The syntax is:

with (object) { statements; }


New Operator

The new operator is used to create a new instance of an object type

The object type may be user-define or built-in objectName = new objectType (param1

[,param2] ...[,paramN])where,objectName is the name of the new object instance.

ObjectType is a function that defined the type of the object. For example, Array.

Param[1, 2, . . ] are the property values of the object.


Eval function

The eval function is used to evaluate a string of code without reference to any specific object.

The string can be a JavaScript expression, statement, or a group of statements

The expression can include variables and properties of an object. var x = 5;

var z = 10;

document.write(eval(“x + z + 5”));


String object

The string object is used to manipulate and work with strings of text.

We can extract substrings and convert text to upper- or lowercase characters in a program.

The general syntax is,

stringName.propertyName

orstringName.methodName


Creating String object

There are 3 different methods of creating

strings.

Using the var statement and optionally assigning it

to a value.

Using an assignment operator (=) with a variable

name.

Using the string () constructor.


Math Object

The Math object has properties and methods that represent advanced mathematical calculations. function doCalc(x) {var a;

a = Math.PI * x * x; alert ("The area of a circle with a radius of " + x + “ is " + a);}


Date object

The Date built-in object contains both date and

time information.

The Date object does not have any properties.

It has a large number of methods for setting,

getting, and manipulating dates.


Date object

The Date object stores dates as the number

of milliseconds since January 1, 1970,

00:00:00.

DateObject = new Date(parameters)


The Browser Objects in JavaScript


Objectives

Common events in JavaScript

Browser Objects – Attributes and Methods


Event Object - Concept

Events are a result of an action done by the user

An event may be user-generated or generated by the system

Each event has an associated event object. The event object

provides information on:

the type of event

the location of the cursor at the time of the event

The event object is used as a part of an event handler


Event – Life Cycle

The life cycle of an event generally consist of following steps:The user action or condition associated with the

event occurs The event object is instantly updated to reflect the

conditions of the event The event fires The associated event handler is called The event handler carries out its actions and

returns


JavaScript Event

Common events supported by JavaScript includes:

• onClick• onChange• onFocus• onBlur• onMouseOver

• onMouseOut• onLoad• onSubmit• onMouseDown• onMouseUp


onClick - Example

The onClick event is generated whenever the user clicks the mouse button on certain form elements or on a hypertext link.

<HTML><HEAD> <SCRIPT LANGUAGE="JavaScript">function compute(form) {if (confirm("Are you sure?")) form.result.value = eval(form.expr.value)else alert("Please come back again.")} </SCRIPT> </HEAD> <BODY> <FORM>

Enter an expression:<INPUT TYPE="text" NAME="expr" SIZE=15 ><BR><BR><INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)"><BR><BR><BR> Result:<INPUT TYPE="text" NAME="result" SIZE=15 ><BR> </FORM></BODY></HTML>


onClick - Output


onChange - Example

The onChange event occurs whenever a form element changes. This can happen whenever the contents of a text control changes, or when a selection in a selection list changes.

<HTML><HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT></HEAD><BODY bgColor = white> <FORM>

Please enter a number: <INPUT type = text size = 5 onChange="checkNum(this.value)"> </FORM></BODY></HTML>


onChange - Output


onFocus/onBlur/onMouseOver/onMouseOut

onFocus The onFocus event is sent whenever a form element becomes the current

form element. Only when an element has the focus can it accept input from the user.

onBlur Blur is the opposite of focus. When the user leaves a form element, the

onBlur event is activated. onMouseOver

The onMouseOver event is generated whenever the mouse cursor is moved over an element.

onMouseOut The onMouseOut event is generated whenever the mouse cursor moves

off of an element.


onMouseOut -Example

Example:

<html> <head><script language = "javascript">var num =0function showLink(num){ if (num==1) {document.forms[0].elements[0].value=

"You have selected Aptech";}if (num==2) { document.forms[0].elements[0].value =

"You have selected Asset";}if (num==3) {document.forms[0].elements[0].value =

"You have selected Arena";} } </script>

</head> <body><form><input type=text size=60 ></form><a href="#" onMouseOver="showLink(1)"document.bgcolor= “ green">Aptech</a><br><a href="#" onMouseOver="showLink(2)">Asset</a><br><a href="#" onMouseOver="showLink(3)">Arena</a><br></body></html>


onMouseOut -Output

On moving the mouse over Aptech, the following output is displayed.


onLoad/onSubmit/onMouseDown/onMouseUp

OnLoad The onLoad event is sent to the document body object when the

document has finished loading. onSubmit

The onSubmit event is generated whenever the user submits a form (using the "Submit" button). The event occurs before the form is actually submitted.

onMouseDown The event is activated when a MouseDown event occurs. That is, when

the user depresses a mouse button. onMouseUp

The event is activated when a MouseUp event occurs. That is, when the user releases a mouse button.



onResize - Example

onResize This event is activated when a resize event occurs. That is, when a

user or script resizes a window or frame. <html><head><script language="JavaScript">window.onresize= notify;function notify() {alert("Window resized!");}</script></head><body> Please resize the

window.</body> </html>

Output:


Handling the Events

This segment of JavaScript code that will be executed in response to the event is called an event handler.

<INPUT TYPE="button" NAME="docode"

onClick="DoOnClick();">

Event Handler are categorized as: Event handlers for HTML tags

<TAG eventHandler="JavaScript Code"> Event Handlers as Properties

object.eventhandler = function;


Browser Objects

A browser is an application that is used to display the contents of an HTML document

Browsers also expose some objects that can be accessed and used in script

IE Browser Objects Netscape Browser Objects


DOM

One important feature of JavaScript is that it is Object based language.

Helps the user to develop program, which are modular and

reusable.

An object can be defined as a single entity, consisting of Properties and Methods.

A property is a value that belongs to an object. Eg: Document.bgcolor


Window Object

It represents the browser’s window and can be used to retrieve information about the state of the window

Properties:

• document

• event

• history

• location

• name

• navigator

• screen

Methods:

• alert

• blur

• close

• focus

• navigate

• open


Document Object

It represents the HTML document in a given browser window and is used to retrieve information about the document

Methods:

• clear

• close

• open

• write

• writeln

Properties:

• alinkColor

• bgColor

• Body

• fgColor

• linkColor

• location

• Title

• URL

• vlinkColor


History Object

This object provides a list of the URL's most recently visited by the client

Example, history's "back()" method cause the window to again display the immediately previous document: history.back();

Methods:

• back

• forward

• go


Location Object

This object maintains information about the current URL. It provides a method that causes the window's current URL to be reloaded.

Properties:

• hash

• host

• hostname

• href

Methods:

• assign

• reload

• replace


Handling Form and Form Element Events


Objectives

Work on form object and form elements

Handle form object events

Form validation


Form Object

Form object consist of three attributes: AcceptActionMethod

For Example:<Form ACTION="Simple.htm“ Accept=“TEXT/HTML” Method=“POST”>


Textfield Object (1)

Textfield understands onBlur, onFocus, and onChange events The onFocus event occurs when user clicks inside a text field. onBlur happens when user moves out of a text field by clicking

outside of it, or hitting "tab." onChange happens when user changes what's in the text field and

then moves outside the text field For Example:

<input type="text" name="first_text" onFocus="writeIt('focus');" onBlur="writeIt('blur');" onChange="writeIt('change');">


Textfield object(2)


Command Button object(1)

Command button understands onClick event The onClick event occurs when user clicks on

a command button

<INPUT TYPE="button" value="Copy" onClick="writeIt(myfm.first_text.value);">


Command Button object(2)


Checkbox Object (1)

A Checkbox is an HTML form object that behaves as a toggle switch

Checkbox can have either checked or unchecked

Like button checkbox also understands onClick event


Checkbox Object(2)


Option Button/Radio Button object(1)

Radio buttons are almost exactly like checkboxes with respect to JavaScript

Radio buttons are different. Once a radio button is on, it stays on until another one is selected. Then the first one goes off.

Option or radio button also understands onClick event.


Option Button/Radio Button object(1)


ComboBox/Select object(1)

A ComboBox object on an HTML form appears as drop-down list or a scrollable list of selectable items

To conserve form space, the scrollable list of selectable items is used

ComboBox supports onBlur, onFocus, and onChange events


ComboBox/Select object(2)


Form Validation(1)

Validate each and every important field by ensuring that none of the fields are empty.

Also the fields should not contain any invalid information.

Consider an example:<HTML> <HEAD>

<TITLE> Form Events </TITLE><SCRIPT LANGUAGE="JavaScript"> </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H2 ALIGN="CENTER"> Handling Form Events</H2><HR> <FORM name="form1"><P> First Name : <INPUT TYPE="text" NAME="fname" size=10 onBlur="validateFirstName()"> Last Name : <INPUT TYPE="text" NAME="lname" size=15 onBlur="validateLastName()"></p> <P> Email : <INPUT TYPE="text" NAME="email" size=10 onBlur="validateEmail()"> Comments : <TEXTAREA NAME="comment" rows=4 cols=30 > Enter your comments </TEXTAREA></p> <P ALIGN="CENTER"><INPUT TYPE="button" value="Submit this form" onClick="processForm()"> <INPUT TYPE="reset"></P> </FORM> </BODY> </HTML>


Form Validation(5)


Q & A

Date post:	12-Jan-2016
Category:	Documents
Upload:	morse
View:	50 times
Download:	0 times

JavaScript Fundamentals

Documents