أماكن وضع كود جافا سكريبت JavaScript
سنتناقش فى هذا الفصل أماكن وضع كود JavaScript فى HTML.
أولًا: وسم <script>
يتم وضع كود JavaScript بين وسمى <script> و <script/>. كالتالى:
<script> document.write("Learn JavaScript is very Easy!"); </script>
كان قديمًا يتم إستخدام سمة type، كالتالى:
<script type="text/javascript"> document.write("Learn JavaScript is very Easy!"); </script>
سمة type غير مطلوبة. JavaScript هي لغة البرمجة النصية الافتراضية في HTML.
تُستخدم وظيفة ()document.write لعرض المحتوى الديناميكي من خلال JavaScript. سنتعرف عليه بالتفصيل لاحقًا.
ثانيًا: أماكن وضع كود JavaScript
توفر JavaScript ثلاثة أماكن لوضع كود JavaScript، وهم:
- داخل وسم <head> أو وسم <body>.
- ملف جافاسكريبت الخارجي External JavaScript.
1. داخل وسم <head>
دعونا نرى مثال لعرض alert بإستخدام كود JavaScript الموجود داخل وسم الـ <head>:
<!DOCTYPE html> <html> <head> <title>JavaScript in Head</title> <meta charset="UTF-8" /> <script> function showAlert() { alert("Learning JavaScript is easy and fun!"); } </script> </head> <body> <h2>JavaScript in Head</h2> <button type="button" onclick="showAlert()">Click to Show Alert</button> </body> </html>
JavaScript in Head
توضيح المثال السابق:
- تم إنشاء دالة بإستخدام كلمة function، ثم بعد ذلك كتبنا إسم الدالة showAlert.
- بعد ذلك قُمنا بإستدعاء الدالة، وللقيام بذلك تحتاج إلى حدث Event. نحن هنا إستخدمنا حدث onclick لاستدعاء دالة ()showAlert.
2. داخل وسم <body>
دعونا نرى مثال أيضًا لعرض alert بإستخدام كود JavaScript الموجود داخل وسم الـ <body>:
<!DOCTYPE html> <html> <head> <title>JavaScript in Body</title> <meta charset="UTF-8" /> </head> <body> <h2>JavaScript in Body</h2> <button type="button" onclick="showAlert()">Click to Show Alert</button> <script> function showAlert() { alert("Learning JavaScript is easy and fun!"); } </script> </body> </html>
JavaScript in Head
من الناحية المثالية ، يجب وضع أكواد JavaScript في اسفل الصفحة ، قبل قفلة وسم الـ <body>؛ لأنه عندما يصادف المتصفح نصًا برمجيًا، فإنه يتوقف مؤقتًا عن عرض بقية الصفحة حتى يحلل النص البرمجي الذي قد يؤثر بشكل كبير أداء موقعك (performance).
3. ملف جافا سكريبت الخارجى – External JavaScript
يمكن أيضًا استخدام JavaScript كملفات خارجية.
ملفات JavaScript لها امتداد لملفها وهو (js.).
لاستخدام ملف JavaScript خارجي ، ضع اسم الملف في سمة src لوسم <script> (يمكن وضع الوسم فى الـ body أو الـ head).
مثال للتوضيح:
File: demo.js:
function showAlert() { alert("Learning JavaScript is easy and fun!"); }
File: index.html:
<!DOCTYPE html> <html> <head> <title>External JavaScript</title> <meta charset="UTF-8" /> <script src="demo.js"></script> </head> <body> <h2>External JavaScript</h2> <button type="button" onclick="showAlert()">Click to Show Alert</button> </body> </html>
لا يمكن أن تحتوي البرامج النصية الخارجية على وسوم <script>.
مزايا ملفات جافا سكريبت الخارجية
يتميز وضع أكواد JavaScript البرمجية في ملفات js الخارجية ببعض المزايا مقارنة بالبرامج النصية المضمنة:
- سيساعد فصل كود HTML وJavaScript على إدارة قاعدة التعليمات البرمجية بشكل أفضل.
- يمكن للمصممين العمل جنبًا إلى جنب مع المبرمجين المتوازيين دون تعارض في التعليمات البرمجية.
- يعمل بشكل جيد مع أنظمة التحكم في إصدار الكود المصدري الحديث مثل GIT و SVN.
- يمكن قراءة الكود بالإضافة إلى HTML بسهولة.
- يتم تخزين ملفات JavaScript الخارجية مؤقتًا بواسطة المتصفحات ويمكنها تسريع أوقات تحميل الصفحة.
- تتوفر العديد من حزم JavaScript الشائعة على أنها مستضافة على شبكات توصيل المحتوى cdn ويمكنك ببساطة الإشارة إليها باستخدام عنوان URL في src ، وبالتالي تجنب نسخ ملف js إلى المجلد المحلي.
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!