6.1 Classes¶
Basic Class¶
Task 1: Create a constructor that creates user objects.
/*
let user = {
firstName: null,
lastName: null,
email: null,
username: null
};
*/
function UserConstr(fn, ln, e, un){
this.firstName = fn;
this.lastName = ln;
this.email = e;
this.username = un;
}
let user1 = new UserConstr("Nawras", "Ali", "nawras@mail.com", "nawras77");
let user2 = new UserConstr("Jad", "Fakhri", "jad@mail.com", "fakhri5");
console.log(user1);
console.log(user2);
The result is as follows:
UserConst {firstName: "Nawras", lastName: "Ali", email: "nawras@mail.com", username: "nawras77"}
UserConst {firstName: "Jad", lastName: "Fakhri", email: "jad@mail.com", username: "fakhri5"}
Task 2: Check the following code.
class User{
/* Constructor */
constructor(fn, ln, e, un){
this.firstName = fn;
this.lastName = ln;
this.email = e;
this.username = un;
}
}
let user1 = new User("Nawras", "Ali", "nawras@mail.com", "nawras77");
let user2 = new User("Jad", "Fakhri", "jad@mail.com", "fakhri5");
console.log(user1);
console.log(user2);
The result is as follows:
User {firstName: "Nawras", lastName: "Ali", email: "nawras@mail.com", username: "nawras77"}
User {firstName: "Jad", lastName: "Fakhri", email: "jad@mail.com", username: "fakhri5"}
Task 3: Check the following code.
/*
let laptop = {
processor: null,
ram: null,
storage: null
}
*/
class Laptop{
/* Constructor */
constructor(proc, ram, stg){
this.processor = proc;
this.ram = ram;
this.storage = stg;
}
}
let laptop1 = new Laptop("i5", "2GB", "0.5TB");
let laptop2 = new Laptop("i3", "2GB", "1TB");
console.log(laptop1);
console.log(laptop2);
The result is as follows:
Laptop {processor: "i5", ram: "2GB", storage: "0.5TB"}
Laptop {processor: "i3", ram: "2GB", storage: "1TB"}
Task 4: Create a class that creates epic objects.
/*
let epic = {
name: null;
author: null;
language: null;
}
*/
class Epic{
/*Constructor*/
constructor(name, author, lang){
this.name = name;
this.author = author;
this.language = lang;
}
}
let epic1 = new Epic("Mahabharata", "Vyasa", "Sanskrit");
let epic2 = new Epic("Ramayana", "Valmiki", "Sanskrit");
console.log(epic1);
console.log(epic2);
The result is as follows:
Epic {name: "Mahabharata", author: "Vyasa", language: "Sanskrit"}
Epic {name: "Ramayana", author: "Valmiki", language: "Sanskrit"}
Task 5: Create a class that creates video objects.
/*
let video = {
title: null,
length: null,
host: null,
language: null,
category: null
}
*/
class Video{
/*Constructor*/
constructor(title, len, h, lang, cat){
this.title = title;
this.length = len;
this.host = h;
this.language = lang;
this.category = cat;
}
}
let video1 = new Video("Create a WordPress Theme", "30min", "Nawras Ali", "Arabic", "Education");
console.log(video1);
The result is: Video {title: "Create a WordPress Theme", length: "30min", host: "Nawras Ali", language: "Arabic", category: "Education"}
Task 6: Create a class that creates language objects.
/*
let language = {
name: null,
os: null,
extension: null,
stableRelease: null
}
*/
class Language{
/* Constructor */
constructor(name, os, ext, stableRel){
this.name = name;
this.os = os;
this.extension = ext;
this.stableRelease = stableRel;
}
}
let lang1 = new Language("Python", "Linux, macOS, and Windows", "py", "3.8.3");
let lang2 = new Language("PHP", "Unix-like, Windows", "php", "7.4.10");
console.log(lang1);
console.log(lang2);
The result is as follows:
Language {name: "Python", os: "Linux, macOS, and Windows", extension: "py", stableRelease: "3.8.3"}
Language {name: "PHP", os: "Unix-like, Windows", extension: "php", stableRelease: "7.4.10"}
Task 7: Create a class that creates book objects.
/*
let book = {
weight: null,
pages: null
}
*/
class Book{
/* Constructor */
constructor(weight, pages){
this.weight = weight;
this.pages = pages;
}
}
let book1 = new Book(0.2, 200);
console.log(book1);
The result is: Book {weight: 0.2, pages: 200}
Task 8: Create a class that creates phone objects.
/*
let phone = {
os: null,
ram: null,
storage: null
}
*/
class Phone{
/* Constructor */
constructor(os, ram, stg){
this.os = os;
this.ram = ram;
this.storage = stg;
}
}
let phone1 = new Phone("Android", "2GB", "36GB");
console.log(phone1);
The result is: Phone {os: "Android", ram: "2GB", storage: "36GB"}
Task 9: Create a class that creates marker pens objects.
/*
let markerPen = {
color: null,
price: null
}
*/
class MarkerPen{
/* Constructor */
constructor(color, price){
this.color = color;
this.price = price;
}
}
let markerPen1 = new MarkerPen("red", "2USD");
let markerPen2 = new MarkerPen("Blue", "2.2USD");
console.log(markerPen1);
console.log(markerPen2);
The result is as follows:
MarkerPen {color: "red", price: "2USD"}
MarkerPen {color: "Blue", price: "2.2USD"}
Task 10: Create a class that creates section objects.
/*
let section= {
title: null,
description: null
}
*/
class Section{
/* Constructor */
constructor(title, desc){
this.title = title;
this.description = desc;
}
}
let section1 = new Section("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.");
let section2 = new Section("JavaScript Functions", "Introduction to JavaScript functions and closures.");
let section3 = new Section("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.");
console.log(section1);
console.log(section2);
console.log(section3);
The result is as follows:
Section {title: "JavaScript Basics", description: "Learn the basics of JavaScript in such a simple and easy way."}
Section {title: "JavaScript Functions", description: "Introduction to JavaScript functions and closures."}
Section {title: "JavaScript Arrays", description: "Learn about JavaScript arrays and array helpers."}
Task 11: Create a class that creates song objects.
/*
let song = {
title: null,
artist: null,
album: null
}
*/
class Song{
/* Constructor */
constructor(title, artist, album){
this.title = title;
this.artist = artist;
this.album = album
}
}
let song1 = new Song("Orobroy", "Dorantes", "PASSO A DUE");
console.log(song1);
The result is: Song {title: "Orobroy", artist: "Dorantes", album: "PASSO A DUE"}
Classes 1
A class is a template for creating objects. It includes all the properties that describe the created objects.
Class Methods¶
Task 12: Check the following code.
function UserConstr(fn, ln, e, un){
this.firstName = fn;
this.lastName = ln;
this.email = e;
this.username = un;
this.fullName = function(){
return this.firstName + " " + this.lastName;
};
}
let user1 = new UserConstr("Nawras", "Ali", "nawras@mail.com", "nawras77");
let user2 = new UserConstr("Jad", "Fakhri", "jad@mail.com", "fakhri5");
console.log(user1.fullName());
console.log(user2.fullName());
The result is as follows:
Nawras Ali
Jad Fakhri
Task 13: Check the following code.
class User{
/* Constructor */
constructor(fn, ln, e, un){
this.firstName = fn;
this.lastName = ln;
this.email = e;
this.username = un;
}
/*Methods*/
fullName(){
return this.firstName + " " + this.lastName;
}
}
let user1 = new User("Nawras", "Ali", "nawras@mail.com", "nawras77");
let user2 = new User("Jad", "Fakhri", "jad@mail.com", "fakhri5");
console.log(user1.fullName());
console.log(user2.fullName());
The result is as follows:
Nawras Ali
Jad Fakhri
Task 14: Check the following code.
class Laptop{
/* Constructor */
constructor(proc, ram, ar, stg){
this.processor = proc;
this.ram = ram;
this.additionalRam = ar;
this.storage = stg;
}
/*Methods*/
totalRam(){
return this.ram + this.additionalRam;
}
}
let laptop1 = new Laptop("i5", 2, 4, "0.5TB");
let laptop2 = new Laptop("i3", 2, 8, "1TB");
console.log(laptop1.totalRam());
console.log(laptop2.totalRam());
The result is as follows:
6
10
Task 15: Add the info
method to the following class.
/*
let epic = {
name: null;
author: null;
language: null;
info: function(){
return `${this.name} was written by ${this.author} in the ${this.language} language`;
}
}
*/
class Epic{
/*Constructor*/
constructor(name, author, lang){
this.name = name;
this.author = author;
this.language = lang;
}
/*Methods*/
info(){
return `${this.name} was written by ${this.author} in the ${this.language} language`;
}
}
let epic1 = new Epic("Mahabharata", "Vyasa", "Sanskrit");
let epic2 = new Epic("Ramayana", "Valmiki", "Sanskrit");
console.log(epic1.info());
console.log(epic2.info());
The result is as follows:
Mahabharata was written by Vyasa in the Sanskrit language
Ramayana was written by Valmiki in the Sanskrit language
Task 16: Add the lengthInMinutes
method to the following class.
/*
let video = {
title: null,
length: null,
lengthInMinutes: function(){
return this.length / 60;
}
}
*/
class Video{
/*Constructor*/
constructor(title, len, h, lang, cat){
this.title = title;
this.length = len;
}
/* Methods */
lengthInMinutes(){
return this.length / 60;
}
}
let video1 = new Video("Create a WordPress Theme", "3000");
console.log(video1.lengthInMinutes());
The result is: 50
Task 17: Add the lengthInHours
method to the following class.
/*
let video = {
title: null,
length: null,
lengthInMinutes: function(){
return this.length / 60;
},
lengthInHours: function(){
return this.length / 60 / 60;
},
}
*/
class Video{
/*Constructor*/
constructor(title, len, h, lang, cat){
this.title = title;
this.length = len;
}
/* Methods */
lengthInMinutes(){
return this.length / 60;
}
lengthInHours(){
return this.length / 60 / 60;
}
}
let video1 = new Video("Create a WordPress Theme", "3000");
console.log(video1.lengthInHours());
The result is: 0.83
Task 18: Add the tenItemsPrice
method to the following class.
/*
let markerPen = {
color: null,
price: null,
tenItemsPrice: function(){
return this.price * 10 - this.price;
}
}
*/
class MarkerPen{
/* Constructor */
constructor(color, price){
this.color = color;
this.price = price;
}
/*Methods*/
tenItemsPrice(){
return this.price * 10 - this.price;
}
}
let markerPen1 = new MarkerPen("red", 2);
let markerPen2 = new MarkerPen("Blue", 2.2);
console.log(markerPen1.tenItemsPrice());
console.log(markerPen2.tenItemsPrice());
The result is as follows:
18
19.8
Task 19: Add the twentyItemsPrice
method to the following class.
/*
let markerPen = {
color: null,
price: null,
tenItemsPrice: function(){
return this.price * 10 - this.price;
},
twentyItemsPrice: function(){
return (this.price * 20) - (this.price * 2);
}
}
*/
class MarkerPen{
/* Constructor */
constructor(color, price){
this.color = color;
this.price = price;
}
/*Methods*/
tenItemsPrice(){
return this.price * 10 - this.price;
}
twentyItemsPrice(){
return (this.price * 20) - (this.price * 2);
}
}
let markerPen1 = new MarkerPen("red", 2);
let markerPen2 = new MarkerPen("Blue", 2.2);
console.log(markerPen1.twentyItemsPrice());
console.log(markerPen2.twentyItemsPrice());
The result is as follows:
36
39.6
Task 20: Add the fiftyItemsPrice
method to the following class.
/*
let markerPen = {
color: null,
price: null,
tenItemsPrice: function(){
return this.price * 10 - this.price;
},
twentyItemsPrice: function(){
return (this.price * 20) - (this.price * 2);
},
fiftyItemsPrice: function(){
return (this.price * 50) - 15;
}
}
*/
class MarkerPen{
/* Constructor */
constructor(color, price){
this.color = color;
this.price = price;
}
/*Methods*/
tenItemsPrice(){
return this.price * 10 - this.price;
}
twentyItemsPrice(){
return (this.price * 20) - (this.price * 2);
}
fiftyItemsPrice(){
return (this.price * 50) - 15;
}
}
let markerPen1 = new MarkerPen("red", 2);
let markerPen2 = new MarkerPen("Blue", 2.2);
console.log(markerPen1.fiftyItemsPrice());
console.log(markerPen2.fiftyItemsPrice());
The result is as follows:
85
95
Classes 2
A class is a template for creating objects. It includes all the properties and the methods that describe the created objects.