Course Information for 2020 - 2021

COURSE NUMBER: CP1211

COURSE TITLE: JavaScript

COURSE DESCRIPTION:

JavaScript is among the most powerful and flexible programming languages available and one of
the most popular languages used in web development. This course will introduce students to the
programming fundamentals of the JavaScript language, where students will learn basic
programming constructs to add various functionality to webpages. Topics will include an
introduction to HTML and CSS, JavaScript programming structures, the manipulation of the
Document Object Model (DOM), and the use of AJAX and JSON to perform data transfers
between the client and server.

PREREQUISITES: None

CO-REQUISITES: None

CREDIT VALUE: Four (4)

COURSE HOURS PER WEEK: Three (3)

LAB HOURS PER WEEK: Two (2)

SUGGESTED TEXT:

Delameter, M and Ruvalcaba, Z. (2020). Murach's Javascript and JQuery (4th ed.). Murach
Publishing Fresno, CA. Print ISBN 9781943872626, E-Text ISBN:9781943872633

LEARNING RESOURCES:

JavaScript Tutorial http://www.w3schools.com/js/

Ajax Tutorial http://www.w3schools.com/ajax/default.asp
JSON Tutorial http://www.w3schools.com/json/default.asp
Quick Links for JavaScript Developers http://www.tutorialspoint.com/javascript/
AJAX Tutorial http://www.tutorialspoint.com/ajax/
JSON Tutorial http://www.tutorialspoint.com/json/

Note: All website links were active at time of course creation and may change

MAJOR TOPICS:

1.0 HTML5 & CSS3

© College of the North Atlantic CP1211 Page 1 of 4

2.0 Introduction to JavaScript
3.0 Fundamental Programming Structures
4.0 Event Processing
5.0 Manipulating the Document Object Model (DOM)
6.0 AJAX, JSON and HTML5 APIs

LEARNING OBJECTIVES:

1.0 HTML5 & CSS3

1.1 Create a Web Site with HTML5

1.1.1 Insert an element attribute
1.1.2 Add comments to a web document
1.1.3 Define the structure of the body of a page using the article, aside, footer,
header, nav and section elements
1.1.4 Add content to a page using the grouping elements of address, blockquote,
div, h1 to h6, hgroup, p, and pre
1.1.5 Apply an external style sheet to a page
1.1.6 Mark page content using the text-level elements of a, abbr, b, cite, code,
del, dfn, em, i, ins, kbd, mark, q, sample, small, span, strong, sub, sup,
time and var
1.1.7 Mark line breaks using br and horizontal line using hr
1.1.8 Insert an inline image into a web page
1.1.9 Display special characters and symbols
1.1.10 Create and format different types of lists such as ol, li, ul, dt, dd, dl

1.2 Web Forms

1.2.1 Describe how web forms interact with a server-based program
1.2.2 Create web forms that contain input elements such as Checkbox, File,
Hidden, Image, Password, Radio, Text, Email, Tel, Url, Number, Range,
Date
1.2.3 Set the action and method attributes of a form
1.2.4 Add form labels and link them to control elements
1.2.5 Organize fields using field sets and legends
1.2.6 Create buttons to submit or reset a form or calculate
1.2.7 Validate form element data using HTML5 data validation

1.3 CSS3 – Cascading Style Sheets

1.3.1 Discuss the style hierarchy and rules that browsers use to apply styles
1.3.2 Discuss the similarities among inline styles, embedded style sheets and
external style sheets
1.3.3 Use selectors to identify elements in the document hierarchy
1.3.4 Discuss css styles, attribute & selectors
1.3.5 Discuss the layout tools available in CSS
1.3.6 Use CSS styles to format the elements of a web form

© College of the North Atlantic CP1211 Page 2 of 4

2.0 Introduction to JavaScript

2.1 State the purpose of the Progressive Enhancement (PE) model of front-end
development
2.2 State the purpose of the structure, presentation and behavior layers of the PE
model and
2.3 Discuss the tool(s) used to implement each of the layers
2.4 Describe the process that a browser uses to load a web page that includes
JavaScript

3.0 Fundamental Programming Structures

3.1 Design, implement, test and debug JavaScript code that uses identifiers, objects,
methods and properties to solve specified problem(s)
3.2 Design, implement, test and debug JavaScript code that uses primitive data types,
numeric variables and expressions, String and Boolean variables, the parseInt and
parseFloat methods and any of the previous tools to solve specified problem(s)
3.3 Design, implement, test and debug JavaScript code that uses conditional
expression, if and switch statements, while, do-while, for loops and any of the
previous tools to solve specified problems
3.4 Design, implement, test and debug JavaScript code that uses Window, Document,
Textbox, Number, Date, String and any of the previous tools or objects to solve
specified problems
3.5 Design, implement, test and debug JavaScript code that uses anonymous and/or
named functions and any of the previous tools to solve specified problems
3.6 Design, implement, test and debug JavaScript code that uses and manipulates
arrays and any of the previous tools to solve specified problems
3.7 Design, implement, test and debug JavaScript code that can be used to validate
and process form data
3.8 Design, implement, test and debug JavaScript code that uses cookies to store data
between page processing events and to send data to and from the server

4.0 Event Processing

4.1 Design, implement, test and debug JavaScript code that uses event handlers, event
listeners to interact with the page’s users
4.2 Design, implement, test and debug JavaScript code to process mouse, keyboard,
touch and orientation events to improve the user’s experience interacting with the
page

5.0 Manipulating the Document Object Model (DOM)

5.1 Design, implement, test and debug JavaScript code that uses the DOM to
manipulate the element nodes, text nodes and attribute nodes in the page model to
meet interface specifications

© College of the North Atlantic CP1211 Page 3 of 4

 5.2 Design, implement, test and debug JavaScript code that traverses the DOM tree
and that can be used to add and remove nodes to/from a document

6.0 AJAX, JSON and HTML5 APIs

6.1 Design, implement, test and debug JavaScript programs that create and
manipulate JSON objects and arrays to store information and to update user
interface elements
6.2 Design, implement, test and debug JavaScript programs that use the
XMLHttpRequest object or the Fetch API to create and send data requests to a
server and to process the server’s response
6.3 Design, implement, test and debug JavaScript programs that use callback
functions to process the server’s response to an XMLHttpRequest or Fetch
request
6.4 Design, implement, test and debug JavaScript programs that use JSON and the
XMLHttpRequest object or the Fetch API to send data requests to a server and
process the server’s response
6.5 Design, implement, test and debug JavaScript programs that use the localStorage
and sessionStorage techniques to save session information
6.6 Design, implement, test and debug JavaScript programs that use the Geolocation
feature of HTML5 to give the exact location of a client
6.7 Design, implement, test and debug JavaScript programs that use the History API
to manipulate the browser’s address bar and history contents
6.8 Design, implement, test and debug JavaScript programs that use web workers to
improve the performance of data transfers between the page and the server

EVALUATION:

Assignments 10%
Test(s) 30%
Project 20%
Final Examination 40%

DATE DEVELOPED: November 2019 DATE REVIEWED:

REVISION NUMBER: DATE REVISED:

Effective PeopleSoft Date: March 2020

Note to instructor: Check PIRS to ensure this outline is the most current version.

© College of the North Atlantic CP1211 Page 4 of 4