Learning Goal #5
Students will understand, practice, and apply the basic syntax for programming interactive elements with JavaScript.
PART 1: DAILY DISCUSSION
Read MoreTOPIC 1: A REVIEW OF HTML/CSS
As you learned in the last two lessons, online games are designed with programming languages. If those games are on a web page, then the web page must have HTML for the structure (like a skeleton) and CSS for the style (like the skin). You learned that HTML is set up like this. And you also learned that CSS is set up like this.
TOPIC 2: A SKELETON AND SKIN WITHOUT MUSCLE
Try to imagine a body with only a skeleton and some skin. If that body has a good, solid skeleton or if that body has nice looking skin, it can’t ever go anywhere or do anything. Even the guy in this picture is doing more than a person with no muscle could actually do. That’s because you need muscle in order to have action or movement.
In order for a body to move on its own and come to life, it needs a little muscle. If you stop and think about what’s inside of your body, muscles are basically just a collection of really strong fibers and tissues that keep the skeleton and the skin together. Muscles allow the body to have movement. Muscles allow the body to stay still, or stabilize posture. And muscles can be improved or strengthened so that certain parts of the body can do more than other parts. Even the brain sometimes acts like a muscle because it can be improved and strengthened over time, but it’s really just another organ like the heart or the liver. Just remember that muscles help control the behavior of the body.
TOPIC 3: JAVASCRIPT IS THE MUSCLE
On a web page, JavaScript is basically just the muscle that allows “stuff” to happen on the page. You probably noticed during the last class that CSS can also do some pretty cool things like rotations, translations, and color changes. That’s very true, but CSS can only go so far. JavaScript is what allows things like pop-up boxes, time changes, keyboard controls, and all sorts of other interactive features. Here is a simple way of looking at JavaScript and how it works.
TOPIC 4: WHAT JAVASCRIPT ACTUALLY IS
If you think of HTML as a skeleton, CSS as the skin, and JavaScript as the muscle, you have a pretty good idea of how they all fit together. But those aren’t really the actual meanings. It’s important that you understand what these coding languages actually are and what they actually do. For example, HTML is the code you write to set up all the elements for a page. CSS is the code you write to make all those elements look a certain way. And JavaScript is the code that can control the behavior of certain objects, or elements, on a page. For this reason, JavaScript is known as an Object-Oriented Programming Language. That means it’s a language used to create objects and then do things with those objects. In fact, when it comes to JavaScript, almost everything you see is an object because everything has a purpose. And objects are basically just a collection of very specific values.
TOPIC 5: ANOTHER WAY TO LOOK AT
Now that you have seen how HTML is the programming skeleton, now that you have seen how CSS is the programming skin, and now that you’re about to learn how JavaScript is the programming muscle that controls page behavior, this is a good time to look at how different these three languages actually are. Take a look at this HTML/CSS/JavaScript breakdown.
PART 2: DAILY DESIGN
Read More
After two days of coding, the steps below should be starting to get easier. Today is nothing new. All you need to do is follow the steps below. Once everyone has completed Step 3 below, we’ll learn how to add some JavaScript muscle to the page and make it look like the picture you just saw. Remember that your success in this class depends on your ability to work with other people, so begin going through the steps below and work with the person on your left or right.
STEP 1: CREATING A NEW FILE
Open a new Notepad document and save it as “lesson3_muscle.html” in your “LG5_basicjs” subfolder. You must not forget the “.html” at the end of the file name that you’re saving.
STEP 2: FINDING THE HIDDEN CODE
Somewhere on this page is a hidden code. See if you can find it. Once you do, go ahead and copy/paste it into your Notepad, save it (CTRL-S), and open it with Google Chrome.
STEP 3: CREATING A SPLIT SCREEN
When you reach this point, you have everything necessary to get started. So drag your code to the left side of your monitor and create a split screen so that you can see the design on the right. The teacher will know you are done when your screen shows the code on one side and the design on the other. Once the teacher sees that you and your partner are all set up, you will probably be asked to stand up and help someone else out.