لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 12/03/22 في كل الموقع
-
هل من الممكن اني انشأء مثلا تطبيق تسجيل دخول انشاء حساب بأستخدام fairbase1 نقطة
-
الخطوة 1: إنشاء مشروع Android Studio جديد قم بإنشاء مشروع استوديو android لنشاط فارغ. الخطوة 2: إضافة تبعية إلى المشروع في هذه المناقشة ، سنستخدم درج التنقل في Material Design . لذا أضف تبعية تصميم المواد التالية إلى ملف Gradle على مستوى التطبيق. implementation 'com.google.android.material:material:1.3.0-alpha03' ارجع إلى الصورة التالية إذا لم تتمكن من تحديد موقع ملف Gradle على مستوى التطبيق الذي يستدعي التبعية (ضمن عرض التسلسل الهرمي للمشروع). بعد استدعاء التبعية ، انقر على زر "Sync Now". تأكد من اتصال النظام بالشبكة حتى يقوم Android Studio بتنزيل الملفات المطلوبة. الخطوة 3: إنشاء قائمة في مجلد القائمة قم بإنشاء مجلد القائمة تحت مجلد res. لتنفيذ القائمة. الرجوع إلى الفيديو التالي لإنشاء التخطيط لتنفيذ القائمة. وهذا فيديو توضيحي للخطوة استدعاء التعليمات البرمجية التالية في navigation_menu.xml XML <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:ignore="HardcodedText"> <item android:id="@+id/nav_account" android:title="My Account" /> <item android:id="@+id/nav_settings" android:title="Settings" /> <item android:id="@+id/nav_logout" android:title="Logout" /> </menu> الخطوة 4: العمل مع ملف activity_main.xml قم باستدعاء الكود التالي في activity_main.xml لإعداد الأشياء الأساسية المطلوبة لدرج التنقل. XML <?xml version="1.0" encoding="utf-8"?> <!-- the root view must be the DrawerLayout --> <androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/my_drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" tools:ignore="HardcodedText"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="128dp" android:gravity="center" android:text="أكاديمية حسوب" android:textSize="18sp" /> </LinearLayout> <!-- this the navigation view which draws and shows the navigation drawer --> <!-- include the menu created in the menu folder --> <com.google.android.material.navigation.NavigationView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/navigation_menu" /> </androidx.drawerlayout.widget.DrawerLayout> شيء واحد يجب ملاحظته هو أن رمز درج القائمة لا يزال غير ظاهر على شريط الإجراءات. نحتاج إلى تعيين الرمز ووظائفه المفتوحة والإغلاق برمجيًا. الخطوة 5: قم بتضمين سلاسل Open Close في سلسلة string.xml قم باستدعاء الكود التالي في ملف app / res / القيم / strings.xml. XML <resources> <string name="app_name">Navigation Drawer</string> <!-- للتبديل بين زر فتح الإغلاق لدرج التنقل --> <string name="nav_open">Open</string> <string name="nav_close">Close</string> </resources> الخطوة 6: العمل مع ملف MainActivity قم باستدعاء الكود التالي في ملف MainActivity لإظهار رمز القائمة على شريط الإجراءات وتنفيذ وظيفة الفتح والإغلاق لدرج التنقل. تمت إضافة التعليقات داخل الكود من أجل فهم أفضل. import androidx.annotation.NonNull; import androidx.appcompat.app.ActionBarDrawerToggle; import androidx.appcompat.app.AppCompatActivity; import androidx.drawerlayout.widget.DrawerLayout; import android.os.Bundle; import android.view.MenuItem; public class MainActivity extends AppCompatActivity { public DrawerLayout drawerLayout; public ActionBarDrawerToggle actionBarDrawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // مثيل تخطيط الدرج لتبديل رمز القائمة لفتحه // الدرج وزر الرجوع لإغلاق الدرج drawerLayout = findViewById(R.id.my_drawer_layout); actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.nav_open, R.string.nav_close); // تمرير مفتاح التبديل فتح وإغلاق لمستمع تخطيط الدرج // لتبديل الزر drawerLayout.addDrawerListener(actionBarDrawerToggle); actionBarDrawerToggle.syncState(); // لجعل رمز درج التنقل يظهر دائمًا على شريط الإجراءات getSupportActionBar().setDisplayHomeAsUpEnabled(true); } // تجاوز onOptionsItemSelected () // وظيفة للتنفيذ // العنصر انقر فوق رد الاتصال المستمع // لفتح وإغلاق التنقل // الدرج عند النقر على الأيقونة @Override public boolean onOptionsItemSelected(@NonNull MenuItem item) { if (actionBarDrawerToggle.onOptionsItemSelected(item)) { return true; } return super.onOptionsItemSelected(item); } }
1 نقطة -
الخاصية color تؤثر على لون النص فقط، ولا تؤثر في لون محتوى العنصر path، فلتعديل لون هذا العنصر يمكن استخدام الخاصية fill element.style.fill = 'blue'; أيضًا لاستهداف العنصر المطلوب يجب أن يكون المُعرّف id له غير مكرر لأي عنصر آخر، أي يجب إزالة العنصر div الذي يحمل نفس قيمة المعرف1 نقطة
-
أنصحك بتغير المتصفح إلى أي متصفح أخر أو قم بإيقاف جميع الإضافات في متصفحك وإذا لم ينفع أي حل من هذه الحلول قم بكتابة الكود في محرر أكواد Online أرشح لك هذه المحررات: codePen CodeSandbox وأنصحك أبضا بتصفح موسوعة حسوب في توثيق جافاسكربت من خلال هذا التوثيق سوف تتعلم كيف تربط ملف JavaScript ب ملف HTML وكل شئ تريد معرفته عن لغة الجافاسكربت. ويمكنك أيضا تصفح هذه المقالات لأنها سوف تفيدك كثيرا في تعلم لغة JavaScript مقالات جافاسكربت في أكاديمية حسوب1 نقطة
-
تُدَار الذاكرة في JavaScript تلقائيًا في الخفاء. نحن ننشئ المتغيرات الأولية، والكائنات، والدوال وجميعها تأخذ مكانًا في الذاكرة ولكن هل سألت نفسك ماذا يحدث عندما يصبح أحد هذه الأشياء مهملًا وغير مهم؟ كيف يكتشف ذلك مُحرِّك JavaScript ويتخلص منه؟ هذا ما سنعرفه في هذا الفصل. قابلية الوصول المبدأ الرئيسي لإدارة الذاكرة في JavaScript هو قابلية الوصول (reachability). ببساطة، القيم "القابلة للوصول" هي القيم التي يمكن الوصول إليها واستخدامها بطريقة ما وهذه القيم مخولة لتُخزَّن في الذاكرة. 1- يوجد مجموعة من القيم القابلة للوصول بطبيعة الحال والتي لا يمكن التخلص منها لأسباب وجيهة مثل: المتغيرات المحلية والمُعاملات للدالة الحاليِّة. المتغيرات والمُعاملات لدوال أخرى ضمن السلسلة الحالية في الاستدعاء المُتداخل. المتغيرات العامة. (بالإضافة إلى بعض المتغيرات الأخرى الداخلية) تُدعى هذه القيم «جذورًا» (roots). 2- تكون أي قيمة أخرى قابلة للوصول إن كان بالإمكان الوصول إليها من جذر باستخدام مرجع أو سلسلة من المراجع. مثلًا، إن كان هناك كائن في متغير محلي، ولدى هذا الكائن خاصية تشير لكائن آخر، فإنَّ هذا الكائن قابل للوصول. وهذه الكائنات التي يُشار إليها قابلة للوصول أيضًا. ستجد أمثلة توضيحية لاحقًا. يوجد عملية خلفيَّة في محرك JavaScript تُدعَى «كانس المهملات» (garbage collector) تعمل على مراقبة الكائنات وحذف التي لم تَعُد قابلة للوصول. مثال بسيط أبسط مثال هو: // user يرجِع لكائن let user = { name: "John" }; يُصوِّر السهم في الصورة مرجعًا لكائن. المتغير العام "user" يشير للكائن {name: "John"} (سنُسميه John اختصارًا). الخاصية "name" للكائن John تُخزن قيمة أولية، لذ رُسمَت بداخل الكائن. إن استُبدلَت قيمة المتغير user، فَسَنفقد المرجع الذي يشير إلى الكائن John: user = null; أصبح الكائن John غير قابل للوصول الآن أي لا يوجد طريقة للوصول إليه. سيعمل كانس المهملات على حذف البيانات المتمثلة في الكائن John وتحرير الذاكرة التي يحتلها. مرجعَان لكائن لنفترض أننا نسخنا المرجع من المتغير user إلى متغير آخر باسم admin: // user يرجِع لكائن let user = { name: "John" }; let admin = user; إن قمنا بالأمر السابق ذاته الآن: user = null; فسيكون الكائن قابلًا للوصول من خلال المتغير العام admin، لذا يبقى في الذاكرة. إن استبدلنا محتوى المتغير admin أيضًا فسيُحذَف الكائن. الكائنات المتداخلة الآن ننتقل لمثال أكثر تعقيدًا. ألق نظرة على الشيفرة التالية: function marry(man, woman) { woman.husband = man; man.wife = woman; return { father: man, mother: woman } } let family = marry({ name: "John" }, { name: "Ann" }); تربط الدالة marry كائنين بجعل كلاهما يشير إلى الآخر ثم ترجِع كائنًا جديدًا يحوي كلاهما. هيكل الذاكرة الناتج يكون كالتالي: تكون جميع البيانات قابلة للوصول حتى الآن. دعنا نجرب حذف مرجعين الآن: delete family.father; delete family.mother.husband; ليس من الكافِ حذف أحد المرجِعين فقط، لأنَّ جميع الكائنات ستظل قابلة للوصول لكن إن حذفنا كلا المرجعين، فسنرى عدم وجود أي مرجع إلى الكائن John: لا يهم وجود مرجع من الكائن، إذ ما يجعله قابلًا للوصول هو المراجع التي تشير إليه، لذا فإنَّ الكائن John أصبح غير قابل للوصول وسيُحذَف من الذاكرة مع جميع بياناته التي أصبحت غير قابلة للوصول أيضًا. بعد تجميع البيانات الغير مرغوب بها، يبقى لدينا: جزيرة غير قابلة للوصول يمكن أن تصبح جزيرة من الكائنات المترابطة غير قابلة للوصول وتُحذَف من الذاكرة. الكائن الرئيسي هو الكائن أعلاه ذاته: family = null; تُصبح الصورة في الذاكرة كما يلي: يوضح هذا المثال أهمية مبدأ قابلية الوصول. من الواضح أن الكائنين John و Ann ما زالا مرتبطين ولكل منهما مراجع لبعضهما، لكن ذلك غير كافٍ. الكائن السابق "family" أصبح غير مربوط بالجذر، أي لم يعد هناك أي مرجع إليه لذا فإن الجزيرة كاملةً تصبح غير قابلة للوصول وتُحذَف. الخوارزميات الداخلية تُدعى الخوارزمية الأساسية لتجميع البيانات المهملة «الاستهداف والتمشيط» (mark-and-sweep)؛ تُنفَّذ خطوات جمع البيانات المهملة دوريًا وفق الخطوات التالية: يأخذ كانس المهملات الجذور ويحفظها (يُحدِّدها هدفًا له). ثم يُمشِّط جميع الإشارات الخارجة منها (مراجع لكائنات أخرى) ويحفظها لاستهدافها أيضًا. ثم يُمشِّط جميع الكائنات التي استهدفها مسبقًا ويحفظ مراجعها لاستهدفها لاحقًا. يُمشِّط جميع الكائنات بتلك الطريقة ويتذكرها لكي لا يُمشِّط أي كائن مرةً ثانية مستقبلًا. تستمر العملية مرارًا وتكرارًا حتى يصبح هناك مراجع لم تُمشَّط (غير قابلة للوصول من أي جذر). تُحذَف جميع الكائنات باستثناء تلك استُهدفَت وعُلِّمَت بأنَّها غير مهملة. مثلًا، ليكن هيكل الكائنات لدينا كما يلي: يمكن رؤية جزيرة غير قابلة للوصول في اليمين. الآن لنرى كيف يتعامل معها كانس المهملات وفق خوارزمية الاستهداف والتمشيط. الخطوة الأولى هي تحديد الجذور: ثم تُحدَّد المراجع التي تشير إليها: تُحدَّد المراجع التي تشير لها هذه الكائنات أيضًا: تُعدُّ الكائنات التي لم تُمشَّط أثناء العملية غير قابلة للوصول ويجري حذفها: هذه الآلية التي يعمل بها كانس المهملات. تطبق محركات JavaScript العديد من التحسينات لتحسين هذه الخوارزمية وتسريع عملها بطريقة لا تؤثر على سرعة التنفيذ. بعض التحسينات: التجميع وفق الجيل: تُقَسَّم الكائنات إلى مجموعتين: "كائنات جديدة" و "كائنات قديمة". تُنشَأ العديد من الكائنات ثمَّ تؤدي عملها ثمَّ تموت بسرعة، ويمكن تنظيفها بقوة. وتلك التي تنجو تصبح قديمة وتُفحَص بوتيرة أقل. التجميع التدريجي: إن وُجِد العديد من الكائنات وأردنا المرور خلال جميع الكائنات وتحديدها دفعة واحدة، فقد يأخذ ذلك وقتًا ويظهِِر آنذاك تأخيرٌ ملحوظٌ في التنفيذ، لذا يحاول المُحرِّك تقسيم عملية كنس البيانات المهملة إلى أجزاء ثم تنفيذ الأجزاء واحدًا تلو الآخر بشكل منفصل. قد يتطلب ذلك إجراء حسابات إضافية لتتبع التغييرات، لكن يصبح لدينا الكثير من التأخيرات الغير ملحوظة بدلًا من تأخير واحد كبير. التجميع وقت الخمول: يحاول كانس المهملات العمل عندما يكون المعالج غير مشغول لتقليل أي تأثيرات محتملة على التنفيذ. يوجد تحسينات وإضافات أخرى على خوارزمية كنس المهملات لكن يجب على التوقف هنا لأنَّ المحركات المختلفة تُطبِّق تقنيات مختلفة. والأهم من ذلك، تتغير الأمور بتطور المحركات، لذا فإنَّ التعمق مسبقًا دون الحاجة لذلك لا يستحق العناء. إلا إن كان ذلك رغبة شخصية، فَسنضع بعض الروابط في الأسفل. الخلاصة الأشياء التي يجب معرفتها: تُكنس البيانات المهملة تلقائيًا، وهو أمر لا يمكن فرضه أو تجنبه. تبقى الكائنات في الذاكرة طالما يمكن الوصول إليها من أي جذر. وجود مرجِع للكائن ليس مثل أن يكون قابلًا للوصول من جذر، ويمكن لمجموعة من الكائنات المترابطة أن تصبح غير قابلة للوصول. تستخدم المحركات الحديثة خوارزميات متطورة لكنس البيانات المهملة. يغطي كتاب "The Garbage Collection Handbook: The Art of Automatic Memory Management" (لمؤلفه R. Jones وغيره) بعضًا منها. إن كنت معتادًا على البرمجة بلغات ذات مستوى منخفض، يوجد معلومات مفصَّلة عن كانس المهملات في المُحرِّك V8 في المقال رحلة إلى V8: كنس البيانات المهملة. تنشر مدونة V8 أيضًا مقالات عن التغييرات في إدارة الذاكرة من وقت لآخر. لتتعلم عن كنس البيانات المهملة، يجب أن تتجهز بتعلم أمور V8 الداخلية كما يُفضَّل أن تقرأ مدونة Vyacheslav Egorov الذي عمل كأحد مهندسي V8. أنا أقول V8 لوجود الكثير من المقالات عنه على الإنترنت. العديد من الجوانب متشابهة بالنسبة لباقي المحركات، لكن يختلف كنس البيانات المهملة من عدة نواحي بينها. المعرفة العميقة بالمحركات جيدة عندما تحتاج إلى إجراء تحسين منخفض المستوى. فكِّر في ذلك وليكن خطوتك التالية بعد أن تعتاد على اللغة. ترجمة -وبتصرف- للفصل Garbage collection من كتاب The JavaScript Language. .task__importance { color: #999; margin-left: 30px; } .task__answer { border: 3px solid #f7f6ea; margin: 20px 0 14px; position: relative; display: block; padding: 25px 30px; } code { background-color: rgb(250, 250, 250); border-radius: 3px; } اقرأ أيضًا المقال التالي: النوع الرمزي (Symbol) المقال السابق: الكائنات1 نقطة
