javascript!
DESCRIPTION
The pros and cons of JavaScript as a language, as well as a few libraries that make JavaScript and web development awesome.TRANSCRIPT
JavaScript!
JavaScript v1• Main features: handle browser events (load, mouse, etc.) and
navigate and manipulate the web page document• Primary original use was for image swapping on mouse events
and basic form validation• Browser rendering engines were too underpowered to do
anything cool with it• Inconsistent implementations between browsers• Netscape 3 (who made it) was a full version ahead of IE 3
JavaScript v1• Most “serious” developers hated it• No IDE• No debugging tools• Security flaws• Marketed as “JavaScript for dummies”• Mostly used by web designers copy-paste-ing code
Browser v4• Netscape and IE 4 introduce completely separate
implementations of Dynamic HTML / Document Object Model• Libraries were created to make Netscape code work in IE and
vice versa• Lowest common denominator was too low to accomplish
anything
Browser v4• Two side effects:• Netscape died to give way to Mozilla, but it was years before
Mozilla had a stable release, allowing IE to dominate market share
• Flash was really the only consistent platform to do anything cool
My Favourite JavaScript Quote
“Anyway I know only one programming language worse than C and that is JavaScript. [...] the net result is that the programming-vacuum filled itself with the most horrible kluge in the history of computing: JavaScript.”- Robert Cailliau
Enter AJAX• Most devs more or less ignored JavaScript as a useful language
until AJAX came along• AJAX suddenly enabled great user experiences on web pages
by loading data / html / scripts after the initial page load, not requiring a browser refresh between actions
• A number of cross-browser AJAX frameworks emerged that also enabled other cross-browser functionality• Prototype, jQuery, MooTools, Dojo, etc.
• Debugging tools created (firebug, dev console), better support in IDEs, browser rendering more powerful
• All in all, JavaScript is good now (or at least better)
JavaScript – Functions• Functions are objects• Have their own properties and methods (length, call, etc.)• Can be assigned to variables• Can be passed as arguments• Can be returned by other functions• Can be nested, maintaining scope (see: closure)
JavaScript – Objects• Prototype-based Objects• Every object has a “prototype” property that references another
object• Prototype is only used for retrieval
• If our object doesn’t have the requested property, it’ll check its prototype (and its prototype, and its prototype, and so on…)
• Prototypes are dynamic • editing a prototype means all of its objects are affected, regardless of
when they were created
JavaScript – Literal Notation• Easy inline way to declare objects and arrays• aka JSON• Object: { Property: Value }• Array: [1, 2, 3]• Object Array: [{Property: Value}, {Property: Value}]
JavaScript – Scope• Scope• Scope in JavaScript is controlled by Functions, not Blocks• Variables declared outside of a function / object (or without var)
are automatically Global• Can lead to terrible conflicts between scripts
• Context (this)• “this” refers to the owner of the function being called• Anonymous functions are owned by Global (window)• Event handlers are owned by the control firing the event
(sometimes)
JavaScript• Bad Stuff• Global Variables by default• Lack of language-defined modules / namespaces• No standard for distributing code across files• Pretty small core library• All numbers are binary floating points
• Makes bitwise operators REALLY inefficient• NaN
• typeof NaN === ‘number’ //true• NaN === NaN //false
• 0, NaN, ‘’, false, null, and undefined all evaluate to false• == behaves differently from ===• No real way to “protect” source code / IP• Still some browser-specific inconsistencies
• *cough* Internet Explorer *cough*
jQuery• DOM selection using selector syntax• DOM traversal and modification• Event binding and delegation• CSS manipulation• AJAX• Extensibility• Cross-browser support
jQuery - Selectors
Pre-jQuery
var classElements = new Array();function getElementsByClassName(className, element) { if(element.className == className) { classElements.push(element); } for(var node in element.childNodes) { getElementsByClassName( className, node); }}getElementsByClassName(“sadPanda”, document.body);
jQuery
var classElements = $(“.happyCat”);
jQuery selectors are AWESOME.
jQuery - Selectors:animated
[alt=“backgroundImage”]
:button:checked
table > tr
.className:contains(“Hello”)
:even
:first-child:gt(5)
#playlistTable
:last
td.name + td.address
:parent
:visible
“#playlistTable td.name:odd > img[alt|=“chad”]:visible”
jQuery - Manipulation• Allows reading, editing, insertion, deletion, and replication of
elements and attributes in the document
• $(‘#playlistTable’).append(“<div>Hello</div>”)
• $(‘.userRow’).addClass(‘selected’);
• $(‘#accountTable tr’).detach();• See also: $(‘#accountTable’).empty();
• $(‘#errorMessage’).html(“<b>I didn’t say Simon Says</b>”);
• $(‘#errorMessage’).css(‘color’, ‘red’);
• $(‘#errorMessage’).css(‘color’); //returns ‘red’
• $(‘input:text’).val(“I HAVE TAKEN OVER YOUR FORM”);
jQuery - Events• Register functions to handle when the browser (or other code)
triggers an event• $(‘input:button’).bind(‘click’, function() { alert(“CLICK.”); });• $(‘div.hoverable’).delegate(‘mouseover’, handleHoverEvent);• $(document).ready(pageLoad);
jQuery - AJAX• Make requests to the server for data / HTML / JavaScript
without refreshing the page• get(“/products”, onProductsLoaded);• $(‘#widgetDialog’).load(“/widgets/editProduct”);• var formData = $(‘form’).serialize(); post(“/saveProduct”, formdata, onProductSaved);
jQuery - Extensibility• Hundreds of jQuery plugins
jQuery Templates• Sends a template of how data should be represented with the
page, then sends the data to fill that template with
Backbone.js• Client-side JavaScript MVC framework• Models with custom events• Collections with enumerable functions• Views with declarative event handling• Integrates with RESTful JSON web services
Backbone - Collections• Represents a group of models• Maps to a REST endpoint• /products
• Collection.fetch – calls REST endpoint, parses result, creates model objects, adds to collection
• Fires “refresh”, “add”, “remove”, “change” events• Provides enumeration functions over models (foreach, find,
map, max, min, sort, indexof, etc)
Backbone - Models• Represents the data from the server as a property bag• Model.get(“property”), Model.set({Property: “value”})
• Provides methods to interact with REST service• Fetch, save, destroy
• Provides validation• Fires events (“changed”)
Backbone - Views• Represents the view of a model or a control on a page• More of a ViewModel than a true View
• Tied to a root element in the page (View.el)• Responds to events on its model or collection• this.model.bind(‘change’, this.render);
• Declarative Events{ “click .icon”: “open” }
• Use in conjunction with jQuery• this.$(‘.selector’) === $(‘.selector’, this.el)