2. What are we talking about
Wednesday, 28 April 2010 2
3. What are we talking about
client side scripting implemented as part of a
browser to provide:
Wednesday, 28 April 2010 2
4. What are we talking about
client side scripting implemented as part of a
browser to provide:
enhanced UI
Wednesday, 28 April 2010 2
5. What are we talking about
client side scripting implemented as part of a
browser to provide:
enhanced UI
dynamic websites
Wednesday, 28 April 2010 2
6. Why should I care?
“JavaScript sucks”
Wednesday, 28 April 2010 3
7. Why should I care?
“JavaScript sucks”
it’s different - prototypal inheritance
Wednesday, 28 April 2010 3
8. Why should I care?
“JavaScript sucks”
it’s different - prototypal inheritance
DOM is key BUT “sucks”
Wednesday, 28 April 2010 3
9. Why should I care?
“JavaScript sucks”
it’s different - prototypal inheritance
DOM is key BUT “sucks”
Element selection sucks
Wednesday, 28 April 2010 3
10. Why should I care?
“JavaScript sucks”
it’s different - prototypal inheritance
DOM is key BUT “sucks”
Element selection sucks
x-Browser DOM sucks
Wednesday, 28 April 2010 3
11. Demo
Wednesday, 28 April 2010 4
DOM selection and Cross Browser DOM selection code demo
var 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');
12. 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”
Wednesday, 28 April 2010 5
17. CSS3 Compliant???
We really mean “selectors” as in DOM
selection
Wednesday, 28 April 2010 7
18. CSS3 Compliant???
We really mean “selectors” as in DOM
selection
Starts with CSS2
Wednesday, 28 April 2010 7
19. CSS3 Compliant???
We really mean “selectors” as in DOM
selection
Starts with CSS2
Id, Class, Type, Universal, Grouping,
Descendant, Child, Adjacent Sibling,
Attribute, etc.
Wednesday, 28 April 2010 7
20. CSS Selector
Demo
Id, Class, Type, Universal, Grouping, Descendant,
Child, Adjacent Sibling, Attribute, etc.
Wednesday, 28 April 2010 8
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 }
21. 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
Wednesday, 28 April 2010 9
22. jQuery Core Concepts
$()
Get then Act
Chainability
$("p.neat").addClass("ohmy").show("slow");
Wednesday, 28 April 2010 10
KS take over here
23. $() = 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.
Wednesday, 28 April 2010 11
24. Chainability
Get then Act
Chainability
jQuery has chainablity of commends you
can link one commend to an other
$("p.neat").addClass("ohmy").show("slow");
$('#boo').filter(':funny').addClass('funny').css('color',
'red').show();
Wednesday, 28 April 2010 12
25. Hello world
Demo
Wednesday, 28 April 2010 13
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?
37. $.bt
namespace - globals are evil
Wednesday, 28 April 2010 15
PS take over
38. $.bt
namespace - globals are evil
static functions
Wednesday, 28 April 2010 15
PS take over
39. $.bt
namespace - globals are evil
static functions
public / private conventions
Wednesday, 28 April 2010 15
PS take over
40. $.bt
namespace - globals are evil
static functions
public / private conventions
$.bt.publicFunction
Wednesday, 28 April 2010 15
PS take over
41. $.bt
namespace - globals are evil
static functions
public / private conventions
$.bt.publicFunction
$.bt._privateFunction
Wednesday, 28 April 2010 15
PS take over
42. $.bt
namespace - globals are evil
static functions
public / private conventions
$.bt.publicFunction
$.bt._privateFunction
common way to extend bt object
Wednesday, 28 April 2010 15
PS take over
43. $.bt
Demo
Wednesday, 28 April 2010 16
extension demo (PS)
examples -
discuss good and bad
good - doesn’t pollute global name space
bad
- still global static functions just namespaced
- leads to tight coupling
early prototype jquery.btuser
better example bt.operations.js
44. .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.
Wednesday, 28 April 2010 17
KS take over
47. jQuery plugins
Learn 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
Wednesday, 28 April 2010 20
48. Plugin
Demo
Wednesday, 28 April 2010 21
Check time (prob not time for this)
Walkthrough
CSVreport or jquery docs authoring page??