HTML & JavaScript — Reference & Homework

A one-page field guide to the tags, methods, and APIs you'll need — paired with a step-by-step plan for putting them to work.

Part One

The Reference Sheet

Everything you are allowed to use, and nothing you are not.

Attributes (written inside a tag)

id="name": A unique label for one element. Used by getElementById and document.forms.
class="name": A shared label for many elements. Used by getElementsByClassName.
href="url": The destination address for a link <a>.
src="url": The source file for an image <img>.
type="text": The kind of input field (e.g. text, password).
name="...": The internal name of a form field.
value="...": The default text shown inside a form field.

JavaScript Syntax & API ii.

Variables & Loops

var: Declares a variable to store data.
for (i=0; i<x.length; i++): A loop used to run code multiple times.
[0], [i]: Array indexing — pick one element from a list.
.length: The number of items in a collection.

User Interaction, Math & Dates

prompt(): Asks the user to enter input via a pop-up.
alert(): Displays a pop-up box with a message.
parseInt(): Converts text input into a number for math.
Date(): Retrieves the current date and time.

Finding HTML Elements

document.getElementById("id"): Finds a single element by its unique ID.
document.getElementsByTagName("tag"): Finds a list of elements matching an HTML tag.
document.getElementsByClassName("class"): Finds a list of elements sharing a class.
document.querySelectorAll("css_selector"): Finds elements matching a CSS rule (e.g. p.intro).
document.forms["id"]: Finds a specific HTML form to access its inputs.

Reading & Changing HTML / CSS

document.write(): Writes text or HTML directly to the page.
.innerHTML: Gets or changes content inside an element.
.elements: Accesses inputs stored inside a form.
.value: Gets the current text in a form field.
.src: Changes an image's source attribute.
.style.color: Changes an element's text color via CSS.

Web Security / Cookies

document.cookie: Accesses data stored in session cookies.
window.open(): Opens a new browser window (used in XSS demo).

The <script> Tag in Practice iii.

Drop a <script> tag inside your <body>. Anything between its opening and closing tags is JavaScript that runs as the page loads.

<html>
<body>
  <p id="demo">Old Text</p>

  <script>
    // Find the paragraph above and replace its text
    document.getElementById("demo").innerHTML = "New Text!";
  </script>
</body>
</html>

Fig. 1 — A minimal page that swaps its own text after loading.

// Reading one element, writing into another
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML =
  "Text is: " + myElement.innerHTML;

Fig. 2 — Copying content from one element to another.

<form id="frm1">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name:  <input type="text" name="lname" value="Duck"><br>
</form>
<p id="demo"></p>

<script>
  // Looping through a form's inputs
  var x = document.forms["frm1"];
  var text = "";
  for (var i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
</script>

Fig. 3 — Reading every field of a form via .elements.

// Changing an attribute (the image's source)
document.getElementById("image").src = "landscape.jpg";

// Changing a CSS style property
document.getElementById("p2").style.color = "blue";

// Writing directly into the page stream
document.write(Date());

Fig. 4 — Three small but powerful one-liners.

Part Two

The Homework Plan

Twelve small steps. Read each instruction, then look left and figure out which tool fits.

Lay the foundation Every page needs a skeleton before it can hold anything.

Create a file called index.html. Open it in a text editor.

Tell the browser this is HTML (the doctype line).
Wrap everything in a root element.
Inside that, give it two parts: one for behind-the-scenes info (with a tab title that says "My First Page"), and one for the things you'll actually see.

Open the file in your browser. The tab should read "My First Page". The page itself can be blank.

Put words on the page Headings, paragraphs, and a touch of emphasis.

In the visible section of your page, add:

A big top heading that says "About Me".
A smaller heading underneath that says "A Quick Introduction".
A paragraph of two or three sentences about yourself. Make at least one word in it bold.

Look in the reference for the two heading sizes, the standard paragraph, and the bold tag.

Group it, link it, picture it Containers, hyperlinks, and your first image.

Wrap your headings and paragraph inside a generic container so they're grouped as one block.
Below the paragraph, add a clickable link that takes the reader to your favourite website.
Below the link, embed an image. (Search "placeholder image" online and copy any image URL you like.)

You'll need the container, the hyperlink, and the image tag.

Wake up JavaScript A script tag, and your page learns the time.

Just above the closing of the visible section, add a script block. Inside it, ask JavaScript to print the current date directly onto the page.

The reference shows one method that writes straight to the page, plus another that fetches the current date and time. Reload — today's date should appear at the bottom of your page.

Talk to your visitor Pop-ups in, pop-ups out, a name remembered.

Add a second script. When the page loads, it should:

Show a pop-up greeting: "Welcome!"
Show a second pop-up that asks the user for their name, and store the answer in a variable.
Show one final pop-up that says "Hello, [whatever they typed]!"

Two pop-up methods (one shows, one asks), plus the keyword that creates a variable.

Make the browser do math Text from the user is text — until you convert it.

Ask the user for two numbers using two prompts. Add them together and show the result in a pop-up.

Watch out: what the user types comes back as text. Typing "5" and "3" and adding them gives you "53", not 8. The reference has a tool to turn text into a real number first.

Two prompts, the text-to-number converter, and one alert.

Reach in and change the page Find an element by name. Replace what's inside.

Add a paragraph that says "Old Text" and give it a unique label of your choice (e.g. id="message").

In a script below it, find that exact paragraph using its label, then replace its inner contents with "New Text — changed by JavaScript!"

One method for finding an element by its unique id, plus the property that gets/sets what's inside.

Swap a picture, paint some text Changing attributes and styles from code.

Add an image with a unique id, pointing at picture A.
Add a paragraph with a different unique id and any sentence you like.
In a script, change the image's source so it now displays picture B, and change the paragraph's text colour to blue.

The same "find by id" tool, plus the property that controls an image's source, plus the one that controls text colour.

From one element to many Three different ways to grab a whole group at once.

Add three short paragraphs. Give each one the same class name — say, class="note".

In a script, grab the whole group of them three different ways:

By their shared class.
By their tag name.
By a CSS-style selector that matches "paragraphs with class note".

Pop up an alert showing how many were found in each case (use the property that counts them).

Three different finder methods, plus the length property.

Walk through the list Loops let you do the same thing to every item.

Take the group of paragraphs from step 9. Write a loop that visits each one in turn and rewrites its inner contents to "Note number " followed by the loop counter — so the first becomes "Note number 0", the second "Note number 1", and so on. (Yes, computers count from zero. You'll get used to it.)

The standard counting loop pattern from the reference, the length property as the stopping point, and bracket notation to pick out item number i each time. To stitch the text and the number together, just glue them with a +. Reload — your three paragraphs should now read "Note number 0", "Note number 1", "Note number 2".

Read what the user typed Forms, fields, and the values inside them.

Build a form, give it a unique id (e.g. frm1). Inside it, place two text inputs labelled First name and Last name, each with a default value already filled in.

Below the form, add an empty paragraph with its own id.

In a script, find the form by its id, loop through every field inside it, read each field's current value, and write all the values (one per line) into the empty paragraph below.

The "find a form by its id" method, the property that lists a form's fields, the one that holds each field's typed value, and a loop to walk them.

A security thought experiment Why we never trust raw input from a stranger.

Two of the items in your reference — the one that reads session cookies, and the one that opens a new browser window — can be combined by an attacker to steal a logged-in user's session. This is called a cross-site scripting (XSS) attack.

Do not actually build this. Instead, at the very bottom of your file, add an HTML comment that explains, in your own words:

What an XSS attack is and roughly how those two pieces fit together.
Why a real website should never paste user-submitted text directly into the page without cleaning it first.

Submit your finished index.html. You've now used every tag and method in the reference at least once.

The Beginner's HTML & JavaScript Companion