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

• 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)

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

Hello world without jquery

Hello World with jquery

 //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);

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

{"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>

Differences between JSON and Javascript Objects

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

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

function alterObject(obj) {
  obj.foo = "hello world";
}

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

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

//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*$/, "");
};

//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;
}
 

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) 

• 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....

• Global Scope by default 
• No concept of Namespace (require.js)
  
• The Search for 'Truthy'ness (use '===' not '==')
  
• Variable Hoisting (single var && strict mode )
  
• 'this' scoping or "execution Context"                                                (the calling func gets the 'this')
• Raw ajax (use jQuery or another ajax lib)