شرح صفوف ومحتوى الفقرة
تُكتب أوامر JavaScript داخل صفحة HTML داخل عنصر head أو داخل عنصر body.
- داخل عنصر head: هذه الطريقة أقل شيوعًا من الطريقة الثانية، وذلك لأن المتصفح ينفذ أوامر JavaScript قبل تحميل عناصر HTML، مما قد يؤدي إلى مشاكل إذا حاول الكود التعامل مع عناصر لم يتم تحميلها بعد.
- داخل عنصر body: تُكتب أكواد JavaScript عادةً قبل علامة إغلاق body داخل وسم script.
هذه الطريقة هي الأكثر شيوعًا لأنها تضمن أن المتصفح قد قام بتحميل جميع عناصر HTML قبل تنفيذ أكواد JavaScript، مما يقلل من احتمالية حدوث أخطاء.
أوامر جافا سكريبت بداخل script
تُكتب أوامر جافا سكريبت في صفحة HTML داخل عنصر script.
<script>
//JS Code Here
</script>الطريقة الأولى بداخل head
الطريقة الأولى بداخل عنصر head في صفحة HTML.
<head>
<title>JavaScript Where To</title>
<script>
alert('Welcome to JavaScript From CloseTag.com');
</script>
</head>الطريقة الثانية بداخل body
الطريقة الثانية بداخل عنصر body في صفحة HTML، وهي الطريقة الشائعة والأكثر استخدامًا.
<body>
<h1>JavaScript Where To</h1>
<p>Welcome to JavaScript From CloseTag.com</p>
<script>
alert('Welcome to JavaScript From CloseTag.com');
</script>
</body>مشكلة عند كتابة أوامر جافا سكريبت داخل head
حدث خطأ عند التشغيل عندما قمنا بتنفيذ أوامر جافا سكريبت على عنصر داخل صفحة HTML، حيث قام المتصفح بقراءة السطور البرمجية من الأعلى إلى الأسفل، ونفذ أوامر جافا سكريبت قبل قراءة عنصر h1.
<head>
<title>JavaScript Where To</title>
<script>
document.getElementById('title').innerHTML = "JavaScript Where To";
</script>
</head>حل مشكلة أوامر جافا سكريبت داخل head
يتم تنفيذ أوامر جافا سكريبت بعد أن يقوم المتصفح بقراءة جميع محتويات الصفحة.
<head>
<title>JavaScript Where To</title>
<script>
window.onload = function(){
document.getElementById('title').innerHTML = "JavaScript Where To";
}
</script>
</head>كتابة أوامر جافا سكريبت في head و body معًا
يمكننا كتابة أوامر جافا سكريبت في كل من head و body معًا دون حدوث مشكلة، ولكن لا يُفضل ذلك لأنه قد يؤدي إلى صعوبة في تنظيم الكود، كما أن تنفيذ الأكواد داخل head قد يسبب أخطاء إذا حاولت الوصول إلى عناصر HTML لم يتم تحميلها بعد.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Where To</title>
<script>
alert('JavaScript Where To Alert in Head.')
</script>
</head>
<body>
<h1>JavaScript Where To</h1>
<p>Welcome to JavaScript From CloseTag.com</p>
<script>
alert('JavaScript Where To Alert. in Body')
</script>
</body>
</html>