JavaScript

JavaScript Where To
أماكن كتابة أوامر لغة جافا سكريبت

ستتعلم في هذا الدرس جميع الاماكن التي نكتب بداخلها أوامر الجافا سكريبت سواء داخل صفحة HTML أو بداخل صفحة خارجية ,وما هي أفضل طريقة واكثر طريقة شائعة ,والفروقات بينهم.

التاريخ

18 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

6712

المواضيع

24
الشروحات chevron_left JavaScript Where To chevron_left JavaScript

Java Script Where To
اين تكتب اوامر الجافا سكريبت في صفحة الويب

</> Java Script Where To
أين تكتب أكواد الجافا سكريبت؟

أين تُكتب لغة جافا سكريبت؟

  • Internal تكتب أوامر الجافا سكريبت داخل صفحة HTML عن طريق عنصر <script> داخل عنصر <head > أو عنصر <body>.
  • Inline تكتب أوامر الجافا سكريبت داخل عناصر HTML عن طريق الخصائص Evenet Attributes.
  • External File  تكتب أوامر الجافا سكريبت داخل ملف منفصل بصيغة js وهذة أفضل طريقة بسبب فصل أوامر جافا سكريبت عن أوامر HTML ولأستخدام نفس الأوامر مع أكثر من صفحة HTML.

</> JavaScript HTML Internal
كتابة أوامر الجافا سكريبت بداخل صفحة HTML

تكتب أوامر الجافا سكريبت داخل صفحة HTML في بداخل عنصر <head> وبداخل عنصر <body>:

  • <head> داخل عنصر head.

هذة الطريقة تعد أقل شيوعاً من الطريقة الثانية وذلك لأن المتصفح يُنفذ أوامر لغة جافا سكريبت قبل تنفيذ أوامر HTML  فبالتالي تحدث مشكلة إلا إذا قمنا بمعالجة الأمر برمجياً.

  • <body> بداخل عنصر body قبل علامة الإغلاق body CloseTag داخل script.

هذة الطريقة الأكثر شيوعاً وذلك لأن أوامر الجافا سكريبت ستعمل عند قراءة المتصفح لجميع أوامر HTML قبل تنفيذ أوامر الجافا سكريبت.

أوامر جافا سكريبت بداخل 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>
  <h2>JavaScript Where To</h2>
  <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 معاًَ دون حدوث أي مشكلة ولكن لا يفضل ذلك.

<!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>
ملاحظة
تكتب دائماً أوامر JavaScript بداخل عنصر script داخل صفحة HTML بالطريقة الأولي وهي internal بداخل head و body.

</> JavaScript HTML Element Inline
كتابة أوامر جافا سكريبت بداخل عناصر HTML

تُكتب أوامر جافا سكريبت بطريقة تسمي Inline وهي كتابة أوامر الجافا سكريبت بداخل عناصر HTML عن طريق Evenets يُكتب في onclick Attribute وهي عند تفاعل المستخدم مع صفحة الويب ولكن سنتعلم في الدروس المقبلة JavaScript Events بالتفصيل.

  • تُكتب هذة طريقة Inline بداخل Attributes خصائص أي عنصر.
  • يُكتب أمر جافا سكريبت بداخل Attributes Values قيم الخصائص.
no execution

لكي يتم تنفيذ أوامر جافا سكريبت يجب عليك الضغط علي النص الموجود بداخل العنوان الرئيسي h1 حتي تقوم جافا سكريبت بتنفيذ alert.

<h1 onclick="alert('JavaScript Inline On Click show alert.')">JavaScript</h1>

</> Java Script External File
كتابة أوامر جافا سكريبت بداخل ملف js منفصل

تُكتب لغة Java Script داخل ملف منفصل وذلك عن طريق إنشاء ملف بامتداد .js   ويتم ربطة بملف HTML عن طريق العنصر <script>.

  • تُكتب أوامر جافا سكريبت مباشرة بداخل ملف js بدون الحاجة الي عنصر <script>.
  • عن طريق عنصر <script> نقوم بأضافة attrubite خاصية تسمي"src"  يم الأشارة بداخلها لمسار ملف js لربطة بملف HTML وهذا الملف يكون بجانب ملف HTML.
  • يُمكننا ربط صفحة الجافا سكريبت بصفحة HTML بداخل head أو بداخل Body.


كتابة أوامر جافا سكريبت في صفحة منفصلة:

تعد هذة الطريقة الأفضل والأكثر إنتشاراً لعدة أسباب:

  • استخدام نفس الأوامر مرة اخري

تستطيع إستخدام نفس الأوامر البرمجية الموجودة بداخل ملف js مع أكثر من صفحة  HTML وذلك عن طريق إستدعاء ملف الجافا سكريبت في أكثر من صفحة بدل من تكرار الأوامر مرة ثانية.

  • عملية تنظيمية

وهي فصل أوامر الجافا سكريبت عن أوامر لغة HTML لكي يُعطي لمطوري المواقع السهولة في التعديل علي تلك الأكواد البرمجية مستقبلاً لسهولة الامر.

javaScript External File internal

ربط صفحة جافا سكريبت بصفحة جافا سكريبت بصفحة داخلية بجانب صفحة HTML.

<script src="js/myscript.js"></script>
ملاحظة
  • يمكن ربط أكثر من ملف جافا سكريبت بصفحة HTML واحدة فقط وهذه عملية تنظمية لنفصل أجزاء التطبيق Components لسهولة التعديل مستقبلاً.

</> JavaScript External and internal References
ربط صفحة HTML بصفحة جافا سكريبت عن طريق رابط داخلي أو رابط خارجي

يمكن ربط صفحة HTML برابط صفحة js من بصفحات جانبية بجوار صفحة HTML أو روابط خاررجية من مصادر أخري أو من Domain نطاق اخر.

  • إضافة رابط صفحة js جانبية وهي كتابة مسار الملف مباشرة.
  • إضافة رابط صفحة js خارجية يجب أن نكتب الرابط URL كاملاً https://www.
javaScript External from internal

ربط صفحة جافا سكريبت بصفحة جافا سكريبت بصفحة داخلية بجانب صفحة HTML.

<script src="js/myscript.js"></script>
javaScript External File External Link

ربط صفحة جافا سكريبت بصفحة جافا سكريبت برابط صفحة خارجية

<script src="https://www.closetag.com/js/myscript.js"></script>
لا تقوم بكتابة أوامر داخل عنصر script في هذة الحالة

لا يمكن اضافة عنصر script لربط صفحة جافا سكريبت خارجية ونكتب بداخله أوامر برمجية سوفت تحدث مشكلة وهي تفي الأوامر الخاصة بالصفحة الخارجية فقط.

<script src="/js/myscript.js">
  alert('Text Two');
</script>
في حالة استخدام طريقة جافا سكريبت الداخلية مع ملف خارجي

هذة هي الطريقة الصحيحة وهي استخدام طريقة جافا سكريبت الداخلية مع ملف خارجي كل واحدة في عنصر script مختلف.

<script src="/js/myscript.js"></script>
<script>
  alert('Text Two');
</script>

</> type atribute in script Element
خاصية type atribute مع عنصر script

في الاصدارات القديمة من لغة HTML كان يجب علينا عند إضافة عنصر <script > بداخل صفحة HTML أن نضيف له خاصية type atribute ولكن في أحدث اصدارات لغة HTML غير ضروري أن نُضيف هذه الخاصية.

تم الغاء هذة الخاصية في الاصدارات الحديثة

تم الغاء type atribute في الاصدارات الحديثة من لغة HTML

<script type="text/javascript">
 ....
</script>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.