ربط ملف جافاسكريبت في HTML وتشغيل السكريبت بشكل صحيح

عليك أولاً بحفظ التغييرات، ثانيًا تأكد من أنك قمت بربط ملف index.js في ملف index.html بشكل صحيح وذلك عن طريق عنصر script كالتالي:

<script defer src="index.js"></script>

ويتم وضع ذلك الجزء داخل عنصر header أو في نهاية عنصر body لكن لا حاجة إلى ذلك حيث أنني قمت بوضع defer من أجل تحميل السكريبت بعد إنتهاء تحميل أكواد HTML وستجد شرح لذلك هنا:

الآن داخل ملف السكريبت حاول تجنب كتابة اسم المتغير باسم name لكونه تابع لخاصية في الكائن Window وهي window.name ولكن تلك الخاصية أصبحت deprecated أي لم تصبح مدعومة بعد الآن وسيتم إزالتها بعد فترة، وستجد خط كما لو أنه شطب على اسم المتغير كما ترى في الكود لديك.

ولطباعة اسم المتغير بعد تغييره سنقوم بكتابة السكريبت كالتالي:

'use strict';

let personName;
personName = 'mohamed';

console.log(personName);

وسيتم طباعة الاسم في الكونسول.

ولاحظ أنني قمت بكتابة 'use strict' أو الوضع الصارم  في البداية وأنصحك باستخدامها عند كتابة سكريبت عادي وليس module حيث يتم تفعيله بشكل إفتراضي في الـ modules وفائدتها كالتالي:

1. في الوضع الصارم، يجب عليك تعريف المتغيرات قبل استخدامها، فإذا قمت بتعيين قيمة لمتغير غير معرف، سيتم إلقاء استثناء.
2. ولا يمكنك استخدام مفاتيح الكلمات المحجوزة كمعرفات، مما يحميك من تعديل قيمة المفاتيح الداخلية للغة.
3. يجبرك على اتباع بعض الممارسات الأفضل في البرمجة، مما يساعد في تجنب بعض الأخطاء الأمنية الشائعة.
4. يتم منع الوصول إلى خصائص الكائنات غير المعرفة، مما يساعد في تجنب الأخطاء الناتجة عن التعامل مع كائنات لا تحتوي على الخصائص المطلوبة.
5. في بعض الحالات، الوضع الصارم يساعد في تحسين أداء الكود، حيث يمكن للمترجم أن يقوم بتنفيذ بعض الأمور بشكل أسرع وأكثر فعالية.
6. أيضًا ستتم معالجة بعض الأخطاء التي تكون صامتة في الوضع العادي Silent Errors، مثلاً ستحصل على أخطاء عند استخدام المتغيرات غير المعرفة بدلاً من إنشاء متغيرات عالمية ضمن نطاق Global.

وهناك أمور أخرى لكن لا تشغل بالك بها حاليًا.

يظهر في الصورة انك لم تقم بحفظ الملف بعد ان اجريت التعديلات الأخيرة،

تأكد من حفظ التعديلات بالضغط على ctrl + s ثم انتبه إلى الدائرة البيضاء بجانب اسم اللمف (حيث ان هذه الدائرة تدل على وجود تعديلات غير محفوظة في هذا الملف).

ثم قم بإعادة تحميل الصفحة والمحاولة مرة ثانية.

بتاريخ 1 دقيقة مضت قال Basel Albarbari:

حفظت التعديلات و نفس النتيجة

يجب عليك الأن تحديث الصفحة في المتصفح حتى تستطيع إظهار التعديلات التي قمت بها 

كما يمكنك أيضاً لتسهيل عملية البرمجة تفعيل ال auto-save في برنامج vs code عن طريق

• الضغط على files في أعلى يسار البرنامج 
• وستظهر لك قائمة أختيارات قم بالضغط على auto-save 

ذلك بالنسبة لحفظ التعديلات على البرنامج أما بالنسبة لتحديث الموقع على المتصفح فيمكنك استخدام live-server كما في الإجابات التالية

حفظت التعديلات و نفس النتيجة

بتاريخ 7 ساعة قال Basel Albarbari:

حفظت التعديلات و نفس النتيجة

 

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

قم بالاطلاع على هذه الصورة لرؤية الطريقة الصحيحة للقيام بذلك.

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