Activity: Dynamic web page (DOM manipulation)
(no submission)
Purpose:
Hands-on experience with JS, DOM manipulation, and form enhancement;
get ready to work on homework assignment (course project)
For this exercise, you may work with a partner or alone.
You will embed JS in
updatefield.html to
perform the following tasks:
- Set focus on "User name" text field upon loading
- Update "User name" text field on mouse over event on the links ("Humpty", "Dumpty", and "Wacky")
- For "Humpty," write JS to change a value by name
- For "Dumpty," write JS to change a value by id
- For "Wacky," write JS to change a value by position
- On mouse out event, update the "User name" text field to the default value
(note: you may choose the default value as you wish)
- Update "User name" text field on mouse click event on the buttons ("Humpty", "Dumpty", and "Wacky")
- For "Humpty," write JS to change a value by name
- For "Dumpty," write JS to change a value by id
- For "Wacky," write JS to change a value by position
You should consider:
- Where do you deploy JS components?
- How do you obtain data and how do you export data?
- How do you monitor user events, and how do you take actions?
- Where are the form data submitted to?
- Is this form submission a HTTP
POST request or a HTTP GET request?
You may modify your interface the way you like.
Get creative. Feel free to add additional elements
you feel should be included and have fun!
Refer to Basic web deployment
(XAMPP or GCP)
to deploy and test your web page.
Copyright © 2022 Upsorn Praphamontripong
Released under the
CC-BY-NC-SA 4.0 license.
Last updated 2022-05-26 19:24