To define a class in JavaScript, you can use directly the clss declaration with the name of the class.
class className {
constructor(params){
//properties
}
//methods
}
let varClass = class {
constructor(params){
//properties
}
//methods
}
The diference is that "varClass" is a variable, so its value can be changed.new) keyword.
let obj = new className(arguments); //Or let ob2 = new varClasa(arguments);
Properties are defined in the constructor(), with the this keyword.
constructor() is a special method that is automatically executed when an object of the class is created (with the new keyword).
Inside the class body, the properties and methods are called by using the this keyword (the class-name for static methods).
Outside the class, the properties and methods can be called using the object name (the class-name for static methods).
<div id='ex_res'>Here we show the results.</div>
<script>
class Rectangle {
//receives two arguments when an object of the class is created
constructor(width, height){
//set properties
this.width = width;
this.height = height;
}
//a simple method, it uses the properties defined in constructor
area(){
return this.width * this.height;
}
//another method (receives one argument); to see how to call a method in other method
multipliArea(n){
return this.area() *n;
}
}
//usage, create an object of the class; using the new keyword
let ob_rect = new Rectangle(5, 3);
//gets values from the area() and multipliArea() methods
var area = ob_rect.area();
var m_area = ob_rect.multipliArea(3);
//add in the #ex_res html element the values of area and m_area
document.getElementById('ex_res').innerHTML ='area() method returned: '+ area +'<br>multipliArea(3) returned: '+ m_area;
</script>
The static methods inside the class are created with the static keyword.
Inside and Outside the class body, the static methods are called with the name of the class.
A static method cannot be called with the "this" keyword or through a class instance.
<div id='ex2_res'>Here we show results.</div>
<script>
class User {
//receives user name when an object of the class is created
constructor(user){
//set property
this.user = user;
}
//static method
static Hello(name){
return 'Hello '+ name;
}
//basic method, to see how to call a static method inside other method
titleHello(){
var re = User.Hello(this.user);
return '<h2>'+ re +'</h2>';
}
}
//usage, create an object of the class
let ob_usr = new User('MarPlo');
//add in the #ex2_res html element the value returned by titleHello()
document.getElementById('ex2_res').innerHTML = ob_usr.titleHello();
//get the result from the static method (with the class name)
var hello = User.Hello('Peace');
alert(hello);
</script>
You can create and use multiple objects instances of the same class, with different values.
- Example:
<div id='ex_hi1'>#ex_hi1 div</div>
<div id='ex_hi2'>#ex_hi2 div</div>
<script>
class Test {
constructor(name){
this.name = name;
}
//adds 'Helo name' in the #id HTML element
addHello(id){
document.getElementById(id).innerHTML ='<h3>Hello '+ this.name +'</h3>';
}
}
//first object instance
let ob1 = new Test('Happines');
ob1.addHello('ex_hi1'); //calls the method with the ID of a Div
//second instance
let ob2 = new Test('Peace');
var hi2 = ob2.addHello('ex_hi2'); //calls the method with other ID
</script>
The getter/setter syntax exists for properties that must be calculated based on conditions or other properties.
The getter methos is defined with the get keyword.
The setter methos is defined with the set keyword.
The getter and setter must have the same name.
The setter must have an argument. It is automatically called when a value is assigned to a property with the same name as setter; that value is passed for argument.
<div id='ex3_res'>Here we show results.</div>
<script>
class Article {
constructor(){
this.th1 ='No title';
}
//getter, returns the th1 property that is defined in setter
get title(){
return this.th1;
}
//setter, it is called when a value (val) is assigned to the title property
set title(val){
if(val !='') this.th1 ='<h1>'+ val +'</h1>';
}
}
//usage, create an object of the class
let ob_art = new Article();
//assigns a value to title property
//this code will automatically call the setter: title() with the value as argument
ob_art.title ='CoursesWeb.net - JS Classes';
//this code will automatically call the getter: title()
var th1 = ob_art.title;
//add in the #ex3_res html element the value of th1
document.getElementById('ex3_res').innerHTML = th1;
</script>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
#id {
font-style: italic;
}$(document).ready(function() {
$(".a_class").click(function(){ $(this).hide("slow"); });
});function fname($a, $b) {
echo $a * $b;
}