أين نستخدم الكود
يمكن استخدام كود الجافاسكربت JavaScripts داخل وسمي <body> أو <head> في صفحة HTML
استخدام الجافاسكربت ضمن <body>
في المثال التالي سنكتب التاريخ ضمن وسم <p> عند تحميل الصفحة .
مثال
<html>
<body>
<h1>أول صفحة جافاسكربت</h1>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
لاحظ أن كود الجافاسكربت تم وضعه في أسفل الصفحة وكن متأكداً أنه في آخر الصفحة أي بعد وسم <p> لأنه اذا تم وضع قبله فلن يعمل بشكل جيد .
وظائف وأحداث جافاسكربت JavaScript
يظهر عادة كود الجافاسكربت JavaScript في صفحات HTML عند تحميل الصفحة ولكن ليس هذا مانريده دائماً .
أحياناً نحتاج لإدارج كود الجافاسكربت عند حدوث حدث معين أي عند ضغط المستخدم على زر معين وفي هذه الحالة يمكن اضافة سكربت داخل كود وظيفي function .
تستخدم عادة الأحداث مع الأكواد الوظيفية مثل استدعاء كود وظيفي عند حدوث حدث معين .
ستتعلم المزيد عن الوظائف والأحداث في دروس لاحقة .
استخدام الجافاسكربت ضمن <head>
في المثال التالي سيتم استدعاء كود وظيفي عند الضغط على زر .
مثال
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>أول صفحة جافاسكربت</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">عرض تاريخ اليوم</button>
</body>
</html>
الأكواد ضمن <body> و <head>
يمكنك إدارج أكواد غير محدودة في صفحتك الويب كما يمكن إدراج الأكواد في كلاً من <body> و <head> في نفس الوقت .
كما هو شائع وضع جميع أكواد الجافاكربت ضمن رأس الصفحة <head> أو في نهاية الصفحة وبهذه الطريقة يمكن استخدام جميع الأكواد بدون التعارض مع محتوى الصفحة .
استخدام ملف JavaScript خارجي
- يمكن استخدام أكواد الجافاسكربت في ملفات منفصلة .
- غالباً مايحتوي الملف الخارجي على أكواد يمكن استخدامها في أماكن متعددة ومختلفة .
- ان صيغة ملف الجافاسكربت الخارجي هي .js
ملاحظة : لايجب استخدام وسوم <script></script> عند استخدام الملف الخارجي للجافاسكربت .
لاستخدام كود جافاسكربت منفصل يجب تحديد اسم ومكان الملف باستخدام اللاحقة src ضمن الوسم <script> في صفحة HTML
مثال
<html> <head> <script type="text/javascript" src="xxx.js"></script> </head> <body> </body> </html>
ملاحظة : لاتنسى استدعاء ملف الجافاسكربت تماماً في المكان الذي ترغب إظهار فيه الكود .