Reference no: EM132390180

ICT10013 Programming Concepts Assignment - Swinburne University of Technology, Australia

Assignment 1 -

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 " BASIC 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 "ADVANCED 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 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. The type attribute of the element must be text. The id of the element must be custname.
• 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 process. The text on the button must be Process Name
• 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.
• 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.

Task 2 - Same as above, plus

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

• Display the value of the vName
• Display the length of vName

Task 3 - 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: The string showing the first letter of vName returned by processString()

Task 4 - 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: The second letter of vName.

Task 5 - 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. The type attribute of the element must have the value button. The id attribute of the element must have the value process. The text on the button must be Process Array.
• 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:

• 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 6 - Same as above, except

• When the user clicks the button, the paragraph with id output must display: All the names in the array (see the screenshot).

Task 7 - Create a HTML file named w7P.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".
• Inside the <article> section create a form containing a label showing Customer Name and a textbox with id custname.
• 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 add. The text on the button must be Add Name.
• 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 process. The text on the button must be Process Name
• Add the following paragraph tag: <p id="output"></p>

Create the JavaScript file w7P.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 preceded by position number (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

Task 8 - Create a copy of HTML file w7P.html and rename it w7C.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 w7P.js and rename it as w7C.js

Part 1 - 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.

• Use the while loop to check if the name is in the array (note, if the name is found the loop should stop).
• 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

Note, using break instruction to exit the loop is a bad programming practice and is not acceptable in this unit.

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

Part 2 - Modify w7C.html as per specs below:

Inside the form tags, after textbox accepting Customer name, add a label showing Year of Birth and a textbox with id yob.

Modify w7C.jc as per specs below:

• Create another global array arrYOB.
• Modify the addName() function that when it adds a name to arrNameList, it also adds the year from the second textbox to arrYOB. At this point we recommend that you test that the function works by using Console.log() or alert()
• Modify displayArray() so that it displays year birth next to the corresponding name. 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.

Assignment 2 -

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.

Task 1 - Create a HTML file based on template_upd.html:

• Update the <head> section with the title being Arrays and with the relevant meta data.
• The file should display a heading "Task 1".
• Link a JavaScript file to this HTML file.

Create a JavaScript file that:

Has a function named start() that does the following:

• Creates an array named arrValues which has the following values: [1,2,3]
• Displays the text "List of Array Values:" on the web page.
• Displays all the values in the array named arrValues on the web page.

Task 2 - Create a HTML file based on template_upd.html:

• Update the <head> section with the title being List Values and with the relevant meta data.
• The file should display a heading "Task 2"
• Link a JavaScript file to this HTML file.

Create a JavaScript file that:

Has a function named start() that does the following:

• Creates an array named arrValues which has the following values: [5,2,0]
• Displays the text "List of Array Values:" on the web page.
• Calls a function named displayValues() and pass the array named arrValues as an argument.

Create the function named displayValues().

• It must have a single parameter (that will accept an array of values).
• The function must display each of the elements stored within the array on the web page.
• The function must not return a value.

Task 3 - Create a HTML file based on template_upd.html:

• Update the <head> section with the title being More on Arrays and with the relevant meta data.
• The file should display a heading "Task 3"
• Link a JavaScript file to this HTML file.

Create a JavaScript file that:

Has a function named start() that does the following:

• Creates an array named arrValues which has the following values: [6,2,4]
• Displays the text "List of Array Values:" on the web page.
• Calls a function named updateValues() and pass the array named arrValues as an argument.
• Calls a function named displayValues() and pass the array named arrValues as an argument.

Create the function named displayValues().

• It must have a single parameter (that will accept an array of values).
• The function must display each element stored within the array on the web page.
• The function must not return a value.

Create the function name updateValues().

• It must have a single parameter (that will accept an array of values).
• The function must set each value in the array to zero.
• The function must not return a value.

Task 4 - Create a HTML file based on template_upd.html:

• Update the <head> section with the title being About Objects and with the relevant meta data.
• The file should display a heading "Task 4"
• It should also contain a paragraph with id "doglist"
• Link a JavaScript file to this HTML file.

Create a JavaScript file, within which:

• Create a function named start() called as a response to the onload event.
• Place this code at the beginning of the start() function: var vDog; vDog = {dogBreed:"Poodle", colour:"Black", dogName:"Rollie"};
• Write additional code within the start() function so that the contents of vDog are extracted and displayed onto the Web Page in the following format (attached).

Task 5 - Replace the start() function with this code:

function start() {

var vDog1 = {dogBreed:"Poodle", colour:"Black", dogName:"Rollie"};

var vDog2 = {dogBreed:"Terrier", colour:"White", dogName:"Rex"};

var vDog3 = {dogBreed:"Greyhound", colour:"Brown", dogName:"Wilks"};

var arrDogs = [vDog1, vDog2, vDog3];

var output = "List of Dogs<br />";

output = output + arrDogs[0].dogName + "<br />";

output = output + arrDogs[1].dogName + "<br />";

output = output + arrDogs[2].dogName + "<br />";

//Add a statement displaying output in the paragraph with id "doglist"

}

Task 6 - Modify the start() function.

Replace the 3 statements adding values to the variable output by

• Writing a for Loop that processes all the elements of the array.
• The code within the for block must contain a single statement output = output + ... + "<br />";

The output generated by your code must be identical to Task 5.

Task 7 - Modify the start() function.

Add two additional dog objects with appropriate breeds, colours and names.

Test your code again.

Your code should display all dog names.

You should not have to modify any code in the for Loop.

Task 8 - Modify the start() function so that it contains:

function start() {

var vDog1 = {dogBreed:"Poodle", colour:"Black", dogName:"Rollie"};

var vDog2 = {dogBreed:"Terrier", colour:"White", dogName:"Rex"};

var vDog3 = {dogBreed:"Greyhound", colour:"Brown", dogName:"Wilks"};

var arrDogs = [vDog1, vDog2, vDog3];

displayDogs(arrDogs);

}

Create a function displayDogs(arrDogList) { }

Write additional code in the displayDogs() function so that all dog names are displayed. Use a for Loop to achieve this. (Hint: you can just copy the relevant code from the start() function to the displayDogs() function.

Finally, modify the statement adding values to the variable output so that it displays dogName and dogBreed properties.

Task 9 - Create a HTML file based on template_upd.html:

• Update the <head> section with the title being Pass Task 2 and with the relevant meta data.

Make sure your name and student ID are part of metadata.

• The file should display a heading "Pass Task - Objects"
• It needs some empty paragraphs with ids to be referred to from JavaScript to display outputs as listed in the following tasks.
• Link a JavaScript file to this HTML file.

Create a JavaScript file that:

Has a function named start() containing the following lines of code:

var vStu1 = {id:"12345", name:"Dave Smith", finalMark:68};

var vStu2 = {id:"43531", name:"Emma Black", finalMark:97};

var vStu3 = {id:"97894", name:"Sue Lee", finalMark:74};

var arrStudents = [vStu1, vStu2, vStu3];

Add code to the start() function that:

• Calls a function named listStudents() and passes the argument arrStudents to it
• Calls a function named displayStats() and pass the argument arrStudents to it

Write the function named listStudents() which expects a single parameter.

• The parameter is an array of student objects.
• The function must display all student details on the web page in the following format:
• ID: 99999 Name: XXXXXXXXXXXXXXX Subject Mark: 99

Write the function named displayStats() which takes a single parameter.

The parameter is an array of student objects.

The function must calculate and display:

• The number of students in the array.
• The total of all student test scores (use a loop to calculate that).
• The average final mark (formatted to 2 decimal places): E.g. Total Students: 3, Total of all Test Scores: 41 and Average Test Score: 79.67.

Test and if necessary troubleshoot your code.

Paste your HTML code, JavaScript code and Screen Captures into the file named: W08P.docx

Task 10 - Create a HTML file based on template_upd.html:

Update the <head> section with the title being Credit Task and with the relevant meta data. Make sure your name and student ID are part of metadata.

The page should look similar to the screenshot, i.e. have 2 buttons and 3 textboxes with the following labels:

• Customer Id,
• Name
• Points balance.

The HTML page must also have a paragraph with the id value "output".

Link a JavaScript file to this HTML file.

When the user clicks the Add Customer to List button, call the addCust() function in the JavaScript file.

When the user clicks the List All Customers button, call the listCust() function in the JavaScript file.

In the JavaScript file:

Create a global array named garrCust.

Create a function addCust(). This function must:

• Gather the id, name and amount data from the web page
• Create a customer object using that data
• Add that object to the array named garrCust
• Display the text in the output element of the web page "Customer Added. Total number of customers is 99" (where 99 is the current length of the garrCust array).

Create a function listCust(). This function must:

• Clear the value of HTML"output" element.
• Display every customer in the garrCust array in "output" using the format:
• Customer Id:XXX Name:XXXXXXXXXXXX Points balance:9999
• After all customer details have been displayed, call countBelowN() passing garrCust as an argument as well as some value for comparison and display the returned value in the format
• "Total number of customers with points balance below 99999:" 99

Create a function countBelowN() that expects two parameters - an array and value to compare balance to. This function must:

• Initialise the counter to 0;
• Compare points balance for every customer in the garrCust array with the value (second parameter); if the balance is below the value, then increment the counter;
• Return the counter.

Imagine that the List All Customers button was clicked before any customer was added to the array. In this case the user should get a message "No customers on this list".

Hint: within the function listCust() use an if statement to check if the length of the array is 0, in this case display the error message, otherwise execute the code listing customers and displaying the total amount.

Test your code by adding at least 6 different customers with differing balances. Screen capture the screen after the List All Customers has been clicked.

Attachment:- Programming Concepts Assignment Files.rar