Web Design/JavaScript pen-n-paper activities

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: Testing your Javascript skills  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;  The fields marked with an asterisk (*) are required fields: *First Name:  *Last Name:  

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:
 * 1) go back to your computer,
 * 2) copy-n-paste the code into your text editor,
 * 3) fix all the errors that you've found,
 * 4) 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! Fill in the blanks!  .......... toggleEmail {     var mycheckbox = document.getElementById(".........."); var myhiddenpara = document.getElementById(".........."); if (mycheckbox........... == ..........) {       myhiddenpara.style.display=".........."; }     else {       myhiddenpara.style.display=".........."; }   }   /* make the email paragraph hidden to begin with */ #emailpara {.......... : ..........} 

Email subscriptions

 Yes! I would like to receive the occasional newsletter via email

Email Address: 

When you've filled in all ten blanks, you might want to check with someone else's answers, or:
 * 1) go back to your computer,
 * 2) copy-n-paste the above code,
 * 3) fill in the blanks,
 * 4) 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:       <textarea name="         " id="              " > <textarea name="         " id="              " >

CSS: 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.
 * 1) emailpara

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.

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?

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:

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.

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.