Unit 1
discussion
DQ1 Getting Started
With JavaScript
JavaScript has been one of the most popular scripting
languages for dynamic interactivity. It is a completely different language from
HTML5 and CSS3, and it can be challenging for those without programming
experience to begin. Research and describe some tips for someone new to
JavaScript to get started. In particular, focus on at least two of the
following points while providing sample code (with comments) for each:
Explain how different browsers handle JavaScript code. What
considerations must be made when developing for different browsers?
Describe the use of JavaScript comments, including the
process of "commenting out" portions of JavaScript code.
Explain the primary rules for creating a JavaScript
identifier.
Explain the use of variable declarations and assignment
statements with numeric, string, and Boolean data.
Explain the syntax for referring to a method or property of
an object.
Explain the issue of cross-browser compatibility as it relates
to JavaScript code.
Describe the creation and use of event handlers, including
an event handler for the load event of the window object and how the HTML and
JavaScript sections work together using the DOM.
Describe how the process flow for form submissions works
between HTML, JavaScript, and a server-side language like PHP.
Response Guidelines
Comment on the post of at least two other learners. Offer
insights, solutions, examples, or opinions that add depth and value to the
conversation.
Note regarding discussions in this course: The discussion
topic should determine the length of your post, however, a minimum of 150 words
is recommended. Refer to the Discussion Participation Scoring Guide for post
expectations. Make your initial posts by Wednesday to allow time sufficient for
peers to respond. The expectation within the course discussions is to respond
to at least two posts by the end of the unit, but it is highly recommended that
you extend the dialog further. Responding over multiple days will help stimulate
a lively discussion.
Learning Components
This activity will help you achieve the following learning
components:
Study the different variable data types.
Examine the process flow of form submissions.
Understand the basic concepts of the DOM and how HTML and
the JavaScript sections of the DOM work together.
View examples of effective JavaScript comments that describe
and explain variables and functions.
DQ2 Challenges to
Using Variables in a Form
Note: The second discussion in each unit of this course is
dedicated to community sharing of challenges and solutions encountered while
completing your weekly assignment. You are encouraged to post and respond early
in the week to share experiences that you are having, and to help others with
theirs. This is how coders solve tough issues: they rely on one another!
Creating and employing variables for the first time can be
tricky. Putting them in a form can make it even tougher. For some it is very
intuitive; for others, less so.
Discuss one or more of the challenges or experiences that
you encountered when trying to complete this week's assignment. How did you try
to address it or solve it?
Response Guidelines
Comment on the post of at least two other learners. Share
suggestions to help your fellow learners address their challenges.
Unit 2
discussion
DQ1 Arrays, Loops,
and the DOM
You have learned about working with the DOM with CSS, but
you can also work with the DOM using JavaScript. You will be able to alter and
manipulate the DOM dynamically with JavaScript to extend basic JavaScript
functionality by using loops, events, controls, arrays, and functions. Research
and describe some tips for someone new to JavaScript to get started. In
particular, focus on at least two of the following points while providing sample
code (with comments) for each:
Explain how arrays and loops be utilized effectively
together versus separate variable declarations.
Describe the flow of control for while, do-while, and for
loops.
Describe the use of a JavaScript array, including the use of
its index and length property.
Describe these methods for working with forms and controls:
submit, reset, focus, blur.
Describe the use of the Document Object Model in JavaScript
applications.
Describe these events for working with controls: onfocus, onblur,
onclick, ondblclick, onchange, onselect.
Describe the process of creating and adding nodes to the
DOM, including adding rows and cells to a DOM table.
Distinguish between a function expression and a function
declaration, including which one can be called before it is defined.
Response Guidelines
Comment on the post of at least two other learners. Offer
insights, solutions, examples or opinions that add depth and value to the
conversation.
Learning Components
This activity will help you achieve the following learning
components:
Understand how to dynamically add HTML elements to an
existing page by manipulating the DOM.
Examine when arrays are utilized.
View examples of effective JavaScript comments that describe
and explain variables and functions.
Know the difference between an array and a variable.
Understand the different types of loops.
DQ2 Challenges to
Arrays and Loops
Note: The second discussion in each unit of this course is
dedicated to community sharing of challenges and solutions you have encountered
while completing your weekly assignment. You are encouraged to post and respond
early in the week to share experiences that you are having and to help others
with theirs. This is how coders solve tough issues: they rely on one another!
Creating and employing arrays and loops can be challenging.
For some it is very intuitive; for others, less so.
Discuss one or more of the challenges or experiences that
you encountered when trying to complete the assignment this week. How did you
try to address it or solve it?
Response Guidelines
Comment on the post of at least two other learners. Share
suggestions to help them address their challenges.
Unit 3
discussion
DQ1 Events, Dynamic
Images, and Modularization
The ability to animate graphics with JavaScript has resulted
in increased interactivity of Web sites. As we add more functionality into our
scripts, it is important that we take the time to modularize our code to make
it more efficient. We want to ensure our functions are split up for reuse.
Research and describe some tips and suggestions for someone
new to JavaScript to get started. In particular, focus on at least two of the
following points while providing sample code (with comments) of each:
Explain which events and methods we can use to handle user
interaction with images.
Distinguish among HTML events, mouse events, and keyboard
events.
Describe the use of cross-browser compatible functions or
methods for attaching and detaching event handlers.
Describe the use of images and preloaded images in applications
like image rollovers and slide shows.
Describe setTimeout, setInterval, clearTimeout, and
clearInterval.
Explain why modularizing a program makes it more efficient.
Identify the advantages and disadvantages of modularization.
Response Guidelines
Comment on the posts of at least two other learners,
offering insights, solutions, examples, or opinions that add depth and value to
the conversation.
Learning Components
This activity will help you achieve the following learning
components:
View examples of effective JavaScript comments that describe
and explain variables and functions.
Examine how JavaScript functions can assist in creating
fast-loading image galleries.
Understand the use of the settimeout function.
Understand principles of modular code.
Understand JavaScript timers including how the setInterval
timer is used.
DQ2 Challenges With
Dynamic Images, Events, and the DOM
Note: The second discussion in each unit of this course is
dedicated to community sharing of challenges and solutions you have encountered
while completing your weekly assignment. You are encouraged to post and respond
early in the week to share experiences that you are having, and to help others
with theirs. This is how coders solve tough issues: they rely on one another!
Dynamic images and events can make a Web page pop. For some,
creating this interactivity is a snap; for others it can be a bit of a
challenge.
Discuss one or more of the challenges or experiences that
you encountered when trying to complete this week's assignment. How did you try
to address it or solve it?
Response Guidelines
Comment on the post of at least two other learners. Share
suggestions to help the posters address their challenges.
Unit 4
discussion
DQ1 Validating Form
Input Data
Working with and processing bad data generally means that a
lot of work will have to be done to clean up the data on the back end. To avoid
the processing of bad or incorrect data, we incorporate form validation into
our Web pages. There are numerous levels of data validation, from ensuring that
input fields are not empty to ensuring the user data entered conforms to a
specified format.
Research and describe some tips for someone new to
JavaScript to get started. In particular, focus on at least two of the
following points while providing sample code (with comments) of each:
How can we set the focus to certain form elements? How do
you check for empty input fields?
What is the purpose of using client-side validation versus
server-side validation? Explain.
How does a JavaScript function validate numeric and
alphabetic inputs in specific fields?
How are regular expressions used to match patterns with
strings?
How can a regular expression be used to validate data such
as a Social Security number?
Under which circumstances would you use a validation loop?
Why is client-side validation prior to sending data to the
server important?
What is the potential problem of overly specific form
validation?
How are the + operator and the \n escape sequence used when
working with strings to manipulate the DOM to add messages for errors?
Response Guidelines
Comment on the posts of at least two other learners. Offer
insights, solutions, examples, or opinions that add depth and value to the
conversation.
Learning Components
This activity will help you achieve the following learning
components:
Understand how to set focus to certain form elements.
View examples of effective JavaScript comments that describe
and explain variables and functions.
Understand how to check for empty input fields.
Understand how a JavaScript function validates numeric and
alphabetic inputs in specific fields.
DQ2 Challenges With
Form Field Validation and Error Messages
Note: The second discussion in each unit of this course is
dedicated to community sharing of challenges and solutions you have encountered
while completing your weekly assignment. You are encouraged to post and respond
early in the week to share experiences that you are having, and to help others
with theirs. This is how coders solve tough issues: they rely on one another!
Field validation and its associated error messages are at
the heart of creating an effective form. It is important to both understand
what information is required in a form (and in which format), and anticipate
the user's experience.
Discuss one or more of the challenges or experiences that
you encountered when trying to complete this week's assignment. How did you try
to address it or solve it?
Response Guidelines
Comment on the posts of at least two other learners. Share
suggestions to help them address their challenges.
Unit 5
discussion
DQ1 Cookies-Storing
and Passing Information
On their own, HTML and CSS are unable to store user
information, so once the Web browser is closed, any user information is lost.
Cookies, Web storage, and sessions are workarounds for this shortcoming.
Research and describe some tips for someone new to JavaScript to get begin to
work with user information storage. In particular, focus on at least two of the
following points while providing sample code (with comments) of each:
Identify which storage situations would be best resolved
with sessions, local storage, and cookies to store persistent data.
Distinguish among session storage, local storage, and
cookies.
Describe how to create, read, and delete cookies with the
document.cookie property.
Explain how to parse a cookie string.
Describe the visibility, scope, and lifetime of a cookie.
Explain how cookies can create a customized user experience.
Response Guidelines
Comment on the posts of at least two other learners. Offer
insights, solutions, examples, or opinions that add depth and value to the
conversation.
Learning Components
This activity will help you achieve the following learning
components:
Examine how to store, retrieve, and pass data through query strings.
Examine how to dynamically store data into hidden input
fields.
View examples of effective JavaScript comments that describe
and explain variables and functions.
Understand how to store data and retrieve data from cookies.
DQ2 Challenges with
Query String and Storing Persistent Information
Note: The second discussion in each unit of this course is
dedicated to community sharing of challenges and solutions you have encountered
while completing your weekly assignment. You are encouraged to post and respond
early in the week to share experiences that you are having, and to help others
with theirs. This is how coders solve tough issues: they rely on one another!
Modern Web sites rely increasingly on processing queries.
Saving that data and passing it along to other Web pages is just as important.
Discuss one or more of the challenges or experiences that
you encountered when trying to complete this week's assignment. How did you try
to address it or solve it?
Response Guidelines
Comment on the posts of at least two other learners. Share
suggestions to help them address their challenges.
Resources
Discussion Participation Scoring Guide.
Unit 01
Assignment 1
Using Variables in a Form
Expectations
The JavaScript that you use in the course assignments should:
Render and function properly in at least two of the
following browsers: Chrome, Firefox, Edge, and Safari.
Be verified to be error free, well documented with comments,
and appropriately constructed.
Overview
In this assignment, use the Web page called
"invitation.html" found in the Required Resources (in the zip file
called IT-FP3215.zip) to add functionality to an interactive form that
generates an invitation to volunteers for an event. The file will have the
following invitation message placeholder and a form below it. You will add
JavaScript functionality to the form that will allow a user to dynamically fill
out the invitation.
Hello __recipientName_____!
You have been invited to volunteer for an event held on July
1st. Please respond to this email to sign up as a volunteer.
Thanks!
___hostName___
Hints:
The placeholders (for example the “recipientName”) will need
to be set up as elements with an assigned id attribute. Prompt the user to
enter in the recipient’s name, and host name (Your name). Using JavaScript,
replace those elements dynamically with what the user has entered in the form.
Use the form’s input fields (once submitted) to store the
values to JavaScript variables. Then manipulate the DOM to replace the element
content dynamically.
To get you started, in your .js file, you need to first
declare the variable names such as:
var myRecipientName;
Then, you would need to set the variable to the input
field’s value:
myRecipientName =
document.getElementById(“recipientNameInput”).value;
Next, you would then need to set the innerHTML of the span
element of the corresponding name like:
document.getElementById(“recipientNamePlaceholder”).innerHTML
= myRecipientName;
Note on your submit button, a JavaScript event handler has
been defined on the submit of the form. Notice that it has a return false to
prevent the form from actually submitting.
Hint: See what happens when you remove the “return false”
from the JavaScript code.
Tip: Variable names cannot include any special characters or
spaces. They cannot start with a number. They also cannot be any of
JavaScript’s reserved words. Remember as well that JavaScript is case
sensitive.
Preparation
Download and unzip the IT-FP3215.zip file found in the
Required Resources. It contains the initial framework for the site. All of the
HTML files are located in the root directory. Images are placed in the images
subdirectory; CSS files are placed under the css subdirectory. Your JavaScript
external files should be placed under the “js” subdirector. When you submit
your work, be sure to zip up the entire folder, including all of the ancillary
files such as the images, CSS, and JavaScript code.
Note: This course requires you to use a text editor to
complete your work. There are many free open source options on the Internet
from which you may choose. See the Suggested Resources for links to free, open
source text editors.
Directions
Read the Overview. Use the invitation.html file in the
Resources as a template for completing this assessment.
Write JavaScript that enables the invitation to be
dynamically completed using the form. Make sure to do each of the following:
Declare variables to store the input field data.
Store the input field data into the variables on form
submit.
Manipulate the DOM to replace placeholder data with the
variables.
Write developer comments to describe the variables being
declared and explain the functions and logical blocks of JavaScript code.
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.
Submission Requirements
Upload all your website files to a hosting service of your
choice. Two free sites to consider are Freehosting.com or 000webhost.com. See
the Suggested Resources for links.
Submit your work in the courseroom using a single Zip file
containing the following:
Your entire Web site (including the updated
“invitation.html” file).
A Word document with:
The url to your Web site so faculty can view your site on a
live host.
A screen capture of each of your two validations that you
completed using the developer tools found in the Resources.
Resources
Using Variables in a Form Scoring Guide.
Safari Web Inspector Guide.
Microsoft Edge Dev Tools.
000webhost.com.
Freehosting.com.
Chrome DevTools.
Brackets..
IT3215 Web Site Zip Files.
Unit 02 Assignment
1
Using Arrays and Loops
Overview
For this assignment, you will use the volunteer.html file to
create a more effective process for managing the volunteer list by using arrays
and loops. The web application will make use of the volunteer.js file and allow
the user to add volunteers, delete volunteers, clear the list of volunteers as
well as sort the volunteers. Some of the functionality has been created to
start you off so that you can see how it is all integrated. You will be
focusing on the code to delete the volunteer as well as alter the volunteer
list to add some formatting on the output. Functionality is also included to be
able to sort based on the volunteer’s last name.
Directions
Use the volunteer.html file to add functionality to our form.
This new functionality should allow the user to enter in volunteers to be added
as well as delete volunteers from the list by re-entering in their name. The
volunteer list should also be altered to use a looping structure to display a
running count of volunteers beside each name (starting at 1) beside each name
similar to the following display:
1. John Smith
2. Jane Willow
3. Randolph Jack
4. Jen Stevens
Hint: Use the splice function in order to remove a specific
item from the array.
Tip: The array index starts at 0, so when displaying the
index, you will need to add 1 to the index value when it is displayed.
Make sure to do the following:
Write JavaScript to delete a specific volunteer by using
loop.
Write JavaScript that loops through the volunteer list to
display the index value.
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.
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 faculty can view your site on a
live host.
A screen capture of each of your two validations that you
completed using the developer tools found in the Resources.
Resources
Using Arrays and Loops Scoring Guide.
Microsoft Edge Dev Tools.
IT3215 Web Site Zip Files.
Chrome DevTools.
Safari Web Inspector Guide.
Unit 03
Assignment 1
Dynamic Images, E
vents, 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.
Unit 04
Assignment 1
Form Field Validation and Error Messages
Overview
You have created a basic form and added interactivity to
images using JavaScript. Now it is time to validate information entered into
your form fields. You will use the "registration.html" file found in
your Zip file. You will see that the page has a form with the following fields
to allow users to register for an account. The items in parentheses are defined
formatting instructions to be observed for each field.
Username* (must only contain letters and numbers)
Password* (minimum of 8 characters)
PasswordVerify* (minimum of 8 characters, must match
password)
FirstName* (text string)
LastName* (text string)
Email (uses xxx@xxx.xxx format)
PhoneNumber (uses (xxx) xxx-xxxx format)
SignUpNewsletter (radio box for yes/no)
Tips:
JavaScript is case sensitive, so a variable named myVar is
different from MyVar and myvar.
Perform your form validation testing as you go rather than
all at the end. It will be much easier to fix the error if you have a smaller
sequence of code to review.
Directions
Read the assignment overview.
Use the registration.html file to add functionality to the
form found on the page. The JavaScript that you write should validate each
field and, if errors are made, display appropriate error messages that direct
the user to complete the form properly. Once the form is completed, your script
should open the confirmation page (confirmation.php).
Note: The input fields in the form with an asterisk are
required fields.
Make sure to do the following:
Write JavaScript that defines that a field is required and
generates an appropriate error message if the field has not been completed.
Write JavaScript to validate all input fields per the
formatting definitions that the field values should be checked against (found
in the overview) after each field.
Write JavaScript that displays an appropriate error
correction message (next to the field) in the event a form entry error has been
made.
Write a JavaScript that will default the user’s cursor to
the first erroneous input field in the event that there is an input error.
Create a submit button that executes the validation when
submitted.
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.
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 and 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 found in the Resources.
Resources
Form Field Validation and Error Messages Scoring Guide.
Microsoft Edge Dev Tools.
Safari Web Inspector Guide.
Chrome DevTools.
IT3215 Web Site Zip Files.
Unit 05
Assignment 1
Query Strings and Storing Persistent Information
Overview
As Web forms get longer, we very commonly see them split
across multiple pages to collect all of the necessary information. There are
different reasons for this. A long form can be daunting for users and a
large/long form can be difficult for users to fill out on a mobile device.
These forms need to be designed so that the data entered by the user on the
forms on each page will be submitted to the Web server simultaneously. This
makes more sense as they are part of the same data set. The problem with
stateless pages is that if the user moves from one page to the next, the data
entered is lost. To bypass this issue, you will need to use query strings,
hidden input fields, and cookies.
In this assignment you will use the previously created
registration.html file to send information to a second page named confirm.html.
You will write a script on that page that will save the information from the
form to a cookie and then display it on a same page. If the user goes back to
this confirm.html page, the page should display the user form data from the
registration entry that was last entered.
Tips:
It will help to output the array into the browser console so
that you can verify that the string is being correctly parsed. Details on the
browser console can be found in the Resources.
To skip having to enter data into the form each time to
test, it may help to create a JavaScript function that automatically fills in
the fields for you and comment it out when completed.
Directions
Read the Overview.
Modify the "registration.html" page created in the
prior assessment to send a query (that has all input field information from
that form) to a second page. When the user presses submit, all of the input
fields from the registration.html form will be saved into a cookie. The user
should then be forwarded to a second page (confirm.html (created by you)) that
will read the cookie information and display it in a name/value pair using
JavaScript.
Make sure to do the following:
Create and integrate a script on the registration.html page
passes all of the input fields from the form when the submit button is pressed.
Create a confirm.html page will read in the input from the
query string data from the registration.html page and store them into variables
first.
Write a script that runs in response to the submit event,
that saves the input from the registration.html
page to a series of cookies to store each input, and opens a second page
called confirm.html that reads and displays information from all the fields.
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.
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 and all associated files.
A Word document with:
The url to your Web site so faculty can view your site on a
live host.
A screen capture of each of your two validations that you
completed using the developer tools found in the Resources.
Resources
Query Strings and Storing Persistent Information Scoring
Guide.
Microsoft Edge Dev Tools.
Chrome DevTools.
Safari Web Inspector Guide.
IT3215 Web Site Zip Files.
