أين تضع JavaScript في مستند HTML؟
| التصنيف | مقالات وتدوينات |
| وقت النشر |
2022/06/27
|
| الردود |
0
|
السلام عليكم ورحمة الله وبركاته
يُمكن استخدام JavaScript في مستند HTML، هذه المقالة ستتحدث عن أشكال JavaScript في مستندات HTML.
يُمكن وضع JavaScript في النص الأساسي أو الرأس حيث يمكن وضع البرامج النصية داخل النص الأساسي أو القسم الرئيسي لصفحة HTML أو داخل كل من الرأس والجسم ويمكن أيضًا وضع وظيفة JavaScript داخل قسم رأس صفحة HTML ويتم استدعاء الوظيفة عند النقر فوق الزر.
مثال:
<!DOCTYPE html>
<html>
<head>
<script>
function gfg() {
document.getElementById("demo").innerHTML = "Geeks For Geeks";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo" style="color:green;">geeksforgeeks.</p>
<button type="button" onclick="gfg()">click it</button>
</body>
</html>
المخرجات:
قبل النقر فوق الزر.
بعد النقر فوق الزر.
يُمكن أيضًا وضع وظيفة JavaScript داخل قسم النص الأساسي لصفحة HTML ويتم استدعاء الوظيفة عند النقر فوق الزر.
مثال:
<!DOCTYPE html>
<html>
<center>
<body>
<h2>JavaScript in Body</h2>
<p id="demo">geeksforgeeks.</p>
<button type="button" onclick="gfg()">Try it</button>
<script>
function gfg() {
document.getElementById("demo").innerHTML = "Geeks For Geeks";
}
</script>
</body>
</center>
</html>
المخرجات:
قبل النقر فوق الزر.
بعد الضغط على زر.
يمكن أيضًا استخدام JavaScript كملفات خارجية وتكون لها امتداد .js ولاستخدام برنامج نصي خارجي ضع اسم ملف البرنامج النصي في السمة src لعلامة البرنامج النصي ولا يمكن أن تحتوي البرامج النصية الخارجية على علامات البرنامج النصي.
مثال:
<!DOCTYPE html>
<html>
<center>
<body>
<h2>External JavaScript</h2>
<p id="demo">Geeks For Geeks.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script src="myScript.js"></script>
</body>
<center>
</html>
المخرجات:
قبل النقر.
بعد النقر.
مميزات ملفات JavaScript الخارجية:
- يمكن لملفات JavaScript المخزنة مؤقتًا تسريع تحميل الصفحة.
- يجعلJavaScript و HTML أسهل للقراءة والمحافظة عليها.
- الفصل بين كود HTML و JavaScript.
- يركز على إعادة استخدام الكود وهو رمز JavaScript واحد يمكن تشغيله في ملفات HTML مختلفة.
المصدر هنا.
مبادرة العطاء الرقمي
-
التعليقات (0)
لم يتم إضافة ردود حتى الآن...