+1 (208) 254-6996 [email protected]
  

Syllabus

This course emphasizes fundamental Web-scripting skills and provides a comprehensive overview of the process of adding interactivity to Web pages using JavaScript. You will develop JavaScript client-side scripts while adhering to W3C and ECMA standards. You will also modify the DOM dynamically, work with events, validate forms, and store persistent data during a course-long project.

Don't use plagiarized sources. Get Your Custom Essay on
Introduction To JavaScript
Just from $13/Page
Order Essay

To successfully complete this course, you will be expected to:

1. Manipulate web page elements using Document Object Model (DOM).

2. Create interactive webpage functionality using JavaScript.

3. Write functional JavaScript code using current W3C and ECMA standards.

4. Communicate effectively.

Syllabus

This course emphasizes fundamental Web-scripting skills and provides a comprehensive overview of the process of adding interactivity to Web pages using JavaScript. You will develop JavaScript client-side scripts while adhering to W3C and ECMA standards. You will also modify the DOM dynamically, work with events, validate forms, and store persistent data during a course-long project.

To successfully complete this course, you will be expected to:

1. Manipulate web page elements using Document Object Model (DOM).

2. Create interactive webpage functionality using JavaScript.

3. Write functional JavaScript code using current W3C and ECMA standards.

4. Communicate effectively.

Welcome to Introduction to JavaScript

Posted on: Sunday, October 3, 2021 4:27:58 PM CDT

Welcome to Introduction to JavaScript

Hello everyone and Welcome to this exciting class on JavaScript!

JavaScript is the programming language of the web. Its features allow us to create exciting, interactive, and adaptive web pages.

In this course, you work on a series of assessments related to working with JavaScript and its features. The assessments are as follows:

· Assessment 1 – Using Variables in a Form

· Assessment 2 – Using Arrays and Loops

· Assessment 3 – Dynamic Images, Events, and the DOM

· Assessment 4 – Form Field Validation and Error Messages

· Assessment 5 – Query Strings and Storing Persistent Information

Happy JavaScript Programming!

confirm.html

CapellaVolunteers.org

This events site is for IT-FP3215 tasks.

css/main.css

body { font: 15px arial, sans-serif; color: #808080; } input[type=text], select ,input[type=password],radio{ width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #800D1E; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #802F1E; } section { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } article { border-radius: 5px; background-color: #CCCCCC; padding: 20px; color: #222222; } ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li { float: left; } ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) { background-color: #111; } ul.topnav li a.active { background-color: #CCCCCC; color: #333 } ul.topnav li.right { float: right; } @media screen and (max-width: 600px) { ul.topnav li.right, ul.topnav li { float: none; } } .top { position: relative; background-color: #ffffff; height: 68px; padding-top: 20px; line-height: 50px; overflow: hidden; z-index: 2; } .logo { font-family: arial; text-decoration: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 37px; letter-spacing: 3px; color: #555555; display: block; position: absolute; top: 17px; } .logo .dotcom { color: #800D1E } .topnav { position: relative; z-index: 2; font-size: 17px; background-color: #5f5f5f; color: #f1f1f1; width: 100%; padding: 0; letter-spacing: 1px; } .top .logo { position: relative; top: 0; width: 100%; text-align: left; margin: auto } footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; }

gallery.html

CapellaVolunteers.org

 Add a description of the image here  Add a description of the image here  Add a description of the image here  Add a description of the image here This events site is for IT-FP3215 tasks.

images/banner1.jpg

images/banner2.jpg

images/banner3.jpg

images/event.jpg

images/firefighter.jpg

images/silhouette.jpg

images/Thumbs.db

images/work.jpg

index.html

CapellaVolunteers.org

Banner Images BannerBannerBanner This events site is for IT-FP3215 tasks.

interests.html

CapellaVolunteers.org

This events site is for IT-FP3215 tasks.

invitation.html

CapellaVolunteers.org

Recipient name: Organization name: Event Date: URL: Host name: Hello recipientName! You have been invited to volunteer for an event held by organizationName on eventDate. Please come to the following website: websiteURL to sign up as a volunteer. Thanks! hostName This events site is for IT-FP3215 tasks.

registration.html

CapellaVolunteers.org

Username: Password: Verify your Password: First Name: Last Name: Email: Phone Number Sign up for newsletter: Yes No This events site is for IT-FP3215 tasks.

Assessment 1.docx

Expectations

The JavaScript that you use in the course assessments should:

· Render and function properly in at least two of the following browsers: Chrome, Firefox, Edge, or Safari.

· Be verified to be error-free, well-documented with comments, and appropriately constructed.

Overview

In this assessment, 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 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 by __organizationName_____ on ___eventDate_____. Please come to the following website: <insert your website URL> to sign up as a volunteer.

Thanks!

__hostName__

Hints:

· The placeholders (for example the “recipientName”) will need to be set up as <span> elements with an assigned id attribute. Prompt the user to enter in the recipient’s name, organization name, event date, and host 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 <span> element content dynamically.

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.

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” subdirectory (you will need to create it). 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:

2. The url to your Web site so faculty can view your site on a live host.

2. A screen capture of each of your two validations that you completed using the developer tools found in the Resources.

cf_assessment_1_context.docx

CU_Horiz_RGB IT-FP3215 – Introduction to JavaScript

CU_Horiz_RGB

Assessment 1 Context

HTML and CSS do well to present content on the page but they can be lacking in terms of interactivity. JavaScript provides a way to control the browser components (as the client), and help add visual interest and interactivity to Web pages. JavaScript is a scripting language that serves as the foundation to many other technologies/frameworks and libraries such as Ajax and jQuery.

JavaScript is a scripting language that allows developers to add interactivity to their pages. These scripts are either contained as part of an HTML page or in an external file similar to external cascading style sheets. On the Web pages we create for this course, our JavaScript code will be enclosed within a <script> element that tells the browsers to run the JavaScript code.

This Is Not Java

You may have heard of another common programming language named Java, but JavaScript and Java have nothing to do with each other. Java is a programming language that can create cross-platform or standalone applications. JavaScript, on the other hand, runs completely inside of a browser window. JavaScript’s goal is to provide an opportunity for interactivity. JavaScript is used to create rollovers, validate forms, run calculations, launch new windows, replace content on the fly, and many other features.

One key part of JavaScript is that it is an object-oriented language. An object is a type of thing that JavaScript has to deal with as part of the browser. These can be objects such as windows, forms, elements of a form, or images. These objects then can have certain properties associated with them. For example, a document can have a title, a form can have a submit button, an image can have a source, and so forth. With JavaScript, you can change these properties. Note that objects can also have sub-objects as well. When it comes to the things that objects can do, these are called methods or functions.

After writing a lot of JavaScript code, you may find that you often write the same types of things over and over. It’s great to learn the basics of JavaScript, but as you progress, you will start to see a lot of commonly used code start to be bundled up into toolkits, libraries, and frameworks. One of the popular bundles is jQuery, which you will begin to work with in a later course. However, having the fundamentals in JavaScript is important as many of its concepts are universal.

You should already be familiar with the Document Object Model (DOM) but if not, the objects that make up a Web page or document would be represented in a tree structure. For example, the top level of a page is contained in an <html> element, and within it you will find <head> and <body> elements. Then inside of those elements, you will have more elements and attributes on those elements. The representation of how these different elements or objects are used in a page/document is what we call the DOM. Using JavaScript, we can manipulate those objects by adding, accessing, changing, or deleting nodes from that document object model.

Events

Events are actions that our users can perform on our Web pages. There are many different events, such as submitting a form, loading a Web page or clicking on an object. There are specific event handlers that handle each of those actions accordingly. In JavaScript, we have onsubmit, onload, and onclick to match those events that we mentioned previously. There are, however, many more choices for various events. Using the example of onclick, when the user clicks on a button, the onclick event hander would be executed and would run any code that was assigned to it.

Values

In JavaScript, any type of information is called a value. A value can be numbers, strings that are enclosed in quotes, boolean values, null or empty values, or objects. Variables would contain these values. Operators, on the other hand, are the symbols that are used to manipulate or work with these variables. You should already be familiar with them from basic arithmetic.

Notes

JavaScript does not care if you use single or double quotes. If a phrase or string is already in double quotes, you will want to switch to single quotes and vice versa. Keep in mind that quotes need to come in pairs as an opening double quote needs to be closed with another double quote.

Using var does two things when it comes to JavaScript. First it tells JavaScript that we are creating a variable and to set some space and memory for the object/variable. In addition, it defines the scope of the variable. If a variable is created inside a function, other functions do not have access to that variable. Rather, it is only local to that function itself. If it is created outside of any function, it’s global, meaning that everything in our script would have access to it.

You may wonder where JavaScript fits into the whole scheme of Web pages. It is good to think about HTML, CSS, and JavaScript as a group. HTML contains the content or structure of a page. CSS, on the other hand, controls the appearance or presentation of the page. JavaScript helps us control the behavior of the page. Inside our HTML code, we will generally need to identify content to be able to change the presentation or behavior of the page. To do so, we will mostly use the attributes of the class and id of elements. These attributes of elements are used by both CSS and JavaScript. CSS uses these attributes to define the appearance of specific elements, whereas JavaScript can use the same attributes to affect the behavior of elements on the page.

Tip: Many have trouble remembering when to use “#” or “.” in your CSS when it comes to referencing an id or a class. One way to remember it is that an id can be on a single page only one time. One is a number and the hash symbol (#) is also called a number sign so that goes with the id.

1

2

cf_IT-FP3215.zip

confirm.html

CapellaVolunteers.org

This events site is for IT-FP3215 tasks.

css/main.css

body { font: 15px arial, sans-serif; color: #808080; } input[type=text], select ,input[type=password],radio{ width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #800D1E; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #802F1E; } section { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } article { border-radius: 5px; background-color: #CCCCCC; padding: 20px; color: #222222; } ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li { float: left; } ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) { background-color: #111; } ul.topnav li a.active { background-color: #CCCCCC; color: #333 } ul.topnav li.right { float: right; } @media screen and (max-width: 600px) { ul.topnav li.right, ul.topnav li { float: none; } } .top { position: relative; background-color: #ffffff; height: 68px; padding-top: 20px; line-height: 50px; overflow: hidden; z-index: 2; } .logo { font-family: arial; text-decoration: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 37px; letter-spacing: 3px; color: #555555; display: block; position: absolute; top: 17px; } .logo .dotcom { color: #800D1E } .topnav { position: relative; z-index: 2; font-size: 17px; background-color: #5f5f5f; color: #f1f1f1; width: 100%; padding: 0; letter-spacing: 1px; } .top .logo { position: relative; top: 0; width: 100%; text-align: left; margin: auto } footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; }

gallery.html

CapellaVolunteers.org

 Add a description of the image here  Add a description of the image here  Add a description of the image here  Add a description of the image here This events site is for IT-FP3215 tasks.

images/banner1.jpg

images/banner2.jpg

images/banner3.jpg

images/event.jpg

images/firefighter.jpg

images/silhouette.jpg

images/Thumbs.db

images/work.jpg

index.html

CapellaVolunteers.org

Banner Images BannerBannerBanner This events site is for IT-FP3215 tasks.

interests.html

CapellaVolunteers.org

This events site is for IT-FP3215 tasks.

invitation.html

CapellaVolunteers.org

Recipient name: Organization name: Event Date: URL: Host name: Hello recipientName! You have been invited to volunteer for an event held by organizationName on eventDate. Please come to the following website: websiteURL to sign up as a volunteer. Thanks! hostName This events site is for IT-FP3215 tasks.

registration.html

CapellaVolunteers.org

Username: Password: Verify your Password: First Name: Last Name: Email: Phone Number Sign up for newsletter: Yes No This events site is for IT-FP3215 tasks.

Guidance – Assessment 1.docx

Guidance – Assessment 1 Assignment Guidance

Class,

Attached please find guidance to assessment 1 assignment. This guidance provides some useful information on how to start and complete your assignment for this assessment.

This guidance is a walkthrough executing JavaScript code that manipulate variables in an HTML form.

Check it out. It will help!

Here is a link to the resulting web site:

https://zen-tesla-537826.netlify.app/u1/captureInput.html

And here is the guidance video:

In this assessment, you will be introduced to some key features with JavaScript. You will be using variables which will allow JavaScript to be able to store data for later use or calculations. In addition, you will be manipulating the DOM to replace content on the Web page. In the past, you may have seen other means to display user events, such as dialog boxes. However, this method is outdated with the manipulation of the DOM directly on screen to be much more common. In addition, you will be handling events to trigger a function in JavaScript to complete this processing.

Read more about JavaScript, the DOM, and variables, read the  Assessment 1 Context  document.

As you prepare to complete this assessment, you may want to think about other related issues to deepen your understanding or broaden your viewpoint. You are encouraged to consider the questions below and discuss them with a fellow learner, a work associate, an interested friend, or a member of your professional community. Note that these questions are for your own development and exploration and do not need to be completed or submitted as part of your assessment.

Browsers

· How do different browsers handle JavaScript code?

· What considerations must be made when developing for different browsers?

JavaScript

· What are the various ways that data can be set and altered in JavaScript?

· How do the methods that we set variables with differ depending on the data type?

Download and unzip the folder to your local machine.

· IT-FP3215.zip .

Using Variables in a Form Scoring Guide -A1.pdf

11/3/21, 9:23 AM Using Variables in a Form Scoring Guide

https://courserooma.capella.edu/bbcswebdav/institution/IT-FP/IT-FP3215/170700/Scoring_Guides/u01a1_scoring_guide.html 1/1

Using Variables in a Form Scoring Guide

CRITERIA NON-PERFORMANCE BASIC PROFICIENT DISTINGUISHED

Manipulate the DOM to replace placeholder data with the variables.

Does not manipulate the DOM to replace placeholder data with the variables.

Partially or incorrectly manipulates the DOM to replace some placeholder data with variables.

Manipulates the DOM to replace placeholder data with the variables.

Manipulates the DOM to replace placeholder data with the variables while fully retaining HTML5 compliant code.

Declare variables to store the input field data.

Does not declare variables to store the input field data.

Declares some variables to store the input data field, but some may not be the optimal data type or may have some hard-coded values.

Declares variables to store the input field data.

Declared variables to store the input field data with full consideration of the data type, scope, and naming convention using industry standards. Stores the input field data into the variables on form submit efficiently with error checking.

Store the input field data into the variables on form submit.

Does not store the input field data into the variables on form submit.

Stores some input field data into variables but may have some errors to store the data due to data types or size.

Stores the input field data into the variables on form submit.

Stores the input field data into the variables on form submit using efficient coding practices with error checking.

Submit error-free validated code.

Does not submit code.

Submits validated code with some errors.

Submits error-free validated code.

Submits error-free validated code that’s formatted according to best practices and industry standards.

Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code.

Does not write developer comments.

Writes developer comments that are unclear or incomplete.

Writes developer comments to describe the variables being declared and explains the functions and logical blocks of JavaScript code

Writes developer comments to describe the variables being declared and explains the functions and logical blocks of JavaScript code; comments are presented in a professional and easy to read format.

Assessment 2.docx

Overview

In the previous assessment, you used a static set of named variables to store the data that was entered in a form to be output in a message. For this assessment, you will use the invitation.html file that you modified in the previous assessment to create a more effective process for entering information and creating invitations for volunteers. Rather than having to enter each volunteer and create an invitation one at a time, you will create a script that will prompt the user to enter in the number of volunteers, event date, organization name, and host name. Using the number of volunteers entered (5–10), the script should loop through to ask the user to enter the recipient name and store it in an array. Once the user has entered all of the names and pressed submit, the page should display each of the invitations one after another at the bottom of the page.

Directions

Use the invitation.html file that you submitted in your previous assessment to add functionality to your form. This new functionality should allow the user to enter in the number of volunteers, whereupon the form will display the corresponding number of input fields for the user to enter information for each volunteer. Once the form is submitted, the data should be stored in an array to be looped through to create separate invitations for each volunteer on a new page.

Make sure to do the following:

· Add an input field that allows the user to input the number of volunteers as a numeric value.

· Once the number of volunteers has been entered (by pressing the enter key while the cursor is in the input field), use JavaScript to display the volunteer input fields based upon the number of volunteers entered.

· Write JavaScript that stores the form into an array of records once the form is submitted.

· Write JavaScript to Loop through the array of records and then display the invitation message for each volunteer. (Unlike a simple array that contains a single variable for each index, an array of records allows us to store related data fields for each index in the array. If we were going to store this in simple arrays, we would need a separate array for each data field.)

· 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.

cf_assessment_2_context.docx

CU_Horiz_RGB IT-FP3215: Introduction to JavaScript

CU_Horiz_RGB

Assessment 2 Context

Most of the code that we have created so far has been straightforward. The programs basically have a start and end. However, there are instances where we need to change the default order of execution through the process of controlling the flow of the program. Arrays are very frequently used with this type of program as well.

Arrays

An array contains a set of data that is represented by a single variable name. In many ways, you can think of an array as a way to store a collection of related variables in a single variable.

Generally, we use an array when we want to store a group or a list of related information. Some examples may be a list of names, courses, products or prices. Each value in the array is called an element, which has a number called an index that points to the element’s position within that array. One unique thing to note is that the numbering starts at 0 similar to many other programming languages.

In order to access the first element of the array, we would identify the array name with the index number in brackets like: names[0]. If we have 5 items in the array, our index value would go from 0 to 4. Similarly, if we need to access the last item in the array, we would use names[4]. Using names[5] would error out. Other than that, the use of these arrays in terms of assignment would be the same as regular variables.

Loops

There are many instances in which we may need to repeat the same statement, function, or code. When that is the case, we need to use a loop. A simple one is the while loop, which repeats the statements within the loop as long as the expression is true. The expression is always tested before executing the loop. After the statements in the while loop are tested, the condition is checked again and executes the loop again until the expression is false.

There is a do/while loop which is similar to the while loop other than the fact that it always executes once and does the test of the expression at the end. A for loop, on the other hand, is generally used when you have a specific number of times that the code must execute. It generally uses a counter that is initialized to a specific value, changes the value with each iteration, and then is checked on the condition.

Note: You may accidentally create an infinite loop if there is no condition to end the loop. If this is the case, you will want to close the browser as it will be stuck in that loop. In many browsers, you may also get a dialog box that indicates that the loop is taking up too much time to process and asks if you would like to end it.

As we start to develop more complex code, there may be scenarios in which we would want to trace errors in the program by analyzing a list of values. We can do so by logging which outputs values directly to the console using the console.log() method. This will output any values that we pass to the console.log() function to the console of the browser.12cf_IT-FP3215.zipconfirm.htmlCapellaVolunteers.org

This events site is for IT-FP3215 tasks.

css/main.css

body { font: 15px arial, sans-serif; color: #808080; } input[type=text], select ,input[type=password],radio{ width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #800D1E; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #802F1E; } section { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } article { border-radius: 5px; background-color: #CCCCCC; padding: 20px; color: #222222; } ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li { float: left; } ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) { background-color: #111; } ul.topnav li a.active { background-color: #CCCCCC; color: #333 } ul.topnav li.right { float: right; } @media screen and (max-width: 600px) { ul.topnav li.right, ul.topnav li { float: none; } } .top { position: relative; background-color: #ffffff; height: 68px; padding-top: 20px; line-height: 50px; overflow: hidden; z-index: 2; } .logo { font-family: arial; text-decoration: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 37px; letter-spacing: 3px; color: #555555; display: block; position: absolute; top: 17px; } .logo .dotcom { color: #800D1E } .topnav { position: relative; z-index: 2; font-size: 17px; background-color: #5f5f5f; color: #f1f1f1; width: 100%; padding: 0; letter-spacing: 1px; } .top .logo { position: relative; top: 0; width: 100%; text-align: left; margin: auto } footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; }

gallery.html

CapellaVolunteers.org

 Add a description of the image here  Add a description of the image here  Add a description of the image here  Add a description of the image here This events site is for IT-FP3215 tasks.

images/banner1.jpg

images/banner2.jpg

images/banner3.jpg

images/event.jpg

images/firefighter.jpg

images/silhouette.jpg

images/Thumbs.db

images/work.jpg

index.html

CapellaVolunteers.org

Banner Images BannerBannerBanner This events site is for IT-FP3215 tasks.

interests.html

CapellaVolunteers.org

This events site is for IT-FP3215 tasks.

invitation.html

CapellaVolunteers.org

Recipient name: Organization name: Event Date: URL: Host name: Hello recipientName! You have been invited to volunteer for an event held by organizationName on eventDate. Please come to the following website: websiteURL to sign up as a volunteer. Thanks! hostName This events site is for IT-FP3215 tasks.

registration.html

CapellaVolunteers.org

Username: Password: Verify your Password: First Name: Last Name: Email: Phone Number Sign up for newsletter: Yes No This events site is for IT-FP3215 tasks.

Guidance – Assessment 2.docx

Use the invitation.html file that you modified in the previous assessment to create a more effective process for entering information and creating invitations for volunteers.

The assessments in this course build upon one another and must be completed in the order in which they are presented.

By successfully completing this assessment, you will demonstrate your proficiency in the following course competencies and assessment criteria:

· Competency 2: Create interactive webpage functionality using JavaScript.

. Add an input field that allows the user to input the number of volunteers.

. Store form data into an array of records.

· Competency 3: Write functional JavaScript code using current W3C and ECMA standards.

. Use JavaScript to display volunteer input fields based upon the number of volunteers entered.

. Loop through the array of records to display the invitation message for each volunteer.

· Competency 4: Communicate effectively.

. Write developer comments to explain each operation in the form.

In this assessment, you will learn to use arrays, loops, and conditional statements to be able to process data. There are many instances in which you may not know how many times certain events should take place until the user determines it while on the page. When we have the same data records being repeated in a way similar to what we had in the prior assessment, the use of arrays will help us avoid having to declare a new variable for each of those data points. By combining the arrays and loops, we are able to efficiently process data records without introducing user error.

To add to the interactivity of form, you will have two events to handle separately with event handlers triggered for different scenarios. The unique part is that the first event of the number of volunteers being entered will generate the input fields for the second event to handle.

Read more about arrays, loops, and conditional statements in the full  Assessment 2 Context  document.

As you prepare to complete this assessment, you may want to think about other related issues to deepen your understanding or broaden your viewpoint. You are encouraged to consider the questions below and discuss them with a fellow learner, a work associate, an interested friend, or a member of your professional community. Note that these questions are for your own development and exploration and do not need to be completed or submitted as part of your assessment.

· How can arrays and loops be utilized effectively together in comparison to separate variable declarations?

· What different types of loops are there? How can they be used in JavaScript?

Required Resources

The following resources are required to complete the assessment.

Capella Resources

· IT-FP3215.zip .

Using Arrays and Loops Scoring Guide – A2.pdf

11/3/21, 9:24 AM Using Arrays and Loops Scoring Guide

https://courserooma.capella.edu/bbcswebdav/institution/IT-FP/IT-FP3215/170700/Scoring_Guides/u02a1_scoring_guide.html 1/1

Using Arrays and Loops Scoring Guide

CRITERIA NON-PERFORMANCE BASIC PROFICIENT DISTINGUISHED

Add an input field that allows the user to input the number of volunteers.

Does not add an input field.

Adds an input field that may not have all of the attributes or has the incorrect data type.

Adds an input field that allows the user to input the number of volunteers.

Adds an input field that allows the user to input the number of volunteers ensuring that only a numeric value can be entered.

Use JavaScript to display volunteer input fields based upon the number of volunteers entered.

Does not use JavaScript to display volunteer input fields.

Uses JavaScript to partially display some of the volunteer input fields based on number of volunteers entered, but the results may be inefficient or hard coded.

Uses JavaScript to display volunteer input fields based upon the number of volunteers entered.

Uses JavaScript to display volunteer input fields based upon the number of volunteers entered in a way that is organized and formatted for effective data entry.

Store form data into an array of records.

Does not store form data into an array of records.

Partially stores form data, or stores data in an array but not in an array of records.

Stores form data into an array of records.

Stores form data into an array of records in the most efficient manner for future access.

Loop through the array of records to display the invitation message for each volunteer.

Does not loop through the array of records.

Loops through the array or records but does not display the invitation message. Or, only partially loops through the array.

Loops through the array of records to display the invitation message for each volunteer.

Loops through the array of records to display the invitation message for each volunteer ensuring the capability to handle all ranges of inputs without errors.

Write developer comments to explain each operation in the form.

Does not write developer comments.

Writes developer comments that are inaccurate or do little to explain each operation in the form or omits critical operations.

Writes developer comments to explain each operation in the form.

Writes developer comments to explain each operation in the form in a clear unambiguous manner that fully informs developers who may read them.

Assessment 3.docx

Overview

Most Web sites have images. There are many different features and functionality that can be used to work with images via the use of JavaScript. These include preloading, rollovers, and cycling banner ads. In this assessment, you will be working with JavaScript, images, and events, and you will be 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’s no load time for your images locally. Once you have preloaded those images, you may want to 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 we can apply 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 that you downloaded in the Zip file in Assessment 1. Create functionality using JavaScript on the following pages:

index.html

· Preload the images (banner1.jpg, banner2.jpg and banner3.jpg found 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 rollover 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 re-purposed without significant changes to coding. Modularized components have no “hard coding” of image names, urls, et cetera, in the functions. There is an example JavaScript modularized and non-modularized JavaScript found in the Suggested Resources in the file called “Example Code.”

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.

cf_assessment_3_context.docx

CU_Horiz_RGB IT-FP3215 Introduction to JavaScript

CU_Horiz_RGB

Assessment 3 Context

One of the best and most common uses of JavaScript is to add some type of visual interactivity to Web pages through the animation of graphics. Making an image on a Web page change when the user moves the mouse over an image is a very common approach. Rollovers with JavaScript can be easy to implement but there is much more that you can do with JavaScript, such as automatically changing images, creating banners, creating slideshows, or even displaying random images on a page.

Rollovers

The concept around rollovers is fairly simple. You have two images. The first or the original image is loaded and displayed on the page just as normal. When the user moves their mouse over this original image, the browser should then be able to quickly swap out the original image to the second image. In addition, once the user moves their mouse off of the image, it will swap the second image back to the original image. There are two events that would be created with the onmouseover and onmouseout. Very commonly, the use of this rollover effect is an indication to the user that they can interact with the image similar to a button.

The disadvantage of loading the images when the user rolls over the image is that it has to be downloaded from the server at that time. This means that there can be a bit of a delay depending on the size of the image when the user hovers over the image. What we generally need to do instead is to preload the image in JavaScript so that the script can swap out the variables quickly.The animation on the first hover will also be much smoother. This preloading of the images should be done onload of the web page.Beyond the basic rollover, there is also a three­state rollover. Beyond the original image and then one that appears when the user moves their mouse over the image, there is also one that when the image is clicked, a third one is displayed to show that a different action was invoked.Tip: When it comes to labeling your images for rollovers, it can help to add in _on and _click at the end of the image name so that they are easy to identify/replace.BannersBanners that switch between images are also commonly used. Some of them are done through animated GIF files where they contain a number of frames that play in sequence.Another common element is the use of Flash animations, although that is decreasing in usage as mobile browsers do not support it. JavaScript allows you to cycle through images. Using the setTimeout function, you can make a recursive call to a function to swap the images. An approach is to declare an array of your images, then in your function, you would increment the index of your current image displayed (starting at zero). Then if the index equals the length of the image, it would be reset back to zero.12cf_IT-FP3215.zipconfirm.htmlCapellaVolunteers.org

This events site is for IT-FP3215 tasks.

css/main.css

body { font: 15px arial, sans-serif; color: #808080; } input[type=text], select ,input[type=password],radio{ width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #800D1E; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #802F1E; } section { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } article { border-radius: 5px; background-color: #CCCCCC; padding: 20px; color: #222222; } ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li { float: left; } ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) { background-color: #111; } ul.topnav li a.active { background-color: #CCCCCC; color: #333 } ul.topnav li.right { float: right; } @media screen and (max-width: 600px) { ul.topnav li.right, ul.topnav li { float: none; } } .top { position: relative; background-color: #ffffff; height: 68px; padding-top: 20px; line-height: 50px; overflow: hidden; z-index: 2; } .logo { font-family: arial; text-decoration: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 37px; letter-spacing: 3px; color: #555555; display: block; position: absolute; top: 17px; } .logo .dotcom { color: #800D1E } .topnav { position: relative; z-index: 2; font-size: 17px; background-color: #5f5f5f; color: #f1f1f1; width: 100%; padding: 0; letter-spacing: 1px; } .top .logo { position: relative; top: 0; width: 100%; text-align: left; margin: auto } footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; }

gallery.html

CapellaVolunteers.org

 Add a description of the image here  Add a description of the image here  Add a description of the image here  Add a description of the image here This events site is for IT-FP3215 tasks.

images/banner1.jpg

images/banner2.jpg

images/banner3.jpg

images/event.jpg

images/firefighter.jpg

images/silhouette.jpg

images/Thumbs.db

images/work.jpg

index.html

CapellaVolunteers.org

Banner Images BannerBannerBanner This events site is for IT-FP3215 tasks.

interests.html

CapellaVolunteers.org

This events site is for IT-FP3215 tasks.

invitation.html

CapellaVolunteers.org

Recipient name: Organization name: Event Date: URL: Host name: Hello recipientName! You have been invited to volunteer for an event held by organizationName on eventDate. Please come to the following website: websiteURL to sign up as a volunteer. Thanks! hostName This events site is for IT-FP3215 tasks.

registration.html

CapellaVolunteers.org

Username: Password: Verify your Password: First Name: Last Name: Email: Phone Number Sign up for newsletter: Yes No This events site is for IT-FP3215 tasks.

Dynamic Images, Events, and the DOM Scoring Guide – A3.pdf

11/3/21, 9:24 AM Dynamic Images, Events, and the DOM Scoring Guide

https://courserooma.capella.edu/bbcswebdav/institution/IT-FP/IT-FP3215/170700/Scoring_Guides/u03a1_scoring_guide.html 1/1

Dynamic Images, Events, and the DOM Scoring Guide

CRITERIA NON-PERFORMANCE BASIC PROFICIENT DISTINGUISHED

Create a working onpageload function to preload Web site images.

Does not create an onpageload function.

Creates an onpageload function to preload Web site images that does not function as specified.

Creates a working onpageload function to preload Web site images.

Creates a working onpageload function to preload Web site images in the an efficient manner that allows for easy code reuse.

Create a working modularized JavaScript function to cycle the homepage banner.

Does not create a JavaScript function to cycle the homepage banner.

Creates a JavaScript function that does not effectively cycle the homepage banner.

Creates a working modularized JavaScript function to cycle the homepage banner.

Creates a JavaScript function to cycle the homepage banner efficiently directing the banner to pause if the user hovers over the image.

Create a working modularized JavaScript roll-over function for gallery images.

Does not create a JavaScript roll-over function for gallery images.

Creates a JavaScript roll-over function for gallery images that does not consistently function properly.

Creates a working modularized JavaScript roll-over function for gallery images.

Creates a working modularized JavaScript roll-over function for gallery images that functions flawlessly and permits additions of images without the need to hard-code the values.

Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code.

Does not write developer comments.

Writes developer comments that are inaccurate or do little to describe the variables being declared and explain the functions and logical blocks of JavaScript code.

Writes developer comments to describe the variables being declared and explains the functions and logical blocks of JavaScript code.

Writes developer comments to describe the variables being declared and explains the functions and logical blocks of JavaScript code in a clear unambiguous manner that fully informs developers who may read them.

Guidance – Assessment 3.docx

Use JavaScript, images, and events and manipulate the DOM to create an interactive image gallery.

The assessments in this course build upon one another and must be completed in the order in which they are presented.

By successfully completing this assessment, you will demonstrate your proficiency in the following course competencies and assessment criteria:

· Competency 2: Create interactive webpage functionality using JavaScript.

. Create a working onpageload function to preload Web site images.

. Create a working modularized JavaScript function to cycle the homepage banner.

. Create a working modularized JavaScript roll-over function for gallery images.

· Competency 4: Communicate effectively.

. Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code.

In this assessment, you will be adding interactivity to images. Without the use of JavaScript preloaders, the user will experience a delay while the browser downloads the image. The preloader will load the images prior to the user needing them, which allows the user to experience a seamless transition. You will be applying this to rollover effects and banner ad functionality. Both of these are very commonly seen in Web sites.

Read more about JavaScript preloaders, rollovers, and banner states in the Assessment 3 Context document.

Terms to Know

The following terms are applicable to your work in this assessment. Information regarding each can be found at:

· w3schools.com. (n.d.). JavaScript and HTML DOM reference. Retrieved from https://www.w3schools.com/jsref/default.asp

. Function.

. setTimeout.

. onmouseover.

. onmouseout.

. onload.

As you prepare to complete this assessment, you may want to think about other related issues to deepen your understanding or broaden your viewpoint. You are encouraged to consider the questions below and discuss them with a fellow learner, a work associate, an interested friend, or a member of your professional community. Note that these questions are for your own development and exploration and do not need to be completed or submitted as part of your assessment.

· In what ways can we delay the processing of scripts?

· What methods can we use to preload images to the browser cache?

· What events and methods can we use to handle user interaction with images?

Required Resources

The following resources are required to complete the assessment.

Capella Resources

· IT-FP3215.zip .

Assessment 5.docx

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 assessment you will use the previously created registration.html file to send information to a second page (interests.html) that has another form for the user to complete. You will write a script on that form that will save the information from both forms to a cookie and then display it on a third page.

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 (interests.html (created by you)). The information should be stored in hidden input fields (in the interests.html page) using the same field id/name. The interests page should ask the user to enter the following in optional fields:

· Interests (list at least three using a checkbox).

· Newsletter sign up (radio box with a yes/no option).

· Comments (free form text area).

· Referred by (text field).

When the user presses submit, all of the input fields from this form as well as the registration.html form will be saved into a cookie. The user should then be forwarded to a third 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 that stores the input field data into hidden fields to be used in the interests.html page once the submit button is pressed.

· Create an interests.html page with a form that has the fields listed above. This interests.html page will read in the input from the query string data from the registration.html page and store them into hidden input fields.

· Write a script that runs in response to the submit event, from the interests.html page, that saves the input from both pages to a series of cookies to store each input, and opens a third 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.

cf_assessment_5_context.docx

CU_Horiz_RGB IT-FP3215 – Introduction to JavaScript

CU_Horiz_RGB

Assessment 5 Context

The Web was not originally designed to be able to store details about the user’s visit to a Web site. However, as the web became more prevalent, it became increasingly important to be able to store the user’s information, including preferences, passwords, and other data as a means to improve a site’s usability.

State Information

In order to understand this process, it is important to understand what state information is. Hypertext Transfer Protocol (HTTP) defines a set of rules that browsers and servers use to exchange information. The rules ensure that we properly process and display different types of information that is consider “state information.” HTTP was originally designed to not store any data about the user and to be purely stateless. This initially allowed the web to be quick to process, as there was no need to store and process any specific requirements from users. Although this traditional stateless design was efficient to load, it was also quite limiting, as the Web browser was forced to treat every visit to a particular Web page as an entirely new session.

Today, there are many different reasons for us to store and maintain the state information, such as customizing the individual Web pages based on specific user choices, storing information temporarily in a multipart form, or creating shopping carts that store items until the user checks out.

Appended Queries

One way to keep the user’s information is to append a query at the end of the URL. The query string is basically a set of name­value pairs that can contain multiple bits of information. We can use this query string to pass information from one page to the next. You may have noticed this if you submit a form that uses a “get” call. In JavaScript, if we wanted to use the information from the query string, we have to first parse the string and extract all of the string contents. Then we need to confirm the individual pieces of information into array elements using the split method based on the & character.

Hidden Fields

Now the next step that we want to do is save the state information from the data into a unique type of input element called the hidden form field. This is not displayed by the Web browser, but allows developers to hide information from the viewer. These hidden form fields store the temporary data that needs to be sent along with the rest of the form but that the user does not need to see. For each page of the forms, there has to be a hidden form field created using the same name/id that correspond with the input fields from the other pages. Using JavaScript, we will assign the value portion of each of the elements from the JavaScript array to the value of the hidden input field.

Query Strings

Assuming you have two pages or steps, when the user completes the first page and presses next, the field values are encoded into the query string. Then on the second page, the input fields are parsed and copied into the hidden fields on that second page. The user fills in the data on the second page and submits. Then all of the field values including the hidden ones are encoded in a query string and submitted to the server.

It is important to note that these query strings don not maintain the state information permanently; they are only available during the session of the Web page. If the Web page that reads the query string closes, the query string is then lost. To get around this, we tend to use cookies, which are small bits of information stored as text fields on a user’s computer or Web Storage that allows us to store more information than cookies allow. The use of Web Storage will be covered in a later course.

Every time a Web client makes a request to a Web server, the client also sends any saved cookies for the web page to the server. Then the server can use the cookies to customize the Web page as needed. Cookies can be temporary or persistent. Cookies are stored as plain text fields on the user’s computer. So, any user can view the contents of the cookies if they have access to the user’s computer. We should never store any secure information such as passwords or personal data in a cookie.

Cookies work in the same way as query strings; they are created based on name­value pairs. The way that cookies are used is a bit different than using JavaScript properties. In JavaScript, assigning a value to a property or variable replaces the value in the variable. With cookies, assigning a new value simply adds another entry to the list of cookies rather than replacing the existing value. For example, if we set the cookie as:

document.cookie = “username=capella1”;

document.cookie = “firstname=John”;

document.cookie = “lastname=Smith”;

This will create the property for the cookie as: username=capella1; firstname=John; lastname=Smith;

The next step would be to take the input fields from the user before the user submits the content of the form to create the cookies that contain the form field names and values. Using the browsers console, you can verify the cookie content by entering in document.cookie which should display the value of the cookie’s property in a single string.The next step would be to create a parseData() function so that it reads the stored cookies, which should be very similar to the query string parse but it should be split using the semi­colon and space instead of the & character. Using this, we can display the contents of the cookie onto the page.12cf_IT-FP3215.zipconfirm.htmlCapellaVolunteers.org

This events site is for IT-FP3215 tasks.

css/main.css

body { font: 15px arial, sans-serif; color: #808080; } input[type=text], select ,input[type=password],radio{ width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #800D1E; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #802F1E; } section { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } article { border-radius: 5px; background-color: #CCCCCC; padding: 20px; color: #222222; } ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li { float: left; } ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) { background-color: #111; } ul.topnav li a.active { background-color: #CCCCCC; color: #333 } ul.topnav li.right { float: right; } @media screen and (max-width: 600px) { ul.topnav li.right, ul.topnav li { float: none; } } .top { position: relative; background-color: #ffffff; height: 68px; padding-top: 20px; line-height: 50px; overflow: hidden; z-index: 2; } .logo { font-family: arial; text-decoration: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 37px; letter-spacing: 3px; color: #555555; display: block; position: absolute; top: 17px; } .logo .dotcom { color: #800D1E } .topnav { position: relative; z-index: 2; font-size: 17px; background-color: #5f5f5f; color: #f1f1f1; width: 100%; padding: 0; letter-spacing: 1px; } .top .logo { position: relative; top: 0; width: 100%; text-align: left; margin: auto } footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; }

gallery.html

CapellaVolunteers.org

 Add a description of the image here  Add a description of the image here  Add a description of the image here  Add a description of the image here This events site is for IT-FP3215 tasks.

images/banner1.jpg

images/banner2.jpg

images/banner3.jpg

images/event.jpg

images/firefighter.jpg

images/silhouette.jpg

images/Thumbs.db

images/work.jpg

index.html

CapellaVolunteers.org

Banner Images BannerBannerBanner This events site is for IT-FP3215 tasks.

interests.html

CapellaVolunteers.org

This events site is for IT-FP3215 tasks.

invitation.html

CapellaVolunteers.org

Recipient name: Organization name: Event Date: URL: Host name: Hello recipientName! You have been invited to volunteer for an event held by organizationName on eventDate. Please come to the following website: websiteURL to sign up as a volunteer. Thanks! hostName This events site is for IT-FP3215 tasks.

registration.html

CapellaVolunteers.org

Username: Password: Verify your Password: First Name: Last Name: Email: Phone Number Sign up for newsletter: Yes No This events site is for IT-FP3215 tasks.

Guidance – Assessment 5.docx

Collect and store form information in a cookie and display it on a Web page.

The assessments in this course build upon one another and must be completed in the order in which they are presented.

By successfully completing this assessment, you will demonstrate your proficiency in the following course competencies and assessment criteria:

· Competency 1: Manipulate web page elements using Document Object Model (DOM).

. Create an interest.html page with a form that has the specified fields.

· Competency 2: Create interactive webpage functionality using JavaScript.

. Integrate a script on the registration.html page that stores the input field data into hidden fields to be used in the interests.html page.

. Write a script that runs in response to the submit event that saves the input from both pages to a cookie and opens a third page called confirm.html that reads and displays information from all the fields.

· Competency 3: Write functional JavaScript code using current W3C and ECMA standards.

. Submit error-free validated code.

· Competency 4: Communicate effectively.

. Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code.

In this assessment, you will be extending the prior form to add in further interactivity by processing query strings, manipulating form data, and storing cookies. Cookies and sessions allow users to store persistent data to be able to use later on. In other instances, cookies and sessions can store user preferences, the user’s state on a Web page, or other key criteria that should be stored if the user closes out of the browser session.

Read more about processing query strings, manipulating form data, and storing cookies in the Assessment 5 Context document.

Terms to Know

The following terms are applicable to your work in this assessment. Information regarding each can be found at:

· w3schools.com. (n.d.). JavaScript and HTML DOM reference. Retrieved from https://www.w3schools.com/jsref/default.asp

. Hidden Fields.

. Query String.

. Cookie.

. Parse.

. Appended Queries.

. State Information.

. Array.

. Console.

As you prepare to complete this assessment, you may want to think about other related issues to deepen your understanding or broaden your viewpoint. You are encouraged to consider the questions below and discuss them with a fellow learner, a work associate, an interested friend, or a member of your professional community. Note that these questions are for your own development and exploration and do not need to be completed or submitted as part of your assessment.

· What situations are most appropriate for storing persistent data for sessions, local storage, or cookies?

· What are the benefits and limitations of sessions, local storage, and cookies?

Required Resources

The following resources are required to complete the assessment.

Capella Resources

· IT-FP3215.zip.

Query Strings and Storing Persistent Information Scoring Guide – A5.pdf

11/3/21, 9:25 AM Query Strings and Storing Persistent Information Scoring Guide

https://courserooma.capella.edu/bbcswebdav/institution/IT-FP/IT-FP3215/170700/Scoring_Guides/u05a1_scoring_guide.html 1/1

Query Strings and Storing Persistent Information Scoring Guide

CRITERIA NON-PERFORMANCE BASIC PROFICIENT DISTINGUISHED

Integrate a script on the registration.html page that stores the input field data into hidden fields to be used in the interests.html page.

Does not integrate a script on the registration.html page that stores the input field data into hidden fields to be used in the interests.html page.

Integrates a script on the registration.html page that fails to accurately store the input field data into hidden fields to be used in the interests.html page.

Integrates a script on the registration.html page that stores the input field data into hidden fields to be used in the interests.html page.

Integrates a script on the registration.html page that stores all input field data into hidden fields to be used in the interests.html page formatted according to best practices and industry standards.

Write a script that runs in response to the submit event that saves the input from both pages to a cookie and opens a third page called confirm.html that reads and displays information from all the fields.

Does not write a script that runs in response to the submit event.

Writes a script that does not run in response to the submit event, or does not save the input from both pages to a cookie or open a third page called confirm.html that reads and displays information from all the fields.

Writes a script that runs in response to the submit event that saves the input from both pages to a cookie and opens a third page called confirm.html that reads and displays information from all the fields.

Writes a script that runs in response to the submit event that saves the input from both pages to a cookie and opens a third page called confirm.html that reads and displays information from all the fields and performs error checking and validation on the input prior to the script being sent.

Create an interest.html page with a form that has the specified fields.

Does not create an interest.html page with a form.

Creates an interest.html page that does not have a form, or has a form that does not have the specified fields.

Creates an interest.html page with a form that has the specified fields.

Creates an interest.html page with a form that has the specified fields formatted according to best practices and industry standards.

Submit error-free validated code.

Does not submit validated code.

Submits validated code with some errors.

Submits error-free validated code.

Submits error-free validated code that’s formatted according to best practices and industry standards.

Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code.

Does not write developer comments.

Writes developer comments that are inaccurate or do little to describe the variables being declared and explain the functions and logical blocks of JavaScript code.

Writes developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code.

Writes developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code in a clear unambiguous manner that fully informs developers who may read them.

Assessment 4.docx

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 that has the following fields for allowing 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 [email protected] 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 than MyVar and myvar.

· Perform your form validation testing in pieces at a time 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 assessment 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 display appropriate error messages (if errors are made) 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 * 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 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.

cf_assessment_4_context.docx

CU_Horiz_RGB IT-FP3215 – Introduction to JavaScript

CU_Horiz_RGB

Assessment 4 Context

Any time that we need to gather information from our users on our sites, we generally do so through the use of forms. In the form that you created, you may notice that the user can add any information into any of the fields. This is not ideal, as it is good practice to clean the data prior to sending it to the server so that the data is accurate and in the correct format through the process of form validation. Even though we can and should validate the form on the server, it is generally more efficient for our users to do so in their browsers prior to sending it to the server.

Having required fields is generally the minimum that we want to handle validation. We want to ensure that the users are entering key criteria such as username, password, first name, last name, et cetera. Another option would be to verify that the user has entered data in a specific format, such as email using a [email protected] or a phone number using a (xxx) xxx­xxxx format. For input fields such as passwords, we may need to have them be a specific length at minimum.

The form elements that we use to gather data from a form include input, select, option, text area and button. There are specific properties on each of these form elements. The autofocus property as an example returns true if the HTML attribute is set. This indicates that the element should receive focus when the form is loaded. The placeholder attribute displays text to the user if the field has not been filled out yet and currently has no value.

There are specific events that are triggered based on these form elements as well. The blur event is triggered when the focus leaves an element (selected first and then clicked or tabbed to move to another element). The change event is also a commonly used one in which the focus leaves the element and the value of the current element has changed from what it was before the element was in focus. The focus event is one that is triggered when an element is selected.12cf_IT-FP3215.zipconfirm.htmlCapellaVolunteers.org

This events site is for IT-FP3215 tasks.

css/main.css

body { font: 15px arial, sans-serif; color: #808080; } input[type=text], select ,input[type=password],radio{ width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #800D1E; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #802F1E; } section { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } article { border-radius: 5px; background-color: #CCCCCC; padding: 20px; color: #222222; } ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li { float: left; } ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) { background-color: #111; } ul.topnav li a.active { background-color: #CCCCCC; color: #333 } ul.topnav li.right { float: right; } @media screen and (max-width: 600px) { ul.topnav li.right, ul.topnav li { float: none; } } .top { position: relative; background-color: #ffffff; height: 68px; padding-top: 20px; line-height: 50px; overflow: hidden; z-index: 2; } .logo { font-family: arial; text-decoration: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 37px; letter-spacing: 3px; color: #555555; display: block; position: absolute; top: 17px; } .logo .dotcom { color: #800D1E } .topnav { position: relative; z-index: 2; font-size: 17px; background-color: #5f5f5f; color: #f1f1f1; width: 100%; padding: 0; letter-spacing: 1px; } .top .logo { position: relative; top: 0; width: 100%; text-align: left; margin: auto } footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; }

gallery.html

CapellaVolunteers.org

 Add a description of the image here  Add a description of the image here  Add a description of the image here  Add a description of the image here This events site is for IT-FP3215 tasks.

images/banner1.jpg

images/banner2.jpg

images/banner3.jpg

images/event.jpg

images/firefighter.jpg

images/silhouette.jpg

images/Thumbs.db

images/work.jpg

index.html

CapellaVolunteers.org

Banner Images BannerBannerBanner This events site is for IT-FP3215 tasks.

interests.html

CapellaVolunteers.org

This events site is for IT-FP3215 tasks.

invitation.html

CapellaVolunteers.org

Recipient name: Organization name: Event Date: URL: Host name: Hello recipientName! You have been invited to volunteer for an event held by organizationName on eventDate. Please come to the following website: websiteURL to sign up as a volunteer. Thanks! hostName This events site is for IT-FP3215 tasks.

registration.html

CapellaVolunteers.org

Username: Password: Verify your Password: First Name: Last Name: Email: Phone Number Sign up for newsletter: Yes No This events site is for IT-FP3215 tasks.

Form Field Validation and Error Messages Scoring Guide – A4.pdf

11/3/21, 9:25 AM Form Field Validation and Error Messages Scoring Guide

https://courserooma.capella.edu/bbcswebdav/institution/IT-FP/IT-FP3215/170700/Scoring_Guides/u04a1_scoring_guide.html 1/1

Form Field Validation and Error Messages Scoring Guide

CRITERIA NON-PERFORMANCE BASIC PROFICIENT DISTINGUISHED

Write JavaScript that defaults the user’s cursor to the first erroneous input field.

Does not write JavaScript that defaults the user’s cursor.

Writes JavaScript that does not default the user’s cursor to the first erroneous input field.

Writes JavaScript that defaults the user’s cursor to the first erroneous input field.

Writes JavaScript that defaults the user’s cursor to the first erroneous input field while providing some additional formatting change to indicate to the user of the field being selected.

Create a submit button that executes a validation operation when submitted.

Does not create a submit button.

Creates a submit button that does not correctly execute a validation when submitted.

Creates a submit button that executes a validation when submitted.

Creates a submit button that executes a validation when submitted and runs error-free as the submit is overridden.

Write JavaScript that defines a field as required and generates an appropriate error message if the field has not been completed.

Does not write JavaScript that defines a field as required.

Writes JavaScript that does not define a field as required or that does not generate an appropriate error message if the field has not been completed.

Writes JavaScript that defines a field as required and generates an appropriate error message if the field has not been completed.

Writes JavaScript that defines a field as required and generates an appropriate error message if the field has not been completed using best practices in error reporting.

Write JavaScript that validates all input fields per specified formatting definitions.

Does not write JavaScript that validates input fields.

Writes JavaScript that does not validate input fields per specified formatting definitions.

Writes JavaScript that validates all input fields per specified formatting definitions.

Writes JavaScript that validates all input fields per specified formatting definitions with regular expressions in the most effective manner using coding best practices.

Write JavaScript that displays an appropriate error correction message in the event a form entry error has been made.

Does not write JavaScript that displays an appropriate error correction message.

Writes JavaScript that displays an error correction message that does not function as specified.

Writes JavaScript that displays an appropriate error correction message in the event a form entry error has been made.

Writes JavaScript that displays an appropriate error correction message in the event a form entry error which includes all of the relevant error messages at once in an easy to read manner.

Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code.

Does not write developer comments.

Writes developer comments that are inaccurate or do little to describe the variables being declared and explain the functions and logical blocks of JavaScript code.

Writes developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code

Writes developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code in a clear unambiguous manner that fully informs developers who may read them.

Guidance – Assessment 4.docx

Write JavaScript to validate form fields.

The assessments in this course build upon one another and must be completed in the order in which they are presented.

By successfully completing this assessment, you will demonstrate your proficiency in the following course competencies and assessment criteria:

· Competency 1: Manipulate web page elements using Document Object Model (DOM).

. Write a JavaScript that defaults the user’s cursor to the first erroneous input field.

. Create a submit button that executes a validation when submitted.

· Competency 2: Create interactive webpage functionality using JavaScript.

. Write JavaScript that defines a field as required and generates an appropriate error message if the field has not been completed.

· Competency 3: Write functional JavaScript code using current W3C and ECMA standards.

. Write JavaScript that validates all input fields per specified formatting definitions.

. Write JavaScript that displays an appropriate error correction message in the event a form entry error has been made.

· Competency 4: Communicate effectively.

. Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code.

In this assessment, you will be working on client-side form validation. This is an important set of steps, as validation needs to be completed prior to form data being sent to the server. Although there are JavaScript libraries to perform the form validation for you, understanding the details of validation will help you understand how to check if input fields are empty, how to validate the type of input, as well as ensure the format and constraints of the input fields are also validated. Having bad data being processed can be quite problematic, so going through the validation process will help ensure that the data being passed in will be valid.

Read more about form validation in the Assessment 4 Context document.

Terms to Know

The following terms are applicable to your work in this assessment. Information regarding each can be found at:

· w3schools.com. (n.d.). JavaScript and HTML DOM reference. Retrieved from https://www.w3schools.com/jsref/default.asp

. Form Elements.

. Input.

. Select.

. Option.

. Textarea.

. Button.

As you prepare to complete this assessment, you may want to think about other related issues to deepen your understanding or broaden your viewpoint. You are encouraged to consider the questions below and discuss them with a fellow learner, a work associate, an interested friend, or a member of your professional community. Note that these questions are for your own development and exploration and do not need to be completed or submitted as part of your assessment.

· What would be the purpose of using client-side validation in comparison to server-side validation?

· What types of validation can we perform on input fields?

· How are regular expressions used to validate the format of data?

Required Resources

The following resources are required to complete the assessment.

Capella Resources

· IT-FP3215.zip.

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:

o Your entire Web site (including the updated “invitation.html” file).

o 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.

Using Variables in a Form 1

Using Variables in a Form

Elizabeth Saylor

IT3215 Introduction to JavaScript

Unit 1 Assignment 1

Capella University

April, 2020

This study source was downloaded by 100000830321368 from CourseHero.com on 11-05-2021 18:32:06 GMT -05:00

https://www.coursehero.com/file/60391540/IT3215Unit1Assign1Saylordocx/

Th is

stu dy

re so

ur ce

w as

sh ar

ed v

ia C

ou rs

eH er

o. co

mhttps://www.coursehero.com/file/60391540/IT3215Unit1Assign1Saylordocx/

Using Variables in a Form 2

Attached is my weblink utilizing Freehosting.com and 000webhost.com.

Website link: https://saylorit3215u1a1.000webhostapp.com/invitation.html

To make my file work properly, I utilized Brackets. I added within the invitation.js file the following code (shown in the screenshots below):

 declaring the value for the hostNameInput  setting the variable to the input field’s id  the HTML code in the span id.

I did not see any errors when I saved the file and when I ran the live test.

This study source was downloaded by 100000830321368 from CourseHero.com on 11-05-2021 18:32:06 GMT -05:00

https://www.coursehero.com/file/60391540/IT3215Unit1Assign1Saylordocx/

Th is

stu dy

re so

ur ce

w as

sh ar

ed v

ia C

ou rs

eH er

o. co

mhttps://www.coursehero.com/file/60391540/IT3215Unit1Assign1Saylordocx/

Using Variables in a Form 3

I have opened the page in Chrome and typed the data into the fields before hitting Submit.

I have selected Submit and can view the data in Chrome.

This study source was downloaded by 100000830321368 from CourseHero.com on 11-05-2021 18:32:06 GMT -05:00

https://www.coursehero.com/file/60391540/IT3215Unit1Assign1Saylordocx/

Th is

stu dy

re so

ur ce

w as

sh ar

ed v

ia C

ou rs

eH er

o. co

mhttps://www.coursehero.com/file/60391540/IT3215Unit1Assign1Saylordocx/

Using Variables in a Form 4

I have opened the file in Explorer and typed in the data before hitting Submit.

I then selected submit to view the data in Explorer.

SUCCESS!!

This study source was downloaded by 100000830321368 from CourseHero.com on 11-05-2021 18:32:06 GMT -05:00

https://www.coursehero.com/file/60391540/IT3215Unit1Assign1Saylordocx/

Th is

stu dy

re so

ur ce

w as

sh ar

ed v

ia C

ou rs

eH er

o. co

m

Powered by TCPDF (www.tcpdf.org)https://www.coursehero.com/file/60391540/IT3215Unit1Assign1Saylordocx/http://www.tcpdf.org

Order your essay today and save 10% with the discount code ESSAYHELP