JavaScript

JavaScript

Scripting language
+ Can interact with user and browser (client)
- Can't interact with server and database

Syntax

Objects, variables, functions
Always close parentheses and brackets ( ) { }
Always put a semicolon at the end of the statement
```
// Comment
/* Multi-line
   comment */
```

Variables

Store data
Variable names should make sense
Can be modified, manipulated, retrieved

var demo;                    // NULL
demo = true;                 // Boolean
demo = 824;                  // Integer
var price = 5.99;            // Decimal
var name = "Mike Wazowski";  // String

Operators

Arithmetic

var num1 = 5, num2 = 10;
num2 = num1 + num2;
num1 = num1 * 5;
num2 -= 15;     // num2 = num2 - 15;
num1++;         // num1 = num1 + 1;

Strings
```
var name = "James" + "Bond";
```

Comparisons

Don't forget, = != ==

1 == 1     1 != 2
1 <  2     2 >  1
1 <= 2     1 >= 1

&&         And
||         Or
!          Not

Conditions

Next

if( name == "Marshall" ) {
    ...
}
else if( name == "Lily" ) {
    ...
}
else if( name == "Robin" ) {
    ...
}
else {
    ...
}

Arrays

Lists of related data (same type)
Index starts at 0 not 1

var nums = new Array(5, 31, 91);
var colors = [ "pink", "blue" ];

colors.push("silver");

if( colors[1] == "blue" ) { ... }
if( colors.length == 3 ) { ... }

Objects

Groups of related properties

var car = {
    make         : "Volvo",
    model        : "P1800",
    transmission : "automatic",
    cylinders    : 4
}
if( car.make == "Saab" ) { ... }

Loops

Animals!

"for" can be used as a counter
```
for( var i=1; i<=5; i++ ) { ... }
```
Or to loop through an array

var animals = [ "ferret", "turtle",
     "lemur" ];
for( var i=0; i<animals.length; i++ ) {
    $('#'+animals[i]).fadeToggle(1000);
}

Loops

Watch out for infinite loops

while( finished == false ) {
    if( condition ) {
          finished = true;
    }
}

Functions

hello();

Bonjour!

Package code to reuse it later

function hello() {
    $('#hello').fadeToggle(500);
}
for( var i=0; i<5; i++ ) {
    hello();
}

Functions

welcome("Andreas");

Arguments
Be careful with variable scope

function welcome( firstName ) {
    var test = "Hi";
    $('#welcome').html("Willkommen, "
        + firstName).fadeIn('fast');
}
welcome("Andreas");
console.log(test);

jQuery

Everything jQuery does can be done in JavaScript (obviously)
jQuery simplifies things:

document.getElementById('test')
    .innerHTML = 'demo';
$('#test').html('demo');

Use jQuery when you can

jQuery

Now that you understand conditions, comparisons, etc., jQuery is much more powerful

if( $('.item').hasClass('purchased') ) {
    newItem = {
        sku   : $('.item').data('sku'),
        color : $('.item .color').val()
    }
    cart.push(newItem);
}

Questions?