Prototype

by Michel Piallier

HTML

<p>Hello</p>
<div class="blue">
    Hello World!
</div>
<br>
<br>
<button id= "button1">Lance l'application</button>

CSS

#button1:hover
  { 
    cursor: pointer;
  }

JavaScript

// Premier exemple
$.prototype.highlight = function(texte)
{
    $(this).css("background","red");
    $(this).text(texte);
};
$("p").highlight('aaffffaaaa');

$.fn.blueBorder = function(){
 this.each(function(){
  $(this).css("border","solid blue 2px");
 });
 return this;
};
$.fn.blueText = function(){
 this.each(function(){
  $(this).css("color","blue");
 });
 return this;
};

$('.blue').blueBorder().blueText();

// Deuxième exemple


// Create a Class Prototype

var Car = function(type, make, model, year){
//Properties
this.type = type;
this.make = make;
this.model = model;
this.year = year;
this.speed = 0;
//Methods
Car.prototype.accelerate= function()
{
if(this.speed < 100){
this.speed += 10;
console.log("Speed is now: " + this.speed);
} else
{
console.log("Top speed reached");
}
},
Car.prototype.brake = function()
{
if(this.speed > 10)
{
this.speed -= 10;
console.log("Speed is now: " + this.speed);
} else
{
this.speed = 0;
console.log("Speed is now: " + this.speed);
}
}
}

// Create and use Class Instance

//Create object or instance
var myHonda = new Car("Sedan","Honda", "Civic", 2017)
var myLexus = new Car("Sedan", "Lexus", "330", 2015);
function app(){
		alert(myHonda.model);
		myHonda.accelerate();
		myHonda.accelerate();
		myHonda.accelerate();
		myHonda.accelerate();
		myHonda.brake();
		alert(myLexus.model);
		myLexus.accelerate();
		alert(myLexus.make + " going " + myLexus.speed + " MPH.");
}
$("#button1").on("click",app);