Transcript Web Design Lecture

Web Design Lecture
Using jQuery to Design Dynamic
Webpages
About the Meetup Groups

2 Groups
– East Toronto Web Design
– Toronto Database Pros



Started late 2006
Meet monthly at Cafe Mirage
Find us online at Meetup.com
About Me – Peter Meth





Degree in Computer Science
Full time web developer
Side business doing websites, hosting,
consulting
PHP, MySQL, HTML, CSS, Javascript
More of a programmer than a designer
About this Lecture






I wanted to do it from the start
Until now, not enough people
Already scouting out new locations
Janis suggested lectures, so I thought it was
a good time to try this out
I recently had to use JQuery and I liked it
If successful, we will do more lectures
Presentation Overview







What is jQuery?
Why would I want to use it?
Foundations & Concepts
jQuery Tutorial
Real World Examples & Cool Stuff
Other Libraries and Resources
Questions & Answers
What is jQuery





It is Javascript, but simpified
Called a Framework or Library
Been around since 2006
Motto is: Write Less, Do More
Website: http://www.jquery.com
Why Use jQuery







Easily insert, copy, move, remove elements
Small amount of code for most tasks
Add animations like slides, fades, resize, move,
bounce
Add widgets to pages (date pickers, dialogs, data
grids, sliders, etc)
Easy integration of Ajax
Cross-browser compatibility
Huge community, lots of plugins
Foundations – Object Oriented

Objects or Elements
– like real world things: apple, door, person

Properties or Attributes
– define the object, have descriptive names

Methods or Actions
– different for different object types

Events
– can have actions associated to them
Object Oriented Concepts

Types or Classes
– also have subtypes

Instance Names or Handles
– myapple is different from yourapple

Dot notation
– mycup.contents

Chaining
– cup.contents.drink()
HTML and CSS
DOM (Document Object Model)
– defines html structure and rules (legal tags)
 Important elements should have ID and/or Class

– <h1 id=“maintitle” class=“bigtext”>Big title</h1>

CSS can refer to Objects in different ways
– tag, .class, #id, :even, :odd

CSS Chaining
– h1.bigtext (only h1’s with class bigtext)
jQuery

Include jQuery library in HTML head
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
Magic starts with $
 Find something, do something with it

– $(“h1”).hide(); - hide all h1’s

We can chain together actions
– $(“#magicitem”).show().slideUp();

Use callback functions
– $(“#mytext”).change(function(){ alert(“hi”); });
jQuery

Try some of these things out
– http://www.w3schools.com/jquery/jquery_examples.asp
– http://training.learningjquery.com/

More reference
– http://jquery.com
– http://visualjquery.com
– http://www.w3schools.com/jquery
Plugins

Find plugins that you like
– http://jqueryplugins.com

Include plugin file in the head after jquery
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/myplugin.js"></script>


Follow the Plugin documentation
Enjoy the new functionality
Examples & Cool Stuff
–
–
–
–
http://tomorrowsdrivers.com http://tomorrowsdrivers.com/index2.php
http://urbanfitt.com
http://agincourttennisclub.ca
http://softersoftware.com/jquerydemo/application/
–
–
–
–
http://www.arcinspirations.com/kobe/
http://spritely.net/
http://gamequery.onaluf.org/
http://www.willjessup.com/sandbox/jquery/solar_system/rotator.html
Other Libraries
–
–
–
–
–
http://raphaeljs.com/
http://www.dojotoolkit.org/
http://developer.yahoo.com/yui
http://mootools.net
http://script.aculo.us
Questions & Answers