CS 105L: Introduction to Computer Programming using JavaScript
Department of Computer Science
University of New Mexico


 UNM
Instructor:
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
Schedule (Lab times, office hour times and tutor hours)

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


Software:
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.



Lecture Notes, Videos, Labs and Source Code

Week 1 & 2:

  1. Video: Khan Academy: What is Programming?
  2. Video: Khan Academy: Learning Programming on Khan Academy
  3. Video: Khan Academy: Drawing Basics
  4. Video: Khan Academy: Coloring
  5. Video: Khan Academy: Variables
  6. Video: Khan Academy: Animation Basics
  7. Notes: Welcome to CS-105
  8. Notes: Webstorm and Creating a Project
  9. Notes: Variables and the Draw Loop
  10. Lab: Lab 1: Drawing and Animation
  11. Code: p5.js is a JavaScript library called "Processing". It is written in JavaScript and includes many very useful functions that we will use often in class. 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.
  12. Code: CS105_Lab1_MyFirstName_MyLastName.html This is the Template HTML file I showed in class.
  13. Code: Lines1.html
  14. Code: Lines2_ThatKnowWhenToStop.html
  15. Code: Lines3_DrawingAndErasing.html
  16. Code: Lines4_CrossingSetsOfLines.html
  17. Code: Lines5_100sOfColors.html
  18. Code: Lines6_LinesThatFormACurve.html

Week 3:

  1. Docs: P5.js: Using the Random Function The way to read this page, and most Computer Science stuff, is to read part of it, then run that part, then change that part to make it do something else until you know you understand what is going on, then read some more, play some more, ..... "Play Is the highest form of research", --Albert Einstein, 1879 - 1955.
  2. Video: Khan Academy: Logic and If Statements
  3. Notes: Conditional Logic
  4. Notes: Generating and Using Random Numbers
  5. Lab: Lab-2: Magic Dodecahedron

Week 4:

  1. Video: Khan Academy: Interactive programs
  2. Video: Khan Academy: Text and Strings
  3. Video: Khan Academy: Functions
  4. Code: PaddleBall-Simple.html
  5. Code: PaddleBall-LimitedPaddleSpeed
  6. Lab: Lab 3: Improved Paddle Ball

Week 5 & 6:

  1. Code: Time.html
  2. w3 School: HTML onclick Event Attribute
  3. w3 School: Range Sliders Note: this page shows not only how to add a default style slider, but also how to customize with fancy styles. In this course, it will always be fine to use the default slider.
  4. w3 School: HTML5 Input Types
  5. Video: Khan Academy: While loops, For loops and nested loops
  6. Code: SliderRGBColor.html This example adds three default style sliders to the html page and uses Javascript to read the slider values and set the text color based on those values.
  7. Code: SliderLines.html Another example that adds default style sliders and draws based on the slider values.
  8. Lab: Lab 4: Buttons and Sliders for Users to Create Electronic Art (details to follow)
  9. Notes: Loops
  10. optional: Polar Equations and Their Graphs by Janet Shiver
  11. optional: Spirograph Wikipedia
  12. Code: SliderEquationOfLine.html
  13. Code: SliderEquationOfCircle.html
  14. Code: SliderEquationOfFlower.html
  15. Code: LinesWithPause.html This example, we developed in class, has:
    if (checkboxPause.checked) return;
    as the first line in the draw() function. However, if you have a program with sliders with labels that display the slider value, then you will likely want to read the slider values and update the slider labels before returning if paused.
  16. Code: SliderRGBColorByButton.html

Week 7:

  1. Video: Khan Academy: Intro to HTML
  2. Video: Khan Academy: More HTML Tags
  3. Lab: Lab 5: Publishing a Javascript Webpage on the World Wide Web

Week 8: Midterm Exam

Week 9 & 10:

  1. Video: Khan Academy: Arrays
  2. Code: Dice.html Without using arrays, code that counts each of the times a pair of dice sums to 2, 3, 4, ... 12 is long and tedious.
  3. Code: DiceWithArray.html Aaaaa, the power of arrays makes the last program so much nicer.
  4. Video: Khan Academy: Objects
  5. Video: Khan Academy: Making a Memory and Tic-Tac-Toe Game
  6. Code: memoryGame Directory of .html and .png of starting point for the memory game lab. It takes the Khan Academy video example and shows how to set it up as a stand-alone html. As given, the game never flips back the tiles - even if the guess is a missmatch.
  7. Lab: Lab 6: Memory Game Mod

Week 11 & 12:

  1. Video: TED Talk: What AI is - and isn't
  2. Lab: Lab 7: 3D Tac-Tac-Toe with Artificial intelligence
  3. Code: TicTacToe1_KahnAcademy.html Tac-Tac-Toe (Khan Academy version, with some clean up and comments added)
  4. Code: TicTacToe2_CheckSomeWins.html This is the Khan Academy version with some checks for win added that we developed in class April 5th.
  5. Code: TicTacToe3_ColorSomeWins.html This version has the same win checks as the one above; however it draws symbols in the winning tiles in bright green. This is done by adding a new field to the Tile object: this.partOfAWin. When each tile object is created, this new field is set to false. When a win is found, each tile that is part of the win has this field set to true.
  6. Code: TicTacToe4_AI.html
  7. Code: TicTacToe5_MultiBoardi.html

Week 13 & 14:

  1. Video: Khan Academy: Randomness
  2. Video: Khan Academy: Vectors
  3. Video: Khan Academy: Forces
  4. Video: Khan Academy: Intro to Particle Systems
  5. Code: ball1.html
  6. Code: Ball2_withObjects.html
  7. Code: Ball3_withHits.html
  8. Code: RandomWalk.html
  9. Code: WalkAndTurn.html
  10. Code: Fireworks.html


Past Midterm Exams:
  1. Exam: Fall 2016 Midterm Exam
  2. Exam: Spring 2016 Midterm Exam
  3. Exam: Fall 2017 Midterm Exam
  4. Exam: Spring 2018 Midterm Exam
Past Final Exams:
  1. Exam: Fall 2016 Final Exam
  2. Exam: Spring 2016 Final Exam
  3. Exam: Fall 2017 Final Exam