jquery introduction
DESCRIPTION
A brown bag presentation we did at BrightTALK about jQuery, covers the basics and how we use it.TRANSCRIPT
1Wednesday, 28 April 2010
What are we talking about
2Wednesday, 28 April 2010
What are we talking aboutclient side scripting implemented as part of a browser to provide:
2Wednesday, 28 April 2010
What are we talking aboutclient side scripting implemented as part of a browser to provide:
enhanced UI
2Wednesday, 28 April 2010
What are we talking aboutclient side scripting implemented as part of a browser to provide:
enhanced UI
dynamic websites
2Wednesday, 28 April 2010
Why should I care?“JavaScript sucks”
3Wednesday, 28 April 2010
Why should I care?“JavaScript sucks”
it’s different - prototypal inheritance
3Wednesday, 28 April 2010
Why should I care?“JavaScript sucks”
it’s different - prototypal inheritance
DOM is key BUT “sucks”
3Wednesday, 28 April 2010
Why should I care?“JavaScript sucks”
it’s different - prototypal inheritance
DOM is key BUT “sucks”
Element selection sucks
3Wednesday, 28 April 2010
Why should I care?“JavaScript sucks”
it’s different - prototypal inheritance
DOM is key BUT “sucks”
Element selection sucks
x-Browser DOM sucks
3Wednesday, 28 April 2010
Demo
4Wednesday, 28 April 2010
DOM selection and Cross Browser DOM selection code demovar objById = getElementById('id');var objById = $('#id');var firstParagraph = getElementByTagName('p')[0];var firstParagraph = $('p:first');
/////////// example cross browser functions ////
/********************************************************************* * Get an object, this function is cross browser * Usage: * var object = get_object(element_id); * @Author Hamid Alipour http://blog.code-head.com/ **/ function get_object(id) { var object = null; if (document.layers) { // Mozilla 4.0 based browsers object = document.layers[id]; } else if (document.all) { // IE6 object = document.all[id]; } else if (document.getElementById) { // Modern browsers object = document.getElementById(id); } return object; } /*********************************************************************/
var obj = get_object('id');
// jquery
var obj = $('#id');
What is jQuery?
"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript." http://jquery.com
“Write less, do more”
5Wednesday, 28 April 2010
What is jQuery?
6Wednesday, 28 April 2010
What is jQuery?
A fast concise library with an OO interface
6Wednesday, 28 April 2010
What is jQuery?
A fast concise library with an OO interface
Features
Lightweight
Cross-browser
CSS3 Compliant
6Wednesday, 28 April 2010
CSS3 Compliant???
7Wednesday, 28 April 2010
CSS3 Compliant??? We really mean “selectors” as in DOM selection
7Wednesday, 28 April 2010
CSS3 Compliant??? We really mean “selectors” as in DOM selection
Starts with CSS2
7Wednesday, 28 April 2010
CSS3 Compliant??? We really mean “selectors” as in DOM selection
Starts with CSS2
Id, Class, Type, Universal, Grouping, Descendant, Child, Adjacent Sibling, Attribute, etc.
7Wednesday, 28 April 2010
CSS Selector Demo
Id, Class, Type, Universal, Grouping, Descendant, Child, Adjacent Sibling, Attribute, etc.
8Wednesday, 28 April 2010
CSS Selector Demo with CSS code
From to http://www.w3.org/TR/CSS2/selector.html
Id
#idvalue {font-family: sans-serif;}
Class
.classname {font-family: Sans-Serif;}
.classone.classtwo {font-family: Sans-Serif;}
Grouping
h1 { font-family: sans-serif }h2 { font-family: sans-serif }h3 { font-family: sans-serif }
is equivalent to:
h1, h2, h3 { font-family: sans-serif }
Descendant
For example, consider the following rules:
h1 { color: red }em { color: red }
Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as:
<H1>This headline is <EM>very</EM> important</H1>We address this case by supplementing the previous rules with a rule that sets the text color to blue whenever an EM occurs anywhere within an H1:
h1 { color: red }em { color: red }h1 em { color: blue }
The third rule will match the EM in the following fragment:
<H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1>
Child
The following rule sets the style of all P elements that are children of BODY:
body > P { line-height: 1.3 }
The following example combines descendant selectors and child selectors:
div ol>li p
It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.
Mix
h1.opener + h2 {margin-top: -5px }div#navigation > p.help { font-size: 0.1em }
Etc.
CSS3 Compliant??? We really mean “selectors” as in DOM selection
Start with CSS2
More at http://api.jquery.com/category/selectors/
http://www.w3.org/TR/CSS2/selector.html
http://www.w3.org/TR/css3-selectors/
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
http://www.w3schools.com/css/css_examples.asp
9Wednesday, 28 April 2010
jQuery Core Concepts$()
Get then Act
Chainability
$("p.neat").addClass("ohmy").show("slow");
10Wednesday, 28 April 2010
KS take over here
$() = jQuery()
$ is a jquery object.
$ is used to keep the code shorter, javascript is downloaded
$(selector) is how you get an element as a jQuery object.
11Wednesday, 28 April 2010
Chainability Get then Act
Chainability
jQuery has chainablity of commends you can link one commend to an other
$('#boo').filter(':funny').addClass('funny').css('color', 'red').show();
$("p.neat").addClass("ohmy").show("slow");
12Wednesday, 28 April 2010
Hello worldDemo
13Wednesday, 28 April 2010
jQuery DOM selection (get) then act (PS do)http://jquery.com - show this demo do a couple different things
ask what is the code going to do, discuss and run, then ask for do something different?
BrightTALK Conventions
14Wednesday, 28 April 2010
Check time
BrightTALK Conventions$.bt
14Wednesday, 28 April 2010
Check time
BrightTALK Conventions$.bt
filenames
14Wednesday, 28 April 2010
Check time
BrightTALK Conventions$.bt
filenames
bt.XXX.js
14Wednesday, 28 April 2010
Check time
BrightTALK Conventions$.bt
filenames
bt.XXX.js
jquery.XXX.js
14Wednesday, 28 April 2010
Check time
BrightTALK Conventions$.bt
filenames
bt.XXX.js
jquery.XXX.js
custom events
14Wednesday, 28 April 2010
Check time
BrightTALK Conventions$.bt
filenames
bt.XXX.js
jquery.XXX.js
custom events
plugins
14Wednesday, 28 April 2010
Check time
BrightTALK Conventions$.bt
filenames
bt.XXX.js
jquery.XXX.js
custom events
plugins
Reasons
14Wednesday, 28 April 2010
Check time
BrightTALK Conventions$.bt
filenames
bt.XXX.js
jquery.XXX.js
custom events
plugins
Reasons
reusable
14Wednesday, 28 April 2010
Check time
BrightTALK Conventions$.bt
filenames
bt.XXX.js
jquery.XXX.js
custom events
plugins
Reasons
reusable
maintable
14Wednesday, 28 April 2010
Check time
$.bt
15Wednesday, 28 April 2010
PS take over
$.btnamespace - globals are evil
15Wednesday, 28 April 2010
PS take over
$.btnamespace - globals are evil
static functions
15Wednesday, 28 April 2010
PS take over
$.btnamespace - globals are evil
static functions
public / private conventions
15Wednesday, 28 April 2010
PS take over
$.btnamespace - globals are evil
static functions
public / private conventions
$.bt.publicFunction
15Wednesday, 28 April 2010
PS take over
$.btnamespace - globals are evil
static functions
public / private conventions
$.bt.publicFunction
$.bt._privateFunction
15Wednesday, 28 April 2010
PS take over
$.btnamespace - globals are evil
static functions
public / private conventions
$.bt.publicFunction
$.bt._privateFunction
common way to extend bt object
15Wednesday, 28 April 2010
PS take over
$.btDemo
16Wednesday, 28 April 2010extension demo (PS)examples - discuss good and bad
good - doesn’t pollute global name spacebad - still global static functions just namespaced - leads to tight coupling
early prototype jquery.btuserbetter example bt.operations.js
.bind() & custom events
The .bind() method is the primary means of attaching behavior to a document. All JavaScript event types, such as focus, mouseover, and resize, are allowed for eventType.
With the help of .bind we can create our custom events.
17Wednesday, 28 April 2010
KS take over
Creating custom event
Creating custom event.$(document).bind('foo', function() {
alert('hello world');
})
Calling custom event
$(document).trigger("foo");
18Wednesday, 28 April 2010
Custom EventDemo
19Wednesday, 28 April 2010Custom event - login handler vs registration, date time locale conversion (KS DO)
$(document).bind("myCustomEvent", function(e, myName, myValue){ $(this).text(myName + ", hi there!"); $("span").stop().css("opacity", 1) .text("myName = " + myName) .fadeIn(30).fadeOut(1000); }); $("button").click(function () { $(document).trigger("myCustomEvent", [ "John" ]); });
/// BRIGHTTALK $(document).bind('localiseDate', function(e) { $.btTimeZone.updateDateItem(0, e.target); });
$('#csv-report-date', $('#report-XXX')).trigger("localiseDate", jQuery(this));
jQuery pluginsLearn how to write plugins
http://docs.jquery.com/Plugins/Authoring
Find plugins at
http://plugins.jquery.com/
Custom plugins on the platform
csvreport
Benefits vs static functions
20Wednesday, 28 April 2010
Plugin Demo
21Wednesday, 28 April 2010Check time (prob not time for this)
Walkthrough
CSVreport or jquery docs authoring page??