HTMLCourse Basic/Notes/Week5: Difference between revisions
(Created page with "<h1>HTML5 and the Slideshow</h1> <p>Download the files for this class here: <a href="http://robynoverstreet.com/mozilla/week5/files">http://robynoverstreet.com/mozilla/week5/...") |
No edit summary |
||
| Line 4: | Line 4: | ||
<p>HTML5 introduced a handful of new tags in an attempt to make HTML more readable. Now instead of calling so many elements divs, you can call them headers, navs, or sections, for instance.</p> | <p>HTML5 introduced a handful of new tags in an attempt to make HTML more readable. Now instead of calling so many elements divs, you can call them headers, navs, or sections, for instance.</p> | ||
<p>The old way:</p> | <p>The old way:</p> | ||
<pre><body> | <pre><body> | ||
<div id="header">...</div> | |||
<div id="nav">...</div> | |||
<div id="article"> | |||
<div id="section"> | |||
... | |||
</div> | |||
</div> | |||
<div id="sidebar">...</div> | |||
<div id="footer">...</div> | |||
</body></pre> | |||
<p>The new way:</p> | <p>The new way:</p> | ||
<pre><body> | <pre><body> | ||
<header>...</header> | |||
<nav>...</nav> | |||
<article> | |||
<section> | |||
... | |||
</section> | |||
</article> | |||
<aside>...</aside> | |||
<footer>...</footer> | |||
</body></pre> | |||
<h2>Slideshow basics</h2> | <h2>Slideshow basics</h2> | ||
<p>We'll be looking at two Mozilla slideshow templates: <a href="http://htmlpad.org/engagement-call-april27">http://htmlpad.org/engagement-call-april27</a> and <a href="http://htmlpad.org/contributor-engagement-update-5-16/edit">http://htmlpad.org/contributor-engagement-update-5-16</a></p> | <p>We'll be looking at two Mozilla slideshow templates: <a href="http://htmlpad.org/engagement-call-april27">http://htmlpad.org/engagement-call-april27</a> and <a href="http://htmlpad.org/contributor-engagement-update-5-16/edit">http://htmlpad.org/contributor-engagement-update-5-16</a></p> | ||
Revision as of 17:40, 2 June 2011
HTML5 and the Slideshow
Download the files for this class here: <a href="http://robynoverstreet.com/mozilla/week5/files">http://robynoverstreet.com/mozilla/week5/files</a>
New tags in HTML5
HTML5 introduced a handful of new tags in an attempt to make HTML more readable. Now instead of calling so many elements divs, you can call them headers, navs, or sections, for instance.
The old way:
<body>
<div id="header">...</div>
<div id="nav">...</div>
<div id="article">
<div id="section">
...
</div>
</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</body>
The new way:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Slideshow basics
We'll be looking at two Mozilla slideshow templates: <a href="http://htmlpad.org/engagement-call-april27">http://htmlpad.org/engagement-call-april27</a> and <a href="http://htmlpad.org/contributor-engagement-update-5-16/edit">http://htmlpad.org/contributor-engagement-update-5-16</a>
As you can see, each slideshow is contained in one HTML document. The basic idea here is that different parts of the document can be shown or hidden at any one time, giving the effect of a slideshow. In other words, if every slide is in a section tag, you'll want to show only one section element at a time. Then, using javascript, you can change which slide is shown when a certain key is pressed.
We already know how to hide an element in CSS using the display property:
#mydiv{
display: none;
}
Remember that any property you can set in CSS, you can change with Javascript. So to change an element so it is not displayed, we can use the following Javascript:
<script>
var mydiv = document.getElementById('infodiv');
mydiv.style.display = "none";
</script>
Let's start with a document with only two slide divs, so we can easily switch back and forth between them. Here's the HTML:
<body>
<div id="slide1"><h1>Slide 1</h1></div><br /> <div id="slide2"><h1>Slide 2</h1></div>
</body>
Next we have to grab each div by its id using Javascript. We can use the Javascript method getElementById:
<script>
var s1 = document.getElementById('slide1');
var s2 = document.getElementById('slide2');
</script>
Let's make a function specifically to show Slide 1 and hide Slide 2:
function showSlide1(){
var s1 = document.getElementById('slide1');
s1.style.display = 'block';
var s2 = document.getElementById('slide2');
s2.style.display = 'none';
}
With Javascript, we've set the display property on Slide 1 to 'block', and the display on Slide 2 to 'none'. To show Slide 2 and hide Slide 1, we'd do the opposite.
Next we need to trigger the functions somehow. We can create some buttons and add onclick events to them.
<input type="button" value="back" onclick="showSlide1();">
<input type="button" value="forward" onclick="showSlide2();">
Looping through Elements
When we have more than two slides, we'll need a better way to manage them. That's where arrays and looping comes in. Remember that an array in Javascript looks something like this:
var stuff = new Array('shoe','cup','baseball','iPod');
You can also have an array of HTML elements, as when you get all the li tags:
var elements = document.getElementsByTagName('li');
In one version of the Mozilla slideshow, all the slides are in <section> tags. You can use getElementsByTagName to get all the slides into an array.
Exercise
Create a simple slideshow document with each slide contained in a <section> tag. Get all the slides into an array using getElementsByTagName.
Looping Through an Array
One of the reasons to use arrays in programming is so we can store pieces of information we want to treat in the same ways. For example, if we have an array of items available for purchase, we might want to list out all the items on a page.
To process each item in an array, we use a loop. With a loop, we can go through the array and perform the same actions on the each item in the array.
The most common loop in Javascript is a for loop. It looks like this:
for (i=0;i < stuff.length; i++){
document.write(stuff[i]);
}
Inside the parentheses of a for loop, there are 3 statements, each separated by a semicolon(;).
i=0 The first statement sets up a variable that will be used throughout the loop, and will change each time through the loop. You can call this variable anything you want, but the convention is to call it i. In the example above, the first statement sets the variable, i, to zero. That's the starting number for the loop. The first time through the loop i will be equal to 0.
i++. Let's skip to the third statement for a minute, because it's an easy one. This sets how the variable i will change each time through the array. i++ is just a shorthand for saying i+1. So each time through the loop, the variable i will be equal to one more than it equalled the last time through the loop. In the example above, i starts with 0. Then the second time through the loop, it will be 1; the third time it will be 2, and so on.
i < stuff.length. The second statement tells the loop when to stop looping. (If there's nothing to stop the loop, it will go on forever. Computer programs are dumb that way.) So, this statement is saying, keep looping until i is less than the the number of items in that array called stuff. All arrays have a length property that will give you the number of items contained within the array. You can access the length of any array with the syntax nameOfArray.length (where nameOfArray is actually the name of your array, of course).
stuff[i]. Inside the loop, instead of writing the index number directly, like stuff[2], let the variable i stand in for the index number. That way, the first time through the loop, stuff[i] will stand for stuff[0], the second time stuff[i] will stand for stuff[1], and so on.
That way, we don't have to know how many things are in an array, we just do the same thing to each item in the array. (In the example above, the only thing we do is write the item out to the browser.)
The really great thing is that instead of writing the same commands over and over again, we just write it once and let the loop do the work.
Exercise
Create an array of strings (like the "stuff" array) and print out each element of the string, either to the document or to the console.
Processing the slides
In a similar way that we loop through an array of strings, we can loop through an array of HTML elements. For example, we can loop through all the slide elements and hide each one.
var slides = document.getElementsByTagName('section');
for (i=0;i < slides.length;i++){
slides[i].style.display = 'none';
}
Of course, we don't want to hide all the slides. We need to figure out which one to show. Let's start by showing the first one, which has an index number of 0.
slides[0].style.display = 'block';
In the real world, though, we'll need to know which slide we're on. So we can loop through the slides and check each one to see if it's the current slide. We'll create a variable called "current_slide" which will keep track of the slide number. Remember that arrays start at zero, whereas the slide numbers start at one. Inside the loop, we'll ask each slide, "Are you the current slide?" We can do that using an if statement. An if statement looks like this:
if (name == 'Bob'){
console.log('Bob is back again');
}
Notice that you use two equal signs together here instead of just one.
In the context of the slideshow, we'll check the "current_slide" variable against the "i" variable:
if (current_slide == i){
//show this slide
}
Because we may want our slide counter to start at one instead of zero, it might make sense to write it this way:
if (current_slide == i + 1){
//show this slide
}
Now, if the current slide is 1 and we are on the first slide, which has an array index of 0, these will match up.
In our loop, we can set the current slide to show up and all the other slides to be hidden:
var current_slide = 2;
for (i=0;i < slides.length;i++){
if (current_slide == i + 1){
slides[i].style.display = 'block';
} else {
slides[i].style.display = 'none';
}
}
Now we just need a way to change the value of the current slide. We can use a function and an event listener on the buttons. The first thing we'll do in our script is to set the current_slide variable. Then we'll create two functions to change the value of that variable.
var current_slide = 1;
function advanceSlide(){
current_slide = current_slide + 1;
}
function rewindSlide(){
current_slide = current_slide - 1;
}
Now that we have the functions, we can trigger them with the buttons' event listeners.
<input type="button" value="back" onclick="rewindSlide();"> <input type="button" value="forward" onclick="advanceSlide();">
Now we can put the code to show and hide the slides in a function:
function updateSlides(){
var slides = document.getElementsByTagName('section');
for (i=0;i < slides.length;i++){
if (current_slide == i + 1){
slides[i].style.display = 'block';
} else {
slides[i].style.display = 'none';
}
}
}
Now, whenever we advance or rewind the slide number, we can call our function, updateSlides, to show the right slide.
function advanceSlide(){
current_slide = current_slide + 1;
updateSlides();
}
function rewindSlide(){
current_slide = current_slide - 1;
updateSlides();
}
Listening to the keyboard
In addition to clicking buttons to move the slideshow forward and back, the users can also control the slideshow with the keyboard. To set that up, we add a listener for a keyboard event. Javascript can detect whenever any key is pressed, and we can process that information to make things happen when certain keys are pressed. First we'll create a function to handle the keyboard event. This function takes an event as an argument. It looks like this:
function keyHandler(event){
console.log(event.keyCode);
}
This function will send an numeric code that corresponds to each key to the console. To fire this function, we need the addEventListener function that's built into Javascript. It looks like this:
document.addEventListener('keypress',keyHandler,false);
'keypress' here is the name Javascript gives to the event. 'keyHandler' is the name of the function we just created. 'false' is required, but we don't need to deal with it here. Now whenever the user presses any key, the keyHandler function will run. If you watch the console while you press some keys, you'll see that each key has its own unique code.
We are only concerned with a few keys, however. Namely, the left arrow and right arrow keys. These keys correspond with the numbers 37 and 39, respectively. So we'll listen for those keys.
function keyHandler(event){
if (event.keyCode == 39){
advanceSlide();
}
if (event.keyCode == 37){
rewindSlide();
}
}