# 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:
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!
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:
HTML:
CSS:
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.