Advanced JavaScript

Theodosis Sourgkounis

Introduction

What's for today?

Window

Location

History

JSON

window dimentions and scrolling

this

var obj = {
    firstname: 'John',
    lastname: 'Smith',
    whoami: function(){
        alert( this.firstname + " " + this.lastname );
    }
}

toString function

var person = {
    firstname: 'John',
    lastname: 'Smith',
    conduct: 'decorous',
    toString: function(){
        var result = this.firstname + ', ' + this.lastname;
        if( this.conduct == 'decorous' ){
            return result + ' the decorous one';
        }
        return result;
    }
};
alert( person );

Date

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
alert( day + "-" + month + "-" + year );

var timestamp = date.getTime();
alert( timestamp + "ms since 1-1-1970" );

var inAnHour = new Date( timestamp + 1000 * 3600 );
alert( inAnHour.toUTCString() );

document

What's DOM?

DOM & javascript

HTML

<html>
    <body>
        <p>
            Hello, <strong>world!</strong>
        </p>
    </body>
</html>
dom tree

DOM Traversing

DOM Traversing

DOM functions

DOM functions

DOM element attributes

<input type="text" name="firstname" />

var input = document.getElementsByTagName( 'input' );
var name = input[ 0 ].name;
if( name == 'firstname' ){
    input[ 0 ].value = 'John';
}

Events

jQuery events

mouse events

jQuery event object

keyboard events

keyboard events

browser events

default behaviour

$( 'a.donothing' ).click( function(){
    return false;
} );

this & event handlers

$( 'h2' ).click( function(){
    var text = $( this ).text();
    alert( "You clicked the h2 with text: " + text );
} );

Server Events (reverse ajax)

event bubbling

event bubbling

final assignment

final assignment

more about functions

more about functions


function greet( name ){
    var greeting = "Greetings, ";
    greeting += name;
    alert( greeting );
}
greet( "human" );
function add( a, b ){
    return a + b;
}
alert( add( 1, 2 ) );

Optional parameters

Τοπικές και καθολικές μεταβλητές


var a = 5;
function foo(){
    
    var a;
    
    a = 6;
    alert( a );
}
foo();
alert( a );

var a = 5;
function foo(){
    
    a = 6;
    alert( a );
}
foo();
alert( a );

Recursion

function factorial( n ){
    if( n == 1 ){
        return 1;
    }
    return factorial( n - 1 ) * n;
}
alert( factorial( 3 ) );

anonymous functions


function ( a, b ){
    return a + b;
}

calling an anonymous function

alert(
    ( function( a, b ){
        return a + b;
    } )( 5, 7 )
);

functions as attributes

var foo = function(){
    alert( 'clicked!' );
    return false;
}
$( 'a' ).click( foo );

functions as attributes

var foo = function(){
    alert( 'clicked!' );
    return false;
}
$( 'a' ).click( foo() );

setTimeout

var sayHello = function(){
    alert( "Hello, world!" );
};
//τρέχει 1 φορά μετά από 5s
setTimeout( sayHello, 5000 );

setInterval

var sayHello = function(){
    alert( "Hello, world!" );
};
//τρέχει κάθε 5s
setInterval( sayHello, 5000 );

functions as callbacks

var conditionalCall = function( condition, f, g ){
    if( condition ){
        f();
    }
    else{
        g();
    }
};
conditionalCall( x == 5, 

function(){
    alert( "x is five" );
}, 

function(){
    alert( "x is not five" );
} );

returning functions

function makeFunction(){
    var displayHello = function(){
        alert( "Hello, world!" );
    };
    return displayHello;
}

var hello = makeFunction();
hello();
function makeAdder(){
    var adder = function( x, y ){
        return x + y;
    };
    return adder;
}

var add = makeAdder();
alert( add );
alert( add( 5, 7 );
function makeMultiplier( factor ){
    var multiplier = function( x ){
        return x * factor;
    };
    return multiplyer;
}

var double = makeMultiplier( 2 );
var triple = makeMultiplier( 3 );

alert( double( 3 ) );
alert( triple( 5 ) );

closures

var makeMultiplier = function( factor ){
    var multiplier = function( x ){
        return factor * x;
    }
    return multiplier;
}

counter

var makeCounter = function(){
    var counter = 0;
    return function(){
        return ++counter;
    }
}
var countCows = makeCounter();
var countChicken = makeCounter();
alert( countCows() + " cows" );
alert( countChicken() + " chickens" );

animations

div{
    background: #fff;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 30px;
    left: 0px;
}
var position = 0;
var div = document.getElementsByTagName( 'div' )[ 0 ];
while( position < 400 ){
    position += 1;
    div.style.left = position + 'px';
}
var position = 0;
var div = document.getElementsByTagName( 'div' )[ 0 ];
setInterval( function(){
    position += 1;
    div.style.top = position + 'px';
}, 100 );

21/12/2011