JavaScript

class examples

examples we made in class
• changing background color on click
• switching between 2 background colors
• cycling through background colors
• change background to a random color
• change background to a random "pastel" color
• create a new element on click
• create a new elements over time (animation)

exapmles we didn't quite get to in class
• generative rainbow circles (using an external "library")
• sine wave circles
• ::after On Kawara, demonstration of the JavaScript Date object as well as the DOM API (explained in the notes below)
• Random Rock You, a demonstration of the Math object as well as the Fetch API and the DOM API (both explained in the notes below)
• wack-a-mole This example makes use of many of the concepts we covered in class in order to make a simple video game (this game could definitely use some improvements, like maybe moving the mole after every animation in order to make it more difficult... but the basic concept is there)

Core Concepts

There are loads of different programming languages out there, but they all basically do the same thing: allow you to write programs that get the computer to do what you want it to do. All programming languages contain the same core concepts (variables, functions, loops, conditional statements, etc) but they all have slightly different ways of expressing these concepts, which is to say, they all have different syntax and APIs. Although any solid programming language could be used for anything (whether you're creating a website, or an iPhone app, or a video game, or a robot) some languages have special features that make them better suited for certain contexts or tasks. Different languages also have different communities of developers writing libraries and frameworks for that language.

Although JavaScript is not the only programming language we can use on the Internet, it's definitely the most popular, which means there's a large community creating libraries, tutorials and answering questions online. Furthermore, although JavaScript can be used for everything from controlling robots to scripting PhotoShop, it was originally invented as a programming language for the Web specifically, and so it's obviously the natural choice for us.

Below you'll find a handful of netnet examples demonstrating the core programming concepts expressed in JavaScript...

Web APIS

The examples below build on the above notes to create dynamic HTML/CSS content. Web browsers have built in "APIs" (application programming interfaces) which are collections of variables and functions that we can use to do all sorts of things. There are browser APIs for generating sounds, for getting data from other servers (referred to as 3rd-party "REST APIs"), for creating 2D graphics and 3D graphics, for creating Virtual and Augmented reality and so much more.

The most fundamental of these browser APIs is likely the DOM (document object model) API. When the browser renders our HTML page, behind the scenes it also creates a JavaScript Object named "document" which represents our entire HTML page, with all it's HTML and CSS. This special "document" Object has all sorts of built in properties (internal variables) and methods (internal functions) that enable us to interact with the HTML/CSS content on our page. The examples below demonstrate some of what's possible with this API, but you can learn more at Mozilla's developer docs on the DOM.