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

<!DOCTYPE html>
<html>
<body>
    <script>
        // Person هنا قمنا بتعريف كلاس إسمه
        class Person {
            // هنا قمنا بجعل خصائص الكلاس مخفية
            #name;
            #job;
            #age;

// #name هنا قمنا بتجهيز دالة يمكن من خلالها الحصول على قيمة الخاصية
            get name() {
                // هنا جعلنا أحرف الإسم يتم إرجاعها على شكل أحرف كبيرة
                return this.#name.toUpperCase();
            }

// #name هنا قمنا بتجهيز دالة يمكن من خلالها تعيين قيمة الخاصية
            set name(name) {
                // أولاً قمنا سيتم فحص الإسم الذي يتم تمريره لها لمعرفة ما إن كان نص
                if (typeof name !== 'string') {
                    throw 'Name should be a string';
                }
                // ثانياً سيتم فحص الإسم لمعرفة ما إن كان يتكون من 3 أحرف على الأقل
                if (name.length < 3) {
                    throw 'Name should contain at least 3 letters';
                }
                // #name إذا تحققت كل الشروط السابقة سيتم تخزينه في الخاصية
                this.#name = name;
            }

// #job هنا قمنا بتجهيز دالة يمكن من خلالها الحصول على قيمة الخاصية
            get job() {
                return this.#job;
            }

// #job هنا قمنا بتجهيز دالة يمكن من خلالها تعيين قيمة الخاصية
            set job(job) {
                this.#job = job;
            }

// #age هنا قمنا بتجهيز دالة يمكن من خلالها الحصول على قيمة الخاصية
            get age() {
                return this.#age;
            }

// #age هنا قمنا بتجهيز دالة يمكن من خلالها تعيين قيمة الخاصية
            set age(age) {
                this.#age = age;
            }
        }

// p إسمه Person هنا قمنا بإنشاء كائن من الكلاس
        p = new Person();

// p هنا قمنا بإعطاء قيم لجميع خصائص الكائن
        p.name = 'Mhamad';
        p.job = 'Full stack developer';
        p.age = 29;

// p هنا قمنا بطباعة جميع قيم خصائص الكائن
        document.write('Name: ' + p.name + '<br>');
        document.write('Job: ' + p.job + '<br>');
        document.write('Age: ' + p.age + '<br>');
    </script>
</body>
</html>