Hint: Don’t try these exercises ‘closed-book’.
Use past exercises, examples from the reference
guide and / or online resources like w3schools.
Exercise 1: Changing content and styles
Create a website with a heading, two paragraphs and a picture. Use javascript to:
● Set the text of the first paragraph to “Hello there!”
● Set the text of the second paragraph to “Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean iaculis nec lectus consectetur iaculis. ”
● Set the color of the second paragraph to “red”
● Set the picture to “dog.jpg”
● Set the width of the picture to 400.
Exercise 2: Variables
Create a website with a paragraph. Use javascript to:
● Create two new variables named name and score.
● Set the value of name to “Johnny”
● Set the value of the score to 10
● Set the text of the paragraph to “Hello “ + name + “. Your score is “ + score.
Exercise 3: Conditions
Create a website with a script including a variable age. When the website starts up the alert
dialog should pop up.
● If the age variable is smaller than 18 the alert popup should say “Hey there kiddo”
● If the age variable is exactly 18 the alert popup should say “You are exactly 18”
● If the age variable is larger than or equal to 35 the alert popup should say “Hello
sir/madam”
● In all other cases the alert popup should say “Hello”
Exercise 4: Functions
Create a website with 2 paragraphs. Use javascript to:
● Create two functions. One named average and the other named sum.
● The function named sum:
○ Has three parameters as input
○ Returns the sum of the three parameters as output
● The function named average:
○ Has three parameters as input
○ Returns the average of the three parameters as output
● Use the functions to get the sum and average of 5, 6 and 10
● Set the innerHtml of the first and second paragraphs to check your result
Exercise 5: Events
Create a website with a picture of a dog and two buttons below. The buttons should read ‘cat’
and ‘dog’. The width of the picture should be 300 and the height of the picture should be 400.
● When the image loads an alert should appear saying “Image loaded successfully”. (Hint:
use the event onload)
● When the user clicks on the button ‘cat’ the image should turn into the image of a cat.
(Hint: use the event onclick)
● When the user clicks on the button ‘dog’ the image should turn into the image of a dog.
(Hint: use the event onclick)
● When the user hovers with the mouse over the image, increase the width to 400 and
increase the height to 500. (Hint: use mouseover)
● When the user moves the mouse off the image, set the width back to 300 and set the
height back to 400. (Hint: use mouseout)
Exercise 6: Outputting data
Create a website with a paragraph and with four buttons with the text “innerHTML”, “Alert”,
“Console” and “Overwrite the HTML”.
● When the button “innerHTML” is clicked then set the text of the paragraph to “Button
Clicked!”
● When the button “Alert” is clicked then call an alert with the test “Button Clicked!”
● When the button “Console” is clicked then use console.log() to send the message
“Button Clicked!” to the console
● When the button “Overwrite the HTML” is clicked use document.write(...) to write “Button
Clicked” to the webpage. (Note: this will make the paragraphs and the 4 buttons
disappear)
Exercise 7: Getting user input
Create a website with two paragraphs and a button. The first paragraph should read “Horror
show!”. The second paragraph is empty. The button should read “Continue”.
● When the user clicks on the button we get a confirm dialog reading “You must be 18 or
older to continue. Click ‘Ok’ if you are 18 or older. Otherwise click cancel”
● If the user clicks ‘Ok’ we get a prompt dialog that says “Please enter your greatest fear”
● Next we enter a text to the second paragraph saying “you are attacked by a “ + the text
that the user input.
Exercise 8: Showing and hiding
Create a website with a paragraph with the text “This is a secret message”. After the paragraph
include two buttons with the text “Show message” and “Hide message”. Then create a script:
● Write code which hides the paragraph as soon as the page is loaded. Use the
style.visibility attribute.
● Write a function which hides the paragraph using the style.visibility attribute.
● Write a function which shows the paragraph using the style.visibility attribute.
Repeat the exercise, but use style.display instead. What is the difference?
Exercise 9: Loops
Use a for-loop to count from 1 to 10 and output the countdown to the console.
Use a for-loop to count down from 10 to 0 and output the countdown to the console.
Javascript can create lists. These lists are called arrays. Use the following line of code to create
an array:
let myArray = [“apples”, “oranges”, “bananas”, “grapefruits”]
Use a for-in loop to go through each of the elements in this array one-by-one and write to the
console “I love apples”, “I love oranges”, etc …
We start with the number 1. How many times do we need to double it until we end up with a
number greater than 1000. Use a while loop to find out.
Exercise 10: Timing
Create a website with a paragraph with the text ‘-’ and three buttons ‘Start’, ‘Stop’ and ‘Reset’.
● Declare a new variable named counter.
● Create a function named ‘update_counter’ which increases the counter by 1 and sets the
innerHTML of the paragraph to the counter value.
● Create a function which uses setInterval to call the update_counter function every
1000ms. Link this function to the start button.
● Create a function which uses clearInterval to stop the timer. Link this function to the stop
button.
● Create a function named ‘reset_counter’ which sets the counter to 0 and the innerHTML
of the paragraph back to ‘-’.
● Create a function which uses setTimeout to wait for 2000 ms and then calls the
reset_counter function.
