CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript

CSS Class 7Add JavaScript to your pageAdd event handlersValidate a formOpen a new windowHide and show elementsSwap imagesDebug JavaScript

Add JavaScript to the Page

• JavaScript is a scripting language – allows the web programmer to write small

programs that run inside the web browser

– these programs allow the browser to perform complicated actions.

• Example: verification of a number typed

into a web form

Examples of What JavaScript Does

• Open or pop up a new window (alert). Can control size, position and attributes of the window. – Are the menus and toolbars visible, for example

• Validate web form input values to make sure they'll be accepted before being submitted to the server. Example.

• Change images as the mouse cursor moves over them. Example.

Add JavaScript to the Pagescript

• JavaScript uses an object-based model • Can identify and manipulate most of the elements

on the page by seeing them as elements• Almost every XHTML element placed in a Web

page can be treated as an object in the script• Frequently have to add an id attribute to an

element in order for the script to differentiate it on a page

Add JavaScript to the Pagescript

• Its uses rely on the code being embedded into the page

• Do this by using the script element

• Takes one required attribute, type, which will always be set as text/javascript

• Anything between the opening and closing script tags will be interpreted by the browser’s Javascript engine

Add JavaScript to the PageConventions

• JavaScript is case-sensitive

• Keywords and phrases all use lowercase letters or mixed case

• Variables can be created in any case (try to be consistent)

• References to elements from your Web page must match the case in which they exist in the code

Add JavaScript to the PageConventions

• Each statement in JavaScript should end in a semicolon

• script element can appear in either the head or body– If in the head, the JS will execute when the

page first loads– If in the body, the JS will execute when the

browser reaches that portion of the page

Javascript Exercise

JavaScript

Add Event Handlers

• JavaScript known as an event-driven language

• Nothing happens unless the user initiates the action

– Clicking a button– Mousing over– Click hyperlink

JavaScript

Add Event Handlers• JavaScript events triggered by adding an event

handler to an XHTML element. • Most elements support:

• Onclick• Ondblclick• Onkeydown• Onkeypres• Onkeyup• Onmousedown• Onmousemove• Onmouseout• Onmouseover• Onmouseup

JavaScript

Add Event Handlers

• Form controls and the anchor element also support onblur and onfocus events

• Input, select, and textarea elements support onchange

• Input and textarea elements further select an onselect event

• check

JavaScript

Add Event Handlers

• Scripts to be triggered by an event will need to be written as functions in the script

• Write functions by using the keyword function, followed by the function’s name and a set of parentheses that include the function’s arguments.

function showalert() {alert (“Hello,

world”);}

JavaScript

Add Event Handlers

• Function will most likely be included in a script block in the head of the document

• Can be called by using its name as the value of the appropriate event handler:<button name=“triggerevent”

Onclick=“showalert();”>Show dialog</button>

JavaScript

Add Event Handlers

• Documenting code: single-line comment

Validate a FormDid the User Enter Data Correctly?

• Examples:

• Is the data appropriate?• XHTML has no concept of data typing to

require numeric input• Using JavaScript, you can write a function

that verifies the input from user• Looking for matches to what you need for the

processing codeM

You Can Use JavaScript to Say This!


• Any form you intend to validate should have name attribute

• Form exists in JavaScript as a document object that is a child of the document object

• Each form control is a child of the form


• Dot.notation: document.signup.firstname

• JavaScript uses dot.notation to reference child objects

• Example: input field in a signup form can be called: document.signup.firstname


• The value of document.signup.firstname can be accessed via document.signup.firstname.value

• Document will always be lowercase and it must match those given in the XHTML


• To validate the controls, you will rely heavily on JavaScript if statements

• if syntax: provide logical test in parentheses following if

• The code to execute if the statement is true in curly braces

• Can use else statement to set code to execute if statement is false


• == means equality

• != means unequality

• Test to see if a field was left empty by

comparing its value to an empty string, or “”


• Check boxes and radio buttons– Can contain multiple values, they exist within

the form as an array– Need to loop over the values to test


• Example:


• Validation needs to be triggered by an event

• Use onsubmit

Open a New Windowopen

• The JavaScript function to generate a new window is simply open

• This function takes a series of arguments

• Only required one is URL to page that will be opened in the window

• Second optional argument lets you set name for the window

Open a New Windowopen

• Specify how the new window looks:• Toolbars, location/address bar, status bar, menu

bar, scroll bars, resizable window• Set each of the above to the value of true• Can also set width and height to size the window• Top and left to position it relative to the top and left

of user’s monitor

Hide and Show Elementsvisibility

• Change the value of the visibility element to hide or show content

• See “javascriptshowhide.html”

Swap Imagesonmouseover and onmouseout

• Rollover

• Example: javascriptswapimage.html

• Also: Joe Maller

http://joemaller.com/js-singleroll.shtml


• Need two images

• Create an image, make a (subtle) change, save again

• Insert images into a Javascript rollover script

• When moused over, change takes place

• Images need to be same size


• CSS:– make changes to text links: making them

bigger, smaller, glow, change color, etc.– most common use is buttons, nav links


• Place original image on page using img element

• Include an id• Wrap in an anchor tag

• Set anchor’s href to a Javascript call using javascript:;

• Add onmouseover and onmouseout event calls


• Javascript requirements:

in the function onmouseover, get the element using document.getElementbyID, referencing the image’s id

then set its src to the second image• Onmouseout reverses this, setting src

back to original


• If there are many images:– Simplify code by passing a reference to the

image as an argument in the function– Then use this reference as the value for get

ElementById– Pass a second argument by with the desired

source of the image

• Advantage is this technique has only a single pair of functions (regardless of image number)

Debug Javascript

Documents

CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript