Wk 7/Tut 6 : Introductory Javascript

[Courtesy of Dave Wallace]

JavaScript is a client-side scripting language.  This means it is downloaded from the web-server and interpreted by the browser itself.  This is in contrast to a server-sidescripting language, like PHP, which is executed on the web-server and then sends the output of that script (usually some HTML) to the browser.

JavaScript allows us, among other things, to manipulate the web page (without reloading the browser window), and respond to events, such as user input.

JavaScript is probably the most widely used programming language in the world.  As such, it a very beneficial skill to have for any web designer.

There are many excellent JavaScript resources available, so I will keep my notes here brief.  I will demonstrate some of the commonly used features of javascript before pointing you to some useful resources for broadening your understanding of this powerful language.

My demonstration will cover:

  • how to include JavaScript in your HTML file
  • alerts
  • outputting information to the web browser’s console
  • comments
  • variables
  • conditional statements
  • loop structures
  • functions
  • arrays
  • Document Object Model (DOM) Manipulation with jQuery
  • event handling with jQuery

More JavaScript Resources

You shouldn’t set out to master the entirety of JavaScript from the outset.  A few hours of studying some of the following resources should give you enough of an understanding of the language to be able to read and modify other examples.  Being the language of the web, there is plenty of example code out there, just a Google away.

 


Exercises

Please download these Javascript example files courtesy of Cassie Selin we will go over.

 


jQuery Repositories

Beyond the extensive list of jQuery functions you can use by calling it’s base library, there are countless repositories of jQuery code written at this point, many of which are free and open-source to use in your projects.

Some Examples to get you started:

  • jQuery Plugin Registry : the official source that is always a good place to start.
  • Nivo Slider : not free, but a a quite robust example of an image slider with solid documentation, style  & options
  • qTip : an advanced tooltip module with tons of UI options.