مواضيع متقدمة في JavaScript

‫متقدمة‬
‫الثانية‬ ‫الجلسة‬

Arrays-‫املصفوفات‬
‫مستمرة‬ ‫خطية‬ ‫تخزين‬ ‫وحدة‬ ‫هي‬ ‫املصفوفة‬
•‫الصناديق‬ ‫من‬ ‫مجموعة‬ ‫أنها‬ ‫ىلع‬ ‫بها‬ ‫التفكير‬ ‫يمكن‬
•‫مؤشر‬ ‫عليه‬ ‫يطلع‬ ‫والذي‬ ‫به‬ ‫خاص‬ ‫معرف‬ ‫له‬ ‫صندوق‬ ‫كل‬(index)
•‫هو‬ ‫األول‬ ‫العنصر‬ ‫مؤشر‬0

‫توابع‬Array
[] push() concat()
Length shift()
join() pop()
unshift()

‫مصفوفة‬ ‫إنشاء‬
‫صناديق‬ ‫بثالثة‬ ‫مصفوفة‬ ‫إنشاء‬ ‫يتم‬ ‫التالية‬ ‫بالطريقة‬
‫من‬ ‫مصفوفة‬ ‫إنشاء‬ ‫يمكنك‬10‫التالية‬ ‫بالطريقة‬ ‫بداخلها‬ ‫قيم‬ ‫أي‬ ‫بدون‬ ‫صناديق‬
•‫املصفوفة‬ ‫ضمن‬ ‫شيء‬ ‫أي‬ ‫وضع‬ ‫يمكن‬
•‫نمط‬ ‫أي‬ ‫من‬ ‫يكون‬ ‫أن‬ ‫يمكن‬ ‫عنصر‬ ‫كل‬

‫استخدم‬array.join(separator)‫محارف‬ ‫سلسلة‬ ‫إلى‬ ‫مصفوفة‬ ‫لتحويل‬(string)
‫هو‬ ‫افتراضي‬ ‫بشكل‬ ‫يكون‬ ‫الفاصل‬,

‫مصفوفة‬ ‫من‬ ‫عنصر‬ ‫استعادة‬
‫املصفوفة‬ ‫هذه‬ ‫بوجود‬
‫األسلوب‬ ‫بهذا‬ ‫شيء‬ ‫استرجاع‬ ‫يمكن‬

‫مصفوفة‬ ‫يف‬ ‫عنصر‬ ‫تغيير‬
‫املصفوفة‬ ‫هذه‬ ‫بوجود‬
‫األسلوب‬ ‫بهذا‬ ‫املصفوفة‬ ‫ضمن‬ ‫مخزن‬ ‫شيء‬ ‫تغيير‬ ‫يمكن‬

‫أيضًا‬ ‫انظر‬
•‫باستخدام‬ ‫املصفوفة‬ ‫حجم‬ ‫ىلع‬ ‫الحصول‬arr.length
•‫باستخدام‬ ‫املصفوفة‬ ‫آخر‬ ‫إلى‬ ‫اإلضافة‬arr.push(“new”)
•‫باستخدام‬ ‫املصفوفة‬ ‫بداية‬ ‫إلى‬ ‫اإلضافة‬arr.unshift(“new”)
•‫باستخدام‬ ‫املصفوفة‬ ‫آخر‬ ‫من‬ ‫عنصر‬ ‫إزالة‬arr.pop()
•‫باستخدام‬ ‫املصفوفة‬ ‫بداية‬ ‫من‬ ‫عنصر‬ ‫إزالة‬arr.shift()
•‫باستخدام‬ ‫مصفوفتين‬ ‫دمج‬result = arr.concat(arr2)

‫املصفوفات‬ ‫عن‬ ‫املزيد‬
2

‫للمصفوفات‬ ‫متقدمة‬ ‫توابع‬
sort() indexOf() slice()
reverse() lastIndexOf() splice()

‫والعكس‬ ‫الفرز‬
‫مصفوفة‬ ‫عناصر‬ ‫قلب‬
‫مصفوفة‬ ‫عناصر‬ ‫فرز‬

‫عنصر‬ ‫إيجاد‬
‫يرجع‬ ‫التابع‬ ‫فإن‬ ‫املصفوفة‬ ‫يف‬ ‫ليس‬ ‫الهدف‬ ‫العنصر‬ ‫كان‬ ‫إذا‬-1
‫ال‬ ‫عنده‬ ‫من‬ ‫سيبدأ‬ ‫الذي‬ ‫باملكان‬ ‫للتحكم‬ ‫للتابع‬ ‫ثان‬ ‫معامل‬ ‫تمرير‬ ‫يتم‬‫بحث‬
‫باستخدام‬array.indexOf(target)‫ظهور‬ ‫أول‬ ‫عند‬ ‫الهدف‬ ‫العنصر‬ ‫مؤشر‬ ‫إليجاد‬

‫عنصر‬ ‫إيجاد‬

‫عملي‬ ‫تطبيق‬!
‫السابقة‬ ‫األدوات‬ ‫باستخدام‬‫امللف‬ ‫يف‬ ‫التمرين‬ ‫أكمل‬exercise 1.html

‫عكسي‬ ‫بطريق‬ ‫عنصر‬ ‫إيجاد‬
‫باستخدام‬array.lastIndexOf(target)‫آخر‬ ‫من‬ ‫بدءًا‬ ‫ظهور‬ ‫أول‬ ‫عند‬ ‫الهدف‬ ‫العنصر‬ ‫مؤشر‬ ‫إليجاد‬
‫املصفوفة‬ ‫يف‬ ‫عنصر‬

‫خالل‬ ‫من‬ ‫مصفوفة‬ ‫من‬ ‫جزء‬ ‫استخراج‬array.slice(startPosition)
‫خالل‬ ‫من‬ ‫الوقوف‬ ‫يتم‬ ‫أين‬ ‫تحديد‬ ‫يمكن‬array.slice(startPosition, endPosition)

‫وحذفه‬ ‫مصفوفة‬ ‫من‬ ‫جزء‬ ‫اقتطاع‬
•splice()‫املصفوف‬ ‫من‬ ‫مكان‬ ‫أي‬ ‫يف‬ ‫مصفوفة‬ ‫من‬ ‫عناصر‬ ‫لحذف‬ ‫يستخدم‬‫ة‬
•‫خالل‬ ‫من‬ ‫ذلك‬ ‫يتم‬array.splice(position, quantity)
•splice()‫املحذوفة‬ ‫العناصر‬ ‫ترجع‬

‫يف‬ ‫مكان‬ ‫أي‬ ‫يف‬ ‫عنصر‬ ‫إضافة‬
‫املصفوفة‬
•splice()‫املصف‬ ‫من‬ ‫مكان‬ ‫أي‬ ‫يف‬ ‫مصفوفة‬ ‫إلى‬ ‫عناصر‬ ‫إلضافة‬ ‫أيضا‬ ‫يستخدم‬‫وفة‬
•‫خالل‬ ‫من‬ ‫ذلك‬ ‫يتم‬array.splice(position, 0, quantity)
•‫من‬ ‫عنصر‬ ‫أي‬ ‫حذف‬ ‫يتم‬ ‫لم‬ ‫ألنه‬pets‫هي‬ ‫النتيجة‬[]

‫يف‬ ‫مكان‬ ‫أي‬ ‫يف‬ ‫عنصر‬ ‫استبدال‬
‫املصفوفة‬
•‫خالل‬ ‫من‬ ‫ذلك‬ ‫يتم‬array.splice(position, quantity, element(s))

•‫حلقة‬ ‫باستخدام‬ ‫املصفوفة‬ ‫عناصر‬ ‫كافة‬ ‫ىلع‬ ‫العبور‬ ‫يمكن‬for/while
•‫باستخدام‬ ‫أيضا‬ ‫ذلك‬ ‫تحقيق‬ ‫يمكن‬array.foreach(function)

•‫إلى‬ ‫النظر‬ ‫يمكن‬foreach()‫الطريقة‬ ‫بهذه‬
•‫الثالث‬ ‫للعناصر‬ ‫بحاجة‬ ‫كنا‬ ‫إذا‬ ،‫التالي‬ ‫بالشكل‬ ‫يكون‬ ‫أن‬ ‫يجب‬ ‫التابع‬ ‫لذلك‬‫ة‬

•map(function)‫ك‬ ‫يرجعها‬ ‫ثم‬ ‫مصفوفة‬ ‫يف‬ ‫للتابع‬ ‫تنفيذ‬ ‫لكل‬ ‫النتيجة‬ ‫يخزن‬‫خرج‬
•‫إلى‬ ‫النظر‬ ‫يمكن‬map‫الطريقة‬ ‫بهذه‬

‫للـ‬ ‫األساسي‬ ‫املفهوم‬
3

DOM (Document Object Model)
‫للملف‬ ‫الغرضي‬ ‫النموذج‬ ‫وتعني‬
‫املتصفح‬ ‫إلى‬ ‫ما‬ ‫شيء‬ ‫تحميل‬ ‫عند‬
‫بنية‬ ‫إلى‬ ‫تحويله‬ ‫يتم‬DOM

‫مسبقًا‬ ‫شاهدناه‬ ‫ترميز‬

‫التالي‬ ‫بالشكل‬ ‫تبدو‬ ‫الصفحة‬

‫عقدة‬ ‫يمثل‬ ‫ملون‬ ‫صندوق‬ ‫كل‬ ‫الجذر‬ ‫تسمى‬ ‫األىلع‬ ‫العقدة‬(root)
‫فرع‬ ‫هذا‬
(branch)
‫أب‬ ‫عقدة‬ ‫هذه‬
‫لعقدتين‬
‫للعقدة‬ ‫ابن‬ ‫هذا‬
<head>
‫أخت‬ ‫عقدة‬
‫لـ‬<meta>

‫البيضاء‬ ‫املساحات‬ ‫عقد‬
•‫هو‬ ‫البيضاء‬ ‫املساحة‬‫يمكنك‬ ‫ال‬ ‫شيء‬ ‫أي‬‫أي‬ ‫املثال‬ ‫سبيل‬ ‫ىلع‬ ‫رؤيته‬‫تب‬‫اعد‬
•‫فقط‬ ‫بيضاء‬ ‫مسافة‬ ‫ىلع‬ ‫تحتوي‬ ‫نصية‬ ‫عقدة‬ ‫هناك‬ ‫تكون‬ ‫قد‬
•‫هذه‬ ‫وتسمى‬"‫بيضاء‬ ‫عقدة‬"
•‫هذه‬‫األحيان‬ ‫بعض‬ ‫يف‬ ‫مزعجة‬ ‫تكون‬

‫مقارنة‬
‫بين‬ ‫بيضاء‬ ‫عقدة‬ ‫يوجد‬ ‫ال‬<body>‫و‬<p>
‫يوجد‬‫بين‬ ‫بيضاء‬ ‫عقدة‬<body>‫و‬<p>

‫بيضاء‬ ‫عقدة‬ ‫ىلع‬ ‫مثال‬

‫العقد‬ ‫بين‬ ‫العالقات‬
4

Handling the parent parentNode
Handling child nodes childNodes[], firstChild, lastChild
Handling siblings previousSibling, nextSibling

•‫من‬ ‫كل‬ ‫إلى‬ ‫الترميز‬ ‫خالل‬ ‫من‬ ‫الوصول‬ ‫يمكن‬:
•parentNode
•childNodes[], firstChild, lastChild
•previousSibling, nextSibling

‫العقدة‬ ‫إلى‬ ‫الطريق‬ ‫إيجاد‬
‫إلى‬ ‫املسار‬ ‫نعرض‬ ‫التالي‬ ‫املثال‬ ‫يف‬‫بالخطوات‬ ‫عقدة‬:
.1‫بالعقدة‬ ‫التابع‬ ‫يبدأ‬
.2‫يتم‬‫إلى‬ ‫العقدة‬ ‫نوع‬ ‫إضافة‬‫محارف‬ ‫سلسلة‬
.3‫الترميز‬ ‫ينتقل‬‫إلى‬‫األب‬ ‫العقدة‬
.4‫إذا‬‫لها‬ ‫العقدة‬ ‫كانت‬،‫أب‬‫كرر‬(2)‫و‬(3)

‫العقدة‬ ‫إلى‬ ‫الطريق‬ ‫إيجاد‬

‫التنفيذ؟‬ ‫يتم‬ ‫كيف‬
‫الترميز‬ ‫تنفيذ‬ ‫لتحفيز‬،‫عق‬ ‫ىلع‬ ‫بالنقر‬ ‫املستخدم‬ ‫يقوم‬ ‫أن‬ ‫يجب‬‫دة‬.
‫تمت‬ ،‫ذلك‬ ‫لتحقيق‬‫معالجات‬ ‫إضافة‬‫األحداث‬(event handlers)‫إلى‬‫العقد‬.

‫العقد‬ ‫أماكن‬ ‫تحديد‬
getElementsByTagName()
getElementById()
setAttribute()

‫الـ‬ ‫ضمن‬ ‫متواجد‬ ‫شيء‬ ‫كل‬DOM
‫إضافة‬ ‫يمكننا‬/‫حذف‬/‫نسخ‬/‫شيء‬ ‫أي‬ ‫تعديل‬
‫لألغراض‬ ‫الوصول‬ ‫كيفية‬ ‫فهم‬ ‫علينا‬ ‫يجب‬ ،‫ذلك‬ ‫لفعل‬

‫العقد‬ ‫أماكن‬ ‫تحديد‬
5

‫الحقيقي‬ ‫املسار‬ ‫باستخدام‬
‫األولى‬ ‫الطريقة‬:‫الحقيقي‬ ‫املسار‬ ‫استخدام‬
•‫الحصول‬ ‫الصعب‬ ‫من‬ ‫األحيان‬ ‫بعض‬ ‫يف‬
‫الحقيقي‬ ‫املسار‬ ‫ىلع‬
•‫بأخطاء‬ ‫القيام‬ ‫السهل‬ ‫من‬
•‫الـ‬ ‫بنية‬ ‫تكون‬ ‫قد‬DOM‫بعض‬ ‫يف‬ ‫مختلفة‬
‫البرنامج‬ ‫يفشل‬ ‫وبالتالي‬ ‫املتصفحات‬!

‫النمط‬ ‫باستخدام‬
‫الثانية‬ ‫الطريقة‬:‫استخدام‬getElementsByTagName()
•ً‫ال‬‫مث‬ ‫الفعلي‬ ‫الوسم‬ ‫اسم‬ ‫معرفة‬ ‫يتطلب‬ ‫هذا‬:‫ه‬‫ل‬
‫هو‬h2‫أن‬h3‫؟‬
•،‫النمط‬ ‫هذا‬ ‫من‬ ‫العقد‬ ‫من‬ ‫العديد‬ ‫هنالك‬ ‫يكون‬ ‫قد‬
‫تريد‬ ‫منها‬ ‫أي‬ ‫بالضبط‬ ‫تعلم‬ ‫أن‬ ‫يجب‬ ‫لذا‬.

‫االسم‬ ‫باستخدام‬
‫الثالثة‬ ‫الطريقة‬:‫استخدام‬getElementById()
•ً‫ال‬‫مث‬ ،‫فريد‬ ‫اسم‬ ‫عقدة‬ ‫بإعطاء‬ ‫قمت‬ ‫إذا‬:
<element_name id="thing"> . . . </element_name>
‫طريقة‬ ‫أسهل‬ ‫هي‬ ‫الطريقة‬ ‫هذه‬ ‫تكون‬ ‫عندها‬.

‫ما‬ ‫وسم‬ ‫خصائص‬ ‫لتعديل‬ ‫شائعة‬ ‫طريقة‬ ‫هذه‬
‫املثال‬ ‫سبيل‬ ‫ىلع‬:

‫العقد‬ ‫وإضافة‬ ‫إنشاء‬
6

‫العقد‬ ‫وإضافة‬ ‫إنشاء‬
Creating a node createElement(), createTextNode()
Adding a node insertBefore(), appendChild()

‫الويب‬ ‫لصفحة‬ ‫عناصر‬ ‫إضافة‬
‫إضافته‬ ‫نريد‬ ‫ما‬ ‫إنشاء‬ ،ً‫ال‬‫أو‬
‫الـ‬ ‫من‬ ‫جزءًا‬ ‫ليس‬ ‫إنشاؤه‬ ‫تم‬ ‫ما‬DOM‫بعد‬
‫املرغوب‬ ‫املكان‬ ‫يف‬ ‫إضافته‬ ،‫ثانيًا‬

‫عقدة‬ ‫إنشاء‬
‫باستخدام‬createElement()ً‫ال‬‫مث‬:
‫باستخدام‬ ،‫النصوص‬ ‫لعقد‬createTextNode()ً‫ال‬‫مث‬:

‫عقد‬ ‫إضافة‬-
‫مثال‬:

‫عقد‬ ‫إضافة‬-

‫حذف‬–‫العقد‬ ‫نسخ‬
Removing a node removeChild()
Copying a node the_node.cloneNode()
Copying a branch the_node.cloneNode(true)
Adding node(s) dest.appendChild(the_node)

‫والوقت‬ ‫الفأرة‬ ‫أحداث‬
Mouse events onclick
onmousedown
onmouseup
onmouseover
onmouseout
setTimeout setInterval
clearTimeout clearInterval

‫باستخدام‬ ‫األحداث‬ ‫إضافة‬
7

‫باستخدام‬ ‫األحداث‬ ‫إضافة‬
addEventListener()
removeEventListener()

‫باستخدام‬ ‫حدث‬ ‫معالج‬ ‫إضافة‬
‫الـ‬ ‫يف‬ ‫لعنصر‬ ‫حدث‬ ‫إضافة‬HTML
do_something()‫الحدث‬ ‫لهذا‬ ‫بالنسبة‬ ‫الحدث‬ ‫معالج‬ ‫هو‬

‫الـ‬ ‫يف‬ ‫لعنصر‬ ‫حدث‬ ‫إضافة‬ ‫أيضًا‬ ‫يمكن‬JS

‫ثانية‬ ‫طريقة‬

‫حدث‬ ‫معالج‬ ‫من‬ ‫أكثر‬ ‫لديك‬ ‫كان‬ ‫إذا‬
•‫مصفوفة‬ ‫ضمن‬ ‫تخزن‬ ‫األحداث‬ ‫معالجات‬
•‫حدوثه‬ ‫عند‬ ‫تحفيزها‬ ‫يتم‬ ‫الحدث‬ ‫معالجات‬ ‫كل‬
•‫أضيف‬ ‫الذي‬ ‫نفسه‬ ‫بالترتيب‬ ‫تنفيذها‬ ‫يتم‬‫به‬ ‫ت‬

‫حدث‬ ‫معالج‬ ‫إزالة‬
‫حدث‬ ‫معالج‬ ‫إلزالة‬:

‫التوابع‬ ‫عن‬ ‫أكثر‬ ‫معلومات‬
8

‫ىلع‬ ‫سنتعرف‬
Events onload
Functions function
return

‫تابع‬ ‫لتعريف‬ ‫طريقتين‬
...‫الترميز‬(code)‫هنا‬...
‫الويب‬ ‫صفحة‬ ‫تحميل‬ ‫عند‬ ‫تعريفه‬ ‫يتم‬ ‫التابع‬ ‫هذا‬

‫تابع‬ ‫لتعريف‬ ‫طريقتين‬

‫ملتحول‬ ‫تابع‬ ‫بإسناد‬ ‫نقوم‬ ‫هنا‬
‫يص‬ ‫عندما‬ ‫تعريفه‬ ‫يتم‬ ‫التابع‬ ‫هذا‬‫ل‬
‫في‬ ‫املوجود‬ ‫النقطة‬ ‫إلى‬ ‫املتصفح‬‫ها‬
‫البرمجي‬ ‫األمر‬

‫آخر‬ ‫لتابع‬ ‫تابع‬ ‫تمرير‬
‫آخر‬ ‫لتابع‬ ‫تابع‬ ‫تمرير‬ ‫يمكن‬

‫آخر‬ ‫تابع‬ ‫من‬ ‫تابع‬ ‫قيمة‬ ‫إرجاع‬
‫أخر‬ ‫تابع‬ ‫من‬ ‫تابع‬ ‫قيمة‬ ‫إرجاع‬ ‫يمكن‬

‫القادمة‬ ‫للجلسة‬ ‫الواجب‬

مواضيع متقدمة في JavaScript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to مواضيع متقدمة في JavaScript

Similar to مواضيع متقدمة في JavaScript (20)

More from Molham Al-Maleh

More from Molham Al-Maleh (8)

Recently uploaded

Recently uploaded (11)

مواضيع متقدمة في JavaScript