Front-end Workshop

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 */ });

Front-end Workshop

Front-end Workshop

Daniel Shearmur

More Decks by Daniel Shearmur

Featured

Transcript

JavaScript • First class functions • Object Oriented • Runs

How we strive to write JavaScript • Script tags at

jQuery or $ Can take most things as a first

Chaining $('#some-element').addClass('is-cool') .append('<span class="icon-tool" />') .css({ color: 'black', fontSize: '20px'

When to execute? <body onload="begin()"> window.onload = function () {}

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:

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:

JSONP <script> function cb(data) { // do something with data

JSONP with jQuery var promise = $.getJSON('https://gh-proxy.eu01.aws.af.cm/' + 'orgs/semantico/members?callback=?'); promise.success(function