WBG310 Week 3 Lab Interactive Web Page Scripting with Lab
Using the skills acquired in the tutorials from Chapter 5, build a web page of your own design that has jQuery-programmed event handlers. Find errors and omissions in existing files and repair them to function correctly.
W3iLab_1.html. Zip the file and submit your assignment.
STEP 1: Open the Template
Open jsTemplate.html from Week 1.
Save the file as w3_Lab3.html.
STEP 2: Collect jQuery Library File
Use the link to jQuery at Google as shown here, and as described in the week lesson:
…or, download the current jQuery library file from https://jquery.com/download/ (https://jquery.com/download/) and place the file in the _js folder.
Note: You may need to right-click on the download link an and then select “Save Link as…”, or “Download Linked File as . . .” depending on your browser.
STEP 3: Set the Source for the Library File
1. If you download your own copy, create a set of script tags above the current script tag set, and set the src to the library file in Step 2.
STEP 4: Create jQuery Functions for Events
1. Set an id=”p1″ for the first paragraph
2. Create the document ready function for your page as explained in the text in Chapter 4.
3. Within the document function, create an event handler that will append the contents of the ‘more’ div tag with the message ‘You Clicked!’. Include a line break. The expected results are pictured below.
STEP 5: Create jQuery Functions for Events
1. Create a textbox inside the form. Name the new input element with id=“box1”
2. Create a function that changes the background color of the box to light blue when the box gains the focus.
3. Create a function that changes the background color of the box to pink when the box loses the focus. Hint: Blur.
STEP 6: Create jQuery Functions for Events
1. Create a button next to the textbox on the form. Make the button read, ‘Relay a Message.’
2. Create a function that appends the contents of the results DIV when clicked. The message should be ‘Here is your message’ or something similar. The expected results are pictured below.
STEP 7: Create jQuery Functions for Events
1. When the page loads (onload), hide the form.
2. Change the value of #p1 to ‘Relay a Message’ and make it a hyperlink with the href=”#”
3. Reset the function for the paragraph click event.
Include the designation in the identifier for the anchor tag.
Have the form slide down. Use the ‘slow’ modifier.
4. In the button click event, reset the message to come from the textbox. Hint: Use .val() to collect the user input. Include a line break with the message. The expected results are pictured below.
STEP 8: Prep for Turn-In
1. When your application functions as expected, zip the file submit your assignment.
There are no reviews yet.