<?xml version="1.0"?>
<?xml-stylesheet type="text/xml" href="presenter.xsl"?>
<slideshow>
	<title>JavaScript</title>
	<slide>
		<title>JavaScript</title>
		<body>
			<p>By Karl Voelker</p>
		</body>
	</slide>

	<slide><title>Introduction</title><body>
		<p>JavaScript:</p>
		<ul>
		<li>is the original implementation of the ECMAScript 
			standard,</li>
		<li>looks a bit like, but is otherwise unrelated to, Java,
			</li>
		<li>is dynamically-typed,</li>
		<li>is object-oriented (but strangely), and</li>
		<li>has first-class functions.</li>
		</ul>
	</body></slide>
	
	<slide><title>Web Browsers</title><body>
		<p>The most common use of JavaScript is in web browsers, 
			but:</p>
		<ul>
		<li>The language has no web-specific features.</li>
		<li>Browser interaction is done through 
			libraries provided by the browser.</li>
		</ul>
		<p>We will look at the language first.</p>
	</body></slide>

	<slide><title>Literal Values</title><body>
		<div class='col'>
		<dl>
		<dt>Booleans</dt>
		<dd><tt>true</tt>, <tt>false</tt></dd>
		<dt>Numbers</dt>
		<dd><tt>0</tt>, <tt>1.2</tt>, <tt>3.4e5</tt>, <tt>-6</tt></dd>
		<dt>Strings</dt>
		<dd><tt>"foo\n"</tt>, <tt>'bar\n'</tt></dd>
		<dt>Regular expressions</dt>
		<dd><tt>/foo(by)?/</tt>, <tt>/ba[rz]/</tt></dd>
		</dl>
		</div>
		<div class='col'>
		<dl>
		<dt>Array</dt>
		<dd><tt>[1, 2, 3]</tt>, <tt>[1, "foo", 3]</tt></dd>
		<dt>Object</dt>
		<dd><tt>{foo: 1, bar: "two"}</tt></dd>
		<dt>Functions</dt>
		<dd><tt>function() { return "foo" }</tt></dd>
		</dl>
		</div>
	</body></slide>

	<slide><title>Numeric and logical operators</title><body>
		<p>Numeric and logical operators are basically the same 
			as in C/C++/Java:</p>
		<table>
		<tr><td><tt>+ - * / %</tt></td><td>arithmetic</td></tr>
		<tr><td><tt>&amp;&amp; || ^ !</tt></td>
			<td>logical</td></tr>
		<tr><td><tt>== != &lt; &gt; &lt;= &gt;=</tt></td>
			<td>comparison</td></tr>
		</table>
	</body></slide>

	<slide><title>String operators</title><body>
		<p>Some operators are overloaded to work on strings:</p>
		<table>
		<tr><td><tt>+</tt></td><td>concatenation</td></tr>
		<tr><td><tt>== != &lt; &gt; &lt;= &gt;=</tt></td>
			<td>comparison</td></tr>
		</table>
		<p>Other numeric and logical operators cause a 
			conversion to Number or Boolean:</p>
		<table>
		<tr><td><tt>- * / %</tt></td><td>arithmetic</td></tr>
		<tr><td><tt>&amp;&amp; || ^ !</tt></td>
			<td>logical</td></tr>
		</table>
	</body></slide>

	<slide><title>String length</title><body>
		<p>To get the length of a string, use <tt>.length</tt>.</p>
		<p>This is not a method call; it's a magical property:</p>
		<pre>x = "foo";
xlen = x.length;   // correct
xlen = x.length(); // incorrect</pre>
	</body></slide>

	<slide><title>Regular Expressions: Matching</title><body>
		<pre>//returns null:
"foo".match(/bar/);

//returns ["f"]:
"foo".match(/f/);

// returns ["foo", "f", "oo"]
"foo".match(/(f)(o+)/);</pre>
	</body></slide>

	<slide><title>Regular Expressions: Replacing</title><body>
		<pre>// returns "foo"
"foo".replace(/x/, "g");

// returns "goo"
"foo".replace(/f/, "g");

// returns "foo 1"
"foo 4".replace(/\d+/, 
    function (s) { return s % 3 });</pre>
	</body></slide>

	<!--

	* Useful array and object functions

	-->

	<slide><title>Control Structures: "For Each"</title><body>
		<p>In JavaScript's "for each" construct, the loop variable takes on the 
			key (or index) at each step, not the value:</p>
		<pre>x = {foo: 3, bar: 2};
for (k in x) {
	// k will be "foo", then "bar"
}

y = [5, 6];
for (k in y) {
	// k will be 0, then 1
}</pre>
	</body></slide>

	<slide><title>Other Control Structures</title><body>
		<p>These control structures work just like in C/C++/Java:</p>
		<ul>
		<li><tt>for</tt> (when not used as "for each")</li>
		<li><tt>while</tt></li>
		<li><tt>if</tt>/<tt>else</tt></li>
		</ul>
	</body></slide>

	<slide><title>Variables</title><body>
		<p>By default, any variable you use is global. To declare a lexically-scoped 
			variable:</p>
		<p><tt>var x;</tt></p>
		<p><tt>var y = 5;</tt></p>
	</body></slide>

	<slide><title>Semicolons</title><body>
		<p>Semicolons are almost never required.</p>
	</body></slide>

	<slide><title>Web Browsers</title><body>
		<p>There are a few ways JavaScript can be included 
		in a web page:</p>
		<dl>
		<dt>Script file</dt>
		<dd><show-xml><script src="foo.js" 
			type="text/javascript"/></show-xml></dd>
		<dt>Embedded</dt>
		<dd><tt><show-xml><script 
		type="text/javascript"
		>function foo() { ... }</script></show-xml></tt></dd>
		<dt>Hyperlink</dt>
		<dd><tt><show-xml><a href="javascript:foo()">Foo</a></show-xml>
		</tt></dd>
		<dt>Event handler</dt>
		<dd><tt>
		<show-xml><button onclick="foo()">Foo</button></show-xml></tt>
		</dd>
		</dl>
	</body></slide>

	<slide><title>Object-Orientation</title><body>
		<p>JavaScript is object-oriented, but has no classes.</p>
		<p>An object may be given a prototype, which is just 
			another object.</p>
		<p>If you look for a method or attribute in an object, and 
			it doesn't have it, it will ask its prototype.</p>
	</body></slide>
	
	<slide><title>Learning More</title><body>
		<p>The Mozilla Developer Center has some good references:</p>
		<p><a href='http://developer.mozilla.org/en/docs/JavaScript'>
		http://developer.mozilla.org/en/docs/JavaScript</a></p>
	</body></slide>

</slideshow>
