Web Development Lesson 2 - Text
- Javascript

Web Development Lesson 2 - Text

Javascript

Objectives

In this exercise you'll get your first taste of Javascript and use it to create a simple game, where you get a user to change key words in your story to make it funny.

Setup

We'll build on the work you've done so far so if you need to, copy the code below into jsfiddle.

<h1 style="font-family:arial, sans-serif; color: green; font-size: 1.7em; text-decoration: underline; font-variant:small-caps; text-shadow:2px 2px #ff0000;">
My Story
</h1>
<p style="text-align:right">
My friend Pablo has a <em style="color:red; font-weight:700">pet dog</em> called Sam who likes to have his tummy scratched. When they go to the park, <strong>he likes to chase a <em>ball</em>.</strong> He rolls in the dirt so Pablo has to wash him when they get home.
</p>
<p style="text-indent:50px">
On Sundays they drive to the <sup>mountains</sup> where he runs around smelling the grass and <span style="color:blue;">wagging his tail</span>. He gets so tired that he sleeps all the way home.
</p>

Preview

We're going to turn this story into a game. You may have played this as a child. The user will be asked to provide words fitting certain categories, which will be placed into the story to make something ridiculous. Take a look at the final result here → https://jsfiddle.net/maganthro/cen6tj0L/12/.

Comments

We'll do this using Javascript, which is code that runs on the user's computer.
Add the following code to the Javascript pane in the bottom left of your jsfiddle screen.

// make background black to hide existing text

// collect input from user

// show input in story

// make background white to show text again

The // denotes a comment in Javascript. The browser will ignore everything after the // until the end of the line.
These comments show the process we'll follow for our game.
First, we will make the screen black to hide the text.
Then we will collect input from the user and place it into the story.
Finally, we'll make the screen white so the user can read the text.

Object Notation

Look at the first comment. We want to add code below this to make the background black.
If we were doing this in HTML directly, we'd add a style attribute to the body tag like this. <body style="background-color:black";>
In Javascript, we'll do the same by modifying that attribute.
Add the following text below the first comment. This text is an instruction to the browser, usually referred to as a 'statement'.

document.body.style.backgroundColor = "black";

Javascript reads the HTML code as an object called 'document'.
In object-oriented programming, a . is often used to denote a sub-element of the parent object. Javascript uses this convention so 'document.body' refers to the <body> tag (and everything within it) of the html code.
.style represents the element's style attribute.
Since we're modifying the 'background-color' element, we add that to the end of the object so the property we want to modify is document.body.style.backgroundColor.
Notice that the Javascript naming convention is different from HTML. HTML uses all lower case names and joins words with a -. Javascript runs all the words together but capitalises the first letter after a join.
Finally, we want to assign the value 'black' to that style property so we use ="black" in the same way in algebra we assign a value to a variable like x = 6
The word 'black' is surrounded by " to tell Javascript that it's text.
Also notice that the line ends with a ;. This tells the browser that the statement is complete and the next text it finds will be a separate statement.
Run this to see that it works.
When satisfied, let's also add the code to restore the background to white at the end of the code. Can you do that for yourself?

Prompt

We need a way to get input from the user. To keep this simple, we don't want to use a form at this stage. We'll use a 'prompt' instead.
Add the following statement below the second comment.

animal = prompt("Give me an animal");

This again follows the algebra pattern. Here we're assigning the user input to a variable called animal.
We use prompt() to pop up a box with a message and an input box for the user.
We write the message we want displayed inside the parentheses. In this case, it's “Give me an animal.” Again, to show it's text, we wrap the message in inverted commas.
Let's add a few more statements - one each for a name, a body part, a noun, a place and a gerund (a verb ending in 'ing'). Have a go at creating them yourself. You can call them what you like.
Here's my version.

animal = prompt("Give me an animal");
name = prompt("Give me a name");
bodypart = prompt("Give me a body part");
noun = prompt("Give me a noun");
place = prompt("Give me a place");
action = prompt("Give me an action ending in 'ing'");

Editing the document text

Now we need to add the words provided by the user to text itself.
The order doesn't matter, so let's start with the noun, which will replace 'ball' in the text.
Add the following statement below the third comment.

document.getElementsByTagName('em')[1].innerHTML = noun;

Again, we start with document to indicate we're referring to the HTML code (rather than a variable or object we've created).
We need a way of referring to the word 'ball'. Notice that it's already got its own tag ball. We can use that.
document.getElementsByTag() finds the list of elements with the specified tag in the order they appear in the HTML code.
Clearly, we want the  tag.
It's the second , so why have we written 1? Like many (all?) computer programs, Javascript starts counting at 0, so the first occurrence is 0 and the second is 1.
We want to replace all HTML code inside this  tag, so we use .innerHTML to select that.
Finally, we give it the value we obtained from the user in the second step. = noun Notice that noun isn't wrapped in inverted commas because noun isn't text itself. It is the name of a variable that represents text.
Run the code as is to check that it replaces 'ball' properly.
Not every word we want to replace has its own tag, so lets add  for dog, Sam, tummy and smelling.

<p style="text-align:right">
My friend Pablo has a <em style="color:red; font-weight:700">pet <span>dog</span></em> called <span>Sam</span> who likes to have his <span>tummy</span> scratched. When they go to the park, <strong>he likes to chase a <em>ball</em>.</strong> He rolls in the dirt so Pablo has to wash him when they get home.
</p>
<p style="text-indent:50px">
On Sundays they drive to the <sup>mountains</sup> where he runs around <span>smelling</span> the grass and <span style="color:blue;">wagging his tail</span>. He gets so tired that he sleeps all the way home.
</p>

Now let's change all the words. The order of these statements doesn't matter, but I'm choosing to do them in order of the tags rather than the order of appearance in the text.

document.getElementsByTagName('span')[0].innerHTML = animal;
document.getElementsByTagName('span')[1].innerHTML = name;
document.getElementsByTagName('span')[2].innerHTML = bodypart;
document.getElementsByTagName('span')[4].innerHTML = action;
document.getElementsByTagName('em')[1].innerHTML = noun;
document.getElementsByTagName('sup')[0].innerHTML = place;

Remember to use the variable names you chose if you used different names to the ones I've used.

Final Code

The final Javascript code will now look like this.

// make background black to hide existing text
document.body.style.backgroundColor = "black";

// collect input from user
animal = prompt("Give me an animal");
name = prompt("Give me a name");
bodypart = prompt("Give me a body part");
noun = prompt("Give me a noun");
place = prompt("Give me a place");
action = prompt("Give me an action ending in 'ing'");

// show input in story
document.getElementsByTagName('span')[0].innerHTML = animal;
document.getElementsByTagName('span')[1].innerHTML = name;
document.getElementsByTagName('span')[2].innerHTML = bodypart;
document.getElementsByTagName('span')[4].innerHTML = action;
document.getElementsByTagName('em')[1].innerHTML = noun;
document.getElementsByTagName('sup')[0].innerHTML = place;

// make background white to show text again
document.body.style.backgroundColor = "white";

Next: Exercise

Table of Contents