[SOLVED] SOEN287 – Assignment #3

purpose: The purpose of this assignment is to help you learn the JavaScript and HTML documents, and dynamic documents with JavaScript.

CEAB/CIPS Attributes: This assignment is primarily evaluating your use of JavaScript and HTML, and dynamic documents with JavaScript. (Use of engineering tools).

General Guidelines When Writing Programs:

–    Refer to handout for Assignment 1 & 2

Question #1

Write a JavaScript script called “CharacterOccurences.JS” that inputs several lines of text and a search character and uses String method indexOf() to determine the number of occurrences of the character in text.

1. You have to use the external CSS file called “CSS” to set the margin of the paragraph to the value 0 (zero).
2. You have to declare in your HTML form four (04) ids :
   1. “searchString” as textarea id in paragraph with 4 rows and 55 columns
   2. “characters” as input id in paragraph with text type and size equal 5
   3. “searchButton” as input id in paragraph with button type and its value equal

“Search”

1. “output” as id in paragraph is for the final result.

1. The JavaScript file (CharacterOccurences.js) contains three (03) global variables and two (02) functions:
2. Global variables :
   1. searchStr to get the id of “searchString”
   2. ch to get the id of “characters”

• outResult to get the id of “output”

1. The function getAllDomElement() that
   1. Accesses the “searchButton” element and adds the search button using its id by using the existing the function addEventListener(), which takes three (03) arguments: (a) the name of event as a string literal (here is “click”), (b) the function searchOccurrences, and (c) the Boolean value false.
   2. Gets all id elements of “searchString”, “characters”, “output” using the existing function getElementById()
2. The function searchOccurrences() to search the character we look for and count the number of occurrences of that character.
   1. 4 local variables: count, chValue, searchStr, result.
   2. Use the functions: charAt( 0 ), toLowerCase() and indexOf().

• If the variable count equal 0 (zero) display the message: the character ch not found. Otherwise display the result.

1. At the end of the JavaScript file, finish with this line to fire the load event when a resource and its dependent resources have finished loading:

window.addEventListener( “load”, getAllDomElement, false );

Here is a sample output to illustrate the expected behavior of your program:

Question #

Write a script that contains a button (in the external file called “Counter.js”) and a counter in a <div> (in the html document called “Counter.html“). The button’s event handler should increment the counter each time it’s clicked.

1. You have to use the external CSS file called “CSS” to set the margin of the paragraph to the desired value, for example 4 or 5, etc.
2. The JavaScript file (Counter.js) contains two (02) variables and two (02) functions:
   1. Global variables: counter = 0 and dom.
   2. The function getElementBtnIncrement() that reads the counter element using the existing function getElementById() to access to the element and adds the increment button using its id by using the function addEventListener() to register the event handler, which takes three (03) arguments : a) the name of event as a string literal (here is “click”), (b) the handler function increment, and (c) the Boolean value false.
   3. The function increment() that increments the counter by 1 before and assign this new counter value to the dom variable which references the innerHtml.
3. At the end of the JavaScript file, finish with this line to fire the load event when a resource and its dependent resources have finished loading:

window.addEventListener( “load”, getElementBtnIncrement, false ); Here is a sample output to illustrate the expected behavior of your program:

Question #

You have a server-side script called “Ampersands.js” that cannot handle any ampersands

(&) in the form data. Write a script to convert all ampersands to ″ and ″ in the form field when the field loses focus element (blur).

1. Your script contains one (01) variable and two (02) functions:
   1. Global variable: dom.
   2. The function getElementAmpersand() that reads the field element by using the existing function getElementById() to access to the element using its id (″field″) specified in your HTML file by using the function addEventListener() to register the event handler, which takes three (03) arguments : (a) the name of event as a string literal (here use “blur“), (b) the handler function convertAmpersands, and (c) the Boolean value false.
   3. The function “convertAmpersands()” that converts all ampersands in the form field to ” and ” when the field loses focus (“blur“).
   4. The html document called “Ampersand.html“, which invokes the “Ampersand.js” in the head section.
2. At the end of the JavaScript file, finish with this line to fire the load event when a resource and its dependent resources have finished loading:

window.addEventListener( “load”, getElementAmpersand, false ); Here is a sample output to illustrate the expected behavior of your program:

Question #

Copy and paste the following HTML code into a new document:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head><title>Exercise 4</title>

</head>

<body>

<div id=”container”>

<h2>Order Books Online</h2>

<form action=”” method=”post” id=”frm”>

<fieldset>

<table border=”0″>

<tr>

<th>Book</th>

<th>Quantity</th>

<th>Price</th>

</tr>

<tr>

<td>Basic XHTML</td>

<td><input type=”text” size=”3″ id=”book_1″ /></td>

<td>$19.99</td>

</tr>

<tr>

<td>Intro to PHP</td>

<td><input type=”text” size=”3″ id=”book_2″ /></td>

<td>$86.00</td>

</tr>

<tr>

<td>Advanced JQuery</td>

<td><input type=”text” size=”3″ id=”book_3″ /></td>

<td>$55.00</td>

</tr>

</table>

<br /><br />

<input type=”submit” value=”Place Order” id=”sub” />

</fieldset>

</form>

</div>

</body>

</html>

Write JavaScript code that is executed during form submission to calculate the cost of each book (based on quantity specified) and the overall total cost. The results should be displayed on the same page beneath the form submission button. Use any CSS at your discretion if desired.

All JavaScript code must be external. If any fields are left blank or do not contain a number, an alert box should display an appropriate error message upon form submission.

The resulted page looks like the following.

Question #5

The running problem to build a website of apartment search (To be continued in Assignment 4). We resume the Nancy’s Apartment Search Web site in Assignment 1. Please create another section called “Expert suggestions” after the section of “What you are looking for”. Style it properly and make it invisible at first. Once the user’s selections meet the following criteria, use JavaScript to insert the suggested text into this section and make it visible.

• If the size is “More than 51/2” and the location is “Downtown”, show the expert suggestion after “Downtown” is selected: “It is very difficult to find an apartment larger than 51/2 in downtown”.
• If the size is “4 ½” and above, the location is “Downtown”, and the price range is less than 1000$, show the expert suggestion after 1000$ or less options are selected: “Normally an apartment of 4 ½ and above costs more than 1000$ in downtown area”.