Intro to jQuery @ Startup Institute

intro to jQuery
Rafael Gonzaque
Startup Institute NY
December 4, 2015

hi there!
Rafael Gonzaque
Software Engineer @
Maple
@iamrgon
I like lobster rolls and
running.

Delicious meals made by some of the best chefs in
the city, delivered in 30 minutes.
Thoughtfully sourced, balanced meals that rotate
daily all wrapped in a reliable experience and at an
accessible price ($12 for lunch and $15 for dinner -
tax, tip and delivery included).

delivered in 30 minutes or less

currently serving all of Manhattan below
14th st
ios, android, and all modern browsers

• handling events
• submitting and fetching data
• rendering content
• serving web pages
• query databases
to do things like …

today,we’ll focus
on the browser

accessing
the DOM to
you’ll spend most of your time
bind events
read form values
modify html
render content

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 deﬁnes a way that the
structure can be accessed from programs so that they
can change the document structure, style and content.
learn more: https://developer.mozilla.org/en-US/docs/Web/API/
Document_Object_Model

// document is a global variable
var el = document.getElementById(“some id attribute”);
var elems = document.getElementsByTagName(“P”);
var myNewEl = document.createElement(“DIV”);
three core methods
learn more: https://developer.mozilla.org/en-US/docs/Web/API/
Document_Object_Model/Introduction

example
we’re web developers at the hot, new todo list
startup, ToDo-odles.
let’s write the html for viewing a todo list.

<html>
<body>
<h1 id=“title”>ToDo-odles – To-do lists for days!</h1>
<div class=“content”>
<p>Rafael’s Monday To-Dos</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=“new-btn” href=“#” class=“btn”>New</a>
</div>
</body>
</html>
html

// Find the New button
var addNewBtn = document.getElementById(“new-btn”);
// Listen to click events on the New button
addNewBtn.addEventListener(“click”, function () {
alert(“Clicked the New button”);
// do something else
});
let’s make this interactive

x-browser issues
Until IE 9, IE didn’t implement addEventListener; it
had its own – attachEvent
Solution:
function onClickHandler() {
}
var addNewBtn = document.getElementById(“new-btn”);
if (IE < 9 /* Pseudo-code for < IE 9 check */) {
addNewBtn.attachEvent(“click”, onClickHandler);
} else {
addNewBtn.addEventListener(“click”, onClickHandler);
}

other x-browser issues across vendors
• varying support for HTML5 features
• missing api methods like,
• distinct rendering and positioning content
• two different ways to make ajax calls
Array.prototype.forEach

about jQuery
• makes web development easier
• written by John Resig in 2006
• 65.5% of Quantcast Top 10k sites
learn more: http://trends.builtwith.com/javascript/jQuery

some sites that use jQuery
airbnb
foursquare
tumblr
genius

why use jQuery?
• a common interface to manipulate the DOM
– the jQuery object
• css selectors for DOM queries
• plugin system
learn more: Sizzle, jQuery’s selector engine – http://sizzlejs.com/

$ ftw!
// Find all paragraph elements
var $pTags = $(“p”);
// Find all elements with class attribute “titles”
var $titles = $(“.titles”);
// Find element with id attribute “my-div”
var $myDiv = $(“#my-div”);
if ($ === jQuery) {
alert(“$ and jQuery are global and equal”);
}

html
<html>
<body>
<h1 id=“title”>ToDo-odles – To-do lists for days!</h1>
<div class=“content”>
<p>Rafael’s Monday To-Dos</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=“new-btn” href=“#” class=“btn”>New</a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</body>
</html>

interactivity with jQuery
// Change the color of the title
$(“#title”).css(“font-size”, “36pt”);
// Listen to click events on the New button
$(“#new-btn”).on(“click”, function() {
$(this).addClass(“inactive”);
}
notice there’s no need to check IE version; jQuery
does it internally!

more examples
// Append a new item to the list
var html = ‘<li class=“item”><span class=“item-title”>’ +
‘Get Milk</span><span class=“item-desc”>1% milkfat</span></li>’;
$(‘#task-list’).append(html);
// Remove last item in the list from the DOM
$(“#task-list”).find(“.item:last-child”).remove();
// Add class, “urgent” to the first element with class “item”
$(“.item”).eq(0).addClass(“urgent”);

submitting and
fetching data with
ajax

what is ajax?
ajax = asynchronous javascript and xml
With Ajax, web applications can send data to and
retrieve from a server asynchronously (in the
background) without interfering with the display and
behavior of the existing page.
learn more: https://en.wikipedia.org/wiki/Ajax_(programming)

why ajax?
• dynamic web pages – partial updates to page
sections without needing to reload the page
• responsive web experiences – saving and fetching
information appears to happen instantly

how?
var xhReq;
// Less than IE 7 support
if (window.ActiveXObject) {
xhReq = new ActiveXObject(“Msxml2.XMLHTTP”);
} else {
xhReq = new XmlHttpRequest();
}
// Make an async request
xhReq.open(“GET”, “my-app-endpoint?id=2”);
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);

ajax with jQuery
learn more: full jQuery documentation – http://api.jquery.com/
// No need to deal with XMLHttpRequest to do AJAX
// jQuery does AJAX!
$.ajax({
url: “/my-app-endpoint”,
type: “GET”,
data: { id: 2 },
success: function (response) {
// Handle the response
},
error: function () {
// Handle the error
}
});

best practices
// Prefix all variables that reference a jQuery object with
a “$”
var $taskList = $(“#task-list”);
// A jQuery object is array-like; check the length to see
if an element exist
var $someElement = $(“#parent .non-existing-selector”);
console.log($taskList.length); // 1
console.log($someElement.length); // 0

more 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

zepto.js
learn more: http://zeptojs.com/
• smaller in size than jQuery
• the same api (methods) as jQuery
• no support for IE 9 and below

prototype.js
learn more: http://prototypejs.org/
• really stable – 1.7 release since Nov 2010
• extends native DOM – adds methods to
Element
• id DOM search like
• css DOM search like
Element
$(“id-attribute”)
$$(“p.title”)

some others …
• YUI – https://yuilibrary.com/
• Dojo – http://dojotoolkit.org/
• MooTools – http://mootools.net/

now trending:
component-based
single page applications

single page apps
Single-Page Applications (SPAs) are Web apps that
load a single HTML page and dynamically update
that page as the user interacts with the app.
SPAs use AJAX and HTML5 to create ﬂuid and
responsive Web apps, without constant page
reloads. However, this means much of the work
happens on the client side, in JavaScript.
learn more: https://en.wikipedia.org/wiki/Single-page_application

component-based development
Component-based development is a software
design pattern where view logic (how
interactions are controlled) are fully
encapsulated in a component or widget.
The strategy leads to better maintainability
and greater code re-use.

component-based SPA frameworks
Flight
(Twitter)
React
(Facebook)
Angular
(Google)
Open-Source
(Community!)

jQuery is completely optional
with the exception of Flight (which uses
jQuery), the SPA frameworks don’t require you
to use any additional libraries.
on the component level, you always have
access to the DOM nodes so, you rarely need
to traverse the DOM tree from the root node.

react example
var Avatar = React.createClass({
render: function() {
return (
<div>
<ProfilePic username={this.props.username} />
</div>
);
}
});
var ProfilePic = React.createClass({
render: function() {
return (
<img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
);
}
});
React.render(
<Avatar username=“rafael.gonzaque" />,
document.getElementById('app')
);

jQuery summary
• provides x-browser functionality for DOM manipulation and ajax
• makes web development easier
• always, prefer css solutions over javascript with jQuery
• exposes 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/

thanks!
@iamrgon on Twitter for questions/comments

Intro to jQuery @ Startup Institute

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Intro to jQuery @ Startup Institute

Similar to Intro to jQuery @ Startup Institute (20)

Recently uploaded

Recently uploaded (20)

Intro to jQuery @ Startup Institute