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

INSTRUCTIONS TO CANDIDATES

ANSWER ALL QUESTIONS

Individual Assignment - WK4

Introduction to Javascript and User Input

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 (perspub.albany.edu). Submit the URL to your new résumé webpage with the salary calculator and the debugging html.

 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)

• Let’s create our first statement that writes to the

• 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

  • 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 ob- ject by using the format: object.method() What we want to write we will put in be- tween 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 ”

  • 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

  • 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 say- ing 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 that value that is being

• Replace the words to be printed in the document.write statement with your vari- able

• Place the variable within the write method so it will be printed

  • 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

• Place the variable 5 times within the write method so it is printed out 5 times in a row

• To 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

  • 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 hap- pen to run it. To keep things simple, we can add a button tag (https://w3schools.com/tags/tag_button.asp) except this time add the event at- tribute 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

<button onclick=”fun()”>)

 

• 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 es- sentially 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 in- stead of having it write to the document itself, we could have it replace some text within a certain element (html tag) within the

• So underneath the button, let’s put a paragraph tag and have it read “this will change”

  • <p>this will change</p>

• 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. <p id=”change”>) 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”).in- nerHTML

• 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 say- ing getElementById(“change”).innerHTML

• Now that we have identified what we want to change, let’s 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 doc- ument, and save it as an external JavaScript file. This is a good idea to always do, as the validator does not like much JavaScript.

 

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 differ- ences 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.

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

   1. Based on the directions from the readings  create two HTML text inputs that ask the user for 1)hourly wage and 2) hours per

   2. Take the value entered for hourly wage and store it in a variable

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

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

      1. The value property simple looks at the value that is in the input box

   2. Take the value entered for hours per week and store it in a second variable

3. Parse these two variables so that they are in a number format

4. http://www.w3schools.com/jsref/jsref_parsefloat.asp

5. http://www.w3schools.com/jsref/jsref_parseint.asp

6. Create a fifth variable (the two original input variables and the two parsed vari- ables are the other ones) and set it to equal the parsed hourly wage times by the number of hours per week times

Attachments:

Related Questions

. Introgramming & Unix Fall 2018, CRN 44882, Oakland University Homework Assignment 6 - Using Arrays and Functions in C

DescriptionIn this final assignment, the students will demonstrate their ability to apply two ma

. The standard path finding involves finding the (shortest) path from an origin to a destination, typically on a map. This is an

Path finding involves finding a path from A to B. Typically we want the path to have certain properties,such as being the shortest or to avoid going t

. Develop a program to emulate a purchase transaction at a retail store. This program will have two classes, a LineItem class and a Transaction class. The LineItem class will represent an individual

Develop a program to emulate a purchase transaction at a retail store. Thisprogram will have two classes, a LineItem class and a Transaction class. Th

. SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 1 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of

. Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of