مقدمة
JavaScript غنية عن التعريف. فهي واحدة من أكثر لغات البرمجة شعبية لتطوير الويب. وهي تعمل بشكل مشابه لـ HTML و CSS. وتساعد كل هذه اللغات في تصميم وتطوير التطبيقات والبرامج القائمة على الويب.
إذن كيف تكون JavaScript مفيدة بشكل خاص؟ بمساعدة JavaScript، يمكنك جعل تطبيقات الويب وصفحات الويب الخاصة بك تفاعلية للغاية. لا يوجد مجال للتهاون في المجال الحديث. تحتاج إلى جذب انتباه المشاهدين في الثواني القليلة الأولى وإبقائهم متفاعلين. لا شك أن تصميم الويب المثير للاهتمام والمتجاوب هو أحد أفضل الطرق للقيام بذلك. ولحسن الحظ، تدعم معظم المتصفحات JavaScript. ويمكن تشغيلها على متصفحك بمساعدة بعض المحركات المدمجة.
إضافة JavaScript إلى HTML
إذا كنت تريد استخدام ملفات JavaScript لتطبيق الويب الخاص بك، فأنت بحاجة إلى تشغيلها جنبًا إلى جنب مع ترميز HTML. هناك طريقتان يمكنك اتباعهما لإضافة JavaScript إلى HTML. تتمثل إحدى الطرق في القيام بذلك بشكل مضمن داخل مستند HTML. والطريقة الأخرى هي إضافتها كملف منفصل. سيتم تنزيل هذا الملف جنبًا إلى جنب مع مستند HTML.
في هذا البرنامج التعليمي، سنستكشف بالتفصيل كيف يمكنك إضافة JavaScript إلى HTML باستخدام هاتين الطريقتين.
كيفية إضافة JavaScript إلى مستندات HTML بشكل مضمن
أولاً، سنرى كيف يمكنك إضافة JavaScript إلى مستند HTML بشكل مضمن. للقيام بذلك، يتعين عليك استخدام علامة HTML المخصصة. وهي <script>. تلتف هذه العلامة حول كود JavaScript. يمكنك وضع العلامة في أي مكان في ترميز HTML بالكامل. ويعتمد مكان وضعها على الوقت الذي تريد فيه تحميل JavaScript.
على سبيل المثال، يمكنك وضعها في قسم <head>، أو قسم <body>، أو حتى بعد علامة الإغلاق </body>. إذا كنت تريد إبقاء JavaScript بعيدًا عن المحتوى الرئيسي لكود HTML، فمن الأفضل وضع العلامة في قسم <head>. سيحتوي هذا على كود JavaScript. من ناحية أخرى، قد ترغب في تشغيل كود JavaScript الخاص بك داخل تخطيط صفحة الويب الخاصة بك. إذا كان الأمر كذلك، فيجب عليك وضع العلامة في قسم <body>. ستفعل هذا إذا كنت، دعنا نقول، تستخدم document.write لإنشاء محتوى.
الطريقة الأفضل لفهم ذلك هي من خلال مثال مع كود. ضع في اعتبارك مستند HTML التالي الفارغ. عنوان المتصفح لهذا المستند هو Today’s Date:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> </body> </html> |
كما ترى، لا يوجد أي أثر لـ JavaScript هنا. يحتوي المستند فقط على ترميز HTML حتى الآن. الآن، نود إضافة بعض كود JavaScript بشكل مضمن لجعله يتم تحميله وتشغيله في نفس الوقت. ضع في اعتبارك الجزء التالي من كود JavaScript:
|
1 2 |
let d = new Date(); alert("Today's date is " + d); |
وفقًا للكود أعلاه، فإننا نمكّن صفحة الويب الخاصة بنا من إظهار تنبيه بتاريخ اليوم. لذلك بغض النظر عن وقت تشغيل الزائر للموقع، ستعرض الصفحة التاريخ الحالي.
الآن لإضافة هذا الجزء من كود JavaScript إلى مستند HTML، سنستخدم علامة <script>. بادئ ذي بدء، تحتاج إلى إضافة كود JavaScript بين علامتي <head>. يخبر هذا صفحة الويب أن هذا الكود المحدد يجب أن يتم تحميله قبل المحتوى الآخر للصفحة. يمكنك إضافة الكود أسفل علامتي <title>. إليك كيف يمكنك القيام بذلك:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>تاريخ اليوم</title> <script> let d = new Date(); alert("تاريخ اليوم هو " + d); </script> </head> <body> </body> </html> |
تمت إضافة كود JavaScript الخاص بك الآن. سيعمل موقع الويب الخاص بك ويقوم بتحميل هذا البرنامج النصي قبل بقية الصفحة. عند إطلاق موقعك، ستتلقى تنبيهًا بالتاريخ الحالي، شيء من هذا القبيل:
هذه هي الطريقة التي تضيف بها الكود إلى قسم <head> في مستند HTML. البديل هو إضافة البرنامج النصي إما داخل أو خارج علامات <body>. كما سترى في المثال أدناه، سنضيف جزءًا من الكود بعد قسم <head>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>تاريخ اليوم</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>تاريخ اليوم هو " + d + "</h1>" </script> </body> </html> |
نتيجة لهذا التعديل، سترى شيئًا كهذا عند إعادة تحميل الصفحة:
كيفية إضافة JavaScript إلى HTML باستخدام ملف JavaScript منفصل
تعمل نصوص Javascript البرمجية الصغيرة بشكل جيد مع ملفات HTML. هذا لأنها تعمل على صفحة واحدة أو أقل بأكملها. إذا كنت تعمل مع نصوص برمجية أكبر تشغل صفحات متعددة، فقد يصبح الملف صعب الفهم للغاية. لهذا السبب قد تحتاج إلى إضافته كملف JavaScript منفصل. سيتم تحميل الملف في نفس الوقت مع مستند HTML.
في هذا القسم، سنناقش كيف يمكنك إضافة JavaScript إلى HTML باستخدام ملف منفصل. عادةً ما يتم وضع الكود في ملف .js واحد أو أكثر. سيشير مستند HTML إلى هذه الملفات مثل أي أصل خارجي آخر. الأسباب التي قد تجعلك ترغب في استخدام ملف JavaScript منفصل تمامًا كثيرة. بشكل أساسي، يجعل الكود أسهل بكثير في القراءة والفهم. ناهيك عن أن الملفات المنفصلة تسمح للصفحات المخزنة مؤقتًا بالتحميل بسرعة وتكون صيانتها أسهل نسبيًا أيضًا.
للاستفادة من هذه المزايا، تحتاج إلى معرفة كيفية ربط الاثنين ببعضهما البعض - ملف JavaScript ومستند HTML. لمساعدتك على الفهم، سنأخذ مثالاً لمشروع ويب صغير. يحتوي هذا المشروع المفترض على ملف index.html رئيسي في الجذر، و style.css في دليل css/، و script.js في دليل js/. إليك مشروعنا الصغير:
|
1 2 3 4 5 6 7 8 9 10 11 |
project/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
بالنسبة لتنسيق HTML الخاص بنا، سنستخدم المستند الذي استخدمناه سابقًا:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>تاريخ اليوم</title> </head> <body> </body> </html> |
الآن بعد أن أصبح لدينا المستندان، يمكننا البدء في ربطهما. يتعين علينا إضافة كود JavaScript المتعلق بالتاريخ إلى ملف script.js. ستقوم بإضافته كعنوان <h1> على النحو التالي:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>تاريخ اليوم هو " + d + "</h1>" |
لربط الكود بمستند HTML، ستضيف مرجعًا إلى السكربت. يجب أن يكون المرجع موجودًا إما داخل قسم <body> أو أسفله في قالب HTML. إليك الكود الذي ستستخدمه هنا:
|
1 |
<script src="js/script.js"></script> |
كما ترى، نحن نستخدم علامة <script>. تشير العلامة إلى ملف script.js الموجود في دليل js/ الخاص بالمشروع. إليك كيف سيظهر الكود في مستند HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>تاريخ اليوم</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
إذا أردت، يمكنك إجراء بعض التعديلات الأسلوبية لتجميل صفحتك. على سبيل المثال، دعنا نضيف بعض ألوان الخلفية إلى عنوان <h1>. سنجري هذا التعديل في ملف style.css:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
بما أن التعديل سيظهر في الرأس، فسنشير إليه في قسم <head> من مستند HTML. إليك كيف ستشير إلى ملف CSS هذا:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>تاريخ اليوم</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
الآن بعد أن أجرينا المراجع المطلوبة، يمكنك معاينة التغييرات. قم بتحميل index.html في متصفحك وسترى صفحة مثل هذه:
إذا كنت تريد تحديث الكود، يمكنك تعديل جميع صفحاتك من مكان واحد. هذا يجعل صيانة صفحات الويب سهلة للغاية. هذه هي فائدة استخدام ملف منفصل لسكربتات JavaScript الخاصة بك.
الخاتمة
نأمل أن يكون هذا البرنامج التعليمي قد ساعدك في معرفة المزيد عن عملية إضافة JavaScript إلى HTML. لقد قمنا بتغطية كيفية القيام بذلك داخل مستند HTML بشكل مباشر (inline) بالإضافة إلى كيفية إضافته كملف .js. الآن بعد أن عرفت الأساسيات، يمكنك القيام بالكثير باستخدام JavaScript في HTML.
إليك بعض الموارد من مدونتنا والتي ستساعدك على الاستفادة بشكل أكبر من JavaScript:
- إذا كنت تقوم ببناء تطبيق الويب الخاص بك، فإلقِ نظرة على دليلنا حول كيفية اختيار أفضل إعداد للخادم.
- إذا كنت تريد معرفة كيفية إعداد مدونة باستخدام Ghost، فإلقِ نظرة على هذا البرنامج التعليمي.
- ألقِ نظرة على هذا البرنامج التعليمي لمعرفة كيفية تثبيت Node.js على Ubuntu 18.04.
حوسبة سعيدة!
التعليقات
لا توجد تعليقات بعد. كن أول من يعلق.