DOM and timers

1. DOM and timers CS380

2. 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

3. Prototype framework <script src=" https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.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

4. The $ function $("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

5. DOM element objects CS380

6. DOM object properties <div id="main" class="foo bar"> <p>Hello, I am <em>very</em> happy to see you!</p> <imgid="icon" src="images/potter.jpg" alt=“Potter" /> </div>HTML

7. DOM properties for form controls <input id="sid" type="text" size="7" maxlength="7" /> <input id="frosh" type="checkbox" checked="checked" /> Freshman? HTML

8. Abuse of innerHTML // 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

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

10. Common DOM styling errors • forgetting to write .style when setting styles: varclickMe = 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. CS380

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: varstr = "How are you?" varparts = str.split(" "); // ["How", "are", "you?"] str= parts.join("_"); // "How_are_you?"

17. Unobtrusive styling 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 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 CS380

19. setTimeout example <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

20. setIntervalexample <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

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

22. Common timer errors 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! 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 "IgpayAtinlay" 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