JavaScript Where To
أماكن كتابة أوامر لغة جافا سكريبت
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات 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 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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
