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
jQuery selectors are AWESOME.

Pre-jQuery jQuery

var classElements = new Array(); var classElements = $(“.happyCat”);
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 - Selectors
:last
:animated
:visible *alt=“backgroundImage”+
:even
#playlistTable
:checked
:button td.name + td.address

:contains(“Hello”)
:parent .className

:gt(5)
:first-child table > tr

“#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)

JavaScript!

More Related Content

What's hot (19)

Viewers also liked (6)

Similar to JavaScript! (20)

More from RTigger (14)

Recently uploaded (20)

JavaScript!