DUMMY
alert_with_bugs.html Input and Output using Javascript Click Me! badaverage.js /* JavaScript used with 'average.html' Use an interactive debugger to find the errors in the JavaScript below */ "use strict"; //Global variables accessible to all functions var numbers = []; //create an empty array var enterButton = null; //global variables must be initialised var calculateButton = null; /* Get a number from the prompt * If a valid number add to array, if not give error message to user * Display the updated array of numbers on the web page * Make the Calculate button visible */ function enterNumber(){ var number = prompt("Enter your number"); var number = Number(number); //WHAT DOES THIS LINE DO? if (!isFinite(number)) { // test what is entered is a number numbers.push(number); //add the number entered to the end of the array } else{ alert("Please enter a valid number"); } document.getElementById("numberList").innerHTML = "The numbers you have entered so far are: " + numbers; //diplay a list of number entered enterButton.textContent = "Enter your next number";//change the label on the Enter Button calculateButton.style.visibility = "visible"; //show the button - uses the CSS property of the elenment } /* Calculate the sum and average of the array of number * Display the results on the web page */ function calculateAverage(){ var average = 0; var total = 0; for (var i = 1 ; i <= numbers.length;="" i++){="" total="numbers[i];" add="" the="" each="" number="" in="" the="" array="" to="" the="" cumulative="" total="" }="" average="total/i;" document.getelementbyid("result").innerhtml="The total of your numbers is " +="" total="" +="" "="" and="" their="" average="" is="" "="" +="" average;="" }="" function="" init(){="" enterbutton="document.getElementById("enter");" calculatebutton="document.getElementById("Calculate");" calculatebutton.style.visibility="hidden" ;="" hide="" the="" calculate="" button="" until="" some="" numbers="" are="" entered="" enterbutton.onclick="enterNumber;" calculatebutton.onclick="calculateAverage;" }="" window.onload="init;" average.html="" average="" numbers="" click="" the="" button="" to="" enter="" a="" series="" of="" numbers="" to="" average="" enter="" your="" first="" number="" calculate="" the="" average="" alert_with_bugs.js="" var="" yourname;="" global="" variable="" accessible="" to="" all="" functions="" function="" showanothermessage()="" {="" alert("hi="" "="" yourname="" +="" ".\nthis="" is="" an="" alert="" message="" is="" no="" longer="" defined\nin="" the="" html="" but="" in="" a="" javascript="" file");="" }="" function="" init()="" {="" yourname="Prompt('Hi." enter="" your="" name.\nwhen="" the="" browser="" window="" is="" first="" loaded\nthe="" function="" containing="" this="" prompt="" window="" is="" called.",="" "your="" name");="" clickme="document.getElementById("clickme");" clickme.onclick="showAnotherMessage;" }="" window.onload="init();" web="" development="" cos10005="" –="" web="" development="" last="" updated:="" 12th="" october="" 2020="" page="" 1="" department="" of="" foundation="" and="" pathways="" swinburne="" university="" of="" technology="" cos10024="" –="" web="" development="" week="" 9="" -="" tutorial="" activity="" 2="" lab="" 9="" –="" javascript="" dom="" aims:="" •="" to="" practice="" how="" to="" create="" a="" form="" data="" checking/validation="" function="" for="" a="" html="" form="" using="" javascript="" while="" maintaining="" clear="" separation="" of="" html,="" css="" and="" js="" files.="" •="" to="" review="" javascript="" functions="" and="" control="" structure="" •="" to="" gain="" the="" skills="" and="" knowledge="" to="" complete="" assignment="" 2="" task="" 1:="" create="" form="" validation="" using="" javascript="" (2="" marks)="" description:="" again,="" we="" are="" going="" to="" start="" with="" a="" registration="" form,="" and="" then="" define="" and="" add="" a="" client-side="" form="" data="" validation="" function="" using="" javascript.="" in="" this="" lab,="" we="" will="" be="" using="" the="" javascript="" alert="" function="" to="" display="" the="" error="" message.="" as="" an="" extension,="" you="" may="" want="" to="" display="" the="" error="" message="" within="" the="" web="" page="" instead="" of="" using="" alert.="" remember="" to="" design="" the="" form="" interaction="" carefully="" before="" you="" start="" coding,="" i.e.,="" when="" and="" what="" to="" do="" in="" response="" to="" what="" event.="" design:="" design="" starts="" with="" discussion="" and="" paper="" drawings.="" ensure="" this="" process="" is="" completed="" before="" implementation.="" step="" 1:="" form="" (html="" and="" css)="" 1.1="" the="" design="" will="" be="" adapted="" from="" the="" form="" presented="" in="" figure="" 1.="" for="" this="" lab,="" the="" error="" messages="" will="" be="" displayed="" using="" the="" javascript="" alert="" function,="" so="" no="" css="" solution="" will="" be="" needed.="" however,="" if="" you="" do="" decide="" to="" display="" error="" messages="" within="" the="" web="" page,="" you="" will="" need="" to="" design="" the="" interaction.="" you="" are="" encouraged="" to="" investigate="" and="" attempt="" the="" later="" approach.="" cos10005="" –="" web="" development="" last="" updated:="" 12th="" october="" 2020="" page="" 2="" step="" 2:="" (javascript)="" 2.1="" identify="" which="" input="" fields="" in="" the="" form="" should="" be="" evaluated="" and="" what="" rules="" should="" apply.="" answer:="" for="" this="" task,="" we="" need="" to="" evaluate="" all="" input="" fields.="" the="" rules="" are:="" (1)="" all="" input="" fields="" must="" not="" be="" empty;="" (2)="" user="" id="" must="" contain="" at="" one="" ‘@’="" symbol="" to="" be="" a="" valid="" email="" address;="" (3)="" password="" and="" retype="" password="" must="" have="" the="" same="" value;="" and="" (4)="" name="" must="" be="" letters="" and="" spaces="" only.="" implementation:="" implementation="" requires="" the="" creation="" and="" revision="" of="" html,="" css="" and="" javascript="" files.="" step="" 3:="" directory="" set="" up="" 3.1="" create="" a="" new="" folder="" ‘lab09’="" under="" the="" unit="" folder="" on="" the="" mercury="" server="" ~/cos10005/www/htdocs.="" this="" is="" the="" directory="" where="" all="" files="" will="" be="" uploaded.="" step="" 4:="" 4.1="" download="" lab_09_files.zip="" from="" the="" canvas.="" use="" the="" files="" in="" the="" zip="" file="" as="" templates="" for="" this="" lab.="" step="" 5:="" html="" creation="" 5.1="" using="" notepad++="" (or="" sublime="" text="" for="" mac="" users),="" open="" file="" regform2.html.="" review="" the="" html="" and="" complete="" the="" code.="" for="" your="" convenience,="" the="" basic="" code="" and="" additional="" code="" is="" shown="" below.="" make="" sure="" you="" understand="" the="" added="" code.="" (1)link="" to="" desktop="" css="" file______________________="" (2)link="" to="" javascript="" data="" validation="" file_______________="" web="" development="" registration="" form="" registration="" form="" account="" information="" -----------------------------------------="" user="" id="" sam="" ple="" password="" r="" e="" re-type="" password="" user="" information="" ---------------------------------------------="" name="" gender="" o="" male="" o="" female="" test="" register="" figure="" 1.="" form="" mock="" up="" format="" incorrect="" in="" the="" page="" solution:="" an="" individual="" m="" ess="" age="" would="" be="" displayed="" i="" n="" twebpag="" e="" i="" t="" h="" d="" aentered="" was="" incorrect="" cos10005="" –="" web="" development="" last="" updated:="" 12th="" october="" 2020="" page="">
Discussion (1) link to desktop CSS file Answer: (2) link to JavaScript data validation file Answer: (3) add a form identifier, so we can easily reference the form object Answer: id="regform" Step 6: CSS Creation (for the form) 6.1 Open file desktop.css, review the CSS and the questions below. For your convenience, the code is shown below: COS10005 – Web Development Last Updated: 12th October 2020 Page 4 Discussion (4) What happens if “border:none” is removed from the fieldset declaration? COS10005 – Web Development Last Updated: 12th October 2020 Page 5 Answer: The input for gender will be enclosed in a fieldset box, the word "Gender" – the legend - will be in the box, not in its default position along the top left of the box. (5) Why is there a blank space and not a comma between these selectors? However, in a previous lab we used a comma, for example h1, h2, p { color : blue; } Answer: A blank space represents a contextual selector. This means that the style is to be applied only to HTML elements that are descendants of the class "radioinput". Note that when the border was set to none (as was asked in question 6) the fieldset for Account and User Information still retains its border. "Comma" represents a grouping selector. This means that the style rule is to be applied to all to these HTML elements. In the above grouping example, the color:blue will be applied to all h1, all h2 and all p, unless it is overridden by another later CSS declaration. Step 7: JavaScript Creation (for the form data validation) 7.1 Open the text file validation.js, review the JavaScript and the questions below. For your convenience, the basic code and additional code is shown below: COS10005 – Web