WEEK 1: Introduction (January 19-22)

Video Lectures:

Zoom Class (Tuesdays 1:30-2:30pm – mandatory)

Please watch the first and third video talks above (“Intro 477” and “Computational Thinking”) before we meet on Zoom.  The second video is a refresher on HTML and CSS and is optional.

Intro, Syllabus Q&A, Attendance

JavaScript > ES6  
ECMAScript is a JavaScript standard meant to ensure the interoperability of Web pages across different Web browsers

Programming Concepts/Circles Demo

Zoom Workshop (Thursday 1:30-2:30pm – optional)

HTML Review
starter html file
Sublime Text Snippets


Why JavaScript?
JavasScript and future jobs

Computers are deterministic machines. They do exactly what they are told. Programming  is the process of problem solving with a computer, on its terms. Not exactly a language.

The Challenges of this Class:

    • detail-work + testing + lots of frustrations! = learning
    • logical/sequential/ordered thinking (step-by-step)
    • creative problem solving (big picture > small unit)
    • interaction design

Eloquent JavaScript– this is a good book for understanding. its online and free.

Types of Projects:

Websites and Digital Books
Pagination – scroll/swipe
Arrays – storing , structuring and retrieving data
Animation – graphic devices, sprites,  dynamic infographics and imagery,
Audio/Video – players, interactivity
Interaction (tap, click, type, drag, drop, draw )

Web Apps
APIs  (Application Programming Interface)
mash-up: geolocation, databases, social media.

Creative Programming
Art, Creative Writing, Drawing
Text/Media manipulation – dynamic, generative, networked

HTML5 Games
Computation – keyboard games, adventure, inventory

Student 477 Projects:

HTML5 Development:

Development Tools & Resources:

  • Sublime Text
  • Chrome console:
    -Mac: cmd + option+j or inspect element
    -PC: control+shift+j or inspect element

HTML Review and JavaScript

Cyberduck: uploading files using an FTP (file transfer protocol) client

Steps to upload to remote server:

  1. In your FTP client (Cyberduck) “Open Connection”
  2. 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 2017 would be “sjones17@dtc-wsuv.org”)
    password: random password sent to you by Greg – it should be saved for you, look in history – the clock icon.
  3. 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”
  4. Upload folders and files in all lowercase with no spaces
  5. Make sure that your default page for the project is “index.html”
  6. Check how everything looks on the live absolute URL: http://dtc-wsuv.org/sjones17/project/
  7. If you cannot see images, make sure that your file names and calls to access those files are all lowercase. Servers are case-sensitive!

Computational Thinking

Stonehenge, an analog computer?
      • 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 task

1-200 sum
Robot triangles exercise
triangles script

Programming Concepts

data types: strings, numbers, booleans, arrays
basic operators and “shortcut” operators 
comparison operators 
objects / methods / properties
loops (for loops)

conditional statements

Chrome Development Tools overview

Build Circle Pattern

Student Pairings

Git & GitHub:

Git Terms from Github Glossary:

  • Repository
  • Branch
  • Merge
  • Clone
  • Pull
  • Pull request
  • Fork
  • Fetch
  • Push
  • Commit
  • Markdown