كيفية إنشاء صفحة ويب تفاعلية باستخدام الجافا سكريبت

اقرأ في هذا المقال


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

كيفية إنشاء صفحة ويب تفاعلية باستخدام الجافا سكريبت

فيما يلي خطوات إنشاء صفحة ويب أساسية باستخدام الجافا سكريبت:

  • ابدأ بفتح محرر النصوص المفضل لديك وإنشاء مجلد جديد “يمكنك تسمية المجلد بأي شيء تريده”، في هذا المجلد، قم بإنشاء ملف باسم (index.html).
  • أضف الكود التالي إلى (index.html):

<!DOCTYPE html>

<html>

<head>

<title>My webpage!</title>

</head>

<body>

<h1>Hello, World!</h1>

<h4 id=’date’></h4>

</body>

</html>

  • إذا فتحت صفحة الويب في المتصفح، فسترى فقط (!Hello، World) مطبوعة على الشاشة.
  • بعد ذلك سوف نتعلم كيفية استيراد كود (JavaScript) من ملف منفصل إلى (index.html)، قم بإنشاء مجلد باسم (JavaScript)، داخل هذا المجلد، أنشئ ملفًا باسم (index.js)، داخل ملف (JavaScript) هذا، أضف السطر التالي:

document.getElementById(‘date’).innerHTML = new Date().toDateString();

  • ثم في علامة <head> في (index.html)، أضف السطر التالي من التعليمات البرمجية:

<script async src=”./javascript/index.js”></script>

  • الآن احفظ الملفات وقم بتحديث المتصفح الخاص بك.

مزايا إنشاء صفحة ويب باستخدام الجافا سكريبت

مثل كل لغات البرمجة الأخرى، تمتلك الجافا سكريبت أيضًا مزاياها في إنشاء صفحة الويب ومنها:

  • السرعة: نظرًا لأن الجافا سكريبت هي لغة “مترجمة”، فإنها تقلل الوقت الذي تتطلبه لغات البرمجة الأخرى مثل: (Java) للترجمة.
  • البساطة: تعد جافا سكريبت سهلة الفهم والتعلم، كما أنها بسيطة للمستخدمين والمطورين على حد سواء، ويعد تصميم صفحة ويب بسيط بالنسبة للغات الأخرى للمستخدمين والمطورين.
  • الشعبية: نظرًا لأن جميع المتصفحات الحديثة تدعم جافا سكريبت، فإنها تُرى في كل مكان تقريبًا، تستخدم جميع الشركات الشهيرة (JavaScript) كأداة بما في ذلك: (Google و Amazon و PayPal) وما إلى ذلك.
  • التوافقية: تعمل الجافا سكريبت بشكل مثالي مع لغات البرمجة الأخرى وبالتالي يفضلها العديد من المطورين في تطوير العديد من التطبيقات، حيث يمكننا تضمينها في أي صفحة ويب أو داخل برنامج نصي بلغة برمجة أخرى.

المصدر: JavaScript: The Good Parts,Douglas Crockford, 2008 editionJavaScript: The Definitive Guide,David Flanagan, 2011 editionPROFESSIONAL JAVASCRIPT: FOR WEB DEVELOPERS,Nicholas C. Zakas,2012 edition.JavaScript,Stephen Blumenthal, 2017 edition.


شارك المقالة: