التمرين - إضافة التفاعل مع JavaScript

10 دقائق

JavaScript (أو ECMAScript) هي لغة برمجة تساعدك على إضافة التفاعل إلى صفحات الويب الخاصة بك.

على سبيل المثال، يمكنك استخدام JavaScript لتحديد السلوك الذي يحدث عندما يحدد المستخدم زرا، مثل فتح نافذة منبثقة. باستخدام JavaScript، يمكنك إضافة محتوى أو إزالته من صفحة الويب دون إعادة تحميله.

في هذه الوحدة، يمكنك إعداد مثال ملف JavaScript لصفحة الويب الخاصة بك. في ذلك، يمكنك إنشاء زر للتبديل بين السمات الفاتحة والغامقة. بعد ذلك، يمكنك إرفاق الزر برمز JavaScript الذي يقوم بتبديل النسق الفعلي. وأخيرا، يمكنك التحقق من المشروع النهائي باستخدام أدوات مطور المستعرض.

رابط إلى JavaScript

مثل CSS، يمكنك إضافة JavaScript مباشرة إلى ملف HTML، ولكن أفضل الممارسات الموصى بها هي حفظ JavaScript في ملف منفصل. تؤدي إضافة التعليمات البرمجية JavaScript إلى ملف منفصل إلى تسهيل إعادة استخدامه عبر عدة صفحات ويب. على سبيل المثال، يمكنك إنشاء تنبيه منبثق عن طريق إضافة التعليمات البرمجية التالية في أي مكان داخل النص الأساسي لصفحات الويب الخاصة بك:

<script>alert('Hello World')</script>

ومع ذلك، من الأفضل إضافة التعليمات البرمجية JavaScript إلى ملف منفصل يمكنك ربطه بكل ملف يحتاج إلى وظائفك المخصصة.

تتيح لنا علامة <script> البرنامج النصي HTML الارتباط بملف JavaScript خارجي، وهو كيفية تكوين تطبيق الويب الخاص بك في هذا التمرين.

في Visual Studio Code، افتح الملف.index.html
ابحث عن عنصر الإغلاق </body> وضع المؤشر على سطر جديد فوقه. أدخل script:src واضغط على مفتاح الإدخال Enter. تتم إضافة علامات الفتح والإغلاق لعنصر <script> إلى التعليمات البرمجية الخاصة بك.
قم بتعديل <script> العنصر لتحميل app.js الملف كما هو موضح في المثال التالي. تأكد من أنه موجود بعد عنصر الإغلاق </ul> للقائمة.
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...
```

يمكنك وضع <script> العنصر في <head> أو في مكان آخر في <body>. ومع ذلك، فإن وضع <script> العنصر في نهاية <body> المقطع يمكن عرض كافة محتويات الصفحة على الشاشة أولا، قبل تحميل البرنامج النصي.

إضافة التسامح مع الخطأ

في ملف HTML الخاص بك، أضف عنصر <noscript> بعد إغلاق السمة </script>، والذي يمكن استخدامه لعرض رسالة إذا تم إلغاء تنشيط JavaScript.
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
أضف العنصر <noscript> مثال على التسامح مع الخطأ أو تدهور هين في مشاركة الزمن. عند استخدام <noscript> العنصر، يمكن للتعليمات البرمجية الكشف عن الميزة والتخطيط لها عندما لا تكون الميزة مدعومة أو متوفرة.

تعيين وضع صارم

تم تصميم JavaScript ليكون من السهل تعلمه ويسمح للمطور بأخطاء معينة. على سبيل المثال، لا يطرح JavaScript خطأ عند استخدام متغير به خطأ إملائي، وبدلا من ذلك يقوم بإنشاء متغير عمومي جديد. عند البدء في تعلم JavaScript، يكون وجود أخطاء أقل مناسبا. ومع ذلك، يمكن أن يؤدي ذلك إلى كتابة التعليمات البرمجية التي يصعب على المتصفحات تحسينها وأصعب عليك تصحيح الأخطاء.

بادر بالتبديل إلى الوضع المقيد للحصول على أخطاء أكثر فائدة عند ارتكاب الأخطاء.

في Visual Studio Code، افتح app.js الملف وأدخل ما يلي:
```
'use strict';
```

إضافة زر

تحتاج إلى طريقة لتتيح للمستخدمين بالتبديل بين النسق الفاتح والداكن في صفحة الويب الخاصة بك. في هذا التمرين، يمكنك تنفيذ هذه الوظيفة باستخدام عنصر HTML <button> .

في ملف HTML (index.html)، أضف عنصرا <button> . ضع الزر داخل <div> عنصر وأضفه بعد نهاية القائمة (</ul>).
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...
```
لاحظ أن العنصر في <button> هذا المثال يحتوي على سمة فئة يمكنك استخدامها لتطبيق أنماط CSS.
احفظ التغييرات في ملف HTML باستخدام اختصار لوحة المفاتيح Control+S على Windows أو Command+S على macOS.
في ملف CSS (main.css)، أضف قاعدة جديدة باستخدام .btn محدد فئة لزر HTML. لجعل ألوان الزر مختلفة عن ألوان النسق العامة الفاتحة أو الداكنة، قم بتعيين color وbackground-color الخصائص في محدد هذه القاعدة. عند عرض الصفحة، تتجاوز هذه .btn الخصائص الخصائص الافتراضية التي تم تعيينها في body قاعدة ملف CSS.
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```
بعد ذلك، بادر بتعديل القاعدة .btn لإضافة بعض القواعد لحجم الزر، وشكله، ومظهره، وموضعه. ينشئ CSS التالي زرًا دائريًا إلى يمين عنوان الصفحة.
```
.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```

بعد ذلك، قم بتحديث CSS للنسق الفاتح والداكن. حدد بعض المتغيرات الجديدة، --btnBg و --btnFontColor، لتحديد لون الخلفية ولون الخط الخاصين بالزر.

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

احفظ التغييرات على ملف CSS باستخدام اختصار لوحة المفاتيح Control+S على Windows أو Command+S على macOS.

إضافة معالج أحداث

لجعل الزر يقوم بعمل شيء ما عند تحديده، تحتاج إلى معالج أحداث في ملف JavaScript الخاص بك. معالج الأحداث هو طريقة لتشغيل دالة JavaScript عند حدوث حدث على الصفحة. للحصول على زر، نضيف معالج أحداث لحدث click؛ تعمل دالة معالج الأحداث عند وقوع حدث click.

قبل أن تتمكن من إضافة معالج الأحداث، تحتاج إلى مرجع إلى عنصر الزر.

في ملف JavaScript (app.js)، استخدم document.querySelector للحصول على مرجع الزر.
```
const switcher = document.querySelector('.btn');
```
تستخدم الدالة document.querySelector محددات CSS، تماماً مثل تلك التي استخدمتها في ملف CSS خاصتك. switcher هو الآن مرجع إلى الزر في الصفحة.
بعد ذلك، أضِف أحد معالجات الأحداث للحدث click. في التعليمات البرمجية التالية، يمكنك إضافة وحدة استماع للحدث click وتحديد دالة معالج الأحداث التي ينفذها المستعرض عند click وقوع الحدث.
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

في التعليمات البرمجية السابقة، استخدمت الأسلوب toggle لتعديل سمة فئة العنصر <body>. يضيف هذا الأسلوب فئتي light-theme و dark-theme يزيلهما تلقائياً. تطبق هذه التعليمة البرمجية الأنماط الداكنة بدلا من الأنماط الفاتحة إذا نقرت فوقها، ثم الأنماط الفاتحة بدلا من الداكن إذا نقرت مرة أخرى.

ومع ذلك، يجب أيضاً تحديث تسمية الزر لإظهار النسق الصحيح، لذا تحتاج إلى إضافة عبارة ifلتحديد النسق الحالي، وتحديث تسمية الزر.

إليك ما يجب أن تبدو عليه التعليمات البرمجية JavaScript مع إضافة معالج الأحداث:

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

إنها اصطلاح JavaScript لاستخدام حالة الجمل لأسماء المتغيرات مع أكثر من كلمة واحدة؛ على سبيل المثال، المتغير className.

رسالة وحدة التحكم

بصفتك مطور ويب، يمكنك إنشاء رسائل مخفية غير مرئية على صفحة الويب، ولكن يمكنك قراءتها في أدوات المطور في علامة التبويب وحدة التحكم . يعد استخدام رسائل وحدة التحكم مفيدا لرؤية نتيجة التعليمات البرمجية.

في ملف JavaScript، أضف استدعاء إلى console.log بعد العبارة if ، ولكن داخل وحدة استماع الحدث.

بعد إجراء هذا التغيير، يجب أن تبدو التعليمات البرمجية JavaScript الكاملة كما يلي.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

عندما تكون في ملف JavaScript في Visual Studio Code، يمكنك استخدام الإكمال التلقائي من أجل console.log عن طريق إدخال log Enter والضغط عليه.

يمكنك تعريف سلسلة نصية بعلامات اقتباس مفردة أو مزدوجة حول النص.

افتحه في المتصفح

للمعاينة، انقر بزر الماوس index.html الأيمن وحدد فتح في المستعرض الافتراضي، أو أعد تحميل علامة تبويب المستعرض نفسها بالضغط على F5.
حدد الزر داكن الجديد للتبديل إلى النسق الداكن.
تأكد من أن كل شيء يبدو صحيحاً ويتصرف كما هو متوقع. إذا لم يكن الأمر كما هو، يجب مراجعة الخطوات السابقة لمعرفة ما إذا كنت قد فاتك شيء ما.

تحقق من الصفحة في أدوات المطور

افتح أدوات المطور بالنقر بزر الماوس الأيمن وتحديد فحص، أو باستخدام اختصار لوحة المفاتيح F12. بدلاً من ذلك، استخدم اختصار Ctrl+Shift+I على Windows أو Linux، و Option+Command+I على macOS.
حدد علامة التبويب العناصر وحدد علامة التبويب أنماط.
<body> حدد العنصر . في علامة التبويب أنماط ، انظر إلى النسق المطبق. إذا كان النسق الحالي داكن، يتم تطبيق الأنماط dark-theme .

تأكد من تحديد النسق الداكن.
حدد علامة التبويب Console لرؤية الرسالة، console.logcurrent class name: dark-theme.

باستخدام وحدة التحكم، يمكنك الحصول على تفاصيل مثيرة للاهتمام من تعليمتك البرمجية JavaScript. أضِف المزيد من رسائل وحدة التحكم لفهم أجزاء التعليمات البرمجية التي يتم تنفيذها ومعرفة القيم الحالية للمتغيرات الأخرى.

لمعرفة المزيد عن وحدة التحكم، راجع مقالة Console overview.

الملاحظات

هل كانت هذه الصفحة مفيدة؟