startup institute intro to jquery (july 28, 2014)
Post on 15-Jan-2015
212 Views
Preview:
DESCRIPTION
TRANSCRIPT
Intro to jQueryRafael GonzaqueStartup Institute
July 28, 2014
Hi, I’m Rafael
• Software Engineer at Maker’s Row
• We connect brands and designers with manufacturers in the US
About Maker’s Row• Launched in 2012 - http://makersrow.com
• 45K brands and 5K factories
• We provide 3 main abilities:
1. Projects
2. Search
3. Messaging
• Like so many other sites, we use jQuery to make the development of our site’s interactivity easier
• Some other examples that use jQuery:
1. Airbnb
2. Foursquare
3. Tumblr (Ex: stives.tumblr.com)
• 78.5% of the top 10K sites (http://trends.builtwith.com/javascript/jQuery)
Why are so many people using jQuery?
• CSS selectors
• A common interface to manipulate the DOM – the jQuery object
• A plugin system
The DOM? Huh?• DOM = Document Object Model
• A programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. (https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
Accessing the DOM
• Core methods:
• document.getElementById
• element.getElementsByTagName
• document.createElement
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
Example
<html><body>
<h1 id=“title”>My Title</h1><div class=“content”>
<p>My subheading</p><ul id=“task-list” class=“list”>
<li class=“item”><span class=“item-title”>Pickup
laundry</span><span class=“item-desc”>At the corner
laundromat</span></li>
</ul><a id=“ok-btn” class=“btn”>OK</a>
</div></body>
</html>
Let’s make this interactive
var el = document.getElementById(‘ok-btn’);el.addEventListener(‘click’, function () {
// do something}, false);
Uh no!
X-Browser Issues• Until IE 11, IE didn’t implement
addEventListener; it had it’s own – attachEvent
• Solution:var el = document.getElementById(‘ok-btn’);if (IE < 11) {
el.attachEvent …} else {
el.addEventListener …}
• A bunch of x-browser issues between all the different vendors
Enter jQuery
• Written by John Resig in 2006
• Provides DOM manipulation via its selector engine Sizzle (http://sizzlejs.com/)
Same Example
<html><body>
<h1 id=“title”>My Title</h1><div class=“content”>
<p>My subheading</p><ul id=“task-list” class=“list”>
<li class=“item”><span class=“item-title”>Pickup
laundry</span><span class=“item-desc”>At the corner
laundromat</span></li>
</ul><a id=“ok-btn” class=“btn”>OK</a>
</div></body>
</html>
$, FTW!• Change the color of the title
$(‘#title’).css(‘color’, ‘red’);
• Bind an event
$(‘#ok-btn’).on(‘click’, function () {
// do something
});
Notice there’s no need for checking IE! jQuery does it internally!
More Examples• Add a new item to a list
$(‘#task-list’).append(‘<li class=“item”><span class=“item-title”>Get Milk</span><span class=“item-desc”>1% milkfat</span></li>’);
• Remove an item from the DOM
$(‘#task-list’).find(‘.item:last-child’).remove();
• Add a class to an element
$(‘.item’).eq(0).addClass(‘urgent’);
Ajax before jQueryvar xhReq;
// Less than IE 7 supportif (window.ActiveXObject) {
xhReq = new ActiveXObject(‘Msxml2.XMLHTTP’);} else {
xhReq = new XmlHttpRequest();}
// Make an async requestxhReq.open(‘GET’, ‘my-app-endpoint?id=2’, true);xhReq.onreadystatechange = function() {
// We only care about complete requests (state = 4)if (xhReq.readyState != 4) { return; }
if (xhReq.status != 200) {// Handle error
} else {// Handle success via xhReq.responseText
}};xhReq.send(null);
• No needing to deal with XMLHttpRequest for Ajax - https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
• jQuery does ajax!$.ajax({
url: ‘/my-app-endpoint’,type: ‘GET’,data: { id: 2 },success: function (response) {
// Handle the response},error: function () {
// Handle the error}
});
• Full Documentation: http://api.jquery.com/
Ajax with jQuery
jQuery Best Practices
• Prefix all variables that reference a jQuery object with a “$”var $taskList = $(‘#task-list’);
• A jQuery object is an array; check the length to see if an element existvar $taskList = $(‘#task-list),
$someElement = $(‘#parent .non-existing-selector’);
console.log($taskList.length); // 1console.log($someElement.length); // 0
jQuery Best Practices• jQuery objects are chain-able
$(‘#title’).addClass(‘crucial’).text(‘Pay Attention’).on(‘click’, function () { /* Do something*/ });
• Use event delegation to bind events to multiple instances of the same html markup$(‘#task-list’).on(‘click’, ‘.item’, function () {
// Do something when a .item element is clicked});
• Always prefer CSS over Javascript; CSS is much faster
Other DOM Libraries• Prototype.js - extends the native DOM and
provides id-based selection via $ and CSS selectors via $$ (http://prototypejs.org/)
• YUI - https://yuilibrary.com/
• Dojo - http://dojotoolkit.org/
• Zepto - http://zeptojs.com/ - just like jQuery, but smaller. (No IE support)
• MooTools - http://mootools.net/
Wrap-Up• jQuery provides x-browser functionality for,
A. DOM manipulation
B. Ajax
• jQuery makes web development easier
• Always, prefer CSS solutions over Javascript with jQuery
• jQuery provides a common interface that make plugins possible. See:
1. http://plugins.jquery.com/
2. http://www.unheap.com/
3. http://learn.jquery.com/plugins/basic-plugin-creation/
Rafael Gonzaque - @iamrgon
Thanks!
top related