Redirecting...

Click here if you are not redirected.

A to Z, F15

Week 1 Notes

Git, Github, Github pages

One of the first things we’ll explore in this class is git, github, and github pages. By no means, is github pages required for hosting your projects. But it’s free and fast and lives on github. So there are many reasons why you might like to consider it, at least during the homework / experimentation stage / of a project. Here are some resources for getting started.

JavaScript

The core language for this class is JavaScript. If JavaScript is new to you, I would suggest starting with the the first four chapters of Eloquent JavaScript. And there are many more resources for learning online as well.

p5.js

The framework we’ll be exploring is p5.js. Here are some links to get your started.

Examples

HTML and CSS

The class will assume basic knowledge of HTML and CSS. Of course I’m happy to answer questions and go over these topics, but they won’t be explicitly covered in class, other than in the context of JavaScript DOM manipulation. For review, I would suggest reading the p5.js HTML and CSS overview. The HTML and CSS book is also excellent.

DOM manipulation with JS

The first JavaScript task I’ll demonstrate is “DOM manipulation”, i.e. using programming to change the HTML and CSS of a page on the fly. This is something possible with native JavaScript, as well as many different JS frameworks and libraries, the most well-known probably being JQuery. In class, we’ll use the p5.js DOM library primarily, as well as dig into native JS and other frameworks when necessary.

Examples

JavaScript Objects

JavaScript objects will be key to just about everything we do this semester. We’ll be using objects for DOM manipulation like p5.Element and the native JS Element. We’ll be exploring data coming in as JSON (“JavaScript Object Notation”). We’ll focus a lot on the JS String object as well as objects from other libraries. And we’ll write our own objects for analyzing and generating text. JavaScript objects (for now, at least until ES6 is more widely adopted) follow a “prototypical inheritance” model which is quite different than the classical OOP found in Java or C++. This “object playground” video covers the idea in great detail if you are looking for more info.

Examples

Text mashups

In class, we’ll do an exercise around mashing up text manually. Here are links to further reading and information about the techinques we discussed, as well as online versions of the algorithms. Next week, we’ll look at how to build single page web apps that mash up text submitted by users.