JavaScript to Finish

8/12/2019 JavaScript to Finish

1/43


2/43


3/43


4/43


5/43


6/43


7/43

Common Uses of JavaScript

Basic Math Calculations

Dynamic Content Manipulation

Control Statement Form Validation

Navigation System


8/43

8

Mathematical Functions in JavaScript

In addition to the simple arithmetic operations(e.g. +, *, etc.) JavaScript supports severaladvanced mathematicaloperations as well

Notationaly, these functions are accessedbyreferring to various methods of the Math object

Moreover, this object also contains severaluseful mathematical constantsas its properties

This object has no use, but of a placeholder


9/43

9

Properties

Math.PIMath.E

Math.LN2

Math.LN10

Math.LOG2E

Math.LOG10E

Math.SQRT2

Math.SQRT1_2

Note theCAPITAL

lettering

of allproperties


10/43

10

Methods

random( )

sin( r )

cos( r )

tan( r )

asin( x )acos( x )

atan( x )

atan2( x, y )

max( x, y )

max( x, y )

round( x )

floor( x )

ceil( x )

exp( x )log( x ) abs( x )

sqrt( x )pow( x, y )


11/43

11

sin(r),cos(r),tan(r)

Standard trigonometric functions

Returns the sine, cosine or tangent of r,

where r is specified in radians

EXAMPLE

document.write( Math.cos( Math.PI /4 ) )

0.7071067811865476


12/43


13/43


14/43


15/43


16/43

Dynamic Content Manipulation

Using DOM (Document Object Model),

JavaScript can change the document in which

it is embedded

Elements can be move

Style can be changed

Visibility can be changed


17/43

Nov 1

fit100-16-dom 2006 University of

Washington

What is the DOM?

Document Object Model Your web browser builds a modelof the web

page (the document) that includes all theobjectsin the page (tags, text, etc)

All of the properties, methods, and eventsavailable to the web developer for manipulatingand creating web pages are organized intoobjects

Those objects are accessible via scriptinglanguages in modern web browsers


18/43

Nov 1

fit100-16-dom 2006 University of

Washington

What the heck is the DOM?

Document Object Model Your web browser builds a modelof the web

page (the document) that includes all theobjectsin the page (tags, text, etc)

All of the properties, methods, and eventsavailable to the web developer for manipulatingand creating web pages are organized intoobjects

Those objects are accessible via scriptinglanguages in modern web browsers


19/43

slide 19

Example Page Manipulation

Some possibilities

createElement(elementName)

createTextNode(text)

appendChild(newChild)

removeChild(node)

Example: add a new list itemvar list = document.getElementById('t1')var newitem = document.createElement('li')

var newtext = document.createTextNode(text)

list.appendChild(newitem)

newitem.appendChild(newtext)

This uses the browserDocument Object Model

(DOM). We will focus on

JavaScript as a language,

not its use in the browser


20/43


21/43


22/43


23/43


24/43


25/43


26/43


27/43


28/43


29/43


30/43


31/43


32/43


33/43

Form Validation

Before an HTML form is submitted, JavaScript can

be used to provide client-side data validation

This is more user-friendly for the user than

server-side validation because itdoes not require a server round

trip before giving feedback

If the form is not valid, the formis not submitted until the errors

are fixed


34/43

Client-Side Validation

JavaScript data validation happens before form is

submitted

Server-side application validation happens after the

form is submitted to the application server

Web Browser Web ServerApplication

Server

Database

Server

JavaScript

ValidationApplication

Validation

HTTP Request

HTTP Response


35/43


36/43


37/43


38/43


39/43

Example password Validation

(HTML)

Password:

Confirm Password:


40/43

Javascript methodfunction checkPass(){

//Store the password field objects into variables ...

var pass1 = document.getElementById('pass1');

var pass2 = document.getElementById('pass2');

//Store the Confimation Message Object ...

var message = document.getElementById('confirmMessage');

//Set the colors we will be using ...

var goodColor = "#66cc66";

var badColor = "#ff6666";

//Compare the values in the password field

//and the confirmation field

if(pass1.value == pass2.value){

//The passwords match.

//Set the color to the good color and inform

//the user that they have entered the correct password

pass2.style.backgroundColor = goodColor;

message.style.color = goodColor;

message.innerHTML = "Passwords Match!"

}else{

//The passwords do not match.

//Set the color to the bad color and

//notify the user.

pass2.style.backgroundColor = badColor;

message.style.color = badColor;

message.innerHTML = "Passwords Do Not Match!"

}

}


41/43

41

Active site navigation

With JavaScript you can create a select and go

menu to select options from a drop down list

in one click, eliminating the go button

Take care not to confuse people who have

JavaScript turned off!


42/43

42

Active site navigation

When the menu is not pulled down, it will

display a user prompt

This technique is used by many websites to

move the user to different sections

SelectAndGo.html
http://www.tech.port.ac.uk/staffweb/briggsj/WECPP/notes/javascript/examples/SelectAndGo.htmlhttp://www.tech.port.ac.uk/staffweb/briggsj/WECPP/notes/javascript/examples/SelectAndGo.html


43/43

Example

SelectAndGo.html

Function changePages(newLoc)
http://www.tech.port.ac.uk/staffweb/briggsj/WECPP/notes/javascript/examples/SelectAndGo.htmlhttp://www.tech.port.ac.uk/staffweb/briggsj/WECPP/notes/javascript/examples/SelectAndGo.html

Documents

JavaScript to Finish