Added basic information about animations

class4.html

@@ -219,8 +219,95 @@ <h3>Submit buttons</h3>
 }
 				</code></pre>
 			</section>
+            <section>
+				<h3>Let's Develop It</h3>
+                <p>Collect a value from the input box on the page. Use it inside a function of some kind. For example, collect a number and multiply it by five or collect a name and display a greeting.</p>
+			</section>  
 		</section>
 
+        <!-- Animation -->
+		<section id="animation">
+            <section>
+				<h3>Timing Events</h3>
+				<img src="images/clock.jpg" alt="Alarm clock"/>
+				<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/beth19/4721798240/" target="_blank">Bethan</a> <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/" target="_blank">cc</a></p>
+			</section>
+            <section>
+				<h3>Timing Events</h3>
+				<p>In JavaScript, is possible to execute some code at specified time intervals.</p>
+                <ul>
+                    <li><code>setInterval()</code> executes a function over and over again, at specified time intervals</li>
+                    <li><code>setTimeout()</code>  executes a function, once, after waiting a specified number of milliseconds</li>
+                </ul>
+			</section>
+            <section>
+				<h3>setInterval</h3>
+				<p>The syntax for <code>setInterval()</code> is:</p>
+                <pre><code>
+setInterval(function, milliseconds);
+				</code></pre>
+                <p>For example, this is a simple clock:</p>
+                <pre><code>
+var simpleClock=setInterval(function(){myClock()},1000);
+function myClock() {
+    var d = new Date();
+    var t = d.toLocaleTimeString();
+    document.getElementById('resultsBox').innerHTML = t;
+}
+				</code></pre>
+			</section>
+            <section>
+				<h3>clearInterval</h3>
+				<p>You can use <code>clearInterval()</code> to stop a setInterval loop</p>
+                <pre><code>
+clearInterval(intervalVariable)
+				</code></pre>
+                <p>To stop our clock:</p>
+                <pre><code>
+function myStopFunction() {
+    clearInterval(simpleClock);
+}
+				</code></pre>
+			</section>
+            <section>
+				<h3>setTimeout</h3>
+				<p>The method <code>setTimeout()</code> is similar, but it will only run once.</p>
+                <pre><code>
+setTimeout(function, milliseconds);
+				</code></pre>
+                <p>For example, this code will wait 3 seconds, then create a popup box, unless the user triggers the <code>clearTimeout()</code></p>
+                <pre><code>
+var helloBox;
+function sayHello() {
+    helloBox=setTimeout(function(){alert("Hello")},3000);
+}
+function dontSayIt() {
+    clearTimeout(helloBox);
+}
+				</code></pre>
+			</section>
+            <section>
+				<h3>Animations</h3>
+				<p>By changing values slowly over time, we can create simple animations</p>
+                <pre><code>
+var targetPic = document.getElementById('turtlePic');
+targetPic.onclick = function () {
+    var leftMarginValue = 0
+    function increaseMargin() {
+    leftMarginValue++  // update parameter each time 
+    targetPic.style.marginLeft = leftMarginValue + 'px' //set left margin 
+    if (leftMarginValue === 200)  // check finish condition
+        clearInterval(movePic);
+    }
+  var movePic = setInterval(function(){increaseMargin()}, 10) // update every 10ms
+}
+				</code></pre>
+			</section>
+            <section>
+				<h3>Let's Develop It</h3>
+                <p>Using the function from the previous slide as a base, try changing some animation parameters. What happens?</p>
+			</section>
+        </section>
 
         <!-- Final slides-->
 		<section id="final">
@@ -235,6 +322,7 @@ <h3>Resources</h3>
 					<ul>
 						<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">JavaScript Guide</a>, from the Mozilla Developers Network.</li>
 						<li><a href="http://www.codecademy.com/tracks/javascript" target="_blank">Code Academy</a>, with interactive JavaScript lessons to help you review.</li>
+                        <li><a href="https://www.khanacademy.org/computing/cs/programming">Khan Academy</a> has a lot more information abut drawing and animations.</li>
 					</ul>
 			</section>
 		</section>