Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
142 lines (112 sloc) 3.6 KB
<!doctype HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Intro to JavaScript: Part 2</title>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono|Tangerine" rel="stylesheet" type="text/css" />
<link href="css.css" rel="stylesheet"/>
</head>
<body>
<div id="topinfo">
</div>
<div id="info">
<p>Press <span class="key">&rarr;</span> key to advance.
Zoom in/out: <span class="key">Ctrl or Command</span> + <span class="key">+/-</span>.
</p>
</div>
<div id="presentation">
<div id="presentation-counter"></div>
<div id="slides">
<div class="slide intro">
<header><hgroup>
<h1>Basic JavaScript<br>Part 2: Arrays</h1>
<h2>Estelle Weyl</h2>
</hgroup></header>
</div>
<div class="slide normal">
<header><h1>Arrays</h1></header>
<section class="content">
<pre contenteditable>var browsers = <span class="imp">[</span>'Safari', 'Chrome', 'Explorer', 'FireFox', 'Opera'<span class="imp">]</span>;
var random = <span class="imp">[</span>'shoe',27,null,<span class="imp">[42,17,19]</span>,Math.PI<span class="imp">]</span>;
</pre>
<p>Easier (or harder) to read</p>
<pre contenteditable>var heroes = [ 'Anita Borg',
'Barbara Liskov',
'Fran Allen',
'Emmy Noether'];</pre>
<p>Old school</p>
<pre contenteditable>
var browsers = <span class="imp">new Array(</span>'Safari', 'Chrome', 'Explorer', 'FireFox', 'Opera'<span class="imp">)</span>;
</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Arrays &rarr; zero indexed</h1></header>
<section class="content">
<pre contenteditable>arrayName[index]</pre>
<p>First Item</p>
<pre contenteditable>heroes[0];</pre>
<p>Last Item</p>
<pre contenteditable>heroes[heroes.length - 1];</pre>
<p>Add item</p>
<pre contenteditable>heroes[heroes.length] = 'Adele Goldberg';</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Array Methods: Adding Items</h1></header>
<section class="content">
<pre contenteditable>heroes[heroes.length] = 'Grace';</pre>
<p>Add to end:</p>
<pre contenteditable> heroes.push('Rick');
heroes<span class="imp">.push(</span>'Ada', 'Marie', 'Hedy'<span class="imp">)</span>;</pre>
<p>Add to beginning</p>
<pre contenteditable>heroes<span class="imp">.unshift(</span>'Valerie', 'Kimberly'<span class="imp">)</span>;</pre>
<p>Adding in the middle (based on index)</p>
<pre contenteditable>
heroes.splice(2,0,'Desi', 'Nola');
</pre>
<small>Note: 0 is # to delete</small>
</section>
</div>
<div class="slide normal">
<header><h1>Array Methods: Deleting Items</h1></header>
<section class="content">
<p>Delete last item</p>
<pre contenteditable>
var lastItem = heroes.pop();
</pre>
<p>Delete first item</p>
<pre contenteditable>
var firstItem = heroes.shift();
</pre>
<p>Delete based on index</p>
<pre contenteditable>
var deletedItem = heroes.splice(2,1);
</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Exercise</h1></header>
<section class="content">
<ul>
<li>Create an array with 6 items</li>
<li>Remove the 5th item.</li>
<li>Make the 5th item the first item</li>
<li>Remove the last item</li>
<li>Make the last item the 2nd item</li>
<li>Remove the 3rd and 4th items the last two items</li>
<li>What is the value of the 3rd item now?</li>
</ul>
</section>
</div>
<div class="slide intro">
<header><h1>Next</h1></header>
<section class="content">
<a href="part_03.html">Go</a>
</section>
</div>
</div>
<iframe src="console/index.html" id="console" frameborder="0"></iframe>
</div>
<script src="slides.js"></script>
</body> </html>