إنشاء مقطع برمجي جافا سكربت - كتاب التقنية الرقمية - الصف 11 - الفصل 1 - المملكة العربية السعودية

📚 إنشاء مقطع برمجي جافا سكربت

المفاهيم الأساسية

دالة `document.getElementById(id)`: تُستخدم للحصول على عنصر من مستند HTML بناءً على معرفه الفريد (Unique Id).

خريطة المفاهيم

```markmap

قائمة همبرغر

آلية العمل

تظهر عند صغر عرض الشاشة

#### عندما يكون عرض الشاشة أقل من 700 بكسل

#### تختفي عناصر القائمة وتظهر الأيقونة

تعرض عناصر القائمة في عمود عند الضغط

يتم التحكم بها بجافا سكربت

خطوات الإنشاء

كتابة جافا سكربت

#### مقطع برمجي لإضافة/إزالة الفئة المستجيبة عند الضغط

##### إنشاء ملف خارجي بامتداد ".js"

##### ربط الملف بملف HTML

##### كتابة الدالة `myFunction()`

###### استخدام `document.getElementById("myMenu")`

###### استخدام جملة `if` الشرطية

###### استخدام معامل المساواة `===`

###### تغيير اسم الفئة باستخدام `+=`

```

نقاط مهمة

• الغرض من المقطع البرمجي هو جعل القائمة تبدل بين إضافة وإزالة فئة الاستجابة (`responsive`).
• عند الضغط على الأيقونة، تُعرض عناصر القائمة في عمود، وهي وظيفة تُستخدم في متصفح الهواتف الذكية.
• في الدالة البرمجية:

- إذا كانت فئة العنصر تساوي `"menu"`، تتم إضافة الفئة `"responsive"` لتصبح `"menu responsive"`.

- إذا كانت غير ذلك، تعود الفئة إلى `"menu"`.

إنشاء مقطع برمجي جافا سكربت

أنت الآن بصدد إنشاء ملف جافا سكربت الذي يجعل القائمة تبدل بين إضافة وإزالة فئة الاستجابة (responsive). يتيح برنامج جافا سكربت عرض الأيقونة عندما يكون عرض الشاشة صغيراً نسبياً. في هذا المثال، عندما يكون عرض الشاشة أقل من 700 بكسل، فإن عناصر القائمة تختفي وتظهر الأيقونة. عندما يضغط المستخدم على الأيقونة، يتم عرض عناصر القائمة في عمود. وتستخدم هذه الوظيفة في متصفح الهواتف الذكية حيث تكون الشاشة صغيرة.

يكون ملف جافا سكربت بامتداد ".js" وهو خارجي ومرتبط بملف HTML.

تُستخدم دالة الحصول على عنصر من مُستند (document.getElementById(id)) لمعرف الفريد (Unique Id) لفئة القائمة (menu) وذلك لتغيير اسم الفئة وفقاً لجملة if الشرطية.

// A function that adjusts the site properties depending on the // screen width of the user's device function myFunction() { // Picking out the element with the corresponding Id from the // Html structure and storing it in the variable 'x' var x = document.getElementById("myMenu"); // Adding a new CSS class to the selected element if the condition is true if (x.className === "menu") { x.className += " responsive"; } else { x.className = "menu"; } }

معامل المساواة في جافا سكربت هو ===.

للحصول على نتيجة صحيحة (True)، فإن المعامل + = يغير اسم الفئة menu.responsive إلى menu.responsive.

للحصول على نتيجة خاطئة (False)، فإن اسم هذه الفئة يبقى كما هو "menu".

وزارة التعليم 285 Ministry of Education 2025 - 1447

--- SECTION: إنشاء مقطع برمجي جافا سكربت --- إنشاء مقطع برمجي جافا سكربت أنت الآن بصدد إنشاء ملف جافا سكربت الذي يجعل القائمة تبدل بين إضافة وإزالة فئة الاستجابة (responsive). يتيح برنامج جافا سكربت عرض الأيقونة عندما يكون عرض الشاشة صغيراً نسبياً. في هذا المثال، عندما يكون عرض الشاشة أقل من 700 بكسل، فإن عناصر القائمة تختفي وتظهر الأيقونة. عندما يضغط المستخدم على الأيقونة، يتم عرض عناصر القائمة في عمود. وتستخدم هذه الوظيفة في متصفح الهواتف الذكية حيث تكون الشاشة صغيرة. يكون ملف جافا سكربت بامتداد ".js" وهو خارجي ومرتبط بملف HTML. تُستخدم دالة الحصول على عنصر من مُستند (document.getElementById(id)) لمعرف الفريد (Unique Id) لفئة القائمة (menu) وذلك لتغيير اسم الفئة وفقاً لجملة if الشرطية. // A function that adjusts the site properties depending on the // screen width of the user's device function myFunction() { // Picking out the element with the corresponding Id from the // Html structure and storing it in the variable 'x' var x = document.getElementById("myMenu"); // Adding a new CSS class to the selected element if the condition is true if (x.className === "menu") { x.className += " responsive"; } else { x.className = "menu"; } } معامل المساواة في جافا سكربت هو ===. للحصول على نتيجة صحيحة (True)، فإن المعامل + = يغير اسم الفئة menu.responsive إلى menu.responsive. للحصول على نتيجة خاطئة (False)، فإن اسم هذه الفئة يبقى كما هو "menu". وزارة التعليم 285 Ministry of Education 2025 - 1447