javascript 代写： ICT10013 Week 6 Tasks

程序代写 CS代考 / javascript

ICT10013 Programming Concepts Week 06 Tasks for submission

Week 6 Tasks for Submission

This document 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”
o Theyareforyoutoattemptandpractice.
o Theyprovidedassistanceforyoutodevelopsolutionstoothertasksthatarepartof

your portfolio
• Tasks labelled as “PASS Submission Task”

o These tasks are part of your portfolio geared towards all students

o Thesolutionstothesetasksmustbeuploadedformarkingbyyourtutor • Tasks labelled as “CREDIT Submission Task”

o 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.

The solutions to these tasks must be uploaded for marking by your tutor

Week 06 references

JavaScript

While loop

http://www.w3schools.com/js/js_loop_while.asp https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/while

For loop

http://www.w3schools.com/js/js_loop_for.asp https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for

Comparison between While and For

https://www.kirupa.com/html5/loops_in_javascript.htm http://www.dofactory.com/tutorial/javascript-loops

Arrays

http://www.w3schools.com/js/js_arrays.asp http://www.w3schools.com/jsref/jsref_length_array.asp

Swinburne University of Technology

Page 1

ICT10013 Programming Concepts

JavaScript Tasks

Task1. (nosubmissionrequired,notpartofportfolio)

Create these HTML and JavaScript code:

w6a.html

<html> …

     <body>
         <header><h1>Loop Page</h1></header>
         <article>
         <p id="output"></p>
         </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;
     vOutput = vOutput + vVal + "<br />";
     vVal = vVal + 1;

     vOutput = vOutput + vVal + "<br />";
     vVal = vVal + 1;
     vOutput = vOutput + vVal + "<br />";
     vVal++;

     vOutput = vOutput + vVal + "<br />";
     vVal++;
     vOutput = vOutput + vVal + "<br />";
     document.getElementById("output").innerHTML = vOutput;

}

 window.onload=start;

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

Task2. (nosubmissionrequired,notpartofportfolio)

Modify the above JavaScript code so that: The values shown on the web page are:

Week 06 Tasks for submission

Swinburne University of Technology

Page 2

7 6 5 4 3 2 1 0

ICT10013 Programming Concepts

Week 06 Tasks for submission

Task3. (nosubmissionrequired,notpartofportfolio)

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. (no submission required, not part of portfolio)

Suppose the code in the JavaScript file has been modified.

function start() { var vOutput = “”; var vVal = 5; while (vVal > 0) {

vOutput = vOutput + vVal + ” “;

   vVal = vVal - 1; //same as vVal--;
  }

document.getElementById(“output”).innerHTML = vOutput; }

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

Task5. (nosubmissionrequired,notpartofportfolio)

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?

Task6. (nosubmissionrequired,notpartofportfolio)

Suppose the code in the JavaScript file has been modified.

function start() {
var vOutput = “”;
var vVal = 0;
for (vVal = 1; vVal <= 3; vVal++) {

vOutput = vOutput + vVal + ” “;

}

document.getElementById(“output”).innerHTML = vOutput; }

What is the output when the user clicks the button on the web page? Swinburne University of Technology

Page 3

ICT10013 Programming Concepts Week 06 Tasks for submission

Task 7. (no submission required, not part of portfolio)

Create a HTML file named w6b.html based on template_upd.html.
• Add a h1 element with the value “Array Page” to the <header> section. • Add <form> tags inside the <article> section.

  • Add a button element.

    o Thetypeattributeoftheelementmusthavethevaluebutton o Theidattributeoftheelementmusthavethevalueexecute o ThetextonthebuttonmustbeRunJavaScriptCode

  • Add the following paragraph tag after </form>: <p id=”msg”></p>

    Create a JavaScript file named w6b1.js based on template.js in the same folder as the HTML file.

  • Add the following code to init():

    document.getElementById(“execute”).onclick=start;

  • Add a function named start()

    o Thefunctionrequiresasinglelineofcode: document.getElementById(“msg”).innerHTML = “Hello World”;

    Load the HTML page.
    • Click the button. The output should show “Hello World”

    Task 8. (no submission required, not part of portfolio)

    Copy the JavaScript file w6b1.js and rename it to w6b2.js

• Modify the function named start()

o Addthefollowingstatementatthetopofthestart()function: var arrPeople = [“Ted”,”Jo”,”Jim”,”Emma”,”Kate”];

o ModifythegetElementByIdstatementsothatthecodenow displays the number of elements in the arrPeople array.

Load the HTML page.
• Click the button. The output should show the size of the array.

Task9. (nosubmissionrequired,notpartofportfolio)

Copy the JavaScript file w6b2.js and rename it to w6b3.js • Modify the function named start()

o Keepthefollowingstatementatthetopofthestart()function: var arrPeople[“Ted”,”Jo”,”Jim”,”Emma”,”Kate”];

o ModifythegetElementByIdstatementsothatthefirst,thirdand 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.

Load the HTML page.
• Click the button. The output should show the 3 names.

Swinburne University of Technology

Page 4

ICT10013 Programming Concepts Week 06 Tasks for submission

Task 10.(no submission required, not part of portfolio)

Copy the JavaScript file w6b3.js and rename it to w6b4.js • Modify the function named start()

o ThefunctionmustnowuseaWHILELOOPtodisplayallofthe names in the array

Load the HTML page.
• Click the button. The output should show all names.

Task 11.(no submission required, not part of portfolio)

Copy the JavaScript file w6b4.js and rename it to w6b5.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.(no submission required, not part of portfolio).

Copy the JavaScript file w6b5.js and rename it to w6b6.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.

Swinburne University of Technology

Page 5

ICT10013 Programming Concepts Week 06 Tasks for submission

Task 13.(PASS Submission 1)
Create a HTML file named w6P1.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: Loops”
  • Add a button element.

    o Thetypeattributeoftheelementmusthavethevaluebutton o Theidattributeoftheelementmusthavethevaluewhilebtn o ThetextonthebuttonmustbeListNumbersusingWhile

  • Add a button element.
    o Thetypeattributeoftheelementmusthavethevaluebutton o Theidattributeoftheelementmusthavethevalueforbtn
    o ThetextonthebuttonmustbeListNumbersusingFor
  • Add the following paragraph tag: <p id=”msg1″></p>
  • Add the following paragraph tag: <p id=”msg2″></p>

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

    Within init():

• Use document.getElementByID(“…”).onclick with the relevant button id to assign call to the function whilefunction()
• Repeat the above step with the relevant button id to assign call to the function forfunction()

Create a global array (i.e. defined outside of functions, e.g. after the top comment in your w6P1.js): var arrNums = [4,15,10,7,6,23,1,18,8,45,-5,16,9,68];

Create a function named whilefunction(), no parameters. • The function must use a while loop to list all the numbers in the array. *

Create a function named forfunction()
• The function must use a for loop to list all of the numbers

in the array. *

* Note: One of these functions must display the number in ‘normal’ sequence 4, 15, 10, 7… The other function must display the elements is the reverse order: 68,9,16, -5…
Do not use the array.sort method (or any other such built-in methods).

Place the Screen Captures of the web page in your browser into W06P.DOCX Copy and Paste the JavaScript code from your code editor into W06P.DOCX Copy and Paste the HTML code from your web page into W06P.DOCX

Swinburne University of Technology

Page 6

ICT10013 Programming Concepts Week 06 Tasks for submission

Task 14.(PASS Submission 2)

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.

    o Thetypeattributeoftheelementmusthavethevaluebutton o Theidattributeoftheelementmusthavethevalue”stats”
    o ThetextonthebuttonmustbePerformStatistics

  • 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 mixture of at least 12 values, each between 1 and 20.

  • The remainder of this function must:

    o Listallofthevaluesinthearray
    o Displaythetotalnumberofvaluesinthearray o Displaythesumofallvaluesinthearray
    o Displaytheaverageofallvaluesinthearray

    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

Swinburne University of Technology

Page 7

ICT10013 Programming Concepts Week 06 Tasks for submission

Task 15.(CREDIT Submission 1)

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 the following values:

    18, 23, 20, 17, 21, 18, 22, 19, 18, 20

  • The remainder of this function must:

    o Determineifthevalueenteredintheinputboxmatchesanyofthevaluesinthearray.

  • Screen Capture the following 4 tests

o 2 values that do exist in the array
o 2 values that do 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

Swinburne University of Technology

Page 8

ICT10013 Programming Concepts Week 06 Tasks for submission

Task 16. (CREDIT Submission 2)
Create a HTML file named w6C2.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: Arrays”
  • Inside the <article> section add <label>s, paragraphs, input

    elements and a button that look similar to the figure on the right.

    Create a JavaScript file named w6c2.js

• Create a function named start() and call it as a response to the onclick event of the Search button.

Within start():

  • The first line must create an array which stores the following values:

    18, 23, 20, 17, 21, 18, 22, 19, 18, 20

  • The remainder of this function must:

     Determine how many of the values in the array fall between the low and high values entered by the user.

    Before the main counting, validate low and high values as being numeric and if yes, check that low value is less than high value. Only if the above conditions are met, count how many values of the array are between high and low. Otherwise produce relevant error messages.

  • Screen Capture the following 5 tests

o 0 values that exist in the range
o 1valuethatexistintherange
o Morethan1valuethatexistinthearray
o Error when low value is NOT less than high value
o At least one of the values (low or high or both) is not numeric.

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 testing in your browser into W06C.DOCX

Swinburne University of Technology

Page 9

Related Posts