In our most recent exercise, we explained the basic structure of a web page to our hypothetical student. By doing so, we presented static content to our student. It's now time for us to introduce the basics of dynamic content to our student by introducing some basic JavaScript.
Let's start again with our HTML document from before:
<head>
<title>This is our first web page!</title>
</head>
<body style="background:blue;" name="body">
<p style="font-weight:700;" name="hello">Hello, world!</p>
<p name="hello2">These lines are HTML.</p>
<p name="hello3">The browser knows to split them into paragraphs.</p>
</body>
</html>
Now let's introduce a button, which we'll use to drive our Javascript actions.
<html>
<head>
<title>This is our first web page!</title>
</head>
<body style="background:blue;" name="body">
<p style="font-weight:700;" name="hello">Hello, world!</p>
<p name="hello2">These lines are HTML.</p>
<p name="hello3">The browser knows to split them into paragraphs.</p>
<button>Click Me!</button>
</body>
</html>
We've created a button, but it doesn't actually do anything. Let's work on that by adding some JavaScript.
<html>
<head>
<title>This is our first web page!</title>
</head>
<body style="background:blue;" name="body">
<p style="font-weight:700;" name="hello">Hello, world!</p>
<p name="hello2">These lines are HTML.</p>
<p name="hello3">The browser knows to split them into paragraphs.</p>
<button onclick="alert('Hello, world!')">Click Me!</button>
</body>
</html>
Let's take some time to explain to our student what we've actually done here. Our button now has an action associated with it that will be activated "onclick," or when a user actually clicks the button. We also needed to produce the code that would generate a pop-up when it was clicked. Let's add some more complexity to the code by manipulating the DOM to change the background color:
<html>
<head>
<title>This is our first web page!</title>
</head>
<body style="background:blue;" name="body">
<p style="font-weight:700;" name="hello">Hello, world!</p>
<p name="hello2">These lines are HTML.</p>
<p name="hello3">The browser knows to split them into paragraphs.</p>
<button onclick="document.getElementsByTagName('body')[0].style.background='red';">Click Me!</button>
</body>
</html>
There's a lot more in this little chunk as well. Let's explain each portion individually.
document.getElementsByTagName('body')[0].style.background='red';
We start with the name "document," indicating that we want to work with the current HTML document. We perform an action on that document (getElementsByTagName('body')) which looks for all of the elements with a tag name of "body." The [0] means that we should only work with the first such element. We then change the style of that element, and the background portion of that style specifically. Putting this in the HTML itself is a little bit unwieldy, so let's introduce the concept of functions.
<html>
<head>
<title>This is our first web page!</title>
<script>
function backgroundChange() {
document.getElementsByTagName('body')[0].style.background='red';
}
</script>
</head>
<body style="background:blue;" name="body">
<p style="font-weight:700;" name="hello">Hello, world!</p>
<p name="hello2">These lines are HTML.</p>
<p name="hello3">The browser knows to split them into paragraphs.</p>
<button onclick="backgroundChange();">Click Me!</button>
</body>
</html>
We haven't changed any of the JavaScript that will execute, but we have changed its positioning. We've encapsulated this code in a function backgroundChange() and have stuck that into the HTML within a <script> tag. Let's introduce some conditional logic as well, so we can change the background back and forth:
<html>
<head>
<title>This is our first web page!</title>
<script>
function backgroundChange() {
if (document.getElementsByTagName('body')[0].style.background == 'red') {
document.getElementsByTagName('body')[0].style.background='blue';
} else {
document.getElementsByTagName('body')[0].style.background='red';
}
}
</script>
</head>
<body style="background:blue;" name="body">
<p style="font-weight:700;" name="hello">Hello, world!</p>
<p name="hello2">These lines are HTML.</p>
<p name="hello3">The browser knows to split them into paragraphs.</p>
<button onclick="backgroundChange();">Click Me!</button>
</body>
</html>
And that's it for today! We've built a "dynamic" page with our student, and showed them the possibilities of learning to program. The lessons following will attempt to take two different tracks - one track for the student who wants to learn the logic first, and one for the student mostly concerned with playing with design.