1

CS380

DOM and timers

CS380

2

Problems with JavaScriptJavaScript 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

3

Prototype framework

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)

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

CS380

4

The $ function

returns the DOM object representing the element with the given id

short for document.getElementById("id") often used to write more concise DOM

code:

$("id") JS

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

JS

CS380

5

DOM element objects

6

DOM object properties

Property Description Example tagName element's HTML

tag $("main").tagName is "DIV"

className

CSS classes of element

$("main").className is "foo bar"

innerHTML content inside element

$("main").innerHTML is "\n <p>Hello, <em>ve...

src URL target of an image

$("icon").src is "images/potter.jpg"

<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

7

DOM properties for form controls

Property Description Example

value the text in an input control

$("sid").value could be "1234567"

checked whether a box is checked

$("frosh").checked is true

disabled

whether a control is disabled (boolean)

$("frosh").disabled is false

readOnly

whether a text box is read-only

$("sid").readOnly is false

<input id="sid" type="text" size="7" maxlength="7" /><input id="frosh" type="checkbox" checked="checked" /> Freshman? HTML

CS380

8

Abuse of innerHTML

innerHTML can inject arbitrary HTML content into the page

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

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

CS380

9

Adjusting styles with the DOM

contains same properties as in CSS, but with camelCasedNames examples: backgroundColor, borderLeftWidth, fontFamily

window.onload = function() {document.getElementById("clickme").onclick =

changeColor;};function changeColor() {

var clickMe = document.getElementById("clickme");clickMe.style.color = "red";

} JS

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

CS380

10

Common DOM styling errors forgetting to write .style when setting

styles:var clickMe = document.getElementById("clickme");clickMe.color = "red";clickMe.style.color = "red"; JS style properties are capitalized likeThis,

not like-this:clickMe.style.font-size = "14pt";clickMe.style.fontSize = "14pt"; JS

style properties must be set as strings, often with units at the end:

clickMe.style.width = 200;clickMe.style.width = "200px";clickMe.style.padding = "0.5em"; JS

CS380

11

{Pimp my text} Add JavaScript code (and any necessary

modifications to the XHTML) so that when the user clicks the "Bigger Pimpin'!" button, the size of the text in the main text area changes to 24pt.

CS380

12

{Pimp my text} Hint: Remember that most CSS

properties translate directly into properties of the .style property within that element's DOM object. For example, the following CSS color declaration:

#id { color: red;} …translates into:

$("id").style.color = "red";

CS380

13

{Pimp my text} You are now going to add an event

handler so that when the user checks the "Bling" checkbox, the main text area will have some styles applied to it.

Add JavaScript code (and any necessary modifications to the XHTML) so that when the user checks the box, the text in the text area becomes bold. You can test whether a given checkbox or radio button is checked by examining the checked property of the box's DOM object. When the box is unchecked, the style should go back to normal.

CS380

14

{Pimp my text} Once you get the bold aspect to work,

add the following additional effects to also take place when the Bling checkbox is checked: underline the text (this is the CSS text-

decoration property) change its color to green make it blink (this is also the CSS text-

decoration property) any two other styles of your choice

CS380

15

{Pimp my text} Now we will transforming or

"Snoopifying" the actual content of the text.

Write a new button named Snoopify that, when clicked, modifies the text in the text area by capitalizing it and adding an exclamation point to the end of it. You will want to use the value property of the text area's DOM element.

16

{Pimp my text} Modify your Snoopify button so that it

also adds a suffix of "-izzle" to the last word of each sentence. (A sentence being a string of text that ends in a period character, "." .)

Do this using the String/array methods split and join. For example, if you wanted to change all spaces with underscores in a string, you could write: var str = "How are you?"

var parts = str.split(" "); // ["How", "are", "you?"]

str = parts.join("_"); // "How_are_you?"

CS380

17

Unobtrusive stylingfunction okayClick() {

this.style.color = "red";this.className = "highlighted";

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

18

Timer events

both setTimeout and setInterval return an ID representing the timer this ID can be passed to clearTimeout/Interval later to stop the timer

method description

setTimeout(function, delayMS);

arranges to call given function after given delay in ms

setInterval(function, delayMS);

arranges to call function repeatedly every delayMS ms

clearTimeout(timerID); clearInterval(timerID);

stops the given timer so it will not call its function

CS380

19

setTimeout example

function delayMsg() {setTimeout(booyah, 5000);$("output").innerHTML = "Wait for it...";

}function booyah() { // called when the timer goes off

$("output").innerHTML = "BOOYAH!";} JS

<button onclick="delayMsg();">Click me!</button><span id="output"></span> HTML

CS380

20

setInterval example

var timer = null; // stores ID of interval timerfunction 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

<button onclick="delayMsg();">Click me!</button><span id="output"></span> HTML

CS380

21

Passing parameters to timersfunction 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

22

Common timer errorssetTimeout(booyah(), 2000);setTimeout(booyah, 2000);setTimeout(multiply(num1 * num2), 2000);setTimeout(multiply, 2000, num1, num2);

JS

what does it actually do if you have the () ? it calls the function immediately, rather

than waiting the 2000ms!

CS380

23

Even More Gangsta Set a timer so that when the Bigger

Pimpin' button is clicked, instead of just increasing the font size once, it will repeatedly increase the font size by 2pt every 500ms.

CS380

24

Even More Gangsta (really tricky) Add a "Malkovitch" button

that causes words of five characters or greater in length in your main text area to be replaced with the word "Malkovich". Consider compound words (i.e., contractions or hyphenated terms) to be separate words. (Inspired by the Malkovitch Mediator by Ka-Ping Yee, inspired by the film Being John Malkovitch)

CS380

25

Even More Gangsta Add an "Igpay Atinlay" button that

converts the text to Pig Latin. The rules of Pig Latin are: Words beginning in a consonant (or

consonant cluster) have that consonant (or consonant cluster) moved to the end and -ay tacked on following.

Words beginning in a vowel simply have -ay tacked on the end.

Add any other crazy styling or pimpin' you want to the page. Show us your best stuff, playa!