JavaScript (JS) is a dynamic computer programming language.

Installing & Setting up

Google Dev Tools.

JavaScript 101

• To include your example.js in an HTML page (usually placed right before </body> will guarantee that elements are defined when the script is executed):

<script src="/path/to/example.js"></script>

• Variables can be defined using multiple var statements, or in a single combined var statement. The value of a variable declared without a value is undefined.

• Types in JavaScript fall into two categories:

  • Primitive:
  • String
  • Number
  • Boolean
  • null
  • undefined

• Null types are values that represent the absence of a value, similar to many other programming languages. Undefined types represent a state in which no value has been assigned at all.

Objects:

// Creating an object with the constructor:
var person1 = new Object;

person1.firstName = "John";
person1.lastName = "Doe";

alert( person1.firstName + " " + person1.lastName );

// Creating an object with the object literal syntax:
var person2 = {
    firstName: "Jane",
    lastName: "Doe"
};

alert( person2.firstName + " " + person2.lastName );

Array

// Creating an array with the constructor:
var foo = new Array;

// Creating an array with the array literal syntax:
var bar = [];

If/Else

var foo = true;
var bar = false;

if ( bar ) {
    // This code will never run.
    console.log( "hello!" );
}

if ( bar ) {

    // This code won't run.

} else {

    if ( foo ) {
        // This code will run.
    } else {
        // This code would run if foo and bar were both false.
    }

}

Switch

switch ( foo ) {

    case "bar":
        alert( "the value was bar -- yay!" );
        break;

    case "baz":
        alert( "boo baz :(" );
        break;

    default:
        alert( "everything else is just ok" );

}
```


### for

```
for ( var i = 0; i < 5; i++ ) {
    // Logs "try 0", "try 1", ..., "try 4".
    console.log( "try " + i );
}
```


### while

```
var i = 0;
while ( i < 100 ) {
    // This block will be executed 100 times.
    console.log( "Currently at " + i );
    i++; // Increment i
}
```

or

```
var i = -1;
while ( ++i < 100 ) {
    // This block will be executed 100 times.
    console.log( "Currently at " + i );
}
```


### do-while


```
do {
    // Even though the condition evaluates to false
    // this loop's body will still execute once.
    alert( "Hi there!" );

} while ( false );
```


### Ternary Operator 

```
// Set foo to 1 if bar is true; otherwise, set foo to 0:
var foo = bar ? 1 : 0;
```

### Arrays


#### .length

 ```
var myArray = [ "hello", "world", "!" ];

for ( var i = 0; i < myArray.length; i = i + 1 ) {

    console.log( myArray[ i ] );

}
```
#### .concat()

```
var myArray = [ 2, 3, 4 ];
var myOtherArray = [ 5, 6, 7 ];
var wholeArray = myArray.concat( myOtherArray );
```

#### .join()

```
 // Joining elements

var myArray = [ "hello", "world", "!" ];

// The default separator is a comma.
console.log( myArray.join() );     // "hello,world,!"

// Any string can be used as separator...
console.log( myArray.join( " " ) );  // "hello world !";
console.log( myArray.join( "!!" ) ); // "hello!!world!!!";

// ...including an empty one.
console.log( myArray.join( "" ) );
```

#### .pop() and .push()
Remover or add last element.


#### .reverse()

```
var myArray = [ "world" , "hello" ];
myArray.reverse(); // [ "hello", "world" ]
```

#### .shift()

```
var myArray = [];

myArray.push( 0 ); // [ 0 ]
myArray.push( 2 ); // [ 0 , 2 ]
myArray.push( 7 ); // [ 0 , 2 , 7 ]
myArray.shift();   // [ 2 , 7 ]
```

#### .slice()
Extracts a part of the array and returns that part in a new array. This method takes one parameter, which is the starting index.

Removes a certain amount of elements and adds new ones at the given index. It takes at least three parameters:

* Index – The starting index.
* Length – The number of elements to remove.
* Values – The values to be inserted at the index position.
* var myArray = [ 0, 7, 8, 5 ];
* myArray.splice( 1, 2, 1, 2, 3, 4 );

```
console.log( myArray ); // [ 0, 1, 2, 3, 4, 5 ]
```

#### .sort()
Sorts an array. It takes one parameter, which is a comparing function. If this function is not given, the array is sorted ascending.


```
// Sorting with comparing function.

function descending( a, b ) {
    return b - a;
}

var myArray = [ 3, 4, 6, 1 ];

myArray.sort( descending ); // [ 6, 4, 3, 1 ]
```

#### .unshift()
Inserts an element at the first position of the array.

```
.forEach()
function printElement( elem ) {
    console.log( elem );
}

function printElementAndIndex( elem, index ) {
    console.log( "Index " + index + ": " + elem );
}

function negateElement( elem, index, array ) {
    array[ index ] = -elem;
}

myArray = [ 1, 2, 3, 4, 5 ];

// Prints all elements to the consolez
myArray.forEach( printElement );

// Prints "Index 0: 1", "Index 1: 2", "Index 2: 3", ...
myArray.forEach( printElementAndIndex );

// myArray is now [ -1, -2, -3, -4, -5 ]
myArray.forEach( negateElement );
```

### Strings
Strings are a primitive and an object in JavaScript.

Some methods:

* length

* charAt()

* indexOf()

* substring()

* split()

* toLowerCase

* replace

* slice

* lastIndexOf

* concat

* trim

* toUpperCase

## Objects
Nearly everything in JavaScript is an object – arrays, functions, numbers, even strings - and they all have properties and methods.

```
var myObject = {
    sayHello: function() {
        console.log( "hello" );
    },
    myName: "Rebecca"
};

myObject.sayHello(); // "hello"

console.log( myObject.myName ); // "Rebecca"
```

The key can be any valid identifier:


```
var myObject = {
    validIdentifier: 123,
    "some string": 456,
    99999: 789
};
```

## Functions
Can be created in many ways:


```
// Named function expression.
var foo = function() {     ----> function expression (load later)
    // Do something.
};

function foo() {        ----> function declaration (load first)
    // Do something.
}
```

If you declare a local variable and forget to use the var keyword, that variable is automatically made global.

Immediately -Invoked Function Expression: 

```
(function() {
    var foo = "Hello world";
})();
console.log( foo ); // undefined!
```

## Events
JavaScript lets you execute code when events are detected.

Example of code to change a source image:

```
windows.onload = init;
function init(){
    var img = docuemnt.GetEventById("example");
    img.src = "example.jpg"
```

Methods for events:

* click

* resize

* play

* pause

* load

* unload

* dragstart

* drop

* mousemove

* mousedown

* keypress

* mouseout

* touchstart

* touchend


##Closure
Closure is one of the main proprieties of JavaScript.

Example of closure for a counter. Normally we would have the code:

```
 var count = 0;
 function counter(){
     count += 1;
     return count
}
console.log(counter());     --> print 1
console.log(counter());     --> print 2
```

However, in JS we can enclose our counter inside an environment. This is useful for large codes, with multiple collaborations, for example, where we might use count variables more than once:

```
function makeCounter(){
    var count = 0;
    function counter(){
      count += 1;
      return count;
    }
    return counter;   ----> closure holds count!
}
```

## Prototypes


```
function dog(name, color){
    this.name = name;
    this.color = color;
}

dog.prototype.species = "canine"
dog.prototype.bark = function{
}
```

## jQuery

Type Checking with jQuery: 


```
// Checking the type of an arbitrary value.

var myValue = [ 1, 2, 3 ];

// Using JavaScript's typeof operator to test for primitive types:
typeof myValue === "string"; // false
typeof myValue === "number"; // false
typeof myValue === "undefined"; // false
typeof myValue === "boolean"; // false

// Using strict equality operator to check for null:
myValue === null; // false

// Using jQuery's methods to check for non-primitive types:
jQuery.isFunction( myValue ); // false
jQuery.isPlainObject( myValue ); // false
jQuery.isArray( myValue ); // true
```