Front-end Workshop

Transcript

2. JavaScript • First class functions • Object Oriented • Runs everywhere
3. 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
4. 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
5. 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
6. When to execute? <body onload="begin()"> window.onload = function () {} $(document).ready(function () {/* do things */}); $(function () { /* shorthand */ });
7. CSS Selectors #ids .classes elements [attrs] combinators ( > ~ + )
8. Classes • $(el).addClass('class-name') • $(el).removeClass('class-name') • $(el).hasClass('class-name') • $(el).toggleClass('class-name')
9. Styles Set some CSS: $(el).css('property', 'value') Get some CSS value: $(el).css('property') Set more CSS: $(el).css({ 'property1': 'value1', 'property2': 'value2' });
10. 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)
11. Removal $(el).remove() Replacement $(el).html('<div>LOL</div>') $(el).text('<div>LOL</div>')
12. HTML Attributes $(el).attr('name', 'value') $(el).attr('name') $(el).prop('name', 'value') $(el).prop('name')
13. Events $(el).on('event-type', callback) $(el).off('event-type', callback)
14. 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 */ });
15. JSONP <script> function cb(data) { // do something with data } </script> <script src="http://some-api/?callback=cb"></script>
16. 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 */ });