CS404 – Session 4
9/30/2010
JavaScript data types
Boolean
- true
var foo = true;- (true is a ‘literal’)
Numbers
- 3.141
var bar = 3.141;- (there can be number ‘literals’ too, like pi)
Strings
- "Howdy!"
var baz = "Howdy!"- can use double or single quotes, just be consistent
- quotes tell the interpreter that the contents are a literal
Arrays
[true, "dat", 42][0, 1, 2];]var bizzle: [true, "dat", 42];- square brackets filled with a list of elements
- 0-based indexing; first element in the array is referred to by 0
Objects
{ slot :- 3.14 }- a variable like any other
- like a "dictionary" or "map" or "hash" or "hash(table)"
- a mapping between a key like "a" and a value like 3.141
- the object *is* the mapping from key to value
- value can be any JS data type
- an array is a special case of object
var foo = 101;
var obj = {
"A" : 3.141,
"b" : function() { },
foo: {},
3: [1, 2, 3, 4, 5]
};
If you want to have keys that are numbers, you must use the ["32"] syntax to call it
window is a defined object with a bazillion properties, for example, onLoad. the value of onLoad is a function.
Functions
function (argument) {
};
var variableName = function () {
};
var panda = function () {
alert ("Let me out!")
};
- Simplest function has no arguments
// what’s an argument? = characteristics. E.g. to draw a flower, you would pass # of petals and petal colour as arguments
- Statements are just a bunch of calls or arguments. To find the end of a statement, look for the semi-colons.
- When you use a variable name in the REPL instead of a literal, it will run whatever the var defines
- The REPL will always print the final statement’s value.
- Put a semi-colon at the end of a statement
- Ruby, Perl, JS – loosely typed variables; strictly typed data
Factorials
// argh!
5! = 5 x 4 x 3 x 2 x 1 = 120
var
-- is the same thing as a = a-1
Calling a function suggests taking the code that’s a valuable in a variable and running it to get a result. If we take the "value of" something, we get a bunch of code. (You tell JS to run a function by using ().)
// Struggling to follow when Ben "chugs ahead"
Even though there are tons of shortcuts to getting code to do things (like — / a = a-1), it’s useful, perhaps, to write things lucidly first then optimize later. (Knuth etc)
// try to find a list of these things
Arguments to a function are not strictly variables.
Variable Scope // line 84
If Statements
= set a variable
== "check it. is it equal?
Events
- set up events that call functions when you need them. e.g. onClick
// Then, the class decided to try and construct a flower using the Raphael JavaScript library. I foolishly thought I was ready to improvise. I was wrong. Had no idea really where to start to tell the program what I wanted.
How I Would Write a Flower
- Set up canvas
- Draw first petal: Pick size; Pick color(s)
- Rotate
- Draw another petal
repeat - Stop when I get to first petal
// It was really fun to watch everyone’s different approaches to solving this problem. I think that’s been one of the biggest take-aways of this course for me: that there are lots of different ways to make something happen. Ben eventually got a flower on screen. He drew 4 petals in a cross, then rotated them. Purty!
