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.
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 create two HTML text inputs that ask the user for 1)hourly wage and 2) hours per
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
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
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
CS 340 Milestone One Guidelines and Rubric Overview: For this assignment, you will implement the fundamental operations of create, read, update,
Retail Transaction Programming Project Project Requirements: Develop a program to emulate a purchase transaction at a retail store. This
7COM1028 Secure Systems Programming Referral Coursework: Secure
Create a GUI program that:Accepts the following from a user:Item NameItem QuantityItem PriceAllows the user to create a file to store the sales receip
CS 340 Final Project Guidelines and Rubric Overview The final project will encompass developing a web service using a software stack and impleme
