نتائج البحث
اذهب إلى التنقل
اذهب إلى البحث
العمل مع JavaScript في ريلز
يغطي هذا الدليل وظيفة Ajax/JavaScript المضمّنة في ريلز (والمزيد)؛ وسوف يمكنك من إنشاء تطبيقات Ajax غنية وديناميكية بكل سهولة! ستتعلم بعد قراءة هذا الدليل: أساسيات Ajax. جافاسكربت الواضحة (Unobtrusive JavaScript). كيف يساعدك مساعدو ريلز المدمجون (built-in helpers). كيفية التعامل مع Ajax من طرف الخادم. الجوهرة Turbolinks. مقدمة لفهم Ajax لفهم أجاكس، يجب أولًا فهم ما يفعله متصفّح الويب بشكل طبيعي. عندما تكتب http://localhost:3000 في شريط عنوان المتصفّح وتضغط على "Go" ، يقدّم المتصفح ("العميل") طلبًا للخادم، ويفرز الاستجابة ثم يجلب ...
CSS/Topics/Pseudo Elements
العنصر الوصف ::after هو آخر عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا. ::backdrop هو صندوقٌ يُعرَض مباشرةً تحت أيّ عنصر معروض في وضع ملء الشاشة. ::before هو أوّل عنصر ابن للعنصر المُحدَّد، ويستخدَم عادةً لإضافة محتوى تزييني للعنصر باستخدام الخاصية content، وهو عنصرٌ سطريٌ افتراضيًا. ::first-letter يؤدي إلى تطبيق الأنماط على أوّل حرف من أوّل سطر من العناصر الكتلية (block-level elements)، شرط ألّا يسبقها محتوى آخر (مثل الصور أو الجداول السطرية). ::first-line ...
محدد العناصر "element" في jQuery
محدد العناصر الوصف يُحدد جميع العناصر التي تحمل اسم الوسم المُعطى. jQuery( "element" ) أُضيف مع الإصدار: 1.0. element العنصر المراد البحث عنه. ويشير إلى tagName في عُقَد DOM (DOM nodes). تستدعى الدالة getElementsByTagName() من JavaScript لإعادة العناصر المناسبة عند استخدام هذا التعبير. أمثلة العثور على جميع عناصر <div>: <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>element مثال على محدد العناصر</title>
<style>
div, span {
width: 60px;
height: 60px;
...
HTML/Topics/Interactive Elements
توفِّر HTML مجوعةً من العناصر التي تساعد في إنشاء عناصر تفاعلية يستطيع المستخدم التفاعل معها. العنصر الوصف <details> يُستخدم العنصر <details> لعرض معلومات إضافية للمستخدم يمكنه إظهارها وإخفاؤها متى شاء. يمكن وضع أيّ نوع من المحتوى ضمن العنصر <details>، وتكون محتوياته مخفيةً افتراضيةً (إلا إذا ضُبِطَت الخاصية open). <summary> يُستخدم العنصر <summary> لعرض خلاصة أو لافتة أو عنوان لمحتويات العنصر<details>.
تصيير العناصر (Rendering Elements) في React
تُشكِّل العناصر أصغر بنية لتطبيقات React. يصف العنصر ما الذي تود رؤيته على الشّاشة: const element = <h1>أهلًا بالعالم</h1>;
على عكس عناصر DOM الخاصّة بالمتصفّح، تكون عناصر React عبارة عن كائنات مُجرّدة سهلة الإنشاء، ويعتني React DOM بتحديث DOM لمُطابقة عناصر React. ملاحظة: قد يخلط المرء العناصر مع مفهوم أكثر انتشارًا وهو المُكوِّنات (components)، سنتحدّث عن المُكوِّنات بالتفصيل في القسم الخاص بها. إنّ العناصر هي الشيء الذي تُصنَع منه المُكوِّنات، ومن المُفضَّل أن تقرأ ذلك القسم قبل المتابعة. تصيير العنصر إلى ...
for في JavaScript
التعبير البرمجي for يُنشِئ حلقة تكرار تتألف من ثلاثة تعبيرات برمجية اختيارية تحيط بها أقواس وتفصل بينها فواصل منقوطة، ويليها تعبيرٌ برمجيٌ (وعادةً يكون قسمًا كتليًا [block statement]) سيُنفَّذ في كل تكرار للحلقة. البنية العامة for ([initialization]; [condition]; [final-expression])
statement
initialization تعبير (يتضمن تعابير الإسناد) أو تصريح عن متغير، ويُستخدَم عادةً لتهيئة متغير العدّاد؛ وهذا التعبير قد يُصرِّح اختياريًا عن متغيرات جديدة باستخدام الكلمة المحجوزة var؛ وهذه المتغيرات ليست محليةً وتابعةً لحلقة التكرار، وإنما ستكون موجودةً في نفس ...
for...of في JavaScript
التعبير البرمجي for...of يمر على الكائنات التي يمكن الدوران على عناصرها (iterable objects) بما في ذلك الكائن Array و Map و Set و String و TypedArray و Arguments، وتنفيذ تعابير برمجية معيّنة على قيمة كل خاصية من خاصيات تلك الكائنات. البنية العامة for (variable of iterable) {
statement
}
variable ستُنسَد قيمة الخاصية مختلفة لهذا المتغير في كل دورة. iterable خاصيات الكائن القابلة للدوران (iterable properties). الوصف الفرق بين حلقتَي التكرار for...of و for...in التعبيران البرمجيان for...in و for...of يُستخدَمان للدوران ...
for...in في JavaScript
التعبير البرمجي for...in يُنشِئ حلقة تكرار تمر على الخاصيات القابلة للإحصاء (enumerable properties) التابعة لأحد الكائنات، ويمكن تنفيذ تعابير برمجية لكل خاصية من خاصيات الكائن. البنية العامة for (variable in object) {
//...
}
variable ستُنسَد قيمة الخاصية مختلفة لهذا المتغير في كل دورة. object الكائن الذي سنمر على الخاصيات القابلة للإحصاء (enumerable properties) التابعة له. الوصف حلقة التكرار for...in تمر على الخاصيات القابلة للإحصاء (enumerable properties) فقط، فالكائنات المُنشَأة من الدوال البانية المُضمَّنة في اللغة مثل Array و Object ...
مقدمة إلى JSX في React
فلننظر إلى تعريف هذا المتغير: const element = <h1>!أهلًا بالعالم</h1>;
إنّ الصّياغة الغريبة السّابقة التي تحتوي على وسم هي ليست سلسلة نصيّة ولا حتى HTML. تُدعى الصّياغة السّابقة JSX وهي عبارة عن امتداد لصياغة JavaScript، نوصي باستخدامها مع React لوصف المظهر الذي ينبغي أن تكون عليه واجهة المستخدم. قد تُذكِّرك JSX بلغات القوالب، ولكنها تمتلك قوة JavaScript الكاملة. تُنتِج JSX عناصر React. سنستعرض إظهار هذه العناصر في DOM في قسم تصيير العناصر (Rendering Elements). سنتحدّث في الفقرات التالية عن أساسيّات JSX ...
JSX في TypeScript
مقدمة JSX بنيةٌ (syntax) مشابهةٌ للغة XML يُمكن تضمينها وتحويلها إلى شيفرة JavaScript صالحة، لكن آلية عملية التحويل تختلف من تطبيق (implementation) إلى آخر. اشتهرت JSX باستخدامها مع مكتبة React، لكنها تملك تطبيقات أخرى غير React. تدعم لغة TypeScript تضمين JSX، وتدقيق الأنواع فيها، وكذا ترجمة JSX إلى JavaScript مباشرةً. ملاحظة حول المصطلحات: نستخدم في هذه الصّفحة كلمة "صِفَة" للإشارة إلى الكلمة الإنجليزيّة "attribute" وكلمة "خاصيّة" للإشارة إلى كلمة "property"، كلاهما يُترجَم إلى كلمة "خاصيّة" ولهما نفس المعنى في معظم ...