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
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Music & Morning Musume
bryan
46
6.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
How to train your dragon (web standard)
notwaldorf
96
6.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Designing for humans not robots
tammielis
253
25k
Site-Speed That Sticks
csswizardry
10
700
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
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 */ });