نتائج البحث
اذهب إلى التنقل
اذهب إلى البحث
العمل مع 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"، كلاهما يُترجَم إلى كلمة "خاصيّة" ولهما نفس المعنى في معظم ...
yield* في JavaScript
التعبير yield* يُستخدَم لتفويض التنفيذ إلى دالة مولِّدة أخرى أو كائن iterable. البنية العامة yield* [[expression]];
expression التعبير الذي سيُعيد كائن iterable. الوصف سيؤدي التعبير yield* إلى المرور على عناصر الكائن ويعطي كل قيمة أعادها هذا الكائن. قيمة التعبير yield* نفسه هي القيمة المُعادة من الكائن iterable عند إغلاقه (أي عندما تكون قيمة الخاصية done هي true). أمثلة تفويض التنفيذ إلى دالة مولِّدة أخرى لاحظ أنَّ القيمة التي تعطيها (yield) الدالة g1() ستُعاد عند استدعاء الدالة next() مثل القيم ...
debugger في JavaScript
التعبير البرمجي debugger يؤدي إلى تفعيل وظيفة التنقيح (debugging functionality) المتاحة، مثل بداية نقطة المقاطعة (breakpoint)؛ لكن إن لم يكن هنالك منقِّح أو وظيفة تنقيح متاحة فلن يكون لهذا التعبير أي أثر. البنية العامة debugger;
أمثلة الشيفرة الآتية فيها التعبير البرمجي debugger الذي يؤدي إلى استدعاء المنقِّح (إن كان موجودًا) عند تنفيذ الدالة function potentiallyBuggyCode() {
debugger;
// شيفرة غير مستقرة فيها علل يجب تنقيحها
}
دعم المتصفحات الميزة Chrome Firefox Internet Explorer Opera Safari ...
class في JavaScript
التصريح عن الصنف (class declaration) يؤدي إلى إنشاء صنف جديد له اسمٌ معيّن يستخدم الوراثة عبر سلسلة prototype. يمكنك أيضًا تعريف الأصناف عبر تعابير تعريف الأصناف (class expression)، لكن التصريح عن الصنف بهذه الطريقة يختلف عن استخدام تعابير تعريف الأصناف في أنَّه لا يسمح بإعادة التصريح عن الصنف مرةً أخرى، وسيرمي (throw) خطأً إن حاولنا ذلك. البنية العامة class name [extends] {
// محتويات الصنف
}
الوصف كما في تعابير تعريف الأصناف، ستُنفَّذ التعابر البرمجية الموجودة ضمن الصنف في نمط ...
return في JavaScript
التعبير البرمجي return يؤدي إلى إنهاء تنفيذ الدالة ويُحدِّد قيمةً لتُعيدها الدالة إلى التعبير الذي استدعاها. البنية العامة return [[expression]];
expression التعبير البرمجي الذي ستُعاد قيمته، وإذا لم يُحدَّد فستُعاد القيمة undefined. الوصف عندما يُستخدَم التعبير البرمجي return في جسم الدالة، فسيتوقف تنفيذ الدالة؛ وستُعاد القيمة المعطية (إن وجِدَت) إلى التعبير الذي استدعى الدالة. فعلى سبيل المثال، ستعيد الدالة الآتية مربّع الوسيط x، على أن يكون الوسيط x رقميًا: function square(x) {
return x * x;
}
var demo = ...
كائنEvalError في JavaScript
الكائن EvalError يُشير إلى حدوث خطأ في الدالة العامة eval(). من المهم ملاحظة أنَّ هذا الاستثناء لم يعد يرمى من لغة JavaScript؛ لكن الكائن EvalError قد بقي لأغراض التوافقية. البنية العامة new EvalError([message])
message وسيط اختياري، وهو وصفٌ نصيٌّ للخطأ موجَّهٌ للبشر. الخاصيات والدوال التابعة للدالة البانية EvalError الخاصيات EvalError.prototype تُمثِّل هذه الخاصية كائن prototype التابعة للكائن EvalError. الدوال الدالة البانية EvalError لا تملك أيّة دوال تابعة لها مباشرةً، وإنما ترث بعض الخاصيات عبر سلسلة prototype. الكائن prototype الخاصيات EvalError.prototype.constructor ...
undefinedفي JavaScript
الخاصية العامة undefined تُمثِّل القيمة الأوليّة undefined في JavaScript. سمات الخاصية undefined قابلة للكتابة لا قابلة للإحصاء لا قابلة للضبط لا البنية العامة undefined
الوصف الخاصية undefined هي خاصيةٌ للكائن العام (global object) أي أنها متغيرٌ في المجال العام، والقيمة الابتدائية للخاصية undefined هي نوع البيانات الأوليّ undefined. الخاصية undefined غير قابلة للضبط وغير قابلة للكتابة في المتصفحات الحديثة (بدءًا من معيار ECMAScript 5)، لكن مع ذلك حاول تجنّب الكتابة عليها. المتغيرات التي لم تُسنَد لها قيمةٌ سيكون نوعها هو ...
switch في JavaScript
التعبير البرمجي switch يُستخدَم لمطابقة قيمة تعبير برمجي باستخدام عبارة case، ثم يُنفِّذ التعابير البرمجية المرتبطة معها. البنية العامة switch (expression) {
case value1:
// التعابير البرمجية التي ستُطبِّق
// عندما تُطابِق قيمةُ التعبير قيمةَ الحالة
[break;]
case value2:
// التعابير البرمجية التي ستُطبِّق
// عندما تُطابِق قيمةُ التعبير قيمةَ الحالة
[break;]
...
case valueN:
...
yield في JavaScript
الكلمة المحجوزة yield تُستخدَم لإيقاف تنفيذ دالة مولِّدة (function*) مؤقتًا واستئناف تنفيذها. البنية العامة [rv] = yield [expression];
expression تعريف القيمة التي ستُعاد من الدالة الموِّلدة عبر بروتوكول iterator، وإذا لم تُحدَّد هذه القيمة فستُعاد القيمة undefined. rv إسناد القيمة الاختيارية المُمرَّرة إلى الدالة next() التي تُستخدَم لاستئناف التنفيذ. الوصف الكلمة المحجوزة yield توقف تنفيذ دالة مولِّدة مؤقتًا وستُعاد قيمة التعبير الذي يلي الكلمة المحجوزة yield إلى التعبير البرمجي الذي استدعى الدالة المولِّدة؛ ويمكن عدّ الكلمة المحجوزة yield على أنها ...
throw في JavaScript
التعبير البرمجي throw يؤدي إلى رمي استثناء (exception) يُعرِّفه المستخدم، وسيؤدي ذلك إلى توقف تنفيذ الدالة الحالية (أي أنَّ التعابير البرمجية بعد throw لن تُنفَّذ) وسينتقل التنفيذ إلى أوّل catch، وإذا لم تكن موجودةً فسينتهي تنفيذ البرنامج. البنية العامة throw expression;
expression التعبير الذي سيُرمى. الوصف يُستخدَم التعبير throw لرمي استثناء، وعندما ترمي استثناءً فإنَّ قيمة expression تُحدِّد ما هي قيمة الاستثناء. أمثلة: throw 'Error2'; // توليد استثناء له قيمة نصية
throw 42; // توليد استثناء ...
const في JavaScript
الثوابت (constants) تكون تابعةً للمجال الكتلي (block scope) بما يُشبه المتغيرات المُعرَّفة عبر التعبير let، لكن قيمة الثوابت لا يمكن أن تتغير عبر إعادة إسناد القيمة، ولا يمكن إعادة تصريحها. البنية العامة const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];
nameN اسم الثابت، ويمكن أن يكون أيّ معرِّف صالح في JavaScript. valueN قيمة الثابت، ويمكن استخدام أيّ تعبير (expression) صالح في JavaScript بما في ذلك الدوال. الوصف تكون الثوابت إما عامةً أو محليةً وتابعةً ...