البداية مع JavaScript

البداية

هنا ، ستتعلم مدى سهولة إضافة تفاعل إلى صفحة ويب باستخدام JavaScript. ولكن قبل أن نبدأ ، تأكد من أن لديك بعض المعرفة العملية بـ HTML و CSS.
إذا كنت قد بدأت للتو في عالم تطوير الويب ، فابدأ التعلم من هنا
حسنًا ، لنبدأ بلغة البرمجة النصية الأكثر شيوعًا من جانب العميل.

إضافة كود JavaScript إلى صفحات الويب الخاصة بك

توجد عادةً ثلاث طرق لإضافة JavaScript إلى صفحة ويب:

  • تضمين كود JavaScript كمحتوى للعنصر <script> داخل صفحة الويب.
  • إنشاء ملف JavaScript خارجي بامتداد .js ثم تحميله داخل الصفحة من خلال السمة src الخاصة بالعنصر <script>.
  • وضع كود JavaScript مباشرة داخل وسوم HTML باستخدام سمات خاصة مثل onclick ، onmouseover ، onkeypress ، onload ، إلخ.

سنتعلم في هذا الدرس كل هذه الطرق بالتفصيل:

تضمين كود JavaScript داخل صفحة الويب

يمكننا تضمين كود JavaScript مباشرةً في صفحات الويب الخاصة بنا عن طريق وضعها كمحتوى داخل العنصر <script> ويشير العنصر <script> إلى متصفح الويب بإنه يحتوي على نص برمجي قابل للتنفيذ وليس كود HTML.

مثال
تشغيل
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>تضمين كود JavaScript</title>
  6. </head>
  7. <body>
  8. <script>
  9. var greet = "Hello World!";
  10. document.write(greet);
  11. </script>
  12. </body>
  13. </html>

سيقوم كود JavaScript في المثال أعلاه بطباعة رسالة نصية على صفحة الويب. سوف نتعلم ما تعنيه كل من عبارات JavaScript هذه في الدروس القادمة.

ملاحظة:

لم تعد السمة type للوسم <script> أي <script type="text/javascript"> مطلوبة في HTML5. JavaScript هي لغة البرمجة النصية الافتراضية لـ HTML5.

استدعاء ملف JavaScript خارجي

يمكننا أيضًا وضع كود JavaScript في ملف منفصل بامتداد .js ، ثم استدعاء هذا الملف في صفحة الويب من خلال السمة src الخاصة بالوسم <script>

بناء الجملة
  1. <script src="js/hello.js"></script>

هذه الطريقة مفيدة إذا كنا نريد إتاحة نفس كود JavaScript لصفحات متعددة. في هذه الحالة لن نتحاج إلى تكرار نفس المهمة مرارًا وتكرارًا ، مما يجعل صيانة موقع الويب الخاص بنا أسهل بكثير.
حسنًا ، دعنا ننشئ ملف JavaScript باسم "hello.js" ونضع الكود التالي فيه:

مثال
  1. دالة لعرض رسالة على شكل تنبيه //
  2. function sayHello() {
  3. alert("Hello World!");
  4. }
  6. إستدعاء الدالة عند النقر فوق الزر //
  7. document.getElementById("myBtn").onclick = sayHello;

الآن ، يمكننا استدعاء ملف JavaScript الخارجي هذا داخل صفحة الويب باستخدام العنصر <script> ، كما في المثال التالي:

مثال
تشغيل
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>استدعاء ملف JavaScript خارجي</title>
  6. </head>
  7. <body>
  8. <button type="button" id="myBtn">Click Me<button>
  9. <script src="js/hello.js"></script>
  10. </body>
  11. </html>
ملاحظة:

عادةً عندما يتم تنزيل ملف JavaScript خارجي لأول مرة ، يتم تخزينه في ذاكرة التخزين المؤقت للمتصفح (تمامًا مثل الصور وأوراق الأنماط) ، لذلك لن تحتاج إلى تنزيله عدة مرات من خادم الويب الذي يجعل صفحات الويب اسرع في التحميل

وضع كود JavaScript مباشرة داخل وسوم HTML

يمكننا أيضًا وضع كود JavaScript مباشرة داخل وسوم HTML باستخدام سمات خاصة مثل onclick و onmouseover و onkeypress و onload وما إلى ذلك.
ومع ذلك ، يجب تجنب وضع كمية كبيرة من كود JavaScript مضمنة لأنها ستخلق حالة من الفوضى ما بين HTML مع JavaScript وتجعل من الصعب الحفاظ على كود JavaScript.

مثال
تشغيل
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Inlining JavaScript</title>
  6. </head>
  7. <body>
  8. <button onclick="alert('Hello World!')">Click Me</button>
  9. </body>
  10. </html>

سيُظهر لك المثال أعلاه رسالة تنبيه عند النقر فوق عنصر الزر <button> .

وضع كود البرنامج النصي داخل مستند HTML

يمكن وضع العنصر <script> في قسم <head>أو <body> في مستند HTML . ولكن من الناحية المثالية ، يجب وضع البرامج النصية في نهاية قسم النص ، قبل وسم الإغلاق </body> مباشرة ، مما يجعل تحميل صفحات الويب الخاصة بك أسرع ، لأنها تمنع إعاقة عرض الصفحة الأولية.

يعيق كل عنصر <script> عملية عرض الصفحة حتى يتم تنزيل اكود JavaScript وتنفيذها بالكامل ، لذا فإن وضعها في قسم الرأس (أي عنصر <head>) من المستند دون أي سبب وجيه سيؤثر بشكل كبير على أداء موقع الويب الخاص بك.

نصيحة:

يمكنك وضع أي عدد من عناصر <script> في صفحة ويب واحدة. مع العلم انه سوف تتم معالجتها بالترتيب الذي تظهر به داخل صفحة الويب من أعلى إلى أسفل.

الفرق بين البرمجة النصية من جانب العميل والخادم

يتم تفسير لغات البرمجة النصية من جانب العميل Client-side scripting languages مثل JavaScript و VBScript وما إلى ذلك بواسطة مستعرض الويب ، بينما تعمل لغات البرمجة النصية من جانب الخادم server-side scripting languages مثل PHP و ASP و Java و Python و Ruby وما إلى ذلك على خادم الويب وترسل المخرجات إلى متصفح الويب بتنسيق HTML .
تتميز البرمجة النصية من جانب العميل بالعديد من المزايا مقارنة بنهج البرمجة النصية التقليدية من جانب الخادم. على سبيل المثال ، يمكنك استخدام JavaScript للتحقق مما إذا كان المستخدم قد أدخل بيانات غير صالحة في حقول النموذج وإظهار إشعارات بأخطاء الإدخال وفقًا لذلك في الوقت الفعلي قبل إرسال النموذج إلى خادم الويب للتحقق النهائي من البيانات ومعالجتها من أجل منع الإستخدام غير الضروري لموارد الشبكات واستغلال موارد نظام الخادم.
أيضًا ، تكون الاستجابة من برنامج نصي من جانب الخادم أبطأ مقارنةً بالبرنامج النصي من جانب العميل ، نظرًا لأن البرامج النصية من جانب الخادم تتم معالجتها على الخادم البعيد وليس على الجهاز المحلي للمستخدم.

« التالي السابق »