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



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