1. DOM and timers CS380 1

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 2

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

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

5. DOM element objects CS380 5

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

7. DOM properties for form controls 7 Freshman? HTML

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

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

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

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 11

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"; 12 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. 13 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 14 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. 15 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: var str = "How are you?" var parts = str.split(" "); // ["How", "are", "you?"] str = parts.join("_"); // "How_are_you?" 16

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

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

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

20. setInterval example CS380 20 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

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

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

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 23

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

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