1 DOM and timers CS 380 Problems with

1 DOM and timers CS 380

Problems with Java. Script 2 Java. Script 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. ) CS 380

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 Java. Script library adds many useful features to Java. Script: 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) CS 380

The $ function 4 $("id") JS returns the DOM object representing the element with the given id short for document. get. Element. By. Id("id") often used to write more concise DOM code: $("footer"). inner. HTML = $("username"). value. to. Upper. Case(); JS CS 380

DOM element objects 5 CS 380

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 Property Description tag. Name element's HTML tag CSS classes of class. Name element content inside inner. HTML element URL target of an src image Example $("main"). tag. Name is "DIV" $("main"). class. Name is "foo bar" $("main"). inner. HTML is "n <p>Hello, <em>ve. . . $("icon"). src is "images/potter. jpg"

7 DOM properties form controls <input id="sid" type="text" size="7" maxlength="7" /> <input id="frosh" type="checkbox" checked="checked" /> Freshman? HTML Property Description the text in an input value control whether a box is checked Example $("sid"). value could be "1234567" $("frosh"). checked is true whether a control is disabled (boolean) whether a text box is read. Only read-only $("frosh"). disabled is false $("sid"). read. Only is false

Abuse of inner. HTML 8 // bad style! var paragraph = document. get. Element. By. Id("welcome"); paragraph. inner. HTML = "<p>text and <a href="page. html">link</a>"; JS inner. HTML can inject arbitrary HTML content into the page however, this is prone to bugs and errors and is considered poor style CS 380

Adjusting styles with the DOM 9 <button id="clickme">Color Me</button> HTML window. onload = function() { document. get. Element. By. Id("clickme"). onclick = change. Color; }; function change. Color() { var click. Me = document. get. Element. By. Id("clickme"); click. Me. style. color = "red"; } JS contains same properties as in CSS, but with camel. Cased. Names examples: background. Color, border. Left. Width, font. Family CS 380

Common DOM styling errors 10 forgetting to write. style when setting styles: var click. Me = document. get. Element. By. Id("clickme"); click. Me. color = "red"; click. Me. style. color = "red"; style properties are capitalized like. This, not like-this: click. Me. style. font-size = "14 pt"; click. Me. style. font. Size = "14 pt"; JS JS style properties must be set as strings, often with units at the end: click. Me. style. width = 200; click. Me. style. width = "200 px"; click. Me. style. padding = "0. 5 em"; CS 380 JS

Unobtrusive styling 11 function okay. Click() { this. style. color = "red"; this. class. Name = "highlighted"; }. highlighted { color: red; } JS CSS well-written Java. Script 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 CS 380

Timer events 12 method description arranges to call given set. Timeout(function, delay. M function after given delay in S); ms arranges to call function set. Interval(function, delay. M repeatedly every delay. MS S); ms clear. Timeout(timer. ID); stops the given timer an so it. ID both set. Timeout and set. Interval return clear. Interval(timer. ID); will not call its function representing the timer this ID can be passed to clear. Timeout/Interval later to stop the timer CS 380

set. Timeout example 13 <button onclick="delay. Msg(); ">Click me!</button> <span id="output"></span> function delay. Msg() { set. Timeout(booyah, 5000); $("output"). inner. HTML = "Wait for it. . . "; } function booyah() { // called when the timer goes off $("output"). inner. HTML = "BOOYAH!"; } CS 380 HTML JS

set. Interval example 14 <button onclick="delay. Msg(); ">Click me!</button> <span id="output"></span> HTML var timer = null; // stores ID of interval timer function delay. Msg 2() { if (timer == null) { timer = set. Interval(rudy, 1000); } else { clear. Interval(timer); timer = null; } } function rudy() { // called each time the timer goes off $("output"). inner. HTML += " Rudy!"; } JS CS 380

Passing parameters to timers 15 function delayed. Multiply() { // 6 and 7 are passed to multiply when timer goes off set. Timeout(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? set. Timeout(multiply(6 * 7), 2000); JS CS 380

Common timer errors 16 set. Timeout(booyah(), 2000); set. Timeout(booyah, 2000); set. Timeout(multiply(num 1 * num 2), 2000); set. Timeout(multiply, 2000, num 1, num 2); JS what does it actually do if you have the () ? it calls the function immediately, rather than waiting the 2000 ms! CS 380