Scripts, Applets & Other Controls

Scripts, Applets & Other Controls Website Production

Meta Tags • Example: Splash page control • <META http-equiv=“refresh” content=“_secs_; URL=_url_”> • Page referenced by _url_ will be displayed in _secs_ seconds • Alternate in <BODY>onload=setTimeout(“location.href=‘_url_’”,_msecs_)

Scripts • Programming instructions added to webpage • Interpreted (executed) as page is read by browser • Types: • JavaScript • VBScript

HTML Document Object Model (DOM) • When a web page is loaded, the browser creates a Document Object Model of the page

HTML Document Object Model (DOM) • The HTML DOM is a standard object model and programming interface for HTML. It defines: • The HTML elements as objects • The properties of all HTML elements • The methods to access all HTML elements • The events for all HTML elements

HTML Document Object Model (DOM) • With a programmable object model, JavaScript can create dynamic HTML. JavaScript can … • Change all the HTML elements in the page • Change all the HTML attributes in the page • Change all the CSS styles in the page • React to all the events in the page

Finding HTML Elements • Often, with JavaScript, you want to manipulate HTML elements • There are a couple of ways to find the elements • By id • By tag name • By class name • By HTML object collections

Finding Elements byId • The easiest way to find HTML elements in the DOM, is by using the element id • document.getElementById("intro")

Finding Elements by Tag Name • This example finds the element with id=“main”, and then finds all <p> elements inside “main” var x=document.getElementById("main");var y=x.getElementsByTagName("p");

Finding Elements by Class Name • If you want to find all HTML elements with the same class name, use this method document.getElementsByClassName("intro“)

Changing HTML Content • This example changes the content of a <p> element <html><body><p id="p1">Hello World!</p><script>document.getElementById("p1").innerHTML="New text!";</script></body></html>

Changing an HTML Attribute • To change the attribute of an HTML element, use document.getElementById(id).attribute=new value

Events & Handlers • When viewing a webpage, a user can generate a JavaScript event • This includes … • Loading a webpage • Clicking on an image • Placing the cursor over an image, etc. • Each event can initiate a event handler, an action that occurs in response to the event

Try this! <html><body><h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1></body></html> • BTW, “this” refers to element connected to the event, in this case h1

JavaScript Events • onMouseOver / onMouseOut • onClick • onMouseDown / onMouseUp • onLoad / onUnLoad • onChange • onFocus

onMouseOver / onMouseOut • onMouseOver • When the cursor is placed over a page element • onMouseOut • When the cursor moves off of an element, or out of it’s extent

onClick / onMouseDown / onMouseUp • Parts of a mouse-click • onMouseDown • When a mouse-button is clicked • onMouseUp • When the mouse-button is released • onClick • When the mouse-click is completed

onLoad / onUnLoad • onLoad • When the user enters the page • onUnLoad • When the user leaves the page

onChange / onFocus • onChange • When a user changes the content of an input field • onFocus • When an element gets focus

Example • What if we wished an alert box to appear when placing the cursor over an image? <IMG id=“image1" src=“_image_" onMouseOver="alert('onMouseOver')" border="0" height="100" width="100"> • onMouseOver is the event, while alert() is the event handler

JavaScript Functions • The simplest type of event handler is a built-in JavaScript function • prompt( ) • alert( )

Forms • Used for activities such as passing data to a server • Can contain input elements such as … • text fields • checkboxes • radio-buttons • submit

Forms • Can also contain … • select lists • textarea • fieldset • legend • label elements

Forms • Basic format <form>.input elements.</form>

<input> • Used to select user information. • Can vary in many ways, depending on the type attribute • Can be of type … • text field • checkbox • password • radio button • submit button, and more.

<input> • <input type=“text”> • Defines a one-line input field that a user can enter text into • <input type=“password”> • Defines a password field • <input type=“radio”> • Defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices • <input type=“checkbox”> • Defines a checkbox • Checkboxes let a user select ZERO or MORE options of a limited number of choices • <input type=“submit”> • Defines a submit button

Attributes • Method • Action • Name • Target

Method • Specifies how to send form-data to the page specified in the action attribute • Get • Form-data sent as URL variables • Post • Form-data sent as HTTP post transaction

Action • Specifies where to send the form-data when a form is submitted

Target • Specifies where to display the response that is received after submitting the form _blank _self _parent _top

Example <form METHOD=POST ACTION=“mailto:grinch@whoville.net"> <p>Person's Name: <input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40"> <input TYPE="hidden" NAME="recipient" SIZE="40" MAXLENGTH="40"> </p> <p>Password: <input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10"> </p> <p>Please Place me on your mailing list: <input TYPE="checkbox" NAME="mailing-list" VALUE="Yes" checked> </p>

Example <p>What Country do you Live in? <select NAME="Country"> <option VALUE="USA">United States <option VALUE="CA">Canada </select> </p> <p> <input TYPE="submit" NAME="Request" VALUE="Submit This Form"> <input TYPE="reset" NAME="Clear" VALUE="Clear Form and Start Over"> </p> </form>

<output> • Represents the result of a calculation such as one performed by a script <form oninput="x.value=parseInt(a.value) +parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output></form> • Try it!

JavaScript Function • Block of code that will be executed when "someone" calls it • Example <html><head><script>function myFunction(){alert("Hello World!");}</script></head><body><button onclick="myFunction()">Try it</button></body></html>

Forms & Tables • Tables can be used to organize the elements of a form <form …> <table> <tr> <td>Name:</td> <td><input type=“text” name=“name”></td> </tr> <tr> <td>Major:</td> <td><input type=“text” name=“major”></td> </tr> : </table> </form>

Java Applet • Small application written in Java and delivered to users in the form of bytecode • User launches applet from a web page and it is then executed within a Java Virtual Machine (JVM) in a process separate from the web browser itself • Applet can appear in … • a frame of the web page • a new application window • Sun's AppletViewer • a stand-alone tool for testing applets • Java applets were introduced in the first version of the Java language in 1995

Scripts, Applets & Other Controls