Page 1

SFDV2001 Web Development Lab Exam Instructions:  ANSWER ALL QUESTIONS  READ and understand the question carefully before writing the answer.  WRITE the answer in your answer sheets

Name: ID: Time: 90 minutes Marks: 20 (5% of course)

Q1. [HTML/CSS- 5 marks] Write the HTML and CSS (internal style sheet) that will show the following web page exactly as it is shown below.

H1 P

H2

Body background color should be orange

H1 should have dotted border and text should be aligned to the middle as shown above. H1 width should be 80% and its font color should be white as shown above

H2 font color should be #FFFF99 and should be aligned to left

Paragraph (p) should have font color white and its width should be 80%

Use internal style sheet only for all styles above. Q2. [HTML tables - 3 marks] Write the HTML code to generate the following page which has a H1 and a table as shown below. Your HTML should generate the page exactly as shown below.


Q3. [Loops – 2 marks] Write the JavaScript code to print all even numbers between 1 and 100 using a for loop. Q4. [JavaScript validation – 5 marks] Complete the verifyRegForm() JavaScript function for the registration form given below. For your answer write only the JavaScript function. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Registration Form</title> <script language="JavaScript"> function verifyRegForm() { //......... //Write the JavaScript code to check if all the three fields //are filled and that age is a number….. } </script> </head> <body> <h2>Registration form</h2> <i> Please fill all the form fields</i> <br /><br /> <form name="regForm" action="#" onsubmit="verifyRegForm()"> FullName : <input type="text" name="fullName"> <br /><br /> Email : <input type="text" name="email"> <br /><br /> Age : <input type="text" name="age"> <br /><br /> <input type="submit" value="Register"> </form> </body> </html>

The validations that you need to do when the user submits the form are  Check if all the three fields are filled if they are not shown an alert with the appropriate message.  Check if age is a number if it is not show alert that age cannot be a number.


Q5. [JavaScript – 5 marks] Write the JavaScript functions calcArea() and calcPerimeter() of a rectangle using the length and breadth values from the HTML shown below. Write only the two JavaScript functions in your answer. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Q3: Area and Perimeter of Rectangle Using JavaScript</title> <script language="JavaScript"> function calcArea() { //…………… //calculate and display the area using the formula //area = length * breadth } function calcPerimeter() { //…………… //calculate and display the perimeter using the formula //perimeter = 2 * (length + breadth) } </script> </head> <body> <h1>Area and Perimeter of Rectangle Using JavaScript</h1> <form name="areaForm" action="#"> <input type="text" name="length"> <br /><br /> <input type="text" name="breadth"> <br /><br /> <input type="button" value="Calculate Area" onClick="calcArea()"> &nbsp;&nbsp; <input type="button" value="Calculate Perimeter" onClick="calcPerimeter()"> </form> </body> </html>

SFDV2001 Lab Exam  

SFDV2001 Lab Exam

Read more
Read more
Similar to
Popular now
Just for you