IT 3215 Unit 03 Assignment Dynamic Images, Events, and the DOM
IT 3215 Unit 03 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.
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.
Resources
Dynamic
Images, Events, and the DOM Scoring Guide.
Chrome
DevTools.
Safari Web
Inspector Guide.
Microsoft
Edge Dev Tools.
IT3215 Web
Site Zip Files.
Example
Code.
Toggle
Drawer
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 Read : IT 3215 Unit 02 Assignment Using Arrays and Loops