WEEK 1: Introduction (January 6 & 8)

Class Topics

  • Intro, Syllabus Q&A, Attendance
  • JavaScript > ES6: ECMAScript is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers.
  • ChatGPT for fast-tracking your learning
  • HTML/CSS review
  • Programming Concepts/Circles Demo

Notes:

Attendance and Late Work

  • Communicate with me, ideally on Slack, to arrange for the completion of late or missed work.
  • If you are over 5 minutes late to class more than twice in a row, you will receive an absence. Class will start on time.

Why JavaScript?

Dynamic web design, databases, APIs

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.

Topics include:

  • Machine Learning, Language Models, and AI Tools for coders
  • Detail-oriented work, testing, and overcoming frustrations
  • Logical and sequential thinking
  • Creative problem-solving and interaction design

Eloquent JavaScript: An excellent and free online book for understanding JavaScript.

Types of Projects with JavaScript

  • Websites: 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

Student 477 Projects

Development Tools

AI and Machine Learning Tools

Class Contract for AI Tools

Create a personalized class contract for appropriate and beneficial uses of AI tools for learning. Use ChatGPT to develop your ideas and share them as a comment on the Slack channel.

Git & GitHub

Programming Concepts

Build Circle Pattern

Student Pairings

Uploading Files Using Cyberduck

  1. Open connection and enter server details.
  2. Upload folders and files using lowercase names without spaces.
  3. Ensure the default page is named “index.html”.
  4. Check the live URL to ensure everything displays correctly.

 

 

 

 

 

 

Class Topics

  • Intro, Syllabus Q&A, Attendance
  • JavaScript > ES6 
    ECMAScript is a JavaScript standard meant to ensure the interoperability of Web pages across different Web browsers
  • ChatGPT for fast-tracking your learning
  • HTML/CSS review
  • Programming Concepts/Circles Demo

Notes:

*Attendance and late work.

  • You must communicate with me, ideally on Slack, to arrange for the completion of late or missed work.
  • If you are over 5 min late to class more than two times in a row, you will receive an absence. Class will start on time.

 

Why JavaScript?

Dynamic web design, databases, APIs

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. Not exactly a language.

Machine Learning, Language Models and AI Tools for coders.

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 with JavaScript:

Websites
dynamic navigation, animations with scroll or css animation

Stories/Poetry/Essays/Articles
pagination – scroll/swipe
arrays – storing , structuring and retrieving data
animation – graphic devices, sprites, dynamic infographics 
audio/video – players, interactivity, time start
Interactions – tap, click, type, drag, drop, draw 

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

Creative Programming
art, creative writing, drawing
text/media manipulation – dynamic, generative, networked
branching narratives

HTML5 Games
computation – score, keyboard games, adventure, inventories
canvas element

Student 477 Projects:

HTML5 Development:

Other Tools & Resources:

HTML Review and JavaScript

 

AI (ML) Text Generation Tools:

“Code an HTML5 website using JavaScript ES6 inside a script tag. Create a button called CHANGE. When the button is clicked, <ask for something to happen….>”

AI (ML) Image Generation Tools:

Class Contract in proper uses of AI Tools:

Create a personalized class contract for appropriate and beneficial uses of AI tools for student learning: ChatGPT

ChatGPT prompt: “Create a contract between students and the teacher in a class that will use ChatGPT to accelerate learning of digital techniques and technologies. The contact should start with “As a student of (class name) I (your name) will use ChatGPT to help me be a better and faster learner of digital technologies. I will use the ability of ChatGPT to explain and tutor me in the subject, in my preferred learning style, rather than use it to do all the work for me.” 

What are your learning goals and values in the use of AI and Machine Learning tools?  Run your thoughts through ChatGPT for additions to the above contract. 

Add new ideas from class. Run ChatGPT and post the paragraph as a comment to the class Contract post on the Slack channel.

Git & GitHub:

Git Terms from Github Glossary:

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

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

      • 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

You can also do logically without any formulas. When you add first and last element (1+200=201) and second element and last before element (2+199=201). When you go on like this you will end up getting a pairs of 201. So how many pairs we can make?. Its 100 since total elements is 200 so if we make pairs then number of pairs are. (200/2 =100). Hence total sum is 201* 100= 20100. The idea is simply expressed as a general formula as i mentioned above. 

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)
conditional statements
scope

Build Circle Pattern

Student Pairings