Introduction to Internet Programming

Preamble

Description

This course serves as an introduction to programming models used to generate and support Web-based applications. The course covers markup, presentation, and front-end interactivity concerns through an in-depth examination of current client-side scripting techniques. Other topics include the document-object model (dom), event-driven programming, form validation, debugging, and asynchronous web processing.

Learning Outcomes

Upon successful completion of this course, students will understand...

Textbook

Eloquent JavaScript: A Modern Introduction to Programming

Software Requirements

Browsers

Download all the browsers available at Browse Happy. Some students might also want Chrome Canary, Safari Technology Preview, Firefox Developer Edition, and Firefox Nightly. I use Firefox, Brave, and Chrome in class.

GitHub

All in-class examples, assignments, and help will be done via GitHub.

Text Editor

The code you write will require a text editor. Although there are many on the market, Atom (open source) and Sublime Text (nagware) are the primary editors supported in class, with some light support for vs Code.

Schedule

Important Notes

The University treats absences related to covid-19 as excused absences. Consequently, you’ll need to get notes from someone in class, as mentioned in the section of this syllabus marked Advice on Succeeding in Class. There will not be a streaming video option for anyone missing class.

Important Dates

No class (spring recess): Monday, 14 March, and Wednesday, 16 March.

Last class: Monday, 2 May 2022.

Note: Time permitting, I will make every attempt to cover the topics listed below in order. However, depending on the cadence of the class, some topics may be overlooked.

Week Topics Homework
One Thorough syllabus breakdown
  • Carefully re-read the syllabus
  • If you don’t already have a GitHub account, open one
Two
  • Intro to the Atom text editor
  • What’s Git?
  • What’s GitHub?
  • What’s the difference between Git and GitHub?
  • What’s a repo(sitory)?
  • Git committing
  • Git branching
  • Git pushing
  • Git pulling
  • The differences between Git via your ui and your GitHub gui
  • Intro to the GitHub Desktop ui
  • Clone the in-class examples repo for the semester
Three
  • Git cloning
  • Git forking
  • html intro
  • Block-level elements
  • Inline-level elements
  • The outlining algorithm
Review code and in-class notes
Four
  • css intro
  • Working with Google Fonts
  • Fonts (sizing and leading)
  • The css box model
  • css layout and positioning
Review code and in-class notes
Five
  • More on css layout and positioning
  • Working with color in css
  • Intro to JavaScript
  • Intro to the concepts of task runners
Review code and in-class notes
Six
  • Intro to Gulp, the JavaScript-based, stream-driven task runner
  • Piping, in Gulp and in Bash
  • Task breakdowns
Clone and study this Gulp tutorial
Seven
  • Gulp src()
  • Gulp dest()
  • Gulp parallel()
  • Gulp series()
  • Gulp watch()
  • Gulp pipe()
Clone and study this Gulp template for html, css, Sass, and JavaScript
Eight
  • Working with json
  • Working with production and development tracks in task runners
  • Elaborate on the BrowserSync Gulp module
Study the Gulp repos
Nine Spring recess
Ten
  • Preparing your JavaScript environment
  • JavaScript values, types, and operators
  • JavaScript program structures
  • JavaScript functions
  • Clone and study this JavaScript tutorial on the various introductions to JavaScript in ES6
  • Read 1: Values, Types, and Operators
  • Read 2: Program Structure
  • Read 3: Functions
Eleven
  • Objects and Arrays
  • Working with event listeners
  • More on functions
  • Read 4: Data Structures: Object and Arrays
  • Read 5: Higher-order Functions
  • Read 6: The Secret Life of Objects
Twelve
  • Debugging and catching errors
  • Working with regular expressions
  • Read 8: Bugs and Errors
  • Read 9: Regular Expressions
  • Read 10: Modules
Thirteen
  • Asynchronous programming
  • Promises
  • Maps
  • Read 11: Asynchronous Programming
  • Read 13: JavaScript and the Browser
  • Read 14: The Document Object Model
  • Read 15: Handling Events
Fourteen Final project Q&A Work on final project
Fifteen Open labs and Q&A Work on final project
Sixteen
  • Open lab
  • Evaluations
Happy break!

Class Policies

Advice on Succeeding in Class

Read over the following to understand procedures for maximizing your chance of succeeding in class.

Assignments

There are three homework-type assignments and one final project. (See the Grading Standards section to learn what percentage of your final grade each is worth.)

  1. Assignment 1
  2. Assignment 2
  3. Assignment 3
  4. Final Project

Grading

Grading Formula

Your grade for this course will be computed using the following formula:

  1. Assignments (45%)
    • Assignment 1 — 15%
    • Assignment 2 — 15%
    • Assignment 3 — 15%
  2. Final project (45%)
  3. Attendance and participation (10%)
    • Three unexcused absences alters the grading formula. First, the attendance and participation component of your grade increases to 40% from 10%. The 30% difference is taken from the assignments, each of which becomes worth 5%. Thus, all assignments are worth 15%, the final project remains at 45%, and attendance is worth 40%. Finally, the attendance portion of the grade becomes a 0, meaning that the highest grade you may achieve is 60 if you miss three classes without excuse and get perfect scores on all assignments and the final project.

To calculate your final grade, convert to decimal the percentages above and the grades you’ve earned. For example, if you got an 80 on the first assignment, a 93 on the second assignment, a 60 on the third assignment, a 100 on your final project, and 100 for attendance, then you’d use the following formula:

(.80 × .15) + (.93 × .15) + (.60 × .15) + (1 × .45) + (1 × .10) = 89%

I do not give grades — students earn them. The grade you earn is based strictly on the outlined formula clearly listed in this section.

This grading formula is unbending and will be adhered to strictly.

Important Note

Please do not try to negotiate a grade with me. By asking me to treat you favorably, you’re requesting that I put you above your classmates. Manage your time well; I do not accept late work.

Academic Honesty

Cheating of any kind will not be tolerated in this course; make certain all the work you submit is your own. Refresh your understanding of the college’s policy on academic honesty.

Students with Disabilities

Read about how The University of Hartford supports students with disabilities: https://www.hartford.edu/academics/academic-support/accessibility-services/default.aspx

Contact

Nowadays, I only use email for emergency situations, such as a pet emergencies, personal tragedies, etc. For matters related to our course, you’re advised to see me before or after class, during my office hours, or by appointment. My contact info is listed in the Preamble.

Office Hours

If neither of the aforementioned times agrees with your schedule, we can make alternate arrangements to meet.