Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
291 lines (221 sloc) 7.63 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"/>
<style>#presentation {background-color: #7F0BA2;}</style>
</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 to read</p>
<pre contenteditable>var heroes = [ 'Anita Borg',
'Grace Hopper',
'Ada Lovelace',
'Emmy Noether'];</pre>
<p>Old school (with constructor)</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">
<p>Use brackets to retrieve values based on index</p>
<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] = 'Marie Curie';</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Arrays are Objects</h1></header>
<section class="content">
<p>Arrays are Objects</p>
<p>Arrays are loosely typed</p>
<p>Like all objects, arrays have properties</p>
<pre contenteditable>var arrayItemCount = myArrayName.length;</pre>
<p>Like all objects, arrays have methods</p>
<pre contenteditable>myArrayName.push('Estelle');</pre>
<p class="explain">Like all Objects, Arrays have built in functions, or "methods" they inherit from the Object object.</p>
</section>
</div>
<div class="slide normal"><section class="content">
<h1>Mutator Methods</h1>
<dl>
<dt>pop</dt>
<dd>Removes the last element from an array and returns that element.</dd>
<dt>push</dt>
<dd>Adds one or more elements to the end of an array and returns the new length of the array.
</dd>
<dt>reverse</dt>
<dd>Reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first.
</dd>
<dt>shift</dt>
<dd>Removes the first element from an array and returns that element.
</dd>
<dt>sort</dt>
<dd>Sorts the elements of an array.
</dd>
<dt>splice</dt>
<dd>Adds and/or removes elements from an array.</dd>
<dt>unshift</dt>
<dd>Adds one or more elements to the front of an array and returns the new length of the array.
</dd>
</dl>
<h1>Accessor Methods</h1>
<dl>
<dt>concat</dt>
<dd>Returns a new array comprised of this array joined with other array(s) and/or value(s).</dd>
<dt>join</dt>
<dd>Joins all elements of an array into a string.</dd>
<dt>slice</dt>
<dd>Extracts a section of an array and returns a new array.</dd>
</dl>
</section>
</div>
<div class="slide normal">
<header><h1>Array Methods: Adding Items</h1></header>
<section class="content">
<pre contenteditable>heroes[heroes.length] = 'Hedy Lamar';</pre>
<p>Add to end:</p>
<pre contenteditable> heroes.push('Barbara Liskov');
heroes<span class="imp">.push(</span>'Fran Allen', 'Valerie Aurora'<span class="imp">)</span>;</pre>
<p>Add to beginning</p>
<pre contenteditable>heroes<span class="imp">.unshift(</span>'Desi', 'Nola'<span class="imp">)</span>;</pre>
<p>Adding in the middle (based on index)</p>
<pre contenteditable>
heroes.splice(2,0,'Sarah', 'Adele');
</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. Make them the last two items.</li>
<li>What is the value of the 3rd item now?</li>
</ul>
</section>
</div>
<div class="slide normal">
<header><h1>Heroes Cheatsheet</h1></header>
<section class="content">
<ul class="explain">
<li>Anita Borg</li>
<li> Grace Hopper</li>
<li> Barbara Liskov, Fran Allen (Turing Award winners) </li>
<li> Emmy Noether (nobel prize in Math, tutored Einstein)</li>
<li> Adele Goldberg (one of the developers of SmallTalk)</li>
<li> Ada Lovelace</li>
<li> Marie Curie</li>
<li> Hedy Lamar (holds a patent wireless networking feature
proposed for encoding messages during WWII)</li>
<li> Valerie Aurora (Linux kernel hacker)</li>
<li> Kimberly Bryant (Black Girls Code)</li>
<li> Desi Macadam, Nola Stowe (DevChix) </li>
<li> Sarah Allen (Came up with this list)</li>
</ul>
</section>
</div>
<div class="slide normal">
<header><h1>Objects</h1></header>
<section class="content">
<ul>
<li>Everything outside of primitive types are objects</li>
<li>Objects are mutable</li>
<li>Objects are a container of properties (key/value pairs)</li>
</ul>
</section>
</div>
<div class="slide normal">
<header><h1>Objects</h1></header>
<section class="content">
<p>Creating objects with object literal syntax.</p>
<pre contenteditable>var class = {
teacher: "Estelle",
subject: "JavaScript",
hours: 6
};</pre>
<p>Accessing/setting Object properties.</p>
<pre contenteditable>class.teacher = "Estelle"
class[subject] = "JavaScript"
class.hours = 6</pre>
</section>
</div>
<div class="slide normal">
<header><h1><code>document</code> and <code>window</code></h1></header>
<section class="content">
<p>When setting variables in global scope, they will be set on the window object</p>
<pre contenteditable>var cat = "Sassafrass";
console.log(cat);
console.log(window.cat);
</pre>
<p>When retrieving DOM nodes from a web page, you will be accessing document objects</p>
<p>Find a node, then access the objects properties</p>
<pre contenteditable>var counter = document.getElementById('presentation-counter');
console.log(counter.innerHTML);
console.log(counter.nextElementSibling);
console.log(counter.offsetTop);</pre>
</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" style="display: none;"></iframe>
</div>
<script src="slides.js"></script>
</body> </html>