IT 3215 Unit 3 Assignment Dynamic Images, Events, and the DOM
Overview
Images, both static and dynamic, appear on most Web sites. There are many different features and functionalities that we can add through the use of JavaScript, including preloading, rollovers, and cycling banner ads. In this assignment, you will work with JavaScript, images, events, and manipulating the DOM to create an interactive image gallery.
Hint: Preloading your images will only work on a hosting server and not your local drive, as there is no load time for your images locally. Once you have preloaded those images, you should clear your cache to test your loading of the images again.
Tip: In a smaller JavaScript program such as this one, each function is created for a specific purpose. However, in more complex sites, it is better to build functions that are applicable to multiple situations. For example, rather than specifying an element name or ID, we can use a variable that is passed into the function.
Directions
Use the gallery.html and index.html files from the supplied course Zip file. Create functionality using JavaScript on the following pages:
index.html
Preload the images (banner1.jpg, banner2.jpg, and banner3.jpg in the images folder) for the banner at the top of the page.
Create a cycling two-state banner that cycles every three seconds.
gallery.html
Preload the gallery images.
Create roll-over functionality for each of the thumbnails in your image gallery. Use appropriate images found in the images folder.
Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery.
Make sure to do the following:
Create an onpageload function to preload all of your images.
Create a modularized function to cycle the homepage banner.
Create a modularized rollover function for gallery images.
Once completed, view your pages in each of your two selected Web browsers to see if the content renders appropriately and consistently within each. Next, verify that your code is error free using the appropriate browser specific development tool found in the Resources.
Take a screen capture of each of your validation results and save it for submission.
Note: Modularized refers to creating components that can be repurposed without significant changes to coding. Modularized components have no “hard coding” of image names, URLs, and so on, in the functions. Samples of modularized and nonmodularized JavaScript are provided in the Example Code file linked in Resources.
Example assignments: You may use the assignment examples, linked in the Resources, to give you an idea of what a Proficient or higher rating on the scoring guide would look like.
Submission Requirements
Upload your Web site files to your Web host.
Submit your work in the courseroom using a single Zip file containing the following:
Your entire Web site including all associated files.
A Word document with:
The URL to your Web site so the instructor can view your site on a live host.
A screen capture of each of your two validations that you completed using the developer tools linked in Resources.
APA Writing Checklist
Use this document as a checklist for each paper you will write throughout your GCU graduate program. Follow specific instructions indicated in the assignment and use this checklist to help ensure correct grammar and APA formatting. Refer to the APA resources available in the GCU Library and Student Success Center.
☐ APA paper template (located in the Student Success Center/Writing Center) is utilized for the correct format of the paper. APA style is applied, and format is correct throughout.
☐ The title page is present. APA format is applied correctly. There are no errors.
☐ The introduction is present. APA format is applied correctly. There are no errors.
☐ Topic is well defined.
☐ Strong thesis statement is included in the introduction of the paper.
☐ The thesis statement is consistently threaded throughout the paper and included in the conclusion.
☐ Paragraph development: Each paragraph has an introductory statement, two or three sentences as the body of the paragraph, and a transition sentence to facilitate the flow of information. The sections of the main body are organized to reflect the main points of the author. APA format is applied correctly. There are no errors.
☐ All sources are cited. APA style and format are correctly applied and are free from error.
☐ Sources are completely and correctly documented on a References page, as appropriate to assignment and APA style, and format is free of error.
Scholarly Resources: Scholarly resources are written with a focus on a specific subject discipline and usually written by an expert in the same subject field. Scholarly resources are written for an academic audience.
Examples of Scholarly Resources include: Academic journals, books written by experts in a field, and formally published encyclopedias and dictionaries.
Peer-Reviewed Journals: Peer-reviewed journals are evaluated prior to publication by experts in the journal’s subject discipline. This process ensures that the articles published within the journal are academically rigorous and meet the required expectations of an article in that subject discipline.
Empirical Journal Article: This type of scholarly resource is a subset of scholarly articles that reports the original finding of an observational or experimental research study. Common aspects found within an empirical article include: literature review, methodology, results, and discussion.
Adapted from “Evaluating Resources: Defining Scholarly Resources,” located in Research Guides in the GCU Library.
☐ The writer is clearly in command of standard, written, academic English. Utilize writing resources such as Grammarly, LopesWrite report, and ThinkingStorm to check your writing.
Also Check Out: IT 3215: Unit 4 Assignment Form Field Validation and Error Messages