Homework SourseFor this lab you will be adding to your resume website vario
For this lab you will be adding, to your resume website, various functions. (1) Reuse an existing script (make sure to cite) to make our webpage really neat. (2) validate our calculator. (3) By interacting through the DOM, will greet the user with a welcome message, by saying good morning, afternoon, or evening (depending on the time). Place all JavaScript in a single external JavaScript file.
Dynamicdrive.com provides free JavaScript code that can be used in your websites. Today we will visit this page and find a JavaScript that we like, and add it to our webpage.
Go to http://www.dynamicdrive.com/
Browse for a JavaScript that you would like to use on your website. You can browse by either category or search by keyword
i.Note: when choosing a script, at the point where each script’s name is listed it also lists which browsers the script is compatible with. It is a good idea to choose a script that is compatible with a variety of browsers
ii.When you click on a specific script to get the directions on how to use it, generally at this point the page has the script running on it. So if you do not see the script working on this page, then when you put the code into your page you could also expect for it not to work (if you are using the same browser). So make sure that you can preview what the code does properly on some browser before using a script so that you have a way to check it to make sure you followed the directions properly and that it works on your page.
After finding a script that you like, follow the directions that are provided on the webpage to move the script over to your site.
i.Note that many scripts say: copy this to the <head>. As we know, a lot of JavaScript will not validate in the HTML, but we also know how to take JavaScript from the <head> and place it externally. Keep this in mind while obtaining your script.
Let’s modify our website so that the calculator must not be left blank.
First let’s start with the calculator. We have two fields and we want to test to see if any field is null or blank. Although our calculator inputs are not necessarily in a form, we can still use the same principles of form validation (see http://www.w3schools.com/js/js_validation.asp ) to test the inputs.
i.Create a new function that…
ii.Uses “form” validation to test if salary is not entered and if it is not, to alert (using the alert method) please fill in salary
You can test this by seeing if the field is blank, symbolized by “”
See http://www.w3schools.com/jsref/met_win_alert.asp for an alert example
iii.Repeat for the other hours field
iv.Call this function with the submit button as well. We can call two functions with the same action by separating the functions with a ;
(i.e. onclick=”function1(); function2() )
QUESTION: explain why this form validation is not the best possible form validation that we could have done. Think about what the goal of form validation is (to make it clear to the user what they have to do for us to get the information that we need) and how this could have been improved. You do not need to modify your code anymore, but instead just work on explaining it.
Conceptualizing the DOM and interacting with the Browser through the DOM
Create a function that will interact with the browser to get the time and append it as a heading. If it is before noon (12) an message will be produced that reads good morning, if it is between 12 and 5 the message will read good afternoon, and if it is after 5 the message will read good evening. The function will know where to display this based on interacting with the DOM and add an <h3> with the information toward the top of each page. First, we will create a variable that will store the value to print to the page.
i.This function should be called onload, within the body tag
ii.Within this function, create a variable and assign it the value of the date.
1.This is done by saying new date(). New is a keyword that will create an object from the date, which is given by the date method and includes the hour. See http://www.w3schools.com/jsref/jsref_obj_date.asp
iii.Create a second variable that is equal to hours of the date. This can be found by using the getHours method on the previous variable that represents date. getHours() will extract just the hour from all of the date information. See http://www.w3schools.com/jsref/jsref_gethours.asp
iv.Create an if…else if…else statement so that a variable is assigned the greeting value that we will print.
1.The time is less than 12 to read enjoy the rest of your morning
2.The time is less than 17 (which is 5pm) to read enjoy the afternoon
3.The time is more than 17 to read have a good evening.
a.Reference the previous module if you are having trouble with the if else statement.
Within the same function, we will not follow the same format as the “try it yourself” found here, except we are going to add a child to our div not the list: http://www.w3schools.com/jsref/met_node_appendchild.asp. What we will do is just create two new variables, one for the element of a heading and the second for the text within the heading, place the text variable onto the heading variable and place the heading variable onto the div, which we will identify by an ID. The only part of the HTML that should be modified to run this code is when you call the function, reference the external JS, and add an ID to the Div.
i.First create a function that is called when the page loads, not when the user does something. This can be done by using onload attribute within the body.
1.See http://www.w3schools.com/jsref/event_onload.asp
ii.Create a variable that has the value of a new element within the document object. I will call this variable “firstVariable” for these instructions.
1.The new element should be a heading tag
2.See: http://www.w3schools.com/jsref/met_document_createelement.asp
iii.Create a variable that has the value of a new text node within the document object. I will call this variable “secondVariable” for this.
1.See: http://www.w3schools.com/jsref/met_document_createtextnode.asp
2.This will define the text to the displayed on the page.
iv.Now we have the “firstVariable” that represents the heading tag and the “secondVariable” that represents the text that we want in the heading tag (in the first variable). Therefore we want to use the appendchild method on the “firstVariable”
a.See: http://www.w3schools.com/jsref/met_node_appendchild.asp
v.Lastly, since the firstVariable now has the secondVariable appended to it, we want to use the appendchild method to append the first variable to our div that is within the document, which we can identify by an ID
1.Extra Information: Keep in mind the hierarchical tree for your page. See, for example, http://www.w3schools.com/js/js_htmldom.asp
Validate both the HTML and CSS and upload to the web. Make sure your public HTML has the file permissions set to 755.
Solution
It is necessary to educate web developers that web security is something that should be handled separately. It should be handled in the code without bothering the user. If you are afraid of SQL Injection, validating for single quotes and throwing a cryptic error message in the user’s face is not the solution. The solution is to learn how to compose the SQL query, how to escape certain characters and how to handle ‘html entities’ right.
why do we need form validation at all?
The purpose of form validation is :
