Individual Assignment 3 Once again, we will be adding to our resume page Please reuse the basic HTML 5 template and existing CSS to minimize the workload for you For this assignment we are going to add a function that calculates annual salary (from an hourly wage and number of hours per week) of a position In addition, we are going to explore how to use the debugging tool, which will help us with our JavaScript in the future What to hand in Validate and upload to the web Submit the URL to your new rsum webpage with the salary calculator, the answers to all 5 questions, and the debugging html As usual, also zip up all files for the assignment and submit the zipped folder JavaScript Getting started Create a fresh HTML document (this part is going to be used to learn and experiment with JavaScript rather than be a final product) Lets create our first statement that writes to the page Within the body of the HTML, put an opening script tag and a closing script tag Place the type attribute in the opening script tag and assign it the proper value as discussed in the readings All code that goes in between these script tags will be JavaScript and only JavaScript In between the script tags, we will write something to the document In this case, document is the object and write() is the method We put the method onto the object by using the format object method() What we want to write we will put in between the () Since we will be writing text, or a string, to the document, make sure to put the text in quotes Have the document write JavaScript is fun Do not forget a at the end of each line Preview your page Alternatively, we could store the text in a variable so that we could reuse it many times without needing to retype it Type the keyword var, to establish that we are creating a new variable Give the variable a name, any name is fine as long as it is not a reserved word and meets the criteria from the reading I am going to name my variable x, therefore I will write var x Now that we have this variable, that will hold information, we need to assign it some information We will do this just like we did in algebra in high school by saying var x JavaScript is fun Notice that the left hand side of the equation is what we are assigning the value to and the right hand side of the equation is the value that is being assigned Replace the words to be printed in the document write statement with your variable Place the variable within the write method so it will be printed out Note that although the value of the variable is a string, and the variable therefore is a string type, the variable is still a variable and not a string Because of this, we do not need quotes around the variable name Place the variable 5 times within the write method so it is printed out 5 times in a rowTo do this you need to add, or concatenate, the strings together with the operator For me to do this, I would type x x x x x The sign will add numbers together as well, but our data would need to be specified to be a number first or changed from a string to a number Therefore even if our variable x 5, because 5 is in quotes it is being read as a string so adding it to another string (i e 3) would return 53, not 8 So what if we wanted this JavaScript to happen after a user does something and not right when the page loads We would place the JavaScript code inside of a function and then ask that function to occur after we detect that a user does something Follow these instructions to place the code in a function http www w3schools com js js functions asp Our code to be executed is not only the document write() statement, but also the line where we establish the variable and give it a value Now our code will not run when the page loads, so we will need an event to happen to run it To keep things simple, we can add a button tag (https www w3schools com tags tag button asp) except this time add the event attribute onclick This onclick attribute will do something when the user clicks the button What we want it to do is run our function, so we will set the onlcick value equal to the name of our function (i e if my function was named fun I would write ) Now click the button and your function should run and print out what you asked it to But wait, where did our button go It, along with any other HTML we had on the page will disappear if document write() is run after the page initially loads It is essentially replacing all of the document with just what is in between the () So if we wanted to print out that JavaScript is fun below the button, we could instead of having it write to the document itself, we could have it replace some text within a certain element (html tag) within the document So underneath the button, lets put a paragraph tag and have it read this will change this will change We are going to change the innerHTML property of this tag The innerHTML of a tag is the stuff that is in between the opening and closing tags, which in this case is the text this will change First we need to, within JavaScript, identify the tag that we want to change We can do this by using the getElementById() method This method simply locates an element with a specified id (similar to intrapage links) So place an id attribute in the opening paragraph tag (i e ) and then place the same id in the () of the method (i e getElementById(change) Once again I said we will change the innerHTML property of this element, so we will attach the innerHTML property to it by saying getElementById(change) innerHTML Now all we need to do is say which object this element is associated with It is within the document, so we can use the document object and specify that by saying document getElementById(change) innerHTML Now that we have identified what we want to change, lets change it We do that by setting what we want to change to be equal to the new value, so for me it is document getElementById(change) innerHTML x x x x x If we wanted to, we could copy everything between the script tags to a new notepad document, and save it as an external JavaScript file This is a good idea to always do, as the validator does not like much JavaScript Debugging Open the web console while viewing the page that we just made Are there any warnings If your only error is an encoding warning, ignore it We do not talk about encoding in this class QUESTION 1 Lets sabotage some of our code Remove the opening curly bracket, , from the function Refresh the page Is the error message that is now produced useful Why or why not QUESTION 2 Put back in the curly bracket Change the name of the function that you call to have a different name then the actual function that we made Click refresh Is there a new error message Click the button to run the function Is there a new error message now Is the message helpful QUESTION 3 Fix the problem and this time change the name of your variable What error message is produced now Is it helpful Fix the name of the variable Save this file and submit it at the end This is not a part of your website Data types, user input, variables, and operators the calculator (back to our resume page) As we learned from the reading, within JavaScript there are five different data types String, Number, Boolean, Array, and Object For this tutorial, we will learn a little bit about the differences between string and number data types and what each can do by using operators We will do this by creating a wage calculator that has a user input an hourly rate and the hours worked per week, placing these two values into two separate variables, then performs an operation on them to give back the annual salary On a new page, create a function that calculates the yearly salary for a job from the hourly rate and hours per week They will need to enter salary hourly rate and then the number of hours per week, so you can calculate the salary Do not worry about taking into account overtime Based on the directions from the readings (http www landofcode com javascript tutorials javascript elements php) create two HTML text inputs that ask the user for 1)hourly wage and 2) hours per week Take the value entered for hourly wage and store it in a variable Using JavaScript, take the inputted values from the inputs and assign them to two separate variables The keyword for variable is var (same concept as the keyword for function is function) The keyword declares what the next word is Use a similar method that was used in the last lab to get the value that the user enters in each box Using an assignment operator, we will make the newly defined variable to be equal to the value that the user inputted We can access what the user inputted by using the getElementById method, access the value property of the element (the input) with the specified ID within the document object The value property simple looks at the value that is in the input box Take the value entered for hours per week and store it in a second variable Parse these two variables so that they are in a number format http www w3schools com jsref jsref parsefloat asp http www w3schools com jsref jsref parseint asp QUESTION 4 What would happen if we did not parse the variables If you are not sure, try running the equation without parsing the variables first What would happen if we would need to add the variables instead QUESTION 5 what would be the difference if we used intiger vs float, or visa versa Create a fifth variable (the two original input variables and the two parsed variables are the other ones) and set it to equal the parsed hourly wage times by the number of hours per week times 52 This is just taking the amount earned per hour times the number of hours in the week to give you how much you would make in a week and then multiplying this value by the number of weeks in a year Create a paragraph below the inputs where the output will be placed Once again (similar to the previous part), using the getElementById method, access the innerHTML property of these paragraph elements with their specified ID within the document object Using arithmetic operators, set this innerHTML of the paragraphs to be the value of the firth variable from the previous step Make sure to move all JavaScript to an external JS file Validate and upload to the web Submit the URL to your new rsum webpage, the answers to all 5 questions, and the debugging html Good job

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Sep 23, 2024

Individual Assignment 3 Once again, we will be adding to our resume page. Please reuse the basic HTML 5 template and existing CSS to minimize

Individual Assignment 3

Once again, we will be adding to our resume page. Please reuse the basic HTML 5 template and existing CSS to minimize the workload for you.

For this assignment we are going to add a function that calculates annual salary (from an hourly wage and number of hours per week) of a position. In addition, we are going to explore how to use the debugging tool, which will help us with our JavaScript in the future.

What to hand in: Validate and upload to the web. Submit the URL to your new rsum webpage with the salary calculator, the answers to all 5 questions, and the debugging html. As usual, also zip up all files for the assignment and submit the zipped folder.

JavaScript Getting started

Create a fresh HTML document (this part is going to be used to learn and experiment with JavaScript rather than be a final product)

Lets create our first statement that writes to the page.Within the body of the HTML, put an opening script tag and a closing script tag. Place the type attribute in the opening script tag and assign it the proper value as discussed in the readings.

All code that goes in between these script tags will be JavaScript and only JavaScript.

In between the script tags, we will write something to the document. In this case, document is the object and write() is the method. We put the method onto the object by using the format: object.method() What we want to write we will put in between the (). Since we will be writing text, or a string, to the document, make sure to put the text in quotes. Have the document write JavaScript is fun.

Do not forget a ; at the end of each line

Preview your page

Alternatively, we could store the text in a variable so that we could reuse it many times without needing to retype it.

Type the keyword var, to establish that we are creating a new variable. Give the variable a name, any name is fine as long as it is not a reserved word and meets the criteria from the reading. I am going to name my variable x, therefore I will write var x.

Now that we have this variable, that will hold information, we need to assign it some information. We will do this just like we did in algebra in high school by saying:

var x=JavaScript is fun;

Notice that the left hand side of the equation is what we are assigning the value to and the right hand side of the equation is the value that is being assigned.

Replace the words to be printed in the document.write statement with your variable

Place the variable within the write method so it will be printed out.

Note that although the value of the variable is a string, and the variable therefore is a string type, the variable is still a variable and not a string. Because of this, we do not need quotes around the variable name.

Place the variable 5 times within the write method so it is printed out 5 times in a rowTo do this you need to add, or concatenate, the strings together with the + operator. For me to do this, I would type x+x+x+x+x.

The + sign will add numbers together as well, but our data would need to be specified to be a number first or changed from a string to a number. Therefore even if our variable x = 5, because 5 is in quotes it is being read as a string so adding it to another string (i.e. 3) would return 53, not 8

So what if we wanted this JavaScript to happen after a user does something and not right when the page loads? We would place the JavaScript code inside of a function and then ask that function to occur after we detect that a user does something.

Follow these instructions to place the code in a function: http://www.w3schools.com/js/js_functions.asp

Our code to be executed is not only the document.write() statement, but also the line where we establish the variable and give it a value

Now our code will not run when the page loads, so we will need an event to happen to run it. To keep things simple, we can add a button tag (https://www.w3schools.com/tags/tag_button.asp) except this time add the event attribute onclick. This onclick attribute will do something when the user clicks the button. What we want it to do is run our function, so we will set the onlcick value equal to the name of our function (i.e. if my function was named fun I would write