|
|
|
Description Syllabus Policies Quizzes/Homework Grading
1/8/2020 - Quiz 3 moved to Tuesday of W5.
1/29/2020 Quiz 4 moved to Thursday of W8
This syllabus was updated on 12/2/19. Additional revisions will follow, as the course content from W7 onwards will be modified to stay current with recent web technologies.
As stated in my general course policies, attendance is mandatory for all lectures and labs. Email me when you foresee yourself to be absent. If you miss a lab, you will receive a 0 grade for that assignment. Be sure to read the entire document for all relevant policies that apply to this course.
Lectures are on Tuesdays, Wednesdays, and Thursdays in L304 from 10:00 to 10:50am
Labs for section 011 are on Wednesdays in L304 from 11:00am to 12:50pm
Labs
for section 012 are on Thursdays in L304 from 11:00am to 12:50pm
This course is an introduction to the development, using various technologies, of Web sites of varying complexity and functionality from simple Web pages and forms to dynamic data-driven Web sites capable of secure transactions. Topics covered include HTTP, HTML, CSS, Bootstrap, JavaScript, AJAX, jQuery, web services, Node.js, web frameworks/React, MongoDB, and Geolocation.
CS-2852, CS-2911
There is no single textbook that can adequately cover the broad span of all the technologies that you must ultimately master in order to become proficient at web application development.
Much is available online, so we'll be making use of online resources to provide supplemental coverage of additional topics, such as Bootstrap and React.
There are many different technologies that can be used for server-side development; many continue to evolve and displace others, the dominant approach changes every few years. In this course, you'll be introduced to Node.js (based on Javascript, which is already the dominant language for client-side development).
You'll need both Chrome and Firefox in this course.
Here are a number of useful links to some of the programs and utilities that we'll be using in this course:
| Web development tools: | Utilities: | References: |
|
|
|
| Week | Day | Topic | Reading | Lab |
|
1 |
L1 |
Course Introduction Sample code: HTML documents |
HTML Reference example code used in lectures: Demo.html |
Install/update the latest versions of Google
Chrome and
Firefox Install JetBrains Webstorm Lab 1: Static web page authoring using HTML and CSS Content (html file) demo due by end of W1 lab (10% of lab grade).
Complete submission due in Blackboard by end of W2 lab. |
| L2 |
Introductory HTML, continued HTML elements: headers, metadata, block elements vs. inline elements, list elements, table elements, <div> and <span> elements, attributes Sample code: HTML with CSS |
CSS Reference |
||
| L3 | HTML and CSS, continued |
|
||
|
2 |
L1 |
Intro to client-side scripting:
Javascript Basic language elements
Crockford:
The World's Most Misunderstood Programming Language |
online:
new
(2019) JavaScript features |
Demo during W3 lab. Submission due in Blackboard by end of W3 Lab. Practice1.pdf (to prep for Quiz 1) |
| L2 |
JavaScript, continued: Classes, Functions |
online:
JavaScript Guide: Chapter5: Functions, 10:Indexed Collections, 11: Keyed Collections,
|
||
| L3 |
JavaScript, continued Quiz 1: HTML and CSS |
online:
JavaScript Guide: Chapter 12: Working with Objects, 13: Details of the Object Model |
||
| 3 | L1 |
JavaScript, the BOM, the DOM and Sample code: DOMDemo.html |
online:
DOM Reference: HTML Document, HTML Element through HTML Attributes online:Additional reference: Mozilla's DOM Reference |
Lab 3: DOM Scripting and Event Handling Demo during W4 lab. Submission zipfile due by end of W4 lab
|
| L2 |
JavaScript: Handling DOM events Sample code: EventDemo.html |
online:HTML Reference HTML Input Types
online:DOM Reference: |
||
| L3 |
Javascript
Event handling, continued Sample code: BootstrapDemo.html
Quiz 2: JavaScript fundamentals |
online: Bootstrap Reference and tutorials |
||
| 4 | L1 |
Sample code: jqDemo.html |
online: jQuery Basics online: jQuery Reference |
Lab 4: jQuery
and Bootstrap (Updated 1/6/20) Demo during W5 lab. Submission zipfile due by end of W5 lab Apply JSHint settings: Webstorm Configuration
|
| L2 |
jQuery, continued HTML5: Drawing using the Canvas |
Sample code: CanvasDemo.html |
||
| L3 |
Layout and positioning with CSS Sample code: Layouts.html |
online:
CSS Reference: CSS Positioning online: Mozilla Layout Reference |
||
| 5 | L1 |
Update 1/8/20 Quiz 3: Dynamic HTML with JavaScript Introduction to Ajax with jQuery Sample code: AjaxDemo.html |
example json data online: jQuery Ajax documentation |
Update 1/14/20
Lab 5: Using Web Services:
Bus Tracker Get your MapQuest Key here. Get your MCTS key here. Key demos due by end of W5 lab. Submission zipfile due by end of W7 lab
|
| L2 |
JSON: Javascript Object Notation |
|
||
| L3 | Ajax, continued |
Midterm Exam Review Review Course Outcomes through week 5 |
||
| 6 | L1 |
Introduction to NodeJS: Server-side
Javascript |
Online tutorial |
Midterm Exam (during lab) |
| L2 |
NPM - Node Package Manager Writing a web server with NodeJS (the hard way) Web Services Directory: |
SimpleServer.js (the hard way) Homework: modify doAjaxRequest per comments |
||
| L3 | NodeJS web server, continued | |||
| 7 | L1 |
NodeJS and Express |
ExpressServer.js |
Lab 6: Server-side JavaScript: NodeJS BusTracker Server Submission zipfile due by end of W8 lab 10pts: Install NodeJS before start of lab and demo it running the sample NodeDemo.js or SimpleServer.js during lab |
| L2 |
NodeJS/Express web service |
|||
| L3 |
NodeJS/Express web service, continued Midterm makeup |
|||
| 8 | L1 |
Introduction to MongoDB |
mongoDemo.js |
Lab 7: Mongo Speeding Bus Viewer Submission zipfile due by end of W9 lab
Install
MongoDB before start
of lab by following steps 1-4 on slide 6 of "Introduction to MongoDB"
powerpoint slides. |
| L2 |
Mongo and NodeJS |
|
||
| L3 |
Javascript Promises https://promisesaplus.com/#terminology Quiz 4: Ajax, and JSON; JSON object representation |
PromiseDemo.js mongoDemoWithPromises.js mongoPhoneServer.js |
||
| 9 | L1 |
Intro to React |
MapDemo.js reactDemo.html jQueryApproach.js |
Lab 8: React-based Bus Tracker Follow Steps 1-4 in the lab instructions and demonstrate by end of Thursday lecture (10 pts of lab grade) Submission zipfile due by end of W10 lab |
| L2 |
React, continued |
reactApproach.js jsxApproach.js |
||
| L3 |
React, continued Quiz 5: NodeJS and Express |
reactPhone.html jsxPhoneController.js jsxPhoneTable.js |
||
| 10 | L1 |
Lab 8 continued/finish All labs due no later than 5pm Friday. No submissions accepted after then. |
||
| L2 |
Geolocation, continued HTML5: Audio/Video, if time permits
|
|||
| L3 |
Quiz 6: React |
|||
| 11 | Final Exam Wednesday, Feb 26, 2020 11:00am - 1:00pm L304 |
|||
Quizzes will be given as indicated in the above schedule.
No make-up quizzes will be given. No quizzes will be dropped.
The following course policies apply to this course.
Note that this algorithm indicates how a grade will be determined for students who have successfully demonstrated mastery of the course objectives. An acceptable level of success in meeting all course objectives is a prerequisite for a passing grade in the course.
| Labs | 25% |
| Quizzes | 30% |
| Midterm | 20% |
| Final | 25% |
