Laboratory Experiments:
1. Create an XHTML page that provides information about your department. Your XHTML page must use the following tags:
a) Text Formatting tags
b) Horizontal rule
c) Meta element
d) Links
e) Images
f) Tables (Use of additional tags encouraged).
2. Develop and demonstrate the usage of inline, external and internal style sheet using CSS. Use XHTML page that contains at least three paragraphs of text, listed elements and a table with four rows and four columns.
3. Develop and demonstrate a XHTML file that includes Javascript script for the following problems:
a) Input : A number n obtained using prompt Output : The first n Fibonacci numbers
b) Input : A number n obtained using prompt Output : A table of numbers from 1 to n and their squares using alert
4. Write a JavaScript program to generate n number of random numbers and store them in an array. Sort the generated numbers in ascending order using array sort method. Develop separate functions to find mean and median of numbers that are in the array. Display the results with appropriate messages.
5. Create a XHTML document that describes the form for taking orders for popcorn. Text boxes are used at the top of the form to collect the buyer’s name and address. These are placed in a borderless table to force the text box align vertically. A second table to collect actual order. Each row of this table names a product, displays the price, and uses text box with size 2 to collect the quantity ordered using tag. The payment method is input by the user through one of four radio buttons. Provide provision for submission of order and clear the order form.
6. Develop, test and validate an XHTML document that has checkboxes for apple (59 cents each), orange (49 cents each), and banana (39 cents each) along with submit button. Each checkboxes should have its own onclick event handler. These handlers must add the cost of their fruit to a total cost. An event handler for the submit button must produce an alert window with the message ‘your total cost is $xxx’, where xxx is the total cost of the chose fruit, including 5 percent sales tax. This handler must return ‘false’ (to avoid actual submission of the form data). Modify the document to accept quantity for each item using textboxes.
7. a) Develop and demonstrate, a HTML document that collects the USN (the valid format is : A digit from 1 to 4 followed by two upper-case characters followed by two digits followed by three upper-case characters followed by two digits; (no embedded spaces are allowed) from the user. Use JavaScript that validate the content of the document. Suitable messages should be display in the alert if errors are detected in the input data. Use CSS and event handlers to make your document appealing.
b) Modify the above program to get the current semester also(restricted to be a number from 1 to 6)
8. Develop and demonstrate a HTML file which includes JavaScript that uses functions for the following problems:
a. Parameter: A string Output: The position in the string of the left-most vowel. b. Parameter: A number Output: The number with its digits in the reverse order.
9. Develop and demonstrate a HTML5 page which contains
a) Dynamic Progressive bar.
b) Display Video file using HTML5 video tag.
10. Develop and demonstrate, using JavaScript script, a XHTML document that contains three short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible. Modify the above document so that when a text is moved from the top stacking position, it returns to its original position rather than to the bottom.
11. Develop a simple calculator to perform arithmetic (addition, subtraction, multiplication and division) operations on given two numbers. Use an HTML tag that allows the user to input two numbers and to display the result of arithmetic operation. Write suitable HTML and JavaScript and CSS to your simple calculator. The following figure show sample document display.
12. Design an XML document to store information about a student in an engineering college affiliated to VTU. The information must include USN, Name, and Name of the College, Branch, Year of Joining, and e-mail id. Make up sample data for 3 students. Create a CSS style sheet and use it to display the document.
13. Develop and demonstrate using jQuery to solve the following:
a) Limit character input in the text area including count.
b) Based on check box, disable/enable the form submit button.
14. Develop and demonstrate using jQuery to solve the following:
a) Fade in and fade out all division elements.
b) Animate an element, by changing its height and width.
Note 1: In the practical Examination each student has to pick one question from a lot of all 14 Questions.
Note 2: Change of program is not permitted in the Practical Examination.