Web Design/JavaScript pen-n-paper activities

Web Design → JavaScript pen-n-paper activities

This page is part of the Web Design project.

Sometimes it's more beneficial to think through your learning away from the computer! These activities are designed for exacly that. You might want to print them out and get together with some other learners in a sunny spot!

Spot the errors

See how many JavaScript errors you can spot in the following page:

<html>
 <head>
  <title>Testing your Javascript skills</title>
  <script type="text/javascript">
    
    function checkform
    {
      // First check whether anything has been entered
      // in the required field
      
      if (document.getElementById("lastname").value = "")
      {
         / Uh-oh, the lname field was blank! Let's let the user know!
         window alert("Please enter your last name");
         document.getElementById("lname").focus();
         return true;
      }
      
      // If our code gets this far, then both fields
      // must have had some text! Let onsubmit know
      // that all is ok by returning true!
      return true;
    
  </script>
 </head>
 <body>
 
  <form action="mailto:me@fakeemail.com" onsubmit="checkForm()">
   
   <p>The fields marked with an asterisk (*) are required fields:</p>
   
   <p>*First Name: <input type="text" name="fname" id="fname" /></p>
   <p>*Last Name: <input type="text" name="lname" id="lname" /></p>
  
   <input type="submit" value="Enter Info" />
  </form>
  
 </body>
</html>

Hint: There's currently 10 errors (if you edit this activity, please update this!).

When you think you've found all the errors you're going to find:

go back to your computer,
copy-n-paste the code into your text editor,
fix all the errors that you've found,
and test the code to see if your web browser can help you find any remaining errors!

Fill in the blanks

In the following web page, there are 10 blanks (..........) to fill in! Without looking at your own code (or anyone elses!) have a go at filling in all the blanks!

<html>
 <head>
  <title>Fill in the blanks!</title>
  <script type="text/javascript">
    
    .......... toggleEmail()
    {
      var mycheckbox = document.getElementById("..........");
      var myhiddenpara = document.getElementById("..........");
    
      if (mycheckbox........... == ..........)
      {
        myhiddenpara.style.display=".........."; 
      }
      else
      {
        myhiddenpara.style.display="..........";
      }
    }
  </script>
  
  <style type="text/css">
    /* make the email paragraph hidden to begin with */
    #emailpara {.......... : ..........}
  </style>
 </head>
 <body>
 
  <form action="mailto:me@fakeemail.com">
   <fieldset>

    <legend>Email subscriptions</legend>

    <p id="subscribepara">
     <input type="checkbox" name="subscribe" id="subscribe" ..........="toggleEmail()" />
     <label for="subscribe">Yes! I would like to receive the occasional 
      newsletter via email</label>
    </p>

    <p id="emailpara">
     <label for="email">Email Address:</label> 
     <input type="text" name="email" id="email" />
    </p>

   </fieldset>
  </form>
 </body>
</html>

When you've filled in all ten blanks, you might want to check with someone else's answers, or:

go back to your computer,
copy-n-paste the above code,
fill in the blanks,
test your code to see if your web browser finds any mistakes!

JavaScript Tag Soup

This activity may help learners work out some of the activities from Getting to know your Window, Getting to know your Document or the JavaScript Challenges in small groups, hopefully discussing what goes where and why!

Copy the following list of statements and print them out in a large font.

Javascript:

function function var var document document window window 
alert("Yep, it's working") alert("                  ") open("           ") open("           ") 
style display checked
getElementById("        ") getElementById("        ") getElementById("        ") 
if if elseif style style display display value value 
return return return true true false false
() () () () () ( ( ( ) ) ) == == = = { { { { } } } } . . . . . . . . 
toggleEmail checkForm mycheckbox myhiddenpara

HTML:

<script type="text/javascript"> </script> <form action="mailto:me@test.com" onsubmit="        "> </form>
<p> </p> <p> </p> <p> </p> <p onclick="                             "> </p>
<p onmouseover="                             "> </p> <p id="emailpara"> </p>
<input type="checkbox" name="          " id="              " />
<input type="text" name="          " id="              " />
<label for="          "> </label>  <label for="          "> </label>  
<textarea name="          " id="              " > </textarea>
<textarea name="          " id="              " > </textarea>

CSS:

#emailpara
display:
none;
{ { { } } }

After cutting out, use these bits of paper to do Getting to Know your Document and JavaScript Challenges in small groups (3-4) or individually.

JavaScript Operators Activity sheet

From our experience in school, we are usually only familiar with one group of operators – the maths operators (such as plus, minus, multiply and divide). But there are other types of operators that we need to use when creating computer programs, such as logical operators, assignment operators and string operators.

Why are they called operators? Well, they operate on numbers or strings in the same way that a doctor operates on people!

Maths (or Arithmetic) operators

Fill-in the following table, writing your own examples of the maths operators in JavaScript. The first row has been completed as an example.

Operator name	JavaScript symbol	Example usage	Result of example
Plus	+	12+4	16
Minus		12 ... 4	8
		12 .... 4	48
		12 / 4

If you are already familiar with these operators, create your own complete list of JavaScript arithmetic operators on the back of this page.

Assignment Operators

We will only be learning one assignment operator: equals. Can you guess what symbol is used for this operator?

Operator name	JavaScript symbol	Example	Result of example
Assignment		Var count ... 5;	Assign the value of 5 to the variable 'count'

Comparison (or logical) operators

The comparison operators are used to compare two objects to see if they are equal, or whether one value is greater than another. Comparison operators always return either true or false. Have a go at filling in the following table:

Operator name	JavaScript symbol	Example	Result of example (Cicle correct one)
	>	4 > 12	True or False
Is less than		4 ..... 12	True or False
	>=	12 >= 4	True or False
Is less-than or equal to		12 ..... 12	True or False
	==	12 == 4	True or False

Confusion between the '=' assignment operator and the '= =' operator is a constant source of program bugs for every programmer, so consider yourself warned!

String operators

We'll only be learning one string operator in JavaScript too... it's call the concatenation operator, as it concatenates (or joins? Why do engineers have to make everything so complicated?) two strings together.

Remember: a string is just a bunch of letters that have been strung together, like a name-necklace where the individual letters are strung together to form your name. So “Michael” is just a string where the letters 'M', 'i', 'c', 'h', 'a', 'e' and 'l' have been strung together. A string must always be enclosed in double-quotes.

Operator name	JavaScript symbol	Example	Result of example
Concatenate (or Join)		“Blue” .... “ ” .... “Mountains”	“Blue Mountains”

Even though this JavaScript symbol is also used for adding two numbers together, you can see, its behaviour is totally different when used with strings.