Tying things together

truth of the puppets''''

I’ve put the content of the evolving working page that we have made online as netcultures-html, and you can dive in to any given version and copy-and-paste it in to your webpage – e.g. this one.

The key Javascript lessons in this class are

  1. Basic Javascript rules
  2. Javascript functions
  3. jQuery events

Basic Javascript rules

There are a lot of  tutorials for javascript out there. As always, w3schools is our friend.

For our purposes, you need to know that it is a different language again to HTML and CSS… and it has about as much wacky punctuation as either of them.

The “full stop” of javascript is the semi-colon (“;”). Every statement ends with a semi-colon. parentheses  – () – mean something different than curly braces {}. And computers are more finicky than people- you have to make sure that you have a closing parenthesis for every opening one. same deal with braces.

Those are the grammatical rules… to get a good sense of what they mean in practice, you are going to have to try them out.

Javascript functions

Here is what a function definition for a function called “spang” looks like.

function spang() {
  $('h2').toggle(1000);
};

The name is the bit that comes after “function” and before the parentheses. The “body” of the function is the bit between the curly braces.

Here is what using it looks like:

spang();

Try this in your browser’s javascript console.

A function is basically an instruction to do something later. Once you have typed in a function definition to the browser, you have stored a set of instructions to your browser to do something later… The something can be almost anything – whatever you specify in the curly braces, in fact.

Don’t panic if functions seem strange. You don’t have to be adept at using them; you just have to know that they exist for the next bit to make sense. That said, if you can master them, you’ll have an easy time with this course!

jQuery events

Here is a simple jQuery event specification:

$('h2').click(spang);

Try putting THAT in your document. now, try clicking on a second-level heading…

What you are doing here is LIVE, and you can in fact use JQuery on websites from within the browser – here’s one example of how: John Resig’s Hacking Digg With Firebug and jQuery.

What we are also interested in here, though, the doors all this stuff opens to wider interactions. There are some thought-provoking examples out there of, for example, using Yahoo Pipes and jQuery together (example 1, example 2) In fact, if you go to a later version of the code you will find a more advanced example of using jQuery to do precisely that, with our course content.

But why, why?

Right. Good question. That’s up to you.

Javascript is a big, and messy, topic. But it addresses lots of  our concerns in the course

  1. animation
  2. interaction
  3. the rich functionality of the modern web

Basically… it’s handy tool to tie things together, or to add a little flourish to a project’s design or…. whatever you choose.

And you can use it to whatever end you wish in our course.

Advertisements

0 Responses to “Tying things together”



  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





%d bloggers like this: