Exercise 1: Basic HTML and JavaScript Question 1: Table Create HTML markup that produces the table as shown in Figure 1. Figure 1 Question 2: Spacing Spacing can be added using CellSpacing and CellPadding to a table. Create HTML markup that produces the table as shown in Figure 2. Figure 2
Question 3: Form Create HTML markup that produces a form as shown in Figure 3. Note that when the button submit is clicked, the form will be submitted to an email address that you specify. Question 4 Figure 3 JavaScript is an interpreted scripting language. The code can be incorporated using the <script> tag to the html document as follows:
<script type= text/javascript > As the first example, the code document.writeln("<h1> Hello world </h1>"); simply displays the words Hello world using h1 header in the browser. <head> <title> First example </title> document.writeln("<h1> Hello world </h1>"); </head> <body> </body> </html> (a): Case sensitive? Using the above hello world example, test whether JavaScript is case sensitive. You can replace writeln by WRITELN to see the result. (b): Alert and prompt windows Two commonly used pop-ups in JavaScript are the alert and the prompt windows. Their formats for usage are as follows: var name = window.prompt ( Enter your name please, myname ); window.alert ( hello +name); User is requested to enter the name through the prompt window and a greeting message is displayed using the alert window. <head> <title> Second example </title> var name = window.prompt ("Enter your name please", "myname"); window.alert ("Hello! " + name); </head> <body> </body> </html> 1. A prompt window is displayed in which the user enters the name. 2. After the user presses OK, a greeting message is displayed.
Modify the above example, so that two prompt windows appear one by one. The first prompt window asks for user s name while the second asks for the user s student id. The student id would be printed on the html document while the greeting message appears in the alert window. (c): investigate the use of parseint or parsefloat functions. (i) Run the following program, and investigate the use of the function parsefloat. <head> <title> Third example </title> function maximum (x,y) { return Math.max(x,y); var input1 = window.prompt("enter a number: ", 0); var input2 = window.prompt("enter another number: ", 0); var value1 = parsefloat(input1); var value2 = parsefloat(input2); var maxvalue = maximum(value1, value2); var add1 = input1 + input2; var add2 = value1 + value2; document.writeln("<h1> First number: " + value1 + "</h1>"); document.writeln("<h1> Second number: " + value2 + "</h1>"); document.writeln("<h1> maximum: " + maxvalue + "</h1>"); document.writeln("<h1> add1: " + add1 + "</h1>"); document.writeln("<h1> add2: " + add2 + "</h1>");
<head> <body></body> </html> (ii) Modify the example in (i) to prompt user to input three numbers. The first two numbers should be concatenated into one single number. A new function sum(x,y) is then used to calculate the sum of this concatenated number and the third input number. The two numbers and the sum should be printed on three separated lines. As an example, the user has inputted three numbers as 1, 2, and 3. The first number and the second number are concatenated to form 12. This is added to 3 to give a sum of 15. These numbers are then displayed as follows. (d): Control structures The following table summarizes syntax for a few control structures in JavaScript. Decision Structure Syntax Example if if (condition) if (a > b) min=b if/else if (condition) else if (a > b) min=b else min=a while while (condition) do-while do { while (condition) for for (initialization; condition; increment) { switch switch(choice) { case 1 : statements; break; i=0; while (i<10) i++; i=0; do { i++ while (i<10) for (i=0;i<10;i++) a=i*i;
case 2 : statements; break; default: statements; (i) The following code shows an example of calculating the sum of an input integer n by using the switch statement. The integer n must be greater than 0, but cannot be larger than 3. <head> <title> Fourth example </title> var input = window.prompt("enter a number (1-3) : ", 0); var value = parsefloat(input); var sum = 0; if ((value < 0) (value > 3)) { window.alert ("The number is out of range!"); else { switch (value) { case 3: sum += 3; case 2: sum += 2; case 1: sum += 1; document.writeln("result: " + sum); </head> <body> </body> </html> Modify the above codes so that user is allowed to input the number between 1 and 5. You should still use the switch statement. (ii) When the range is getting large, the number of cases in the switch statement will increase. A for-loop can be used to replace the switch statement. Modify the code in (i) using the for-loop so that user is allowed to input a number between 1 and 45. (iii) Modify (ii) so that if the user inputs an out-of-range number, the user is allowed to input the number again until the number is within the range by using a do-while loop.