محرر ويب أونلاين

<!DOCTYPE html>
<html>
<body>
    <script>
		// ليحتوي على الأشياء التي يجب أن يملكها أي كلاس يمثل شكل هندسي Shape هنا قمنا بإنشاء كلاس إسمه
		class Shape {

// الهدف منها أن تطبع مساحة الشكل الهندسي printArea هنا قمنا بإضافة دالة إسمها
			printArea() {
				document.write('No shape is specified! <br>');
			}
		}

// لأنه سيمثل مربع Shape يرث من الكلاس Square هنا قمنا بإنشاء كلاس إسمه
		class Square extends Shape {

// هنا قمنا بإضافة كونستركتور و فيه يتم إنشاء خاصية جديدة
			constructor(side) {
				super();
				this.side = side;
			}

// حتى تطبع المساحة بما يتناسب مع الكلاس printArea() هنا قمنا بإعادة تعريف الدالة
			printArea() {
				document.write('Square area = ' + (this.side * this.side) +  '<br>');
			}
		}

// لأنه سيمثل مستطيل Shape يرث من الكلاس Rectangle هنا قمنا بإنشاء كلاس إسمه
		class Rectangle extends Shape {

// هنا قمنا بإضافة كونستركتور و فيه يتم إنشاء خاصيتين جديدتين
			constructor(length, width) {
				super();
				this.length = length;
				this.width = width;
			}

// حتى تطبع المساحة بما يتناسب مع الكلاس printArea() هنا قمنا بإعادة تعريف الدالة
			printArea() {
				document.write('Rectangle area = ' + (this.length * this.width) +  '<br>');
			}
		}

// Shape عند استدعاءها نمرر لها كائن يرث من الكلاس printCountryInfo هنا قمنا بتعريف دالة إسمها
		function printShapeArea(shape)
		{
			// shape من الكائن الذي نمرره لها في الباراميتر printArea() هنا سيتم استدعاء الدالة
			shape.printArea();
		}

// Rectangle و كائن من الكلاس Square هنا قمنا بإنشاء كائن من الكلاس
		let square = new Square(3);
		let rectangle = new Rectangle(3, 4);
        
        // shapes في مصفوفة إسمها rectangle و square هنا قمنا بوضع الكائنين
        let shapes = [square, rectangle];

// shape و في كل مرة تضع عنصر جديد في المتغير shapes هنا قمنا بإنشاء حلقة تمر على جميع عناصر المصفوفة
		for(let shape of shapes) {
            // لها shape و تمرير الكائن الموجود في printShapeArea() هنا سيتم اسدعاء الدالة
		    printShapeArea(shape);
        }
    </script>
</body>
</html>