Embed Size (px)
Citation preview
JavaScript Challenges
Answers for challenges 1 - 7
Challenge 1Create a page that when it loads an alert box pops up on the screen and displays some alert text.
Here we have an html file with a link to an external .js file.
On the .js file we use the window.onload = initAll; event handler to run the initAll() function that pops up the alert box.
Note there is no javascript on the html page.
Challenge 2
Create a page with an ID attribute on the <body> tag. Then make a link to a .js file that runs a function when the page loads that changes the background color of the page.
Hint: to do this you will need document.getElementById()
Here we have an html page where the <body> tag has an ID. Our external .js file runs an initAll function that sets the background color of the page to red.
Challenge 3
Create a page that when it loads runs a script that asks the user to confirm something. If the user clicks OK, an alert box pops up that indicates that they confirmed.
If they click cancel, an alert box pops up indicating that they did not confirm.
We don't need anything special on our html page for this challenge, just the link to our external .js file.
On the .js file we use the onload handler to run the init all function that has the confirm box.
Challenge 4
Take the page and script you created for challenge 3 and add to it. Make it turn the page green after the user clicks OK on the confirm box. If the user clicks cancel on the confirm box, the page should turn red.
The html in challenge 3 does not change at all. Here we just add the line we used in challenge 2 inside the if statement and inside the else statement.
Challenge 5
Write a function that prompts the user to type in their name. If the user types in their name and presses OK an alert pops up that says "you said your name is.." and then displays the name.
If the user clicks cancel, an alert box comes up saying "you refused to give me your name").
The html for challenge 5 does not change from challenge 3 or 4. Just make sure you are linking to the correct .js file.
We use the window.onload handler to run the initAll function which prompts the user for input.
Challenge 6
Repeat challenge 5 but change it so that it does not pop up an alert box with the persons name in it or an alert box indicating that the user refused to put in a name.
Instead have the script change the text that is in a paragraph on the page. Do not use document.write to do this. Put an ID on the paragraph on the page and then use getElementById and innerHTML to change the text in the paragraph.
Now we have to change the html. We just need to add a paragraph with an ID.
The .js file for challenge 6 looks similar to challenge 5. We start with the window.onload event handler as usual, then our initAll function runs.
Instead of using the alert() function, we are using getElementById to grab the paragraphy with the ID from the html file, and we are using innerHTML to change the text in that paragraph.
Note that the variable "answer" is getting concatenated on the end of the sentence.
Challenge 7
This time take challenge 6, but instead of having the user enter their name, have the user enter a number. Use parseInt() to take that number and assign it to a variable. Then double the number and replace the text in the paragraph with something that says, "The number you typed doubled is …" and then the number.
If the user does not type a number, or clicks cancel, the paragraph text will be replaced with, "You did not type a number".
The html for challenge 7 is exactly the same as for challenge 6. We just need the paragraph with the ID so that we can write in it.
Here we run the number a person types through parseInt() which converts it to an actual number. Then we double the number and put it in the variable called doubled. Then we use the same technique we used in challenge 6 to change the text in the paragraph.
