CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide...
-
Upload
sherman-dickerson -
Category
Documents
-
view
239 -
download
0
Transcript of CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide...
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
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>
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
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
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
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
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
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 “”
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
Validate a FormDid the User Enter Data Correctly?
• 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
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
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
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
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
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)