Introduction to javascript

gistfile1.js

//a simple introduction to javascript

//javascript comments are C-style: inline-comments begin with two forward
//slashes //, and end when on EOL (End Of Line)

/* multi-line comments are also available, spanning from forward-slash asterisk /*
   until an asterisk forward-slash */

//variable declaration

//variables are declared using the `var` statement
var hello;
var fourtyTwo = 42;

var multipleVariable, declaration;
//no types are necessary
//you can technically omit the var statement. however, this is not recommended,
//and will be discussed later on

//strings
'hello!'
"world!"

var helloWorld = "hello" + " " + "world!",
helloWorld2 = 'hello' + ' ' + 'world!';

//numbers
42;
7;
-10;
3.14159;
5e7; //50000000, 5 followed by 7 zeroes
1 + 2;
9 - 52;
5 / 2.5;
2.7 * 3;
0x0a; //hex (base 16), 10 in decimal
012; //octal (base 8), 10 in decimal
NaN; //Not a Number. however, it's technically a number
//there's an anomaly in the language. NaN is not equal to anything, including
//itself. very weird

//area = p * radius^2
var area = Math.PI * Math.pow( radius, 2 );

//you can squeeze the number out of a string in several ways:
//parseInt( string, radix );
parseInt( "120", 10 ); //120
parseInt( "0af", 16 ); //175

//parseFloat( string ), assumes decimal
parseFloat( "120" ); //120
parseFloat( "0af" ); //0, it stops once it reaches a non-decimal character

//the + unary operator is kinda like parseFloat. however, it only accepts a
//real number-string. +"0af" will give you NaN, since non-numeric characters are
//present

//booleans
true;
false;

!true; //false
!false; //true

true && true; //true
true && false; //false
false && true; //false
false && false; //false

true || true; //true
true || false; //true
false || true; //true
false || false; //false

//null and undefined

//null basically means, no value
//undefined means a value isn't defined
//the analogy can be of null and null pointer - undefined is a sugared null
//pointer. nothing exists on it, but it's an entity of its own

var uninitialized;
uninitialized; //undefined

var iDontReallyExist = null;
iDontRealyExist; //null
//it is defined, so it's not undefined. however, it has no real value

//arrays
//no need to specify a length. an array literal is available:
//[ starts an array, ] ends it, comma , separates array items
[0, 1, 2, 3, 4];
['foo', "bar", 42, true, null, 5 * 9, []];

var array = [1, 3, 9, 27];
array[0]; //1
array[1]; //3

var sum = 0;
for ( var i = 0, len = array.length; i < len; i++ ) {
    sum += array[ i ];
}
//sum = 1 + 3 + 9 + 27 = 40

array.reverse();
array[0]; //27
array[1]; //9

array.reverse();
array.length; //4

array.push( 81 ); //array is now [1, 3, 9, 27, 81]
array.length; //5
array[ 4 ]; //81

array.unshift( 0.333 ); //array is now [0.333, 1, 3, 9, 27, 81]
array.length; //6
array[ 0 ]; //0.333
array[ 4 ]; /27

array.shift(); //[1, 3, 9, 27, 81]
array.length; //5
array[ 0 ]; //1

array.pop(); //[1, 3, 9, 27]
array.length; //4
array[ 3 ]; //27
array[ 4 ]; //undefined

//object literals
//basically, key => value stores, associative arrays, etc etc
var obj = {
    key : 'value',
    moop : [1, 2, { a : 'b'}, {}],
    iExist : true
};

obj.key; //"value"
//additionally, there's the subscript notation. the key is turned into a string
obj[ 'key' ]; //"value"

obj[ 4 ] = 'I\'m number 5';
obj[ 4 ]; //"I'm number 5"

var illBeStrung = 'iExist';
obj[ illBeStrung ]; //true

var table = {
    hanz : {
        age : 36,
        favIceCreamFlavour : 'watermelon'
    },

    franz : {
        age : 42,
        drivesATruck : false
    }
};

var sum = 0, count;
for ( var key in table ) {
    //we will (possibly) discuss the following line later
    if ( table.hasOwnProperty(key) ) {
        sum += table[ key ].age;
        count++;
    }
}
var avgAge = sum / count;

//functions
function hello () {
    return 'hello world!';
}
hello(); //"hello world!"

function add ( a, b ) {
    return a + b;
}
add( 1, 2 ); //3
add( 3.14, 0.0015 ); //3.1415
add( 0.4, '1' ); //"0.41"
add( 0, true ); //1
add( 0, false ); //0

//all functions have a special arguments variable inside of them
//arguments is an array-like variable, containing all...arguments
//the next functions are identical to the previous add function

function add () {
    var a = arguments[ 0 ], b = arguments[ 1 ];
}

function add () {
    return arguments[ 0 ] + arguments[ 1 ];
}
//functions are first-class. meaning, functions are also variables
//note that lambdas (anonymous functions, unnamed functions, etc) are available
var add = function ( a, b ) {
    return a + b;
};

//you can immediately invoke a function
var moo = function () {
    return 'moo';
}(); //<--notice the parens

//it's considered good practice to wrap self-invoking functions in parens:
var moo = (function () {
    return "moo";
})();
//note that invoking-parens can be moved inside:
var moo = (function () {
    return 'moo';
}()); //<--notice the parens' position

var increment = (function () {
    var counter = 0;
    //functions are another possible value, so we can do this
    return function () {
        counter++;
        return counter;
    };
})();
increment(); //1
increment(); //2

//arguments are optional. if you do not pass an argument, it's undefined
function puke ( something ) {
    return something;
}
puke( 42 ); //42
puke(); //undefined

//equality testing
//there are actually two equality operators: == and ===
//the former should be avoided until you know how type-coercion in js works
//I recommend the latter at all times, anyway
4 === 4;
'meep' === 'meep';
'moop' === "moop";

var obj = {}, arr = [];
obj === obj;
arr === arr;
//will be explained later
[] !== []
({}) !== ({})


function willMeetCondition ( condition ) {
    return function ( testSubject ) {
        return testSubject === condition;
    };
}
var cond = willMeetCondition( 'shabadabadoo' );
//all the following will be false:
cond( "meep" );
cond( true );
cond( false );
cond( {} );
//these will be true:
cond( "shabadabadoo" );
cond( 'shabadabadoo' );

//usefull links:
// https://developer.mozilla.org/en-US/
// http://bonsaiden.github.com/JavaScript-Garden/
// http://eloquentjavascript.net/

It's asterisk, not asterix!