Javascript 





fundamentals

About the speaker


Message from Nevaeh
var Terrance = function() {
    var me = [
	"Daddy",//Daddy First
	"Professional Web Dev",
	"Web Enthusiest",
	"FANBOY",
	"musicm122.blogspot.com"
	];
    return me;
};




Outline


  1. Why oh why Javascript?
  2. History
  3. Language Basics
  4. Objects
  5. Functions
  6. Structuring Javascript
  7. Pitfalls and Pain points
  8. Shinny things
  9. The MOAR You KNOW

Why oh why Javascript (seriously)


  • Javascript is Ubiquitous

    write once......

  • The direction the world is moving


  • Javascript a Highly Expressive Language

    (believe it or not)

  • Because Javascript loves you and wants to be your friend.

    (no, really)

Quotes by Semi Famous people


Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript

Jeff Atwood

Javascript is the Assembly language for the web.

Scott Hanselman

Deep down, JavaScript has more in common with Lisp and Scheme than with Java. It is Lisp in C's clothing. This makes JavaScript a remarkably powerful language.

Douglas Crockford: JavaScript: The Good Parts

A little History


  • Written at Mosaic by Brendan Eich under the name Mocha and later LiveScript, EMCAScript, and JScript

  • Influenced heavily by java, self and scheme

  • Currently Trademaked by Oracle:"JavaScript" is a trademark of Oracle Corporation. It is used under license for technology invented and implemented by Netscape Communications and current entities such as the Mozilla Foundation

  • EMCA standard 262






Language Basics

Hello World




Hello world without jquery



Hello World with jquery

Looping Constructs


 //for loopfor (var i = 0; i < myArr.length; i++) {
    console.log("for loop item " + myArr[i]);
}

//for in loop, used for enumerating properties
for (var item in person) {
    console.log("for in loop item = " + item);
}

//while loop
while (i < 5) {
    i++;
    if (i == 3) continue;
    n += i;
}

//do while
do {
   i += 1;
   console.log("do while loop item = " + i);
} while (i < 5);



Objects


Objects


Dynamic Collection of properties.

var dog = {}; // 1
var cat = Object.create(null); // 2
var mongoose = new Object(); // 3

Can contain other objects or methods

var dog = {
	bark:alert("WOOF!"),//method
	color:"black", //string 
	age:3 //integer 
};
dog.bark(); //accessing an objects methodalert(dog.age); // accessing an object's propertyalert(dog["age"]); //also accessing an object's property

Objects


Key Value Pairs (Think built in hash table or dictionary)

var dog = {
	bark:alert("WOOF!"),
	color:"black",
	age:3
};



The property color can be referenced in two ways. 


alert(dog.color);
alert(dog["color"]);



Objects


JSON (Javascript Object Notation)
In JSON 
{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}}
In XML

<menu id="file" value="File">
<popup>
<menuitem value="New" onclick="CreateNewDoc()" />
<menuitem value="Open" onclick="OpenDoc()" />
<menuitem value="Close" onclick="CloseDoc()" />
</popup>
</menu>

Objects

Differences between JSON and Javascript Objects


The keys must be strings (i.e. enclosed in double quotes ") in JSON. The values can be :


  • string 
  • number 
  • JSON object
  • array
  • true
  • false
  • null

Objects


Value Passing is By Value
function myfunction(x){  // x is equal to 4
  x = 5;
  // x is now equal to 5}var x = 4;
alert(x); // x is equal to 4myfunction(x); alert(x); // x is still equal to 4

Object Passing is by "ref"(sort of)
function alterObject(obj) {
  obj.foo = "hello world";
}

var myObj = { foo: "goodbye" };alterObject(myObj);
alert(myObj.foo); // "hello world" instead of "goodbye"

Objects


Inheritance
var defaults = {
  zero: 0,
  one: 1
};

var myOptions = Object.create(defaults);
var yourOptions = Object.create(defaults);

// When I want to change *just* my options
myOptions.zero = 1000;

// When you wanna change yours
yourOptions.one = 42;

// When we wanna change the **defaults** even after we've got our options
// even **AFTER** we've already created our instances
defaults.two = 2;

myOptions.two; // 2
yourOptions.two; // 2


Objects


Extension

//usage: var str = " somestring ".trim();
//output: "somestring"
//Credits to http://blog.stevenlevithan.com/archives/faster-trim-javascript

String.prototype.trim = function () {
	return this.replace(/^\s\s*/, "").replace(/\s\s*$/, "");
};





Functions


Functions

3 ways to Declare

//function declaration ||the function statement
function add(a,b){
	return a + b;
}

//The function expression (function operator)
//Function Literal
var add = function (a, b) {
    return a + b;
};

//The Function constructor

var add = new function(a, b){
	return a+b;
}
 

Functions

About the "New" operator

  1. Creates an empty object 
  2. Sets the internal [[prototype]] property equal to the external prototype of the newly instantiated object
  3. Calls the constructor function the type with a context of the newly created object (in other words the 'this' points to the new object


Playing With New

Functions

about Recursion
Examples

In order to understand recursion, one must first understand recursion.

Lather, Rinse, Repeat

Story Example


function fib(n){   return n<2?n:fib(n-1)+fib(n-2); } console.info(fib(20));

Functions

one more......

Functions



  • Can be Passed as arguments
  • Can be Returned as values
  • Can be Assigned to a variable or stored in data structures.
  • Can be Nested
  • Can be Anonymous (lambda expression)


Where there are first class functions there are....

Functions


Closures

A closure is any function which closes over the environment in which it was defined. This means that it can access variables not in its parameter list.

//foo "encloses bar" hense the name "closure"

function foo(x) {
  var tmp = 3;
  function bar(y) {
    alert(x + y + (++tmp));
  }
  bar(10);
}
foo(2);
 





Structuring Javascript

(Design Patterns)



Simple "Class"


Revealing Module Pattern


MOAR!

Pitfalls and Pain Points




Pitfalls and Pain Points




Additional Resources

(TEH MOAR U KNOW!!!)

QA & Help


Free books


No so free books but still worthwhile



continued...


Json.org

developer.mozilla.org

Douglas Crockford Javascript videos

github

jsfiddle.net

People


Douglas Crockford

John Resig

Addy Osmani 

Eliah Manor

Christian Heilmann


Me....

Javascript Koans

(bonus round)
open up a terminal and type the following:
git clone https://github.com/mrdavidlaing/javascript-koans
Then go to the directory where the repo you made is located 

open up KoansRunner.html

Have fun ;)

A Prize for the furthest along