Download
1 / 16
160 likes | 288 Vues
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
E N D
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.comhttp://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
