It's important to remember (see the notes on What's a Comuter) the computer is a very specific (and complex) arrangement of circuits in such a way that makes it possible for it to remember values and manipulate values (do math), but how does electricity become "values"? That's where Machine Code (often written in binary code) enters the picture. That electrical current is made up of high voltages and low voltages which we refer to as a 1 or a 0 (binary code) for the sake of being able to use these voltages to represent values or data.
As the video above explained, binary code can be used to represent ANY data we choose and we can give the computer data in binary code to operate on, in the old days we would do that by flipping switches (on/off 1/0) or storing our data in punched cards/tape (whole-punch/no-whole-punch 1/0) and having the computer read the tape. We can also pass instructions for what we want the computer to do with the data, computers are designed to (or "wired up to") interpret certain sequences of binary code as instruction codes (like "add" this, or "store" that), and so early programs could look something like this:
Programmers rarely ever deal with binary code directly, we made things easier by writnig "assembly code" which were slightly more human readable versions of this machine code (which we would translate into binary before running), here's the same program in a hypothetical assembly language:
ORG 0
LDA A
ADD B
STA C
HLT
A, DEC 84
B, DEC 12
C, DEC 0
END
It's rare you find folks working in assembly these days (though some folks do, check out the cool 8bit art of Rachel Weil for example) becuase if it's that complicated to tell a computer to add 2 numbers together it be virtually impossible to make it do much more complicated tasks (generally speaking, Rachel might disagree). Add to that the fact that you need to know the instruction codes and "architecture" (how the switches are wired up) for every CPU design if you wanted your program to work on every computer (the only computer Rachel worries about is the NES) and you would have to re-write your code each time, essentially you would have to be quite the expert to do even really simple things... enter Grace Hopper:
This code is an example of FLOW-MATIC the first "english-like" compiled language developed under Admiral Hopper, which would eventually lead to COBOL, which is still used today. It's an obsolete language, but this is as close as I can approximate what it would have looked like to add to numbers together, let's assume the values 84 and 12 are stored in file A and B. Admiral Hopper also popularized the idea of machine-independent programming languages which is generally how we think of programming languages today.
INPUT FIRST FILE=A SECOND FILE=B,
OUTPUT SUM FILE=C;
ADD A TO B
TRANSFER B TO SUM
CLOSE-OUT FILE SUM
STOP.
Today we have lots of "higher level" (of abstraction) languages meant to be written and read by humans. Different languages specialize in different contexts (for example JavaScript is ideal for programming apps for the web) and they all have different "syntax" but ultimately they can all do the same things (JavaScript could be used to write pretty much anything, not just web apps). In order to use a language on any given system (particular computer architecture) you need to make sure someone has written a compiler or interpreter for that language on that system so that your code can get translated to the machine code the computer needs in order to actually run your program. Here are a few more xample of the same simple program written in a few different languages, notice their general similarity despite their difference in syntax
// C
#include <stdio.h>
void main(){
int a = 84;
int b = 12;
int c = a + b;
printf("%d\n", c );
}
// Java
class myprogram
{
public static void main(String args[])
{
int a = 84;
int b = 12;
int c = a + b;
System.out.println(c);
}
}
// JavaScript (aka ECMAScript)
function main(){
var a = 84;
var b = 12;
var c = a + b;
console.log( c );
}
main();
# Python
def main():
a = 84
b = 12
c = a + b
print(c)
main()
<?php # php
function main()
{
$a = 84;
$b = 12;
$c = $a + $b;
echo $c."\n";
}
main();
?>
// C++
#include <iostream>
void main(){
{
int a = 84;
int b = 12;
int c = a + b;
std::cout << c;
}
"[Netscape, 1995] displayed Web pages that were not very lively. You could have a nice cartoon of a monkey on the Web page, but there was no way to make the monkey dance when you moved over it with your mouse. Figuring out how to make that happen was the job of a language developer named Brendan Eich. He sat down and in a few weeks created a language called JavaScript [...] as browsers proliferated and the Web grew from a document-delivery platform into a software-delivery platform, JavaScript became, arguably, the most widely deployed language runtime in the world. If you wrote some JavaScript code, you could run it wherever the Web was—everywhere."
Paul Ford, from What Is Code in Bloomberg Business (2015)
As we've discussed computer programming languages are meant to be read by people, in order for computers to understand your code (ur instructions) it needs to be translated into machine code that the computer understands. Typically, this is done by running your code through a compiler which will spit out a machine code version of your file (the "source" code) that the computer can actually run (the app/program or "binary"). Another way to do this is with an interpreter or "runtime" which rather than converting your source code into a separtae machine code file, it will translate your code for the computer right at the time you run your file through the interpreter (ie. at "run-time"). All your browsers and many other apps (like MaxMSP, Adobe apps like Photoshop, Unity and Microsoft Office) have a JavaScript runtime included in them, which is why you can use JavaScript on a website or in a Unity game. (NOTE: though there are ways to "package" your program as a "binary" (executable file) using things like pkg for CLI apps or electron for GUI apps)
Like most contemporary new-media projects node is perpetually being worked on and improved, which means there's been many differnt versions4, we'll be using the most recent stable version v12.16.2 which you can download on the nodejs website.
After you've installed node make sure everythings working by running node -v
in your terminal. If you see your node version number print to the console then your good! There's a couple of ways to get started from here, like most CLI apps you can run man node
or node -h
or node --help
to learn more about it.
If you run node
without any arguments it will open up a JavaScript shell, this is essentially an interactive JavaScript environment (it's sort of like being "inside" node) every line of JavaScript you enter (as in type-in + hit enter) will automatically get turned into machine code and executed by your CPU then spat back (echoed) to the shell.
Once in the shell type in a number to see the shell echo it back to you. This worked because numbers in JavaScript are an official data-type so the shell can return it back to you. Next try writing something like 84 + 12
, this time it returns 96 b/c the +
symbol in JavaScript is an "operator" which is used to load up that "ADD" instruction and return the result of that operation.
A fragment of code that produces a value is called an expression. We use operators in conjunction with data to write expressions. While an expression like this one is as simple as it possibly gets, I hope this background (from Machine Code to JavaScript) gives you a bit of an appreciation for the level of abstraction programming languages like JavaScript provide. Make sure you watch the videos I put together for a crash course on the basic principles of programming in these hihger level languages and what they look like in JavaScript, resulting in a JS version of this classic C64 program:
You'll find the repo for the 10 print assignment on the class GitHub group page.
I've also created a Deep Dive Video where I cover some more advanced JavaScript syntax, as well as a Bonus Video where I reproduce the same algorithm using a library called p5.js (based on the Web's Canvas API for 2d drawings), which is a bit of a preview for where we're going next.