DOM and timers CS380 1

Problems with JavaScript 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 2

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=" ototype.js " type="text/javascript"> JS CS380 3

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: CS380 4 $("id") JS $("footer").innerHTML = $("username").value.toUpperCase(); JS

DOM element objects CS380 5

DOM object properties 6 Hello, I am very happy to see you! HTML

DOM properties for form controls 7 Freshman? HTML

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 CS380 8 // bad style! var paragraph = document.getElementById("welcome"); paragraph.innerHTML = " text and link "; JS

Adjusting styles with the DOM  contains same properties as in CSS, but with camelCasedNames  examples: backgroundColor, borderLeftWidth, fontFamily CS380 9 window.onload = function() { document.getElementById("clickme").onclick = changeColor; }; function changeColor() { var clickMe = document.getElementById("clickme"); clickMe.style.color = "red"; } JS Color Me HTML

Common DOM styling errors  forgetting to write.style when setting styles: CS 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

{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 11

{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"; 12 CS380

{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. 13 CS380

{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 14 CS380

{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. 15 CS380

{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?" 16

Unobtrusive styling CS function 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

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

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

setInterval example CS 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 Click me! HTML

Passing parameters to timers CS 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

Common timer errors CS setTimeout(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!

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 23

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)Malkovitch MediatorBeing John Malkovitch CS380 24

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! CS380 25