1 / 36

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.

omana
Download Presentation

Scripts, Applets & Other Controls

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Scripts, Applets & Other Controls Website Production

  2. 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_)

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

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

  5. 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

  6. 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

  7. 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

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

  9. 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");

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  27. Attributes • Method • Action • Name • Target

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

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

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

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

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

  33. <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!

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

  35. 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>

  36. 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

More Related