mytsu web

COMP 4280 Web-based Application Development Fall 2018

9. September 18 (Tuesday) Week#5

Book: Programming the World Wide Web 8th Edition by Robert W. Sebesta

Chapter 5 JavaScript and HTML Documents

window is a JavaScript object that represents the window that displays the document.

document is a property of the window object and is itself an object.

document has property arrays for forms, anchors, links, and other HTML elements.

A form is an element of the forms’ array, and itself is an array of the elements within the form.

document.getElementById(id) : returns the DOM node representing the HTML element whose id attribute matches the id argument.

document.write(string): outputs a string in HTML format to insert in the HTML document.

Document Object Model (DOM) is an application programming interface (API) that defines an interface between HTML documents and application programs.

With the DOM, users can write code in programming languages to create documents, move around in their structures, and change, add, or delete elements and their content.

Strictly speaking, an event is an object that is implicitly created by the browser and the JavaScript system in response to something happening.

An event handler is a JavaScript function in this chapter.

<!DOCTYPE html>

<html> <head> <title> radio_click.html </title>

<script>

function planeChoice(plane)

{

// Produce an alert message about the chosen airplane

switch (plane)

{

case 152: alert(“A small two-place airplane for flight training”); break;

case 172: alert(“The smaller of two four-place airplanes”); break;

case 182: alert(“The larger of two four-place airplanes”); break;

case 210: alert(“A six-place high-performance airplane”); break;

default: alert(“Error in JavaScript function planeChoice”); break;

}

}

</script> </head>

<body>

<h4> Cessna single-engine airplane descriptions </h4>

<form id = “myForm” action = “”>

<p>

<input type=”radio” name=”planeButton” value=”152″

onclick = “planeChoice(152)” /> Model 152 <br>

<input type = “radio” name = “planeButton” value = “172”

onclick = “planeChoice(172)” /> Model 172 (Skyhawk) <br>

<input type = “radio” name = “planeButton” value = “182”

onclick = “planeChoice(182)” /> Model 182 (Skylane) <br>

<input type = “radio” name = “planeButton” value = “210”

onclick = “planeChoice(210)” /> Model 210 (Centurian) </p>

</form> </body></html>

You can create the radio_click.html by copying and pasting of previous textbox text.

To Register Event Handlers Using JavaScript (use the attribute value)

<!DOCTYPE html>

<html>

<head><title> radio_click2.html </title>

<script>

function planeChoice(){

var plane;

var dom = document.getElementById(“myForm”);

// Determine which button was pressed

for (var index = 0; index < dom.planeButton.length; index++){

if (dom.planeButton[index].checked) {

plane = dom.planeButton[index].value;

break;

}

}

switch (plane) {

case “152”:

alert(“A small two-place airplane for flight training”); break;

case “172”:

alert(“The smaller of two four-place airplanes”); break;

case “182”:

alert(“The larger of two four-place airplanes”); break;

case “210”:

alert(“A six-place high-performance airplane”); break;

default:

alert(“Error in JavaScript function planeChoice”); break;

}

}

</script>

</head>

<body>

<h4> Cessna single-engine airplane descriptions </h4>

<form id = “myForm” action = “”>

<p>

<label> <input type = “radio” name = “planeButton” value = “152” />

Model 152 </label><br />

<label> <input type = “radio” name = “planeButton” value = “172” />

Model 172 (Skyhawk) </label><br />

<label> <input type = “radio” name = “planeButton” value = “182” />

Model 182 (Skylane) </label><br />

<label> <input type = “radio” name = “planeButton” value = “210” />

Model 210 (Centurian) </label> </p>

</form>

<!– Script for registering the event handlers –>

<script >

var dom = document.getElementById(“myForm”);

dom.elements[0].onclick = planeChoice;

dom.elements[1].onclick = planeChoice;

dom.elements[2].onclick = planeChoice;

dom.elements[3].onclick = planeChoice;

</script>

</body>

</html>

Focus Event

A change to a textbox can be prevented by an event handler that blurs the text box every time the user attempts to put it in focus. The blurmethod prevents an elment from being focused.

· blur()—HTML DOM method

· focus—HTML event

· value—input textbox’s property

<!DOCTYPE html>

<html>

<head>

<title> nochange.html </title>

<script type = “text/javascript”>

function computeCost() {

var french = document.getElementById(“french”).value;

var hazlenut = document.getElementById(“hazlenut”).value;

var columbian = document.getElementById(“columbian”).value;

document.getElementById(“cost”).value =

(french * 3.49 + hazlenut * 3.95 + columbian * 4.59).toFixed(2);

}

</script>

</head>

<body>

<form action = “”>

<h3> Coffee Order Form </h3>

<table border = “border”>

<tr><th> Product Name </th> <th> Price </th> <th> Quantity </th> </tr>

<tr><th> French Vanilla (1 lb.) </th> <td> $3.49 </td>

<td> <input type = “text” id = “french” size =”2″ /> </td> </tr>

<tr><th> Hazlenut Cream (1 lb.) </th> <td> $3.95 </td>

<td> <input type = “text” id = “hazlenut” size = “2” /> </td> </tr>

<tr><th> Columbian (1 lb.) </th> <td> $4.59 </td>

<td> <input type = “text” id = “columbian” size = “2” /></td> </tr>

</table>

<p><input type=”button” value = “Total Cost” onclick = “computeCost();” />

<input type=”text” size=”5″ id = “cost” onfocus = “this.blur();” /></p>

<p><input type = “submit” value = “Submit Order” />

<input type = “reset” value = “Clear Order Form” /> </p>

</form>

</body>

</html>

Blur Eventfires the moment that the element loses focus

· Register event handler programmatically:

document.getElementById(“second”).onblur = chkPasswords;

· Register event handler using the event attribute of an HTML element:

· blur(), focus(), select()—HTML DOM methods

· blur, click—HTML events

· value—input textbox’s property

<!DOCTYPE html> <!– pswd_chk.html –>

<html>

<head><title> Illustrate password checking> </title> </head>

<body> <h3> Password Input </h3>

<form id = “myForm” action = “” >

<p>Your password

<input type=”password” id=”initial” size=”10″ /><br><br>

Verify password

<input type=”password” id=”second” size=”10″ onblur=”chkPasswords();” />

<br><br>

<input type = “reset” name = “reset” />

<input type = “submit” name = “submit” id =”submit”

onclick =”chkPasswords();” /> </p>

</form>

<script>

//document.getElementById(“second”).onblur = chkPasswords;

//document.getElementById(“submit”).onclick = chkPasswords;

function chkPasswords()

{

var init = document.getElementById(“initial”);

var sec = document.getElementById(“second”);

if (init.value == “”)

{

alert(“You did not enter a password \nPlease enter one now”);

init.focus();

return false;

}

if (init.value != sec.value)

{

alert(“The two passwords you entered are not the same \n” +

“Please re-enter both now”);

init.focus();

init.select();

return false;

}

else

return true;

}

</script>

</body>

</html>

Change Event: Check the validity of the form values for a name and phone number:

JavaScript String search() method searches a string for a specified value, and returns the position of the match. The search value can be string or a regular expression.This method returns -1 if no match is found.

<!DOCTYPE html> <!– validator.html –>

<html> <head> <title> Illustrate form input validation> </title>

<script type = “text/javascript” src = “validator.js” ></script>

</head>

<body> <h3> Customer Information </h3>

<form action = “”>

<p> <input type=”text” id = “custName” onchange =”chkName();” />

Name (last name, first name, middle initial)<br><br>

<input type = “text” id = “phone” />

Phone number (ddd-ddd-dddd)<br><br>

<input type = “reset” id = “reset” />

<input type = “submit” id = “submit” /> </p>

</form>

<script type = “text/javascript”>

//document.getElementById(“custName”).onchange = chkName;

document.getElementById(“phone”).onchange = chkPhone;

</script>

</body> </html>

// validator.js

function chkName() {

var myName = document.getElementById(“custName”);

var pos = myName.value.search(/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/);

if (pos != 0) {

alert(“The name you entered (” + myName.value +

“) is not in the correct form. \n” +

“The correct form is: last-name, first-name, middle-initial \n” +

“Please go back and fix your name”);

myName.focus();

return false;

}

else

return true;

}

function chkPhone(){

var myPhone = document.getElementById(“phone”);

var pos = myPhone.value.search(/^\d{3}-\d{3}-\d{4}$/);

if (pos != 0){

alert(“The phone number (” + myPhone.value + “) is not in the correct form.\n”

+ “The correct form is: ddd-ddd-dddd\n”

+ “Please go back and fix your phone number”);

myPhone.focus();

myPhone.select();

return false;

}

else

return true;

}

Assignment #5 Web-based Application Development

Problem I Roll Dice Game from Deitel’s book Fig9.7: Game of Chance

A player rolls two dice. Each die has six faces. These faces contain one, two, three, four, five and six spots, respectively. After the dice have come to rest, the sum of the spots on the two upward faces is calculated. If the sum is 7 or 11 on the first throw, the player wins. If the sum is 2, 3 or 12 on the first throw (called “craps”), the player loses (i.e., the “house” wins). If the sum is 4, 5, 6, 8, 9 or 10 on the first throw, that sum becomes the player’s point. To win, you must continue rolling the dice until you “make your point” (i.e., roll your point value). You lose by rolling a 7 before making the point.

1. Download all the files from CrapsFiles folder from myTSU, or download Chapter9 from this link and open the download folder.

Internet & World Wide Web: How to Program, 5/e Example Downloads

http://media.pearsoncmg.com/ph/esm/deitel/iw3htp5e/examples/index.html

Rename the subfolder Fig09_07_08 as YourLastName_A5_P1_Craps.

2. First using any browser to open Craps.html and play the game.

3. Then modify this file to add the rolling results in text as shown in the following pictures.

Problem II

Modify the radio_click.html example to have five buttons, labeled red, blue, green, yellow, and orange. The event handler for each button must change the font color to be the chosen favorite color. The event handler must be implemented as a function whose name must be assigned to the onclick attribute of the radio button elements. The chosen color must be sent to the event handler as a parameter.

YourName_A5_P2_ColorClick.html

Problem III

Modify the nochange.html example to be this one. When the quantity was entered and the textbox lost the focus, the Cost should be displayed. When the Total Cost button is clicked, the total cost should be displayed in the followed textbox. Make sure using the blur method to prevent the Cost boxes and the Total Cost box from changes.

YourName_A5_P2_Cost.html

About eduhawks

Check Also

find the sum of the interior angles of a nonagon

Find the sum of the interior angles of a nonagon. (1 point) 140° 1,620° 1,260° …