The concept of classes in JavaScript - ProgrammerTech
Language:

Search

The concept of classes in JavaScript

  • Share this:
The concept of classes in JavaScript

Class and object in javascript

Class is a large container that contains all the code from variables, functions, and objects. In order to define a new class, it is enough just to write the word class and then put a name for this class, then open parentheses specifying the beginning and end of the class.

Today's lesson is one of the most important lessons. You must master it and practice it several times, because if you master it, it will facilitate many things for you in the JavaScript language. An alternative to the functions in the class is the methods. A method is almost the same as a function, but we don't write the function at the beginning, we write the name of the method at the beginning. The class is almost an alternative to the functions.

Syntax

class ClassName{
	constructor(){
	}
}

First we write the word class and then we put a name for the class ClassName. And then we opened the curly parentheses and within it we write the constructor and then we opened the curly parenthesis again. In order for this class to work, we write outside it a variable in the name of the class and assign it the word new and put the name of the class.

Example 1

We put an id for the body tag, which is body.

class User{
	constructor(){
	}
	changeBackground(){
		document.getElementById("body").style.background = "red";
	}
}
var user = new User();
user.changeBackground();

We created a changeBackground method and put our hands on it. And we gave it the property style.background to know that we want to change the background of the page and we gave it the red color "red". And finally we put the change definition via user.changeBackgroun. And when we open our file in the browser, the result will be a completely red wallpaper. Another way to display data is to execute commands within the constructor.

Example 2

class User{
	constructor(){
	this.changeBackground();
	}
	changeBackground(){
		document.getElementById("body").style.background = "red";
	}
}
window.onload = new User();

As we noticed in the last lines, we wrote window.onload and assigned it the User class, that is, when the html page is loaded, the User class is executed. We use the this property on the constructor and the method that we want to run until these commands are executed. And it will display the same result as the previous one, which is a red background.

 

Create a class with a parameter

The parameter can be considered as a variable.

function car (){
}
class Car{
	constructor(){
	}
}

Functioning is easier than class, but class is more necessary in the labor market because we are working on the latest version of JavaScript.

Example 3

function car(name,model){
console.log(name,model);
}
class Car{
	constructor(name,model){
		this.name = name;
		this.model = model;
	}
}

We put two properties for the car function, name and model, and gave the data display through the console, and created the Car class. We create a button in the html file and put the values ​​in it.

<button onclick="car('BMW',2010)">run</button>

When you press the play button and the display through the console displays the results for us in the form.

BMW 2010

 

Display data in a JavaScript class

function car (name,model){
	console.log(name,model);
}
window.onload = car("bmw","model: 2010");
class Car{
	constructor(name,model){
		this.name = name;
		this.model = model;
	}
}
var car = new Car("skoda", "model: 2020");
console.log(car.name,car.model);

We created the car function with two parameters, name and model, and then displayed the data in the console. Then we pass the values ​​in window.onload for the car whose name is BMW and its model is 2010. We created the Car and Constructor classes and inside the Constructor we put the name and model. Then we wrote this.name and assigned a name to it and this.model and assigned it a model. Then we create a class-derived variable car and display the data via console. When running the code, we will see the result:

bmw model: 2010
skoda model: 2020

Example 4

function car (name,model){
	console.log(name,model);
}
window.onload = car("bmw","model: 2010");
class Car{
	constructor(name,model){
		this.name = name;
		this.model = model;
		console.log(name,model);
		alert("programmer tech class");
	}
}
var car = new Car("skoda", "model: 2020");
window.onload = car;

And as a result, the message of Dialok is shown

programmer tech class

Tags:
Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com