Week 1: Introduction to Programming
Course Overview
- Intro, Syllabus Q&A,
- Codecademy Tutorials: Submit a screenshot on Canvas of your progress. Make sure the browser address bar is visible in the screenshot.
- Attendance: communicate with me, ideally on Slack, to arrange for the completion of late or missed work. Read modules to keep up.
- JavaScript > ES6: ECMAScript is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers.
- Coding with AI in this class.
- Projects
- HTML/CSS review
- Programming Concepts
Learning JavaScript
Computers are deterministic machines. They do exactly what they are told to do. Programming is the process of problem-solving with a computer, on its terms. Programming is not exactly a language but a way of thinking.The Challenges of this Class:
- detail-work + testing + lots of frustrations! = learning
- logical/sequential/ordered thinking (step-by-step)
- macro/micro problem solving
- creative problem solving (big picture < – > small unit)
- interaction & UX design
- Stack Overflow vs AI for Web Design and Development and for Learning
- Eloquent JavaScript: An excellent and free online book for understanding deeper concepts of JavaScript.
Types of Projects with JavaScript
- Websites: practical tasks, dynamic navigation, animations with scroll or CSS animation
- Stories/Poetry/Essays: Pagination, animation, interactivity
- Web Apps: APIs, geolocation, databases
- Creative Programming: Generative text/media, branching narratives
- HTML5 Games: Canvas element, scorekeeping, adventure games
- Generative Visual Art : using the Canvas element to draw and design dynamic animations
Student 477 Projects
- programmed book chapter by Daniel Spung
- random pizza by Shane Sanders
- narrative game: Bed Bugs by Holly Slocum
- interactive: game Jenn Nguyen
- interactive: planets Jenn Nguyen
- map: fashion Shannon Guo
- interactive: color picker Shannon Guo
- lewis & clark game (Marilyn Gable, Sophia Deason,Dalila Drugovic)
- weather app (Von Miller)
- e-lit: animated text Neely Ellis
- canvas game/Story by Erik Messinger
- game: sprite Giselle Gomez
- game : inventory Daniel Spung
- game: inventory 2 Paul Meiners
- tech support Joel Waite
- kiwi's garden! Gianella Singhose
- cowardly blocks Tristan Mattole
- guess the country Graci Vandervort
Tools & resources
- W3 schools: HTML5, CSS, Media Queries and JavaScript
- YouTube searches!
- Chrome console: -Mac: cmd + option+j or inspect element -PC: control+shift+j or inspect element
- Validate HTML/CSS
- Web Developer - chrome extension
- React.js
HTML Review and JavaScript Intro
Computational Thinking
- decomposition - break down problem into small pieces
- pattern recognition - find similarities and patterns
- abstraction - with patterns, remove the inessential (differences)
- algorithmic design - based on abstractions, come up with a list of steps to solve problem / do tasks
computation in everyday life:
- rituals as cultural algorithms
- recipes: measurements, steps, conditionals
- scheduling: time segmentation, loops, conditionals
- packing for vacation: what to pack x number of days, weather conditionals
1-200 sum?
drawing three triangles: humans vs computers
Main Programming Concepts
- statements
- variables
- data types: strings, numbers, booleans, arrays
- basic operators and "shortcut" operators
- comparison operators
- arrays
- objects / methods / properties
- functions
- loops (for loops)
- while loops
- conditional statements
- scope
How do you play Tic Tac Toe? Explain to a five year old. Tic Tac Toe
How do you play Hangman? Explain to a five year old. What is the set up needed? What are the logic steps?
Dynamic Page Example:
- Circles Script – what are the logic steps? examine the JS code step by step
Opening the Console to Check Errors:
- Windows: Ctrl-Shift-J
- Mac: Cmd-Option-J
- Open Circles Script and make an error
- Check error with console
FTP Instructions
uploading files using an FTP (file transfer protocol) client
Steps to upload to remote server:- In your free FTP client (Cyberduck or Filezilla) “Open Connection”
- Enter the following info: servername: dtc-wsuv.org username: first initial + last name +year started + @dtc-wsuv.org , all in lowercase, no spaces or symbols (so, “Sam Jones” who started DTC355 in 2026 would be “sjones26@dtc-wsuv.org”) password: random password sent to you by Greg - it should be saved for you, look in history - the clock icon.
- If successful, you should be in your personal server directory that has the same name as your username (without the @dtc-wsuv.org) . Now you can either drag the folder and files in that directory or use the “action” menu to “upload”
- Upload folders and files in all lowercase with no spaces
- Make sure that your default page for the project is “index.html”
- Check how everything looks on the live absolute URL. Example: http://dtc-wsuv.org/sjones26/project/
- If you cannot see images, make sure that your file names and calls to access those files are all lowercase. Servers are case-sensitive!