Javascript
... more than just jQuery
Background
Written for the web
...
> VBScript
Unique "features"
Single threaded
Event driven
Prototype-based - ie they're not Java-style objects
Functional
Dynamically typed
The javascript landscape
No one true Javascript implementation
> %20 of code on GitHub
Historically all in-browser
Server side
Scripting language
Some javascript
var elem = document.getElementById("username"),
form = document.getElementTagName("form")[0];
form.onsubmit = function() {
if(elem.value == "admin") {
redir.value = redir.getAttribute('data-admin_url');
}
}
Or, as jquery
var $elem = $("#username"),
$form = $("form").first();
$form.on('submit', function() {
if($elem.val() == "admin") {
$redir.val( $redir.attr('data-admin_url') );
}
}
The Language
Java inspired syntax
Many syntactical - or just general - quirks
First class functions - way fun
Design for working with DOM elements
Quirks
Dynamically typed
var $elem = $('#auction'),
h = elem.getAttribute('data-hours'), // 1
m = elem.getAttribute('data-minutes'), // 1
s = elem.getAttribute('data-seconds'), // 59
timeRemaining;
...
timeRemaining = (h * 3600) + (m * 60) + s
// timeRemaining == 366059 -- wait, what?
Dynamically typed
var $elem = $('#auction'),
h = elem.getAttribute('data-hours'), // 1
m = elem.getAttribute('data-minutes'), // 1
s = elem.getAttribute('data-seconds'), // 59
timeRemaining;
...
timeRemaining = (h * 3600) + (m * 60) + +s
// timeRemaining == 3719
Dynamically typed
$.cookie('showTPNav', false);
var showNav = $.cookie('showTPNav');
console.log(showNav); // false
if(showNav) {
console.log("Why did this happen!?!?!?");
}
// "false" != false
// "false" == true
Jquery quirks
var $pages = $(".page"); //No pages on this page
if($pages) {
console.log("Why did this happen!?!?!");
}
// $pages == true
// $pages.length == false
So....
if($pages.length) {
console.log("That's better"); }
Callbacks
var id = undefined;
$.getJSON("get/the/id", function(data) {
id = data.id;
});
console.log( $("#auction" + id ).html() ); //undefined
Random stuff
Javascript for animations
AKA, don't do it
(function fade() {
( s.opacity -= .1 ) < 0 ?
s.display="none"
: setTimeout(fade,40) //rerun this function
})();
$("#fadeMe").fade()
This is what jQuery.animate does...
BETTER
#fadeMe {
transition: opacity 1s linear;
}
document.getElementById('fadeMe').style.opacity = 0;
And that's it.
Or,
To be more fair:
var elem = document.getElementById('fadeMe');
elem.style.transition = "opacity 1s linear";
elem.style.opacity = 0;
Arrays
var array = [...],
i = array.length,
current;
while(i--) {
current = array[i];
...
}
Objects as maps
var obj = {a:"a",b:"b"};
for(var x in obj) {
if(obj.hasOwnProperty(x)) {
//Do something
}
}
Objects as maps
var obj = {a:"a",b:"b"},
keys = Object.keys(obj),
i = keys.length,
current;
while(i--) {
current = obj[ keys[i] ]
//Do something
}
Type coercion
0==false // true
0===false // false, because they are of a different type
1=="1" // true, auto type coercion
1==="1" // false, because they are of a different type
This
function Blah(){
this.name = "blah";
}
Blah.prototype.doSomethingWithX = function() {
console.log(this.name);
$(".page").each(function(){
console.log(this.name); //ERROR
});
}
var blah = new Blah();
This
function Blah(){
this.count = 0;
}
Blah.prototype.doSomethingWithX = function() {
var _this = this;
console.log(this.count);
$(".page").each(function(){
console.log(_this.count); //All good
});
}
var blah = new Blah();
THIS
Blah.prototype.doSomethingWithAClick = function() {
this.count += 1;
}
$("#blah").on('click', blah.doSomethingWithAClick);
//Nope
$("#blah").on('click',
function() {blah.doSomethingWithAClick.call(blah)}
)
Resources
Paul Irish - ten things I learn from the jQuery source
John Resig's learn app
140 medley
Javascript: The Good Parts
MDN
Javascript
By bruce_one
Javascript
- 40
