ComputerScienceExpert
$18/per page/
This is a introduction to javascript I have attached the assignment as well as the base code needed to complete this assignment. I ONLY NEED TO DO PARTS 1 and 2 on this assignment. I've been trying but cant get it going, I need this urgently.
COSC 360 – Winter 2016 Term 3 Lab 5/Assignment 1 – JavaScript In this assignment, you will have the opportunity examine form validation, security and tag highlight helper with JavaScript. Detailed instructions follow. Review the marking rubric to ensure you have addressed all points required for the page. Ensure you keep a version on your pages under version control as it may be used in subsequent weeks. You do not need to use a webserver to host your page for this lab. Do not modify the HTML code provided. Assignment: Work will be done individually Assignment Submissions: All submissions will be done via Connect. Due Date: Electronic submission February 24th, 2017 – end of day Rubric: The marking rubric can be found in the assignment folder on Connect. Information: This assignment has three parts. Part I and II will involve the submission of JavaScript files. Part III involves a series of questions to answer in addition to writing both HTML and JavaScript code. Part I and part II can be shown to your TA for marking during the lab period after the reading break. Instructions: Part I: Form Validation In this exercise you will use JavaScript to pre-validate a form before submission. 1. Download the provided HTML5 code and CSS. Place them in your local development directory. You will be able to view the page without a webserver. Examine the lab51.html file to understand how specific elements have been identified. Do not modify the HTML code. 2. Create an external JavaScript file called lab5-1.js and place it relative to your html file as script/lab5-1.js. Place all your JavaScript in this file. 3. Create an external JavaScript file called lab5-1-hightlight.css and place it relative to your html file as css/lab5-1-hightlight.css. Create a CSS style that can be used to highlight blank field (i.e. missing data). Have the style change the colour of the field to a colour that will draw the user’s attention (red). 4. Setup a listener on the form’s submit event so that the code prevents the submission of the form (preventDefault()) if either the title of description field is left blank or the accept license box is not checked; otherwise submit the form. 5. Enhance the JavaScript so that blank fields trigger a change in the appearance of the form using the style from step 3. 6. Add another listener to the fields so that when the user types into a field (changed event), JavaScript removes the colour styling as the field is now valid. Testing: 1. Test the form in your browser to make sure fields function correctly. Attempt to submit the form with either field blank and ensure the offending field is highlighted. Ensure that the page is not refreshed. 2. Type into the highlighted fields and check to ensure that the error colour is removed. Submission your JavaScript and CSS file via connect. This will be validated against existing HTML. Part II: Node Highlighting Helper In this exercise you will write a helper script that could be used on any web page to help identify different elements simply by including the JavaScript file. Use your submitted code from lab 3 (the table and form lab) as a basis for testing. The goal here is use only JavaScript to create the desired end result as shown in Figure 1 below. Figure 1 - Node Helper Example 1. Create a JavaScript file called lab5-2.js and place it relative to your html file as script/lab5-2.js. Place all you JavaScript in this file. 2. Your script should navigate every element of the DOM for a given page. For each element in the body of the page, determine whether it is a textNode (type 3) or not. 3. Have your script create a new child node for every non-text node encountered. The new node should take on the class “hoverNode” and innerHTML equal to the parent tag name. Define appropriate styles for this CSS class in your script so that the element is yellow (as shown in figure 1). 4. Add listeners so that when you click on the newly created nodes, they will alert you to information about the tag name, so that when a node is clicked a pop-up alerts you to information about the node including its ID and innerHTML. Testing: 1. Test your script by loading it onto any page (but start with the page from lab 3). All the tags should be identified and yellow pop-up boxes are displayed. 2. Reflect on how to improve/enhance this script into a more useful tool for web development and debugging. Submission your JavaScript file via connect. This will be validated against existing HTML. Part 3: Password Security One of the challenges encountered with Web development is the handling of passwords (or sensitive data in general). After the reading break, we will discuss some of the issues with security and web development in preparation for server-side scripting. Please read chapter 16 pp. 664-698. In addition to building the form there are a series of questions to answer and submit on Connect. The questions are to be answered in the appropriate text document and submitted. Complete the readings and questions before proceeding with the code. 1. Complete questions 1, 2, 3, 7, 8, 9, 10 and 11 on pp. 713-714. 2. Create a username and password that will allow a user to enter their credentials. For the password field, use the HTML5 password object. One submit, the data posted to http://www.randyconnolly.com/tests/process.php so you can see the results. You do not need to submit this code, but use it to answer the following questions. Q12. What is the purpose of the HTML5 password input field? What is the technical problem encountered when transmitting the password with this technique? Q13. What are the possible ways of resolving this problem? Consider the different options discussed in chapter 16 and present the pros and cons of the different methods (i.e. potential pitfalls). Q14. If you had to make a recommendation, what would you recommend and why? You will need to consider all aspects of password transmission as well as storage. 3. Bonus: Attempt to implement a client-side of the solution with JavaScript. You are free to explored existing JavaScript libraries and should consider the pros/cons of each. (Please don’t spend excessive time on this question as we will be discussing potential solutions after the break. It is intended to help you discover some of the challenges you may encounter).
Attachments: