CS 105L: Introduction to Computer Programming using JavaScript
Fall 2017

Department of Computer Science
University of New Mexico

Joel Castellanos
Department of Computer Science

Course Description
CS-105L, Introduction to Computer Programming, is a gentle and fun introduction. Students will use a simple Integrated Development Environment to author small programs in a high level language that do interesting things.

Pre-Requisites: None.
Co-Requisites: None.

This semester, we will be programming in JavaScript to make small, but fun programs that run in Web Browsers. In addition toprogramming, the course also covers some of the great ideas in computer science such as modeling, visualization, emergence, search engine page ranking systems, and complex adaptive systems. Throughout the course, students will author many short programs that preform two-dimensional graphics, animations, customized image manipulations and some simple games.

CS-105 is designed as a first course in computer programming for:
  1. Pre-CS majors who do not have previous programming experience and are not yet ready for the fast pace and rigor of CS-152 (Computer Programming Fundamentals).
  2. Students without programming experience who want to learn the basics of programing, an introduction to the JavaScript, HTML 5, and CSS to gain practical skills in Web design, how to create customized multi-media effects and other tasks.

Syllabus & Lab Schedule:

CS-105 Syllabus for Fall 2017

CS-105 Schedule of lab, office hours and tutor times and e-mails.

Web Resources:
w3 w3schools.com: HTML 5 Tutorial
w3 w3schools.com: JavaScript Tutorial
w3 w3schools.com: CSS Tutorial
p5 p5 (Processing Libraries) Reference and API documentation

Chrome Google Chrome Browser In this class, we will be writing JavaScript and HTML5 programs. Different browsers support slightly different features of JavaScript and HTML5. Also different browsers format sliders, tables and other widgets differently. Your work will be graded using the Google Chrome browser. Therefore, if your program does not run correctly in Chrome, then it will be marked down.
WebStorm WebStorm: JavaScript Integrated Development Environment (IDE) Note: with your UNM e-mail, you can get a free student license.
WebStorm PuTTy.
WebStorm WinSCP.

Lecture Notes, Videos, Labs and Source Code

Week 1:

  1. Video: Khan Academy: What is Programming?
  2. Video: Khan Academy: Learning Programming on Khan Academy
  3. Video: Khan Academy: Drawing Basics
  4. Notes: Welcome to CS-105
  5. Lab: Lab 1: I Love to Draw
  6. Code: p5.js This is the JavaScript Processing library. NOTE: you need to DOWNLOAD this file and save it in the SAME DIRECTORY as your .html file. In Chrome, Right-click and select "Save link as ..." This will open a file dialog. Select the directory where you have your .html file and save.
  7. Code: CS105_Lab1_MyFirstName_MyLastName.html This is the Template HTML file I showed in class.
  8. Notes: Webstorm and Creating a Project

Week 2:

  1. Video: Khan Academy: Coloring
  2. Video: Khan Academy: Variables
  3. Video: Khan Academy: Animation Basics
  4. Docs: w3 Schools: if and else if statements
  5. Video: Khan Academy: if Statements
  6. Notes: Variables and the Draw Loop
  7. Code: Lines1_LinesInALoop.html Example 1: Drawing Lines in a Loop.
  8. Code: Lines2_DrawingAndErasingLines.html Example 2: Drawing and Erasing Lines in a Loop.
  9. Code: Lines3_CrossingSetsOfLines Example 3: A Crossing Sets of Lines.
  10. Code: Lines4_100sOfColors.html Example 4: Drawing with 100s of colors.
  11. Code: Lines5_LinesThatFormACurve.html Example 5: Straight line segments that form a curve.
  12. Lab: Lab 2: Shape Animation

Week 3:

  1. Video: Khan Academy: Interactice Programs (Mouse Input)
  2. Video: Khan Academy: Intro to HTML(HTML 5)
  3. Code: MouseInteractionExample.html Example program showing how to read and display the coordinates of the mouse while it is moving and when it was pressed.
  4. Lab: Lab 3: Mouse Input and HTML

Week 4:

  1. Video: Khan Academy: Resizing with variables
  2. Video: Khan Academy: Text and strings
  3. Video: Khan Academy: Functions
  4. Video: Khan Academy: Paddle-ball
  5. Notes: Random Function
  6. Code: RandomDie.html Simulates the rolling on one six-sided die
  7. Code: RandomDice.html Rolls a pair of six-sided dice many times and counts the results.
  8. Code: MouseAndBall.html
  9. Lab: Lab 4: Improved Paddle-Ball
  10. Code: MouseAndBallSceneChange.html This program, developed in class, starts with one ball that can be kicked by the mouse. After 20 bounces, a second ball is created. Then after another 20 bounces, the program switches to drawing lines.

Week 5:

  1. Video: Khan Academy: Intro to CSS
  2. Video: Khan Academy: More HTML Tags
  3. W3schools.com: Getting Javascript to interact with an HTML5 button
  4. W3schools.com: HTML DOM Input Range Object
  5. Optional Video: Khan Academy: CSS Text Properties
  6. Optional Video: Khan Academy: Using CSS to Create Customized layouts
  7. Code: PaddleBallCentered.html Example of how to center the JavaScript canvas by placing it inside a div item that is centered using CSS.
  8. Code: TextAdventure.html Sample Text Adventure. Shows how to change text and buttons. Also shows how to load and display images (both within an HTML5 label and on the JavaScript canvas).
  9. Lab: Lab 5: Text Adventure

Week 6:

  1. Lab: Lab 6: Creating a Web Page
  2. Code: MouseAndBallWithSlider.html

Week 7 & 8:

  1. Notes: Loops
  2. Notes: Midterm Exam Review

Week 9:

  1. Video: Khan Academy: Arrays
  2. Video: Khan Academy: Objects
  3. Video: Khan Academy: Making a Memory Game
  4. Code: MemoryGame.html Note: updated Oct 19 at 12:21 PM with a bunch of comments.

Past Exams:
  1. Exam: Fall 2016 Midterm Exam
  2. Code: Midterm2016Fall.html (Single web page showing all the solutions to the fall 2016 midterm exam.)
  3. Exam: Spring 2016 Midterm Exam
  4. Exam: Fall 2016 Final Exam
  5. Exam: Spring 2016 Final Exam