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
83
CoffeeScript and Less
danshearmur
1
120
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Site-Speed That Sticks
csswizardry
10
690
Statistics for Hackers
jakevdp
799
220k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Adopting Sorbet at Scale
ufuk
77
9.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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 */ });