IT3215 | Programming Methods in Computer Science - Capella university

IT3215 Introduction to JavaScript 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. 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 Unitly assignment. You are encouraged to post and respond early in theUnit 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 Unit's assignment. How did you try to address it or solve it? IT3215 Introduction to JavaScript 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. 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 Unitly assignment. You are encouraged to post and respond early in the Unit 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 Unit. How did you try to address it or solve it? IT3215 Introduction to JavaScript Unit 3 Discussion DQ 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. 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 Unitly assignment. You are encouraged to post and respond early in the Unit 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 Unit's assignment. How did you try to address it or solve it? IT3215 Introduction to JavaScript 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? 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 Unitly assignment. You are encouraged to post and respond early in the Unit 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 Unit's assignment. How did you try to address it or solve it? IT3215 Introduction to JavaScript 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. 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 Unitly assignment. You are encouraged to post and respond early in the Unit 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 Unit's assignment. How did you try to address it or solve it? IT3215 Introduction to JavaScript Unit 1 Assignment 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: varmyRecipientName;

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. Example assignments: You may use the assignment examples, linked in the Resources, to give you an idea of what a Proficient or higher rating on the scoring guide would look like.

Submission Requirements

Upload 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. IT3215 Introduction to JavaScript Unit 2 Assignment 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: