نتائج البحث
اذهب إلى التنقل
اذهب إلى البحث
العمل مع 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 بما في ذلك الدوال. الوصف تكون الثوابت إما عامةً أو محليةً وتابعةً ...
if...else في JavaScript
التعبير البرمجي الشرطي (if statement) يُستخدَم لتنفيذ تعبير برمجي معيّن عندما يكون الشرط محققًا، وإذا كان الشرط غير محققٍ فسيُنفِّذ تعبيرًا برمجيًا آخر. البنية العامة if (condition)
statement1
[else
statement2]
condition تعبيرٌ يمكن أن يكون محققًا (true) أو غير محقق (false). statement1 التعبير البرمجي الذي سيُنفَّذ عندما يكون الشرط condition محققًا، ويمكن أن يكون هذا التعبير أيّ تعبيرٍ صالحٍ بما في ذلك تعابير if المتشعبة، ويمكن إنشاء قسم كتلي { ... } لتجميع أكثر من تعبير برمجي ...
JavaScript/Topics
الكائنات العامة في هذا القسم جميع الكائنات العامة المُضمَّنة في لغة JavaScript، إضافةً إلى جميع الخاصيات والدوال التابعة لها. الخاصيات العامة هذه الخاصيات العامة تُعيد قيمةً بسيطةً، فهي لا تُمثِّل دوالًا أو خاصياتٍ تابعة لأحد الكائنات. Infinity NaN undefined null الدوال العامة هذه الدوال العامة -أي التي تستدعى في النطاق العام بدل استدعائها على كائن بعينه- تُعيد نتائجها إلى التعبير البرمجي الذي استدعاها. eval() isFinite() isNaN() parseFloat() parseInt() decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() unescape() الكائنات الأساسية هذه هي الكائنات الأساسية ...
المعامل in في JavaScript
المعامل in يُعيد القيمة true إذا كانت الخاصية المُحدَّدة موجودةً في الكائن أو في سلسلة prototype الخاصة به. البنية العامة prop in object
prop سلسلة نصية أو رمز يُمثِّل اسم الخاصية أو فهرس المصفوفة. object الكائن الذي سنتحقق من وجود الخاصية فيه أو في سلسلة prototype الخاصة به. الوصف يوضِّح المثال الآتي بعض حالات استخدام المعامل in: // المصفوفات
var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
0 in trees // true
3 in trees ...
break في JavaScript
التعبير البرمجي break يؤدي إلى إنهاء حلقة التكرار الحالية أو التعبير switch أو label، وستنقل تنفيذ البرنامج إلى التعبير البرمجي الذي يلي التعبير الذي انتهى. البنية العامة break [label];
label مُعرِّفٌ اختياريٌ مرتبطٌ بلافتة التعبير البرمجي، وإذا كان التعبير ليس حلقةً تكراريةً أو switch فسيصبح هذا المُعرِّف مطلوبًا وليس اختياريًا. الوصف يتضمن التعبير break إمكانية توفير لافتة اختيارية تسمح للبرنامج بالخروج من التعبير المُسمى؛ ويجب أن يكون التعبير break موجودًا ضمن ذاك التعبير المسمى. أمثلة استخدام break مع حلقة while ...
الدوال في JavaScript
على وجه العموم، الدالة هي «برنامجٌ فرعي» (subprogram) الذي يمكن استدعاؤه من شيفرة خارجية (أو داخلية، في حال أردنا استدعاء الدالة تعاوديًا [recursively])؛ وتحتوي الدالة على سلسلةٍ من التعابير البرمجية التي تسمى «جسم الدالة»، ويمكن تمرير قيم إلى الدالة، وتستطيع الدالة أن تعيد قيمةً ما. تُعدّ الدوال في JavaScript على أنَّها كائنات من الصنف الأول (first-class objects)، لأنها تملك خاصيات ودوال مثل بقية الكائنات، لكن ما يميّزها عن بقية الكائنات هو إمكانية استدعائها، إذ إنَّها كائنات من النوع Function. الوصف ...
while في JavaScript
التعبير البرمجي while يُنشِئ حلقة تكرار تُنفِّذ تعبيرًا برمجيًا معيّنًا طالما كان الشرط محققًا (true)، وسيتم التحقق من الشرط قبل تنفيذ التعبير البرمجي. البنية العامة while (condition)
statement
condition تعبير سيتم التحقق من صحته قبل كل تكرار، وإذا كانت قيمة الشرط condition هي true فسيُنفَّذ التعبير البرمجي statement، وعندما تصبح قيمة الشرط condition مساويةً للقيمة false فسينتقل التحكم إلى التعبير البرمجي الذي يلي حلقة while. statement التعبير البرمجي الذي سيُنفَّذ طالما كان الشرط محققًا؛ ولتنفيذ أكثر من تعبير برمجي ...
var في JavaScript
تعبير variable يُصرِّح عن متغير، ويمكن تهيئة قيمته الابتدائية اختياريًا. البنية العامة var varname1 [= value1] [, varname2 [= value2] ... [, varnameN [= valueN]]];
varnameN اسم المتغير، ويمكن أن يكون أيّ معرِّف صالح في JavaScript. valueN القيمة الابتدائية للمتغير، ويمكن استخدام أيّ تعبير (expression) صالح في JavaScript، والقيمة الافتراضية هي undefined. الوصف التصريح عن المتغيرات سيُعالَج قبل تنفيذ أيّة شيفرات أينما وقعت، ومجال (scope) المتغيرات المُصرَّح عنا عبر var هو سياق التنفيذ الحالي (execution context)، كمجال الدوال، أو المجال ...
continue في JavaScript
التعبير البرمجي continue يؤدي إلى تجاوز تنفيذ التعابير البرمجية في التكرار الحالي (iteration) في حلقة التكرار الحالية أو حلقة التكرار المسماة (عبر لافتة)، وسيستمر تنفيذ الحلقة بدءًا من التكرار التالي. البنية العامة continue [label];
label مُعرِّفٌ اختياريٌ مرتبطٌ بلافتة التعبير البرمجي. الوصف على النقيض من التعبير break، لن يؤدي التعبير continue إلى إنهاء تنفيذ الحلقة كليًّا، وإنما: في حلقات while سيؤدي إلى الانتقال إلى الشرط. في حلقات for سيؤدي إلى الانتقال إلى تعبير تحديث معاملات حلقة التكرار. يمكن أن يضمّ ...
let في JavaScript
تعبير let يُصرِّح عن متغير محلي للقسم الكتلي، ويمكن تهيئة قيمته الابتدائية اختياريًا. البنية العامة let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];
varnameN اسم المتغير، ويمكن أن يكون أيّ معرِّف صالح في JavaScript. valueN القيمة الابتدائية للمتغير، ويمكن استخدام أيّ تعبير (expression) صالح في JavaScript. الوصف التعبير let يسمح بالتصريح عن متغيرات يكون مجالها (scope) محدودًا إلى القسم الكتلي (block statement)، أو إلى التعبير (expression) الذي اُستخدِمَ فيه؛ وهو على النقيض من الكلمة المحجوزة ...
Document.elementsFromPoint()
تنبيه: هذه تقنيّة تجريبيّة، انظر جدول دعم المتصفّحات قبل استخدام هذا التّابع في شيفرة إنتاجيّة. يعيد التّابع Document.elementsFromPoint() مصفوفة بجميع العناصر الموجودة في نقطة الإحداثيّات المعطاة (حسب إطار العرض [viewport]). البنية العامة var elements = document.elementsFromPoint(x, y);
x الإحداثيّات الأفقيّة لنقطة ما. y الإحداثيّات الرأسية لنقطة ما. القيمة المعادة مصفوفة كائنات من النّوع Element. مثال جزء HTML: <div>
<p>محتوى نصيّ</p>
</div>
<p>العناصر في الإحداثيّات 30 و 20</p>
<div id="output"></div>
جزء JavaScript: var output = document.getElementById("output");
if (document.elementsFromPoint) {
var elements = document.elementsFromPoint(30, ...
التابع jQuery.data() في jQuery
يخزِّن هذا التابع بيانات اعتباطيَّة متعلقة بعنصر محدَّد أو يعيد القيمة التي خُزِّنت لهذا العنصر. jQuery.data( element, key, value ) القيم المعادة يعيد كائنًا من النوع Object. الوصف يخزِّن هذا التابع بيانات اعتباطيَّة ويقرنها بعنصر محدَّد، ويعيد القيمة التي ضُبِطَت. jQuery.data( element, key, value ) أُضيف مع الإصدار: 1.2.3. element العنصر DOM الذي يراد ربط البيانات به. key سلسلة نصية تمثِّل الاسم الذي ستسمى البيانات المخزَّنة به. value أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيَّة استعمال ...
التابع jQuery.data() في jQuery
يخزِّن هذا التابع بيانات اعتباطيَّة متعلقة بعنصر محدَّد أو يعيد القيمة التي خُزِّنت لهذا العنصر. jQuery.data( element, key, value ) القيم المعادة يعيد كائنًا من النوع Object. الوصف يخزِّن هذا التابع بيانات اعتباطيَّة ويقرنها بعنصر محدَّد، ويعيد القيمة التي ضُبِطَت. jQuery.data( element, key, value ) أُضيف مع الإصدار: 1.2.3. element العنصر DOM الذي يراد ربط البيانات به. key سلسلة نصية تمثِّل الاسم الذي ستسمى البيانات المخزَّنة به. value أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيَّة استعمال ...
Document.querySelector()
يُعيد التّابع Document.querySelector() أول كائنٍ من النّوع Element الذي يُمثّل العنصر المُوافِق للمُحدِّد أو المحدّدات المعطاة. ويُعيد القيمة null في حالة لم يجِد أيّ عنصر. مُلاحظة: يتمّ البحث باستعمال المرور على العمق أولًا قبل التّرتيب (depth-first pre-order traversal) حول عقد المستند بدايةً من أول عنصر في هيكل المستند ويُكرّر (iterating) حول العقد في القائمة مرتّبةً حسب عدد العقد الأبناء. البنية العامة element = document.querySelector(selectors);
selectors سلسلة نصيّة من النّوع DOMString تحتوي على مُحدّد واحدٍ أو أكثر لمُوافقته مع عناصر المستند ...
الخاصية .jquery في jQuery
الخاصية .jquery القيم المعادة تعيد سلسلة نصية من النوع String. الوصف يُسند إلى هذه الخاصِّية سلسلة نصية تحتوي على رقم إصدار jQuery. jquery أُضيف مع الإصدار: 1.0. الخاصِّيَّة .jquery هي سلسلة نصية تحتوي على رقم إصدار jQuery مثل "1.5.0" أو "1.4.4"، وتُسند إلى نموذج jQuery الأولي، ويشار إليها عادةً عبر الاسم البديل $.fn. أمثلة تحديد إن كان كائنٌ ما هو كائن jQuery: $(function() {
// أصبحت الصفحة جاهزة
});
استعمال اختصار للشكل $(document).ready() ووسيط لكتابة شيفرة الفشل الآمن (failsafe) في jQuery ...
الوصول إلى الخاصيات في JavaScript
طرائق الوصول إلى الخاصيات توفِّر وصولًا إلى خاصيات أحد الكائنات باستخدام طريقة النقط أو طريقة الأقواس. البنية العامة object.property
object['property']
الوصف يمكننا عدّ الكائنات على أنها مصفوفات ترابطية (أي associative array، ويُطلَق عليها أيضًا map و dictionary و hash و lookup table)، وتكون المفاتيح (keys) في المصفوفة هي أسماء خاصيات الكائن. من الشائع عند حديثنا عن خاصيات الكائنات التفريق بين الخاصيات (properties) والدوال التابعة للكائن، لكن تقنيًا تكون الدوال هي خاصيات مُنشَأة من الكائن Function. هنالك طريقتان للوصول إلى خاصيات الكائنات: ...
الدالة Promise.prototype.finally() في JavaScript
الدالة finally() تعيد وعدًا Pormise، وعندما تُقرَّر قيمة الوعد، سواءً كان مقبولًا أو مرفوضًا، فستُنفَّذ دالة رد النداء (callback) المُحدَّدة. وهذا ما يوفِّر طريقة لتنفيذ شيفرة ما بعد التعامل مع كائن Pormise سواءً كان الوعد مقبولًا أو مرفوضًا. تسمح هذه الدالة لنا بتفادي تكرار الشيفرات في دوال then() و catch(). البنية العامة p.finally(onFinally);
p.finally(function() {
// قُرِّرَت قيمة الوعد، سواءً كان مقبولًا أم مرفوضًا
});
المعاملات onFinally الدالة التي ستُستدعى عند تقرير قيمة الوعد. القيمة المعادة كائن Pormise الذي تكون ...
اللافتات label في JavaScript
التعبير البرمجي label يمكن أن يُستخدَم مع التعبير البرمجي break أو continue، وهو يوضع قبل التعابير البرمجية لإضافة لافتة (مُعرِّف) لها يمكن الإشارة إليها. لاحظ أنَّ من غير الشائع استخدام حلقات تكرار مع لافتات (labels)، وتُستخدَم عادةً الدوال بدلًا القيام بقفزات بين حلقات التكرار. البنية العامة label :
statement
label لافتة للتعبير البرمجي، ويمكن أن تكون أيّ مُعرِّف في JavaScript صالح (وليس كلمةً محجوزةً). statement التعابير البرمجية التي ستُضاف اللافتة إليها، ويمكن استخدام التعبير البرمجي break مع أيّ ...
الكائن Array في JavaScript
الكائن Array يُستخدَم في إنشاء المصفوفات، والتي هي قوائم شبيهة بالكائنات. إنشاء مصفوفة var fruits = ['Apple', 'Banana'];
console.log(fruits.length);
// 2
الوصول إلى عنصر من عناصر المصفوفة var first = fruits[0];
// Apple
var last = fruits[fruits.length - 1];
// Banana
المرور على عناصر المصفوفة بحلقة تكرار fruits.forEach(function(item, index, array) {
console.log(item, index);
});
// Apple 0
// Banana 1
إضافة عنصر في نهاية المصفوفة var newLength = fruits.push('Orange');
// ["Apple", "Banana", "Orange"]
إزالة عنصر من نهاية المصفوفة var last = fruits.pop(); // إزالة Orange (من النهاية)
// ["Apple", ...
المعامل الشرطي في JavaScript
المعامل الشرطي (conditional operator) هو المعامل الوحيد في JavaScript الذي يأخذ ثلاثة قيمة ليجري عليها عمليته، ومن الشائع استخدام هذا المعامل كاختصارٍ للتعبير البرمجي if. البنية العامة condition ? expr1 : expr2
condition تعبير برمجي نتيجته هي true أو false. expr1 و expr2 تعبيرين برمجيين من أيّ نوع. الوصف إذا كان الشرط condition محققًا true فسيُعيد المعامل قيمة التعبير expr1، وفيما عدا ذلك سيُعيد قيمة التعبير expr2؛ فمثلًا لو أردنَا عرض رسالة مختلفة اعتمادًا على قيمة المتغير isMember فسنستخدم التعبير ...
الكلمة المحجوزة this في JavaScript
الكلمة المحجوزة this لها سلوكٌ في JavaScript يختلف عن بقية لغات البرمجة، وهنالك اختلافاتٌ في سلوكها بين النمط strict و non-strict. في أغلبية الحالات، تُحدَّد قيمة الكلمة المحجوزة this وفق طريقة استدعاء الدالة، إذ لا يمكن ضبط قيمتها باستخدام عملية الإسناد العادية أثناء التنفيذ؛ وقد تختلف قيمة this في كل مرة تُستدعى فيها الدالة. أضافت ES5 الدالة bind التي تضبط قيمة this داخل الدالة بغض النظر عن طريقة استدعائها، وأضافت ES2015 الدوال السهمية (arrow functions) التي تُوفِّر ربطًا خاصًا بها ...
الكائن TypeError في JavaScript
الكائن TypeError يُشير إلى حدوث خطأ عندما يكون نوع المتغير أو المعامل غير صحيح. البنية العامة new TypeError([message])
message وسيط اختياري، وهو وصفٌ نصيٌّ للخطأ موجَّهٌ للبشر. الخاصيات والدوال التابعة للدالة البانية TypeError الخاصيات TypeError.prototype تُمثِّل هذه الخاصية كائن prototype التابعة للكائن TypeError. الدوال الدالة البانية TypeError لا تملك أيّة دوال تابعة لها مباشرةً، وإنما ترث بعض الخاصيات عبر سلسلة prototype. الكائن prototype الخاصيات TypeError.prototype.constructor تُحديد الدالة التي ستُنشِئ كائن prototype لكائنات TypeError؛ راجع صفحة الخاصيةObject.prototype.constructor لمزيدٍ من التفاصيل. TypeError.prototype.message رسالة ...
دالة getter في JavaScript
البنية get تؤدي إلى ربط خاصية من خاصيات الكائن بدالة التي ستستدعى عند محاولة الوصول إلى قيمة تلك الخاصية. البنية العامة {get prop() { ... } }
{get [expression]() { ... } }
prop اسم الخاصية الذي سترتبط بالدالة المعطية. expression بدءًا من ECMAScript 2015 (أي ES6)، يمكن استخدام التعابير لإنشاء أسماء محسوبة للخاصيات التي سترتبط بالدالة المعطية. الوصف يمكن أن تستخدم دالة getter في JavaScript لتنفيذ دالة معيّنة عندما تتم محاولة الوصول إلى خاصية من خاصيات الكائن بغية إعادة قيمة ...
الكائن Error في JavaScript
الدالة البانية Error تُنشِئ كائن خطأ، والنسخ الكائنات من النوع Error ستُرمى عند حدوث أخطاء في وقت التنفيذ (runtime errors)؛ لاحظ أنَّ الكائن Error يُستخدَم أيضًا ككائن أساس للاستثناءات التي يُعرَّفها المستخدم. انظر أدناه للحصول على قائمة بأنواع الأخطاء القياسية المُضمَّنة في اللغة. البنية العامة new Error([message])
message وسيط اختياري، وهو وصفٌ نصيٌّ للخطأ موجَّهٌ للبشر. الوصف الأخطاء التي تحدث في وقت التنفيذ (runtime errors) تؤدي إلى إنشاء ورمي كائنات Error جديدة. أنواع الأخطاء بجانب الدالة البانية Error العامة، هنالك ...
المعاملات الثنائية في JavaScript
المعاملات الثنائية (bitwise operators) تُعامِل القيم كأنها سلسلة تتألف من 32 بت (أصفار وواحدات) بدلًا من الأرقام Number في النظام العشري (decimal) أو الست عشري (hexadecimal) أو الثماني (octal)؛ فمثلًا يُمثَّل العدد 9 في نظام العد الثنائي بالمحارف 1001؛ وتجري معاملات البتات في JavaScript العمليات على التمثيل الثنائي للأعداد، لكنها تعيد قيمًا عدديةً عاديةً قياسيةً في JavaScript. الجدول الآتي يُلخِّص معاملات البتات في JavaScript: المعامل الاستخدام الوصف AND a & b يُعيد 1 مكان كل بت له القيمة 1 في ...
الإسناد بالتفكيك في JavaScript
الإسناد بالتفكيك (destructuring assignment) يسمح باستخراج القيم الموجودة في المصفوفات أو خاصيات أحد الكائنات إلى متغيرات مستقلة. البنية العامة var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20
// Stage 3 proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); //{c: ...
الدالة Promise.prototype.then() في JavaScript
الدالة then() تعيد وعدًا Promise، وتأخذ وسيطين على الأكثر، وهما دالتا رد النداء (callback) لنجاح أو فشل الوعد. var promise1 = new Promise(function(resolve, reject) {
resolve('Success!');
});
promise1.then(function(value) {
console.log(value);
// "Success!"
});
ملاحظة: إذا كان أحد أو كلا المعاملين غير موجود، أو كان موجودًا لكنه ليس دالةً، فلن تضع الدالة then() معالجًا له، لكنها لن تولِّد أي أخطاء. إذا أصبحت هنالك حالة للوعد Promise الذي استدعيت الدالة ()then عليه، ولم يكن للدالة ()then وسائط مناسبة، فسيُنشَأ وعدٌ Promise جديد دون ...
الدالة Promise.prototype.catch() في JavaScript
الدالة catch() تعيد وعدًا Promise وتتعامل مع حالات رفض الوعود فقط. وهي تسلك نفس سلوك استدعاء الدالة Promise.prototype.then(undefined, onRejected). وفي الواقع، استدعاء الدالة obj.catch(onRejected) سيستدعي الدالة obj.then(undefined, onRejected) داخليًا. var promise1 = new Promise(function(resolve, reject) {
throw 'Uh-oh!';
});
promise1.catch(function(error) {
console.log(error);
});
// Uh-oh!
البنية العامة p.catch(onRejected);
p.catch(function(reason) {
// التعامل مع الرفض
});
المعاملات onRejected دالة تستدعى عند رفض الوعد Promise. هذه الدالة تملك معاملًا وحيدًا: reason سبب الرفض. الوعد المُعاد من الدالة catch() سيُرفَض إذا رمت الدالة onRejected أو ...
المعاملات المنطقية في JavaScript
المعاملات المنطقية (logical operators) تُستخدَم عادةً مع القيم المنطقية Boolean، وستُعيد هذه المعاملات حينئذٍ قيمةً منطقيةً أيضًا؛ لكن المعاملين && و || سيُعيدان إحدى القيمتين اللتين تجريان عملياتهما عليها، لذا إذا لم تكن تلك القيمة منطقيةً (Boolean) فقد لا تُعاد قيمةٌ منطقيةٌ. الوصف المعاملات المنطقية موضَّحة في الجدول الآتي: المعامل الاستخدام الوصف AND (&&) expr1 && expr2 يُعيد expr1 إذا كان بالإمكان تحويله إلى false، وإلا فسيعيد expr2، وبالتالي عند استخدامه مع القيم المنطقية فسيعيد المعامل && القيمة true إذا ...
الدوال السهمية في JavaScript
تعبير الدوال السهمية (arrow function expression) له بنيةٌ عامةٌ مختصرةٌ أكثر من تعبير تعريف الدوال، ولا يملك قيم this أو arguments أو super أو new.target خاصة به؛ والدوال السهمية تناسب الدوال التي لا تكون أعضاءً في كائنٍ ما، وتلك التي لن تُستخدَم كدالة بانية. البنية العامة البنية الأساسية (param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// ستُقدَّر إلى: (param1, param2, …, paramN) => { return expression; }
// الأقواس اختيارية عندما يكون هنالك وسيطٌ وحيدٌ فقط
(singleParam) ...
الكائن RangeError في JavaScript
الكائن RangeError يُشير إلى حدوث خطأ وقع عندما تكون قيمة متغير رقمي أو معاملٍ ما خارج المجال المسموح. البنية العامة new RangeError([message])
message وسيط اختياري، وهو وصفٌ نصيٌّ للخطأ موجَّهٌ للبشر. الوصف سيرمى الخطأ RangeError عند محاولة تمرير رقم كوسيط إلى دالة لا تعدّ هذا الرقم ضمن المجال المسموح للقيم التي تقبلها؛ وسيحدث ذلك عند محاولة إنشاء مصفوفة لها طول (length) غير صحيح باستخدام الدالة البانية Array، أو عند تمرير قيم غير صالحة إلى الدوال Number.toExponential() أو Number.toFixed() أو Number.toPrecision(). ...