CS2513: Client-Side Programming
CSP01: Chapter 1- Introduction to JavaScript
Objective:
Create and style a web page.
Create a list and style it as a horizontal navigation bar.
Use good programming practices for web pages, style sheets, and external JavaScript files.
Include meaningful documentation within web page files.
Validate code.
Points
Full Credit: 40 Points
Late/Resubmit Credit: 36 Points
Situation
Assignments will consist of two parts: Hands-on Projects and an ongoing individual case project.
The Hands On Projects will from the end of each chapter. Although it is recommended that students complete all of the projects only a limited number will be submitted for grading.
In addition, students will create a comprehensive web site that will be enhanced and modified throughout the class. Please take this very seriously not only for the purposes of this assignment/class but also for possible inclusion in your web work portfolio. This week the emphasis will be on creation of the site including styles. navigation, and documentation. All pages must be adequately documented and validate. Be sure to read and adhere to the Class Coding Standards.
Specifications
Hands-on Projects
Required Projects
Hands-on Project 1-4 (p. 69)
Hands-on Project 1-5 (p. 71)
Need a Visual Reference?
The following are videos are of all of the Hands-on projects for this chapter, not just the ones required for this assignment. If you see something that is contradictory to our class assignments, please ask. Do not assume that since it is on the video that it is 100% correct. The Hands-On projects must validate for HTML5 and CSS3.
The following explains the process which will be used throughout the course. These instructions will not be repeated on each assignment page. In the future, refer back to this page as needed. The data files which accompany the text will be required for these assignments. They can be downloaded from http://academic.cengage.com/resource_uploads/downloads/1305078446_432240.zip Within the downloaded files there will be a folder for each project.
Hands-on projects sample folder
Rename that folder to a meaningful name that is unique to you. Making the name unique will prevent others from "borrowing" your code (AKA Plagiarizing). Only you and I will know the unique name. Do not share it with others. Keep it meaningful so that your files will remain appropriately organized. In the example HandsOnProject 1-4 was renamed to YMe_1_4 and HandsOnProject 1-5 was renamed to YMe_1_5 .Be sure to include a numbering system so the assignments can be easily identified. In this example 1_4 references the hands-on example from chapter 1. Keep in mind that spaces may NOT be included in file or folder names on the server. Renamed hands-on project folder
As you complete these exercises, the meta tags and comments which are normally included will not be required for these assignments. Of course feel free to add documentation that will will help you. In the comments section of the code, add your name and the date completed. If the assignment included the JavaScript inside of the HTML file it is not required that it be placed in a .js file. (This applies to the Hand On exercises only.) The intent is to provide a relatively quick exposure to the concepts within the chapter.
Adding author and date to comments
After the assignments have bee competed
upload the entire folder/s (in this example YMe_1_4 and YMe_1_5, each student would have unique folder names) to your account on the Apollo1 server.
view the web pages on the server. The URLs will be similar to the following with user##### and YourUniqueFolderName_1_4 being replaced with your information.
http://apollo1.occc.edu/user######/YourUniqueFolderName_1_4 http://apollo1.occc.edu/user######/YourUniqueFolderName_1_5
validate the HTML and CSS
submit the URLs in Moodle for grading
Note: all URLs for this assignment will be uploaded in the same submission area in Moodle.
Create a folder named JSChapter01 which will contain this week's work. Note: Each week, you will make a copy of the folder, rename it, update it with that week's enhancements, and then upload the new assignments. In this way you will always have a copy of the previous week's work...just in case you have a "learning experience"
Using HTML5, create the home for your semester project - index.htm/l.
In the <header> area add a title and a logo or image.
In the <nav> area create a horizontal navigation bar using lists and CSS.
There are to be 12 items in the navigation.
The first is to be Home.
The other will be placeholders for future assignments. So for now, the text will be CSP02-CSP12.
In the <main> area add information related to the content of this course. There is to be a minimum of at least one paragraph (four paragraphs total) to describe each of the following: JavaScript, DOM, AJAX, and jQuery. Each paragraph must have a minimum of three sentences. When finished there will be four paragraphs and a total of twelve sentences.
Keep in mind that information found on the Internet is copyrighted and may not be copy/pasted. if you need help with grammar, OCCC's Communication Lab can provide assistance. http://www.occc.edu/comlab/services.html
OCCC disclaimer - Disclaimer: Oklahoma City
Community College does not necessarily endorse the content or the respective
links of this web page.
The design and color scheme will be individualized for each student. However, this most basic design will provide some point of reference. Student sites will be enhanced with content, color, images, and styles.
Web pages must validate for HTML5 and CSS3 must validate. If errors are generated the entire assignment will not be graded.
Hands On Projects
Pages must validate for CSS3 and HTML5
Comments in the HTML code must be updated to include the student name and date
Additional comments, meta tags, and documentation are not required.
Students are not required to move in-line JavaScript code to a separate .js file in the Hands-on Projects.
Personal Website
All pages in the site must contain the same header, footer, and navigation.
All pages in the site must be formatted with CSS so they are consistent with other pages in the site and professional in appearance.
All formatting must be done using an external style sheet.
The function/s are to be located in a .js file which is linked to the web page. No in-line JavaScript is allowed.
Required and appropriate documentation and comments must be included for all HTML, CSS, and JS files
Tables may NOT be used unless otherwise stated.
Meta tags, date last modified, and OCCC disclaimer, as described in Class Programming Standards must be included.
The navigation bar for all pages in the site must be updated to include working links for all of the pages that have been created thus far.
Assignment Submission
Upload all three folders (two [2] for the hands-on projects and one [1] for JSChapter##) to your apollo1 account.
Note: ## is to be replaced by the two digit chapter number - Example: 01, 02, 11, 12.
View the web pages in Chrome, Firefox and, if possible, Safari and Internet Explorer
Re-validate (HTML5 and CSS3) and double check to make sure all items are visible from all computers. (Reminder: When grading, the Validation tool in Chrome and/or FireFox's Web Developer Tool Bar is used. All pages MUST validate using this method.
Submit the URLs for all three items in the LMS.
Submission links must open web page in a new window (not inside of the LMS) and display the page.
Assignments not meeting the previous requirements (opening in a new window and HTML5/CSS3 Validation) cannot be graded.
If it is still within the late/resubmit period, the assignments can be resubmitted (10% penalty). If it is after the final deadline, the work can no longer be submitted which could result in a zero for the assignment.
