T10 BLOGS

مقدمة عن JavaScript

Amine
05/01/2025
JavaScript

مقدمة

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

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

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

  • ضمن الصفحة:
    <script>
        // الكود هنا
        console.log("مرحبًا بالعالم!");
    </script>

  • كملف خارجي:
    <script src="script.js"></script>

أساسيات JavaScript

1. المتغيرات (Variables)

تُستخدم المتغيرات لتخزين البيانات. في JavaScript، نستخدم let أو const لإنشاء متغيرات.

let name = "أحمد"; // متغير يمكن تغيير قيمته
const age = 25; // متغير ثابت لا يمكن تغيير قيمته

2. أنواع البيانات (Data Types)

  • أرقام (Numbers): let num = 10;
  • نصوص (Strings): let text = "مرحبًا";
  • قيم منطقية (Booleans): let isTrue = true;
  • مصفوفات (Arrays): let fruits = ["تفاح", "موز", "برتقال"];
  • كائنات (Objects): let person = { name: "أحمد", age: 25 };

3. العوامل (Operators)

  • عوامل حسابية: +, -, *, /
  • عوامل مقارنة: ==, ===, !=, >, <
  • عوامل منطقية: &&, ||, !

4. الدوال (Functions)

الدوال تُستخدم لتنفيذ مهمة معينة. يمكن إنشاؤها باستخدام function.

function greet(name) {
    return "مرحبًا " + name;
}

console.log(greet("أحمد")); // 출력: مرحبًا أحمد

5. الشروط (Conditionals)

تُستخدم الشروط لاتخاذ قرارات بناءً على شرط معين.

let age = 18;

if (age >= 18) {
    console.log("أنت بالغ");
} else {
    console.log("أنت قاصر");
}

6. الحلقات (Loops)

تُستخدم الحلقات لتكرار تنفيذ جزء من الكود.

حلقة for:
for (let i = 0; i < 5; i++) {
    console.log("الرقم: " + i);
}
حلقة while:
let i = 0;
while (i < 5) {
    console.log("الرقم: " + i);
    i++;
}

التفاعل مع DOM

DOM (Document Object Model) هو تمثيل لصفحة الويب في شكل كائنات. يمكننا استخدام JavaScript للتعديل على عناصر الصفحة.

مثال: تغيير نص عنصر

<p id="demo">هذا نص</p>
<button onclick="changeText()">غير النص</button>

<script>
function changeText() {
    document.getElementById("demo").innerText = "تم تغيير النص!";
}
</script>

الأحداث (Events)

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

مثال: حدث النقر

<button onclick="alert('تم النقر!')">انقر هنا</button>

مفاهيم متقدمة

1. الوعد (Promises)

تُستخدم للتعامل مع العمليات غير المتزامنة (Asynchronous).

let promise = new Promise(function(resolve, reject) {
    setTimeout(() => resolve("تم التنفيذ!"), 1000);
});

promise.then(result => console.log(result));

2. الدوال السهمية (Arrow Functions)

طريقة مختصرة لكتابة الدوال.

const greet = (name) => "مرحبًا " + name;
console.log(greet("أحمد"));

3. الفئات (Classes)

تُستخدم لإنشاء كائنات مع خصائص ووظائف محددة.

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        return "مرحبًا، أنا " + this.name;
    }
}

let person1 = new Person("أحمد", 25);
console.log(person1.greet());

خاتمة

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

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

#DOM في JavaScript #JavaScript بالعربي #JavaScript للمبتدئين #أحداث JavaScript #أساسيات JavaScript #تطبيقات ويب تفاعلية #تعلم JavaScript #دوال JavaScript #شرح JavaScript #متغيرات JavaScript
شارك المقال:

التعليقات

اترك تعليقاً