Dynamic Content, Timers, XML

CS 174

Chris Pollett

Apr 28, 2021

Outline

Manipulating HTML Elements in Javascript
Javascript Timers
In-Class Exercise
Introduction to XML
Document Type Definitions
Internal versus External DTDs
Namespaces

Events and Event Handling

In HTML/XHTML, there are a collection of attributes beginning with "on" that can be used to give a handler for different kinds of events:
- onblur -- can be used in <a>, <button>, <input>, <textarea>, <select>
- onchange -- can be used in <input>, <textarea>, <select>
- onclick -- can be used in <a>, <input>
- onfocus -- can be used in <a>, <input>, <textarea>, <select>
- onload/ onunload -- can be used in <body>
- onmousedown, onmousemove, onmouseout, onmouseover, onmouseup -- can be used in most elements.
- onselect -- can be used in <input>, <textarea>

An example, of using one of these is:

<input type = "button" id="b" name="b" onclick="alert('b tapped');" />

Validating Forms

As we said before it useful to check that the data entered into a form is valid before sending it to the server.
We saw last class we can associate a handler with a form using a syntax-like:
```
<form ... onsubmit="return checkSubmit()" >
```
If this function returns true; the form is submitted; otherwise it is not.
Typically, if the form is not correct you want to display some message.
You could either use an alert
Or you could set the style of some element from display: none to display: inline or display:block. This would allow you to put stars by missing data:
```
phoneStar = document.getElementById("phoneStar");
phoneStar.style.display="inline";
```
One can also dynamically insert content such as an error message into div tags by setting its innerHTML attribute.

DOM 2

In this model events are split into HTMLEvents like blur and MouseEvents like click and all events beginning with mouse.

Event registration is done using addEventListener:

myelement.addEventListener("change", myhandler, false).

You can add multiple handlers to the same node.
There is also a removeEventListener method.
Events are targeted on some node in the doc tree. In the event capturing phase, one starts at the root node and goes down the tree toward the target calling all events whose onCapture flag is true. When the target node is reached a DOM 0 like event handling is done for handlers that are specifically attached ot this target. Then a bubbling phase back up the tree happens and all listeners whose onCapture flag is false are called.

The Navigator Object

The navigator object can be used to determine browser type.
It has two useful properties, appName and appVersion

Element Positioning

Positioning of elements can be done using styles.

It come in a few types absolute, fixed, relative, etc:

<p style="position: absolute; left:100px; top: 200px">some text
</p>
<p style="position: relative; left:10px; top: -20px; width: 50">some other text
</p>

Both positionings can be used to set text on top of other text.
Since you can change the style property of an element in Javascript, you can use positioning to move objects around on the screen dynamically.

Moving Elements

Consider the following Javascript function:

function moveIt(id, newTop, newLeft)
{
    myStyle = document.getElementById(id).style;
    myStyle.top = newTop + "px"; /* notice how CSS properties are 
        properties of the style object*/
    myStyle.left = newLeft + "px";
}

This could be used to move an element to a specific location on the screen.

Element Visibility, Colors and Fonts

You can control the visibility of an XHTML element using the CSS property.

<div id="test" style="visibility: hidden">hi there</div>
<input type="button" onclick='show("test")' />
<script type="text/javascript"> 
    function show(id)
    {
       myStyle = document.getElementById(id).style;
       myStyle.visibility = "visible";
    }
</script>

In a similar fashion one can change other CSS properties in response to events. For instance, if you like you could change the color or font type or size.

Dynamic Content

It is sometimes useful to be able to give help information when a person hovers over a form element. This can be achieved as follows:

<script type="text/javascript" >
msgs = ["<p>mesg0</p>", "<p>mesg1</p>"]
function showMessage(evt, num)
{
   box = document.getElementById("adviceBox");
   box.innerHTML = msgs[num];
   myStyle =box.style;
   myStyle.position = "absolute";
   myStyle.top = evt.clientY +10 +"px"; 
   myStyle.left =  evt.clientX +10 +"px";
   myStyle.visibility = "visible";
}
function hideMessage() 
{
   myStyle = document.getElementById("adviceBox").style;
   myStyle.visibility = "hidden";
}
</script>
<div id="adviceBox" style="visibility:hidden" ></div >
<input type="text" onmouseover="showMessage(event, 1)" onmouseout="hideMessage()" />

Timers

It is sometimes useful to update the contents of a page every so many milliseconds.
Javascript supports this by using either the function setInterval (repeating) or setTimeout (fires once).

For example,

setTimeout(myCallback, repeatTimeInMilliSec);
// myCallback is the Javascript function you would like called

To stop the timer you can use clearTimeout/clearInterval.

var timeout = setInterval(myCallback, 5000);
clearInterval(timeout);

In-Class Exercise

Write a short HTML page with Javascript on it and a div tag containing the text Jump! in 32pt font size and black.
When you click this div tag the word jump should be displaced upwards by 0.5in for 5 seconds and change to red before returning to its original state (use the Javascript for this).
Post your solution to the Apr 28 In-Class Exercise Thread.

Introduction to XML

Recall that HTML was originally specified as an SGML (Standard Generalized Markup Language) doctype.
HTML only provides limited semantic information about a document. You can tell if something is in <h1> tags that is probably important, but not much else.
Starting in 1998 a stripped-down version of SGML called XML (extensible markup language) was developed to make it easier to create new tag-based mark-up languages where the tags can be used to carry whatever semantic information is desired.