Scribd
Upload
33 views16 pages

14 DOMTimers

Uploaded by

Arslan Coskun
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views16 pages

14 DOMTimers

Uploaded by

Arslan Coskun
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

1 DOM and timers

CS380
Problems with JavaScript
2

JavaScript is a powerful language, but it has


many flaws:
 the DOM can be clunky to use
 the same code doesn't always work the same
way in every browser
 code that works great in Firefox, Safari, ... will fail in IE
and vice versa
 many developers work around these problems
with hacks (checking if browser is IE, etc.)

CS380
Prototype framework
3

<script src="
https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/pr
ototype.js "
type="text/javascript"></script> JS

 the Prototype JavaScript library adds many


useful features to JavaScript:
 many useful extensions to the DOM
 added methods to String, Array, Date, Number,
Object
 improves event-driven programming

 many cross-browser compatibility fixes

 makes Ajax programming easier (seen later)


CS380
The $ function
4

$("id") JS

 returns the DOM object representing the


element with the given id
 short for document.getElementById("id")
 often used to write more concise DOM code:

$("footer").innerHTML = $("username").value.toUpperCase();
JS

CS380
DOM element objects
5

CS380
DOM object properties
6

<div id="main" class="foo bar">


<p>Hello, I am <em>very</em> happy to see you!</p>
<img id="icon" src="images/potter.jpg" alt=“Potter" />
</div> HTML
DOM properties for form
7
controls
<input id="sid" type="text" size="7" maxlength="7" />
<input id="frosh" type="checkbox" checked="checked" />
Freshman? HTML
Abuse of innerHTML
8

// bad style!
var paragraph = document.getElementById("welcome");
paragraph.innerHTML = "<p>text and <a
href="page.html">link</a>"; JS

 innerHTML can inject arbitrary HTML content


into the page
 however, this is prone to bugs and errors and
is considered poor style

CS380
Adjusting styles with the DOM
9

<button id="clickme">Color Me</button> HTML


window.onload = function() {
document.getElementById("clickme").onclick =
changeColor;
};
function changeColor() {
var clickMe = document.getElementById("clickme");
clickMe.style.color = "red";
} JS

 contains same properties as in CSS, but with


camelCasedNames
 examples: backgroundColor,
borderLeftWidth, fontFamily
CS380
Common DOM styling errors
10

 forgetting to write .style when setting styles:

 style properties are capitalized likeThis, not


like-this:

 style properties must be set as strings, often


with units at the end:

CS380
Unobtrusive styling
11

.highlighted { color: red; } CSS

 well-written JavaScript code should contain as


little CSS as possible
 use JS to set CSS classes/IDs on elements
 define the styles of those classes/IDs in your
CSS file
CS380
Timer events
12

 both setTimeout and setInterval return an ID


representing the timer
 this ID can be passed to
clearTimeout/Interval later to stop the timer
CS380
setTimeout example
13

<button onclick="delayMsg();">Click me!</button>


<span id="output"></span> HTML

function delayMsg() {
setTimeout(booyah, 5000);
$("output").innerHTML = "Wait for it...";
}
function booyah() { // called when the timer goes off
$("output").innerHTML = "BOOYAH!";
} JS

CS380
setInterval example
14

<button onclick="delayMsg();">Click me!</button>


<span id="output"></span> HTML

var timer = null; // stores ID of interval timer


function delayMsg2() {
if (timer == null) {
timer = setInterval(rudy, 1000);
} else {
clearInterval(timer);
timer = null;
}
}
function rudy() { // called each time the timer goes off
$("output").innerHTML += " Rudy!";
} JS

CS380
Passing parameters to timers
15

function delayedMultiply() {
// 6 and 7 are passed to multiply when timer goes off
setTimeout(multiply, 2000, 6, 7);
}
function multiply(a, b) {
alert(a * b);
} JS

 any parameters after the delay are eventually


passed to the timer function
 why not just write this?
setTimeout(multiply(6 * 7), 2000);
JS

CS380
Common timer errors
16

 what does it actually do if you have the () ?


 it calls the function immediately, rather than
waiting the 2000ms!

CS380

You might also like