Kids

Can

JavaScript

<-----Back        Next --->

Creating Objects


These are all instances of the same Object.

example1:

Objects

In an Object we can save properties that we want to use over and over again.

 var 
 person 
 = 
 { 
 firstname 
 : 
 'Mickey' 
 , 
 nickNames 
 : 
 ['mouse','speedy'] 
 , 
 age 
 : 
 15 
 } 
 ; 

As you can see an Object is really a bunch of key:value pairs, separated by commas.


Here's another way to make an Object:

 var 
 job 
 = 
 new 
 Object() 
 ; 


 job 
 . 
 type 
 = 
 "carwasher " 
 ; 


 job 
 . 
 rate 
 = 
 8.50 
 ; 

To access the Object's properties:

 job 
 . 
 type 


 job 
 [ 
 'rate' 
 ] 
Create Object and access Properties......... .... "TryoutPanel1"
<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>





Constructor

example2:


A Constructor helps you make lots of variations of the same Object.
It looks just like a function. It takes parameters, to specify the Objects properties' values.

 function 
 Smiley 
 ( 
 x 
 , 
 y 
 , 
 color 
 ) 
 { 


 this 
 . 
 x 
 = 
 x 
 ; 


 this 
 . 
 y 
 = 
 y 
 ; 


 this 
 . 
 color 
 = 
 color 
 ; 
 } 

With the new keyword you call the Constructor and a new Instance (variation) is made.

 var  
 smiley1 
 = 
 new 
 Smiley( 
 100 
 , 
 50 
 , 
 "red" 
 ) 
 ; 


Make new Smiley Instances......... .... "TryoutPanel2"
<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>


Object's functions

An Object can have its own functions too. You can easily add them in the Constructor:

 this 
 . 
 draw 
 = 
 function ( ) 
 { 
 ... context.fillStyle 
 = 
 this 
 . 
 color 
 } 

In the Tryout Panel below add some new properties and use them in the this.draw()

Make a Person Constructor......... .... "TryoutPanel3"
<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>





User Input Functions

example3:

Give your Object some functions that allow the user to change the properties.
That makes your game/gadget interactive.

 this 
 . 
 changeColor 
 = 
 function ( ) 
 { 


 var color 
 = 
 prompt( 'type a color' ) ; 


 this.color 
 = 
 color ; 


 this  
 . 
 draw(); 
 } 


Pimp my Car Constructor......... .... "TryoutPanel4"
<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>



example4:



<-----Back        Next --->

This username already exists.

This username already exists.

Login or register to save your work.

User name field is empty.

Your username needs to be at least 7 characters long.

Your username can not contain any of the following characters: ",', <, > , < and whitespaces.

Please enter a correct email addresss .

This email address is not found in our database .

Your password needs to be at least 7 characters long.

login
username
password
forgot password
email
register
username
password
email