[an error occurred while processing this directive]

<div class="slide titleslide">
	<h1>9.1: Global DOM Objects</h1>

	<ul>
		<li>
			<strong>9.1: Global DOM Objects</strong>
		</li>
		<li>
			9.2: DOM Element Objects
		</li>
		<li>
			9.3: The DOM Tree
		</li>
	</ul>
</div>



<div class="slide">
	<h1>The six global DOM objects</h1>

	<p>Every Javascript program can refer to the following global objects:</p>

	<table class="standard">
		<tr>
			<th>name</th><th>description</th>
		</tr>

		<tr>
			<td>
				<code>document</code>
			</td>
			<td>
				current HTML page and its content
			</td>
		</tr>

		<tr>
			<td>
				<code>history</code>
			</td>
			<td>
				list of pages the user has visited
			</td>
		</tr>

		<tr>
			<td>
				<code>location</code>
			</td>
			<td>
				URL of the current HTML page
			</td>
		</tr>

		<tr>
			<td>
				<code>navigator</code>
			</td>
			<td>
				info about the web browser you are using
			</td>
		</tr>

		<tr>
			<td>
				<code>screen</code>
			</td>
			<td>
				info about the screen area occupied by the browser
			</td>
		</tr>

		<tr>
			<td>
				<code>window</code>
			</td>
			<td>
				the browser window
			</td>
		</tr>
	</table>
</div>



<div class="slide">
	<h1>The <code>window</code> object</h1>

	<p class="description">
		the entire browser window; the top-level object in DOM hierarchy
	</p>

	<ul>
		<li>technically, all global code and variables become part of the <code>window</code> object</li>

		<li>properties:
			<ul>
				<li>
				<code>document</code>, 
				<code>history</code>, 
				<code>location</code>, 
				<code>name</code>
				</li>
			</ul>
		</li>

		<li>methods:
			<ul>
				<li>
					<code>alert</code>, 
					<code>confirm</code>, 
					<code>prompt</code> (popup boxes)
				</li>

				<li>
					<code>setInterval</code>, 
					<code>setTimeout</code>
					<code>clearInterval</code>, 
					<code>clearTimeout</code> (timers)
				</li>

				<li>
					<code>open</code>, 
					<code>close</code> (popping up new browser windows)
				</li>

				<li>
					<code>blur</code>, 
					<code>focus</code>, 
					<code>moveBy</code>, 
					<code>moveTo</code>, 
					<code>print</code>, 
					<code>resizeBy</code>, 
					<code>resizeTo</code>, 
					<code>scrollBy</code>, 
					<code>scrollTo</code>
				</li>
			</ul>
		</li>
	</ul>
</div>



<div class="slide">
	<h1>Popup windows with <code>window.open</code></h1>
	
	<pre class="examplecode js">
<em>window.open</em>(&quot;http://foo.com/bar.html&quot;, &quot;My Foo Window&quot;,
            &quot;width=900,height=600,scrollbars=1&quot;);
</pre>

	<hr class="spacedrule" />

	<ul>
		<li><code>window.open</code></a> pops up a new browser window</li>
		<li>THIS method is the cause of all the terrible popups on the web!</li>
		<li>some popup blocker software will prevent this method from running</li>
	</ul>
</div>



<div class="slide">
	<h1>The <code>document</code> object</h1>

	<p class="description">
		the current web page and the elements inside it
	</p>

	<ul>
		<li>properties:
			<ul>
				<li>
				<code>anchors</code>, 
				<code>body</code>, 
				<code>cookie</code>, 
				<code>domain</code>, 
				<code>forms</code>, 
				<code>images</code>, 
				<code>links</code>, 
				<code>referrer</code>, 
				<code>title</code>, 
				<code>URL</code>
				</li>
			</ul>
		</li>

		<li>methods:
			<ul>
				<li><code>getElementById</code></li>
				<li>
					<code>getElementsByName</code>,
					<code>getElementsByTagName</code>
				</li>
				<li>
					<code>querySelector</code>,
					<code>querySelectorAll</code>
				</li>
				<li>
					<code>close</code>, 
					<code>open</code>, 
					<code>write</code>, 
					<code>writeln</code>
				</li>
			</ul>
		</li>
	</ul>
</div>



<div class="slide">
	<h1>The <code>location</code> object</h1>

	<p class="description">
		the URL of the current web page
	</p>

	<ul>
		<li>properties:
			<ul>
				<li>
				<code>host</code>, 
				<code>hostname</code>, 
				<code>href</code>, 
				<code>pathname</code>, 
				<code>port</code>, 
				<code>protocol</code>, 
				<code>search</code>
				</li>
			</ul>
		</li>

		<li>methods:
			<ul>
				<li>
				<code>assign</code>, 
				<code>reload</code>, 
				<code>replace</code>
				</li>
			</ul>
		</li>
	</ul>

</div>



<div class="slide">
	<h1>The <code>navigator</code> object</h1>

	<p class="description">
		information about the web browser application
	</p>

	<ul>
		<li>properties:
			<ul>
				<li>
					<code>appName</code>, 
					<code>appVersion</code>, 
					<code>browserLanguage</code>, 
					<code>cookieEnabled</code>, 
					<code>platform</code>, 
					<code>userAgent</code>
				</li>
			</ul>
		</li>

		<li>
			Some web programmers examine the <code>navigator</code> object to see what browser is being used, and write browser-specific scripts and hacks:

			<pre class="examplecode js">
if (navigator.appName === &quot;Microsoft Internet Explorer&quot;) { ...
</pre>

			<ul>
				<li>(this is poor style; you usually do not need to do this)</li>
			</ul>
		</li>
	</ul>
</div>



<div class="slide">
	<h1>The <code>screen</code> object</h1>

	<p class="description">
		information about the client's display screen
	</p>

	<ul>
		<li>properties:
			<ul>
				<li>
					<code>availHeight</code>, 
					<code>availWidth</code>, 
					<code>colorDepth</code>, 
					<code>height</code>, 
					<code>pixelDepth</code>, 
					<code>width</code>
				</li>
			</ul>
		</li>
	</ul>
</div>



<div class="slide">
	<h1>The <code>history</code> object</h1>

	<p class="description">
		the list of sites the browser has visited in this window
	</p>

	<ul>
		<li>properties:
			<ul>
				<li>
					<code>length</code>
				</li>
			</ul>
		</li>

		<li>methods:
			<ul>
				<li>
				<code>back</code>, 
				<code>forward</code>, 
				<code>go</code>
				</li>
			</ul>
		</li>
		<li>sometimes the browser won't let scripts view <code>history</code> properties, for security</li>
	</ul>
</div>



<div class="slide titleslide">
	<h1>Timers</h1>

	<ul>
		<li>
			11.1: Event-Handling
			<ul>
				<li><strong>11.1.6 Timer Events</strong></li>
			</ul>
		</li>
		<li>
			11.2: Case Study: Multiplication Quiz
		</li>
	</ul>
</div>



<div class="slide">
	<h1>
		Setting a timer	
	</h1>

	<div class="topfigure" style="width: 12%">
		<img src="images/timer.gif" alt="timer" style="width: 100%" />
	</div>

	<table class="standard">
		<tr>
			<th>
				method
			</th>
			<th>
				description
			</th>
		</tr>

		<tr>
			<td>
				<code>setTimeout</a>(<var>function</var>,&nbsp;<var>delayMS</var>);</code>
			</td>
			<td>
				arranges to call given function after given delay in ms
			</td>
		</tr>

		<tr>
			<td>
				<code>setInterval</a>(<var>function</var>,&nbsp;<var>delayMS</var>);</code>
			</td>
			<td>
				arranges to call function repeatedly every <var>delayMS</var> ms
			</td>
		</tr>

		<tr>
			<td>
				<code>clearTimeout</a>(<var>timerID</var>);</code> <br />
				<code>clearInterval</a>(<var>timerID</var>);</code>
			</td>
			<td>
				stops the given timer
			</td>
		</tr>
	</table>

	<ul>
		<li>
			both <code>setTimeout</code> and <code>setInterval</code> return an ID representing the timer
			<ul>
				<li>
					this ID can be passed to <code>clearTimeout</code>/<code>Interval</code> later to stop the timer
				</li>
			</ul>
		</li>
	</ul>
</div>



<div class="slide">
	<h1>
		<code>setTimeout</code> example
	</h1>

	<div class="example">
		<pre class="examplecode html">
&lt;button id=&quot;clickme&quot;&gt;Click me!&lt;/button&gt;
&lt;span <em>id=&quot;output&quot;</em>&gt;&lt;/span&gt;
</pre>

		<pre class="examplecode examplecode2 js">
window.onload = function() {
	document.getElementById("clickme").onclick = delayedMessage;
};

function delayedMessage() {
	document.getElementById(&quot;output&quot;).innerHTML = &quot;Wait for it...&quot;;
	<em>setTimeout(sayBooyah, 5000)</em>;
}

function sayBooyah() {   <span class="comment">// called when the timer goes off</span>
	document.getElementById(&quot;output&quot;).innerHTML = &quot;BOOYAH!&quot;;
}
</pre>

		<div class="exampleoutput">
			<button onclick="document.getElementById('output').innerHTML = 'Wait for it...'; setTimeout(&quot;document.getElementById('output').innerHTML = 'BOOYAH!';&quot;, 5000)">Click me!</button>
			<span id="output"></span>
		</div>
	</div>
</div>



<div class="slide">
	<h1>
		<code>setInterval</code> example
	</h1>

	<div class="example">
		<pre class="examplecode examplecode2 js">
<em>var timer = null;</em>  <span class="comment">// stores ID of interval timer</span>

function delayMsg2() {
	if (timer === null) {
		<em>timer = setInterval(rudy, 1000)</em>;
	} else {
		<em>clearInterval(timer)</em>;
		timer = null;
	}
}

function rudy() {   <span class="comment">// called each time the timer goes off</span>
	document.getElementById(&quot;output&quot;).innerHTML += &quot; Rudy!&quot;;
}
</pre>

		<div class="exampleoutput">
			<script type="text/javascript">
				window.timer = null;

				window.delayMsg2 = function() {
					if (timer == null) {
						timer = setInterval(rudy, 1000);
					} else {
						clearInterval(timer);
						timer = null;
					}
				};

				window.rudy = function() {
					document.getElementById("output2").innerHTML += " Rudy!";
				};
			</script>

			<button onclick="delayMsg2();">Click me!</button>
			<span id="output2"></span>
		</div>
	</div>
</div>



<div class="slide">
	<h1>Passing parameters to timers</h1>

	<div class="example">
		<pre class="examplecode js">
function delayedMultiply() {
	<span class="comment">// 6 and 7 are passed to multiply when timer goes off</span>
	setTimeout(multiply, 2000<em>, 6, 7</em>);
}
function multiply(<em>a, b</em>) {
	alert(a * b);
}
</pre>

		<div class="exampleoutput insertoutput">
			<button onclick="delayedMultiply();">Click me</button>
		</div>
	</div>

	<ul>
		<li>any parameters after the delay are eventually passed to the timer function
			<ul>
				<li>doesn't work in IE; must create an intermediate function to pass the parameters</li>
			</ul>
		</li>
		<li>
			why not just write this?
			<pre class="examplecode js">
setTimeout(<em>multiply(6 * 7)</em>, 2000);
</pre>
		</li>
	</ul>
</div>



<div class="slide">
	<h1>Common timer errors</h1>

	<ul>
		<li>
			many students mistakenly write <code>()</code> when passing the function

			<pre class="examplecode js">
<del>setTimeout(booyah(), 2000);</del>
setTimeout(<em>booyah</em>, 2000);

<del>setTimeout(multiply(num1 * num2), 2000);</del>
setTimeout(<em>multiply</em>, 2000<em>, num1, num2</em>);
</pre>

			<ul>
				<li>what does it actually do if you have the <code>()</code> ?</li>
				<li class="incremental">it calls the function immediately, rather than waiting the 2000ms!</li>
			</ul>
		</li>
	</ul>
</div>



[an error occurred while processing this directive]