Create HTML and JavaScript code

Assignment Help Other Subject

Reference no: EM132384478

ICT10013 Programming Concepts Assignment - Swinburne University of Technology, Australia

This assignment contains a number of tasks for you to attempt.

There are three types of task:

Tasks labelled as "no submission required, not part of portfolio"

They are for you to attempt and practice.
They provided assistance for you to develop solutions to other tasks that are part of your portfolio.

Tasks labelled as "PASS Submission Task"

These tasks are part of your portfolio geared towards all students.
The solutions to these tasks must be uploaded for marking by your tutor.

Tasks labelled as "CREDIT Submission Task"

These tasks are part of your portfolio geared mainly towards students aiming for more than a pass grade. Of course students aiming for a pass grade may attempt and submit these tasks.

JavaScript Tasks -

Task 1 - Create these HTML and JavaScript code:

w6a.html

<html>

...

<body>

</article>

</body>

</html>

Note, <form> tags are optional here.

Insert the link to w6a.js in the <head> section..

w6a.js

function start() {

var vOutput = "";

var vVal = 1;

while (vVal <= 7) {

vOutput = vOutput + vVal + " ";

vVal++;

}

document.getElementById("output").innerHTML = vOutput;}

window.onload=start;

What numbers are displayed when this web page is loaded and the user clicks the button?

Task 2 - Modify the above JavaScript code so that:

The values shown on the web page are:

Task 3 - Suppose the code in the JavaScript file has been modified.

function start() {

var vOutput = "";

var vVal = 1;

while (vVal <= 10) {

vOutput = vOutput + vVal + " ";

vVal++;

}

document.getElementById("output").innerHTML = vOutput;

}

What is the output when the user clicks the button on the web page?

Task 4 - Suppose the code in the JavaScript file has been modified.

function start() {

var vOutput = "";

var vVal = 10;

while (vVal <= 20) {

vOutput = vOutput + vVal + " ";

vVal = vVal + 2;

}

document.getElementById("output").innerHTML = vOutput;

}

What is the output when the user clicks the button on the web page?

Task 5 - Suppose the code in the JavaScript file has been modified.

function start() {

var vOutput = "";

var vVal = 0;

for (vVal = 1; vVal <= 7; vVal++) {

vOutput = vOutput + vVal + " ";

}

document.getElementById("output").innerHTML = vOutput;

}

What is the output when the user clicks the button on the web page? Was there another loop that produced the same output?

Task 6 - Create a HTML file named w6b.html based on template_upd.html.

Add a h1 element with the value "For Loop" to the <header> section.

Add <form> tags inside the <article> section.

Add a button element.

The type attribute of the element must have the value button
The id attribute of the element must have the value execute
The text on the button must be Calculate

Add the following paragraph tag after </form>:

Create a JavaScript file named w6b.js based on template.js in the same folder as the HTML file. Link it to the html file.

Add the following code to init(): document.getElementById("execute").onclick=start;

Create a function processDeposit() that takes 3 parameters: balance, years and intRate. Within this function:

Create a for loop that will run as many times as the number of years stored in the years parameter.
Within the loop - Calculate interest using balance and intRate, add it to the balance and store the result of this formula in balance.
Return balance

Create a function named start(). Within this function:

Declare a variable numYears and initialise it to 3.
Declare a variable deposit and initialise it to 1000.
Declare a variable annualIntRate (stands for annual interest rate) and initialise it to 0.01 (1%).
Declare a variable closingBal.
Call the function processDeposit(), pass the three arguments it expects and store the returned value in closingBal.
Display closingBal in the paragraph with id msg. Make sure the balance is formatted to 2 decimal places.

document.getElementById("msg").innerHTML = "The closing balance is tiny_mce_markerquot; ...;

Load the HTML page.

Task 7 - Make sure you successfully complete task 6 as it is part of your pass task submission as stated below. Create a copy of HTML file w6b.html and rename it as w6P1.html.

The title should state "For loop"

Make sure that the <footer> section and the meta tag with the name author contain your student name and ID.

Inside the <header> section the h1 element should now have the value "Pass Task: Deposit processing"

After the <form> tag, but before the button element insert 3 text boxes with relevant ids:

one to enter number of years for the deposit term
one to enter deposit amount
one to enter annual interest rate.

After </form> and before the paragraph with id msg, add 3 more <p> elements with ids msg1, msg2 and msg3 respectively.

Create a copy of the JavaScript file w6b.js and rename it as w6P1.js. Update the <script> tag to have w6P1.js linked to the html file.

Modify the start() function from task 6 as per instructions below.

Variable numYears should store the value from the relevant textbox converted to a number.
Variable deposit should store the value from the relevant textbox converted to a number.
Variable annualIntRate should store the value from the relevant textbox converted to a number and also converted to a fraction.

Note users enter interest rate as %, e.g. 1% needs to be converted to 0.01.

Do not change call to the function processDeposit().

Change the output to display

"Deposit duration is N years" in the paragraph with id msg1, replace N with the number of years entered by the user
"Initial deposit amount is $9999" in the paragraph with id msg2, replace 9999 with the deposit amount entered by the user
"Interest rate is 9%" in the paragraph with id msg3, replace 9 with the interest rate entered by the user

Do not change the closing balance output.

Test your program with valid values.

Task 8 - Create the following html file based on template_upd.html

w6c.html

<html>

...

<body>

<button ...

</article>

</body>

</html>

For the button element.

The type attribute of the element must have the value button.
The id attribute of the element must have the value execute.
The text on the button must be Run JavaScript Code.

Create the JavaScript file w6c1.js based on template.js, link it to w6c.html

In the init() function create a statement with the onclick event that will call the start() function

In the function start()

Add the following statement at the top of the start() function: var arrPeople = ["Ted","Jo","Jim","Emma","Kate"];
Write the getElementById statement so that the code displays the number of elements in the arrPeople array in the paragraph with id output.

Task 9 - Copy the JavaScript file w6c1.js and rename it to w6c2.js

Modify the function named start()

Keep the following statement at the top of the start() function: var arrPeople["Ted","Jo","Jim","Emma","Kate"];
Modify the getElementById statement so that the first, third and fourth names of the array are displayed.

Note: There is no need for a 'while' loop or a 'for' loop to complete this task.

Hint: Simply begin by displaying the element [0] of the array.

Once successful, then display elements 2 and 3.

Task 10 - Copy the JavaScript file w6c2.js and rename it to w6c3.js

Modify the function named start()

The function must now use a WHILE LOOP to display all of the names in the array

Task 11 - Copy the JavaScript file w6c3.js and rename it to w6c4.js

Only change this single statement in your code.

Modify the statement that creates the array to: var arrPeople = ["Adele","Ted","Jo","Jim","Emma","Kate","Christopher"];

Load he web page and click the button

Your output should show 7 names.

If it doesn't, then you are not using the array.length property in your While condition.

Keep adjusting your code until it works for any number of names.

Task 12 - Copy the JavaScript file w6c4.js and rename it to w6c5.js

Replace the while loop with a for loop listing contents of the array one element per line. Load the HTML page.

Click the button. The output should show all names.

Task 13 - Create a HTML file named w6P2.html based on template_upd.html.

Make sure that the <footer> section and the meta tag with the name author contain your student name and ID.

Inside the <header> section add a h1 element with the value " Pass Task: Statistics "

Add a button element.

The type attribute of the element must have the value button
The id attribute of the element must have the value "stats"
The text on the button must be Perform Statistics

Add the following paragraph tag: <p id="msg"></p>

This element will be used to display validation and statistics messages from the JavaScript code.

Create a JavaScript file named w6P2.js in the same folder as the HTML file. Link this file to w6P2.html

Within init():

Use document.getElementByID("...") with the relevant button id to assign call to the function start() to the onclick event.

Create a function start(), no parameters.

The first line of this function must create an array which stores a list of integers based on the following rule:

The first value must be the last 2 digits of your ID
The second value is your birth month number
The next 10 values must be odd numbers between 10 and 30
The last value is the last 2 digits of your year of birth

The remainder of this function must:

List all of the values in the array separated by space or,
Display the total number of values in the array.
Display the sum of all values in the array. This task must call the function calcTotal that takes one argument - array and returns the sum of all values in the array.
Display the average of all values in the array.

Copy and Paste the HTML code from your web page into W06P.DOCX.

Copy and Paste the JavaScript code from your code editor into W06P.DOCX.

Place the Screen Captures of the web page in your browser into W06P.DOCX.

Task 14 - Create a HTML file named w6C1.html based on template_upd.html.

Make sure that the <footer> section and the meta tag with the name author contain your student name and ID.
Inside the <header> section add a h1 element with the value "Credit Task: Search"
Within the <article> section add a <label>, an input element and a button that look similar to the figure on the right. When the Search button is clicked, the start() function of the JavaScript file (below) must be called
Add a paragraph element that will be used to display the output from your JavaScript code

Create a JavaScript file named w6C1.js in the same folder as the HTML file. Link this file to w6C1.html

Create a function named start() and link it to the onclick event of the button.

Within the start() function:

The first line must create an array which stores 14 integers between 10 and 30 (note some values should appear 2 or 3 or 4 times).
The remainder of this function must: Determine if the value entered in the input box matches any of the values in the array and if the value is on the list, count how many times it appears on the list.

Note you should NOT be using any array methods from the JavaScript library.

Screen Capture at least the following 4 tests

1 value that appears in the array only once
2 values that appears in the array more than once
1 value that does not exist in the array

Copy and Paste the HTML code from your web page into W06C.DOCX.

Copy and Paste the JavaScript code from your code editor into W06C.DOCX.

Place the Screen Captures of the web page in your browser into W06C.DOCX.

Attachment:- Programming Concepts Assignment Files.rar

Reference no: EM132384478

Questions Cloud

Idea of the collaborative organization : How can your organization or an organization that you are familiar with benefit from being a collaborative organization?

Build a good strategy execution : Analyze how a company's ethics, corporate social responsibility, environmental sustainability, and strategy can build a good strategy execution - people

Write a brief summary of the situation : Make a list of things with an explanation that can be done to resolve the issues at hand and possibly prevent further conflict. This list should have some.

Influence a company decisions : What kind of power might a local community use to influence a company's decisions?

Create HTML and JavaScript code : ICT10013 Programming Concepts Assignment - Swinburne University of Technology, Australia - Create HTML and JavaScript code

Introduction of the organization and organizational strategy : Introduction of the organization, Organizational strategy, Organizational design and your assessment of effectiveness.

Articulate and frame the issue : Develop coherent paragraphs or points so that each is internally unified and so that each function as part of the whole document or presentation.

HRM300 Fundamentals Of Human Resource Management Question : HRM300 Fundamentals Of Human Resource Management assignment help and solutions, University of Phoenix, assessment help - Assess?why providing a robust total.

Describe the steps of an interview : Describe the steps of an interview. Differentiate the three types of interviews: information-gathering, job, and appraisal.

User Account

All Pages