Top Banner
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
34

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.

Dec 29, 2015

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 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

Page 2: 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

Page 3: 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.

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.

Page 4: 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 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

Page 5: 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 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

Page 6: 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 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

Page 7: 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 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

Page 8: 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.

Javascript Exercise

Page 9: 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.

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

Page 10: 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.

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

Page 11: 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.

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

Page 12: 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.

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”);}

Page 13: 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.

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>

Page 14: 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.

JavaScript

Add Event Handlers

• Documenting code: single-line comment

Page 15: 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.

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

Page 16: 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.

You Can Use JavaScript to Say This!

Page 17: 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.

Validate a FormDid 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

Page 18: 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.

Validate a FormDid 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

Page 19: 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.

Validate a FormDid 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

Page 20: 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.

Validate a FormDid 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

Page 21: 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.

Validate a FormDid 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 “”

Page 22: 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.

Validate a FormDid 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

Page 23: 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.

Validate a FormDid the User Enter Data Correctly?

• Example:

Page 24: 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.

Validate a FormDid the User Enter Data Correctly?

• Validation needs to be triggered by an event

• Use onsubmit

Page 25: 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.

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

Page 26: 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.

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

Page 27: 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.

Hide and Show Elementsvisibility

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

• See “javascriptshowhide.html”

Page 28: 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.

Swap Imagesonmouseover and onmouseout

• Rollover

• Example: javascriptswapimage.html

• Also: Joe Maller

Page 29: 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.

Swap Imagesonmouseover 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

Page 30: 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.

Swap Imagesonmouseover and onmouseout

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

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

Page 31: 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.

Swap Imagesonmouseover 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

Page 32: 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.

Swap Imagesonmouseover 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

Page 33: 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.

Swap Imagesonmouseover 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)

Page 34: 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.

Debug Javascript