Common Uses of JavaScript

Basic Math Calculations Dynamic Content Manipulation Control Statement Form Validation Navigation System

Mathematical Functions in JavaScript

In addition to the simple arithmetic operations (e.g. +, *, etc.) JavaScript supports several advanced mathematical operations as well Notationaly, these functions are accessed by referring to various methods of the Math object Moreover, this object also contains several useful mathematical constants as its properties

This object has no use, but of a placeholder8

Properties
Math.PI

Math.E
Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E Math.SQRT2 Math.SQRT1_2

Note the CAPITAL lettering of all properties

Methods
sin( r ) cos( r ) tan( r ) asin( x ) acos( x ) atan( x ) atan2( x, y ) sqrt( x ) pow( x, y ) exp( x ) log( x ) round( x ) floor( x ) ceil( x ) abs( x ) max( x, y ) max( x, y ) random( )
10

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
11

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

What is the DOM?

Document Object Model
Your web browser builds a model of the web page (the document) that includes all the objects in the page (tags, text, etc) All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects Those objects are accessible via scripting languages in modern web browsers
Nov 1

fit100-16-dom 2006 University of Washington

What the heck is the DOM?

Document Object Model
Your web browser builds a model of the web page (the document) that includes all the objects in the page (tags, text, etc) All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects Those objects are accessible via scripting languages in modern web browsers
Nov 1

fit100-16-dom 2006 University of Washington

Example Page Manipulation

Some possibilities
createElement(elementName) createTextNode(text) appendChild(newChild) removeChild(node)

Example: add a new list item

var list = document.getElementById('t1') var newitem = document.createElement('li') var newtext = document.createTextNode(text) list.appendChild(newitem) newitem.appendChild(newtext)

This uses the browser Document Object Model (DOM). We will focus on JavaScript as a language, not its use in the browser
slide 19

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 it does not require a server round trip before giving feedback If the form is not valid, the form is not submitted until the errors are fixed

Client-Side Validation
HTTP Request HTTP Response

Web Browser

Web Server

Application Server

Database Server

JavaScript Validation

Application Validation

JavaScript data validation happens before form is submitted Server-side application validation happens after the form is submitted to the application server

Example password Validation (HTML)

<link rel="stylesheet" type="text/css" href="/code_examples/tutorial.css"> <script type="text/javascript" src="/code_examples/passtest.js"></script> <div class="tutorialWrapper"> <form> <div class="fieldWrapper"> <label for="pass1">Password:</label> <input type="password" name="pass1" id="pass1"> </div> <div class="fieldWrapper"> <label for="pass2">Confirm Password:</label> <input type="password" name="pass2" id="pass2" onkeyup="checkPass(); return false;"> <span id="confirmMessage" class="confirmMessage"></span> </div> </form> </div>

function 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!" } }

Javascript method

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!

41

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

42

Example

Function changePages(newLoc)
SelectAndGo.html