Anatomy of a Web Page: JavaScript

Script version 1.0

Tutorial Part 1

The muscle of a Web page

I'm Jon Ippolito, and I'm going to introduce you JavaScript through a bodily metaphor. This is the first of two screencasts on the subject.

You can use JavaScript for building games, automating Photoshop, and many more uses. But today we'll see how it's an essential piece of the Web.

First let's review the anatomy of a Web page. First there's HTML, which is like the skeleton of a page. You can use a Web page inspector like Firebug to see how HTML tags like body or div add structure to a page.

Secondly, there's Cascading Stylesheets, which are like the skin or clothes of a Web page. CSS styles the color, font, and dimensions of the stuff you see on a Web page.

Finally, there's JavaScript, which is the muscle of a Web page. Anytime you see something change on a Web page--open or close, update or fade out, move from one side of the window to another--that's JavaScript.

Writing JavaScript

HTML tags are mostly nouns like body and form. CSS attributes are adjectives like bold or red. But JavaScript's actions are conveyed by verbs, like open or close.

Muscles need to be flexed in order to work. To "flex" a JavaScript verb, add an opened and closed parenthesis to the end. Think of this as the muscle "bulging." End the line with a semicolon to show you've finished flexing your muscle.


close() ;
				

The muscles we're most familiar with are used to move bones, and to do so they need to be attached to bones via tendons.

The JavaScript you're likely to use first affects HTML, which is the bones of a Web page. Use a dot (.) to attach a JavaScript action to an HTML element like form or window.


window.close() ;
				

Where to put JavaScript

In the body, muscle fibers are usually bundled to work together. If you want to trigger a series of JavaScript commands together, you can bundle them into a function.


openMessages = function() {
	alert("Your messages will open in a new window") ;
	window.open() ;
}
				

Bundles of muscles are separated from the rest of the body by muscle sheaths. In a Web page, JavaScript is separated from HTML by script tags. These tags are usually placed in the head.

Writing the name of the function in the head by itself won't trigger it. To run the function, you need to add parentheses after it.

In most cases, you'll want a JavaScript function to run only if the user interacts with part of the page body. For example, you can add the function's name with parentheses, in quotes, in the onclick attribute of a div.


<html>
	<head>
		<script>
			openMessages = function() {
				alert("Your messages will open in a new window") ;
				window.open() ;
			}
		</script>
	</head>
	<body>
		<div onclick="openMessages()">
			Show messages from my friends!
		</div>
	</body>
</html>
				

In most cases, you'll want a JavaScript function to run only if the user interacts with part of the page body. For example, you can add the function's name with parentheses, in quotes, in the onclick attribute of a div.

That's the end of part one of this tutorial. In the next part, I'll show you what JavaScript can do in a Web page, and how it's analogous to what muscles can do in the body.

Tutorial Part 2

In part one of this tutorial, I introduced you to the metaphor of JavaScript as the muscle of a Web page, and showed you how to flex that muscle with parentheses and bundle muscles together in a function. I also showed you how to trigger JavaScript using a handler like onclick inside HTML.

In this second part of the tutorial, I'll show you what JavaScript can do in a Web page, and how it's analogous to what muscles can do in the body.

What JavaScript can do

What else can you do with JavaScript? Well, here's what muscles can do:

1. Choose an object.

2. Change its style.

3. Move it.

4. Show or hide it.

5. Add items to a container.

6. Speak.

Let's see the Web equivalents for these.

1. Choose an element.

Before you can move or style something, you need to identify it. To do that, you need to know the element's id, which can be written into the HTML for convenience.

For example, here's a div that updates when you get a message from a friend:


<div id="news">
	You have no messages from your friends.
</div>
				

And here's a bit of JavaScript that refers to it:


					document.getElementById( "news" )
				

document is JavaScript's way of referring to the entire Web page.

getElementById locates a specific element, in this case the div with id news.

Note that JavaScript names don't have spaces; instead each word is stuck together by capitalization, a technique known as camelCase because of the capitalized "humps" it leaves in the middle of names.

Note also that only the first I is capitalized in Id. "Id" isn't an acronym, because the "d" doesn't stand for anything. It's just short for "identity."

2. Change an element's style.

With JavaScript, you can change the style of an HTML tag, such as a div. Let's give the news a red border.


					document.getElementById( "news" ).style.border = "red solid" ;
				

The dot is a kind of connector to show what JavaScript is affecting: first we find the document, then the bunny, then its style, then its border.

In JavaScript, the equals sign doesn't mean identity, but assignment. So that statement sets the border to red solid.

3. Move an element.

With JavaScript, you can move an HTML tag, such as a div, from one position to another. Let's move the news box across the page:


					document.getElementById( "news" ).style.left = "500px" ;
				

4. Hide or show an element.

JavaScript can change the display property of an element's style to hide or show it, as in:


					document.getElementById( "news" ).style.display = "none" ;
				

or


					document.getElementById( "news" ).style.display = "block" ;
				

5. Add items to a container

HTML elements have an innerHTML property that you can set to add content that wasn't there originally.


					document.getElementById( "news" ).innerHTML = "You have a new message!" ;
				

6. Speak

If you really want to get your user's attention, you can trigger an alert message when something happens, as when they click on your news box:


<div id="news" onclick="alert('Get your news here!')">
	You have no messages from your friends.
</div>
				

This shows up on your Web page as a special popup message.

There you have it: JavaScript is muscle. Use it, and make your Web pages come alive.