FinalJavaScriptReport < MPDL

INTRODUCTION:

This report presents findings from the JavaScript Lab. JavaScript is a scripting language widely used for client-side web development. It was the originating dialect of the ECMAScript standard. It is a dynamic, weakly typed, prototype-based language with first-class functions. JavaScript was influenced by many languages and was designed to look like Java, but be easier for non-programmers to work with.

PART 1:

Final versions of the DTD, XML and XSL from lab 3. LAB 3:

PART 2:

Open up Firefox with Firebug and/or Selenium IDE in 'info' mode.

Refer Figure given at the end.

PART 3 & 4:

Events and Event Handling in Javascript

OnAbort: Fires when the user aborts the download of an image.

To trigger this event you must do one of the following:

)click the browser's stop button,
)navigate to another page, or
)click another link on the page.

<head>
<script language="JavaScript">
   function function1() {
      alert("The loading action has been aborted\nTry later") 
   } 
</script>
</head>
<body>
<img src="http://www.csueastbay.com//style/logo.png" onabort="function1()">
</body>

onBlur: This event fires when the element loses focus.

<head>
<script language="JavaScript">
   function function1() {
       window.open("http://www.csueastbay.com/", "", ""); 
   } 
</script>
</head>
<body>
   Press the Tab key to set focus on the link below.<br>
   <a id="myL" href="http://www.csueastbay.com//" target=_blank onBlur="function1()">
   java2s.com
   </a>
   <a id="myL" href="http://www.csueastbay.com//" target=_blank onBlur="function1()">
   java2s.com
   </a><a id="myL" href="http://www.csueastbay.com//" target=_blank onBlur="function1()">
   java2s.com
   </a>   
   <br>
   Now press the Tab key again to move focus to another element
</body>

onChange: This event fires when the content of a form element is changed.

<head>
<script language="JavaScript">
    function function1(colors) {
        var col = (colors.options[colors.selectedIndex].value);
        if (col) { 
           document.bgColor = col; 
        }
        alert("The background color has changed to "+col) 
    } 
</script></head>
<body>
<select name="colors" onChange="function1(this)">
    <option value="white" selected>White</option>
    <option value="cyan">Cyan</option>
    <option value="ivory">Ivory</option>
</select>
</body>

onClick: This event fires when the user clicks an element with the left mouse button.

<html>
<body>
<input type="text" 
       name="textfield" 
       onclick="alert('You clicked an input text field')" 
       value="Click me">
</body>
</html>

onDblClick: This event fires when the user double-clicks an element.

<HTML>
<body bottommargin=150 ondblclick="alert('double clicked!')">
    <p>Double-click anywhere in the page.</p>
</body>
</HTML>

onError: This event fires when an object-loading operation fails. This may occur for any number of reasons, such as 1)referencing an object that has not been instantiated, 2)calling a function that does not exist, or 3)referencing a variable that was not declared.

<html>
<head>
<script language="JavaScript">
   window.onerror = alert("Errors")
</script>
</head>
<body>
</body>
</html>

onFocus: This event fires when the element on the page receives focus.

      
<head>
<script language="JavaScript">
function function1() {
    document.getElementById("myL").blur();
    alert("<A> element has received focus.");
    window.open("http://www.csueastbay.com/", "", ""); 
}
</script>
</head>
<body>
<a id="myL" 
   href="http://www.csueastbay.com//" 
   target=_blank 
   onFocus="function1()">
    www.java2s.com
</a>
</body>

onKeyDown: This event fires when the user presses any keyboard key.

<html>
<head>
<script language="JavaScript">
function function1() {
    msg = 'on' + event.type + ' event fired by ' + '"' + event.srcElement.id + '"'; 
    alert(msg) 
} 
</script></head>
<body id="myBody" onkeydown="function1()">
<p>Press any key to fire the event</p>
</body>
</html>

onKeyPress: This event fires when the user presses any key on the keyboard.

<html>
<head>
<script language="JavaScript">
function function1() {
    msg = 'on' + event.type + ' event fired by ' + '"' + event.srcElement.id + '"'; 
    alert(msg) 
} 
</script></head>
<body id="myBody" onkeypress="function1()">
<p>Press any key to fire the event</p>
</body>
</html>

onKeyUp: This event fires when the user releases any key on the keyboard.

<html>
<head>
<script language="JavaScript">
function function1() {
    msg = 'on' + event.type + ' event fired by ' + '"' + event.srcElement.id + '"'; 
    alert(msg) 
} 
</script></head>
<body id="myBody" onkeyup="function1()">
<p>Press any key to fire the event</p>
</body>
</html>

onLoad: This event fires immediately after a document, frameset, or image is fully loaded.

<html>
<body onLoad="alert('The document is fully loaded')">
<img src="http://www.csueastbay.com//style/logo.png">
</body>
</html>

onMouseDown: This event fires when the user presses either mouse button on an object.

<html>
<head>
</head>
<body>
   <input type="button" 
          value="Click here" 
          onmousedown="alert('You just pressed down on a mouse button')">
   Click your mouse on button. 
</body>
</html>

onMouseMove: This event fires when the mouse pointer moves.

<head>
<script language="JavaScript">
    function function1(){
        alert('The '+event.type+' event fired') 
    } 
</script>
</head>
<body>
    <div id="myDiv" onmousemove="function1()">
        Move the mouse over this div element area.
    </div>
</body>

onMouseOut: This event fires when the user moves the mouse pointer out of an object.

<head>
<script language="JavaScript">
    function function1(){
        alert('The '+event.type+' event fired') 
    } 
</script>
</head>
<body>
    <div id="myDiv" onmouseout="function1()">
        Move the mouse over this div element area.
    </div>
</body>

onMouseOver: This event fires when the user moves the mouse pointer over an object.

<head>
<script language="JavaScript">
    function function1(){
        alert('The '+event.type+' event fired') 
    } 
</script>
</head>
<body>
    <div id="myDiv" onmouseover="function1()">
        Move the mouse over this div element area.
    </div>
</body>

onMouseUp: This event fires when the user releases the mouse button.

<head>
<script language="JavaScript">
    function function1(){
        alert('The '+event.type+' event fired') 
    } 
</script>
</head>
<body>
    <div id="myDiv" onmouseup="function1()">
        Move the mouse over this div element area.
    </div>
</body>

onReset: This event fires when the form is reset.

<html>
<body>
<p>Input some text in the text field below.</p>
<form name="form1" 
      method="post" 
      action="" onreset="alert('The form is being reset')">
   <input type="text" value="">
   <input type="reset" value="Reset">
</form>
</body>
</html>

onResize: This event fires when the user resizes an object.

<html>
<head>
<script language="JavaScript">
    function function1() {
        alert('The '+event.type+' event fired')
    }
</script>
</head>
<body>
    <a id="myL" href="http://www.csueastbay.com/" contenteditable=true onresize="function1()">
        <img src="http://www.csueastbay.com//style/logo.png" 
             alt="http://www.csueastbay.com/" 
             width="79" 
             height="99">
    </a>
</body>
</html>

onSelect: This event fires when highlighting text.

<html>
<body onselect="alert('The user is selecting some body object')">
   Try to select a portion of this text
</body>
</html>

onSubmit: This event fires when the user submits a form or clicking a Submit button. This event is in response to the form.submit() method. Use this action to validate data on the client side.

<html>
<body>
<form name="form1" 
      method="post" 
      action="" 
      onsubmit="alert('The form is being submitted')">
   <input type="text" name="textfield">
   <input type="submit" value="Submit">
</form>
</body>
</html>

onUnload: This event fires before the document begins to unload. The document will unload when

)the user clicks the close button in the browser window, or
)when the user goes to a different page.

<html>
<body onunload="alert('Exiting the page!')">
</body>
</html>

Simple XML

<?xml version="1.0" encoding="ISO-8859-1"?>
    <note>
        <to>Tove</to>
        <from>Jani</from>
        <heading>Reminder</heading>
        <body>Don't forget me this weekend!</body>
    </note>

XML Schema

<?xml version="1.0" encoding="UTF-8" ?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="body">
    <xs:complexType mixed="true" />
  </xs:element>

  <xs:element name="from">
    <xs:complexType mixed="true" />
  </xs:element>

  <xs:element name="heading">
    <xs:complexType mixed="true" />
  </xs:element>

  <xs:element name="note">
    <xs:complexType>
      <xs:sequence>
        <xs:element ref="to" />
        <xs:element ref="from" />
        <xs:element ref="heading" />
        <xs:element ref="body" />
      </xs:sequence>
    </xs:complexType>
  </xs:element>

  <xs:element name="to">
    <xs:complexType mixed="true" />
  </xs:element>

</xs:schema>

The hardship to build styles in a stylesheet for the event handler is to specify where to embed the javascript code as the scripting language and where to add the functions that handle the events.

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<p>Input some text in the text field below.</p>
<form name="form1" 
      method="post" 
      action="" onreset="alert('The form is being reset')">
   <input type="text" value="">
   <input type="reset" value="Reset">
</form>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

PART 5:

The SwethaJavaScript code will work in both - Firefox as well as Internet Explorer. The only difference is in Internet Explorer , the SwethaJavaScript message box which output the message "The form is being reset", was not popping out.

REFLEXIVE QUESTIONS

We need make lot of changes to our first XML, XML Schema to embed SwethaJavaScript into these pages.

Event bubble allows a child control to propagate events up its containment hierarchy. Event bubbling enables events to be raised from a more convenient location in the controls hierarchy and allows event handlers to be attached to the original control as well as to the control that exposes the bubbled event. Only one copy will be stored in memory. I coulnt find an example in my abstract model.

Combining CSS with SwethaJavaScript takes it to a whole new level!The trick with a CSS/JavaScript combination is to realize that what you are always doing is using SwethaJavaScript to change CSS attribute values. Now, do this after the page has loaded and the user sees things change on the page right in the browser and that's Dynamic HTML!

CONCLUSION:

This will help to start to develop a true intuitive understanding of event-driven programming in general, and Javascript events in particular. This report integrate the contents from Lab 3(DTD, XML, & XSL) as well as upgrade the results of the various Labs which come under Wensite Development course.

REFERENCES:

[1] D. Flanagan, JavaScript: The Definitive Guide, 3rd ed.,O'Reilly, 2006. [2] java2s.com

FIREBUG.jpg:

table17-1.jpg:

onResetJavascript.jpg:

onreset.html: onreset.html