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

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 Page script 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 Page script 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 Page Conventions 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 Page Conventions 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

JavaScript Add Event Handlers Documenting code: single-line comment

Validate a Form Did 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!

Validate a Form Did the User Enter Data Correctly? 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

Validate a Form Did the User Enter Data Correctly? 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

Validate a Form Did the User Enter Data Correctly? 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

Validate a Form Did the User Enter Data Correctly? 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

Validate a Form Did the User Enter Data Correctly? == means equality != means unequality Test to see if a field was left empty by comparing its value to an empty string, or “”

Validate a Form Did the User Enter Data Correctly? 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

Validate a Form Did the User Enter Data Correctly? Example:

Validate a Form Did the User Enter Data Correctly? Validation needs to be triggered by an event Use onsubmit

Open a New Window open 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 Window open 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 Elements visibility Change the value of the visibility element to hide or show content See “javascriptshowhide.html”

Swap Images onmouseover and onmouseout Rollover Example: javascriptswapimage.html Also: Joe MallerJoe Maller

Swap Images onmouseover and onmouseout 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

Swap Images onmouseover and onmouseout CSS: –make changes to text links: making them bigger, smaller, glow, change color, etc. –most common use is buttons, nav links

Swap Images onmouseover and onmouseout 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

Swap Images onmouseover and onmouseout 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

Swap Images onmouseover and onmouseout 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