javascript 代写： ICT10013 Week 7 Tasks

程序代写 CS代考 / javascript

COS10012 Programming Concepts Week 07 Tasks for submission

Week 7 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 They provided assistance for you to develop solutions to other tasks that are part of

your portfolio
• Tasks labelled as ” BASIC Submission Task”

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

o The solutions to these tasks must be uploaded for marking by your tutor • Tasks labelled as “ADVANCED 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

JavaScript Tasks

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

Create a HTML file named w7t1.html based on template_upd.html

  • Ensure the footer section contains your name.
  • Inside the header section: add a h1 element with the value “Week 7”
  • Inside the article section: add form tags.
  • Within the form tags add a paragraph with a label tag containing Customer Name:
  • Add an input element within the above label tag.

o The type attribute of the element must be text

o Theidoftheelementmustbecustname • Add a button element.

o The type attribute of the element must have the value button o Theidattributeoftheelementmusthavethevalueprocess. o ThetextonthebuttonmustbeProcessName

• Add the following paragraph tag: <p id=”output”></p>

Create a JavaScript file named w7t1.js based on template.js. Link this file to w7t1.html.

Within init():
• Use document.getElementByID(“…”).onclick with the relevant button id to assign call to the function start()

Create a function called start(). This function must:

• Create a local variable vName

Swinburne University of Technology Page 1

COS10012 Programming Concepts

Week 07 Tasks for submission

• •

Task 2.

Get the input from the textbox with id custname and assign it to variable vName
Display the value of the vName in the
paragraph with id output

(no submission required, not part of portfolio)

Same as above, plus
• When you click the button, the HTML id output

should display:
o DisplaythevalueofthevName o Display the length of vName

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

Create a function processString() that takes one parameter str.
This function extracts the first character from str using charAt(0) and returns the string “The first letter of the name is: X” where X will be replaced by the first character.

Within start(): Same as above, plus

• When you click the button, the HTML id output should also display:

o The string showing the first letter of vName returned by processString()

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

Modify processString() so that it returns two first characters of the parameter str as shown on the screenshot.

Within start(): Same as above, plus

• When you click the button, the HTML id output should also display:

o The second letter of vName

Task5. (PassSubmissionTask1)
Create a HTML file named w7P1.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 “Week 07 Pass Submission 1”
  • Inside the <article> section create a form containing a label showing Customer Name and a

    textbox.

  • Create a button with the caption “Process name” (same as task 1)
  • Create a paragraph with the id = “result” after the form.

Swinburne University of Technology Page 2

COS10012 Programming Concepts

Week 07 Tasks for submission

When a user clicks the button, the following should happen:

• •

•

Call the function process();

Within process():
o Create a local variable that will store user

input.
o CallthefunctionoutputName()that

takes one parameter pName and returns a string.
o Display this returned string in the paragraph with the id = “result”

Within outputName():
o Createalocalvariablemsgstoringanemptystring
o AddpNametomsg
o Add the length of pName to msg as a sentence shown on the screenshot.
o Add the subheading “List of all letters:” to msg
o Write a for loop that extracts each letter of the customer name and adds it to msg to appear

one per line (see screenshot). o Returnthestringmsg.

Test your code.

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

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

Create a HTML file named w7t6.html based on template_upd.html

  • Ensure the footer section contains your name.
  • Inside the header section: add a h1 element with the value “Week 7”
  • Add a button element.

o The type attribute of the element must have the value button o Theidattributeoftheelementmusthavethevalueprocess o ThetextonthebuttonmustbeProcessArray

• Add the following paragraph tag: <p id=”output”></p>

Create a JavaScript file named w7t6.js based on template.js. Link it to the w7t6.html When a user clicks the button, call the function process().

Within process():

  • Create an array named arrNameList with the following names: John, Jenny
  • Call the function processArray() passing arrNameList as a parameter. This function does not

    return any values so you do not need assignment statement.

    Create a function called processArray() which takes one parameter pArray. This function does not return any values. This function must:

Swinburne University of Technology Page 3

COS10012 Programming Concepts Week 07 Tasks for submission • Display the number of elements in pArray in the paragraph with id

output as on the screenshot (use the relevant property of the array) Task 7. (no submission required, not part of portfolio)

Same as above, except

• When the user clicks the button, the paragraph with id output must display:

o All the names in the array (see the screenshot)

Task8. (PassSubmissionTask2)
Create a HTML file named w7P2.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 “Week 07 Pass Submission 2”
  • Inside the <article> section create a form containing a label showing Customer Name and a

    textbox with id custname.

  • Add a button element.

o The type attribute of the element must have the value button o Theidattributeoftheelementmusthavethevalueadd
o ThetextonthebuttonmustbeAddName

• Add a button element.
o The type attribute of the element must have the value button o Theidattributeoftheelementmusthavethevalueprocess. o ThetextonthebuttonmustbeProcessName

• Add the following paragraph tag: <p id=”output”></p>

Create the JavaScript file w7P2.js based on template.js and link to the html file.

Create a global array arrNameList. Create an addName() function.

• This function adds the name entered into the custname input box to the end of arrNameList.

Call this function when the user clicks the button with the id add.

Create a function called displayArray().
• This function must list all the names in the array, one per line (see the screenshot).

Call this function when the user clicks the button with the id process. Test your code.

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

Swinburne University of Technology

Page 4

COS10012 Programming Concepts Week 07 Tasks for submission

Task 9. (Credit Submission Task 1)
Create a copy of HTML file w7P2.html and rename it w7C1.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 change the h1 element to display “Week 07 Credit Submission 1” Make a copy of the JavaScript file w7P2.js and rename it as w7C1.js
    Modify addName() so that before adding a name to the array list it will do the following:

• Call a function named findName() to see if the name already exists in the array.
o Use the while loop to check if the name is in the array (note, if the name is found the

loop should stop).
o If the name already exists then return false, otherwise return true

• If findName() returns false, do not add the name to the array, but display “Cannot add xxxx: Name already exists” where xxxx is the custname value

Test your code with a name duplicate and non-duplicate names.

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

Task 10.(Credit Submission Task 2)

Create a HTML file named w7C2.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 “Week 07 Credit Submission 2”
  • Inside the <article> section create a form containing a label showing Item Code and a textbox

    with id itemcode.

  • Create another label showing Quantity in Stock and a textbox with id stock.
  • Add a button element.

o The type attribute of the element must have the value button o Theidattributeoftheelementmusthavethevalueadd
o ThetextonthebuttonmustbeAddItem

• Add a button element.
o The type attribute of the element must have the value button o Theidattributeoftheelementmusthavethevaluelist.
o ThetextonthebuttonmustbeListAll

• Add the following paragraph tag: <p id=”output”></p>

Create the JavaScript file w7C2.js based on template.js and link to the html file.
Create two empty global parallel arrays arrItemCodes and arrStockQty. They will store item code and

corresponding item quantity in stock.

Swinburne University of Technology Page 5

COS10012 Programming Concepts Week 07 Tasks for submission

Within init():
• Call function addItem() when the user clicks on the button with the id add • Call function listItems() when the user clicks on the button with the id list

Create a function addItem(). It does not need any parameters. At this stage we will leave its body empty.
Create a function listItems(). It does not need any parameters. At this stage we will leave its body empty.

Business rules:

  • Quantity in stock cannot be negative
  • Item codes consist of one letter and three digits, e.g. X237

    Create a function validateItemQty() which takes one parameter, converts it to a number and checks whether that number is <0. If the value is not a number or that value is <0 the function returns false, otherwise it returns true.

    I suggest that at this stage you write a piece of code for the function addItem() which reads the value from the textbox with the id stock, creates a local variable validQty and calls the function validateQty(). Use alert() to display validQty to check whether validation works.

    Create a function validateItemCode() which takes one string parameter pCode. This function will return true or false based on whether the pCode value is valid or not.

    Within validateItemCode():

  • Create a local variable valid and assign true to it. Remember to return valid as the last

    statement of the function.

  • pCode is expected to have an uppercase letter in position 0 and digits from position 1 onwards.

o Createalocalvariableleftover.
o UseJavaScriptsubstring()toextractthecharactersfromposition1totheend(hint:

substring(1); see https://www.w3schools.com/jsref/jsref_substring.asp, especially the

section More Examples). Store the result in leftover.
o Check that leftover is NOT 3 characters long and in this case assign false to valid.
o Otherwise convert leftover to a number and use isNaN() to check whether there are

non-digits. If yes, assign false to valid.
o Otherwise we need to check that a character in position 0 is an uppercase letter. To do

that, create a local variable firstChar and store the first character from pCode there (hint: use charAt()).

To check whether a character is an uppercase letter you need to check whether that character is between “A” and “Z”. You can compare characters because behind the scenes they are treated as numbers, every character has a corresponding UTF code and they are coded sequentially. So “A” has the code 65, “B” is 66, “C” is 67, etc., and “Z” is 90 (see https://www.w3schools.com/charsets/ref_utf_basic_latin.asp, scroll down to UTF-8 Basic Latin section). For example, “X” > ”A” will evaluate as true.

Check that firstChar is not within “A” to “Z” range and if this is the case, assign false to valid.

Swinburne University of Technology Page 6

COS10012 Programming Concepts Week 07 Tasks for submission

Within addItem():

  • Create a local variable outmsg and assign an empty string to it.
  • Create a local variable vCode and store there user input from the textbox with id itemcode.
  • Convert vCode to uppercase and store the result back in vCode.
  • Create a local variable validCode, call the function validateItemCode() passing the correct

    argument to it and store the returned value in validCode.

  • Check whether validCode is false; in this case add an error message “Invalid item code <br />”

    to whatever is stored in outmsg. Note, as there may be more than one error, we need linebreak tag at the end of every message.

    Note, at this point you may want to check whether item code validation works correctly, so insert an alert message showing the value of validCode and test the code before proceeding.

  • Create a local variable vQty and store there user input from the textbox with id stock.
  • Create a local variable validQty, call the function validateItemQty() passing the correct

    argument to it and store the returned value in validQty.

  • Check whether validQty is false; in this case add an error message “Invalid item code <br />” to

    whatever is stored in outmsg.

  • If validCode and validQty are both valid:
    o AddvCodetothearrayarrItemCodes. o AddvQtytothearrayarrStockQty.

o Add a message “Item details recorded” to the outmsg.

• Display outmsg in the paragraph with id output.
At this point it’s a good idea to thoroughly test and if necessary troubleshoot all functions you have

created so far. Do not proceed until all problems are fixed.

Within listItems():

  • Create a local variable output and assign an empty string to it.
  • Check that there are no items in your arrays (hint: length is 0). In this case add a message to

    output “There are no items in stock”

  • Otherwise use the for loop to go through arrays one item at a time and add them to output. E.g.

    an element from the current position in arrItemCodes plus space plus an element from the current position in arrStockQty plus linebreak tag (as you would want the next group of elements to appear on a separate line).
    Note: if you know how to create tables in HTML, you may want to use <table>, <td> and <tr> tags to format your our output. This is optional.

  • After the for loop simply display the contents of output in the paragraph with id output.

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

Swinburne University of Technology Page 7

Related Posts