JavaScript Primer

JavaScript
A Primer In Far Too Many Parts

Mocha
April 1995 LiveScript
JavaScript

Brendan Eich
CTO, Mozilla Corp.

JScript

JavaScript
ECMAScript

ActionScript

Data Types
• number
• string
• boolean
• object
• null
• NaN
• undeﬁned

Strings

• Are Objects, have methods

Strings

"Foo" + "Bar"; //"FooBar"

var str = "Lorem Ipsum Dolor Sit Amet";

str.toLowerCase(); //"lorem ipsum dolor sit amet"
str.toUpperCase(); //"LOREM IPSUM DOLOR SIT AMET"
str.split(" "); //["Lorem", "Ispum", "Dolor", "Sit", "Amet"]
str.substring(6,9); //"Ips"

new String("Lorem Ipsum Dolor Sit Amet") == str; //true

String to Number

parseInt("56"); //56
parseInt("42.567"); //42
parseInt("asdf"); //NaN
parseInt("5a6"); //5
parseFloat("24.68"); //24.68
parseFloat("asdf"); //NaN
parseFloat("24a"); //24

Objects

• “Dictionary” / “Associative Array”
• Key: Value or 'Key': Value
• Without ': A-Z0-9 only
• Does not keep intrinsic ordering
• Accessed keys using . (dot) or [] notation

Objects

var object = {
foo: 'value',
'complex key': 0,
bar: {
nested: true
}
};

object.foo; //'value'
object.['complex key']; //0
object.bar.nested; //true
object.bar['nested']; //true
object['bar'].nested; //true
object['bar']['nested']; //true

in or hasOwnProperty()

• Tough call:
• .hasOwnProperty() more consistent
• in checks inherited properties
• Used in for loop

in

var test = {
foo: 'value',
bar: 'value',
baz: 'value'
}

for (var key in test) {
console.log(key + ": " + test[key]);
}

//PRINTS:
//foo: value
//bar: value
//baz: value

Arrays

• Special object
• Numerical keys only
• Keeps intrinsic ordering
• Short ([]) and Long (new Array()) syntax

Arrays

var arrayShort = [
'one',
'two'
];
arrayShort[2] = 'three';

var arrayLong = new Array();
arrayLong[0] = 'one';
arrayLong[1] = 'two';
arrayLong[2] = 'three';

//arrayShort: ["one", "two", "three"]
//arrayLong: ["one", "two", "three"]

Arrays
var arr = [1,2,3,4,6];

arr.indexOf(2); //1
arr.join(':'); //"1:2:3:4:6"
arr.pop(); //6
//[1,2,3,4]
arr.push(7); //5
//[1,2,3,4,7]
arr.reverse(); //[7,4,3,2,1]
arr.shift(); //1
//[2,3,4,7]
arr.unshift(8); //5
//[8,2,3,4,7]
arr.slice(1); //[2,3,4,7]
arr.slice(1,3); //[2,3]
arr.slice(-3); //[3,4,7]
arr.slice(-3,-1); //[3,4]

Arrays

var arr1 = [1,2,3];
var arr2 = [3,4,5];

arr1.concat(arr2); //[1,2,3,3,4,5]

Functions

• Are Objects as well
• “Elevated”
• You can use a named function before it is
deﬁned in code

• Function deﬁnitions are elevated to the top

Functions

function Foo() {
//...
}

Foo(); //valid
Bar(); //valid

function Bar() {
//...
}

Functions

function Foo() {

}

Foo.bar = "value";

'bar' in Foo; //true
Foo.bar == "value"; //true

Function Arguments

• No way to assign default arguments
• But arguments are not required
• If an argument is not speciﬁed, it is set to
undefined

arguments

• A special variable found inside a function
• A not-quite array object containing all the
function arguments

arguments

function sum() {
var x = 0;
for (var i = 0; i < arguments.length; ++i) {
x += arguments[i];
}
return x;
}
sum(1, 2, 3); //6

typeof

• Determines a variables type
• Returns a string

typeof

typeof true; //"boolean"
typeof 12; //"number"
typeof "string"; //"string"
typeof []; //"object"
typeof {}; //"object"
typeof NaN; //"number"
typeof null; //"object"
typeof undefined; //"undefined"

function Foo() {}
typeof Foo; //"function"

Comparison
• a == b / a != b
• A and B compared by value alone
• 1 == “1” evaluates to true
• a === b / a !== b
• A and B compared by value and by type
• 1 === “1” evaluates to false

window, document
• Built in, global, Objects
• window
• Provides access to the browser window
• The “global” object: foo === window.foo
• Things like window.location.href, etc
• document
• Provides access to the current DOM

Global & Local

• Functions are the only way to create new
scopes

• Variables deﬁned with var are local
• Variables deﬁned without var are global
• Global variables are members of window

Global & Local

var outerScope = 10;
var outerScope2 = 10;

function Foo() {
var outerScope = 20;
var innerScope = 20;
globalVariable = 30;
outerScope2 = 40;
}

Foo();

alert(outerScope); //10
alert(outerScope2); //40
alert(innerScope); //error
alert(globalVariable); //30

Lexical Scoping
function Foo() { function Foo() {
var baz = 1; var baz = 1;
return Bar();
} function Bar() {
return baz;
function Bar() { }
return baz;
} return Bar();
}
Foo(); //baz is not defined
Foo(); //1

Closures

• First-Class
• Can assign functions to variables, pass as
arguments and return as values

• Anonymous
• Not required to have a name
• A function that “closes over” variables deﬁned
outside itself

Closures

function Foo() {
var count = 0;

return function() {
count = count + 1;
return count;
};
}

var bar = Foo();

bar(); //1
bar(); //2
bar(); //3

Closures

function createAdder(amount) {
return function(input) {
return input + amount;
};
}

var add2 = createAdder(2);

add2(2); //4
add2(8); //10

var add3 = createAdder(3);

add3(3); //6
add3(7); //10

Module Pattern

(function(exports, undefined){
//ALL your code here

var localVar = "bar"
globalVar = "baz";

exports.foo = "bat";
})(window);

alert(localVar); //error
alert(globalVar); //"baz"
alert(window.globalVar); //"baz"
alert(foo); //"bat"
alert(window.foo); //"bat"

BEWARE: export (singular) is a reserved word in Safari

this

• Trips everyone up
• Special variable used within a function
• Refers to the “contextual object”
• Changes based on where a function executes

this

var Foo = {
bar: "bar",
baz: function() {
return this.bar;
}
};

Foo.baz(); //"bar"

Foo.bar = "bat";
Foo.baz(); //"bat"

var baz = Foo.baz;
baz(); //undefined

this

var Foo = {
bar: "bar",
baz: function() {
return this.bar;
}
};

Foo.bat = function() {
return this.bar + "bat";
};

Foo.bat(); //"barbat"

call & apply

• Methods in the function prototype
• Change the context in which a function
executes!

call & apply

var Foo = {
bar: "bar",
baz = function(param1, param2) {
return this.bar + param1 + param2;
}
};

var Foo2 = {
bar: "123"
};

Foo.baz("baz", "bat"); //"barbazbat"

Foo.baz.apply(Foo2, "baz", "bat"); //"123bazbat"
Foo.baz.call(Foo2, ["baz", "bat"]); //"123bazbat"

Exceptions

• All errors are thrown
• Classic try...catch...ﬁnally blocks

Exceptions

try {
funcDoesNotExist();
} catch (e) {
alert(e); //ReferenceError: funcDoesNotExist is not defined
} finally {
//Always Executes
}

Exceptions
function Foo() {
throw new Error("Message");
}

function Bar() {
throw "Message";
}

try {
Foo();
} catch (e) {
e.message == "Message"; //true
}

try {
Bar();
} catch (e) {
e == "Message"; //true
}

OOP... Kinda...

• Almost no real diﬀerence between a dictionary
and an object

• Named Functions double as object constructors
• Function objects contain a prototype
dictionary that is copied to instance when
using new

OOP... Kinda...

Foo
function Foo() {
//The "Constructor"
}
‣ bar
Foo.bar = function() {
//A "Static" Function
‣ prototype
}
‣ baz
Foo.prototype.baz = function() { ‣ constructor
//A "Method"
}; ‣ __proto__

new

instance
var instance = new Foo();

instance.baz(); //works
instance.bar(); //error ‣ __proto__

Foo.bar(); //works
‣ baz
Foo.baz(); //error
‣ constructor
Foo.prototype.baz(); //works
‣ __proto__
‣ ...

new

instance
instance.bat = function() {
/* ... */
}
‣ bat
instance.bat(); //works
‣ __proto__
Foo.bat(); //error
‣ baz
Foo.prototype.bat(); //error
‣ constructor
‣ __proto__
‣ ...

Overriding Prototype
function Foo(baz) {
this.baz = baz;
}

Foo.prototype.bar = function() {
return this.baz;
};

var foo1 = new Foo(1);
var foo2 = new Foo(2);

foo1.bar(); //1
foo2.bar(); //2

Foo.prototype.bar = function() {
return this.baz * 2;
};

foo1.bar(); //2
foo2.bar(); //4

Asynchronous

• setTimeout, setInterval allow you to have code
executing asynchronously while other code
executes

setInterval

var id = setInterval(function() {
//Code to execute every 1000 milliseconds
}, 1000);

//clearInterval(id); to stop

setTimeout

var id = setTimeout(function() {
//Code to execute after 1000 milliseconds have passed
}, 1000);

//clearTimeout(id); to cancel

Nifty Trick

setTimeout(function() {
//Code to run in parallel
//while the code after is
//executed.
}, 1);

//Code here will execute immediately
//without waiting on the above

DOM

• Document Object Model
• API to interact with the HTML/XHTML
document

DOM

var paragraph = document.createElement('p');
var content = document.createTextNode("Lorem Ipsum");

paragraph.appendChild(content);
paragraph.classList.add('my-class');

document.getElementsByTagName('body')[0].appendChild(paragraph);

2001 JSON

Douglas Crockford
Awesome

JSON

• JavaScript Object Notation
• Serialization format that is basically JavaScript
code minus comments

• Can be eval()’ed
• Minimal overhead compared to XML
• No advanced parsers needed

JSON
{"menu": { <menu id="file" value="File">
"id": "file", <popup>
"value": "File", <menuitem value="New"
"popup": { onclick="CreateNewDoc()" />
"menuitem": [ <menuitem value="Open"
{"value": "New", onclick="OpenDoc()" />
"onclick": "CreateNewDoc()"}, <menuitem value="Close"
{"value": "Open", onclick="CloseDoc()" />
"onclick": "OpenDoc()"}, </popup>
{"value": "Close", </menu>
"onclick": "CloseDoc()"}
]
}
}}

January 2006 jQuery

John Resig
Author, jQuery

jQuery

• Cross-browser JavaScript library
• Simpliﬁes and normalizes DOM, AJAX, etc.
• Centers around using extended CSS selectors
to grab an element(s)

jQuery
$("div").addClass("special");
Find all div tags
Add class special

jQuery
$("#foo") <div id="foo"></div>
.html("<strong>bar</strong> baz");
<div id="foo">
<strong>bar</strong> baz
</div>

jQuery
$('img.preview').hide();
$('.button').click(function(){ •Hide all images with
});
$('img.preview').show(); the class preview
•When element with the
class button is clicked,
show all images with the
class preview

Animation
$('.button').click(function(){
$('img.preview')
When .button is clicked,
.fadeOut(600, function() { fade out img.preview
$(this).remove();
}); over 600 milliseconds
});
and then remove it from
the DOM

Events

• jQuery wraps an event handling system
• Handles browser events, AJAX events, and
custom events

Events

$(document).ready(function() {
//Only execute when the document fires
//its onready event (page is done loading)
});

$(document).bind('ready', function() {
//Equivalent to the above
});

Events

$('img').hover(function(){
//Do something when user hovers over
//any img tag
});

AJAX

• Asynchronous JavaScript And XML
• Though never use XML, use JSON
• jQuery has an AJAX library
• Wraps all the diﬀerent browser quirks
• IE is weird

AJAX

$.ajax({
url: "test.php",
success: function(data){
$('div.status').addClass("done")
.html(data);
}
});

Resources

http://api.jquery.com/

JavaScript Primer

More Related Content

What's hot

Similar to JavaScript Primer

Recently uploaded

JavaScript Primer