js basics

 - js syntax

 - OOP basics

 - window, context, etc.

Tools basics

 - debugger
 - console

js basics

• Simple types
  
  
   
• Simple functions

var a; //variable definition;
a = {}; //a is Object;
a = []; //a is Array;
a = 5; // a is Number;
a = '5'; //a is String;



//function definition
function foo( a, b ) {
    return a + b; 
}

//other function definition
var a = function( a,b ) {
    return a + b;
}

OOP is JavaScript

Here is example how to create simple object.
Car is a constructor for this function.

go is method for Car object

Let's create simple car

Let's check methods that it contains.
 

var DEFAULT_SPEED = 50;

//@constructor
function Car( speed ) {
    //car speed 
    this.speed = speed || DEFAULT_SPEED;
}

//method for car
Car.prototype.go = function() {
    return this.speed;
}

//Let's create honda
var honda = new Car( 300 );

//Let's crate simple car
var lanos = new Car();

console.log( honda.go() );
console.log( lanos.go() );

WEB CONSOLE

F12

Paint Snake

	function paint() {

		snakeArea.forEach( function( snakeElement, index, allElements ) {

            //crate blue rectangle
			context.fillStyle = 'blue';
			context.fillRect( snakeElement.x * DefaultSettings.SNAKE_WIDTH,
                            snakeElement.y * DefaultSettings.SNAKE_WIDTH,
                            DefaultSettings.SNAKE_WIDTH,
                            DefaultSettings.SNAKE_WIDTH );

			context.strokeStyle = 'white';
			context.strokeRect( snakeElement.x * DefaultSettings.SNAKE_WIDTH,
                                snakeElement.y * DefaultSettings.SNAKE_WIDTH,
                                DefaultSettings.SNAKE_WIDTH, DefaultSettings.SNAKE_WIDTH );

		});

	}

	paint();

Let's craete render loop

var timerLoop;

    //...
  
function paint() {

    //...


    //head coordinates
    head.x = snakeArea[0].x;
    head.y = snakeArea[0].y;

    //eat fruit
    head.x++;

    var tail = snakeArea.pop();
    tail.x = head.x;
    snakeArea.unshift( tail );


    //...    


     //call it each time
    timerLoop = setTimeout(function() {
        paint();
    }, 1000 / DefaultSettings.SPEED);

}

Add key events

  document.onkeydown = function ( event ) {

        //key number
        switch ( event.which ) {
            case 37:
                if ( direction !== 'right')  direction = 'left';
                break;
            case 40:
                if ( direction !== 'down')   direction = 'up';
                break;
            case 39:
                if ( direction !== 'left')   direction = 'right';
                break;
            case 38:
                if ( direction !== 'up')     direction = 'down';
                break;
        }

    }

Eat some food