<!--#include virtual="../s5/commontop.html" -->
<title>Lecture 5: JavaScript & Basic DOM — INFO 343 Autumn 2012</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>INFO 343 Lecture 5</h1>
<h2>JavaScript & Basic DOM</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>JavaScript & Basic DOM</h1>
<h3>Lecture 5</h3>
<!-- <h4>Reading: 7.1–7.4</h4> -->
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp, Jessica Miller, and/or Morgan Doocy.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="../s5/images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="../s5/images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<div class="slide titleslide">
<h1>Key JavaScript Concepts</h1>
<ol>
<li>
<strong>Key JavaScript Concepts</strong>
</li>
<li>
JavaScript Syntax
</li>
<li>
Event Handling & the DOM
</li>
<li>
Form control elements
</li>
<li>
Inspecting & altering the page
</li>
</ol>
</div>
<div class="slide">
<h1>
Client-side scripting
<span class="readingsection">(7.1.1)</span>
</h1>
<div class="centerfigure">
<img src="images/client-side-cycle.png" alt="client-side scripting" width="50%" />
</div>
<ul>
<li><span class="term">client-side script</span>: code runs in browser <em>after</em> page is sent back from server
<ul>
<li>often this code manipulates the page or responds to user actions</li>
</ul>
</li>
</ul>
</div>
<!-- <div class="slide">
<h1>Uses of client-side programming</h1>
<p>
Client-side scripting (JavaScript) allows us to:
</p>
<ul>
<li>create dynamic, interactive user interfaces</li>
<li>respond to user input</li>
<li>manipulate the content and appearance of the page
<ul>
<li>JavaScript interacts with the current page through something called the Document Object Model (DOM)</li>
</ul>
</li>
</li>
</div> -->
<div class="slide">
<h1>
What is JavaScript?
<span class="readingsection">(7.1)</span>
</h1>
<ul>
<li>a lightweight programming language ("scripting language")</li>
<li>used to make web pages interactive
<ul>
<li>insert dynamic text into HTML (ex: user name)</li>
<li>react to events (ex: page load user click)</li>
<li>get information about a user's computer (ex: browser type)</li>
<li>perform calculations on user's computer (ex: form validation)</li>
</ul>
</li>
<li>a <a href="http://www.webstandards.org/">web standard</a> (but not supported identically by <a href="http://en.wikipedia.org/wiki/Criticisms_of_Internet_Explorer#JavaScript_and_DOM">all browsers</a>)</li>
<li>NOT related to Java other than by name and some syntactic similarities</li>
</ul>
</div>
<div class="slide">
<h1>JavaScript vs. Java</h1>
<!-- <div class="rightfigure">
<img style="width: 100px" src="images/java.jpg" alt="Java" />
+
<img style="width: 100px" src="images/cannabis.png" alt="mary jane, da endo, aight" />
= JavaScript
</div> -->
<ul>
<li><span class="term">interpreted</span>, not compiled</li>
<li>more relaxed syntax and rules
<ul>
<li>fewer and "looser" data types</li>
<li>variables don't need to be declared</li>
<li>errors often silent (few exceptions)</li>
</ul>
</li>
<li>key construct is the <span class="term">function</span> rather than the class
<ul>
<li>"first-class" functions are used in many situations</li>
</ul>
</li>
<li>contained within a web page and integrates with its HTML/CSS content</li>
</ul>
</div>
<!-- <div class="slide">
<h1>JavaScript vs. PHP</h1>
<div class="rightfigure">
JS <3
<img src="images/php_logo.gif" alt="php" style="margin-right: 2em" />
</div>
<ul>
<li>similarities:
<ul>
<li>both are <span class="term">interpreted</span>, not compiled</li>
<li>both are relaxed about syntax, rules, and types</li>
<li>both are case-sensitive</li>
<li>both have built-in regular expressions for powerful text processing</li>
</ul>
</li>
<li>differences:
<ul>
<li>JS is more object-oriented: <code>noun.verb()</code>, less procedural: <code>verb(noun)</code></li>
<li>JS focuses on UIs and interacting with a document; PHP on HTML output and files/forms</li>
<li>JS code runs on the client's browser; PHP code runs on the web server</li>
</ul>
</li>
</ul>
</div> -->
<div class="slide titleslide">
<h1>JavaScript Syntax</h1>
<ol>
<li>
Key JavaScript Concepts
</li>
<li>
<strong>JavaScript Syntax</strong>
</li>
<li>
Event Handling & the DOM
</li>
<li>
Form control elements
</li>
<li>
Inspecting & altering the page
</li>
</ol>
</div>
<div class="slide">
<h1>
Linking to a JavaScript file:
<a href="http://www.w3schools.com/tags/tag_script.asp"><code>script</code></a>
</h1>
<pre class="syntaxtemplate html">
<script src="<var>filename</var>" type="text/javascript"></script>
</pre>
<pre class="examplecode html">
<script src="example.js" type="text/javascript"></script>
</pre>
<ul>
<li><code>script</code> tag should be placed in HTML page's <code>head</code></li>
<li>script code is stored in a separate <code>.js</code> file</li>
<li>JS code can be placed directly in the HTML file's <code>body</code> or <code>head</code> (like CSS)
<ul>
<li>but this is bad style (should separate content, presentation, and behavior)</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
A JavaScript statement:
<a href="http://www.w3schools.com/js/js_popup.asp"><code>alert</code></a>
</h1>
<pre class="syntaxtemplate js">
alert("<var>message</var>");
</pre>
<div class="example">
<pre class="examplecode js">
alert("IE6 detected. Suck-mode enabled.");
</pre>
<div class="exampleoutput">
<img src="images/alert.png" alt="alert" />
</div>
</div>
<ul>
<li>a JS command that pops up a dialog box with a message</li>
<li>most commonly used for debugging</li>
</ul>
</div>
<div class="slide">
<h1>
<a href="http://www.w3schools.com/js/js_variables.asp">Variables</a> and types
<span class="readingsection">(7.2.1, 7.2.3)</span>
</h1>
<pre class="syntaxtemplate js">
var <var>name</var> = <var>expression</var>;
</pre>
<pre class="examplecode js">
var age = 32;
var weight = 127.4;
var clientName = "Connie Client";
</pre>
<ul>
<li>variables are declared with the <code>var</code> keyword (case sensitive)</li>
<li>types are not specified, but JS does have types ("loosely typed")
<ul>
<li><code>Number</code>, <code>Boolean</code>, <code>String</code>, <code>Array</code>, <code>Object</code>, <code>Function</code>, <code>Null</code>, <code>Undefined</code></li>
<li>can find out a variable's type by calling <a href="http://javascript.crockford.com/remedial.html"><code>typeof</code></a></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
<a href="http://www.w3schools.com/jsref/jsref_obj_string.asp"><code>String</code></a> type
<span class="readingsection">(7.2.7)</span>
</h1>
<pre class="examplecode js">
var s = "Connie Client";
var fName = s.<em>substring</em>(0, s.<em>indexOf</em>(" ")); <span class="comment">// "Connie"</span>
var len = s.<em>length</em>; <span class="comment">// 13</span>
var s2 = 'Melvin Merchant'; <span class="comment">// can use "" or ' '</span>
</pre>
<ul>
<li>methods:
<a href="http://www.w3schools.com/jsref/jsref_charAt.asp"><code>charAt</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_charCodeAt.asp"><code>charCodeAt</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_fromCharCode.asp"><code>fromCharCode</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_indexOf.asp"><code>indexOf</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_lastIndexOf.asp"><code>lastIndexOf</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_replace.asp"><code>replace</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_split.asp"><code>split</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_substring.asp"><code>substring</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_toLowerCase.asp"><code>toLowerCase</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_toUpperCase.asp"><code>toUpperCase</code></a>
<ul>
<li><code>charAt</code> returns a one-letter <code>String</code> (there is no <code>char</code> type)</li>
</ul>
</li>
<li><code>length</code> property (not a method as in Java)</li>
<li>
concatenation with <code>+</code> : <code>1</code> + 1 is <code>2</code>, but
<code>"1"</code> + 1 is <code>"11"</code>
<ul>
<li>debugging example:
<pre>alert("fName has the value: '" + fName + "'");</pre></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
<code>Number</code> type
<span class="readingsection">(7.2.2)</span>
</h1>
<pre class="examplecode js">
var enrollment = 99;
var medianGrade = 2.8;
var credits = 5 + 4 + (2 * 3);
</pre>
<ul>
<li>integers and real numbers are the same type (no <code>int</code> vs. <code>double</code>)</li>
<li>
same operators: <code>+ - * / % ++ -- = += -= *= /= %=</code>
</li>
<li>similar <a href="http://www.codehouse.com/javascript/precedence/">precedence</a> to Java</li>
<li>many operators auto-convert types: <code>"2" * 3</code> is <code>6</code></li>
</ul>
</div>
<div class="slide">
<h1>
Comments
<span class="sameasjava">(same as Java)</span>
<span class="readingsection">(7.2.4)</span>
</h1>
<pre class="syntaxtemplate js">
<span class="comment">// <var>single-line comment</var>
/* <var>multi-line comment</var> */</span>
</pre>
<ul>
<li>identical to Java's comment syntax</li>
<li>recall: 3 comment syntaxes
<ul>
<li><span style="float: left; width: 10em">HTML:</span> <code><!-- <var>comment</var> --></code></li>
<li>
<span style="float: left; width: 10em">
CSS:
</span>
<code>/* <var>comment</var> */</code>
</li>
<li>
<span style="float: left; width: 10em; height: 2.4em">
Java, JavaScript:
</span>
<code>/* <var>comment</var> */</code><br/>
<code>// <var>comment</var></code>
</li>
<!-- <li>
<span style="float: left; width: 10em; height: 3.6em">PHP:</span>
<code>/* <var>comment</var> */</code><br/>
<code>// <var>comment</var></code><br/>
<code># <var>comment</var></code>
</li> -->
</ul>
<!-- <ul>
<li><span style="float: left; width: 10em">HTML:</span> <code><!- - <var>comment</var> - -></code></li>
<li><span style="float: left; width: 10em">CSS/Java/JS/PHP:</span> <code>/* <var>comment</var> */</code></li>
<li><span style="float: left; width: 10em">Java/JS/PHP:</span> <code>// <var>comment</var></code></li>
<li><span style="float: left; width: 10em">PHP:</span> <code># <var>comment</var></code></li>
</ul> -->
</li>
<li>
<p>in this class, JavaScript comments should consist of:</p>
<ul>
<li>authorship info at top of file (as with HTML, CSS)</li>
<li>function header comments (parameters, behavior, return values)</li>
<li>“milepost” comments at significant points in JavaScript code</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>More about <code>String</code></h1>
<ul>
<li>
escape sequences behave as in Java:
<code>\' \" \& \n \t \\</code>
</li>
<li>converting between numbers and <code>String</code>s:
<pre class="examplecode js">
var count = 10;
var s1 = "" + </em>count<em></em>;</code> <span class="comment">// "10"</span>
var s2 = count <em>+</em> " bananas, ah ah ah!";</code> <span class="comment">// "10 bananas, ah ah ah!"</span>
var n1 = <em>parseInt</em>("42 is the answer"); <span class="comment">// 42</span></code>
var n2 = parseFloat("booyah"); <span class="comment">// <a href="http://www.w3schools.com/jsref/jsref_NaN.asp">NaN</a></span>
</pre>
</li>
<li>accessing the letters of a <code>String</code>:
<pre class="examplecode js">
var firstLetter = s<em>[0]</em>; <span class="comment">// doesn't work in IE ≤ 7</span></code>
var firstLetter = s<em>.charAt(0)</em>; <span class="comment">// works in all browsers</span></code>
var lastLetter = <em>s.charAt(s.length - 1);</em>
</pre>
</li>
</ul>
</div>
<!-- *** example program: name converter -->
<div class="slide">
<h1>
<a href="http://www.w3schools.com/js/js_loop_for.asp"><code>for</code></a> loop
<span class="sameasjava">(same as Java)</span>
<span class="readingsection">(7.2.8)</span>
</h1>
<pre class="syntaxtemplate js">
for (<var>initialization</var>; <var>condition</var>; <var>update</var>) {
<var>statements</var>;
}
</pre>
<pre class="examplecode js">
var sum = 0;
<em>for (var i = 0; i < 100; i++) {</em>
sum = sum + i;
<em>}</em>
</pre>
<pre class="examplecode js">
var s1 = "hello";
var s2 = "";
<em>for (var i = 0; i < s.length; i++) {</em>
s2 += s1.charAt(i) + s1.charAt(i);
<em>}</em>
<span class="comment">// s2 stores "hheelllloo"</span>
</pre>
<ul>
<li>common error: <code><del>int</del> i</code> → <code><ins>var</ins> i</code></li>
</ul>
</div>
<!-- *** example program: factorializer -->
<div class="slide">
<h1>
<a href="http://www.w3schools.com/jsref/jsref_obj_math.asp">Math</a> object
<span class="readingsection">(7.2.9)</span>
</h1>
<pre class="examplecode js">
var rand1to10 = <em>Math.floor</em>(<em>Math.random()</em> * 10 + 1);
var three = <em>Math.floor</em>(<em>Math.PI</em>);
</pre>
<ul>
<li>methods:
<code><a href="http://www.w3schools.com/jsref/jsref_abs.asp">abs</a></code>,
<code><a href="http://www.w3schools.com/jsref/jsref_ceil.asp">ceil</a></code>,
<code><a href="http://www.w3schools.com/jsref/jsref_cos.asp">cos</a></code>,
<code><a href="http://www.w3schools.com/jsref/jsref_floor.asp">floor</a></code>,
<code><a href="http://www.w3schools.com/jsref/jsref_log.asp">log</a></code>,
<code><a href="http://www.w3schools.com/jsref/jsref_max.asp">max</a></code>,
<code><a href="http://www.w3schools.com/jsref/jsref_min.asp">min</a></code>,
<code><a href="http://www.w3schools.com/jsref/jsref_pow.asp">pow</a></code>,
<code><a href="http://www.w3schools.com/jsref/jsref_random.asp">random</a></code>,
<code><a href="http://www.w3schools.com/jsref/jsref_round.asp">round</a></code>,
<code><a href="http://www.w3schools.com/jsref/jsref_sin.asp">sin</a></code>,
<code><a href="http://www.w3schools.com/jsref/jsref_sqrt.asp">sqrt</a></code>,
<code><a href="http://www.w3schools.com/jsref/jsref_tan.asp">tan</a></code></li>
</li>
<li>properties:
<code>E</code>,
<code>PI</code>
</li>
</ul>
</div>
<div class="slide">
<h1>
Special values: <code>null</code> and <code>undefined</code>
<span class="readingsection">(7.2.10)</span>
</h1>
<pre class="examplecode js">
var ned = null;
var benson = 9;
var caroline;
<span class="comment">// at this point in the code,
// ned is null
// benson's 9
// caroline is undefined</span>
</pre>
<ul>
<li><code>undefined</code> : has not been declared, does not exist</li>
<li><code>null</code> : exists, but was specifically assigned an empty or <code>null</code> value</li>
<li>Why does JavaScript have both of these?</li>
</ul>
</div>
<div class="slide">
<h1>
Logical operators
<span class="readingsection">(7.3.1, 7.3.4)</span>
</h1>
<ul>
<li>
<code>> < >= <= && || ! == != <em>=== !==</em></code>
</li>
<li>
most logical operators automatically convert types:
<ul>
<li>
<code>5 < "7"</code> is <code>true</code>
</li>
<li>
<code>42 == 42.0</code> is <code>true</code>
</li>
<li><code>"5.0" == 5</code> is <code>true</code></li>
</ul>
</li>
<li>
<code>===</code> and <code>!==</code> are strict equality tests; checks both type and value
<ul>
<li>
<code>"5.0" === 5</code> is <code>false</code></li>
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
<a href="http://www.w3schools.com/js/js_if_else.asp"><code>if/else</code></a> statement
<span class="sameasjava">(same as Java)</span>
<span class="readingsection">(7.3.2)</span>
</h1>
<pre class="syntaxtemplate js">
if (<var>condition</var>) {
<var>statements</var>;
} else if (<var>condition</var>) {
<var>statements</var>;
} else {
<var>statements</var>;
}
</pre>
<ul>
<li>identical structure to Java's <code>if/else</code> statement</li>
<li>JavaScript allows almost anything as a <var>condition</var></li>
</ul>
</div>
<div class="slide">
<h1>
<a href="http://www.w3schools.com/js/js_obj_boolean.asp">Boolean</a> type
<span class="readingsection">(7.3.3)</span>
</h1>
<pre class="examplecode js">
var iLike_iSchool = true;
var ieIsGood = "IE6" > 0; <span class="comment">// false</span>
if ("web dev is great") { <span class="comment">/* true */</span> }
if (0) { <span class="comment">/* false */</span> }
</pre>
<ul>
<li>
<img class="rightfigure" src="images/colbert.png" alt="Stephen Colbert is the man" />
any value can be used as a <code>Boolean</code>
<ul>
<li>
"falsey" values: <code>0</code>, <code>0.0</code>, <code>NaN</code>, <code>""</code>, <code>null</code>, and <code>undefined</code>
</li>
<li>"truthy" values: anything else</li>
</ul>
</li>
<li>converting a value into a <code>Boolean</code> explicitly:
<ul>
<li><code>var boolValue = <em>Boolean(</em><var>otherValue</var><em>)</em>;</code></li>
<li><code>var boolValue = <em>!!</em>(<var>otherValue</var>);</code></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
<a href="http://www.w3schools.com/js/js_loop_while.asp"><code>while</code></a> loops
<span class="sameasjava">(same as Java)</span>
<span class="readingsection">(7.3.5)</span>
</h1>
<pre class="syntaxtemplate js">
while (<var>condition</var>) {
<var>statements</var>;
}
</pre>
<pre class="syntaxtemplate js">
do {
<var>statements</var>;
} while (<var>condition</var>);
</pre>
<ul>
<li><code><a href="http://www.w3schools.com/js/js_break.asp">break</a></code> and <code>continue</code> keywords also behave as in Java</li>
</ul>
</div>
<div class="slide">
<h1>
<a href="http://www.w3schools.com/js/js_popup.asp">Popup boxes</a>
<span class="readingsection">(7.4.4)</span>
</h1>
<pre class="syntaxtemplate js">
alert("<var>message</var>"); <span class="comment">// message</span>
confirm("<var>message</var>"); <span class="comment">// returns true or false</span>
prompt("<var>message</var>"); <span class="comment">// returns user input string</span>
</pre>
<div>
<img src="images/alert.png" alt="alert" style="width: 30%" />
<img src="images/confirm.png" alt="confirm" style="width: 30%" />
<img src="images/prompt.png" alt="prompt" style="width: 30%" />
</div>
</div>
<div class="slide">
<h1>
<a href="http://www.w3schools.com/js/js_obj_array.asp">Arrays</a>
<span class="readingsection">(7.4.2)</span>
</h1>
<pre class="syntaxtemplate js">
var <var>name</var> = []; <span class="comment">// empty array</span>
var <var>name</var> = [<var>value</var>, <var>value</var>, ..., <var>value</var>]; <span class="comment">// pre-filled</span>
<var>name</var>[<var>index</var>] = <var>value</var>; <span class="comment">// store element</span>
</pre>
<pre class="examplecode js">
var ducks = ["Huey", "Dewey", "Louie"];
var stooges = []; <span class="comment">// stooges.length is 0</span>
stooges[0] = "Larry"; <span class="comment">// stooges.length is 1</span>
stooges[1] = "Moe"; <span class="comment">// stooges.length is 2</span>
stooges[4] = "Curly"; <span class="comment">// stooges.length is 5</span>
stooges[4] = "Shemp"; <span class="comment">// stooges.length is 5</span>
</pre>
<ul>
<li>two ways to initialize an array</li>
<li><code>length</code> property (grows as needed when elements are added)</li>
</ul>
</div>
<div class="slide">
<h1>
Array <a href="http://www.w3schools.com/jsref/jsref_obj_array.asp">methods</a>
</h1>
<pre class="examplecode js">
var a = ["Stef", "Jason"]; <span class="comment">// Stef, Jason</span>
a.<em>push</em>("Brian"); <span class="comment">// Stef, Jason, Brian</span>
a.<em>unshift</em>("Kelly"); <span class="comment">// Kelly, Stef, Jason, Brian</span>
a.<em>pop</em>(); <span class="comment">// Kelly, Stef, Jason</span>
a.<em>shift</em>(); <span class="comment">// Stef, Jason</span>
a.<em>sort</em>(); <span class="comment">// Jason, Stef</span>
</pre>
<ul>
<li>array serves as many data structures: list, queue, stack, ...</li>
<li>methods:
<a href="http://www.w3schools.com/jsref/jsref_concat_array.asp"><code>concat</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_join.asp"><code>join</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_pop.asp"><code>pop</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_push.asp"><code>push</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_reverse.asp"><code>reverse</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_shift.asp"><code>shift</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_slice_array.asp"><code>slice</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_sort.asp"><code>sort</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_splice.asp"><code>splice</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_toString_array.asp"><code>toString</code></a>,
<a href="http://www.w3schools.com/jsref/jsref_unshift.asp"><code>unshift</code></a>
<ul>
<li><code>pu<span class="slightemphasis">sh</span></code> and <code>pop</code> add / remove from back</li>
<li><code>unshift</code> and <code><span class="slightemphasis">sh</span>ift</code> add / remove from front</li>
<li><code>shift</code> and <code>pop</code> return the element that is removed</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
Splitting strings:
<a href="http://www.w3schools.com/jsref/jsref_split.asp"><code>split</code></a> and <a href="http://www.w3schools.com/jsref/jsref_join.asp"><code>join</code></a>
</h1>
<pre class="examplecode js">
var s = "the quick brown fox";
var a = s.<em>split</em>(" "); <span class="comment">// ["the", "quick", "brown", "fox"]</span>
a.reverse(); <span class="comment">// ["fox", "brown", "quick", "the"]</span>
s = a.<em>join</em>("!"); <span class="comment">// "fox!brown!quick!the"</span>
</pre>
<ul>
<li>
<code>split</code> breaks apart a string into an array using a delimiter
<ul>
<li>
can also be used with <span class="term">regular expressions</span> (seen later)
</li>
</ul>
</li>
<li><code>join</code> merges an array into a single string, placing a delimiter between them</li>
</ul>
</div>
<div class="slide titleslide">
<h1>Event Handling & the DOM</h1>
<ol>
<li>
Key JavaScript Concepts
</li>
<li>
JavaScript Syntax
</li>
<li>
<strong>Event Handling & the DOM</strong>
</li>
<li>
Form control elements
</li>
<li>
Inspecting & altering the page
</li>
</ol>
</div>
<div class="slide">
<h1>
<a href="http://en.wikipedia.org/wiki/Event_driven_programming">Event-driven programming</a>
</h1>
<div class="centerfigure">
<img src="images/figure_3_event.png" alt="event" width="50%" />
</div>
<ul>
<li>JS programs have no <code>main()</code>; they respond to user actions called <span class="term">events</span></li>
<li><span class="term">event-driven programming</span>: writing programs driven by user events</li>
</ul>
</div>
<div class="slide">
<h1>
Buttons:
<a href="http://www.w3schools.com/tags/tag_button.asp"><code><button></code></a>
</h1>
<p class="description">
clickable UI control
</p>
<div class="example">
<pre class="examplecode html">
<em><button></em>Click me!<em></button></em>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>button's text appears inside tag; can also contain images</li>
<li>To make a responsive button or other UI control:
<ol>
<li>choose the control (e.g. button) and event (e.g. mouse click) of interest</li>
<li>write a JavaScript function to run when the event occurs</li>
<li>attach the function to the event on the control</li>
</ol>
</li>
</ul>
</div>
<div class="slide">
<h1>JavaScript functions</h1>
<pre class="syntaxtemplate js">
function <var>name</var>() {
<var>statement</var> ;
<var>statement</var> ;
...
<var>statement</var> ;
}
</pre>
<pre class="examplecode js">
function myFunction() {
alert("Hello!");
alert("How are you?");
}
</pre>
<ul>
<li>the above could be the contents of <code>example.js</code> linked to our HTML page</li>
<li>statements placed into functions can be evaluated in response to user events</li>
</ul>
</div>
<div class="slide">
<h1>Event handlers</h1>
<pre class="syntaxtemplate html">
<<var>element</var> <var>attributes</var> <em>onclick="<var>function</var>();"</em>>...
</pre>
<div class="example">
<pre class="examplecode html">
<button <em>onclick="myFunction();"</em>>Click me!</button>
</pre>
<div class="exampleoutput insertoutput">
<script type="text/javascript">
function myFunction() {
alert("Hello!");
alert("How are you?");
}
</script>
</div>
</div>
<ul>
<li>JavaScript functions can be set as <span class="term">event handlers</span>
<ul>
<li>when you interact with the element, the function will execute</li>
</ul>
</li>
<li><code><a href="http://www.w3schools.com/jsref/jsref_onclick.asp">onclick</a></code> is just one of many event HTML attributes we'll use</li>
</ul>
<hr />
<ul>
<li class="incremental">
but popping up an <code>alert</code> window is disruptive and annoying
<ul>
<li>
A better user experience would be to have the message appear on the page...
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
Document Object Model
(<a href="http://www.w3.org/TR/2004/PR-DOM-Level-3-Core-20040205/introduction.html">DOM</a>)
<span class="readingsection">(7.1.4)</span>
</h1>
<p class="description">
a hierarchical inventory of JavaScript objects representing all HTML elements on the page
</p>
<div class="rightfigure">
<img src="images/dom.png" alt="DOM" />
</div>
<ul>
<li>using JavaScript, we can inspect and alter the content and appearance of the page</li>
<li>to do this, we interact with JavaScript objects representing things on the page</li>
<li>examples:
<ul>
<li>ascertain whether a checkbox is checked or not</li>
<li>replace the text inside a particular paragraph with new text</li>
<li>change the color, font, size, box model properties, or any other styles of a particular element</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
DOM element objects
<span class="readingsection">(7.2.5)</span>
</h1>
<div class="figure" style="float: right; width: 50%">
<img src="images/figure_5_dom.png" alt="dom element objects" id="dom_element_objects_img" />
</div>
<ul>
<li>
every element on the page has a corresponding DOM object
</li>
<li>
access/modify the attributes of the DOM object with <code><var>objectName</var>.<var>attributeName</var></code>
</li>
<li>
can get an element using the <code>id</code> attribute: <code>document.getElementById('<var>some id</var>')</code>
</li>
</ul>
</div>
<div class="slide">
<h1>Accessing elements: <code>document.getElementById</code></h1>
<pre class="syntaxtemplate js">
var <var>name</var> = document.getElementById("<var>id</var>");
</pre>
<div class="example" style="float: left; width: 60%">
<pre class="examplecode html">
<img <em>id="doctor"</em> src="tenth_doctor.jpg"
alt="The Doctor" /> <br/>
<button onclick="regenerate();">
Regenerate!
</button>
</pre>
<pre class="examplecode examplecode2 js">
function regenerate() {
var img = <em>document.getElementById("doctor")</em>;
<em>img.src</em> = "eleventh_doctor.jpg";
}
</pre>
</div>
<script type="text/javascript">
function regenerate() {
var img = document.getElementById("doctor");
img.src = "images/eleventh_doctor.jpg";
}
</script>
<div class="exampleoutput" style="float: right; width: 30%; margin-left: 5%">
<img id="doctor" src="images/tenth_doctor.jpg" alt="The Doctor" /> <br/>
<button onclick="regenerate();">Regenerate!</button>
</div>
<ul style="clear: left;">
<li>
<code>document.getElementById</code> returns the DOM object for an element with a given <code>id</code>
</li>
<li>
can modify properties of the element to change content on screen
</li>
</ul>
</div>
<div class="slide">
<h1>
DOM object properties
<span class="readingsection">(7.2.5)</span>
</h1>
<pre class="examplecode html">
<div <em>id="main"</em> class="foo bar">
<p>Hello, <em>very</em> happy to see you!</p>
<img <em>id="icon"</em> src="images/borat.jpg" alt="Borat" />
</div>
</pre>
<pre class="examplecode js">
var <em>main_div</em> = document.getElementById('main');
var <em>icon_img</em> = document.getElementById('icon');
</pre>
<table class="standard">
<tr>
<th>
Property
</th>
<th>
Description
</th>
<th>
Example
</th>
</tr>
<tr>
<td>
<code>tagName</code>
</td>
<td>
element's HTML tag
</td>
<td>
<code>main_div.tagName</code> is <code>"DIV"</code>
</td>
</tr>
<tr>
<td>
<code>className</code>
</td>
<td>
CSS classes of element
</td>
<td>
<code>main_div.className</code> is <code>"foo bar"</code>
</td>
</tr>
<tr>
<td>
<code>innerHTML</code>
</td>
<td>
content inside element
</td>
<td>
<code>main_div.innerHTML</code> is <code>"\n <p>Hello, <em>ve...</code>
</td>
</tr>
<tr>
<td>
<code>src</code>
</td>
<td>
URL target of an image
</td>
<td>
<code>icon_img.src</code> is <code>"images/borat.jpg"</code>
</td>
</tr>
</table>
</div>
<div class="slide titleslide">
<h1>Form control elements</h1>
<ol>
<li>
Key JavaScript Concepts
</li>
<li>
JavaScript Syntax
</li>
<li>
Event Handling & the DOM
</li>
<li>
<strong>Form control elements</strong>
</li>
<li>
Inspecting & altering the page
</li>
</ol>
</div>
<div class="slide">
<h1>HTML form controls</h1>
<div style="float: right; border: 3px solid gray;"><img src="images/form.png" alt="HTML form" /></div>
<ul>
<li><span class="term">form controls</span>: a group of UI controls that accepts information from the user</li>
<li>information in form controls can be submitted to the server (not seen this quarter)</li>
<li>JavaScript can be used to create interactive controls</li>
</ul>
</div>
<div class="slide">
<h1>
Form controls: <a href="http://www.w3schools.com/tags/tag_input.asp"><code><input></code></a>
</h1>
<div class="example">
<pre class="examplecode html">
<input <em>type="text" value="Hello World!"</em> />
<input <em>type="checkbox"</em> id="foo" <em>checked="checked"</em> /> Foobar
<button>Booyah</button>
</pre>
<form action="http://www.google.com/search" class="exampleoutput insertoutput"></form>
</div>
<ul>
<li>many variants of the <code>input</code> tag—used to create different types of UI controls
<ul>
<li><code>type</code> can be <code>button</code>, <code>checkbox</code>, <code>file</code>, <code>hidden</code>, <code>password</code>, <code>radio</code>, <code>reset</code>, <code>submit</code>, <code>text</code>, ...</li>
<li>don’t forget! it’s a self-closing tag</li>
</ul>
</li>
<!-- <li><code>name</code> attribute determines name of query parameter passed to server</li> -->
<li><code>value</code> attribute specifies control’s initial text</li>
<li>
<p>all form control elements are inline-block elements</p>
<ul>
<li>(have full box model, including vertical margins)</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
Text fields:
<a href="http://www.w3schools.com/tags/tag_input.asp"><code><input></code></a>
<span class="readingsection">(6.2.1)</span>
</h1>
<p class="description">
a single-line text input field
</p>
<div class="example">
<pre class="examplecode html">
<input type="text" <em>size="10" maxlength="8"</em> /> NetID <br />
<input <em>type="password"</em> size="16" /> Password
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li><code>input</code> attributes: <code>disabled</code>, <code>maxlength</code>, <code>readonly</code>, <code>size</code>, <code>value</code></li>
<li><code>size</code> attribute controls onscreen width of text field</li>
<li><code>maxlength</code> limits how many characters user is able to type into field</li>
</ul>
</div>
<div class="slide">
<h1>
Text boxes:
<a href="http://www.w3schools.com/tags/tag_textarea.asp"><code><textarea></code></a>
<span class="readingsection">(6.2.2)</span>
</h1>
<p class="description">
a multi-line text input area
</p>
<div class="example">
<pre class="examplecode html">
<em><textarea rows="4" cols="20"></em>
Type your comments here.
<em></textarea></em>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>initial text is placed inside <code>textarea</code> tag (optional)</li>
<li>required <code>rows</code> and <code>cols</code> attributes specify height/width in characters</li>
<li>optional <code>readonly</code> attribute means text cannot be modified</li>
<li>common bug: whitespace & indentation shows up inside textareas!</li>
</ul>
</div>
<div class="slide">
<h1>
Checkboxes:
<a href="http://www.w3schools.com/tags/tag_input.asp"><code><input></code></a>
<span class="readingsection">(6.2.3)</span>
</h1>
<p class="description">
yes/no choices that can be checked and unchecked
</p>
<div class="example">
<pre class="examplecode html">
<input <em>type="checkbox"</em> id="lettuce" /> Lettuce
<input <em>type="checkbox" id="tomato" checked="checked"</em> /> Tomato
<input <em>type="checkbox"</em> id="pickles" checked="checked" /> Pickles
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>none, 1, or many checkboxes can be checked at same time</li>
<!-- <li>when sent to server, any checked boxes will be sent with value <code>on</code>:
<ul>
<li>
<pre>
http://info343.ischool.uw.edu/params.php<em>?tomato=on&pickles=on</em>
</pre>
</li>
</ul>
</li> -->
<li>use <code>checked="checked"</code> attribute in HTML to initially check the box</li>
</ul>
</div>
<div class="slide">
<h1>
Radio buttons:
<a href="http://www.w3schools.com/tags/tag_input.asp"><code><input></code></a>
<span class="readingsection">(6.2.4)</span>
</h1>
<p class="description">
sets of mutually exclusive choices (inline)
</p>
<div class="example">
<pre class="examplecode html">
<input <em>type="radio"</em> name="cc" value="visa" checked="checked" /> Visa
<input <em>type="radio"</em> name="cc" value="mastercard" /> MasterCard
<input <em>type="radio"</em> name="cc" value="amex" /> American Express
</pre>
<form action="http://info343.ischool.uw.edu/params.php" class="exampleoutput insertoutput">
<!-- <input type="submit" /> -->
</form>
</div>
<ul>
<li>grouped by <code>name</code> attribute (only one can be checked at a time)</li>
<li>must specify a <code>value</code> for each one or else it will be sent as value <code>on</code></li>
</ul>
</div>
<div class="slide">
<h1>
Text labels:
<a href="http://www.w3schools.com/tags/tag_label.asp"><code><label></code></a>
<span class="readingsection">(6.2.5)</span>
</h1>
<div class="example">
<pre class="examplecode html" style="font-size: smaller">
<em><label></em><input type="radio" name="cc" value="visa" checked="checked" /> Visa<em></label></em>
<em><label></em><input type="radio" name="cc" value="mastercard" /> MasterCard<em></label></em>
<em><label></em><input type="radio" name="cc" value="amex" /> American Express<em></label></em>
</pre>
<form action="http://info343.ischool.uw.edu/params.php" class="exampleoutput insertoutput">
<!-- <input type="submit" /> -->
</form>
</div>
<ul>
<li>associates nearby text with control, so you can click text to activate control</li>
<li>can be used with checkboxes or radio buttons</li>
<li><code>label</code> element can be targeted by CSS style rules</li>
<li>good thing to use!</li>
</ul>
</div>
<div class="slide">
<h1>
Drop-down list:
<a href="http://www.w3schools.com/tags/tag_select.asp"><code><select></code></a>,
<a href="http://www.w3schools.com/tags/tag_option.asp"><code><option></code></a>
<span class="readingsection">(6.2.6)</span>
</h1>
<p class="description">
menus of choices that collapse and expand (inline)
</p>
<div class="example">
<pre class="examplecode html">
<em><select name="favoritecharacter"></em>
<option>Jerry</option>
<option>George</option>
<option <em>selected="selected"</em>>Kramer</option>
<option>Elaine</option>
<em></select></em>
</pre>
<form action="http://info343.ischool.uw.edu/params.php" class="exampleoutput insertoutput">
<!-- <input type="submit" /> -->
</form>
</div>
<ul>
<li><code>option</code> element represents each choice</li>
<li><code>select</code> optional attributes: <code>disabled</code>, <code>multiple</code>, <code>size</code></li>
<li>optional <code>selected</code> attribute sets which one is initially chosen</li>
</ul>
</div>
<div class="slide">
<h1>Multi-item <code><select></code>s</h1>
<div class="example">
<pre class="examplecode html" style="font-size: smaller">
<select name="favoritecharacter<em>[]</em>" <em>size="3" multiple="multiple"</em>>
<option>Jerry</option>
<option>George</option>
<option>Kramer</option>
<option>Elaine</option>
<option <em>selected="selected"</em>>Newman</option>
</select>
</pre>
<form action="http://info343.ischool.uw.edu/params.php" class="exampleoutput insertoutput">
<!-- <input type="submit" /> -->
</form>
</div>
<ul>
<li>optional <code>multiple</code> attribute allows selecting multiple items with shift- or ctrl-click
<ul>
<li>
when submitting to a <code>.php</code> program, must declare parameter's name with <code>[]</code> if you allow multiple selections (PHP will turn this into an array of the selected options)
</li>
</ul>
</li>
<li><code>option</code> tags can be set to be initially <code>selected</code></li>
</ul>
</div>
<div class="slide">
<h1>
Option groups:
<a href="http://www.w3schools.com/tags/tag_optgroup.asp"><code><optgroup></code></a>
</h1>
<div class="example">
<pre class="examplecode html" style="font-size: smaller">
<select name="favoritecharacter">
<em><optgroup label="Major Characters"></em>
<option>Jerry</option>
<option>George</option>
<option>Kramer</option>
<option>Elaine</option>
<em></optgroup></em>
<em><optgroup label="Minor Characters"></em>
<option>Newman</option>
<option>Susan</option>
<em></optgroup></em>
</select>
</pre>
<form action="http://info343.ischool.uw.edu/params.php" class="exampleoutput insertoutput">
<!-- <input type="submit" /> -->
</form>
</div>
<ul>
<li>What should we do if we don't like the bold italic?</li>
</ul>
</div>
<div class="slide">
<h1>
Styling form controls
<span class="readingsection">(6.2.9)</span>
</h1>
<pre class="syntaxtemplate css">
<span class="placeholder">element</span><em>[<span class="placeholder">attribute</span>="<span class="placeholder">value</span>"]</em> {
<span class="placeholder">property</span> : <span class="placeholder">value</span>;
<span class="placeholder">property</span> : <span class="placeholder">value</span>;
...
<span class="placeholder">property</span> : <span class="placeholder">value</span>;
}
</pre>
<div class="example">
<pre class="examplecode css">
input<em>[type="text"]</em> {
background-color: yellow;
font-weight: bold;
}
</pre>
<div class="exampleoutput insertoutput">
<input type="text" value="Borat" style="background-color: yellow; font-weight: bold;" />
</div>
</div>
<ul>
<li><span class="term">attribute selector</span>: matches only elements that have a particular attribute value</li>
<li>useful for controls because many share the same element (<code>input</code>)</li>
</ul>
</div>
<div class="slide titleslide">
<h1>Inspecting & altering the page</h1>
<ol>
<li>
Key JavaScript Concepts
</li>
<li>
JavaScript Syntax
</li>
<li>
Event Handling & the DOM
</li>
<li>
<strong>Form control elements</strong>
</li>
<li>
Inspecting & altering the page
</li>
</ol>
</div>
<div class="slide">
<h1>DOM properties for form controls</h1>
<div class="example">
<pre class="examplecode html">
<input <em>id="sid"</em> type="text" size="7" maxlength="7" />
<input <em>id="frosh"</em> type="checkbox" checked="checked" /> Freshman?
</pre>
<pre class="examplecode js">
var <em>sid_textbox</em> = document.getElementById('sid');
var <em>frosh_checkbox</em> = document.getElementById('frosh');
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<table class="standard">
<tr>
<th>
Property
</th>
<th>
Description
</th>
<th>
Example
</th>
</tr>
<tr>
<td>
<code>value</code>
</td>
<td>
the text in an input control
</td>
<td>
<code>sid_textbox.value</code> could be <code>"1234567"</code>
</td>
</tr>
<tr>
<td>
<code>checked</code>
</td>
<td>
whether a box is checked
</td>
<td>
<code>frosh_checkbox.checked</code> is <code>true</code>
</td>
</tr>
<tr>
<td>
<code>disabled</code>
</td>
<td>
whether a control is disabled (boolean)
</td>
<td>
<code>frosh_checkbox.disabled</code> is <code>false</code>
</td>
</tr>
<tr>
<td>
<code>readOnly</code>
</td>
<td>
whether a text box is read-only
</td>
<td>
<code>sid_textbox.readOnly</code> is <code>false</code>
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>
Modifying text content: <code>value</code> vs. <code>innerHTML</code>
<span class="readingsection">(8.2.1)</span>
</h1>
<div class="example">
<pre class="examplecode html">
<p id="welcome">Go away, you're not welcome here.</p>
</pre>
<pre class="examplecode examplecode2 js">
var paragraph = document.getElementById("welcome");
<span class="comment">// change text inside an opening and closing tag</span>
<em>paragraph.innerHTML =</em> "Welcome to our site!";
</pre>
</div>
<div class="example">
<pre class="examplecode html">
<input type="text" id="username" value="mdoocy" />
</pre>
<pre class="examplecode examplecode2 js">
var textbox = document.getElementById("username");
<span class="comment">// change text inside text box</span>
<em>textbox.value =</em> "joshv";
</pre>
</div>
<p>Two ways to set the text of an element, depending on its type:</p>
<ul>
<li><code>innerHTML</code> : set text between opening and closing tags (most regular elements)</li>
<!-- <li><code>textContent</code> : text (no HTML tags) inside a node
<ul>
<li>
simpler than <code>innerHTML</code>, but not supported in IE6
</li>
</ul>
</li>-->
<li><code>value</code> : set text inside a text box (form control)
<ul>
<li>for form elements in general, sets the value that will be submitted for that element</li>
<li>on <code>textarea</code>s (which have opening and closing tags), only <code>value</code> works as expected in all browsers</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Modifying text content: Example</h1>
<div class="example">
<pre class="examplecode html">
<button onclick="swapText();">Click me!</button>
<span <em>id="output1"</em>><em>Hello</em></span>
<input <em>id="output2"</em> type="text" value="<em>Goodbye</em>" />
</pre>
<pre class="examplecode js">
function swapText() {
var <em>span</em> = document.getElementById("<em>output1</em>");
var <em>textbox</em> = document.getElementById("<em>output2</em>");
var <em>temp</em> = <em>span.innerHTML</em>;
<em>span.innerHTML</em> = <em>textbox.value</em>;
<em>textbox.value</em> = <em>temp</em>;
}
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>
can change the text inside most elements by setting the <code>innerHTML</code> property
</li>
<li>
for form controls, <code>value</code> must be used instead
</li>
</ul>
</div>
<div class="slide">
<h1>Abuse of <code>innerHTML</code></h1>
<pre class="examplecode js badcode">
<span class="comment">// bad style!</span>
var paragraph = document.getElementById("welcome");
paragraph.innerHTML = <em class="bad">"text and <a href="page.html">link</a>"</em>;
</pre>
<ul>
<li><code>innerHTML</code> can inject arbitrary HTML content into the page</li>
<li>however, this is prone to bugs and errors and is considered poor style</li>
<li>we forbid using <code>innerHTML</code> to inject HTML tags; <strong>inject plain text only</strong>
<ul>
<li>(later, we'll see a better way to inject new HTML elements into the page)</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
Adjusting styles with the DOM
<span class="readingsection">(8.2.2)</span>
</h1>
<div class="example">
<pre class="examplecode html">
<button onclick="makeRed();">Big Red</button>
</pre>
<pre class="examplecode examplecode2 js">
function makeRed() {
<em>this.style.color = "red";</em>
<em>this.style.fontSize = "200%";</em>
<em>this.style.fontWeight = "bold";</em>
}
</pre>
<div class="exampleoutput">
<button onclick="this.style.color = 'red'; this.style.fontWeight = 'bold'; this.style.fontSize = '200% !important';">Big Red</button>
</div>
</div>
<table class="standard">
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
<td>
<a class="popup" href="http://www.w3schools.com/HTMLDOM/dom_obj_style.asp"><code>style</code></a>
</td>
<td>
lets you set any CSS style property for an element
</td>
</tr>
</table>
<ul>
<li>contains same properties as in CSS, but with <code>camelCasedNames</code>
<ul>
<li>examples: <code>backgroundColor</code>, <code>borderLeftWidth</code>, <code>fontFamily</code></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Common DOM styling errors</h1>
<ul>
<li>many students forget to write <code>.style</code> when setting styles
<pre class="examplecode js">
var clickMe = document.getElementById("clickme");
<del>clickMe.color = "red";</del>
clickMe<em>.style</em>.color = "red";
</pre>
</li>
<li>style properties are capitalized <code>likeThis</code>, not <code>like-this</code>
<pre class="examplecode js">
<del>clickMe.style.font-size = "14pt";</del>
clickMe.style.<em>fontSize</em> = "14pt";
</pre>
</li>
<li>style properties must be set as strings, often with units at the end
<pre class="examplecode js">
<del>clickMe.style.width = 200;</del>
clickMe.style.width = <em>"200px"</em>;
clickMe.style.padding = <em>"0.5em"</em>;
</pre>
<ul>
<li>write exactly the value you would have written in the CSS, but in quotes</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>COMMON BUG: incorrect units on styles</h1>
<ul>
<li style="float: left; width: 40%; margin-top: 0; margin-bottom: 1em">
<p>in CSS, all lengths must have units:</p>
<pre class="examplecode css"><var>elem</var> {
font-size: <del>16</del>; <span class="comment">/* 16 of what? */</span>
font-size: <ins>16em</ins>;
background-position: <ins>50px 25%</ins>;
}
</pre>
</li>
<li style="float: left; width: 50%; margin-left: 5%; margin-top: 0; margin-bottom: 1em">
<p>setting DOM properties to CSS strings:</p>
<pre class="examplecode js"><var>elem</var>.style.fontSize = '<del>16</del>'; <span class="comment">// 16 of what?</span>
<var>elem</var>.style.fontSize = '<ins>16em</ins>';
<var>elem</var>.style.backgroundPosition = '<ins>50px 25%</ins>';
</pre>
</li>
</ul>
<pre class="examplecode js" style="clear: left">
var x = 50, y = 25;
theDiv.style.left = <em>x</em>; <span class="comment">// WRONG: No units! Should be e.g. <em>x + "px"</em></span>
theDiv.style.backgroundPosition = <em>x + "px" + y + "%"</em>; <span class="comment">// WRONG: Missing space!</span>
<span class="comment">// (string on the right side is: '50px25%')
</pre>
<ul>
<li><strong>Code will fail silently and style will not be set</strong></li>
<!-- <li><span class="term">Detection</span>: use Firebug debugger, step through code and look at <code>style</code></li> -->
<li><span class="term">Detection</span>: use an <code>alert</code> immediately after style property is set
<pre class="examplecode js">
theDiv.style.left = 100; <span class="comment">// OOPS!</span>
<span class="emphasizedcode">alert("div left is " + theDiv.style.left);</span>
</pre>
Ensure the alerted value has units!
</li>
</ul>
</div>
<div class="slide">
<h1>Debugging: <code>alert()</code> and <code>console.log()</code></h1>
<pre class="examplecode js">
var x = ' foo! ';
var y = document.getElementById('bar');
<em>alert('x = "' + x + '"')</em>; <span class="comment">// x = " foo! "</span>
<em>console.log('y: ' + y)</em>; <span class="comment">// outputs the DOM object representing 'bar'</span>
</pre>
<ul>
<li><code>alert</code> pauses code execution until dialog is dismissed</li>
<li><code>console.log</code> causes the message to appear on the browser’s error console</li>
<li><code>alert()</code> won’t work for an array or object; use <code>console.log</code> to output an item you can interact with in the console</li>
<li>tip: surround values with quotes to show whitespace!</li>
</ul>
</div>
<!--#include virtual="../s5/commonbottom.html" -->