Let’s start with our browser debugger. If you’re using Firefox, look in Tools Web Developer Web Console; if you’re on Chrome, look under the “” menu More tools JavaScript Console.
Javascript has a C-like syntax, which is also similar to Java. Try these things:
3 "hello" var x = 5 console.log("hello") console.log(x) x + 7
Let’s do the classic “write a function to print ‘hello world’” exercise!
var hello = function() { console.log("hello world!"); }
We should always declare variables with var. If we do it without,
we end up with a global variable, which can be a problem! Unlike other
languages, even inside a function if you don’t use var your variable
becomes global! This is bad (see my page on Javascript
pitfalls for more).
Almost everything in JS is an object. The only exceptions are:
numbers, strings, true/false, null, and undefined. Objects are
a containers with properties, which have names and values.
There are no classes in Javascript. There’s a way to do inheritance, though, which can be pretty confusing, so we won’t talk about it now.
Objects look like Python dicts (sort of) or Java HashMaps. Let’s make an object:
var hello = {} hello.car = 'honda' hello.year = 1957 hello
Objects can have their properties accessed by a dot or with brackets:
hello.year hello['year']
If we try to access nonexistent properties we get undefined:
hello['color']
Arrays are objects, too:
rit = ['Rochester', 'Institute', 'of', 'Technology']
They use numbers for accessors:
rit[0]
They can have any object inside:
hci = ['Human', 42, rit, hello]
Let’s make a more complicated object:
var flight = { airline: "Oceanic", number: 815, departure: { IATA: "SYD", time: "2004-09-22 14:55", city: "Sydney" }, arrival: { IATA: "LAX", time: "2004-09-23 10:42", city: "Los Angeles" } };
This is interesting because it’s also something that’s used for data compatibility!
Switch to JSON slides
Functions are objects too! They’re “first class”, meaning they are just values that can be passed around. For example:
var hello = function() { console.log("hello world") } hello() hello2 = hello hello2()
Putting a function into a variable allows us to do “callbacks”. Here’s a simple example:
var done = function(what) { console.log("The function " + what + " is done!"); } var doSomething = function(callback) { var now = new Date().getTime(); //What time is it now? while(new Date() < now + 1000) {}; //Delay 1 second; don't do this in real code! if(callback) //Will be undefined if nothing was passed callback("doSomething"); } doSomething(done);
We can also drop our done function in as an anonymous function.
Instead of assigning the function to a variable, we just put it in as
the argument for the callback:
doSomething( function(what) { console.log("The function " + what + " is done!"); } );
Callbacks are used a lot in Javascript, for example with timers.
The correct way to set a delay is using the setTimeout() function (I
used the while() loop above for simplicity):
var timeoutCallback = function() { console.log("Timeout over"); }; window.setTimeout(timeoutCallback, 1000);
This calls the timeoutCallback function after 1000 milliseconds, or
1 second.
We can call a function repeatedly as well:
var intervalCallback = function() { console.log("Beep!"); }; var intervalID = window.setInterval(intervalCallback, 1000);
This calls the intervalCallback every 1000 milliseconds, until
we cancel it with
window.clearInterval(intervalID)
Callbacks are also used quite often in libraries, such as…
It’s a handy library that does a lot of good stuff for us. It also helps to illustrate why functions-as-objects is super handy!
For ease of typing, jQuery represents itself as $. Let’s try it:
make a new HTML file called jquery_test.html that looks like this:
<html> <head> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> </head> <body> <div id="hello"> Hello </div> </body> </html>
Load that up in your browser and open the Javascript console. Now type
$ and hit enter. Depending on your browser, you’ll see any of:
function m() (Firefox)function m(a, b) (Chrome)function m(a, b) {return new m.fn.init(a,b);} (Safari)The point being that $ actually refers to something real!
jQuery makes it easy to change the page. Try these things in the Javascript console:
$('#hello') $('#hello').text() $('#hello').text("Goodbye") $('#hello').append(" cruel world") $('#hello').after('<h1>Hello!</h1>')
The # symbol is a CSS selector that refers to the id parameter in
the HTML. If we had instead done <div class="good"> we could use a
period . to refer to everything with class good: $('.good').
Ajax is a way of grabbing data from somewhere else. Let’s go back to
our jquery_test.html file and add some scripting. Change your file
to look like this:
<html> <head> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $.ajax({ url: "https://data.sparkfun.com/output/YGV3jNvQMjh2G4oOLwdx.json", dataType: "jsonp", data: {page: 1}, success: function( response ) { $('#results').text(JSON.stringify(response[0])); // server response } }); </script> </head> <body> <pre id="results"> </pre> </body> </html>
Paper.js is a fun library to do graphical stuff! It has a “language” all of its own called “Paperscript” which is actually Javascript with a bit of extra stuff on top to simplify things. The tutorials are really handy.