<script>



var person = new Object();  // .....change/add properties
person.name='Jacky';
person.age=13;
person.nickname='the Hacker';

 
var job= {type:'lawnmowing' , hours:10 , rate:10.50 , permanent:false}

//....... add properties by adding key:value pairs

function explorePerson(){
alert ('name:'+ person.name)              // literal notation
}

function exploreJob(){
var property= prompt('which property?')
 alert(property + ":"+job[property]   )     //bracket notation
}

</script>

<button onclick="explorePerson();">explore Person Object</button>

<button onclick="exploreJob();">explore Job Object</button>



<ul><li>Change/ add properties for both Objects(6,11)</li>
<li>Access the properties in 2 ways: <b>person.name</b> (16) 
and  <b>person['name']</b> (21)</li></ul>

<script>

function Smiley(x,y,color,smiling){      // add parameter for more properties
this.x=x;     
this.y=y;
this.color=color;
this.smiling=smiling;

//********THIS DRAW ************************//

 this.draw=function(){                           // here we draw the object

 context.fillStyle=this.color;          // uses smileys color:  this.color
  circle(this.x, this.y, 50);           // FACE circle(x,y,radius)

 context.fillStyle = "black";           // ......EYE COLOR 
   circle(this.x-25,this.y-15,7);
   circle(this.x+25,this.y-15,7);     // drawing the EYES
      
    context.beginPath();               // draw SMILE
  context.arc(this.x, this.y+15, 20, Math.PI, 0,this.smiling); 
  context.stroke();                      //arc(x,y,radius,begin,end,anticlockwise)     
 }   
                                         // if anticlockwise = false: grumpy
           
}


///////// CIRCLE HELP FUNCTION ////////////////////////

function circle(x,y,radius) {               //function creates circle
  context.beginPath();
  context.arc(x, y, radius,0, Math.PI*2, true);
  context.fill();
  context.stroke();
}

//////////////CREATE INSTANCES ///////////////////////////

var smiley1= new Smiley(50,50,'green',true);   
     //... create more Smiley instances : Smiley(x,y,color,smiling)

///////// DRAW ////////////////////////////

function draw(){
canvas= document.getElementById('canvas');            
 context=canvas.getContext('2d');

smiley1.draw();
  //.....Draw all the new smiley-instances
}

setTimeout(draw,50);
</script>



<canvas id="canvas"></canvas>

<ul>
<li>Create new Smiley <b>instances</b>(41)</li>
<li><b>draw</b> them(50)</li></ul>

<script>

//////////////// PERSON CONSTRUCTOR //////////////////////////

function Person(x,y,color){      // add parameters for more properties
this.x=x;     
this.y=y;
this.color=color;
  //.........add more properties e.g: eyeColor, headSize, hairColor
  // use the new properties in the draw() function


//********THIS DRAW ************************//

 this.draw=function(){                 // here we draw the object
                                       
context.fillStyle="brown";          // ...HAIR  color : make new property this.hairColor
  circle(this.x, this.y-30, 60);     // hair afro: circle(x,y,radius). 
                                      
context.fillStyle=this.color;       // uses person color:  this.color
  circle(this.x, this.y, 50);       // ..... HEAD: make new property: this.headSize
                                    // circle(x,y,this.headSize)

 context.fillStyle = "black";        // ....EYES color :make new property this.eyes
   circle(this.x-25,this.y-15,7);
   circle(this.x+25,this.y-15,7);    // drawing the eyes
      
    context.fillStyle = "red";      // ......MOUTH Color : make new property: this.mouthColor
   oval(this.x,this.y+15,14,7);     // mouth: oval(x,y,width,height)
 }                                       
                                         
           
}


///////// CIRCLE HELP FUNCTION ////////////////////////

function circle(x,y,radius) {               //function creates circle
  context.beginPath();
  context.arc(x, y, radius,0, Math.PI*2, true);
  context.fill();
  context.stroke();
}
////////////////////OVAL HELP FUNCTION ///////////////////////////

function oval( x, y, widthOval, heightOval){             //oval
       context.save(); // save state
        context.beginPath();
        context.translate(x - widthOval, y - heightOval);
        context.scale(widthOval, heightOval);
        context.arc(1, 1, 1, 0, 2 * Math.PI, false);
        context.restore(); // restore to original state
        context.fill();
         context.stroke();
     }

//////////////CREATE INSTANCES ///////////////////////////

var johanna= new Person(80,100,'yellow');   //...create more instances

///////// DRAW ////////////////////////////

function draw(){
canvas= document.getElementById('canvas');            
 context=canvas.getContext('2d');

johanna.draw();                 //...... draw all instances you make

}

setTimeout(draw,50);
</script>



<canvas id="canvas" width="500" height="200" style="border:1px solid #d3d3d3;"></canvas>

<ul><li>Add more <b>parameters</b>(5)</li>
<li>make them into <b>properties</b>(9)</li>
<li>Use the new properties in the <b>this.draw</b> function(17,21,24)</li>
<li>Create new Smiley <b>instances</b>(59) and <b>draw</b> them(67)</li></ul>

<script>
var canvas;            
var context;
//////////// CAR CONSTRUCTOR //////////////////
var myCar = new Car(60,80,"yellow");      // create instance of Car 
                             
function Car(x,y,color){                   // Constructor for a Car Object
  this.x=x;
  this.y=y;
  this.color=color;
 //.....add more properties like speed, width,height,wheelColor, etc.

//*********** THIS DRAW **************************///

 this.draw = function(){              // this draw function belongs with each instance
    context.fillStyle=this.color;           // set cars color: this.color
    rect(this.x,this.y,100,50);             // rect( x,y,width,height)
                       
    context.fillStyle = "black";           // wheels
    circle(this.x+30,this.y+50,15);        // circle(x,y,radius)
    circle(this.x+70,this.y+50,15);      
}

//************* THIS MOVE **********************//
 
this.move =function(){
   this.x += 2;            //...insert this.speed property here
   draw();                                                // draw whole canvas
   this.animate= setTimeout(this.move.bind(this),100);    // loop
   }

//************ THIS CHANGE COLOR *********************///

  this.changeColor= function(){               // changeColor function
   var color=prompt("type a new color");       // fetch user input
   this.color=color;                          // change this cars color 
   this.draw();                               // draw itself
   }
//..........make a this.changeSpeed() function (example above)
  //  call it in an onclick(82)
}

//////////////// CIRCLE ////////////////////////

function circle(x,y,radius) {                    //function creates circle
  context.beginPath();
   context.arc(x, y, radius,0, Math.PI*2, true);
  context.fill();
  context.stroke();
}

//////////////////RECTANCLE//////////////////////

function rect(x,y,width,height) {                    //function creates rectangle
   context.rect(x, y, width,height);
  context.fill();
  context.stroke();
}


/////////////////////// DRAW /////////////////////////

function draw(){                               // draw whole canvas
  canvas= document.getElementById('canvas');            
     context=canvas.getContext('2d');
  context.clearRect(0,0,canvas.width,canvas.height);      // wipe    
  
myCar.draw();                              // draw this instance of Car 
                                                      
}                                                                 

setTimeout(draw,100);
myCar.move();             // make the instance move

</script>

<p>This Car Constructor has a <b>draw</b>, <b>move</b> and ,<b>changeColor</b> function</p>

<canvas id="canvas" width="600"  onclick="myCar.changeColor()" ></canvas>

<p> Click the canvas to activate the changeColor function </p>
<ul><li>Add more properties for Car (11)</li>
<li>Make a this.changeSpeed() function(39,79)</li>
<li>Make a this.jump function</li></ul>