JavaScript Exercises

The exercises below get you started with JavaScript (JS). Try to follow the instructions and write down your answers not only your program but as well your reasoning. I dont care how you document your reasoning, either as comments of the JS program, as Word document, on a paper, or in whatever way you prefer but it is important that you write your reasoning down. The observation that I make on myself is that if Im not writing down the reasoning to that type of questions, I have the impression that I have the solution for the problem whereas in fact as it turns out later I dont. It is normal to get stuck with at least one of the exercises. Dont hesitate to first ask your friendly neighbor (but dont let them touch your mouse and keyboard!!). If that doesnt help, you are asked to talk to me! Teamwork is appreciated tough it is important that you touch mouse and keyboard yourself. So talk to your neighbor about how to conceptually solve the problem but dont let them touch your mouse and keyboard! Feel free to expand the exercises and solve your own tasks! Expanding and exploring is much appreciated and I truly believe that in the end, this is the only way to get a really good feeling for a language. On \\mail\students\it-workshop\9-css\ you can find the solutions for the exercise. Refrain from consulting them before you really have been fighting there are no shortcuts on the way to learn how to program!

1. Open an Alert Box

Your first task is to open an alert box as soon as the page is loaded. Create a file 1alert.html and add the code to this file; you can basically copy the example from the slides. This is an easy exercise but it gets you started with JavaScript.

2. Open an Alert Box by Clicking on a Link

Define a link that opens an alert box if you click on it. Again, you can more or less copy the example from the slides. Solve this exercise in the file 2-alert.html.

3. Include JavaScript from a Separate File

Create a file named 3-alert.js. Include this file in the file 3-alert.html. The slides contain an example on how to do that. Copy the function showHello() from the slides into the file 3-alert.js and copy as well the link from the slides into 3-alert.html. Click on the link and the alert box should show up.

4. Add a Comment
At the beginning of the file 3-alert.js, add a comment that describes what is happening in this file. A possible comment could be: /* This function opens an alert box that greets you ;-)! */

5. Define a Variable
Create files 5-variable.js and 5-variable.html. In 5-variable.js, add the function showHello() from Exercise 3. Instead of directly outputting the message Hello, you save this message into a variable. Make sure that you choose a valid name for the variable consult the slides! Use then the variable to output the message. In the end, your 5-variable.js should look more or less like this: function showHello() {

var message = "Hello"; alert(message); } Include the file 5-variable.js into 5-variable.html and call the function with the help of a link (as you did in Exercise 3).

6. Getting Input from the User with prompt()

Create files 6-prompt.js and 6-prompt.html. In 6-prompt.js, add the following code: /* Prompts the user for two numbers. The two numbers * are then added and returned to the user with the help * of an alert box. */ function add() { var firstNumberAsString = prompt("First number:", ""); var firstNumber = parseFloat(firstNumberAsString); var secondNumberAsString = prompt("Second number:", ""); var secondNumber = parseFloat(secondNumberAsString); var result = firstNumber + secondNumber; alert(firstNumber + " + " + secondNumber + " = " + result); } In 6-prompt.html, add a link that calls the method add() the same way as you have done in Exercise 3. Click on the link and try to figure out what the program exactly does. For every line of the program, add a line with a comment that describes what exactly happens on that line.

7. Getting Input from the User with prompt() Second Part

Create files 7-prompt.js and 7-prompt.html. Copy the code from 6-prompt.js to 7prompt.js and remove the following two lines: var firstNumber = parseFloat(firstNumberAsString); var secondNumber = parseFloat(secondNumberAsString); Replace the last two lines of add() with the following code: var result = firstNumberAsString + secondNumberAsString; alert(firstNumberAsString + " + " + secondNumberString + " = " + result); 7-prompt.html uses the same mechanism to call add() as 6-prompt.html does. Click on the link, fill in two numbers and describe what you observe. Try to explain why you get the result that you get.

8. Getting Input from the User with prompt() Third Part

Open the file 6-prompt.html in your browser and click on the link. Instead of writing numbers into the prompt window, you write Hello and World. Observe what happens and try to explain what needed to be added to the program to deal with that situation. Id like to get a conceptual explanation and not how you would technically do it.

9. Multiplying two Numbers

In Exercise 6, we have seen how we can prompt the user for two numbers, add the numbers, and return the result. Modify the example from Exercise 6 and allow the user to multiply two numbers. Use the files 9-multiply.js and 9-multiply.html.

10. Division of two Numbers

Again, copy Exercise 6 and adapt it in such a way that it divides the first number by the second one. Unlike the addition and the multiplication, the division has a small trap hidden. Try to think of a special case that could be dangerous. Add a comment to your program that describes this danger but do not handle it. Well come back later on and modify this program. Use the files 10-division.js and 10-division.html.

11. Test the Equality of two Inputs

And another time, we copy Exercise 6; but this time we adapt it a bit differently. Instead of executing a mathematical operation on the two input numbers, we execute a boolean operation. Your task is to test whether the two numbers are equal and return the result with the help of the alert() box. Notice that equality of two variables can be tested with the help of ==. Test your implementation with different input values. What result do you get for the numbers 1 and 1.0? Does that make sense? Can you modify your program in such a way that you get a different answer for that question? Use the files 11-equality.js and 11-equality.html.

12. Find the Larger Input

We use again the Exercise 6 as the basis for this exercise. We ask the user again for two numbers but this time, we return only the larger one. That means, you have to use an if and an else to decide which of the two inputs is larger. Notice that > can be used to compare two numbers. Use the files 12-compare.js and 12-compare.html.

13. Find the Larger Input Second Part

In Exercise 12, we did not handle the case where the two numbers are equal. In this exercise, we would like to return a special message to the user in case that the two input numbers are equal. To do so, use the following construction: if (...){ // a } else if // a } else { // a }

message (...) { message message

Use the files 13-compare.js and 13-compare.html.

14. Compute the Sum of the Numbers from 1 to X

With the help of prompt(), ask the user for a number as input. With the help of a for loop, compute the sum of the numbers from 1 to the input number and return this result to the user with the help of an alert() box. Assume e.g. that the input provided by the user is 10. We would like to return the sum 1+2+3+4+5+6+7+8+9+10.

What happens if you use 10.2 as an input? Does that make sense? What happens if the user inputs a letter instead of a number? Use the files 14-sum.js and 14-sum.html.

15. Compute the Factorial

As above, ask the user for an input with the help of prompt(). With the help of a for loop, compute the factorial of the input number. E.g. for the input 4, we would like to return 1*2*3*4 as a result. Use the files 15-factorial.js and 15-factorial.html. What happens if you use 4.2 as an input? What happens if you use 200 as an input? What is the biggest factorial that you can compute? How do the execution times of 14sum.js and 15-factorial.js compare on the same input say 10? I dont want you to stop the time but Id like to get a conceptual explanation. Can you compare other aspects of the two programs?

16. JavaScriptKara
Getting bored? Already done with all the exercises? Open the file d:/itworkshop/javascriptkara-en.jar and solve a few of the exercises that are provided. I suggest that you start with the easiest ones and work your way to the top, e.g. as follows: 1. Kara, the tunnel seeker I 2. Kara, the tunnel seek II 3. Searching cloverleafs in a forest I 4. Searching cloverleafs in a forest III 5. Kara and the cloverleafs 6. PacMan with cloverleafs 7. Follow trees 8. Slalom 9. Draw spirals 10. Draw triangles 11. Searching cloverleafs in a forest II 12. Mazes