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.
  5. Lab: Lab 7: Memory Game Mod

Week 10 & 11:

  1. Video: Khan Academy: Tic Tac Toe
  2. Lab: Tic Tac Toe in 3D
  3. Code: TicTacToe1_KahnAcademy.html This is the Khan Academy version of Tic Tac Toe with the answers filled in (as we did together in class).
  4. Code: TicTacToe2_checkWin.html In class, we took the Khan Academy version (see above) and added a call to the checkWin() function where the player clicks the mouse on a tile. We also added some checks in this code for finding a win of either player in any column and on one diagonal. Note: all this program does is print to the debug console "WIN" when there is a winner. Your program will need to set a global variable that might be called something like gameOver to true. Then, in draw, if gameOver is true, draw just returns without doing anything. Also, in the mouseReleased() function, if gameOver is true, you want to reload the page or otherwise set all the tiles.label to "" (to restart the game)
  5. Code: TicTacToe3_AI.html In class on Tuesday Nov 7, we added some elements of an AI to TicTacToe2_checkWin.html. In this version, we changed a few things: 1) the prototype Tile onClick function, now returns true if the player clicked in that tile and it was empty. 2) After a mouseDown event, if the player actually put an X in an empty square, then a new function, makeAIMove() is called. 3) The new function, makeAIMove() has a loop. Each iteration of the loop picks a random tile and tries to move there. If the tile is empty, the move is made and the loop exits. Note: this version falls into an infinite loop when the board is full and no move is made
  6. Code: TicTacToe4_MultiBoard.html This version we also worked on in class on Nov 7. It draws all three boards and lets the player move in any of the boards. It still only checks for win on some parts of the first board and when it finds a win all it does is print a message to the console. Also, the AI can only move on the first board.
  7. Code: Memory Game by Sehaj Singh This solution, by CS-105 student Sehaj Singh, earned extra credit for implementing a number of features including making unique sounds for each symbol, changing the images, and requires matching 3 of a kind. It also has the nice polish feature of being educational in that the images are different types of birds and the sounds are the sounds made by that type of bird: so, play and learn.

Week 12 & 13:

  1. Video: Khan Academy: Natural Simulations
  2. Video: Khan Academy: Random Walks
  3. Video: Khan Academy: Noise
  4. Code: RandomWalk2.html
  5. Code: NoiseCircles.html

Week 14:

  1. Code: PaddleBallGravity.html
  2. Code: JumpingSquare.html
  3. Code: JumpingSquareWithScrollingBackground.html
  4. Code: ArrayManipulation.html
  5. Code: ScrollingLoopDeeLoop.html

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