التفاعلية باستخدام JavaScript الدرس الرابع

يوليو 3, 2024

9٬585 2 دقائق

في الدروس السابقة، تعلمنا كيفية إنشاء هيكل صفحات الويب باستخدام HTML وتنسيقها باستخدام CSS. الآن، سنتعرف على كيفية إضافة التفاعلية باستخدام JavaScript والوظائف الديناميكية لصفحات الويب. JavaScript هي لغة برمجة تُستخدم بشكل واسع على الويب لإنشاء تجارب مستخدم تفاعلية.

1. مقدمة عن JavaScript

JavaScript هي لغة برمجة نصية يمكن تضمينها في صفحات الويب لجعلها تفاعلية. تُستخدم JavaScript لإضافة وظائف مثل التحقق من صحة النماذج، التحكم في الوسائط المتعددة، وإنشاء الرسوم المتحركة.

2. تضمين JavaScript في صفحات الويب

2.1. تضمين JavaScript داخل وسم `<script>`

يمكنك تضمين JavaScript مباشرة داخل مستند HTML باستخدام وسم <script>.

<!DOCTYPE html>
<html>
<head>
  <title>مثال JavaScript</title>
</head>
<body>
  <h1>مرحبًا بك في صفحة تفاعلية</h1>
  <button onclick="displayMessage()">انقر هنا</button>

  <script>
    function displayMessage() {
      alert("مرحبا بالعالم!");
    }
  </script>
</body>
</html>

2.2. تضمين JavaScript باستخدام ملف خارجي

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

<!DOCTYPE html>
<html>
<head>
  <title>مثال JavaScript</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>مرحبًا بك في صفحة تفاعلية</h1>
  <button onclick="displayMessage()">انقر هنا</button>
</body>
</html>

وفي ملف script.js:

function displayMessage() {
  alert("مرحبا بالعالم!");
}

3. الأساسيات في JavaScript

3.1. المتغيرات

المتغيرات تُستخدم لتخزين البيانات. يمكن تعريف المتغيرات باستخدام var أو let أو const.

let name = "أحمد";
const age = 25;
var city = "القاهرة";

3.2. الأنواع الأساسية

تشمل الأنواع الأساسية في JavaScript النصوص (strings)، الأرقام (numbers)، القيم المنطقية (booleans)، المصفوفات (arrays)، والكائنات (objects).

let message = "مرحبا بالعالم"; // نص
let number = 100; // رقم
let isActive = true; // قيمة منطقية
let fruits = ["تفاح", "موز", "برتقال"]; // مصفوفة
let person = {name: "أحمد", age: 25, city: "القاهرة"}; // كائن

3.3. الدوال

الدوال هي كتل من الكود تُستخدم لتنفيذ مهمة معينة.

function greet(name) {
  console.log("مرحبًا، " + name);
}
greet("أحمد");

4. التعامل مع أحداث DOM

DOM (Document Object Model) هي واجهة برمجية تُمكن JavaScript من التعامل مع مكونات HTML.

4.1. التفاعل مع العناصر

يمكنك الوصول إلى عناصر HTML والتفاعل معها باستخدام JavaScript.

<!DOCTYPE html>
<html>
<head>
  <title>تفاعل مع DOM</title>
  <script>
    function changeText() {
      document.getElementById("myParagraph").innerHTML = "تم تغيير النص!";
    }
  </script>
</head>
<body>
  <p id="myParagraph">هذا نص سيتم تغييره.</p>
  <button onclick="changeText()">انقر لتغيير النص</button>
</body>
</html>

4.2. التعامل مع الأحداث

الأحداث هي إجراءات يتخذها المستخدم (مثل النقر، التمرير، الضغط على مفتاح). يمكنك التعامل مع هذه الأحداث باستخدام JavaScript.

<!DOCTYPE html>
<html>
<head>
  <title>التعامل مع الأحداث</title>
  <script>
    function handleClick() {
      alert("تم النقر على الزر!");
    }
  </script>
</head>
<body>
  <button onclick="handleClick()">انقر هنا</button>
</body>
</html>

5. التفاعلية باستخدام JavaScript التحقق من صحة النماذج

يمكن استخدام JavaScript للتحقق من صحة بيانات النماذج قبل إرسالها إلى الخادم.

<!DOCTYPE html>
<html>
<head>
  <title>التحقق من صحة النموذج</title>
  <script>
    function validateForm() {
      let x = document.forms["myForm"]["fname"].value;
      if (x == "") {
        alert("يجب ملء حقل الاسم");
        return false;
      }
    }
  </script>
</head>
<body>
  <form name="myForm" onsubmit="return validateForm()">
    الاسم: <input type="text" name="fname">
    <input type="submit" value="إرسال">
  </form>
</body>
</html>

6. التفاعلية باستخدام JavaScript التعامل مع الرسوم المتحركة

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

<!DOCTYPE html>
<html>
<head>
  <title>الرسوم المتحركة</title>
  <style>
    #animate {
      width: 50px;
      height: 50px;
      background-color: red;
      position: relative;
    }
  </style>
</head>
<body>
  <button onclick="startAnimation()">ابدأ الرسوم المتحركة</button>
  <div id="animate"></div>

  <script>
    function startAnimation() {
      let elem = document.getElementById("animate"); 
      let pos = 0;
      let id = setInterval(frame, 10);
      function frame() {
        if (pos == 350) {
          clearInterval(id);
        } else {
          pos++; 
          elem.style.top = pos + "px"; 
          elem.style.left = pos + "px"; 
        }
      }
    }
  </script>
</body>
</html>

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