Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Front-end Workshop
Search
Daniel Shearmur
April 22, 2013
0
130
Front-end Workshop
Daniel Shearmur
April 22, 2013
Tweet
Share
More Decks by Daniel Shearmur
See All by Daniel Shearmur
SIPP2 Front-end Optimisations
danshearmur
0
84
CoffeeScript and Less
danshearmur
1
120
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
The Language of Interfaces
destraynor
162
25k
A designer walks into a library…
pauljervisheath
209
24k
Context Engineering - Making Every Token Count
addyosmani
5
230
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
How GitHub (no longer) Works
holman
315
140k
Designing for Performance
lara
610
69k
Statistics for Hackers
jakevdp
799
220k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Transcript
None
JavaScript • First class functions • Object Oriented • Runs
everywhere
How we strive to write JavaScript • Script tags at
the end of the page • Majority of code in external files • Only a small amount of global variables • Progressive enhancement
jQuery or $ Can take most things as a first
argument: • "<h1>Some title</h1>" • "#some .selector" • An element • functions Returns a jQuery set • Array-like object (normally dom elements) • Has all the jQuery methods available
Chaining $('#some-element').addClass('is-cool') .append('<span class="icon-tool" />') .css({ color: 'black', fontSize: '20px'
}); Get: $(el).thing('name') Set: $(el).thing('name', 'value') Getters and setters
When to execute? <body onload="begin()"> window.onload = function () {}
$(document).ready(function () {/* do things */}); $(function () { /* shorthand */ });
CSS Selectors #ids .classes elements [attrs] combinators ( > ~
+ )
Classes • $(el).addClass('class-name') • $(el).removeClass('class-name') • $(el).hasClass('class-name') • $(el).toggleClass('class-name')
Styles Set some CSS: $(el).css('property', 'value') Get some CSS value:
$(el).css('property') Set more CSS: $(el).css({ 'property1': 'value1', 'property2': 'value2' });
Insertion $(el).append('<blink>flashing lights</blink>') $(el).prepend('<marquee>weeeee! </marquee>') $(el).after('<b>after</b>') $(el).before('<i>before</i>') $('<i>before</i>').insertBefore(el) $('<b>after</b>').insertAfter(el)
Removal $(el).remove() Replacement $(el).html('<div>LOL</div>') $(el).text('<div>LOL</div>')
HTML Attributes $(el).attr('name', 'value') $(el).attr('name') $(el).prop('name', 'value') $(el).prop('name')
Events $(el).on('event-type', callback) $(el).off('event-type', callback)
AJAX var promise = $.ajax({ type: 'post', url: '/some-path', data:
{ dan: 'is cool' } }); promise.success(function (data) { /* do something */ }); promise.error(function (error) { /* report error */ });
JSONP <script> function cb(data) { // do something with data
} </script> <script src="http://some-api/?callback=cb"></script>
JSONP with jQuery var promise = $.getJSON('https://gh-proxy.eu01.aws.af.cm/' + 'orgs/semantico/members?callback=?'); promise.success(function
(data) { /* do something */ }); promise.error(function (error) { /* report error */ });