Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

359 lines (291 sloc) 9.63 kB
<!doctype HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Intro to JavaScript: Part 6</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>
.black span {background-color: #333; color: #ddd; padding: 3px 5px;}
#box {font-size: smaller;}
#presentation {background-color: #A27F0B;}
</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 JS: VI</h1>
<h2>Estelle Weyl</h2>
<h3>Introducing the DOM</h3>
</hgroup></header>
</div>
</section>
</div>
<div class="slide normal">
<header><h1>Uses of JS in Websites</h1></header>
<section class="content">
<ul>
<li>Interactive effects</li>
<li>Dynamically modifying web pages</li>
<li>Changing the HTML the browser originally downloaded</li>
</ul>
<p>What we're going to do:</p>
<ul>
<li>Identify an element on the page</li>
<li>Do something to the element</li>
</ul>
</section>
</div>
<div class="slide normal">
<header><h1>The DOM</h1></header>
<section class="content">
<pre contenteditable>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;A Basic Web Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;
&lt;strong&gt;important text&lt;/strong&gt; and
&lt;a href=&quot;#&quot;&gt;a link&lt;/a&gt;.
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<small>ancestor | parent | node | textnode | sibling | child | descendent</small>
</section>
</div>
<div class="slide normal">
<header><h1>DOM Tree</h1></header>
<section class="content">
<pre contenteditable class="black">
<span>html</span>
______|____________
| |
<span>head</span> <span>body</span>
______|____ |
| | |
<span>title</span> <span>meta</span> <span>p</span>
| ______|_________
| | | | |
A basic web page <span>strong</span> and <span>a</span> .
| |
| |
important text a link
</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Selecting an element</h1></header>
<section class="content">
<pre contenteditable>
document.getElementBy<strong>Id</strong>();
document.getElement<strong>s</strong>By<strong>TagName</strong>();
document.getElementsBy<strong>ClassName</strong>(); //IE9
document.query<strong>Selector</strong>(); //IE8
document.querySelector<strong>All</strong>(); //IE8
</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Test Page</h1></header>
<section class="content">
<pre contenteditable>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;A Basic Web Page&lt;/title&gt;
&lt;/head&gt;
&lt;body
&lt;div id=&quot;box&quot;&gt;
&lt;ul&gt;
&lt;li&gt;Some &lt;strong&gt;imp text&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;And &lt;a href=&quot;http://x.com&quot;&gt;a link&lt;/a&gt;.&lt;/li&gt;
&lt;li class=&quot;cl&quot;&gt;With a class&lt;/li&gt;
&lt;li class=&quot;cl&quot;&gt;another classed&lt;/li&gt;
&lt;li class=&quot;di&quot;&gt;Has an ID&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Play with Page in Console!!!</h1></header>
<section class="content">
<pre contenteditable>
var box = document.getElementById('box');
var box = document.querySelector('#box');
var lis = box.getElementsByTagName('li');
var lis = box.querySelectorAll('li');
var classed = lis.getElementsClassName('cl');
var classed = box.querySelectorAll('.cl');
lis.length?
box.length?
classed.length?
</pre>
<div id="box">
<ul>
<li>Some <strong>imp text</strong></li>
<li>And <a href="http://x.com">a link</a>.</li>
<li class="cl">With a class</li>
<li class="cl">another classed</li>
<li class="di">Has an ID</li>
</ul>
</div>
</section>
</div>
<div class="slide normal">
<header><h1>Child, Parent, Siblings</h1></header>
<section class="content">
<pre contenteditable class="black">
<span>html</span> (parent)
______|____________
| |
<span>head</span> siblings <span>body</span> (children)
</pre>
<pre contenteditable class="black">
<span>p</span> (parent)
______|_________
| | | |
<span>strong</span> and <span>a</span> . (children and siblings)
</pre>
</section>
</div>
<div class="slide normal">
<header><h1>children</h1></header>
<section class="content">
<pre contenteditable>
var box = document.querySelector("#box");
var ul = box.getElementsByTagName("ul")[0];
<small>// includes empty text nodes too</small>
var kids = ul.<strong>childNodes</strong>;
<small>// text if textnode, value if attribute node, null if element</small>
var first = kids[0].<strong>nodeValue</strong>;</pre>
<p>Parents</p>
<pre contenteditable>var lis = box.getElementsByTagName('li');
var ul = lis[1].<strong>parentNode</strong>;
</pre>
<p>Siblings</p>
<pre contenteditable>var firstli = lis[1].<strong>prevSibling</strong>;
var thirdli = lis[1].<strong>nextSibling</strong>;</pre>
</section>
</div>
<div class="slide normal">
<header>
<h1>Changing Content</h1>
</header>
<section class="content">
<p>We need to find a DOM node so that we can add content to it, before it, after it, etc.</p>
<pre contenteditable>&lt;div id=&quot;changeme&quot;&gt;
&lt;ul&gt;
&lt;li&gt;Some &lt;strong&gt;imp text&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;And &lt;a href=&quot;http://x.com&quot;&gt;a link&lt;/a&gt;.&lt;/li&gt;
&lt;li class=&quot;cl&quot;&gt;With a class&lt;/li&gt;
&lt;li class=&quot;cl&quot;&gt;another classed&lt;/li&gt;
&lt;li class=&quot;di&quot;&gt;Has an ID&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</pre>
<pre><small>//find elements</small>
var lis = document.querySelectorAll('#changeme li');
<small>//change the content of one</small>
lis[2].<strong>innerHTML</strong> = 'JavaScript Rocks';</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Change Content</h1></header>
<section class="content">
<div id="changeme">
<ul>
<li>Some <strong>imp text</strong></li>
<li>And <a href="http://x.com">a link</a>.</li>
<li class="cl">With a class</li>
<li class="cl">another classed</li>
<li class="di">Has an ID</li>
</ul>
</div>
<pre><small>//find elements</small>
var lis = document.querySelectorAll('#changeme li');
<small>//change the content of one</small>
lis[2].<strong>innerHTML</strong> = 'JavaScript Rocks';
<small>//find another elements</small>
var strong = lis[0].getElementsByTagName('strong');
<small>//change that content too</small>
strong[0].<strong>innerHTML</strong> = 'emboldened content';
</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Add an element</h1></header>
<section class="content">
<ol>
<li>Create an element.</li>
<li>Set attributes on that element.</li>
<li>Create your textnode.</li>
<li>Add content to that element by appending the textnode to the element you created.</li>
<li>Targe the DOM node this new element will be next to.</li>
<li>Add that node next to the the targeted node.</li>
</ol>
<pre contenteditable>
var newLI = document.<strong>createElement</strong>('li');
newLI.<strong>setAttribute</strong>('class', 'myClass');
var textNode = document.<strong>createTextNode</strong>("some text");
newLI.<strong>appendChild</strong>(textNode);
var myUL = document.querySelector("#changeme ul");
myUL.appendChild(newLI);
</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Remove Elements</h1></header>
<section class="content">
<ol>
<li>Find the node you want to remove.</li>
<li>Find the parent of that node.</li>
<li>Remove the parent's child.</li>
</ol>
<pre contenteditable>var lis = document.querySelectorAll('#changeme li');
lis[4].<strong>parentNode</strong>.<strong>removeChild</strong>(lis[4]);</pre>
<pre contenteditable>
var box = document.getElementById('changeme');
var list = box.getElementsByTagName('ul')[0];
var fifthitem = box.getElementsByTagName('li')[4];
var item = list.removeChild(fifthitem);
</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Exercises</h1></header>
<section class="content">
<p>Slide 11 displays the text created by the markup on slide 10. Let's play with it! In the console on slide 11 do the following:</p>
<ul>
<li>Change the text of the link</li>
<li>Change the bold text</li>
<li>Change the text of one of the list items.</li>
<li>Add a list item</li>
<li>Add some bold text as a child of one of the list items</li>
<li>Remove every node you just added</li>
</ul>
</section>
</div>
<div class="slide intro">
<header><h1>Next</h1></header>
<section class="content">
<a href="part_07.html">Go</a>
</section>
</div>
</div>
</div>
<script src="slides.js">
</script>
</body> </html>
Jump to Line
Something went wrong with that request. Please try again.