Governor's Career & Technical Academy Arlington

Web Design & Development: Lesson 5

WebDev


to

Overview

By the end of this lesson, you will be able to:

Evaluation

For our JavaScript lessons (Lessons 5, 6, and 7), we will be changing how we approach the process (curriculum completion) and practice (projects) portion of your evalution, since we will be using a new resource, HeadFirst HTML5 Programming, in place of the CIW curriculum for these lessons.

The same weights for will still hold for DE and high school credit only students, with 25%, 25%, and 50% for dual-enrolled students and 40%, 40%, 20% for high school credit only students.

Friday, December 8th

After you finish the test today, begin reading Chapter 3: Events, Handlers and All That Jazz from our HeadFirst HTML5 Programming book.

Chapters 1 & 2 Check-in: Wednesday, December 6th

Study Chapters 1 and 2 and the additional things you learned during class in preparation for a 20 question quiz on Friday. As you study, pay particular attention to the following:

  • What JavaScript is for and how it differs from languages like C# and C++.
  • The difference between var and let.
  • The historical existance of Java applets and the <object> elements that connected them to web pages.
  • Variables, values, literals, expressions and assignment statements.

Chapter 2 Check-in: Monday, December 4th

This week we will finish chapter 2 and then have a quiz on Friday. Today I will introduce you to one more built-in JavaScript method (function) that, like the alert() method we saw last week will create a pop-up window. This one asks the user to enter information, however, which can then be captured in a variable.

We'll let our good friend José Ejemplo show us how it's done. Just take a look at the Hello ... Bob! page he has linked from here.

For the rest of class and for homework, finish reading Chapter 2.

Reflections

Maintain your homepage as your web portal, from which all other pages on your site are linked. So many of you replaced your homepage with the latest assignment that I gave up filing issues for each of you and decided this would be better served by a general announcement here.

Be careful as you apply fonts to your webpage that you don't break your site for users who do not have access to the fonts. I encountered a few of you with this issue. Click here to see an example of the issue. I am delighted to see the experimentation. Consider using web fonts.

Using the onclick() method can provide us with a nice way to incorporate alert() calls without being annoying. Providing a button element is a nice way do this, as in the following example:

Shout Outs

Shout out to Johan, whose mouse-over effect topped the list of clever improvements to our song.

Shout out to William, whose website is becoming just the kind of digital portfolio that will serve him well as part of his online resume in the future. Check out his Number guessing game!

Shout out to Grant for his nice combination of a prompt() method call with out 99 cans assignment here.

Chapter 2: Introducing JavaScript and the DOM

In this chapter we begin learning JavaScript. As I mentioned in class, there are a few important changes to the language since 2010, so I will let you know about them as we go along. The first of these is the keyword let, which creates a block scoped variable.

Tasks

To begin our journey through chapter 2, do each of the following:

  1. Read JavaScript Let from the w3schools website.
  2. Read pages 35 to 42. Trying out the sample code by embedding your JavaScript in webpages. There are two ways to do this, either using the alert() function or by using console.log(). I will show you both in class today.

Evaluation

You will earn credit for the commits you make to your git repo showing the example JavaScript from the assigned pages. This will go into the gradebook as the assignment named Chapters 1 and 2 part 1 and is due Friday, December 1 at 11:59 pm.

Chapter 1: Welcome to Webville! (Tuesday, November 28)

Classwork

Welcome to Webville! I will start class today by providing a bit of context for what you will read in the beginning of Chapter 1: Getting to Know HTML5 in HeadFirst HTML5 Programming. This book is a wee bit outdated, but I actually find that to be an advantage, since it was written soon after HTML5 was released, and it provides excellent information about the design philosophy that went into its creation for that reason.

After the introduction, we will use my Pair Chooser page to choose pairs for the activity at the end of the chapter, Writing Serious JavaScript. You and your partner should use your own CSS skills and a little creativity to make modifications to the lyrics provided. Also, we will need to sneak in one more JavaScript concept at this point, getElementById(). Chapter 1 has you use document.write(lyrics), but if you do that, you will erase the previously existing contents of the document. Instead, use: document.getElementById("song").innerHTML = lyrics; and add a main element to the body of your page with id set to "song".

I've made a version of this here (with a few other tweaks). Your task is now to come up with your very own spin on what I've done.

Homework

With Period 3 and Period 5 pairs chosen, read Chapter 1: Getting to Know HTML5, from beginning to end. Create a webpage in a file named webville.html and add a summary of what you learned from the chapter on this page. Link it from your homepage. You can include the song lyrics generated from the end of chapter activity in this page.

Resource