When I was preparing this course, I decided that it would be good to have a real practical element, and that we should "get our hands dirty" and do some programming...
...but I didn't want to get them too dirty!
But whyJavaScript ?!?!1one!
I wanted to avoid the need for a complicated IDE and an awkward edit/compile/link/debug workflow. I didn't want there to be complex installation requirements for the development tools, and I didn't want to be tied to any particular OS.
I also thought it would be nice if the fruits of our labours could be easily shared with others, which made portability and ease of "installation" a big factor.
In contrast, when you see lots of magic shiny interactive stuff jumping out at you on a modern webpage, you're most probably looking at the effects of JavaScript.
When JavaScript is running inside a webpage, it's typically manipulating the otherwise static structure of the page.
That structure is made available to the JavaScript code by the browser, via an interface called the DOM (Document Object Model)
In conjunction with CSS (Cascading Style Sheets) to handle styling info, this allows us to augment and beautify the plain old HTML (HyperText Markup Language) of the web.
Games?
More recently, the introduction of the "canvas" element in HTML5 also lets us have almost direct control over exactly what is displayed in specific regions of a webpage, and that's what is starting to make it a viable (and interesting) target for games.
The Good News
You already know parts of JavaScript...
...sort of
The prerequisites for this course are introductory-level
Java and C++.
Those languages share a very similar "braces and semi-colons" syntax, and that's what JavaScript uses too.
They both support "object oriented" programming, and so does JavaScript.
Is it like Java?
Not as much as you might think from the name.
However, there are similarities:
Variables are considered to be "references" to some other piece of data (rather than C-style "values" of their own). This means that assignment to a variable actually involves the copying of references, not the copying of "objects".
Also, JavaScript is a garbage-collected language in which you aren't responsible for explicitly managing memory.
Some Examples
What it looks like:
function linkify( selector ) {
if( supports3DTransforms ) {
var nodes = document.querySelectorAll( selector );
for( var i = 0, len = nodes.length; i < len; i++ ) {
var node = nodes[i];
if( !node.className ) {
node.className += ' roll';
}
}
}
}
'for', 'if' (and 'while'), behave just like the C++ / Java forms.
conditionals are similar too e.g. && for AND, || for OR, ! for NOT
Let's Write Some Code!
Use the browser's developer console to try stuff out...
(CTRL-SHIFT-I for devtools on Windows, CMD-ALT-I on Mac)
NB: The console doesn't have a "strict mode", so it lets you create vars without declaring them. This turns out to be convenient for small examples (but is dangerous for larger ones).
I also take advantage of JavaScript's "semicolon insertion" (mis-)feature in the console, but try not to in "real" code.
> 17 % 5 // '%' means "modulus" i.e. remainder
2
> 17.1 % 4.9 // ..slightly weird with non-integers!
2.4000000000000004
> Math.PI // approximately, of course!
3.141592653589793
> Math.pow(2, 8)
256
> Math.pow(8, 2)
64
> Math.sin(0)
0
> Math.sin(90) // it's not in Degrees...
0.8939966636005579
> Math.sin(Math.PI / 2) // it's in Radians
1
Variables
> hello
ReferenceError: hello is not defined
> var hello // NB: `var` is a statement; it produces no value
undefined
> hello // The var `hello` now exists, with a default value
undefined
> hello = "Greetings!" // Assignment gives it a new value
"Greetings!"
> hello // Which we can now display
"Greetings!"
> greet = hello // Didn't declare this; implicit `var`
"Greetings!"
> var greet = hello // Explicit `var` in the console is annoying
undefined
> greet === hello
true
Types
> hello = "hi"
"hi"
> greet
"Greetings!"
> greet === hello // "===" for sensible equality-testing
false
> greet !== hello // "!==" for sensible not-equality-testing
true
> hello = 99 // A dynamic change of type!
99
> typeof hello
"number"
> typeof greet
"string"
> typeof typeof hello // because "typeof hello" returns a string
"string"
Functions
> square = function (x) {return x * x;}
function (x) {return x * x;}
> square
function square(x) {return x * x;}
> typeof square
"function"
> square(3)
9
> square(4)
16
> square() // unspecified params have the special val: undefined
NaN // arithmetic on undefined gives "Not A Number" (NaN)
> square(5,6,7,8) // extra params are ignored
25
> timesSelf = square // you can assign functions, like other values
function (x) {return x * x;}
Mystery
> mystery = function (a, b) {a + b;}
function (a, b) {a + b;}
> mystery(1, 2) // Oops! Forgot "return"; defaults to undefined
undefined
> mystery = function (a, b) {return a + b;}
function (a, b) {return a + b;}
> mystery(1, 2) // Now it should work.
3
> mystery = function (a, b) { // SHIFT-ENTER to cont. on a new line
return a + b;
}
function (a, b) { // SHIFT-ENTER to cont. on a new line
return a + b;
}
The use of SHIFT-ENTER for multiline input is occasionally useful but, typically, the console is just for one-liners.
Function Statements
> sq1 = function (x) {return x * x;} // NB: A function *expression*
function (x) {return x * x;}
> function sq2(x) {return x * x;} // NB: A function *statement*
undefined
> sq2
function sq2(x) {return x * x;}
> sq2.name
"sq2"
> sq1.name
"sq1" // NB: In the past, "" (!)
> sq3 = function name(x) {return x * x;}
function name(x) {return x * x;}
> sq3.name
"name"
> var sq4 = function sq4(x) {return x * x;} // rough equiv of sq2
undefined
(Just be careful to copy/save often. If you create an infinite loop you might struggle to recover any unsaved code.)
Level 1 Neural Implant Complete
You know JS-Fu!
Homework
You should now know enough to complete the homework assignment for this week!
It requires you to use jsFiddle to solve a series of increasingly difficult programming problems, requiring the manipulation of numbers, strings and arrays...