Scribd
Upload
38 views

Lab03 Guide

This document contains instructions and examples for exercises in a Web Programming and Applications course. Exercise 1 demonstrates how to validate form inputs with JavaScript. Exercise 2 shows how to dynamically add an HTML element with JavaScript. Exercise 3 provides steps to add event handlers and change CSS styles with JavaScript. Exercise 4 outlines steps to create an image slideshow with a listbox and JavaScript.

Uploaded by

Mẫn Nguyễn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

Lab03 Guide

This document contains instructions and examples for exercises in a Web Programming and Applications course. Exercise 1 demonstrates how to validate form inputs with JavaScript. Exercise 2 shows how to dynamically add an HTML element with JavaScript. Exercise 3 provides steps to add event handlers and change CSS styles with JavaScript. Exercise 4 outlines steps to create an image slideshow with a listbox and JavaScript.

Uploaded by

Mẫn Nguyễn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Ton

Duc Thang University


Faculty of Information Technology


WEB PROGRAMMING AND APPLICATIONS


(503073)
WEEK 3
Prepared by Mai Van Manh

Exercise 1. To solve exercise 1, follow the these steps:

1. Add click event to Submit button.


2. Get the content of email and password fields via document.getElementById().
3. Check validility of the content.
4. Display error message via innerHTML property of the error-message object
and set focus on the corresponding input field (if necessary).
5. Hide error-message when user click on the input field which related to error-
message showing.

Exercise 2: We can use javascript to create an element (html tag), add attributes,
and add it to the existing element.
For example, if we already have this structure:

<div id="data">
<p id="hello">Hello men</p>
</div>

Now we want to add a hyperlink into the <div> and below the <p> like this:

Web Programming and Applications - Week 03 – Page 1




Ton Duc Thang University
Faculty of Information Technology


<div id="data">
<p id="hello">Hello men</p>
<a href="http://www.google.com.vn">Click here to see Google</a>
</div>

Firstly, we create a hyperlink element by using javascipt code:


var a = document.createElement("a");
a.setAttribute("href","http://www.google.com.vn");
a.innerHTML = "Click here to see Google";

and we also create reference to the <div> element:


var div = document.getElementById("data");

then we add the hyperlink to the <div> as a child of the <div>:


div.appendChild(a);

here is what we get (screenshot from Google Chrome and Inspect element):

Exercise 3: Here are steps to solve exercise 2:

1. Add events to the corresponding input fields:


a. Button: onclick
b. Checkbox: onchange
c. Select: onchange
d. Input-text: onkeyup
2. To change css properties of an object, use style property. For example, to
change background color of a table: table.style.backgroundColor = "#fff"

3. Use this as parameter of event function to send data to the function. For
example:
function checkBoxChanged(box) {
if (box.checked) {
// checkbox is checked
}else {

Web Programming and Applications - Week 03 – Page 2




Ton Duc Thang University
Faculty of Information Technology


// checkbox is not checked
}
}
<input type="checkbox" onchange="checkBoxChanged(this)">

Exercise 4: This exercise make an assumption that there are only 10 images.

Steps:
1. Use <select> tag with the property size = 10 to create a listbox.
2. Implement click event of <select>
3. To change the image, change src attribute of <img> tag:
image.setAttribute("src","abc.jpg")
4. To create a slideshow, use setInterval as demonstrated in video example.
5. To disable a button, set disabled = true for the disabled property.

Web Programming and Applications - Week 03 – Page 3

You might also like