Apart from their specific properties and methods, Element objects also have prope rties
that mirror the HTML attributes of cor responding HTML elements. For example,
there exists a title HTML attribute, whic h is mirrored in every Ele ment object as a
property named title. The titl e attribute represents textual info rmation about the
element, which is typically displayed in the form of a tooltip appearing wh enever a
mouse poin te r hovers over the element. You can dynamically set the title attribute
of the above <div> element simply by assigning a text string to the title proper ty
of the myDiv object:
myDiv.title = "Click the text and see what happens.";
The element has thus obtaine d a tooltip.
Mike: Is it also possible to add new elements to a document?
Professor: There’s virtually no limit to what you can do with the document. Th ere ex-
ist specialized methods to add and remove e le ments from the document dynamically,
some of which I will show you later. Nevertheless, you can also use innerHTML for
that purpose. For example, you can insert two paragraphs inside our <div> element
like this:
myDiv.innerHTML = "<p>Number nine</p><p>Number nine</p>";
Maria: Doesn’t that delete the p revious conte nt o f the <div> element?
Professor: As a matter of fact, it does. You can use a concatenation operator to
actually add to th e existing content. For example, this adds the third Number nine
paragra ph to the element:
myDiv.innerHTML += "<p>Number nine</p>";
12.5 Timer Events
Professor: One interesting type of events are events fired by timers. Sometimes you
may want certain portions of your code to execute later or even to execute many times
at regular time in te rvals. For example, you may want to remind yo ur visitor that
the time has expired, or to update a clock on your web page every secon d. There
are two important global methods, set Timeout() and setInterval (), which let
you register a function tha t you want to invoke at a later time on ce or many times.
Although functions registered this way are invoked asynchronously a s a response to
the timer-elapse event, they are registered differently than other event handlers and we
often call them callb acks.
236 Meeting 12. Using JavaScript to Control the Browser
Both methods are c alled with two argumen ts, the first of which is a refer ence to a func-
tion you want to schedu le f or later invocations, and the second is a number of millisec-
onds af te r which the fun ction should be invoked. The difference between both func-
tions is that setInterval() repeats the function invocation in intervals of the stated
number of milliseconds, while setTimeo ut() schedules the function for a single in-
vocation. Both functions return a value that you can pass to the clearInterv al()
function in order to cancel all the futur e invocations of the scheduled function.
To ge t an idea of how this works, let’s take our 2016 Summer Olympics countdown
page from page 162 and make it alive. This is the HTML portio n of the example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>2016 Summer Olympics Countdown</title>
<script src="/scripts/countdown.js"></script>
</head>
<body>
<p>
Time to 2016 Summer Olympics: <span id="counter"></span>
</p>
</body>
</html>
The JavaScript part look s like this:
window.onload = function() {
var updateCounter = function() {
var now = new Date();
var opening = new Date(Date.UTC(2016, 7, 5, 23));
var seconds;
var output = "";
var counter = document.getElementById("counter");
if (opening.getTime() > now.getTime()) {
seconds = opening.getTime() - now.getTime();
seconds = Math.floor(seconds / 1000);
output += Math.floor(seconds / 86400) + " days, ";
seconds = seconds % 86400;
output += Math.floor(seconds / 3600) + " hours, ";
seconds = seconds % 3600;
output += Math.floor(seconds / 60) + " minutes, ";
output += Math.floor(seconds % 60) + " seconds.";
}
else {
output = "0 seconds."
}
counter.innerHTML = output;
};
setInterval(updateCounter, 1000);
};
12.5. Timer Events 237
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.