Scribd
Upload
221 views

Practical 10 - Javascript Practical Exercise 2: AACS1483 Web Design & Development Practical 10

The document describes requirements for 5 JavaScript practical exercises: 1. Display a date countdown until New Year's using JavaScript. 2. Create a mortgage calculator that estimates monthly payments based on loan amount, interest rate, and term. 3. Create external JavaScript functions to populate form fields, calculate totals, and submit/cancel orders on a book shopping site. 4. Generate a table automatically using JavaScript that lists the first 256 HTML character entities with their numbers and symbols. 5. Create an interactive hierarchy tree where the user can select a number, which then changes color/style in the tree, and displays its power of 10 result.

Uploaded by

J2X
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
221 views

Practical 10 - Javascript Practical Exercise 2: AACS1483 Web Design & Development Practical 10

The document describes requirements for 5 JavaScript practical exercises: 1. Display a date countdown until New Year's using JavaScript. 2. Create a mortgage calculator that estimates monthly payments based on loan amount, interest rate, and term. 3. Create external JavaScript functions to populate form fields, calculate totals, and submit/cancel orders on a book shopping site. 4. Generate a table automatically using JavaScript that lists the first 256 HTML character entities with their numbers and symbols. 5. Create an interactive hierarchy tree where the user can select a number, which then changes color/style in the tree, and displays its power of 10 result.

Uploaded by

J2X
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

AACS1483 Web Design & Development Practical 10

Practical 10 - JAVASCRIPT PRACTICAL EXERCISE 2

Question 1
 Design a screen as shown in Figure 1.
 Set the New Year date on “January 1, 2021”.
 Display current date and the number of days left until New Year in DayCount.htm.

Figure 1

Question 2
The mortgage finance officers at Frontier Savings and Loan have asked you to create a
mortgage calculator that customers can use to estimate monthly mortgage payments. Your
web page should contain a form in which the customer enters the loan amount, the number
of monthly payment, the yearly interest rate, and then clicks a button to see what is the
monthly payment and total payments for the loan. A function named show_Value() is used
to calculate the monthly payment as follows:

r = yearly interest rate


N = number of monthly payments
S = loan amount

Formula applied is

(S* r/12 * Math.pow(r/12+1,N))/ (Math.pow(r/12+1,N)-1)

Note that this function uses the Math.pow() method, which calculates the value of a
base value raised to an exponent;

Math.pow(a,n) = an
Once you know the value of the monthly payment, the total amount paid is simply
the monthly payment multiplied by the total number of payments.

Based on the above descriptions and requirements, create the HOME LOAN MORTGAGE
web page using XHTML and JavaScript.

a) Open mortgagetxt.htm as shown in Figure 2. Save as filename mortgage.htm.

b) Write the following functions in head section of mortgage.htm:

Tunku Abdul Rahman University College Page | 1


AACS1483 Web Design & Development Practical 10

(i) checkform() function to ensure that user has entered the loan
amount, yearly interest rate, number of payment fields. Display an alert message
to user if he/she does not enter any of the required field and set focus back to
the field that is missed out.

(ii) calculate() function to execute checkform() function and compute the


monthly and total payment. Display the result in 2 decimal places number.

(iii) Add an event handler to the calculate button that runs the calculate()
function when this button is clicked.

Figure 2

Question 3

a) Create an external javascript file named “general.js” that contain the following
declaration:
public name;

b) Open Book_select_txt.html as shown in figure 3. Save as filename Book_select.html.


Create the JavaScript functions in the following in “Book.html”:

i. Insert a statement in <head> section to access to the external JavaScript file created
in part (a).

ii. Create a startForm() that will be executed when the form is loaded :
 Display the current date into the Order Date field with id “date”.
 Prompt user for their name and display in Customer Name field with id
“customerName”.
 Set focus in Tel No field with id “telNo”.
 Set the default status of the status bar to “CPS Book Shop”

iii. Create a display() function that will be executed when the book selection list (e.g. id
“desc1”) is changed:
 Check if the selected index is not equal to 0 (zero),
 Then display the book price in the respective text box (e.g. id “price1”), and

Tunku Abdul Rahman University College Page | 2


AACS1483 Web Design & Development Practical 10

 Make the respective quantity selection list (e.g. id “quantity1”) to be enabled and
set focus on to the object.
iv. Create a sub() function that will be executed when the quantity selection list (e.g. id
“quantity1”) is changed:
 Calculate the Amount of the book purchased by multiplying the book object’s
price and the quantity selected.
 Display the Amount in the respective text box (e.g. id “Amount1”)

v. Create a calculate() function that will be executed when the Calculate button is
clicked:
 Calculate the Total Amount by adding the values displayed in all the Amount text
boxes.
 Display the Total Amount by using dynamic content scripting (object.innerHTML)
into the id “totalAmount”. Display the total amount in the format “RMxxx.xx”.

vi. Create a Submitted() function that will executed when the Submit Order button is
clicked:
 Display a confirm dialog box (figure 4) to ask the user “Are you sure to submit the
book order?”
 If user clicks on OK button, navigate the page to success.html.
 If user clicks on Cancel button, remain to the same page.

vii. Write an onclick event handler for Cancel Order button to display a confirm dialog
box (figure 5) to ask user “Are you sure to cancel order?”. If user clicks on Ok button,
close the window, else reload the form page. Use conditional statement, syntax :
(condition)? True-action: False-action;

c) Open Successtxt.html. Save as filename Success.html. Insert a <script> element within


the <b> element to display the name of the customer, which is store inside the public
variable name.

Figure 3

Tunku Abdul Rahman University College Page | 3


AACS1483 Web Design & Development Practical 10

Figure 4 Figure 5

Question 4

Chloe MacDonald runs a Web site that contains information on Web page design. She often
finds it necessary to look up the character entity numbers for the Web pages that she
designs. Chloe would like to have this information placed in an easy-to-use table for herself
and for her readers. Rather than entering all 256 character entities into a table, she would
like to use JavaScript to generate the table automatically for her. She’s asked for your help
in writing a JavaScript program to create a 16-by-16 table that display the first 256 character
entities with the entity number and corresponding symbol for each. The design and layout
of the page is up to you. One possible solution is as shown in Figure 6.

Based on the above descriptions and requirements, create the HTML Character Entities web
page JavaScript For Loop structure.

Figure 6

Tunku Abdul Rahman University College Page | 4


AACS1483 Web Design & Development Practical 10

Question 5
Open Q5_txt.html , rename the file Q5.html to and make necessary changes on it.

1. Create a hierarchy tree from 1 to 10 as show in figure 7.


2. Create a popup box to prompt for user input for a number (1 to 10). Based on user
input, the number will change to red color and bold font in hierarchy tree.
3. Show the result of power 10 of the input number.

Figure 7: The dialog prompt for user input

Figure 8: After the user input, below is the output of the page

Tunku Abdul Rahman University College Page | 5

You might also like