dom and timers
Post on 22-Feb-2016
47 Views
Preview:
DESCRIPTION
TRANSCRIPT
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!
top related