T10 BLOGS

بدء العمل مع JavaScript: دليل للمبتدئين

Amine
03/09/2024
JavaScript

المقدمة

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

ماذا ستتعلم

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

الخطوة 1: فهم بناء جملة JavaScript

يمكن إضافة كود JavaScript مباشرة إلى ملفات HTML باستخدام وسم <script>. دعونا ننشئ برنامج JavaScript بسيط يعرض رسالة في الـ console.

افتح محرر الأكواد المفضل لديك وأنشئ ملف HTML جديد باسم index.html. أضف الكود التالي إلى ملفك:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Basics</title>
</head>
<body>

<script>
    console.log('Hello, World!');
</script>

</body>
</html>

الشرح:

  • console.log('Hello, World!');
    : هذه السطر من كود JavaScript يخرج النص “Hello, World!” إلى الـ console. يمكنك عرض هذا الخرج بفتح أدوات المطور في متصفحك والانتقال إلى علامة التبويب “Console”.

الخطوة 2: التصريح عن المتغيرات واستخدامها

تُستخدم المتغيرات لتخزين البيانات التي يمكن استخدامها لاحقًا في كود JavaScript الخاص بك. يمكنك التصريح عن متغير باستخدام الكلمات الرئيسية var، let، أو const. لننشئ برنامج بسيط يستخدم المتغيرات.

let message = 'Hello, JavaScript!';
console.log(message);

الشرح:

  • let message = 'Hello, JavaScript!';: هذه السطر يُصرح عن متغير باسم message ويُسنده القيمة 'Hello, JavaScript!'.
  • console.log(message);: هذه السطر يخرج قيمة المتغير message إلى الـ console.

الخطوة 3: إنشاء واستخدام الدوال

الدوال هي أجزاء قابلة لإعادة الاستخدام من الكود تقوم بمهمة محددة. لننشئ دالة بسيطة تأخذ اسم كمعامل وتعرض رسالة ترحيب.

function greet(name) {
    console.log('Hello, ' + name + '!');
}

greet('Alice');

الشرح:

  • function greet(name) { ... }
    : هذا الكود يعرف دالة باسم greet التي تأخذ معامل name.
  • console.log('Hello, ' + name + '!');: هذه السطر يخرج رسالة ترحيب إلى الـ console، تجمع بين النص “Hello, ” وقيمة المعامل name.
  • greet('Alice');: هذه السطر يستدعي الدالة greet بالمعامل 'Alice'، مما يؤدي إلى عرض الخرج “Hello, Alice!”.

الخطوة 4: التعامل مع الأحداث

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

<button onclick="showAlert()">Click Me!</button>

<script>
function showAlert() {
    alert('Button Clicked!');
}
</script>

الشرح:

  • <button onclick="showAlert()">Click Me!</button>
    : هذه السطر ينشئ عنصر زر يستدعي الدالة showAlert عند النقر عليه.
  • function showAlert() { alert('Button Clicked!'); }
    : هذه الدالة تعرض مربع تنبيه يحتوي على الرسالة “Button Clicked!” عند استدعائها.

الخاتمة

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

لمواصلة التعلم، استكشف هذه الموارد:

#JavaScript #JavaScript للمبتدئين #البرمجة التفاعلية #الدوال في JavaScript #المتغيرات في JavaScript #تطوير الويب #تعليم البرمجة #لغات البرمجة
شارك المقال:

التعليقات

اترك تعليقاً