fix: converted single to triple backticks10 (#36237)
This commit is contained in:
@ -12,37 +12,41 @@ localeTitle: تعليقات
|
|||||||
|
|
||||||
الطريقة الأولى هي `//` التعليق ؛ كل النص التالي `//` على نفس السطر في تعليق. فمثلا:
|
الطريقة الأولى هي `//` التعليق ؛ كل النص التالي `//` على نفس السطر في تعليق. فمثلا:
|
||||||
|
|
||||||
`function hello() {
|
```javascript
|
||||||
// This is a one line JavaScript comment
|
function hello() {
|
||||||
console.log("Hello world!");
|
// This is a one line JavaScript comment
|
||||||
}
|
console.log("Hello world!");
|
||||||
hello();
|
}
|
||||||
`
|
hello();
|
||||||
|
```
|
||||||
|
|
||||||
والطريقة الثانية هي `/* */` comment ، التي يمكن استخدامها للتعليقات ذات السطر الواحد والمتعددة الخطوط. فمثلا:
|
والطريقة الثانية هي `/* */` comment ، التي يمكن استخدامها للتعليقات ذات السطر الواحد والمتعددة الخطوط. فمثلا:
|
||||||
|
|
||||||
`function hello() {
|
```javascript
|
||||||
/* This is a one line JavaScript comment */
|
function hello() {
|
||||||
console.log("Hello world!");
|
/* This is a one line JavaScript comment */
|
||||||
}
|
console.log("Hello world!");
|
||||||
hello();
|
}
|
||||||
`
|
hello();
|
||||||
|
```
|
||||||
|
|
||||||
`function hello() {
|
```javascript
|
||||||
/* This comment spans multiple lines. Notice
|
function hello() {
|
||||||
that we don't need to end the comment until we're done. */
|
/* This comment spans multiple lines. Notice
|
||||||
console.log("Hello world!");
|
that we don't need to end the comment until we're done. */
|
||||||
}
|
console.log("Hello world!");
|
||||||
hello();
|
}
|
||||||
`
|
hello();
|
||||||
|
```
|
||||||
|
|
||||||
يمكنك أيضًا منع تنفيذ شفرة جافا سكريبت فقط عند استخدام خطوط الرمز مثل هذا:
|
يمكنك أيضًا منع تنفيذ شفرة جافا سكريبت فقط عند استخدام خطوط الرمز مثل هذا:
|
||||||
|
|
||||||
`function hello() {
|
```javascript
|
||||||
/*console.log("Hello world!");*/
|
function hello() {
|
||||||
}
|
/*console.log("Hello world!");*/
|
||||||
hello();
|
}
|
||||||
`
|
hello();
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
@ -59,22 +63,24 @@ localeTitle: تعليقات
|
|||||||
|
|
||||||
كما أن التعليقات مفيدة جدًا لاختبار الشفرة حيث يمكنك منع تشغيل سطر / فقرة رمز معين
|
كما أن التعليقات مفيدة جدًا لاختبار الشفرة حيث يمكنك منع تشغيل سطر / فقرة رمز معين
|
||||||
|
|
||||||
`function hello() {
|
```javascript
|
||||||
// The statement below is not going to get executed
|
function hello() {
|
||||||
// console.log('hi')
|
// The statement below is not going to get executed
|
||||||
}
|
// console.log('hi')
|
||||||
hello();
|
}
|
||||||
`
|
hello();
|
||||||
|
```
|
||||||
|
|
||||||
`function hello() {
|
```
|
||||||
// The statements below are not going to get executed
|
function hello() {
|
||||||
/*
|
// The statements below are not going to get executed
|
||||||
console.log('hi');
|
/*
|
||||||
console.log('code-test');
|
console.log('hi');
|
||||||
*/
|
console.log('code-test');
|
||||||
}
|
*/
|
||||||
hello();
|
}
|
||||||
`
|
hello();
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -10,21 +10,22 @@ localeTitle: نموذج التزامن وحلقة الحدث
|
|||||||
|
|
||||||
لنأخذ مثال الكود لفهم مكدس المكالمات
|
لنأخذ مثال الكود لفهم مكدس المكالمات
|
||||||
|
|
||||||
`function multiply(x,y) {
|
```javascript
|
||||||
return x * y;
|
function multiply(x,y) {
|
||||||
}
|
return x * y;
|
||||||
|
}
|
||||||
function squared(n) {
|
|
||||||
return multiply(n,n)
|
function squared(n) {
|
||||||
}
|
return multiply(n,n)
|
||||||
|
}
|
||||||
function printSquare(n) {
|
|
||||||
return squared(n)
|
function printSquare(n) {
|
||||||
}
|
return squared(n)
|
||||||
|
}
|
||||||
let numberSquared = printSquare(5);
|
|
||||||
console.log(numberSquared);
|
let numberSquared = printSquare(5);
|
||||||
`
|
console.log(numberSquared);
|
||||||
|
```
|
||||||
|
|
||||||
أولاً عند تنفيذ التعليمات البرمجية وقت التشغيل خلال كل تعريفات الدالة ولكن عندما يصل إلى السطر حيث يتم استدعاء الدالة الأولى **printSquare (5)** فإنه سيتم دفع هذه الوظيفة إلى مكدس الاستدعاءات. بعد ذلك ، ستنفذ هذه الوظيفة وستواجه ، قبل إعادتها ، دالة أخرى **مربعة (n)** بحيث ستعلق العملية الحالية وتدفع هذه الوظيفة إلى أعلى الوظيفة الحالية. ينفذ الدالة في هذه الحالة الدالة التربيعية وأخيرًا يواجه دالة أخرى **مضاعفة (n، n)** ومن ثم فإنه يعلق عمليات التنفيذ الحالية ويدفع هذه الوظيفة إلى مكدس الاستدعاءات. ينفذ ضرب ويعود مع قيمة مضروب. وأخيرًا ، ترجع الدالة التربيعية وتنبثق من الحزمة ثم ينتقل نفس الشيء مع printSquare. يتم تخصيص القيمة التربيعية النهائية للمتغير numberSquared. نحن نواجه مرة أخرى استدعاء دالة في هذه الحالة هو عبارة console.log () بحيث يدفع وقت التشغيل هذا إلى المكدس الذي ينفذها وبالتالي طباعة الرقم التربيعي على وحدة التحكم. وتجدر الإشارة إلى أن الوظيفة الأولى التي يتم دفعها إلى الكدسة قبل تشغيل أي من التعليمات البرمجية المذكورة أعلاه هي الوظيفة الرئيسية التي يُشار إليها في وقت التشغيل بأنها "وظيفة مجهولة".
|
أولاً عند تنفيذ التعليمات البرمجية وقت التشغيل خلال كل تعريفات الدالة ولكن عندما يصل إلى السطر حيث يتم استدعاء الدالة الأولى **printSquare (5)** فإنه سيتم دفع هذه الوظيفة إلى مكدس الاستدعاءات. بعد ذلك ، ستنفذ هذه الوظيفة وستواجه ، قبل إعادتها ، دالة أخرى **مربعة (n)** بحيث ستعلق العملية الحالية وتدفع هذه الوظيفة إلى أعلى الوظيفة الحالية. ينفذ الدالة في هذه الحالة الدالة التربيعية وأخيرًا يواجه دالة أخرى **مضاعفة (n، n)** ومن ثم فإنه يعلق عمليات التنفيذ الحالية ويدفع هذه الوظيفة إلى مكدس الاستدعاءات. ينفذ ضرب ويعود مع قيمة مضروب. وأخيرًا ، ترجع الدالة التربيعية وتنبثق من الحزمة ثم ينتقل نفس الشيء مع printSquare. يتم تخصيص القيمة التربيعية النهائية للمتغير numberSquared. نحن نواجه مرة أخرى استدعاء دالة في هذه الحالة هو عبارة console.log () بحيث يدفع وقت التشغيل هذا إلى المكدس الذي ينفذها وبالتالي طباعة الرقم التربيعي على وحدة التحكم. وتجدر الإشارة إلى أن الوظيفة الأولى التي يتم دفعها إلى الكدسة قبل تشغيل أي من التعليمات البرمجية المذكورة أعلاه هي الوظيفة الرئيسية التي يُشار إليها في وقت التشغيل بأنها "وظيفة مجهولة".
|
||||||
|
|
||||||
@ -44,14 +45,15 @@ localeTitle: نموذج التزامن وحلقة الحدث
|
|||||||
|
|
||||||
دعونا نفهم هذا مع مثال الكود
|
دعونا نفهم هذا مع مثال الكود
|
||||||
|
|
||||||
`console.log('hi');
|
```javascript
|
||||||
|
console.log('hi');
|
||||||
setTimeout(function() {
|
|
||||||
console.log('freecodeCamp')
|
setTimeout(function() {
|
||||||
},5000);
|
console.log('freecodeCamp')
|
||||||
|
},5000);
|
||||||
console.log('JS')
|
|
||||||
`
|
console.log('JS')
|
||||||
|
```
|
||||||
|
|
||||||
عندما ينفّذ السطر الأول ، يكون الأمر console.log () وهو عبارة عن استدعاء للوظيفة ، مما يعني أن هذه الوظيفة يتم دفعها إلى مكدس الاستدعاءات حيث تقوم بتنفيذ الطباعة "hi" إلى وحدة التحكم وأخيراً يتم إرجاعها ويتم إفراغها من المكدس. ثم عندما يذهب وقت التشغيل لتنفيذ setTimeout () فإنه يعرف أن هذا هو API على شبكة الإنترنت ، وبالتالي فإنه يعطيها إلى المتصفح للتعامل مع تنفيذ ذلك. يبدأ المتصفح في تشغيل جهاز ضبط الوقت ثم ينبثق وقت تشغيل JS في وضع setTimeout () خارج الحزمة. يواجه استدعاء آخر console.log () ومن ثم فإنه يدفع هذا في مكدس الاستدعاءات يتم تسجيل الرسالة 'JS' في وحدة التحكم ومن ثم يتم إرجاعها ومن ثم يتم إفراغ الأخير console.log () إيقاف المكدس. الآن مكدس الاستدعاءات فارغ. في الوقت نفسه بينما كان كل هذا يحدث على انتهاء جهاز ضبط الوقت الذي يكون عند مرور 5 ثوان ، ينتقل المتصفح ويدفع وظيفة رد الاتصال إلى قائمة انتظار رد الاتصال. بعد ذلك ، تقوم حلقة الحدث بالتحقق مما إذا كانت مكدس الاستدعاءات مجاني أم لا. نظرًا لأنه مجاني ، فإنه يأخذ وظيفة رد الاتصال ويدفعه مرة أخرى إلى مكدس الاستدعاءات الذي ينفذ الشفرة بداخله. مرة أخرى داخل التعليمات البرمجية هناك استدعاء console.log () بحيث تنتقل هذه الوظيفة إلى الجزء العلوي من المكدس الذي يسجل "freecodecamp" في وحدة التحكم وأخيراً يتم إرجاعه يعني أنه يحصل poppped إيقاف المكدس وأخيراً ينفجر رد الاتصال من المكدس وإننا انتهينا.
|
عندما ينفّذ السطر الأول ، يكون الأمر console.log () وهو عبارة عن استدعاء للوظيفة ، مما يعني أن هذه الوظيفة يتم دفعها إلى مكدس الاستدعاءات حيث تقوم بتنفيذ الطباعة "hi" إلى وحدة التحكم وأخيراً يتم إرجاعها ويتم إفراغها من المكدس. ثم عندما يذهب وقت التشغيل لتنفيذ setTimeout () فإنه يعرف أن هذا هو API على شبكة الإنترنت ، وبالتالي فإنه يعطيها إلى المتصفح للتعامل مع تنفيذ ذلك. يبدأ المتصفح في تشغيل جهاز ضبط الوقت ثم ينبثق وقت تشغيل JS في وضع setTimeout () خارج الحزمة. يواجه استدعاء آخر console.log () ومن ثم فإنه يدفع هذا في مكدس الاستدعاءات يتم تسجيل الرسالة 'JS' في وحدة التحكم ومن ثم يتم إرجاعها ومن ثم يتم إفراغ الأخير console.log () إيقاف المكدس. الآن مكدس الاستدعاءات فارغ. في الوقت نفسه بينما كان كل هذا يحدث على انتهاء جهاز ضبط الوقت الذي يكون عند مرور 5 ثوان ، ينتقل المتصفح ويدفع وظيفة رد الاتصال إلى قائمة انتظار رد الاتصال. بعد ذلك ، تقوم حلقة الحدث بالتحقق مما إذا كانت مكدس الاستدعاءات مجاني أم لا. نظرًا لأنه مجاني ، فإنه يأخذ وظيفة رد الاتصال ويدفعه مرة أخرى إلى مكدس الاستدعاءات الذي ينفذ الشفرة بداخله. مرة أخرى داخل التعليمات البرمجية هناك استدعاء console.log () بحيث تنتقل هذه الوظيفة إلى الجزء العلوي من المكدس الذي يسجل "freecodecamp" في وحدة التحكم وأخيراً يتم إرجاعه يعني أنه يحصل poppped إيقاف المكدس وأخيراً ينفجر رد الاتصال من المكدس وإننا انتهينا.
|
||||||
|
|
||||||
|
@ -8,26 +8,30 @@ localeTitle: مشغلون شرطيون شرطيون
|
|||||||
|
|
||||||
المشغل الثلاثي هو طريقة مدمجة لكتابة if-else داخل تعبير.
|
المشغل الثلاثي هو طريقة مدمجة لكتابة if-else داخل تعبير.
|
||||||
|
|
||||||
`const thing = (condition) ? <if true> : <if false>;
|
```js
|
||||||
`
|
const thing = (condition) ? <if true> : <if false>;
|
||||||
|
```
|
||||||
|
|
||||||
على سبيل المثال
|
على سبيل المثال
|
||||||
|
|
||||||
`const cappedInput = input > 50 ? 50 : input // this will cap the input at 50
|
```js
|
||||||
`
|
const cappedInput = input > 50 ? 50 : input // this will cap the input at 50
|
||||||
|
```
|
||||||
|
|
||||||
### آخر إذا
|
### آخر إذا
|
||||||
|
|
||||||
يمكنك أيضًا تشغيل مشغلات ثلاثية ، وبهذه الطريقة سيكون لديك سلوك آخر في حالة ما عدا ذلك
|
يمكنك أيضًا تشغيل مشغلات ثلاثية ، وبهذه الطريقة سيكون لديك سلوك آخر في حالة ما عدا ذلك
|
||||||
|
|
||||||
`<first condition> ? <value if first true>
|
```js
|
||||||
: <second condition> ? <value if second is true>
|
<first condition> ? <value if first true>
|
||||||
: <fallback value>
|
: <second condition> ? <value if second is true>
|
||||||
`
|
: <fallback value>
|
||||||
|
```
|
||||||
|
|
||||||
> **نصيحة للمحترفين** : كما ترى ، يمكنك تقسيم المشغل الثلاثي على عدة أسطر على سبيل المثال
|
> **نصيحة للمحترفين** : كما ترى ، يمكنك تقسيم المشغل الثلاثي على عدة أسطر على سبيل المثال
|
||||||
|
|
||||||
`const wealth = housesOwned > 3 ? "rich"
|
```
|
||||||
: housesOwned > 1 ? "nothing to complain"
|
const wealth = housesOwned > 3 ? "rich"
|
||||||
: "poor"
|
: housesOwned > 1 ? "nothing to complain"
|
||||||
`
|
: "poor"
|
||||||
|
```
|
@ -8,62 +8,66 @@ localeTitle: خطأ في التعامل ومحاولة رمي الصيد
|
|||||||
|
|
||||||
#### `try...catch`
|
#### `try...catch`
|
||||||
|
|
||||||
`try {
|
```javascript
|
||||||
throw new Error('my error');
|
try {
|
||||||
}
|
throw new Error('my error');
|
||||||
catch (e) {
|
}
|
||||||
console.error(e.message);
|
catch (e) {
|
||||||
}
|
console.error(e.message);
|
||||||
|
}
|
||||||
// Output:
|
|
||||||
// my error
|
// Output:
|
||||||
`
|
// my error
|
||||||
|
```
|
||||||
|
|
||||||
#### `try...finally` :
|
#### `try...finally` :
|
||||||
|
|
||||||
`try {
|
```javascript
|
||||||
throw new Error('my error');
|
try {
|
||||||
}
|
throw new Error('my error');
|
||||||
finally {
|
}
|
||||||
console.error('finally');
|
finally {
|
||||||
}
|
console.error('finally');
|
||||||
|
}
|
||||||
// Output:
|
|
||||||
// finally
|
// Output:
|
||||||
`
|
// finally
|
||||||
|
```
|
||||||
|
|
||||||
_ملاحظة:_ عندما لا `catch` الخطأ ، فإنه في الواقع لا "يصطاد" ، حتى لو تم تنفيذ الحظر `finally` . وهذا يعني أن الخطأ سيستمر في كتلة `try` العليا (أو الكتلة الرئيسية).
|
_ملاحظة:_ عندما لا `catch` الخطأ ، فإنه في الواقع لا "يصطاد" ، حتى لو تم تنفيذ الحظر `finally` . وهذا يعني أن الخطأ سيستمر في كتلة `try` العليا (أو الكتلة الرئيسية).
|
||||||
|
|
||||||
#### `try...catch...finally` :
|
#### `try...catch...finally` :
|
||||||
|
|
||||||
`try {
|
```javascript
|
||||||
throw new Error('my error');
|
try {
|
||||||
}
|
throw new Error('my error');
|
||||||
catch (e) {
|
}
|
||||||
console.error(e.message);
|
catch (e) {
|
||||||
}
|
console.error(e.message);
|
||||||
finally {
|
}
|
||||||
console.error('finally');
|
finally {
|
||||||
}
|
console.error('finally');
|
||||||
|
}
|
||||||
// Output:
|
|
||||||
// my error
|
// Output:
|
||||||
// finally
|
// my error
|
||||||
`
|
// finally
|
||||||
|
```
|
||||||
|
|
||||||
الاستخدام النموذجي:
|
الاستخدام النموذجي:
|
||||||
|
|
||||||
`try {
|
```javascript
|
||||||
openFile(file);
|
try {
|
||||||
readFile(file)
|
openFile(file);
|
||||||
}
|
readFile(file)
|
||||||
catch (e) {
|
}
|
||||||
console.error(e.message);
|
catch (e) {
|
||||||
}
|
console.error(e.message);
|
||||||
finally {
|
}
|
||||||
closeFile(file);
|
finally {
|
||||||
}
|
closeFile(file);
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
#### `try...catch` متداخلة `try...catch`
|
#### `try...catch` متداخلة `try...catch`
|
||||||
|
|
||||||
@ -72,75 +76,80 @@ _ملاحظة:_ عندما لا `catch` الخطأ ، فإنه في الواقع
|
|||||||
* اعتبر عبارة `try-catch` داخل كتلة `try` .
|
* اعتبر عبارة `try-catch` داخل كتلة `try` .
|
||||||
* رمي الخطأ صعودا.
|
* رمي الخطأ صعودا.
|
||||||
|
|
||||||
`try {
|
```javascript
|
||||||
try {
|
try {
|
||||||
throw new Error('my error');
|
try {
|
||||||
}
|
throw new Error('my error');
|
||||||
catch (e) {
|
}
|
||||||
console.error('inner', e.message);
|
catch (e) {
|
||||||
throw e;
|
console.error('inner', e.message);
|
||||||
}
|
throw e;
|
||||||
finally {
|
}
|
||||||
console.log('finally');
|
finally {
|
||||||
}
|
console.log('finally');
|
||||||
}
|
}
|
||||||
catch (e) {
|
}
|
||||||
console.error('outer', e.message);
|
catch (e) {
|
||||||
}
|
console.error('outer', e.message);
|
||||||
|
}
|
||||||
// Output:
|
|
||||||
// inner my error
|
// Output:
|
||||||
// finally
|
// inner my error
|
||||||
// outer my error
|
// finally
|
||||||
`
|
// outer my error
|
||||||
|
```
|
||||||
|
|
||||||
#### أنواع الخطأ
|
#### أنواع الخطأ
|
||||||
|
|
||||||
##### خطأ مرجعي
|
##### خطأ مرجعي
|
||||||
|
|
||||||
`var x;
|
```javascript
|
||||||
try {
|
var x;
|
||||||
x = y + 1; // y cannot be referenced (used)
|
try {
|
||||||
}
|
x = y + 1; // y cannot be referenced (used)
|
||||||
catch(err) {
|
}
|
||||||
console.log(err.name, err.message);
|
catch(err) {
|
||||||
}
|
console.log(err.name, err.message);
|
||||||
// ReferenceError y is not defined
|
}
|
||||||
`
|
// ReferenceError y is not defined
|
||||||
|
```
|
||||||
|
|
||||||
##### خطأ في بناء الجملة
|
##### خطأ في بناء الجملة
|
||||||
|
|
||||||
`try {
|
```javascript
|
||||||
eval("alert('Hello)"); // Missing ' will produce an error
|
try {
|
||||||
}
|
eval("alert('Hello)"); // Missing ' will produce an error
|
||||||
catch(err) {
|
}
|
||||||
console.log(err.name,err.message);
|
catch(err) {
|
||||||
}
|
console.log(err.name,err.message);
|
||||||
// SyntaxError Invalid or unexpected token
|
}
|
||||||
`
|
// SyntaxError Invalid or unexpected token
|
||||||
|
```
|
||||||
|
|
||||||
##### خطأ مطبعي
|
##### خطأ مطبعي
|
||||||
|
|
||||||
`var num = 1;
|
```javascript
|
||||||
try {
|
var num = 1;
|
||||||
num.toUpperCase(); // You cannot convert a number to upper case
|
try {
|
||||||
}
|
num.toUpperCase(); // You cannot convert a number to upper case
|
||||||
catch(err) {
|
}
|
||||||
console.log(err.name, err.message);
|
catch(err) {
|
||||||
}
|
console.log(err.name, err.message);
|
||||||
// TypeError num.toUpperCase is not a function
|
}
|
||||||
`
|
// TypeError num.toUpperCase is not a function
|
||||||
|
```
|
||||||
|
|
||||||
##### خطأ URI
|
##### خطأ URI
|
||||||
|
|
||||||
`try {
|
```javascript
|
||||||
decodeURI("%%%"); // You cannot URI decode these percent signs
|
try {
|
||||||
}
|
decodeURI("%%%"); // You cannot URI decode these percent signs
|
||||||
catch(err) {
|
}
|
||||||
console.log(err.name, err.message);
|
catch(err) {
|
||||||
}
|
console.log(err.name, err.message);
|
||||||
// URIError URI malformed
|
}
|
||||||
`
|
// URIError URI malformed
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -43,15 +43,16 @@ localeTitle: وظائف السهم
|
|||||||
|
|
||||||
ميزة لا تصدق من وظيفة الأسهم هو أنه لا يمكنك إعادة وظيفة السهم. سوف يطلق عليه دائما مع السياق الذي تم تعريفه فيه. مجرد استخدام وظيفة عادية.
|
ميزة لا تصدق من وظيفة الأسهم هو أنه لا يمكنك إعادة وظيفة السهم. سوف يطلق عليه دائما مع السياق الذي تم تعريفه فيه. مجرد استخدام وظيفة عادية.
|
||||||
|
|
||||||
`// Old Syntax
|
```javascript
|
||||||
axios.get(url).then(function(response) {
|
// Old Syntax
|
||||||
this.data = response.data;
|
axios.get(url).then(function(response) {
|
||||||
}).bind(this);
|
this.data = response.data;
|
||||||
|
}).bind(this);
|
||||||
// New Syntax
|
|
||||||
axios.get(url).then(response => {
|
// New Syntax
|
||||||
this.data = response.data;
|
axios.get(url).then(response => {
|
||||||
});
|
this.data = response.data;
|
||||||
`
|
});
|
||||||
|
```
|
||||||
|
|
||||||
لا أعتقد أنني بحاجة إلى تقديم تفسير لهذا. انها بسيطة.
|
لا أعتقد أنني بحاجة إلى تقديم تفسير لهذا. انها بسيطة.
|
@ -20,8 +20,9 @@ localeTitle: المعلمات الافتراضية
|
|||||||
|
|
||||||
فكر في مثال آخر:
|
فكر في مثال آخر:
|
||||||
|
|
||||||
`Func(20, 50); // 20 + 50 = 70
|
```
|
||||||
`
|
Func(20, 50); // 20 + 50 = 70
|
||||||
|
```
|
||||||
|
|
||||||
في المثال أعلاه ، تأخذ الدالة معلمتين وتستبدل المعلمة الثانية المعلمة الافتراضية.
|
في المثال أعلاه ، تأخذ الدالة معلمتين وتستبدل المعلمة الثانية المعلمة الافتراضية.
|
||||||
|
|
||||||
@ -39,7 +40,8 @@ localeTitle: المعلمات الافتراضية
|
|||||||
|
|
||||||
لكن،
|
لكن،
|
||||||
|
|
||||||
`NotWorkingFunction(20, 30); // 50;
|
```
|
||||||
`
|
NotWorkingFunction(20, 30); // 50;
|
||||||
|
```
|
||||||
|
|
||||||
يعمل بشكل جيد.
|
يعمل بشكل جيد.
|
@ -10,49 +10,55 @@ localeTitle: مهمة التدمير
|
|||||||
|
|
||||||
**ES5 Destructuring**
|
**ES5 Destructuring**
|
||||||
|
|
||||||
`var fullName = ["John", "Smith"];
|
```js
|
||||||
var firstName = fullName[0];
|
var fullName = ["John", "Smith"];
|
||||||
var lastName = fullName[1];
|
var firstName = fullName[0];
|
||||||
|
var lastName = fullName[1];
|
||||||
console.log(firstName, lastName); // John Smith
|
|
||||||
`
|
console.log(firstName, lastName); // John Smith
|
||||||
|
```
|
||||||
|
|
||||||
**ES6 Destructuring**
|
**ES6 Destructuring**
|
||||||
|
|
||||||
`const fullName = ["John", "Smith"];
|
```js
|
||||||
const [firstName, lastName] = fullName;
|
const fullName = ["John", "Smith"];
|
||||||
|
const [firstName, lastName] = fullName;
|
||||||
console.log(firstName, lastName); // John Smith
|
|
||||||
`
|
console.log(firstName, lastName); // John Smith
|
||||||
|
```
|
||||||
|
|
||||||
توضح الأمثلة المذكورة أعلاه فائدة استخدام تعيين Destructuring ES6.
|
توضح الأمثلة المذكورة أعلاه فائدة استخدام تعيين Destructuring ES6.
|
||||||
|
|
||||||
يمكنك أيضًا استخدام Destructuring على الكائنات باستخدام بناء جملة مشابه
|
يمكنك أيضًا استخدام Destructuring على الكائنات باستخدام بناء جملة مشابه
|
||||||
|
|
||||||
`const fullName = { first: "John", last: "Smith"};
|
```js
|
||||||
const {first, last} = fullName;
|
const fullName = { first: "John", last: "Smith"};
|
||||||
|
const {first, last} = fullName;
|
||||||
console.log(first, last); // John Smith
|
|
||||||
`
|
console.log(first, last); // John Smith
|
||||||
|
```
|
||||||
|
|
||||||
يختلف تعيين Destructuring Object (كائن Destructuring) عن بعض الشيء لأن الكائن يجب أن يكون له خصائص بالأسماء التي تقوم بتعيينها. لذلك ، لن يعمل الرمز أدناه على النحو المنشود.
|
يختلف تعيين Destructuring Object (كائن Destructuring) عن بعض الشيء لأن الكائن يجب أن يكون له خصائص بالأسماء التي تقوم بتعيينها. لذلك ، لن يعمل الرمز أدناه على النحو المنشود.
|
||||||
|
|
||||||
`const fullName = { first: "John", last: "Smith"};
|
```js
|
||||||
const {firstName, lastName} = fullName;
|
const fullName = { first: "John", last: "Smith"};
|
||||||
|
const {firstName, lastName} = fullName;
|
||||||
console.log(firstName, lastName); // undefined undefined
|
|
||||||
`
|
console.log(firstName, lastName); // undefined undefined
|
||||||
|
```
|
||||||
|
|
||||||
لا يزال بإمكانك تحقيق النتيجة المرجوة باستخدام بناء الجملة التالي.
|
لا يزال بإمكانك تحقيق النتيجة المرجوة باستخدام بناء الجملة التالي.
|
||||||
|
|
||||||
`const obj = {propertyName: value}
|
```js
|
||||||
{propertyName: desiredVariableName} = obj
|
const obj = {propertyName: value}
|
||||||
`
|
{propertyName: desiredVariableName} = obj
|
||||||
|
```
|
||||||
|
|
||||||
مثالنا السابق سوف يعاد كتابته على النحو التالي:
|
مثالنا السابق سوف يعاد كتابته على النحو التالي:
|
||||||
|
|
||||||
`const fullName = { first: "John", last: "Smith"};
|
```js
|
||||||
const {first: firstName, last: lastName} = fullName;
|
const fullName = { first: "John", last: "Smith"};
|
||||||
|
const {first: firstName, last: lastName} = fullName;
|
||||||
console.log(firstName, lastName); // John Smith
|
|
||||||
`
|
console.log(firstName, lastName); // John Smith
|
||||||
|
```
|
@ -12,18 +12,19 @@ localeTitle: ES6
|
|||||||
|
|
||||||
> مثال ES5:
|
> مثال ES5:
|
||||||
|
|
||||||
`var User = function () {
|
```javascript
|
||||||
function User(name) {
|
var User = function () {
|
||||||
this._name = name;
|
function User(name) {
|
||||||
}
|
this._name = name;
|
||||||
|
}
|
||||||
User.prototype.getName = function getName(x) {
|
|
||||||
return 'Mr./Mrs. ' + this._name;
|
User.prototype.getName = function getName(x) {
|
||||||
};
|
return 'Mr./Mrs. ' + this._name;
|
||||||
|
};
|
||||||
return User;
|
|
||||||
}();
|
return User;
|
||||||
`
|
}();
|
||||||
|
```
|
||||||
|
|
||||||
> مثال ES6:
|
> مثال ES6:
|
||||||
|
|
||||||
|
@ -33,19 +33,21 @@ localeTitle: واسمحوا Const
|
|||||||
|
|
||||||
يتم استخدام Const لتعيين قيمة ثابتة للمتغير. ولا يمكن تغيير القيمة. انها ثابتة.
|
يتم استخدام Const لتعيين قيمة ثابتة للمتغير. ولا يمكن تغيير القيمة. انها ثابتة.
|
||||||
|
|
||||||
`const a = 50;
|
```
|
||||||
a = 60; // shows error. You cannot change the value of const.
|
const a = 50;
|
||||||
const b = "Constant variable";
|
a = 60; // shows error. You cannot change the value of const.
|
||||||
b = "Assigning new value"; // shows error.
|
const b = "Constant variable";
|
||||||
`
|
b = "Assigning new value"; // shows error.
|
||||||
|
```
|
||||||
|
|
||||||
فكر في مثال آخر.
|
فكر في مثال آخر.
|
||||||
|
|
||||||
`const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
|
```
|
||||||
LANGUAGES = "Javascript"; // shows error.
|
const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
|
||||||
LANGUAGES.push('Java'); // Works fine.
|
LANGUAGES = "Javascript"; // shows error.
|
||||||
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']
|
LANGUAGES.push('Java'); // Works fine.
|
||||||
`
|
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']
|
||||||
|
```
|
||||||
|
|
||||||
قد يكون هذا مربكًا قليلاً.
|
قد يكون هذا مربكًا قليلاً.
|
||||||
|
|
||||||
|
@ -10,55 +10,60 @@ localeTitle: القيم الفارسية
|
|||||||
|
|
||||||
من الممكن التحقق من وجود قيمة كاذبة في متغير مع شرط بسيط:
|
من الممكن التحقق من وجود قيمة كاذبة في متغير مع شرط بسيط:
|
||||||
|
|
||||||
`if (!variable) {
|
```javascript
|
||||||
// When the variable has a falsy value the condition is true.
|
if (!variable) {
|
||||||
}
|
// When the variable has a falsy value the condition is true.
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## أمثلة عامة
|
## أمثلة عامة
|
||||||
|
|
||||||
`var string = ""; // <-- falsy
|
```javascript
|
||||||
|
var string = ""; // <-- falsy
|
||||||
var filledString = "some string in here"; // <-- truthy
|
|
||||||
|
var filledString = "some string in here"; // <-- truthy
|
||||||
var zero = 0; // <-- falsy
|
|
||||||
|
var zero = 0; // <-- falsy
|
||||||
var numberGreaterThanZero // <-- truthy
|
|
||||||
|
var numberGreaterThanZero // <-- truthy
|
||||||
var emptyArray = []; // <-- truthy, we'll explore more about this next
|
|
||||||
|
var emptyArray = []; // <-- truthy, we'll explore more about this next
|
||||||
var emptyObject = {}; // <-- truthy
|
|
||||||
`
|
var emptyObject = {}; // <-- truthy
|
||||||
|
```
|
||||||
|
|
||||||
## المرح مع المصفوفات
|
## المرح مع المصفوفات
|
||||||
|
|
||||||
`if ([] == false) // <-- truthy, will run code in if-block
|
```javascript
|
||||||
|
if ([] == false) // <-- truthy, will run code in if-block
|
||||||
if ([]) // <-- truthy, will also run code in if-block
|
|
||||||
|
if ([]) // <-- truthy, will also run code in if-block
|
||||||
if ([] == true) // <-- falsy, will NOT run code in if-block
|
|
||||||
|
if ([] == true) // <-- falsy, will NOT run code in if-block
|
||||||
if (![]) // <-- falsy, will also NOT run code in if-block
|
|
||||||
`
|
if (![]) // <-- falsy, will also NOT run code in if-block
|
||||||
|
```
|
||||||
|
|
||||||
## مذكرة قانونية
|
## مذكرة قانونية
|
||||||
|
|
||||||
كن على دراية بنوع البيانات عند تقييم قيمة في سياق منطقي. إذا كان من المفترض أن يكون نوع البيانات من القيمة _رقمًا_ ، فيمكن أن يؤدي الإفراط الصادق / الخاطئ إلى نتيجة غير متوقعة:
|
كن على دراية بنوع البيانات عند تقييم قيمة في سياق منطقي. إذا كان من المفترض أن يكون نوع البيانات من القيمة _رقمًا_ ، فيمكن أن يؤدي الإفراط الصادق / الخاطئ إلى نتيجة غير متوقعة:
|
||||||
|
|
||||||
`const match = { teamA: 0, teamB: 1 }
|
```javascript
|
||||||
if (match.teamA)
|
const match = { teamA: 0, teamB: 1 }
|
||||||
// The following won't run due to the falsy evaluation
|
if (match.teamA)
|
||||||
console.log('Team A: ' + match.teamA);
|
// The following won't run due to the falsy evaluation
|
||||||
}
|
console.log('Team A: ' + match.teamA);
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
بديل لحالة الاستخدام أعلاه هو تقييم القيمة باستخدام `typeof` :
|
بديل لحالة الاستخدام أعلاه هو تقييم القيمة باستخدام `typeof` :
|
||||||
|
|
||||||
`const match = { teamA: 0, teamB: 1 }
|
```javascript
|
||||||
if (typeof match.teamA === 'number')
|
const match = { teamA: 0, teamB: 1 }
|
||||||
console.log('Team A: ' + match.teamA);
|
if (typeof match.teamA === 'number')
|
||||||
}
|
console.log('Team A: ' + match.teamA);
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## معلومات اكثر
|
## معلومات اكثر
|
||||||
|
|
||||||
|
@ -8,20 +8,21 @@ localeTitle: استدعاء وظيفة
|
|||||||
|
|
||||||
يجب أن تكون الوظائف في النطاق عندما يتم استدعاؤها. نطاق الوظيفة هو الوظيفة التي يتم الإعلان عنها ، أو البرنامج بالكامل إذا تم الإعلان عنه في المستوى الأعلى.
|
يجب أن تكون الوظائف في النطاق عندما يتم استدعاؤها. نطاق الوظيفة هو الوظيفة التي يتم الإعلان عنها ، أو البرنامج بالكامل إذا تم الإعلان عنه في المستوى الأعلى.
|
||||||
|
|
||||||
`function myFunction(a, b) {
|
```javascript
|
||||||
return a * b;
|
function myFunction(a, b) {
|
||||||
}
|
return a * b;
|
||||||
myFunction(10, 2); // Function invocation, will return 20
|
}
|
||||||
|
myFunction(10, 2); // Function invocation, will return 20
|
||||||
//optional parameters (es6 only)
|
|
||||||
//allow to set optional parameters
|
//optional parameters (es6 only)
|
||||||
|
//allow to set optional parameters
|
||||||
function myFunction(a, b = 10) {
|
|
||||||
return a * b;
|
function myFunction(a, b = 10) {
|
||||||
}
|
return a * b;
|
||||||
myFunction(1); // Function invocation, will return 10
|
}
|
||||||
myFunction(1,5); // Function invocation, will return 5
|
myFunction(1); // Function invocation, will return 10
|
||||||
`
|
myFunction(1,5); // Function invocation, will return 5
|
||||||
|
```
|
||||||
|
|
||||||
في مثال التعليمة البرمجية ، يكون a و b هما معلمات الدالة التي تحتوي على القيمتين 10 و 2 ، وهما الوسيطات المستخدمة في استدعاء الدالة.
|
في مثال التعليمة البرمجية ، يكون a و b هما معلمات الدالة التي تحتوي على القيمتين 10 و 2 ، وهما الوسيطات المستخدمة في استدعاء الدالة.
|
||||||
|
|
||||||
@ -31,15 +32,16 @@ localeTitle: استدعاء وظيفة
|
|||||||
|
|
||||||
المثال التالي يقوم بإنشاء كائن ( `myObject` ) ، مع خاصيتين ( `firstName` و `lastName` ) ، وطريقة ( `fullName` ):
|
المثال التالي يقوم بإنشاء كائن ( `myObject` ) ، مع خاصيتين ( `firstName` و `lastName` ) ، وطريقة ( `fullName` ):
|
||||||
|
|
||||||
`var myObject = {
|
```javascript
|
||||||
firstName:"John",
|
var myObject = {
|
||||||
lastName: "Doe",
|
firstName:"John",
|
||||||
fullName: function () {
|
lastName: "Doe",
|
||||||
return this.firstName + " " + this.lastName;
|
fullName: function () {
|
||||||
}
|
return this.firstName + " " + this.lastName;
|
||||||
}
|
}
|
||||||
myObject.fullName(); // Function invoked as a method, will return "John Doe"
|
}
|
||||||
`
|
myObject.fullName(); // Function invoked as a method, will return "John Doe"
|
||||||
|
```
|
||||||
|
|
||||||
### وظائف السهم
|
### وظائف السهم
|
||||||
|
|
||||||
|
@ -8,13 +8,14 @@ localeTitle: كائن عالمي
|
|||||||
|
|
||||||
فمثلا:
|
فمثلا:
|
||||||
|
|
||||||
`// global scope
|
```javascript
|
||||||
var foo = "bar";
|
// global scope
|
||||||
|
var foo = "bar";
|
||||||
console.log(global.foo); // bar (in a Node environment)
|
|
||||||
console.log(window.foo); // bar (in a browser window)
|
console.log(global.foo); // bar (in a Node environment)
|
||||||
console.log(this.foo); // bar (if strict mode is disabled)
|
console.log(window.foo); // bar (in a browser window)
|
||||||
`
|
console.log(this.foo); // bar (if strict mode is disabled)
|
||||||
|
```
|
||||||
|
|
||||||
من المهم هنا التمييز بين النطاقات المحلية إلى الدوال والنطاق العالمي: فالعنصر العام يحتوي فقط على المتغيرات التي تم الإعلان عنها على النطاق العالمي ، وليس النطاقات المحلية للوظائف.
|
من المهم هنا التمييز بين النطاقات المحلية إلى الدوال والنطاق العالمي: فالعنصر العام يحتوي فقط على المتغيرات التي تم الإعلان عنها على النطاق العالمي ، وليس النطاقات المحلية للوظائف.
|
||||||
|
|
||||||
|
@ -4,34 +4,36 @@ localeTitle: المتغيرات العالمية
|
|||||||
---
|
---
|
||||||
يتم تعريف المتغيرات العالمية خارج وظيفة لسهولة الوصول في جميع أنحاء البرنامج، في حين يتم تخزين المتغيرات المحلية داخل دالة باستخدام `var` للاستخدام فقط في تلك الوظيفة في [نطاق](https://developer.mozilla.org/en-US/docs/Glossary/Scope) . إذا قمت بتعريف متغير بدون استخدام `var` ، حتى لو كان داخل دالة ، فسيظل ينظر إليه على أنه عالمي:
|
يتم تعريف المتغيرات العالمية خارج وظيفة لسهولة الوصول في جميع أنحاء البرنامج، في حين يتم تخزين المتغيرات المحلية داخل دالة باستخدام `var` للاستخدام فقط في تلك الوظيفة في [نطاق](https://developer.mozilla.org/en-US/docs/Glossary/Scope) . إذا قمت بتعريف متغير بدون استخدام `var` ، حتى لو كان داخل دالة ، فسيظل ينظر إليه على أنه عالمي:
|
||||||
|
|
||||||
`var x = 5; //global
|
```javascript
|
||||||
function someThing(y) {
|
var x = 5; //global
|
||||||
var z = x + y;
|
function someThing(y) {
|
||||||
console.log(z);
|
var z = x + y;
|
||||||
}
|
console.log(z);
|
||||||
|
}
|
||||||
function someThing(y) {
|
|
||||||
x = 5; //still global!
|
function someThing(y) {
|
||||||
var z = x + y;
|
x = 5; //still global!
|
||||||
console.log(z);
|
var z = x + y;
|
||||||
}
|
console.log(z);
|
||||||
|
}
|
||||||
|
|
||||||
function someThing(y) {
|
|
||||||
var x = 5; //local
|
function someThing(y) {
|
||||||
var z = x + y;
|
var x = 5; //local
|
||||||
console.log(z);
|
var z = x + y;
|
||||||
}
|
console.log(z);
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
المتغير الشامل هو أيضًا كائن في النطاق الحالي ، مثل نافذة المتصفح:
|
المتغير الشامل هو أيضًا كائن في النطاق الحالي ، مثل نافذة المتصفح:
|
||||||
|
|
||||||
`var dog = “Fluffy”;
|
```javascript
|
||||||
console.log(dog); //Fluffy;
|
var dog = “Fluffy”;
|
||||||
|
console.log(dog); //Fluffy;
|
||||||
var dog = “Fluffy”;
|
|
||||||
console.log(window.dog); //Fluffy
|
var dog = “Fluffy”;
|
||||||
`
|
console.log(window.dog); //Fluffy
|
||||||
|
```
|
||||||
|
|
||||||
إنها أفضل الممارسات لتقليل المتغيرات العالمية. نظرًا لأنه يمكن الوصول إلى المتغير في أي مكان في البرنامج ، فقد يتسبب ذلك في حدوث سلوك غريب.
|
إنها أفضل الممارسات لتقليل المتغيرات العالمية. نظرًا لأنه يمكن الوصول إلى المتغير في أي مكان في البرنامج ، فقد يتسبب ذلك في حدوث سلوك غريب.
|
||||||
|
|
||||||
|
@ -8,31 +8,33 @@ localeTitle: وظائف من الدرجة العليا
|
|||||||
|
|
||||||
عندما تستخدم `Array.map` ، فإنك تقدم دالة كوسيطة واحدة فقط ، والتي ينطبق عليها كل عنصر موجود في الصفيف.
|
عندما تستخدم `Array.map` ، فإنك تقدم دالة كوسيطة واحدة فقط ، والتي ينطبق عليها كل عنصر موجود في الصفيف.
|
||||||
|
|
||||||
`var arr = [ 1, 2, 3 ];
|
```javascript
|
||||||
|
var arr = [ 1, 2, 3 ];
|
||||||
var arrDoubled = arr.map(function(num) {
|
|
||||||
return num * 2;
|
var arrDoubled = arr.map(function(num) {
|
||||||
});
|
return num * 2;
|
||||||
|
});
|
||||||
console.log(arrDoubled); // [ 2, 4, 6 ]
|
|
||||||
`
|
console.log(arrDoubled); // [ 2, 4, 6 ]
|
||||||
|
```
|
||||||
|
|
||||||
يمكن لوظائف الترتيب الأعلى أيضًا إرجاع وظيفة. على سبيل المثال ، يمكنك إنشاء دالة تسمى `multiplyBy` تأخذ رقمًا وتقوم بإرجاع وظيفة تضاعف رقمًا آخر تقدمه من خلال الرقم الأول المقدم. يمكنك استخدام هذا الأسلوب لإنشاء وظيفة `multiplyByTwo` لتمريرها إلى `Array.map` . سيعطيك هذا النتيجة نفسها التي رأيتها أعلاه.
|
يمكن لوظائف الترتيب الأعلى أيضًا إرجاع وظيفة. على سبيل المثال ، يمكنك إنشاء دالة تسمى `multiplyBy` تأخذ رقمًا وتقوم بإرجاع وظيفة تضاعف رقمًا آخر تقدمه من خلال الرقم الأول المقدم. يمكنك استخدام هذا الأسلوب لإنشاء وظيفة `multiplyByTwo` لتمريرها إلى `Array.map` . سيعطيك هذا النتيجة نفسها التي رأيتها أعلاه.
|
||||||
|
|
||||||
`function multiplyBy(num1) {
|
```javascript
|
||||||
return function(num2) {
|
function multiplyBy(num1) {
|
||||||
return num1 * num2;
|
return function(num2) {
|
||||||
}
|
return num1 * num2;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
var multiplyByTwo = multiplyBy(2);
|
|
||||||
|
var multiplyByTwo = multiplyBy(2);
|
||||||
var arr = [ 1, 2, 3 ];
|
|
||||||
|
var arr = [ 1, 2, 3 ];
|
||||||
var arrDoubled = arr.map(multiplyByTwo);
|
|
||||||
|
var arrDoubled = arr.map(multiplyByTwo);
|
||||||
console.log(arrDoubled); // [ 2, 4, 6 ]
|
|
||||||
`
|
console.log(arrDoubled); // [ 2, 4, 6 ]
|
||||||
|
```
|
||||||
|
|
||||||
راجع دليل [الإغلاق](https://guide.freecodecamp.org/javascript/closures) للحصول على مزيد من المعلومات حول كيفية `multiplyByTwo` `num1` للإشارة إلى `num1` في المثال أعلاه.
|
راجع دليل [الإغلاق](https://guide.freecodecamp.org/javascript/closures) للحصول على مزيد من المعلومات حول كيفية `multiplyByTwo` `num1` للإشارة إلى `num1` في المثال أعلاه.
|
||||||
|
|
||||||
|
@ -8,24 +8,26 @@ localeTitle: HTML DOM getElementById الطريقة
|
|||||||
|
|
||||||
**محتوى HTML:**
|
**محتوى HTML:**
|
||||||
|
|
||||||
`
|
```html
|
||||||
<div id="demo"></div>
|
<div id="demo"></div>
|
||||||
`
|
```
|
||||||
|
|
||||||
**محتوى جافا سكريبت:**
|
**محتوى جافا سكريبت:**
|
||||||
|
|
||||||
`document.getElementById("demo"); // Returns the element with id "demo"
|
```javascript
|
||||||
`
|
document.getElementById("demo"); // Returns the element with id "demo"
|
||||||
|
```
|
||||||
|
|
||||||
إذا كان لديك أكثر من عنصر واحد له نفس قيمة `id` (ممارسة سيئة!) ، فسوف يعرض `getElementById` العنصر الأول الذي تم العثور عليه:
|
إذا كان لديك أكثر من عنصر واحد له نفس قيمة `id` (ممارسة سيئة!) ، فسوف يعرض `getElementById` العنصر الأول الذي تم العثور عليه:
|
||||||
|
|
||||||
`
|
```html
|
||||||
<div id="demo">First</div>
|
<div id="demo">First</div>
|
||||||
<div id="demo">Second</div>
|
<div id="demo">Second</div>
|
||||||
`
|
```
|
||||||
|
|
||||||
`document.getElementById("demo"); // Returns the element with id "demo" containing 'First'
|
```javascript
|
||||||
`
|
document.getElementById("demo"); // Returns the element with id "demo" containing 'First'
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -8,33 +8,35 @@ localeTitle: خاصية HTML Dom Innerhtml
|
|||||||
|
|
||||||
**_الحصول على عنصر المحتوى_**
|
**_الحصول على عنصر المحتوى_**
|
||||||
|
|
||||||
`
|
```html
|
||||||
<div id="demo">
|
<div id="demo">
|
||||||
<p>Demo</p>
|
<p>Demo</p>
|
||||||
</div>
|
</div>
|
||||||
`
|
```
|
||||||
|
|
||||||
`var element = document.getElementById("demo");
|
```javascript
|
||||||
console.log(element.innerHTML) //logs <p>Demo</p>
|
var element = document.getElementById("demo");
|
||||||
`
|
console.log(element.innerHTML) //logs <p>Demo</p>
|
||||||
|
```
|
||||||
|
|
||||||
**_محتوى مجموعة العنصر_**
|
**_محتوى مجموعة العنصر_**
|
||||||
|
|
||||||
`
|
```html
|
||||||
<div id="demo"></div>
|
<div id="demo"></div>
|
||||||
`
|
```
|
||||||
|
|
||||||
`var element = document.getElementById("demo");
|
```javascript
|
||||||
element.innerHTML = "<div>Demo</div>";
|
var element = document.getElementById("demo");
|
||||||
`
|
element.innerHTML = "<div>Demo</div>";
|
||||||
|
```
|
||||||
|
|
||||||
سوف يكون مثل HTML الآن
|
سوف يكون مثل HTML الآن
|
||||||
|
|
||||||
`
|
```html
|
||||||
<div id="demo">
|
<div id="demo">
|
||||||
<div>Demo</div>
|
<div>Demo</div>
|
||||||
</div>
|
</div>
|
||||||
`
|
```
|
||||||
|
|
||||||
**_اعتبارات أمنية_**
|
**_اعتبارات أمنية_**
|
||||||
|
|
||||||
@ -44,10 +46,11 @@ localeTitle: خاصية HTML Dom Innerhtml
|
|||||||
|
|
||||||
سيؤدي تعيين قيمة " `<script>alert();</script>` " إلى تشغيل وظيفة "alert ()" في Javascript:
|
سيؤدي تعيين قيمة " `<script>alert();</script>` " إلى تشغيل وظيفة "alert ()" في Javascript:
|
||||||
|
|
||||||
`var element = document.getElementById("demo");
|
```javascript
|
||||||
|
var element = document.getElementById("demo");
|
||||||
element.innerHTML = "<script>alert();</script>";
|
|
||||||
`
|
element.innerHTML = "<script>alert();</script>";
|
||||||
|
```
|
||||||
|
|
||||||
يسمى هذا النوع من الهجوم [Scripting عبر الموقع أو XSS باختصار](https://en.wikipedia.org/wiki/Cross-site_scripting) .
|
يسمى هذا النوع من الهجوم [Scripting عبر الموقع أو XSS باختصار](https://en.wikipedia.org/wiki/Cross-site_scripting) .
|
||||||
|
|
||||||
|
@ -6,28 +6,30 @@ localeTitle: HTML DOM querySelector ()
|
|||||||
|
|
||||||
**محتوى HTML:**
|
**محتوى HTML:**
|
||||||
|
|
||||||
`
|
```html
|
||||||
<div id="id-example"></div>
|
<div id="id-example"></div>
|
||||||
<div class="class-example"></div>
|
<div class="class-example"></div>
|
||||||
<a>element-example</a>
|
<a>element-example</a>
|
||||||
`
|
```
|
||||||
|
|
||||||
**محتوى جافا سكريبت:**
|
**محتوى جافا سكريبت:**
|
||||||
|
|
||||||
`document.querySelector("#id-example"); // Returns the element with id "id-example"
|
```javascript
|
||||||
document.querySelector(".class-example"); // Returns the element with class "class-example"
|
document.querySelector("#id-example"); // Returns the element with id "id-example"
|
||||||
document.querySelector("a"); // Returns the "a" element
|
document.querySelector(".class-example"); // Returns the element with class "class-example"
|
||||||
`
|
document.querySelector("a"); // Returns the "a" element
|
||||||
|
```
|
||||||
|
|
||||||
ملاحظة `querySelector()` إرجاع عنصر المطابقة الأول ، لإرجاع كافة التطابقات ، استخدم أسلوب querySelectorAll () بدلاً من ذلك.
|
ملاحظة `querySelector()` إرجاع عنصر المطابقة الأول ، لإرجاع كافة التطابقات ، استخدم أسلوب querySelectorAll () بدلاً من ذلك.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<div id="example">First</div>
|
<div id="example">First</div>
|
||||||
<div id="example">Second</div>
|
<div id="example">Second</div>
|
||||||
`
|
```
|
||||||
|
|
||||||
`document.querySelector("#example"); // Returns only the element containing 'First'
|
```javascript
|
||||||
`
|
document.querySelector("#example"); // Returns only the element containing 'First'
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -12,17 +12,17 @@ localeTitle: HTML دوم
|
|||||||
|
|
||||||
كل عنصر في DOM يسمى أيضًا عقدة.
|
كل عنصر في DOM يسمى أيضًا عقدة.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title> My title </title>
|
<title> My title </title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a href="#">My Link</a>
|
<a href="#">My Link</a>
|
||||||
<h1> My header </h1>
|
<h1> My header </h1>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`
|
```
|
||||||
|
|
||||||
يكون DOM الخاص بـ HTML أعلاه على النحو التالي:
|
يكون DOM الخاص بـ HTML أعلاه على النحو التالي:
|
||||||
|
|
||||||
|
@ -8,35 +8,38 @@ localeTitle: If-Else Statement
|
|||||||
|
|
||||||
**ملاحظة:** العبارة `else` اختيارية.
|
**ملاحظة:** العبارة `else` اختيارية.
|
||||||
|
|
||||||
`if (condition)
|
```javascript
|
||||||
/* do something */
|
if (condition)
|
||||||
else
|
/* do something */
|
||||||
/* do something else */
|
else
|
||||||
`
|
/* do something else */
|
||||||
|
```
|
||||||
|
|
||||||
يمكن أن تكون متسلسلة متعددة `if...else` بيانات أخرى لإنشاء شرط `else if` . هذا يحدد شرط جديد لاختبار ويمكن تكرار لاختبار شروط متعددة ، والتحقق حتى يتم تقديم بيان صحيح لتنفيذ.
|
يمكن أن تكون متسلسلة متعددة `if...else` بيانات أخرى لإنشاء شرط `else if` . هذا يحدد شرط جديد لاختبار ويمكن تكرار لاختبار شروط متعددة ، والتحقق حتى يتم تقديم بيان صحيح لتنفيذ.
|
||||||
|
|
||||||
`if (condition1)
|
```javascript
|
||||||
/* do something */
|
if (condition1)
|
||||||
else if (condition2)
|
/* do something */
|
||||||
/* do something else */
|
else if (condition2)
|
||||||
else if (condition3)
|
/* do something else */
|
||||||
/* do something else */
|
else if (condition3)
|
||||||
else
|
/* do something else */
|
||||||
/* final statement */
|
else
|
||||||
`
|
/* final statement */
|
||||||
|
```
|
||||||
|
|
||||||
**ملاحظة:** إذا كنت ترغب في تنفيذ البيان أكثر من واحد في `if` ، `else` أو `else if` مطلوبة جزئيا، الأقواس المجعدة حول البيانات:
|
**ملاحظة:** إذا كنت ترغب في تنفيذ البيان أكثر من واحد في `if` ، `else` أو `else if` مطلوبة جزئيا، الأقواس المجعدة حول البيانات:
|
||||||
|
|
||||||
`if (condition) {
|
```javascript
|
||||||
/* do */
|
if (condition) {
|
||||||
/* something */
|
/* do */
|
||||||
/* with multiple statements */
|
/* something */
|
||||||
} else {
|
/* with multiple statements */
|
||||||
/* do something */
|
} else {
|
||||||
/* else */
|
/* do something */
|
||||||
}
|
/* else */
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
[وصلة MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if…else) | [رابط MSDN](https://msdn.microsoft.com/en-us/library/85yyde5c.aspx)
|
[وصلة MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if…else) | [رابط MSDN](https://msdn.microsoft.com/en-us/library/85yyde5c.aspx)
|
||||||
|
|
||||||
@ -54,14 +57,15 @@ localeTitle: If-Else Statement
|
|||||||
|
|
||||||
**استخدام** `else if` :
|
**استخدام** `else if` :
|
||||||
|
|
||||||
`if (x < 10)
|
```javascript
|
||||||
return "Small number";
|
if (x < 10)
|
||||||
else if (x < 50)
|
return "Small number";
|
||||||
return "Medium number";
|
else if (x < 50)
|
||||||
else if (x < 100)
|
return "Medium number";
|
||||||
return "Large number";
|
else if (x < 100)
|
||||||
else {
|
return "Large number";
|
||||||
flag = 1;
|
else {
|
||||||
return "Invalid number";
|
flag = 1;
|
||||||
}
|
return "Invalid number";
|
||||||
`
|
}
|
||||||
|
```
|
@ -34,11 +34,12 @@ localeTitle: تعبيرات الوظائف المستحثة على الفور (I
|
|||||||
|
|
||||||
**مثال سيء** :
|
**مثال سيء** :
|
||||||
|
|
||||||
`var x = 2 //no semicolon, will throw error
|
```javascript
|
||||||
(function(y){
|
var x = 2 //no semicolon, will throw error
|
||||||
return x;
|
(function(y){
|
||||||
})(x); //Uncaught TypeError: 2 is not a function
|
return x;
|
||||||
`
|
})(x); //Uncaught TypeError: 2 is not a function
|
||||||
|
```
|
||||||
|
|
||||||
## لماذا استخدام تعبيرات الاستدلال على الفور؟
|
## لماذا استخدام تعبيرات الاستدلال على الفور؟
|
||||||
|
|
||||||
|
@ -16,13 +16,15 @@ localeTitle: طريقة تحديث الموقع
|
|||||||
|
|
||||||
* `True` يعيد تحميل الصفحة من الخادم (على سبيل المثال لا يخزن البيانات المخزنة مؤقتًا بواسطة المتصفح):
|
* `True` يعيد تحميل الصفحة من الخادم (على سبيل المثال لا يخزن البيانات المخزنة مؤقتًا بواسطة المتصفح):
|
||||||
|
|
||||||
`window.location.reload(true);
|
```
|
||||||
`
|
window.location.reload(true);
|
||||||
|
```
|
||||||
|
|
||||||
* `False` بإعادة تحميل الصفحة باستخدام إصدار الصفحة المخزنة مؤقتًا بواسطة المستعرض.
|
* `False` بإعادة تحميل الصفحة باستخدام إصدار الصفحة المخزنة مؤقتًا بواسطة المستعرض.
|
||||||
|
|
||||||
`window.location.reload(false);
|
```
|
||||||
`
|
window.location.reload(false);
|
||||||
|
```
|
||||||
|
|
||||||
`False` هي المعلمة الافتراضية ، لذلك إذا تركت فارغة ، فإن `object.reload()` يعيد تحميل الصفحة باستخدام بيانات broswer المخبأة ، أي أنه مماثل لاستخدام الطريقة كـ `object.reload(false)` .
|
`False` هي المعلمة الافتراضية ، لذلك إذا تركت فارغة ، فإن `object.reload()` يعيد تحميل الصفحة باستخدام بيانات broswer المخبأة ، أي أنه مماثل لاستخدام الطريقة كـ `object.reload(false)` .
|
||||||
|
|
||||||
@ -30,29 +32,33 @@ localeTitle: طريقة تحديث الموقع
|
|||||||
|
|
||||||
* إرفاق `Location.reload()` بعلامة زر HTML ، كما يلي:
|
* إرفاق `Location.reload()` بعلامة زر HTML ، كما يلي:
|
||||||
|
|
||||||
`<input type="button" value="Refresh Button" onClick="window.location.reload()">
|
```
|
||||||
`
|
<input type="button" value="Refresh Button" onClick="window.location.reload()">
|
||||||
|
```
|
||||||
|
|
||||||
* تعيين حدث عند النقر على الزر باستخدام الوظيفة التي تستخدم الطريقة ، حيث يبدو الزر مشابهاً
|
* تعيين حدث عند النقر على الزر باستخدام الوظيفة التي تستخدم الطريقة ، حيث يبدو الزر مشابهاً
|
||||||
|
|
||||||
`<button type="button" onClick="reloadThePage()">Refresh!</button>
|
```
|
||||||
`
|
<button type="button" onClick="reloadThePage()">Refresh!</button>
|
||||||
|
```
|
||||||
|
|
||||||
`<script>
|
```
|
||||||
function reloadThePage(){
|
<script>
|
||||||
window.location.reload();
|
function reloadThePage(){
|
||||||
}
|
window.location.reload();
|
||||||
</script>
|
}
|
||||||
`
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
### مثال:
|
### مثال:
|
||||||
|
|
||||||
`// Reload the current resources from the server
|
```javascript
|
||||||
window.location.reload(true);
|
// Reload the current resources from the server
|
||||||
|
window.location.reload(true);
|
||||||
// Reload the current resources from the browser's cache
|
|
||||||
window.location.reload();
|
// Reload the current resources from the browser's cache
|
||||||
`
|
window.location.reload();
|
||||||
|
```
|
||||||
|
|
||||||
سيؤدي هذا إلى إعادة تحميل الصفحة على عنوان URL الحالي من الخادم.
|
سيؤدي هذا إلى إعادة تحميل الصفحة على عنوان URL الحالي من الخادم.
|
||||||
|
|
||||||
|
@ -12,14 +12,15 @@ localeTitle: العوامل المنطقية
|
|||||||
|
|
||||||
عند تضمين قيم منطقية فقط (سواء كانت `true` أو `false` ) ، فإنها ترجع true فقط إذا كان كلا التعبيرين صحيحين. إذا كان تعبير واحد أو كلاهما غير صحيح ، فستظهر العبارة بالكامل false.
|
عند تضمين قيم منطقية فقط (سواء كانت `true` أو `false` ) ، فإنها ترجع true فقط إذا كان كلا التعبيرين صحيحين. إذا كان تعبير واحد أو كلاهما غير صحيح ، فستظهر العبارة بالكامل false.
|
||||||
|
|
||||||
`true && true //returns the second value, true
|
```js
|
||||||
true && false //returns the second value, false
|
true && true //returns the second value, true
|
||||||
false && false //returns the first value, false
|
true && false //returns the second value, false
|
||||||
123 && 'abc' // returns the second value, 'abc'
|
false && false //returns the first value, false
|
||||||
'abc' && null //returns the second value, null
|
123 && 'abc' // returns the second value, 'abc'
|
||||||
undefined && 'abc' //returns the first value, undefined
|
'abc' && null //returns the second value, null
|
||||||
0 && false //returns the first value, 0
|
undefined && 'abc' //returns the first value, undefined
|
||||||
`
|
0 && false //returns the first value, 0
|
||||||
|
```
|
||||||
|
|
||||||
#### منطقية أو (||
|
#### منطقية أو (||
|
||||||
|
|
||||||
@ -27,14 +28,15 @@ localeTitle: العوامل المنطقية
|
|||||||
|
|
||||||
عند تضمين قيم منطقية فقط (سواء كانت `true` أو `false` ) ، فإنها ترجع true إذا كان التعبير صحيحًا. يمكن أن يكون كلا التعبيرين صحيحًا ، لكن هناك حاجة إلى تعبير واحد فقط للحصول على النتيجة الحقيقية.
|
عند تضمين قيم منطقية فقط (سواء كانت `true` أو `false` ) ، فإنها ترجع true إذا كان التعبير صحيحًا. يمكن أن يكون كلا التعبيرين صحيحًا ، لكن هناك حاجة إلى تعبير واحد فقط للحصول على النتيجة الحقيقية.
|
||||||
|
|
||||||
`true || true //returns the first value, true
|
```js
|
||||||
true || false //returns the first value, true
|
true || true //returns the first value, true
|
||||||
false || false //returns the second value, false
|
true || false //returns the first value, true
|
||||||
123 || 'abc' // returns the first value, 123
|
false || false //returns the second value, false
|
||||||
'abc' || null //returns the first value, 'abc'
|
123 || 'abc' // returns the first value, 123
|
||||||
undefined || 'abc' //returns the second value, 'abc'
|
'abc' || null //returns the first value, 'abc'
|
||||||
0 || false //returns the second value, false
|
undefined || 'abc' //returns the second value, 'abc'
|
||||||
`
|
0 || false //returns the second value, false
|
||||||
|
```
|
||||||
|
|
||||||
#### تقييم دائرة قصر
|
#### تقييم دائرة قصر
|
||||||
|
|
||||||
@ -55,33 +57,35 @@ localeTitle: العوامل المنطقية
|
|||||||
1. تحويل التعبير إلى منطقي.
|
1. تحويل التعبير إلى منطقي.
|
||||||
2. إرجاع معكوس القيمة المنطقية التي تم الحصول عليها في الخطوة الأخيرة.
|
2. إرجاع معكوس القيمة المنطقية التي تم الحصول عليها في الخطوة الأخيرة.
|
||||||
|
|
||||||
`var spam = 'rinki'; //spam may be equal to any non empty string
|
```js
|
||||||
var booSpam = !spam;
|
var spam = 'rinki'; //spam may be equal to any non empty string
|
||||||
/*returns false
|
var booSpam = !spam;
|
||||||
since when a non-empty string when converted to boolean returns true
|
/*returns false
|
||||||
inverse of which is evaluated to false.
|
since when a non-empty string when converted to boolean returns true
|
||||||
*/
|
inverse of which is evaluated to false.
|
||||||
|
*/
|
||||||
var spam2 = ''; //spam2 here is equal to empty string
|
|
||||||
var booSpam2 = !spam2;
|
var spam2 = ''; //spam2 here is equal to empty string
|
||||||
/*returns true
|
var booSpam2 = !spam2;
|
||||||
since when a empty string when converted to boolean returns false
|
/*returns true
|
||||||
inverse of which is evaluated to true.
|
since when a empty string when converted to boolean returns false
|
||||||
*/
|
inverse of which is evaluated to true.
|
||||||
`
|
*/
|
||||||
|
```
|
||||||
|
|
||||||
#### نصائح:
|
#### نصائح:
|
||||||
|
|
||||||
كلا المشغلين المنطقيين سيعودون قيمة آخر تعبير تم تقييمه. فمثلا:
|
كلا المشغلين المنطقيين سيعودون قيمة آخر تعبير تم تقييمه. فمثلا:
|
||||||
|
|
||||||
`"cat" && "dog" //returns "dog"
|
```js
|
||||||
"cat" && false //returns false
|
"cat" && "dog" //returns "dog"
|
||||||
0 && "cat" //returns 0 (which is a falsy value)
|
"cat" && false //returns false
|
||||||
|
0 && "cat" //returns 0 (which is a falsy value)
|
||||||
"cat" || "dog" //returns "cat"
|
|
||||||
"cat" || false //returns "cat"
|
"cat" || "dog" //returns "cat"
|
||||||
0 || "cat" //returns "cat"
|
"cat" || false //returns "cat"
|
||||||
`
|
0 || "cat" //returns "cat"
|
||||||
|
```
|
||||||
|
|
||||||
لاحظ أن where `&&` تُرجع القيمة الأولى ، `||` يعيد القيمة الثانية والعكس صحيح.
|
لاحظ أن where `&&` تُرجع القيمة الأولى ، `||` يعيد القيمة الثانية والعكس صحيح.
|
||||||
|
|
||||||
|
@ -4,10 +4,11 @@ localeTitle: لحلقة
|
|||||||
---
|
---
|
||||||
### بناء الجملة
|
### بناء الجملة
|
||||||
|
|
||||||
`for ([initialization]); [condition]; [final-expression]) {
|
```javascript
|
||||||
// statement
|
for ([initialization]); [condition]; [final-expression]) {
|
||||||
}
|
// statement
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
جافا سكريبت `for` بيان يتكون من ثلاث عبارات وبيان:
|
جافا سكريبت `for` بيان يتكون من ثلاث عبارات وبيان:
|
||||||
|
|
||||||
@ -46,36 +47,38 @@ localeTitle: لحلقة
|
|||||||
|
|
||||||
تكرار عبر الأعداد الصحيحة من 0-8
|
تكرار عبر الأعداد الصحيحة من 0-8
|
||||||
|
|
||||||
`for (var i = 0; i < 9; i++) {
|
```javascript
|
||||||
console.log(i);
|
for (var i = 0; i < 9; i++) {
|
||||||
}
|
console.log(i);
|
||||||
|
}
|
||||||
output:
|
|
||||||
0
|
output:
|
||||||
1
|
0
|
||||||
2
|
1
|
||||||
3
|
2
|
||||||
4
|
3
|
||||||
5
|
4
|
||||||
6
|
5
|
||||||
7
|
6
|
||||||
8
|
7
|
||||||
`
|
8
|
||||||
|
```
|
||||||
|
|
||||||
الخروج من حلقة قبل تعبير الشرط غير صحيح
|
الخروج من حلقة قبل تعبير الشرط غير صحيح
|
||||||
|
|
||||||
`for (var elephant = 1; elephant < 10; elephant+=2) {
|
```javascript
|
||||||
if (elephant === 7) {
|
for (var elephant = 1; elephant < 10; elephant+=2) {
|
||||||
break;
|
if (elephant === 7) {
|
||||||
}
|
break;
|
||||||
console.info('elephant is ' + elephant);
|
}
|
||||||
}
|
console.info('elephant is ' + elephant);
|
||||||
|
}
|
||||||
output:
|
|
||||||
elephant is 1
|
output:
|
||||||
elephant is 3
|
elephant is 1
|
||||||
elephant is 5
|
elephant is 3
|
||||||
`
|
elephant is 5
|
||||||
|
```
|
||||||
|
|
||||||
### موارد آخرى
|
### موارد آخرى
|
||||||
|
|
||||||
|
@ -11,14 +11,16 @@ localeTitle: التعامل مع كائنات جافا سكريبت
|
|||||||
|
|
||||||
إضافة خصائص إلى كائنات باستخدام تدرج قوس:
|
إضافة خصائص إلى كائنات باستخدام تدرج قوس:
|
||||||
|
|
||||||
`myObject['myProperty'] = "myValue";
|
```javascript
|
||||||
`
|
myObject['myProperty'] = "myValue";
|
||||||
|
```
|
||||||
|
|
||||||
باستخدام تدرج القوس ، يمكننا استخدام المتغيرات كأسماء للممتلكات:
|
باستخدام تدرج القوس ، يمكننا استخدام المتغيرات كأسماء للممتلكات:
|
||||||
|
|
||||||
`var dynamicProperty = "myProperty";
|
```javascript
|
||||||
myObject[dynamicProperty] = "myValue";
|
var dynamicProperty = "myProperty";
|
||||||
`
|
myObject[dynamicProperty] = "myValue";
|
||||||
|
```
|
||||||
|
|
||||||
يمكننا أيضًا حذفها كما يلي:
|
يمكننا أيضًا حذفها كما يلي:
|
||||||
|
|
||||||
|
@ -22,38 +22,41 @@ _يتذكر موقع الويب اللغة التي حددتها في زيارت
|
|||||||
|
|
||||||
**ضع في اعتبارك أن ملف تعريف الارتباط الذي تم تعيينه بواسطة نطاق معين لا يمكن قراءته إلا من خلال ذلك النطاق والنطاقات الفرعية فقط.**
|
**ضع في اعتبارك أن ملف تعريف الارتباط الذي تم تعيينه بواسطة نطاق معين لا يمكن قراءته إلا من خلال ذلك النطاق والنطاقات الفرعية فقط.**
|
||||||
|
|
||||||
`// Using vanilla javascript
|
```javascript
|
||||||
document.cookie = 'userLanguage=french; expires=Sun, 2 Dec 2017 23:56:11 UTC; path=/';
|
// Using vanilla javascript
|
||||||
|
document.cookie = 'userLanguage=french; expires=Sun, 2 Dec 2017 23:56:11 UTC; path=/';
|
||||||
//Using JS cookie library
|
|
||||||
Cookies.set('userLanguage', 'french', { expires: 7, path: '/' });
|
//Using JS cookie library
|
||||||
`
|
Cookies.set('userLanguage', 'french', { expires: 7, path: '/' });
|
||||||
|
```
|
||||||
|
|
||||||
_تنتهي صلاحية ملف تعريف الارتباط في 7 أيام_
|
_تنتهي صلاحية ملف تعريف الارتباط في 7 أيام_
|
||||||
|
|
||||||
### احصل على ملفات تعريف الارتباط
|
### احصل على ملفات تعريف الارتباط
|
||||||
|
|
||||||
`// Using vanilla javascript
|
```javascript
|
||||||
console.log(document.cookie)
|
// Using vanilla javascript
|
||||||
|
console.log(document.cookie)
|
||||||
// => "_ga=GA1.2.1266762736.1473341790; userLanguage=french"
|
|
||||||
|
// => "_ga=GA1.2.1266762736.1473341790; userLanguage=french"
|
||||||
// Using JS cookie library
|
|
||||||
Cookies.get('userLanguage');
|
// Using JS cookie library
|
||||||
|
Cookies.get('userLanguage');
|
||||||
// => "french"
|
|
||||||
`
|
// => "french"
|
||||||
|
```
|
||||||
|
|
||||||
### حذف ملف تعريف الارتباط
|
### حذف ملف تعريف الارتباط
|
||||||
|
|
||||||
لحذف ملف تعريف ارتباط ، يتم تعيين تاريخ انتهاء الصلاحية إلى شيء ما في الماضي.
|
لحذف ملف تعريف ارتباط ، يتم تعيين تاريخ انتهاء الصلاحية إلى شيء ما في الماضي.
|
||||||
|
|
||||||
`// Using vanilla javascript
|
```javascript
|
||||||
document.cookie = 'userLanguage; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
|
// Using vanilla javascript
|
||||||
|
document.cookie = 'userLanguage; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
|
||||||
//Using JS cookie library
|
|
||||||
Cookies.remove('userLanguage');
|
//Using JS cookie library
|
||||||
`
|
Cookies.remove('userLanguage');
|
||||||
|
```
|
||||||
|
|
||||||
_إذا وجدت نفسك تتعامل مع ملفات تعريف الارتباط كثيرًا في مشروعك ، فالرجاء استخدام مكتبة مثل [JS Cookie](https://github.com/js-cookie/js-cookie) وحفظ وقتًا كبيرًا من الوقت._
|
_إذا وجدت نفسك تتعامل مع ملفات تعريف الارتباط كثيرًا في مشروعك ، فالرجاء استخدام مكتبة مثل [JS Cookie](https://github.com/js-cookie/js-cookie) وحفظ وقتًا كبيرًا من الوقت._
|
||||||
|
|
||||||
|
@ -10,30 +10,34 @@ localeTitle: أعداد
|
|||||||
|
|
||||||
وأعرب عدد الحرفية عموما `base-10` حرفية عشري.
|
وأعرب عدد الحرفية عموما `base-10` حرفية عشري.
|
||||||
|
|
||||||
`var foo = 47;
|
```javascript
|
||||||
var bar = 47.9;
|
var foo = 47;
|
||||||
`
|
var bar = 47.9;
|
||||||
|
```
|
||||||
|
|
||||||
الجزء الرئيسي من القيمة العشرية ، إذا كان `0` ، هو اختياري:
|
الجزء الرئيسي من القيمة العشرية ، إذا كان `0` ، هو اختياري:
|
||||||
|
|
||||||
`var same = 0.47;
|
```javascript
|
||||||
var stillSame = .47;
|
var same = 0.47;
|
||||||
`
|
var stillSame = .47;
|
||||||
|
```
|
||||||
|
|
||||||
وبالمثل ، فإن الجزء زائدة (الجزئي) من قيمة عشرية بعد `.` ، إذا كان `0` ، هو اختياري:
|
وبالمثل ، فإن الجزء زائدة (الجزئي) من قيمة عشرية بعد `.` ، إذا كان `0` ، هو اختياري:
|
||||||
|
|
||||||
`var a = 47.0;
|
```javascript
|
||||||
var b = 47.;
|
var a = 47.0;
|
||||||
`
|
var b = 47.;
|
||||||
|
```
|
||||||
|
|
||||||
بشكل افتراضي ، سيتم إخراج معظم الأرقام في شكل `base-10` decimals ، مع إزالة الكسر `0` ثانية. وبالتالي:
|
بشكل افتراضي ، سيتم إخراج معظم الأرقام في شكل `base-10` decimals ، مع إزالة الكسر `0` ثانية. وبالتالي:
|
||||||
|
|
||||||
`var foo = 47.300;
|
```javascript
|
||||||
var bar = 47.0;
|
var foo = 47.300;
|
||||||
|
var bar = 47.0;
|
||||||
foo; // 47.3
|
|
||||||
bar; // 47
|
foo; // 47.3
|
||||||
`
|
bar; // 47
|
||||||
|
```
|
||||||
|
|
||||||
يمكن كتابة `numbers` كبيرة جدًا أو صغيرة جدًا على النحو التالي:
|
يمكن كتابة `numbers` كبيرة جدًا أو صغيرة جدًا على النحو التالي:
|
||||||
|
|
||||||
@ -43,20 +47,22 @@ localeTitle: أعداد
|
|||||||
|
|
||||||
يمكن استخدام طريقة `toExponential` لتحويل `number` إلى `exponential notation` .
|
يمكن استخدام طريقة `toExponential` لتحويل `number` إلى `exponential notation` .
|
||||||
|
|
||||||
`var foo = 47e8;
|
```javascript
|
||||||
foo; // 4700000000
|
var foo = 47e8;
|
||||||
foo.toExponential() //"47e8"
|
foo; // 4700000000
|
||||||
`
|
foo.toExponential() //"47e8"
|
||||||
|
```
|
||||||
|
|
||||||
لدى الأرقام الوصول إلى الأساليب المضمنة في `Number.prototype` .
|
لدى الأرقام الوصول إلى الأساليب المضمنة في `Number.prototype` .
|
||||||
|
|
||||||
فمثلا: `toFixed()` طريقة `toFixed()` رقمًا مع عدد محدد من الأرقام إلى يمين `toFixed()` العشرية.
|
فمثلا: `toFixed()` طريقة `toFixed()` رقمًا مع عدد محدد من الأرقام إلى يمين `toFixed()` العشرية.
|
||||||
|
|
||||||
`var foo = 47.69;
|
```javascript
|
||||||
foo.toFixed(0); // "48"
|
var foo = 47.69;
|
||||||
foo.toFixed(1); // "47.7"
|
foo.toFixed(0); // "48"
|
||||||
foo.toFixed(2); // "47.69"
|
foo.toFixed(1); // "47.7"
|
||||||
`
|
foo.toFixed(2); // "47.69"
|
||||||
|
```
|
||||||
|
|
||||||
> اكتب `Number.prototype` في متصفحك `Number.prototype` الطرق الأخرى المتاحة بنفسك.
|
> اكتب `Number.prototype` في متصفحك `Number.prototype` الطرق الأخرى المتاحة بنفسك.
|
||||||
|
|
||||||
|
@ -2,24 +2,25 @@
|
|||||||
title: Functional
|
title: Functional
|
||||||
localeTitle: وظيفي
|
localeTitle: وظيفي
|
||||||
---
|
---
|
||||||
`var fun = function(a, b) {
|
```javascript
|
||||||
var funInstance = {};
|
var fun = function(a, b) {
|
||||||
funInstance.a = a;
|
var funInstance = {};
|
||||||
funInstance.b = b;
|
funInstance.a = a;
|
||||||
funInstance.method1 = function() {
|
funInstance.b = b;
|
||||||
// method code here
|
funInstance.method1 = function() {
|
||||||
}
|
// method code here
|
||||||
funInstance.method2 = function() {
|
}
|
||||||
// method code here
|
funInstance.method2 = function() {
|
||||||
}
|
// method code here
|
||||||
funInstance.method3 = function() {
|
}
|
||||||
// method code here
|
funInstance.method3 = function() {
|
||||||
}
|
// method code here
|
||||||
return funInstance;
|
}
|
||||||
}
|
return funInstance;
|
||||||
var myFun = fun(1, 2);
|
}
|
||||||
myFun.method1();
|
var myFun = fun(1, 2);
|
||||||
`
|
myFun.method1();
|
||||||
|
```
|
||||||
|
|
||||||
## كيف يمكنني التعرف عليه؟
|
## كيف يمكنني التعرف عليه؟
|
||||||
|
|
||||||
@ -37,31 +38,32 @@ localeTitle: وظيفي
|
|||||||
|
|
||||||
## العنوان: وظيفية المشتركة
|
## العنوان: وظيفية المشتركة
|
||||||
|
|
||||||
`var fun = function(a, b) {
|
```javascript
|
||||||
var funInstance = {};
|
var fun = function(a, b) {
|
||||||
funInstance.a = a;
|
var funInstance = {};
|
||||||
funInstance.b = b;
|
funInstance.a = a;
|
||||||
extend(funInstance, funMethods);
|
funInstance.b = b;
|
||||||
return funInstance;
|
extend(funInstance, funMethods);
|
||||||
}
|
return funInstance;
|
||||||
var extend = function(to, from) {
|
}
|
||||||
for (var key in from) {
|
var extend = function(to, from) {
|
||||||
to[key] = from[key];
|
for (var key in from) {
|
||||||
}
|
to[key] = from[key];
|
||||||
}
|
}
|
||||||
var funMethods = {};
|
}
|
||||||
funMethods.method1 = function() {
|
var funMethods = {};
|
||||||
// method code here
|
funMethods.method1 = function() {
|
||||||
}
|
// method code here
|
||||||
funMethods.method2 = function() {
|
}
|
||||||
// method code here
|
funMethods.method2 = function() {
|
||||||
}
|
// method code here
|
||||||
funMethods.method3 = function() {
|
}
|
||||||
// method code here
|
funMethods.method3 = function() {
|
||||||
}
|
// method code here
|
||||||
var myFun = fun(1, 2);
|
}
|
||||||
myFun.method1();
|
var myFun = fun(1, 2);
|
||||||
`
|
myFun.method1();
|
||||||
|
```
|
||||||
|
|
||||||
## كيف يمكنني التعرف عليه؟
|
## كيف يمكنني التعرف عليه؟
|
||||||
|
|
||||||
@ -79,25 +81,26 @@ localeTitle: وظيفي
|
|||||||
|
|
||||||
## العنوان: Prototypal
|
## العنوان: Prototypal
|
||||||
|
|
||||||
`var fun = function(a, b) {
|
```javascript
|
||||||
var funInstance = Object.create(funMethods);
|
var fun = function(a, b) {
|
||||||
funInstance.a = a;
|
var funInstance = Object.create(funMethods);
|
||||||
funInstance.b = b;
|
funInstance.a = a;
|
||||||
return funInstance;
|
funInstance.b = b;
|
||||||
}
|
return funInstance;
|
||||||
var funMethods = {};
|
}
|
||||||
funMethods.method1 = function() {
|
var funMethods = {};
|
||||||
// method code here
|
funMethods.method1 = function() {
|
||||||
}
|
// method code here
|
||||||
funMethods.method2 = function() {
|
}
|
||||||
// method code here
|
funMethods.method2 = function() {
|
||||||
}
|
// method code here
|
||||||
funMethods.method3 = function() {
|
}
|
||||||
// method code here
|
funMethods.method3 = function() {
|
||||||
}
|
// method code here
|
||||||
var myFun = fun(1, 2);
|
}
|
||||||
myFun.method1();
|
var myFun = fun(1, 2);
|
||||||
`
|
myFun.method1();
|
||||||
|
```
|
||||||
|
|
||||||
## كيف يمكنني التعرف عليه؟
|
## كيف يمكنني التعرف عليه؟
|
||||||
|
|
||||||
@ -115,24 +118,25 @@ localeTitle: وظيفي
|
|||||||
|
|
||||||
## العنوان: Pseudoclassical
|
## العنوان: Pseudoclassical
|
||||||
|
|
||||||
`var Fun = function(a, b) {
|
```javascript
|
||||||
// this = Object.create(Fun.prototype);
|
var Fun = function(a, b) {
|
||||||
this.a = a;
|
// this = Object.create(Fun.prototype);
|
||||||
this.b = b;
|
this.a = a;
|
||||||
// return this;
|
this.b = b;
|
||||||
}
|
// return this;
|
||||||
Fun.prototype.method1 = function() {
|
}
|
||||||
// method code here
|
Fun.prototype.method1 = function() {
|
||||||
}
|
// method code here
|
||||||
Fun.prototype.method2 = function() {
|
}
|
||||||
// method code here
|
Fun.prototype.method2 = function() {
|
||||||
}
|
// method code here
|
||||||
Fun.prototype.method3 = function() {
|
}
|
||||||
// method code here
|
Fun.prototype.method3 = function() {
|
||||||
}
|
// method code here
|
||||||
var myFun = new Fun(1, 2);
|
}
|
||||||
myFun.method1();
|
var myFun = new Fun(1, 2);
|
||||||
`
|
myFun.method1();
|
||||||
|
```
|
||||||
|
|
||||||
## كيف يمكنني التعرف عليه؟
|
## كيف يمكنني التعرف عليه؟
|
||||||
|
|
||||||
|
@ -10,56 +10,62 @@ localeTitle: Instantization كائن
|
|||||||
|
|
||||||
يمكنك إنشاء كائن بخصائص محددة مسبقًا مثل:
|
يمكنك إنشاء كائن بخصائص محددة مسبقًا مثل:
|
||||||
|
|
||||||
`let myObject = {
|
```javascript
|
||||||
name: "Dave",
|
let myObject = {
|
||||||
age: 33
|
name: "Dave",
|
||||||
}
|
age: 33
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### خلق كائن فارغ
|
### خلق كائن فارغ
|
||||||
|
|
||||||
يؤدي هذا إلى إنشاء كائن فارغ داخل متغير myObject الخاص بنا:
|
يؤدي هذا إلى إنشاء كائن فارغ داخل متغير myObject الخاص بنا:
|
||||||
|
|
||||||
`let myObject = new Object();
|
```javascript
|
||||||
`
|
let myObject = new Object();
|
||||||
|
```
|
||||||
|
|
||||||
عندما ترغب في إضافة خصائص إلى الكائن الخاص بك ، يمكنك ببساطة استخدام إما تدوين نقطي أو تدوين قوس مع اسم الخاصية الذي تختاره:
|
عندما ترغب في إضافة خصائص إلى الكائن الخاص بك ، يمكنك ببساطة استخدام إما تدوين نقطي أو تدوين قوس مع اسم الخاصية الذي تختاره:
|
||||||
|
|
||||||
`myObject.name = "Johnny Mnemonic"
|
```javascript
|
||||||
myObject["age"] = 55
|
myObject.name = "Johnny Mnemonic"
|
||||||
`
|
myObject["age"] = 55
|
||||||
|
```
|
||||||
|
|
||||||
### باستخدام وظيفة منشئ
|
### باستخدام وظيفة منشئ
|
||||||
|
|
||||||
يمكنك تعريف دالة منشئ يمكنك استخدامها لإنشاء الكائنات الخاصة بك:
|
يمكنك تعريف دالة منشئ يمكنك استخدامها لإنشاء الكائنات الخاصة بك:
|
||||||
|
|
||||||
`function Kitten(name, cute, color) {
|
```javascript
|
||||||
this.name = name,
|
function Kitten(name, cute, color) {
|
||||||
this.cute = cute,
|
this.name = name,
|
||||||
this.color = color
|
this.cute = cute,
|
||||||
}
|
this.color = color
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
يمكنك تعريف متغير يحتوي على إنشاء مثيل لهذا الكائن عن طريق استدعاء دالة منشئ:
|
يمكنك تعريف متغير يحتوي على إنشاء مثيل لهذا الكائن عن طريق استدعاء دالة منشئ:
|
||||||
|
|
||||||
`let myKitten = new Kitten("Nibbles", true, "white")
|
```javascript
|
||||||
`
|
let myKitten = new Kitten("Nibbles", true, "white")
|
||||||
|
```
|
||||||
|
|
||||||
### Object.create ()
|
### Object.create ()
|
||||||
|
|
||||||
يتيح لك الأسلوب Object.create () (المحدد أولاً في ECMAScript 5.1) إنشاء كائنات. يسمح لك باختيار كائن النموذج الأصلي للكائن الجديد دون الحاجة إلى تعريف دالة منشئ مسبقًا.
|
يتيح لك الأسلوب Object.create () (المحدد أولاً في ECMAScript 5.1) إنشاء كائنات. يسمح لك باختيار كائن النموذج الأصلي للكائن الجديد دون الحاجة إلى تعريف دالة منشئ مسبقًا.
|
||||||
|
|
||||||
`// Our pre-defined object
|
```javascript
|
||||||
let kitten = {
|
// Our pre-defined object
|
||||||
name: "Fluff",
|
let kitten = {
|
||||||
cute: true,
|
name: "Fluff",
|
||||||
color: "gray"
|
cute: true,
|
||||||
}
|
color: "gray"
|
||||||
// Create a new object using Object.create(). kitten is used as the prototype
|
}
|
||||||
let newKitten = Object.create(kitten)
|
// Create a new object using Object.create(). kitten is used as the prototype
|
||||||
|
let newKitten = Object.create(kitten)
|
||||||
console.log(newKitten.name) // Will output "Fluff"
|
|
||||||
`
|
console.log(newKitten.name) // Will output "Fluff"
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر
|
#### معلومات اكثر
|
||||||
|
|
||||||
|
@ -8,14 +8,15 @@ localeTitle: حدث Onclick
|
|||||||
|
|
||||||
### مثال
|
### مثال
|
||||||
|
|
||||||
`<button onclick="myFunction()">Click me</button>
|
```javascript
|
||||||
|
<button onclick="myFunction()">Click me</button>
|
||||||
<script>
|
|
||||||
function myFunction() {
|
<script>
|
||||||
alert('Button was clicked!');
|
function myFunction() {
|
||||||
}
|
alert('Button was clicked!');
|
||||||
</script>
|
}
|
||||||
`
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
في المثال البسيط أعلاه ، عندما ينقر المستخدم على الزر ، سيرى تنبيهًا في المتصفح يعرض `Button was clicked!` .
|
في المثال البسيط أعلاه ، عندما ينقر المستخدم على الزر ، سيرى تنبيهًا في المتصفح يعرض `Button was clicked!` .
|
||||||
|
|
||||||
@ -45,15 +46,16 @@ localeTitle: حدث Onclick
|
|||||||
|
|
||||||
ولكن إذا كان لنا أن نعلق `onclick` على وصلات (HTML هو `a` علامة) قد نرغب منع الإجراء الافتراضي إلى حدوث:
|
ولكن إذا كان لنا أن نعلق `onclick` على وصلات (HTML هو `a` علامة) قد نرغب منع الإجراء الافتراضي إلى حدوث:
|
||||||
|
|
||||||
`<a href="https://guide.freecodecamp.org" onclick="myAlert()">Guides</a>
|
```javascript
|
||||||
|
<a href="https://guide.freecodecamp.org" onclick="myAlert()">Guides</a>
|
||||||
<script>
|
|
||||||
function myAlert(event) {
|
<script>
|
||||||
event.preventDefault();
|
function myAlert(event) {
|
||||||
alert("Link was clicked but page was not open");
|
event.preventDefault();
|
||||||
}
|
alert("Link was clicked but page was not open");
|
||||||
</script>
|
}
|
||||||
`
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
في المثال أعلاه يمكننا منع السلوك الافتراضي `a` عنصر (وصلة فتح) باستخدام `event.preventDefault()` داخل لدينا `onclick` ظيفة رد.
|
في المثال أعلاه يمكننا منع السلوك الافتراضي `a` عنصر (وصلة فتح) باستخدام `event.preventDefault()` داخل لدينا `onclick` ظيفة رد.
|
||||||
|
|
||||||
|
@ -8,14 +8,15 @@ localeTitle: حدث Onload
|
|||||||
|
|
||||||
### مثال:
|
### مثال:
|
||||||
|
|
||||||
`<body onload="myFunction()">
|
```javascript
|
||||||
|
<body onload="myFunction()">
|
||||||
<script>
|
|
||||||
function myFunction() {
|
<script>
|
||||||
alert('Page finished loading');
|
function myFunction() {
|
||||||
}
|
alert('Page finished loading');
|
||||||
</script>
|
}
|
||||||
`
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
في المثال أعلاه ، بمجرد تحميل صفحة الويب ، سيتم استدعاء وظيفة `myFunction` ، مما يعرض تنبيه `Page finished loading` المنتهي إلى المستخدم.
|
في المثال أعلاه ، بمجرد تحميل صفحة الويب ، سيتم استدعاء وظيفة `myFunction` ، مما يعرض تنبيه `Page finished loading` المنتهي إلى المستخدم.
|
||||||
|
|
||||||
|
@ -10,24 +10,26 @@ localeTitle: انتاج |
|
|||||||
|
|
||||||
إنها الطريقة الأكثر شيوعًا واستخدامًا لإخراج البيانات. من الشائع أن يتم إدخال زوجين من هذه العبارات بين العبارات لتوضيح كيفية تدفق البيانات ومعالجتها. أيضا ، يمكنك استخدام `debugger` أو نقاط التوقف في devtools أن تفعل الشيء نفسه دون تلويث التعليمات البرمجية الخاصة بك.
|
إنها الطريقة الأكثر شيوعًا واستخدامًا لإخراج البيانات. من الشائع أن يتم إدخال زوجين من هذه العبارات بين العبارات لتوضيح كيفية تدفق البيانات ومعالجتها. أيضا ، يمكنك استخدام `debugger` أو نقاط التوقف في devtools أن تفعل الشيء نفسه دون تلويث التعليمات البرمجية الخاصة بك.
|
||||||
|
|
||||||
`var numbers = [ 1, 2, 3, 4, 5, 6, 7];
|
```javascript
|
||||||
numbers.forEach(function(number){
|
var numbers = [ 1, 2, 3, 4, 5, 6, 7];
|
||||||
console.log(number + ' is divisible by 2', number%2 == 0);
|
numbers.forEach(function(number){
|
||||||
});
|
console.log(number + ' is divisible by 2', number%2 == 0);
|
||||||
`
|
});
|
||||||
|
```
|
||||||
|
|
||||||
#### `console.warn`
|
#### `console.warn`
|
||||||
|
|
||||||
كما خمنت بالاسم ، يُستخدم هذا لعرض التحذيرات ، ويميزها اللون الأصفر النموذجي عن الخطأ الأحمر & `console.log` .
|
كما خمنت بالاسم ، يُستخدم هذا لعرض التحذيرات ، ويميزها اللون الأصفر النموذجي عن الخطأ الأحمر & `console.log` .
|
||||||
|
|
||||||
`function isAdult(age){
|
```javascript
|
||||||
if(Number(age) < 18){
|
function isAdult(age){
|
||||||
console.warn('You are not an adult');
|
if(Number(age) < 18){
|
||||||
return false;
|
console.warn('You are not an adult');
|
||||||
}
|
return false;
|
||||||
return true;
|
}
|
||||||
}
|
return true;
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
#### `console.error`
|
#### `console.error`
|
||||||
|
|
||||||
@ -39,55 +41,56 @@ localeTitle: انتاج |
|
|||||||
|
|
||||||
_حاول تشغيل التعليمة البرمجية أدناه في وحدة التحكم الخاصة بك_
|
_حاول تشغيل التعليمة البرمجية أدناه في وحدة التحكم الخاصة بك_
|
||||||
|
|
||||||
`var data = {
|
```javascript
|
||||||
"colors": [
|
var data = {
|
||||||
{
|
"colors": [
|
||||||
"color": "black",
|
{
|
||||||
"category": "hue",
|
"color": "black",
|
||||||
"type": "primary",
|
"category": "hue",
|
||||||
"rgba": [255,255,255,1],
|
"type": "primary",
|
||||||
"hex": "#000"
|
"rgba": [255,255,255,1],
|
||||||
},
|
"hex": "#000"
|
||||||
{
|
},
|
||||||
"color": "white",
|
{
|
||||||
"category": "value",
|
"color": "white",
|
||||||
"rgba": [0,0,0,1],
|
"category": "value",
|
||||||
"hex": "#FFF"
|
"rgba": [0,0,0,1],
|
||||||
},
|
"hex": "#FFF"
|
||||||
{
|
},
|
||||||
"color": "red",
|
{
|
||||||
"category": "hue",
|
"color": "red",
|
||||||
"type": "primary",
|
"category": "hue",
|
||||||
"rgba": [255,0,0,1],
|
"type": "primary",
|
||||||
"hex": "#FF0"
|
"rgba": [255,0,0,1],
|
||||||
},
|
"hex": "#FF0"
|
||||||
{
|
},
|
||||||
"color": "blue",
|
{
|
||||||
"category": "hue",
|
"color": "blue",
|
||||||
"type": "primary",
|
"category": "hue",
|
||||||
"rgba": [0,0,255,1],
|
"type": "primary",
|
||||||
"hex": "#00F"
|
"rgba": [0,0,255,1],
|
||||||
},
|
"hex": "#00F"
|
||||||
{
|
},
|
||||||
"color": "yellow",
|
{
|
||||||
"category": "hue",
|
"color": "yellow",
|
||||||
"type": "primary",
|
"category": "hue",
|
||||||
"rgba": [255,255,0,1],
|
"type": "primary",
|
||||||
"hex": "#FF0"
|
"rgba": [255,255,0,1],
|
||||||
},
|
"hex": "#FF0"
|
||||||
{
|
},
|
||||||
"color": "green",
|
{
|
||||||
"category": "hue",
|
"color": "green",
|
||||||
"type": "secondary",
|
"category": "hue",
|
||||||
"rgba": [0,255,0,1],
|
"type": "secondary",
|
||||||
"hex": "#0F0"
|
"rgba": [0,255,0,1],
|
||||||
|
"hex": "#0F0"
|
||||||
},
|
|
||||||
]
|
},
|
||||||
}
|
]
|
||||||
|
}
|
||||||
console.table(data.colors);
|
|
||||||
`
|
console.table(data.colors);
|
||||||
|
```
|
||||||
|
|
||||||
يمكنك أيضًا التحكم في نوع المخرجات الذي تريد رؤيته في وحدة التحكم.
|
يمكنك أيضًا التحكم في نوع المخرجات الذي تريد رؤيته في وحدة التحكم.
|
||||||
|
|
||||||
|
@ -26,13 +26,14 @@ localeTitle: مربعات منبثقة
|
|||||||
|
|
||||||
### مثال:
|
### مثال:
|
||||||
|
|
||||||
`var result = window.confirm('Are you sure?');
|
```javascript
|
||||||
if (result === true) {
|
var result = window.confirm('Are you sure?');
|
||||||
window.alert('Okay, if you're sure.');
|
if (result === true) {
|
||||||
} else {
|
window.alert('Okay, if you're sure.');
|
||||||
window.alert('You seem uncertain.');
|
} else {
|
||||||
}
|
window.alert('You seem uncertain.');
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
@ -50,13 +51,15 @@ localeTitle: مربعات منبثقة
|
|||||||
|
|
||||||
إذا كنت غير راضٍ عن النوافذ المنبثقة JavaScript الافتراضية ، يمكنك استبدالها في مكتبات UI المختلفة. على سبيل المثال ، يوفر SweetAlert بديلاً لطيفًا لوحدات JavaScript القياسية. يمكنك تضمينها في HTML الخاص بك عبر CDN (شبكة توصيل المحتوى) والبدء في استخدامها.
|
إذا كنت غير راضٍ عن النوافذ المنبثقة JavaScript الافتراضية ، يمكنك استبدالها في مكتبات UI المختلفة. على سبيل المثال ، يوفر SweetAlert بديلاً لطيفًا لوحدات JavaScript القياسية. يمكنك تضمينها في HTML الخاص بك عبر CDN (شبكة توصيل المحتوى) والبدء في استخدامها.
|
||||||
|
|
||||||
`<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
|
```HTML
|
||||||
`
|
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
الصيغة على النحو التالي: `swal(title, subtitle, messageType)`
|
الصيغة على النحو التالي: `swal(title, subtitle, messageType)`
|
||||||
|
|
||||||
`swal("Oops!", "Something went wrong on the page!", "error");
|
```javascript
|
||||||
`
|
swal("Oops!", "Something went wrong on the page!", "error");
|
||||||
|
```
|
||||||
|
|
||||||
سيعمل الكود أعلاه على إنتاج النافذة المنبثقة التالية:  SweetAlert ليست بأي حال المعادل الوحيد للوحدات القياسية ، ولكنها نظيفة وسهلة التنفيذ.
|
سيعمل الكود أعلاه على إنتاج النافذة المنبثقة التالية:  SweetAlert ليست بأي حال المعادل الوحيد للوحدات القياسية ، ولكنها نظيفة وسهلة التنفيذ.
|
||||||
|
|
||||||
|
@ -6,17 +6,18 @@ localeTitle: وعود
|
|||||||
|
|
||||||
جافا سكريبت واحد مترابطة ، مما يعني أنه لا يمكن تشغيل نصين من النص البرمجي في نفس الوقت ؛ لديهم لتشغيل واحد تلو الآخر. الوعد هو كائن يمثل الانتهاء النهائي (أو الفشل) لعملية غير متزامنة ، والقيمة الناتجة عنها.
|
جافا سكريبت واحد مترابطة ، مما يعني أنه لا يمكن تشغيل نصين من النص البرمجي في نفس الوقت ؛ لديهم لتشغيل واحد تلو الآخر. الوعد هو كائن يمثل الانتهاء النهائي (أو الفشل) لعملية غير متزامنة ، والقيمة الناتجة عنها.
|
||||||
|
|
||||||
`var promise = new Promise(function(resolve, reject) {
|
```javascript
|
||||||
// do thing, then…
|
var promise = new Promise(function(resolve, reject) {
|
||||||
|
// do thing, then…
|
||||||
if (/* everything worked */) {
|
|
||||||
resolve("See, it worked!");
|
if (/* everything worked */) {
|
||||||
}
|
resolve("See, it worked!");
|
||||||
else {
|
}
|
||||||
reject(Error("It broke"));
|
else {
|
||||||
}
|
reject(Error("It broke"));
|
||||||
});
|
}
|
||||||
`
|
});
|
||||||
|
```
|
||||||
|
|
||||||
## الوعد موجود في واحدة من هذه الحالات
|
## الوعد موجود في واحدة من هذه الحالات
|
||||||
|
|
||||||
@ -30,19 +31,20 @@ localeTitle: وعود
|
|||||||
|
|
||||||
لاتخاذ العديد من المكالمات غير المتزامنة ومزامنتها واحدة تلو الأخرى ، يمكنك استخدام تسلسل الوعد. يسمح هذا باستخدام قيمة من الوعد الأول في عمليات الاسترجاع اللاحقة لاحقًا.
|
لاتخاذ العديد من المكالمات غير المتزامنة ومزامنتها واحدة تلو الأخرى ، يمكنك استخدام تسلسل الوعد. يسمح هذا باستخدام قيمة من الوعد الأول في عمليات الاسترجاع اللاحقة لاحقًا.
|
||||||
|
|
||||||
`Promise.resolve('some')
|
```javascript
|
||||||
.then(function(string) { // <-- This will happen after the above Promise resolves (returning the value 'some')
|
Promise.resolve('some')
|
||||||
return new Promise(function(resolve, reject) {
|
.then(function(string) { // <-- This will happen after the above Promise resolves (returning the value 'some')
|
||||||
setTimeout(function() {
|
return new Promise(function(resolve, reject) {
|
||||||
string += 'thing';
|
setTimeout(function() {
|
||||||
resolve(string);
|
string += 'thing';
|
||||||
}, 1);
|
resolve(string);
|
||||||
});
|
}, 1);
|
||||||
})
|
});
|
||||||
.then(function(string) { // <-- This will happen after the above .then's new Promise resolves
|
})
|
||||||
console.log(string); // <-- Logs 'something' to the console
|
.then(function(string) { // <-- This will happen after the above .then's new Promise resolves
|
||||||
});
|
console.log(string); // <-- Logs 'something' to the console
|
||||||
`
|
});
|
||||||
|
```
|
||||||
|
|
||||||
## Promise API
|
## Promise API
|
||||||
|
|
||||||
@ -113,37 +115,40 @@ localeTitle: وعود
|
|||||||
|
|
||||||
في الإصدارات الحديثة ، قدمت JavaScript المزيد من الطرق للتعامل مع Promises. أحد هذه الطرق هو مولد الدالة. مولدات الدالة هي دالات "يمكن إيقافها". عند استخدامها مع Promises ، يمكن للمولدات أن تجعل عملية القراءة أكثر سهولة وأن تظهر "متزامنة".
|
في الإصدارات الحديثة ، قدمت JavaScript المزيد من الطرق للتعامل مع Promises. أحد هذه الطرق هو مولد الدالة. مولدات الدالة هي دالات "يمكن إيقافها". عند استخدامها مع Promises ، يمكن للمولدات أن تجعل عملية القراءة أكثر سهولة وأن تظهر "متزامنة".
|
||||||
|
|
||||||
`const myFirstGenerator = function* () {
|
```javascript
|
||||||
const one = yield 1;
|
const myFirstGenerator = function* () {
|
||||||
const two = yield 2;
|
const one = yield 1;
|
||||||
const three = yield 3;
|
const two = yield 2;
|
||||||
|
const three = yield 3;
|
||||||
return 'Finished!';
|
|
||||||
}
|
return 'Finished!';
|
||||||
|
}
|
||||||
const gen = myFirstGenerator();
|
|
||||||
`
|
const gen = myFirstGenerator();
|
||||||
|
```
|
||||||
|
|
||||||
ها هو أول مولد لدينا ، والذي يمكنك رؤيته بواسطة بناء الجملة `function*` . و `gen` متغير أعلنا لن يتم تشغيل `myFirstGenerator` ، ولكن بدلا من ذلك سوف "هذه المولدات جاهزة للاستخدام".
|
ها هو أول مولد لدينا ، والذي يمكنك رؤيته بواسطة بناء الجملة `function*` . و `gen` متغير أعلنا لن يتم تشغيل `myFirstGenerator` ، ولكن بدلا من ذلك سوف "هذه المولدات جاهزة للاستخدام".
|
||||||
|
|
||||||
`console.log(gen.next());
|
```javascript
|
||||||
// Returns { value: 1, done: false }
|
console.log(gen.next());
|
||||||
`
|
// Returns { value: 1, done: false }
|
||||||
|
```
|
||||||
|
|
||||||
عندما نقوم بتشغيل `gen.next()` فإنه سوف `gen.next()` . وبما أن هذه هي المرة الأولى التي نطلق عليها `gen.next()` ، فسوف يتم تشغيل `yield 1` `gen.next()` مؤقتًا حتى نسميه `gen.next()` مرة أخرى. عندما `yield 1` يسمى، فإنه سيعود لنا `value` التي أسفرت عن وجود أو عدم ومولد `done` .
|
عندما نقوم بتشغيل `gen.next()` فإنه سوف `gen.next()` . وبما أن هذه هي المرة الأولى التي نطلق عليها `gen.next()` ، فسوف يتم تشغيل `yield 1` `gen.next()` مؤقتًا حتى نسميه `gen.next()` مرة أخرى. عندما `yield 1` يسمى، فإنه سيعود لنا `value` التي أسفرت عن وجود أو عدم ومولد `done` .
|
||||||
|
|
||||||
`console.log(gen.next());
|
```javascript
|
||||||
// Returns { value: 2, done: false }
|
console.log(gen.next());
|
||||||
|
// Returns { value: 2, done: false }
|
||||||
console.log(gen.next());
|
|
||||||
// Returns { value: 3, done: false }
|
console.log(gen.next());
|
||||||
|
// Returns { value: 3, done: false }
|
||||||
console.log(gen.next());
|
|
||||||
// Returns { value: 'Finished!', done: true }
|
console.log(gen.next());
|
||||||
|
// Returns { value: 'Finished!', done: true }
|
||||||
console.log(gen.next());
|
|
||||||
// Will throw an error
|
console.log(gen.next());
|
||||||
`
|
// Will throw an error
|
||||||
|
```
|
||||||
|
|
||||||
بينما نستمر في استدعاء `gen.next()` ، سيستمر الأمر في `yield` التالي `gen.next()` المؤقت في كل مرة. وبمجرد عدم وجود مزيد من `yield` المتبقي ، فستستمر في تشغيل بقية المولد ، والتي في هذه الحالة تعود ببساطة `'Finished!'` . إذا اتصلت بـ `gen.next()` مرة أخرى ، فسوف ترمي خطأ عندما ينتهي المولد.
|
بينما نستمر في استدعاء `gen.next()` ، سيستمر الأمر في `yield` التالي `gen.next()` المؤقت في كل مرة. وبمجرد عدم وجود مزيد من `yield` المتبقي ، فستستمر في تشغيل بقية المولد ، والتي في هذه الحالة تعود ببساطة `'Finished!'` . إذا اتصلت بـ `gen.next()` مرة أخرى ، فسوف ترمي خطأ عندما ينتهي المولد.
|
||||||
|
|
||||||
@ -153,15 +158,16 @@ localeTitle: وعود
|
|||||||
|
|
||||||
ترجع طريقة Promise.all (iterable) وعدًا واحدًا يحل عندما يتم حل جميع الوعود في الوسيطة المتقابلة أو عندما لا تحتوي الوسيطة القابلة للتكرار على أي وعود. إنها ترفض سبب الوعد الأول الذي يرفض.
|
ترجع طريقة Promise.all (iterable) وعدًا واحدًا يحل عندما يتم حل جميع الوعود في الوسيطة المتقابلة أو عندما لا تحتوي الوسيطة القابلة للتكرار على أي وعود. إنها ترفض سبب الوعد الأول الذي يرفض.
|
||||||
|
|
||||||
`var promise1 = Promise.resolve(catSource);
|
```javascript
|
||||||
var promise2 = Promise.resolve(dogSource);
|
var promise1 = Promise.resolve(catSource);
|
||||||
var promise3 = Promise.resolve(cowSource);
|
var promise2 = Promise.resolve(dogSource);
|
||||||
|
var promise3 = Promise.resolve(cowSource);
|
||||||
Promise.all([promise1, promise2, promise3]).then(function(values) {
|
|
||||||
console.log(values);
|
Promise.all([promise1, promise2, promise3]).then(function(values) {
|
||||||
});
|
console.log(values);
|
||||||
// expected output: Array ["catData", "dogData", "cowData"]
|
});
|
||||||
`
|
// expected output: Array ["catData", "dogData", "cowData"]
|
||||||
|
```
|
||||||
|
|
||||||
### معلومات اكثر
|
### معلومات اكثر
|
||||||
|
|
||||||
|
@ -10,24 +10,26 @@ localeTitle: نماذج
|
|||||||
|
|
||||||
من أجل الوضوح ، دعنا نفحص المثال التالي:
|
من أجل الوضوح ، دعنا نفحص المثال التالي:
|
||||||
|
|
||||||
`function Point2D(x, y) {
|
```javascript
|
||||||
this.x = x;
|
function Point2D(x, y) {
|
||||||
this.y = y;
|
this.x = x;
|
||||||
}
|
this.y = y;
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
كما `Point2D` وظيفة `Point2D` ، سيتم إنشاء خاصية افتراضية تسمى `prototype` (لاحظ أنه ، في JavaScript ، وظيفة هي أيضا كائن). الخاصية `prototype` هي كائن يحتوي على خاصية `constructor` `Point2D` الدالة `Point2D.prototype.constructor = Point2D` : `Point2D.prototype.constructor = Point2D` . وعندما تستدعي `Point2D` رئيسية `new` ، `Point2D` _الكائنات المنشأة حديثًا جميع الخصائص من_ `Point2D.prototype` . للتحقق من ذلك ، يمكنك إضافة طريقة باسم `move` إلى `Point2D.prototype` كما يلي:
|
كما `Point2D` وظيفة `Point2D` ، سيتم إنشاء خاصية افتراضية تسمى `prototype` (لاحظ أنه ، في JavaScript ، وظيفة هي أيضا كائن). الخاصية `prototype` هي كائن يحتوي على خاصية `constructor` `Point2D` الدالة `Point2D.prototype.constructor = Point2D` : `Point2D.prototype.constructor = Point2D` . وعندما تستدعي `Point2D` رئيسية `new` ، `Point2D` _الكائنات المنشأة حديثًا جميع الخصائص من_ `Point2D.prototype` . للتحقق من ذلك ، يمكنك إضافة طريقة باسم `move` إلى `Point2D.prototype` كما يلي:
|
||||||
|
|
||||||
`Point2D.prototype.move = function(dx, dy) {
|
```javascript
|
||||||
this.x += dx;
|
Point2D.prototype.move = function(dx, dy) {
|
||||||
this.y += dy;
|
this.x += dx;
|
||||||
}
|
this.y += dy;
|
||||||
|
}
|
||||||
var p1 = new Point2D(1, 2);
|
|
||||||
p1.move(3, 4);
|
var p1 = new Point2D(1, 2);
|
||||||
console.log(p1.x); // 4
|
p1.move(3, 4);
|
||||||
console.log(p1.y); // 6
|
console.log(p1.x); // 4
|
||||||
`
|
console.log(p1.y); // 6
|
||||||
|
```
|
||||||
|
|
||||||
يسمى `Point2D.prototype` **كائن prototype** أو **prototype** من كائن `p1` وعن أي كائن آخر تم إنشاؤه باستخدام بناء جملة `new Point2D(...)` . يمكنك إضافة المزيد من الخصائص إلى كائن `Point2D.prototype` كما تريد. النمط المشترك هو إعلان الطرق إلى `Point2D.prototype` وسيتم الإعلان عن خصائص أخرى في وظيفة منشئ.
|
يسمى `Point2D.prototype` **كائن prototype** أو **prototype** من كائن `p1` وعن أي كائن آخر تم إنشاؤه باستخدام بناء جملة `new Point2D(...)` . يمكنك إضافة المزيد من الخصائص إلى كائن `Point2D.prototype` كما تريد. النمط المشترك هو إعلان الطرق إلى `Point2D.prototype` وسيتم الإعلان عن خصائص أخرى في وظيفة منشئ.
|
||||||
|
|
||||||
@ -43,18 +45,19 @@ localeTitle: نماذج
|
|||||||
|
|
||||||
آلية سلسلة النموذج بسيطة: عند الوصول إلى خاصية `p` على كائن `obj` ، سيقوم محرك JavaScript بالبحث في هذه الخاصية داخل كائن `obj` . إذا فشل المحرك في البحث ، فإنه يستمر في البحث في نموذج كائن `obj` وهكذا حتى يصل إلى `Object.prototype` . إذا انتهى البحث ، ولم يتم العثور على أي شيء ، فإن النتيجة ستكون `undefined` . فمثلا:
|
آلية سلسلة النموذج بسيطة: عند الوصول إلى خاصية `p` على كائن `obj` ، سيقوم محرك JavaScript بالبحث في هذه الخاصية داخل كائن `obj` . إذا فشل المحرك في البحث ، فإنه يستمر في البحث في نموذج كائن `obj` وهكذا حتى يصل إلى `Object.prototype` . إذا انتهى البحث ، ولم يتم العثور على أي شيء ، فإن النتيجة ستكون `undefined` . فمثلا:
|
||||||
|
|
||||||
`var obj1 = {
|
```javascript
|
||||||
a: 1,
|
var obj1 = {
|
||||||
b: 2
|
a: 1,
|
||||||
};
|
b: 2
|
||||||
|
};
|
||||||
var obj2 = Object.create(obj1);
|
|
||||||
obj2.a = 2;
|
var obj2 = Object.create(obj1);
|
||||||
|
obj2.a = 2;
|
||||||
console.log(obj2.a); // 2
|
|
||||||
console.log(obj2.b); // 2
|
console.log(obj2.a); // 2
|
||||||
console.log(obj2.c); // undefined
|
console.log(obj2.b); // 2
|
||||||
`
|
console.log(obj2.c); // undefined
|
||||||
|
```
|
||||||
|
|
||||||
في المقتطف أعلاه ، `var obj2 = Object.create(obj1)` إلى إنشاء كائن `obj2` باستخدام كائن `obj1` prototype. بمعنى آخر ، يصبح `obj1` هو النموذج الأولي لـ `obj2` بدلاً من `Object.prototype` افتراضيًا. كما ترى ، ليست `b` خاصية خاصة بـ `obj2` ، فلا يزال بإمكانك الوصول إليها عبر سلسلة النموذج الأولي. ومع ذلك ، بالنسبة إلى الخاصية `c` ، تحصل على قيمة `undefined` لأنه لا يمكن العثور عليها في `obj1` و `Object.prototype` .
|
في المقتطف أعلاه ، `var obj2 = Object.create(obj1)` إلى إنشاء كائن `obj2` باستخدام كائن `obj1` prototype. بمعنى آخر ، يصبح `obj1` هو النموذج الأولي لـ `obj2` بدلاً من `Object.prototype` افتراضيًا. كما ترى ، ليست `b` خاصية خاصة بـ `obj2` ، فلا يزال بإمكانك الوصول إليها عبر سلسلة النموذج الأولي. ومع ذلك ، بالنسبة إلى الخاصية `c` ، تحصل على قيمة `undefined` لأنه لا يمكن العثور عليها في `obj1` و `Object.prototype` .
|
||||||
|
|
||||||
@ -62,37 +65,39 @@ localeTitle: نماذج
|
|||||||
|
|
||||||
في ES2016 ، أصبحنا الآن نستخدم الكلمة الرئيسية `Class` وكذلك الأساليب المذكورة أعلاه للتلاعب في `prototype` . تروق `Class` جافا سكريبت للمطورين من خلفيات OOP ، ولكنها في الأساس تقوم بنفس الشيء على النحو الوارد أعلاه.
|
في ES2016 ، أصبحنا الآن نستخدم الكلمة الرئيسية `Class` وكذلك الأساليب المذكورة أعلاه للتلاعب في `prototype` . تروق `Class` جافا سكريبت للمطورين من خلفيات OOP ، ولكنها في الأساس تقوم بنفس الشيء على النحو الوارد أعلاه.
|
||||||
|
|
||||||
`class Rectangle {
|
```javascript
|
||||||
constructor(height, width) {
|
class Rectangle {
|
||||||
this.height = height
|
constructor(height, width) {
|
||||||
this.width = width
|
this.height = height
|
||||||
}
|
this.width = width
|
||||||
|
}
|
||||||
get area() {
|
|
||||||
return this.calcArea()
|
get area() {
|
||||||
}
|
return this.calcArea()
|
||||||
|
}
|
||||||
calcArea() {
|
|
||||||
return this.height * this.width
|
calcArea() {
|
||||||
}
|
return this.height * this.width
|
||||||
}
|
}
|
||||||
|
}
|
||||||
const square = new Rectangle(10, 10)
|
|
||||||
|
const square = new Rectangle(10, 10)
|
||||||
console.log(square.area) // 100
|
|
||||||
`
|
console.log(square.area) // 100
|
||||||
|
```
|
||||||
|
|
||||||
هذا هو أساسا نفس:
|
هذا هو أساسا نفس:
|
||||||
|
|
||||||
`function Rectangle(height, width) {
|
```javascript
|
||||||
this.height = height
|
function Rectangle(height, width) {
|
||||||
this.width = width
|
this.height = height
|
||||||
}
|
this.width = width
|
||||||
|
}
|
||||||
Rectangle.prototype.calcArea = function calcArea() {
|
|
||||||
return this.height * this.width
|
Rectangle.prototype.calcArea = function calcArea() {
|
||||||
}
|
return this.height * this.width
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
و `getter` و `setter` الأساليب في الطبقات ربط خاصية كائن إلى وظيفة التي سيتم استدعاؤها عند بدا أن الممتلكات تصل. إنه مجرد سكر نحوي للمساعدة في تسهيل _البحث عن_ الخصائص أو _ضبطها_ .
|
و `getter` و `setter` الأساليب في الطبقات ربط خاصية كائن إلى وظيفة التي سيتم استدعاؤها عند بدا أن الممتلكات تصل. إنه مجرد سكر نحوي للمساعدة في تسهيل _البحث عن_ الخصائص أو _ضبطها_ .
|
||||||
|
|
||||||
|
@ -10,15 +10,16 @@ localeTitle: طريقة عشوائية
|
|||||||
|
|
||||||
سيقوم الأسلوب `Math.random()` بإرجاع رقم عشري (عشري) أكبر من أو يساوي 0 وأقل من (ولكن لا يساوي مطلقًا) 1. وبعبارة أخرى `0 <= x < 1` . فمثلا:
|
سيقوم الأسلوب `Math.random()` بإرجاع رقم عشري (عشري) أكبر من أو يساوي 0 وأقل من (ولكن لا يساوي مطلقًا) 1. وبعبارة أخرى `0 <= x < 1` . فمثلا:
|
||||||
|
|
||||||
`console.log(Math.random());
|
```JavaScript
|
||||||
// 0.7069207248635578
|
console.log(Math.random());
|
||||||
|
// 0.7069207248635578
|
||||||
console.log(Math.random());
|
|
||||||
// 0.765046694794209
|
console.log(Math.random());
|
||||||
|
// 0.765046694794209
|
||||||
console.log(Math.random());
|
|
||||||
// 0.14069121642698246
|
console.log(Math.random());
|
||||||
`
|
// 0.14069121642698246
|
||||||
|
```
|
||||||
|
|
||||||
(وبالطبع ، ستكون الأرقام التي يتم إرجاعها مختلفة في كل مرة. سيتم افتراض ذلك لكافة الأمثلة التالية - ستحدث نتائج مختلفة لكل تمريرة.)
|
(وبالطبع ، ستكون الأرقام التي يتم إرجاعها مختلفة في كل مرة. سيتم افتراض ذلك لكافة الأمثلة التالية - ستحدث نتائج مختلفة لكل تمريرة.)
|
||||||
|
|
||||||
@ -30,24 +31,26 @@ localeTitle: طريقة عشوائية
|
|||||||
|
|
||||||
على سبيل المثال ، إذا كنت تريد رقم نقطة عائم عشوائيًا بين 0 و 10 ، فيمكنك استخدام:
|
على سبيل المثال ، إذا كنت تريد رقم نقطة عائم عشوائيًا بين 0 و 10 ، فيمكنك استخدام:
|
||||||
|
|
||||||
`var x = Math.random()*10;
|
```JavaScript
|
||||||
|
var x = Math.random()*10;
|
||||||
console.log(x);
|
|
||||||
// 4.133793901445541
|
console.log(x);
|
||||||
`
|
// 4.133793901445541
|
||||||
|
```
|
||||||
|
|
||||||
### توليد رقم نقطة عائمة عشوائية داخل نطاق
|
### توليد رقم نقطة عائمة عشوائية داخل نطاق
|
||||||
|
|
||||||
إذا كنت تحتاج إلى رقم نقطة عائمة عشوائي يتراوح بين رقمين محددين ، فيمكنك فعل شيء كالتالي:
|
إذا كنت تحتاج إلى رقم نقطة عائمة عشوائي يتراوح بين رقمين محددين ، فيمكنك فعل شيء كالتالي:
|
||||||
|
|
||||||
`var min = 83.1;
|
```JavaScript
|
||||||
var max = 193.36;
|
var min = 83.1;
|
||||||
|
var max = 193.36;
|
||||||
var x = Math.random()*(max - min)+min;
|
|
||||||
|
var x = Math.random()*(max - min)+min;
|
||||||
console.log(x);
|
|
||||||
// 126.94014012699063
|
console.log(x);
|
||||||
`
|
// 126.94014012699063
|
||||||
|
```
|
||||||
|
|
||||||
### توليد عدد صحيح عشوائي بين 0 و max
|
### توليد عدد صحيح عشوائي بين 0 و max
|
||||||
|
|
||||||
@ -55,11 +58,12 @@ localeTitle: طريقة عشوائية
|
|||||||
|
|
||||||
على سبيل المثال ، إذا كنت تريد التحديد عشوائياً من مصفوفة من 10 عناصر ، فستحتاج إلى رقم عشوائي بين 0 و 9 ضمناً (تذكر أن المصفوفات صفر فهرستها).
|
على سبيل المثال ، إذا كنت تريد التحديد عشوائياً من مصفوفة من 10 عناصر ، فستحتاج إلى رقم عشوائي بين 0 و 9 ضمناً (تذكر أن المصفوفات صفر فهرستها).
|
||||||
|
|
||||||
`var x = Math.floor(Math.random()*10);
|
```JavaScript
|
||||||
|
var x = Math.floor(Math.random()*10);
|
||||||
console.log(x);
|
|
||||||
// 7
|
console.log(x);
|
||||||
`
|
// 7
|
||||||
|
```
|
||||||
|
|
||||||
(تذكر أن `Math.random()` لن ترجع بالضبط 1 ، لذلك لن يتمكن `Math.random()*10` العودة تمامًا 10. وهذا يعني أنه بعد التقريب إلى الأسفل ، ستكون النتيجة دائمًا 9 أو أقل.)
|
(تذكر أن `Math.random()` لن ترجع بالضبط 1 ، لذلك لن يتمكن `Math.random()*10` العودة تمامًا 10. وهذا يعني أنه بعد التقريب إلى الأسفل ، ستكون النتيجة دائمًا 9 أو أقل.)
|
||||||
|
|
||||||
@ -67,32 +71,35 @@ localeTitle: طريقة عشوائية
|
|||||||
|
|
||||||
إذا كنت بحاجة إلى رقم عشوائي مع الحد الأدنى لعدد 1 (على سبيل المثال ، اختيار يوم عشوائي في يناير) ، يمكنك استخدام أسلوب `Math.ceil()` .
|
إذا كنت بحاجة إلى رقم عشوائي مع الحد الأدنى لعدد 1 (على سبيل المثال ، اختيار يوم عشوائي في يناير) ، يمكنك استخدام أسلوب `Math.ceil()` .
|
||||||
|
|
||||||
`var x = Math.ceil(Math.random()*31);
|
```JavaScript
|
||||||
|
var x = Math.ceil(Math.random()*31);
|
||||||
console.log(x);
|
|
||||||
// 23
|
console.log(x);
|
||||||
`
|
// 23
|
||||||
|
```
|
||||||
|
|
||||||
طريقة أخرى كانت لاستخدام الوظيفة السابقة (باستخدام `Math.floor()` ) وإضافة 1 إليها:
|
طريقة أخرى كانت لاستخدام الوظيفة السابقة (باستخدام `Math.floor()` ) وإضافة 1 إليها:
|
||||||
|
|
||||||
`var x = Math.floor(Math.random()*31)+1;
|
```JavaScript
|
||||||
|
var x = Math.floor(Math.random()*31)+1;
|
||||||
console.log(x);
|
|
||||||
// 17
|
console.log(x);
|
||||||
`
|
// 17
|
||||||
|
```
|
||||||
|
|
||||||
### توليد عدد صحيح عشوائي داخل نطاق
|
### توليد عدد صحيح عشوائي داخل نطاق
|
||||||
|
|
||||||
وأخيرًا ، تحتاج في بعض الأحيان إلى عدد صحيح عشوائي بين رقمين محددين. على سبيل المثال ، إذا كنت تحاول اختيار تذاكر يانصيب وكنت تعرف أرقام أقل وأكبر رقم:
|
وأخيرًا ، تحتاج في بعض الأحيان إلى عدد صحيح عشوائي بين رقمين محددين. على سبيل المثال ، إذا كنت تحاول اختيار تذاكر يانصيب وكنت تعرف أرقام أقل وأكبر رقم:
|
||||||
|
|
||||||
`var min = 1718;
|
```JavaScript
|
||||||
var max = 3429;
|
var min = 1718;
|
||||||
|
var max = 3429;
|
||||||
var x = Math.floor(Math.random()*(max-min+1)+min);
|
|
||||||
|
var x = Math.floor(Math.random()*(max-min+1)+min);
|
||||||
console.log(x);
|
|
||||||
//2509
|
console.log(x);
|
||||||
`
|
//2509
|
||||||
|
```
|
||||||
|
|
||||||
### ما مدى عشوائية Math.random ()؟
|
### ما مدى عشوائية Math.random ()؟
|
||||||
|
|
||||||
|
@ -40,9 +40,10 @@ localeTitle: مرجع التعبيرات العادية
|
|||||||
|
|
||||||
التعبير العادي هو نوع من الكائنات. يمكن بناؤها إما مع منشئ RegExp أو مكتوبة كقيمة حرفية من خلال إحاطة نمط في مائلة (/) حرفا.
|
التعبير العادي هو نوع من الكائنات. يمكن بناؤها إما مع منشئ RegExp أو مكتوبة كقيمة حرفية من خلال إحاطة نمط في مائلة (/) حرفا.
|
||||||
|
|
||||||
`var re1 = new RegExp (" abc ") ;
|
```
|
||||||
var re2 = / abc /;
|
var re1 = new RegExp (" abc ") ;
|
||||||
`
|
var re2 = / abc /;
|
||||||
|
```
|
||||||
|
|
||||||
تمثل كل من كائنات التعبير العادية نفس النمط: حرف متبوعًا بـ ab متبوعًا بـ c.
|
تمثل كل من كائنات التعبير العادية نفس النمط: حرف متبوعًا بـ ab متبوعًا بـ c.
|
||||||
|
|
||||||
@ -52,28 +53,31 @@ localeTitle: مرجع التعبيرات العادية
|
|||||||
|
|
||||||
### اختبار للمباريات
|
### اختبار للمباريات
|
||||||
|
|
||||||
`console . log (/ abc /. test (" abcde ") );
|
```
|
||||||
// → true
|
console . log (/ abc /. test (" abcde ") );
|
||||||
console . log (/ abc /. test (" abxde ") );
|
// → true
|
||||||
// → false
|
console . log (/ abc /. test (" abxde ") );
|
||||||
`
|
// → false
|
||||||
|
```
|
||||||
|
|
||||||
### مطابقة مجموعة من الشخصيات
|
### مطابقة مجموعة من الشخصيات
|
||||||
|
|
||||||
`console . log (/[0123456789]/. test (" in 1992") );
|
```
|
||||||
// → true
|
console . log (/[0123456789]/. test (" in 1992") );
|
||||||
console . log (/[0 -9]/. test (" in 1992") );
|
// → true
|
||||||
// → true
|
console . log (/[0 -9]/. test (" in 1992") );
|
||||||
`
|
// → true
|
||||||
|
```
|
||||||
|
|
||||||
### أنماط الاختيار
|
### أنماط الاختيار
|
||||||
|
|
||||||
`var animalCount = /\ b \ d + ( pig | cow | chicken )s ?\ b /;
|
```
|
||||||
console . log ( animalCount . test ("15 pigs ") );
|
var animalCount = /\ b \ d + ( pig | cow | chicken )s ?\ b /;
|
||||||
// → true
|
console . log ( animalCount . test ("15 pigs ") );
|
||||||
console . log ( animalCount . test ("15 pigchickens ") );
|
// → true
|
||||||
// → false
|
console . log ( animalCount . test ("15 pigchickens ") );
|
||||||
`
|
// → false
|
||||||
|
```
|
||||||
|
|
||||||
#### أساليب
|
#### أساليب
|
||||||
|
|
||||||
@ -83,11 +87,12 @@ localeTitle: مرجع التعبيرات العادية
|
|||||||
|
|
||||||
يمكن أن تكون الوسيطة الأولى أيضًا تعبيرًا عاديًا ، وفي هذه الحالة يتم استبدال المطابقة الأولى للتعبير العادي. عند إضافة خيار ag (للعامة) إلى التعبير العادي ، سيتم استبدال كل التطابقات في السلسلة ، وليس فقط الأول.
|
يمكن أن تكون الوسيطة الأولى أيضًا تعبيرًا عاديًا ، وفي هذه الحالة يتم استبدال المطابقة الأولى للتعبير العادي. عند إضافة خيار ag (للعامة) إلى التعبير العادي ، سيتم استبدال كل التطابقات في السلسلة ، وليس فقط الأول.
|
||||||
|
|
||||||
`console . log (" Borobudur ". replace (/[ ou ]/ , "a ") );
|
```
|
||||||
// → Barobudur
|
console . log (" Borobudur ". replace (/[ ou ]/ , "a ") );
|
||||||
console . log (" Borobudur ". replace (/[ ou ]/g , "a ") );
|
// → Barobudur
|
||||||
// → Barabadar
|
console . log (" Borobudur ". replace (/[ ou ]/g , "a ") );
|
||||||
`
|
// → Barabadar
|
||||||
|
```
|
||||||
|
|
||||||
### معلومات اكثر:
|
### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -10,21 +10,23 @@ localeTitle: معايير الراحة
|
|||||||
|
|
||||||
### بناء الجملة
|
### بناء الجملة
|
||||||
|
|
||||||
`function myFunc(...args) {
|
```js
|
||||||
console.log(args);
|
function myFunc(...args) {
|
||||||
}
|
console.log(args);
|
||||||
|
}
|
||||||
myFunc( 1, 2, 3, 4, 5); // [1,2,3,4,5]
|
|
||||||
`
|
myFunc( 1, 2, 3, 4, 5); // [1,2,3,4,5]
|
||||||
|
```
|
||||||
|
|
||||||
يمكنك بادئة معلمة آخر دالة باستخدام `...` عندما تريد عمل شيء ما مع المعلمات الأولية ثم معالجة جميع المعلمات المتبقية بشكل مختلف.
|
يمكنك بادئة معلمة آخر دالة باستخدام `...` عندما تريد عمل شيء ما مع المعلمات الأولية ثم معالجة جميع المعلمات المتبقية بشكل مختلف.
|
||||||
|
|
||||||
`function convertCurrency(rate, fee, ...amounts) {
|
```js
|
||||||
return amounts.map(amount => (amount * rate) + fee);
|
function convertCurrency(rate, fee, ...amounts) {
|
||||||
}
|
return amounts.map(amount => (amount * rate) + fee);
|
||||||
|
}
|
||||||
convertCurrency(0.89, 2.5, 100, 250, 75, 150, 300); // [ 91.5, 225, 69.25, 136, 269.5 ]
|
|
||||||
`
|
convertCurrency(0.89, 2.5, 100, 250, 75, 150, 300); // [ 91.5, 225, 69.25, 136, 269.5 ]
|
||||||
|
```
|
||||||
|
|
||||||
يتيح لك `...` جمع ما تبقى من الوسيطات ، إن وجدت ، في مصفوفة.
|
يتيح لك `...` جمع ما تبقى من الوسيطات ، إن وجدت ، في مصفوفة.
|
||||||
|
|
||||||
|
@ -16,20 +16,21 @@ localeTitle: بيان العودة
|
|||||||
|
|
||||||
عدم إرجاع أي شيء على سطر جديد بدون استخدام الأقواس. هذا هو quirk JavaScript وستكون النتيجة غير محددة. حاول دائمًا استخدام الأقواس عند إرجاع شيء ما على أسطر متعددة.
|
عدم إرجاع أي شيء على سطر جديد بدون استخدام الأقواس. هذا هو quirk JavaScript وستكون النتيجة غير محددة. حاول دائمًا استخدام الأقواس عند إرجاع شيء ما على أسطر متعددة.
|
||||||
|
|
||||||
`function foo() {
|
```javascript
|
||||||
return
|
function foo() {
|
||||||
1;
|
return
|
||||||
}
|
1;
|
||||||
|
}
|
||||||
function boo() {
|
|
||||||
return (
|
function boo() {
|
||||||
1
|
return (
|
||||||
);
|
1
|
||||||
}
|
);
|
||||||
|
}
|
||||||
foo(); --> undefined
|
|
||||||
boo(); --> 1
|
foo(); --> undefined
|
||||||
`
|
boo(); --> 1
|
||||||
|
```
|
||||||
|
|
||||||
## أمثلة
|
## أمثلة
|
||||||
|
|
||||||
|
@ -8,10 +8,11 @@ localeTitle: منقوطة
|
|||||||
|
|
||||||
هناك حالة واحدة فقط حيث يفشل ASI: عندما يبدأ سطر مع قوس فتح `(` . لتجنب هذا يسبب أخطاء ، عندما يبدأ سطر مع قوس فتح ، يمكنك وضع فاصلة منقوطة في بداية السطر الذي يحتوي على قوس فتح :
|
هناك حالة واحدة فقط حيث يفشل ASI: عندما يبدأ سطر مع قوس فتح `(` . لتجنب هذا يسبب أخطاء ، عندما يبدأ سطر مع قوس فتح ، يمكنك وضع فاصلة منقوطة في بداية السطر الذي يحتوي على قوس فتح :
|
||||||
|
|
||||||
`;(function() {
|
```js
|
||||||
console.log('Hi!')
|
;(function() {
|
||||||
})
|
console.log('Hi!')
|
||||||
`
|
})
|
||||||
|
```
|
||||||
|
|
||||||
لاحظ أن هذا مطلوب فقط إذا كنت لا تستخدم الفواصل المنقوطة.
|
لاحظ أن هذا مطلوب فقط إذا كنت لا تستخدم الفواصل المنقوطة.
|
||||||
|
|
||||||
|
@ -37,14 +37,15 @@ localeTitle: خلق سينجلتون في جافا سكريبت
|
|||||||
|
|
||||||
الآن لتنفيذ أو استخدام المفرد الخاص بك. في المتصفح بعد حفظ هذا الملف js وتحميله.
|
الآن لتنفيذ أو استخدام المفرد الخاص بك. في المتصفح بعد حفظ هذا الملف js وتحميله.
|
||||||
|
|
||||||
`console.log(singletonFn.getDataCounter()); //0 as bydefault it will be 0.
|
```
|
||||||
|
console.log(singletonFn.getDataCounter()); //0 as bydefault it will be 0.
|
||||||
singletonFn.setDataCounter(20);
|
|
||||||
|
singletonFn.setDataCounter(20);
|
||||||
console.log(singletonFn.getDataCounter()); //20 as we assigned.
|
|
||||||
|
console.log(singletonFn.getDataCounter()); //20 as we assigned.
|
||||||
console.log(fishNames); //will Print array with "SimpleFish".
|
|
||||||
`
|
console.log(fishNames); //will Print array with "SimpleFish".
|
||||||
|
```
|
||||||
|
|
||||||
الآن مع هذه المعرفة يمكنك تحديد الثوابت ، التعدادات أو أي شيء يحتاج إلى استخدام متعددة في مشروع مكتوب هنا. أو شيء من هذا القبيل التكوينات.
|
الآن مع هذه المعرفة يمكنك تحديد الثوابت ، التعدادات أو أي شيء يحتاج إلى استخدام متعددة في مشروع مكتوب هنا. أو شيء من هذا القبيل التكوينات.
|
||||||
|
|
||||||
|
@ -10,13 +10,15 @@ localeTitle: بناء الجملة
|
|||||||
|
|
||||||
لمكالمات الوظائف:
|
لمكالمات الوظائف:
|
||||||
|
|
||||||
`myFunction(...iterableObj);
|
```
|
||||||
`
|
myFunction(...iterableObj);
|
||||||
|
```
|
||||||
|
|
||||||
بالنسبة للمعايير الحرفية أو الأوتار:
|
بالنسبة للمعايير الحرفية أو الأوتار:
|
||||||
|
|
||||||
`[...iterableObj, '4', 'five', 6];
|
```
|
||||||
`
|
[...iterableObj, '4', 'five', 6];
|
||||||
|
```
|
||||||
|
|
||||||
### أمثلة
|
### أمثلة
|
||||||
|
|
||||||
@ -26,61 +28,66 @@ localeTitle: بناء الجملة
|
|||||||
|
|
||||||
من الشائع استخدام `Function.prototype.apply` في الحالات التي تريد فيها استخدام عناصر مصفوفة كوسيطة للدالة.
|
من الشائع استخدام `Function.prototype.apply` في الحالات التي تريد فيها استخدام عناصر مصفوفة كوسيطة للدالة.
|
||||||
|
|
||||||
`function myFunction(x, y, z) { }
|
```
|
||||||
var args = [0, 1, 2];
|
function myFunction(x, y, z) { }
|
||||||
myFunction.apply(null, args);
|
var args = [0, 1, 2];
|
||||||
`
|
myFunction.apply(null, args);
|
||||||
|
```
|
||||||
|
|
||||||
مع صيغة الانتشار يمكن كتابة ما سبق على النحو التالي:
|
مع صيغة الانتشار يمكن كتابة ما سبق على النحو التالي:
|
||||||
|
|
||||||
`function myFunction(x, y, z) { }
|
```
|
||||||
var args = [0, 1, 2];
|
function myFunction(x, y, z) { }
|
||||||
myFunction(...args);
|
var args = [0, 1, 2];
|
||||||
`
|
myFunction(...args);
|
||||||
|
```
|
||||||
|
|
||||||
يمكن لأي وسيطة في قائمة الوسيطة استخدام صيغة الانتشار ويمكن استخدامها عدة مرات.
|
يمكن لأي وسيطة في قائمة الوسيطة استخدام صيغة الانتشار ويمكن استخدامها عدة مرات.
|
||||||
|
|
||||||
`function myFunction(v, w, x, y, z) { }
|
```
|
||||||
var args = [0, 1];
|
function myFunction(v, w, x, y, z) { }
|
||||||
myFunction(-1, ...args, 2, ...[3]);
|
var args = [0, 1];
|
||||||
`
|
myFunction(-1, ...args, 2, ...[3]);
|
||||||
|
```
|
||||||
|
|
||||||
### تقديم طلب جديد
|
### تقديم طلب جديد
|
||||||
|
|
||||||
عند استدعاء منشئ مع `new` ، فإنه من غير الممكن استخدامها **مباشرة** مجموعة و `apply` ( `apply` يفعل `[[Call]]` وليس `[[Construct]]` ). ومع ذلك ، يمكن استخدام مصفوفة بسهولة مع شكر جديد لنشر الجملة:
|
عند استدعاء منشئ مع `new` ، فإنه من غير الممكن استخدامها **مباشرة** مجموعة و `apply` ( `apply` يفعل `[[Call]]` وليس `[[Construct]]` ). ومع ذلك ، يمكن استخدام مصفوفة بسهولة مع شكر جديد لنشر الجملة:
|
||||||
|
|
||||||
`var dateFields = [1970, 0, 1]; // 1 Jan 1970
|
```
|
||||||
var d = new Date(...dateFields);
|
var dateFields = [1970, 0, 1]; // 1 Jan 1970
|
||||||
`
|
var d = new Date(...dateFields);
|
||||||
|
```
|
||||||
|
|
||||||
لاستخدام جديدة مع مجموعة من المعلمات دون بناء جملة الانتشار ، يجب عليك القيام بذلك **بشكل غير مباشر من** خلال التطبيق الجزئي:
|
لاستخدام جديدة مع مجموعة من المعلمات دون بناء جملة الانتشار ، يجب عليك القيام بذلك **بشكل غير مباشر من** خلال التطبيق الجزئي:
|
||||||
|
|
||||||
`function applyAndNew(constructor, args) {
|
```
|
||||||
function partial () {
|
function applyAndNew(constructor, args) {
|
||||||
return constructor.apply(this, args);
|
function partial () {
|
||||||
};
|
return constructor.apply(this, args);
|
||||||
if (typeof constructor.prototype === "object") {
|
};
|
||||||
partial.prototype = Object.create(constructor.prototype);
|
if (typeof constructor.prototype === "object") {
|
||||||
}
|
partial.prototype = Object.create(constructor.prototype);
|
||||||
return partial;
|
}
|
||||||
}
|
return partial;
|
||||||
|
}
|
||||||
|
|
||||||
function myConstructor () {
|
|
||||||
console.log("arguments.length: " + arguments.length);
|
function myConstructor () {
|
||||||
console.log(arguments);
|
console.log("arguments.length: " + arguments.length);
|
||||||
this.prop1="val1";
|
console.log(arguments);
|
||||||
this.prop2="val2";
|
this.prop1="val1";
|
||||||
};
|
this.prop2="val2";
|
||||||
|
};
|
||||||
var myArguments = ["hi", "how", "are", "you", "mr", null];
|
|
||||||
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
|
var myArguments = ["hi", "how", "are", "you", "mr", null];
|
||||||
|
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
|
||||||
console.log(new myConstructorWithArguments);
|
|
||||||
// (internal log of myConstructor): arguments.length: 6
|
console.log(new myConstructorWithArguments);
|
||||||
// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null]
|
// (internal log of myConstructor): arguments.length: 6
|
||||||
// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}
|
// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null]
|
||||||
`
|
// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}
|
||||||
|
```
|
||||||
|
|
||||||
### انتشر في الحرفيين مجموعة
|
### انتشر في الحرفيين مجموعة
|
||||||
|
|
||||||
@ -88,59 +95,66 @@ localeTitle: بناء الجملة
|
|||||||
|
|
||||||
بدون صيغة الانتشار ، لإنشاء مصفوفة جديدة باستخدام مصفوفة موجودة كجزء واحد منها ، لم يعد بناء الجملة الحرفية الحرفية كافياً ويجب استخدام الكود الحتمي بدلاً من ذلك باستخدام توليفة من الدفع ، لصق ، كونتاكت ، إلخ. يصبح أكثر مقتضبة:
|
بدون صيغة الانتشار ، لإنشاء مصفوفة جديدة باستخدام مصفوفة موجودة كجزء واحد منها ، لم يعد بناء الجملة الحرفية الحرفية كافياً ويجب استخدام الكود الحتمي بدلاً من ذلك باستخدام توليفة من الدفع ، لصق ، كونتاكت ، إلخ. يصبح أكثر مقتضبة:
|
||||||
|
|
||||||
`var parts = ['shoulders', 'knees'];
|
```
|
||||||
var lyrics = ['head', ...parts, 'and', 'toes'];
|
var parts = ['shoulders', 'knees'];
|
||||||
// ["head", "shoulders", "knees", "and", "toes"]
|
var lyrics = ['head', ...parts, 'and', 'toes'];
|
||||||
`
|
// ["head", "shoulders", "knees", "and", "toes"]
|
||||||
|
```
|
||||||
|
|
||||||
تماما مثل انتشار لقوائم الحجج ، `...` يمكن استخدامها في أي مكان في الصفيف الحرفية ويمكن استخدامه عدة مرات.
|
تماما مثل انتشار لقوائم الحجج ، `...` يمكن استخدامها في أي مكان في الصفيف الحرفية ويمكن استخدامه عدة مرات.
|
||||||
|
|
||||||
### انسخ صفيف
|
### انسخ صفيف
|
||||||
|
|
||||||
`var arr = [1, 2, 3];
|
```
|
||||||
var arr2 = [...arr]; // like arr.slice()
|
var arr = [1, 2, 3];
|
||||||
arr2.push(4);
|
var arr2 = [...arr]; // like arr.slice()
|
||||||
|
arr2.push(4);
|
||||||
// arr2 becomes [1, 2, 3, 4]
|
|
||||||
// arr remains unaffected
|
// arr2 becomes [1, 2, 3, 4]
|
||||||
`
|
// arr remains unaffected
|
||||||
|
```
|
||||||
|
|
||||||
> **ﻣﻼﺣظﺔ** : ﺗرﺗﻔﻊ ﺑﻧود اﻟﻣﺟﺎﻣﻊ ﺑﺷﮐل ﻓﻌﺎل إﻟﯽ ﻣﺳﺗوى واﺣد أﺛﻧﺎء ﻧﺳﺦ ﻣﺻﻔوﻓﺔ. لذلك ، قد يكون غير مناسب لنسخ صفائف متعددة الأبعاد كما يظهر المثال التالي (هو نفسه مع Object.assign () وبناء الجملة spread).
|
> **ﻣﻼﺣظﺔ** : ﺗرﺗﻔﻊ ﺑﻧود اﻟﻣﺟﺎﻣﻊ ﺑﺷﮐل ﻓﻌﺎل إﻟﯽ ﻣﺳﺗوى واﺣد أﺛﻧﺎء ﻧﺳﺦ ﻣﺻﻔوﻓﺔ. لذلك ، قد يكون غير مناسب لنسخ صفائف متعددة الأبعاد كما يظهر المثال التالي (هو نفسه مع Object.assign () وبناء الجملة spread).
|
||||||
|
|
||||||
`var a = [[1], [2], [3]];
|
```
|
||||||
var b = [...a];
|
var a = [[1], [2], [3]];
|
||||||
b.shift().shift(); // 1
|
var b = [...a];
|
||||||
// Now array a is affected as well: [[], [2], [3]]
|
b.shift().shift(); // 1
|
||||||
`
|
// Now array a is affected as well: [[], [2], [3]]
|
||||||
|
```
|
||||||
|
|
||||||
### طريقة أفضل لسلسل صفائف
|
### طريقة أفضل لسلسل صفائف
|
||||||
|
|
||||||
`Array.concat` غالباً لسَلسَلة صفيف إلى نهاية صفيف موجود. بدون صيغة الانتشار يتم ذلك على النحو التالي:
|
`Array.concat` غالباً لسَلسَلة صفيف إلى نهاية صفيف موجود. بدون صيغة الانتشار يتم ذلك على النحو التالي:
|
||||||
|
|
||||||
`var arr1 = [0, 1, 2];
|
```
|
||||||
var arr2 = [3, 4, 5];
|
var arr1 = [0, 1, 2];
|
||||||
// Append all items from arr2 onto arr1
|
var arr2 = [3, 4, 5];
|
||||||
arr1 = arr1.concat(arr2);
|
// Append all items from arr2 onto arr1
|
||||||
`
|
arr1 = arr1.concat(arr2);
|
||||||
|
```
|
||||||
|
|
||||||
مع صيغة الانتشار يصبح هذا:
|
مع صيغة الانتشار يصبح هذا:
|
||||||
|
|
||||||
`var arr1 = [0, 1, 2];
|
```
|
||||||
var arr2 = [3, 4, 5];
|
var arr1 = [0, 1, 2];
|
||||||
arr1 = [...arr1, ...arr2];
|
var arr2 = [3, 4, 5];
|
||||||
`
|
arr1 = [...arr1, ...arr2];
|
||||||
|
```
|
||||||
|
|
||||||
غالباً ما يتم استخدام `Array.unshift` لإدراج صفيف من القيم في بداية صفيف موجود. بدون صيغة الانتشار يتم ذلك على النحو التالي:
|
غالباً ما يتم استخدام `Array.unshift` لإدراج صفيف من القيم في بداية صفيف موجود. بدون صيغة الانتشار يتم ذلك على النحو التالي:
|
||||||
|
|
||||||
`var arr1 = [0, 1, 2];
|
```
|
||||||
var arr2 = [3, 4, 5];
|
var arr1 = [0, 1, 2];
|
||||||
// Prepend all items from arr2 onto arr1
|
var arr2 = [3, 4, 5];
|
||||||
Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]
|
// Prepend all items from arr2 onto arr1
|
||||||
`
|
Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]
|
||||||
|
```
|
||||||
|
|
||||||
مع صيغة الانتشار يصبح هذا:
|
مع صيغة الانتشار يصبح هذا:
|
||||||
|
|
||||||
`var arr1 = [0, 1, 2];
|
```
|
||||||
var arr2 = [3, 4, 5];
|
var arr1 = [0, 1, 2];
|
||||||
arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2]
|
var arr2 = [3, 4, 5];
|
||||||
`
|
arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2]
|
||||||
|
```
|
@ -10,34 +10,37 @@ localeTitle: Dray
|
|||||||
|
|
||||||
### الواجب الأساسي المتغير
|
### الواجب الأساسي المتغير
|
||||||
|
|
||||||
`var names = ['neel', 'meet', 'darshan'];
|
```
|
||||||
var [nameOne, nameTwo, nameThree] = names;
|
var names = ['neel', 'meet', 'darshan'];
|
||||||
console.log(nameOne); // "neel"
|
var [nameOne, nameTwo, nameThree] = names;
|
||||||
console.log(nameTwo); // "meet"
|
console.log(nameOne); // "neel"
|
||||||
console.log(nameThree); // "darshan"
|
console.log(nameTwo); // "meet"
|
||||||
`
|
console.log(nameThree); // "darshan"
|
||||||
|
```
|
||||||
|
|
||||||
### مهمة منفصلة عن الإعلان
|
### مهمة منفصلة عن الإعلان
|
||||||
|
|
||||||
يمكن تعيين متغير قيمته من خلال التدمير المنفصل عن تعريف المتغير.
|
يمكن تعيين متغير قيمته من خلال التدمير المنفصل عن تعريف المتغير.
|
||||||
|
|
||||||
`var a, b;
|
```
|
||||||
|
var a, b;
|
||||||
[a, b] = [1, 2];
|
|
||||||
console.log(a); // 1
|
[a, b] = [1, 2];
|
||||||
console.log(b); // 2
|
console.log(a); // 1
|
||||||
`
|
console.log(b); // 2
|
||||||
|
```
|
||||||
|
|
||||||
### قيم افتراضية
|
### قيم افتراضية
|
||||||
|
|
||||||
يمكن تعيين متغير افتراضي ، في حالة أن القيمة unpacked من الصفيف غير `undefined` .
|
يمكن تعيين متغير افتراضي ، في حالة أن القيمة unpacked من الصفيف غير `undefined` .
|
||||||
|
|
||||||
`var a, b;
|
```
|
||||||
|
var a, b;
|
||||||
[a=5, b=7] = [1];
|
|
||||||
console.log(a); // 1
|
[a=5, b=7] = [1];
|
||||||
console.log(b); // 7
|
console.log(a); // 1
|
||||||
`
|
console.log(b); // 7
|
||||||
|
```
|
||||||
|
|
||||||
### تحليل مجموعة من عاد من وظيفة
|
### تحليل مجموعة من عاد من وظيفة
|
||||||
|
|
||||||
@ -45,47 +48,52 @@ localeTitle: Dray
|
|||||||
|
|
||||||
في هذا المثال ، تقوم `getNames()` بارجاع القيم `['neel', 'meet']` `getNames()` لها ، والتي يمكن تحليلها في سطر واحد مع destructuring.
|
في هذا المثال ، تقوم `getNames()` بارجاع القيم `['neel', 'meet']` `getNames()` لها ، والتي يمكن تحليلها في سطر واحد مع destructuring.
|
||||||
|
|
||||||
`function getNames() {
|
```
|
||||||
return ['neel', 'meet'];
|
function getNames() {
|
||||||
}
|
return ['neel', 'meet'];
|
||||||
|
}
|
||||||
var neel, meet;
|
|
||||||
[nameOne, nameTwo] = getNames();
|
var neel, meet;
|
||||||
console.log(nameOne); // neel
|
[nameOne, nameTwo] = getNames();
|
||||||
console.log(nameTwo); // meet
|
console.log(nameOne); // neel
|
||||||
`
|
console.log(nameTwo); // meet
|
||||||
|
```
|
||||||
|
|
||||||
### تجاهل بعض القيم التي تم إرجاعها
|
### تجاهل بعض القيم التي تم إرجاعها
|
||||||
|
|
||||||
يمكنك تجاهل قيم الإرجاع التي لا تهتم بها:
|
يمكنك تجاهل قيم الإرجاع التي لا تهتم بها:
|
||||||
|
|
||||||
`function getNames() {
|
```
|
||||||
return ['neel', 'meet', 'darshan'];
|
function getNames() {
|
||||||
}
|
return ['neel', 'meet', 'darshan'];
|
||||||
|
}
|
||||||
var [nameOne, , nameThree] = getNames();
|
|
||||||
console.log(nameOne); // neel
|
var [nameOne, , nameThree] = getNames();
|
||||||
console.log(nameThree); // darshan
|
console.log(nameOne); // neel
|
||||||
`
|
console.log(nameThree); // darshan
|
||||||
|
```
|
||||||
|
|
||||||
يمكنك أيضًا تجاهل جميع القيم التي تم إرجاعها:
|
يمكنك أيضًا تجاهل جميع القيم التي تم إرجاعها:
|
||||||
|
|
||||||
`[,,] = getNames();
|
```
|
||||||
`
|
[,,] = getNames();
|
||||||
|
```
|
||||||
|
|
||||||
### تعيين بقية صفيف إلى متغير
|
### تعيين بقية صفيف إلى متغير
|
||||||
|
|
||||||
عند تدمير صفيف ، يمكنك فك وتعيين الجزء المتبقي منه إلى متغير باستخدام نمط الباقي:
|
عند تدمير صفيف ، يمكنك فك وتعيين الجزء المتبقي منه إلى متغير باستخدام نمط الباقي:
|
||||||
|
|
||||||
`var [a, ...b] = [1, 2, 3];
|
```
|
||||||
console.log(a); // 1
|
var [a, ...b] = [1, 2, 3];
|
||||||
console.log(b); // [2, 3]
|
console.log(a); // 1
|
||||||
`
|
console.log(b); // [2, 3]
|
||||||
|
```
|
||||||
|
|
||||||
لاحظ أنه سيتم طرح `SyntaxError` إذا تم استخدام فاصلة زائدة على الجانب الأيسر مع عنصر راحة:
|
لاحظ أنه سيتم طرح `SyntaxError` إذا تم استخدام فاصلة زائدة على الجانب الأيسر مع عنصر راحة:
|
||||||
|
|
||||||
`var [a, ...b,] = [1, 2, 3];
|
```
|
||||||
// SyntaxError: rest element may not have a trailing comma
|
var [a, ...b,] = [1, 2, 3];
|
||||||
`
|
// SyntaxError: rest element may not have a trailing comma
|
||||||
|
```
|
||||||
|
|
||||||
انظر أيضا: **صفيف Destructuring** | [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring)
|
انظر أيضا: **صفيف Destructuring** | [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring)
|
@ -8,16 +8,18 @@ localeTitle: طول صفيف
|
|||||||
|
|
||||||
يمكن إرجاع خاصية `length` صفيف مثل هكذا.
|
يمكن إرجاع خاصية `length` صفيف مثل هكذا.
|
||||||
|
|
||||||
`let desserts = ["Cake", "Pie", "Brownies"];
|
```js
|
||||||
console.log(desserts.length); // 3
|
let desserts = ["Cake", "Pie", "Brownies"];
|
||||||
`
|
console.log(desserts.length); // 3
|
||||||
|
```
|
||||||
|
|
||||||
يمكن استخدام عامل التعيين ، بالتزامن مع خاصية `length` ، لضبط عدد العناصر في صفيف مثل ذلك.
|
يمكن استخدام عامل التعيين ، بالتزامن مع خاصية `length` ، لضبط عدد العناصر في صفيف مثل ذلك.
|
||||||
|
|
||||||
`let cars = ["Saab", "BMW", "Volvo"];
|
```js
|
||||||
cars.length = 2;
|
let cars = ["Saab", "BMW", "Volvo"];
|
||||||
console.log(cars.length); // 2
|
cars.length = 2;
|
||||||
`
|
console.log(cars.length); // 2
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -8,17 +8,19 @@ localeTitle: مصفوفة من
|
|||||||
|
|
||||||
بناء الجملة:
|
بناء الجملة:
|
||||||
|
|
||||||
`Array.of(element0[, element1[, ...[, elementN]]])
|
```javascript
|
||||||
`
|
Array.of(element0[, element1[, ...[, elementN]]])
|
||||||
|
```
|
||||||
|
|
||||||
## مثال
|
## مثال
|
||||||
|
|
||||||
`Array.of(7); // [7] - creates an array with a single element
|
```javascript
|
||||||
Array.of(1, 2, 3); // [1, 2, 3]
|
Array.of(7); // [7] - creates an array with a single element
|
||||||
|
Array.of(1, 2, 3); // [1, 2, 3]
|
||||||
Array(7); // [ , , , , , , ] - creates an empty array with a length property of 7
|
|
||||||
Array(1, 2, 3); // [1, 2, 3]
|
Array(7); // [ , , , , , , ] - creates an empty array with a length property of 7
|
||||||
`
|
Array(1, 2, 3); // [1, 2, 3]
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -10,32 +10,35 @@ localeTitle: Array.prototype.concat
|
|||||||
|
|
||||||
### بناء الجملة
|
### بناء الجملة
|
||||||
|
|
||||||
`const newArray = array.concat(value1, value2, value3...);
|
```javascript
|
||||||
`
|
const newArray = array.concat(value1, value2, value3...);
|
||||||
|
```
|
||||||
|
|
||||||
### أمثلة
|
### أمثلة
|
||||||
|
|
||||||
#### تسلسل صفيفتين
|
#### تسلسل صفيفتين
|
||||||
|
|
||||||
`var cold = ['Blue', 'Green', 'Purple'];
|
```javascript
|
||||||
var warm = ['Red', 'Orange', 'Yellow'];
|
var cold = ['Blue', 'Green', 'Purple'];
|
||||||
|
var warm = ['Red', 'Orange', 'Yellow'];
|
||||||
var result = cold.concat(warm);
|
|
||||||
|
var result = cold.concat(warm);
|
||||||
console.log(result);
|
|
||||||
// results in ['Blue', 'Green', 'Purple', 'Red', 'Orange', 'Yellow'];
|
console.log(result);
|
||||||
`
|
// results in ['Blue', 'Green', 'Purple', 'Red', 'Orange', 'Yellow'];
|
||||||
|
```
|
||||||
|
|
||||||
#### قيمة متسلسلة إلى صفيف
|
#### قيمة متسلسلة إلى صفيف
|
||||||
|
|
||||||
`const odd = [1, 3, 5, 7, 9];
|
```javascript
|
||||||
const even = [0, 2, 4, 6, 8];
|
const odd = [1, 3, 5, 7, 9];
|
||||||
|
const even = [0, 2, 4, 6, 8];
|
||||||
const oddAndEvenAndTen = odd.concat(even, 10);
|
|
||||||
|
const oddAndEvenAndTen = odd.concat(even, 10);
|
||||||
console.log(oddAndEvenAndTen);
|
|
||||||
// results in [1, 3, 5, 7, 9, 0, 2, 4, 6, 8, 10];
|
console.log(oddAndEvenAndTen);
|
||||||
`
|
// results in [1, 3, 5, 7, 9, 0, 2, 4, 6, 8, 10];
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -10,12 +10,13 @@ localeTitle: Array.prototype.fill
|
|||||||
|
|
||||||
\`\` \`جافا سكريبت arr.fill (القيمة) arr.fill (القيمة ، البدء) arr.fill (القيمة ، البداية ، النهاية)
|
\`\` \`جافا سكريبت arr.fill (القيمة) arr.fill (القيمة ، البدء) arr.fill (القيمة ، البداية ، النهاية)
|
||||||
|
|
||||||
`The fill method takes up to three arguments value, start and end. The start and end arguments are optional with default values of 0 and the length of the this object.
|
```
|
||||||
|
The fill method takes up to three arguments value, start and end. The start and end arguments are optional with default values of 0 and the length of the this object.
|
||||||
The fill method is a mutable method, it will change this object itself, and return it, not just return a copy of it.
|
|
||||||
|
The fill method is a mutable method, it will change this object itself, and return it, not just return a copy of it.
|
||||||
## Examples
|
|
||||||
`
|
## Examples
|
||||||
|
```
|
||||||
|
|
||||||
جافا سكريبت \[1 ، 2 ، 3\] .Fill (4) ؛ // \[4، 4، 4\] \[1 ، 2 ، 3\] .Fill (4 ، 1) ؛ // \[1 ، 4 ، 4\]
|
جافا سكريبت \[1 ، 2 ، 3\] .Fill (4) ؛ // \[4، 4، 4\] \[1 ، 2 ، 3\] .Fill (4 ، 1) ؛ // \[1 ، 4 ، 4\]
|
||||||
|
|
||||||
|
@ -12,25 +12,26 @@ localeTitle: Array.prototype.filter
|
|||||||
|
|
||||||
في هذه الحالة ، نريد الحصول على جميع الطلاب الذين تزيد درجاتهم عن 90 أو تساويها.
|
في هذه الحالة ، نريد الحصول على جميع الطلاب الذين تزيد درجاتهم عن 90 أو تساويها.
|
||||||
|
|
||||||
`var students = [
|
```javascript
|
||||||
{ name: 'Quincy', grade: 96 },
|
var students = [
|
||||||
{ name: 'Jason', grade: 84 },
|
{ name: 'Quincy', grade: 96 },
|
||||||
{ name: 'Alexis', grade: 100 },
|
{ name: 'Jason', grade: 84 },
|
||||||
{ name: 'Sam', grade: 65 },
|
{ name: 'Alexis', grade: 100 },
|
||||||
{ name: 'Katie', grade: 90 }
|
{ name: 'Sam', grade: 65 },
|
||||||
];
|
{ name: 'Katie', grade: 90 }
|
||||||
//Define an array to push student objects to.
|
];
|
||||||
var studentsGrades = []
|
//Define an array to push student objects to.
|
||||||
for (var i = 0; i < students.length; i++) {
|
var studentsGrades = []
|
||||||
//Check if grade is greater than 90
|
for (var i = 0; i < students.length; i++) {
|
||||||
if (students[i].grade >= 90) {
|
//Check if grade is greater than 90
|
||||||
//Add a student to the studentsGrades array.
|
if (students[i].grade >= 90) {
|
||||||
studentsGrades.push(students[i])
|
//Add a student to the studentsGrades array.
|
||||||
}
|
studentsGrades.push(students[i])
|
||||||
}
|
}
|
||||||
|
}
|
||||||
return studentsGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
|
|
||||||
`
|
return studentsGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
|
||||||
|
```
|
||||||
|
|
||||||
هذه الحلقة تعمل ، لكنها طويلة جدًا. كما يمكن أن تصبح مملة للكتابة عن الحلقات مرارًا وتكرارًا للعديد من المصفوفات التي تحتاج إلى تكرارها.
|
هذه الحلقة تعمل ، لكنها طويلة جدًا. كما يمكن أن تصبح مملة للكتابة عن الحلقات مرارًا وتكرارًا للعديد من المصفوفات التي تحتاج إلى تكرارها.
|
||||||
|
|
||||||
@ -38,35 +39,37 @@ localeTitle: Array.prototype.filter
|
|||||||
|
|
||||||
في ما يلي نفس المثال باستخدام الفلتر:
|
في ما يلي نفس المثال باستخدام الفلتر:
|
||||||
|
|
||||||
`var students = [
|
```javascript
|
||||||
{ name: 'Quincy', grade: 96 },
|
var students = [
|
||||||
{ name: 'Jason', grade: 84 },
|
{ name: 'Quincy', grade: 96 },
|
||||||
{ name: 'Alexis', grade: 100 },
|
{ name: 'Jason', grade: 84 },
|
||||||
{ name: 'Sam', grade: 65 },
|
{ name: 'Alexis', grade: 100 },
|
||||||
{ name: 'Katie', grade: 90 }
|
{ name: 'Sam', grade: 65 },
|
||||||
];
|
{ name: 'Katie', grade: 90 }
|
||||||
|
];
|
||||||
var studentGrades = students.filter(function (student) {
|
|
||||||
//This tests if student.grade is greater than or equal to 90. It returns the "student" object if this conditional is met.
|
var studentGrades = students.filter(function (student) {
|
||||||
return student.grade >= 90;
|
//This tests if student.grade is greater than or equal to 90. It returns the "student" object if this conditional is met.
|
||||||
});
|
return student.grade >= 90;
|
||||||
|
});
|
||||||
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
|
|
||||||
`
|
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
|
||||||
|
```
|
||||||
|
|
||||||
طريقة التصفية أسرع بكثير للكتابة والنظافة للقراءة بينما لا تزال تحقق نفس الشيء. باستخدام تركيب ES6 ، يمكننا حتى تكرار تكرار حلقة 6-line مع الفلتر:
|
طريقة التصفية أسرع بكثير للكتابة والنظافة للقراءة بينما لا تزال تحقق نفس الشيء. باستخدام تركيب ES6 ، يمكننا حتى تكرار تكرار حلقة 6-line مع الفلتر:
|
||||||
|
|
||||||
`var students = [
|
```javascript
|
||||||
{ name: 'Quincy', grade: 96 },
|
var students = [
|
||||||
{ name: 'Jason', grade: 84 },
|
{ name: 'Quincy', grade: 96 },
|
||||||
{ name: 'Alexis', grade: 100 },
|
{ name: 'Jason', grade: 84 },
|
||||||
{ name: 'Sam', grade: 65 },
|
{ name: 'Alexis', grade: 100 },
|
||||||
{ name: 'Katie', grade: 90 }
|
{ name: 'Sam', grade: 65 },
|
||||||
];
|
{ name: 'Katie', grade: 90 }
|
||||||
|
];
|
||||||
var studentGrades = students.filter(student => student.grade >= 90);
|
|
||||||
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
|
var studentGrades = students.filter(student => student.grade >= 90);
|
||||||
`
|
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
|
||||||
|
```
|
||||||
|
|
||||||
الفلتر مفيد جدًا وخيارًا رائعًا للصفحات لتصفية المصفوفات مقابل العبارات الشرطية.
|
الفلتر مفيد جدًا وخيارًا رائعًا للصفحات لتصفية المصفوفات مقابل العبارات الشرطية.
|
||||||
|
|
||||||
|
@ -8,8 +8,9 @@ localeTitle: Array.prototype.find
|
|||||||
|
|
||||||
بناء الجملة:
|
بناء الجملة:
|
||||||
|
|
||||||
`arr.find(callback[, thisArg])
|
```
|
||||||
`
|
arr.find(callback[, thisArg])
|
||||||
|
```
|
||||||
|
|
||||||
##### المعلمات
|
##### المعلمات
|
||||||
|
|
||||||
@ -34,35 +35,37 @@ localeTitle: Array.prototype.find
|
|||||||
|
|
||||||
سيجد هذا المثال العنصر المناظر في الصفيف ويعيد الكائن منه.
|
سيجد هذا المثال العنصر المناظر في الصفيف ويعيد الكائن منه.
|
||||||
|
|
||||||
`let items = [
|
```javascript
|
||||||
{name: 'books', quantity: 2},
|
let items = [
|
||||||
{name: 'movies', quantity: 1},
|
{name: 'books', quantity: 2},
|
||||||
{name: 'games', quantity: 5}
|
{name: 'movies', quantity: 1},
|
||||||
];
|
{name: 'games', quantity: 5}
|
||||||
|
];
|
||||||
function findMovies(item) {
|
|
||||||
return item.name === 'movies';
|
function findMovies(item) {
|
||||||
}
|
return item.name === 'movies';
|
||||||
|
}
|
||||||
console.log(items.find(findMovies));
|
|
||||||
|
console.log(items.find(findMovies));
|
||||||
// Output
|
|
||||||
// { name: 'movies', quantity: 1 }
|
// Output
|
||||||
`
|
// { name: 'movies', quantity: 1 }
|
||||||
|
```
|
||||||
|
|
||||||
يوضح المثال التالي إخراج كل معلمة اختيارية إلى وظيفة رد الاتصال. سيؤدي ذلك إلى `undefined` نظرًا لأن أيًا من العناصر لن يعود صحيحًا من وظيفة رد الاتصال.
|
يوضح المثال التالي إخراج كل معلمة اختيارية إلى وظيفة رد الاتصال. سيؤدي ذلك إلى `undefined` نظرًا لأن أيًا من العناصر لن يعود صحيحًا من وظيفة رد الاتصال.
|
||||||
|
|
||||||
`function showInfo(element, index, array) {
|
```javascript
|
||||||
console.log('element = ' + element + ', index = ' + index + ', array = ' + array);
|
function showInfo(element, index, array) {
|
||||||
return false;
|
console.log('element = ' + element + ', index = ' + index + ', array = ' + array);
|
||||||
}
|
return false;
|
||||||
|
}
|
||||||
console.log('return = ' + [4, 6, 8, 12].find(showInfo));
|
|
||||||
|
console.log('return = ' + [4, 6, 8, 12].find(showInfo));
|
||||||
// Output
|
|
||||||
// element = 4, index = 0, array = 4,6,8,12
|
// Output
|
||||||
// element = 6, index = 1, array = 4,6,8,12
|
// element = 4, index = 0, array = 4,6,8,12
|
||||||
// element = 8, index = 2, array = 4,6,8,12
|
// element = 6, index = 1, array = 4,6,8,12
|
||||||
// element = 12, index = 3, array = 4,6,8,12
|
// element = 8, index = 2, array = 4,6,8,12
|
||||||
// return = undefined
|
// element = 12, index = 3, array = 4,6,8,12
|
||||||
`
|
// return = undefined
|
||||||
|
```
|
@ -10,8 +10,9 @@ localeTitle: Array.prototype.findIndex
|
|||||||
|
|
||||||
بناء الجملة:
|
بناء الجملة:
|
||||||
|
|
||||||
`arr.findIndex(callback[, thisArg])
|
```
|
||||||
`
|
arr.findIndex(callback[, thisArg])
|
||||||
|
```
|
||||||
|
|
||||||
##### المعلمات
|
##### المعلمات
|
||||||
|
|
||||||
@ -36,35 +37,37 @@ localeTitle: Array.prototype.findIndex
|
|||||||
|
|
||||||
سيجد هذا المثال العنصر المناظر في المصفوفة ويعيد الفهرس منه.
|
سيجد هذا المثال العنصر المناظر في المصفوفة ويعيد الفهرس منه.
|
||||||
|
|
||||||
`let items = [
|
```javascript
|
||||||
{name: 'books', quantity: 2},
|
let items = [
|
||||||
{name: 'movies', quantity: 1},
|
{name: 'books', quantity: 2},
|
||||||
{name: 'games', quantity: 5}
|
{name: 'movies', quantity: 1},
|
||||||
];
|
{name: 'games', quantity: 5}
|
||||||
|
];
|
||||||
function findMovies(item) {
|
|
||||||
return item.name === 'movies';
|
function findMovies(item) {
|
||||||
}
|
return item.name === 'movies';
|
||||||
|
}
|
||||||
console.log(items.findIndex(findMovies));
|
|
||||||
|
console.log(items.findIndex(findMovies));
|
||||||
// Index of 2nd element in the Array is returned,
|
|
||||||
// so this will result in '1'
|
// Index of 2nd element in the Array is returned,
|
||||||
`
|
// so this will result in '1'
|
||||||
|
```
|
||||||
|
|
||||||
يوضح المثال التالي إخراج كل معلمة اختيارية إلى وظيفة رد الاتصال. هذا سيعود `-1` لأن أي من العناصر سيعود true من وظيفة رد الاتصال.
|
يوضح المثال التالي إخراج كل معلمة اختيارية إلى وظيفة رد الاتصال. هذا سيعود `-1` لأن أي من العناصر سيعود true من وظيفة رد الاتصال.
|
||||||
|
|
||||||
`function showInfo(element, index, array) {
|
```javascript
|
||||||
console.log('element = ' + element + ', index = ' + index + ', array = ' + array);
|
function showInfo(element, index, array) {
|
||||||
return false;
|
console.log('element = ' + element + ', index = ' + index + ', array = ' + array);
|
||||||
}
|
return false;
|
||||||
|
}
|
||||||
console.log('return = ' + [4, 6, 8, 12].findIndex(showInfo));
|
|
||||||
|
console.log('return = ' + [4, 6, 8, 12].findIndex(showInfo));
|
||||||
// Output
|
|
||||||
// element = 4, index = 0, array = 4,6,8,12
|
// Output
|
||||||
// element = 6, index = 1, array = 4,6,8,12
|
// element = 4, index = 0, array = 4,6,8,12
|
||||||
// element = 8, index = 2, array = 4,6,8,12
|
// element = 6, index = 1, array = 4,6,8,12
|
||||||
// element = 12, index = 3, array = 4,6,8,12
|
// element = 8, index = 2, array = 4,6,8,12
|
||||||
// return = -1
|
// element = 12, index = 3, array = 4,6,8,12
|
||||||
`
|
// return = -1
|
||||||
|
```
|
@ -6,16 +6,17 @@ localeTitle: Array.prototype.forEach
|
|||||||
|
|
||||||
يتم استخدام أسلوب الصفيف 'forEach' للتكرار خلال كل عنصر في صفيف. يتم استدعاء الأسلوب على كائن الصفيف ويتم تمرير دالة تسمى على كل عنصر في الصفيف.
|
يتم استخدام أسلوب الصفيف 'forEach' للتكرار خلال كل عنصر في صفيف. يتم استدعاء الأسلوب على كائن الصفيف ويتم تمرير دالة تسمى على كل عنصر في الصفيف.
|
||||||
|
|
||||||
`var arr = [1, 2, 3, 4, 5];
|
```javascript
|
||||||
|
var arr = [1, 2, 3, 4, 5];
|
||||||
arr.forEach(number => console.log(number * 2));
|
|
||||||
|
arr.forEach(number => console.log(number * 2));
|
||||||
// 2
|
|
||||||
// 4
|
// 2
|
||||||
// 6
|
// 4
|
||||||
// 8
|
// 6
|
||||||
// 10
|
// 8
|
||||||
`
|
// 10
|
||||||
|
```
|
||||||
|
|
||||||
يمكن أن تأخذ وظيفة رد الاتصال أيضًا معلمة ثانية للفهرس في حال كنت بحاجة إلى الرجوع إلى فهرس العنصر الحالي في الصفيف.
|
يمكن أن تأخذ وظيفة رد الاتصال أيضًا معلمة ثانية للفهرس في حال كنت بحاجة إلى الرجوع إلى فهرس العنصر الحالي في الصفيف.
|
||||||
|
|
||||||
|
@ -13,10 +13,11 @@ localeTitle: Array.prototype.includes
|
|||||||
|
|
||||||
### مثال
|
### مثال
|
||||||
|
|
||||||
`const a = [1, 2, 3];
|
```js
|
||||||
a.includes(2); // true
|
const a = [1, 2, 3];
|
||||||
a.includes(4); // false
|
a.includes(2); // true
|
||||||
`
|
a.includes(4); // false
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -24,16 +24,17 @@ localeTitle: Array.prototype.indexOf
|
|||||||
|
|
||||||
## أمثلة
|
## أمثلة
|
||||||
|
|
||||||
`var array = [1, 2, 4, 1, 7]
|
```javascript
|
||||||
|
var array = [1, 2, 4, 1, 7]
|
||||||
array.indexOf(1); // 0
|
|
||||||
array.indexOf(7); // 4
|
array.indexOf(1); // 0
|
||||||
array.indexOf(6); // -1
|
array.indexOf(7); // 4
|
||||||
array.indexOf('1'); // -1
|
array.indexOf(6); // -1
|
||||||
array.indexOf('hello'); // -1
|
array.indexOf('1'); // -1
|
||||||
array.indexOf(1, 2); // 3
|
array.indexOf('hello'); // -1
|
||||||
array.indexOf(1, -3); // 3
|
array.indexOf(1, 2); // 3
|
||||||
`
|
array.indexOf(1, -3); // 3
|
||||||
|
```
|
||||||
|
|
||||||
### معلومات اكثر:
|
### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -10,18 +10,20 @@ localeTitle: Array.prototype.map
|
|||||||
|
|
||||||
**ES5**
|
**ES5**
|
||||||
|
|
||||||
`var arr = [1, 2, 3, 4];
|
```js
|
||||||
var newArray = arr.map(function(element) { return element * 2});
|
var arr = [1, 2, 3, 4];
|
||||||
console.log(newArray); // [2, 4, 6, 8]
|
var newArray = arr.map(function(element) { return element * 2});
|
||||||
`
|
console.log(newArray); // [2, 4, 6, 8]
|
||||||
|
```
|
||||||
|
|
||||||
**ES6**
|
**ES6**
|
||||||
|
|
||||||
`const arr = [1, 2, 3, 4];
|
```js
|
||||||
const newArray = arr.map(element => element * 2);
|
const arr = [1, 2, 3, 4];
|
||||||
console.log(newArray);
|
const newArray = arr.map(element => element * 2);
|
||||||
//[2, 4, 6, 8]
|
console.log(newArray);
|
||||||
`
|
//[2, 4, 6, 8]
|
||||||
|
```
|
||||||
|
|
||||||
**معلومات اكثر**
|
**معلومات اكثر**
|
||||||
|
|
||||||
|
@ -23,12 +23,13 @@ localeTitle: Array.prototype.pop
|
|||||||
|
|
||||||
## أمثلة
|
## أمثلة
|
||||||
|
|
||||||
`let array = [1, 2, 3, 4];
|
```js
|
||||||
array.pop(); // removes 4
|
let array = [1, 2, 3, 4];
|
||||||
console.log(array); // [1, 2, 3]
|
array.pop(); // removes 4
|
||||||
|
console.log(array); // [1, 2, 3]
|
||||||
[].pop() // undefined
|
|
||||||
`
|
[].pop() // undefined
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -6,8 +6,9 @@ localeTitle: Array.prototype.push
|
|||||||
|
|
||||||
### بناء الجملة
|
### بناء الجملة
|
||||||
|
|
||||||
`arr.push([element1[, ...[, elementN]]])
|
```javascript
|
||||||
`
|
arr.push([element1[, ...[, elementN]]])
|
||||||
|
```
|
||||||
|
|
||||||
### المعلمات
|
### المعلمات
|
||||||
|
|
||||||
@ -25,23 +26,26 @@ localeTitle: Array.prototype.push
|
|||||||
|
|
||||||
## مثال:
|
## مثال:
|
||||||
|
|
||||||
`var myStarkFamily = ['John', 'Robb', 'Sansa', 'Bran'];
|
```javascript
|
||||||
`
|
var myStarkFamily = ['John', 'Robb', 'Sansa', 'Bran'];
|
||||||
|
```
|
||||||
|
|
||||||
افترض أن لديك مجموعة من أطفال House Stark من Game of Thrones. ومع ذلك ، فإن أحد الأعضاء ، **آريا** ، مفقود. معرفة الرمز أعلاه ، يمكنك إضافتها بتعيين `'Arya'` إلى الصفيف في الفهرس بعد الفهرس الأخير مثل:
|
افترض أن لديك مجموعة من أطفال House Stark من Game of Thrones. ومع ذلك ، فإن أحد الأعضاء ، **آريا** ، مفقود. معرفة الرمز أعلاه ، يمكنك إضافتها بتعيين `'Arya'` إلى الصفيف في الفهرس بعد الفهرس الأخير مثل:
|
||||||
|
|
||||||
`myStarkFamily[4] = 'Arya';
|
```javascript
|
||||||
`
|
myStarkFamily[4] = 'Arya';
|
||||||
|
```
|
||||||
|
|
||||||
المشكلة مع هذا الحل هو أنه لا يمكن معالجة الحالات العامة. إذا كنت لا تعرف مسبقا ما طول الصفيف ، لا يمكنك إضافة عناصر جديدة بهذه الطريقة. هذا هو ما `push()` ل. لا نحتاج إلى معرفة طول المصفوفة. نحن نضيف فقط عنصرنا في نهاية الصفيف.
|
المشكلة مع هذا الحل هو أنه لا يمكن معالجة الحالات العامة. إذا كنت لا تعرف مسبقا ما طول الصفيف ، لا يمكنك إضافة عناصر جديدة بهذه الطريقة. هذا هو ما `push()` ل. لا نحتاج إلى معرفة طول المصفوفة. نحن نضيف فقط عنصرنا في نهاية الصفيف.
|
||||||
|
|
||||||
`myStarkFamily.push('Arya');
|
```javascript
|
||||||
console.log(myStarkFamily); // ['John', 'Robb', 'Sansa', 'Bran', 'Arya']
|
myStarkFamily.push('Arya');
|
||||||
|
console.log(myStarkFamily); // ['John', 'Robb', 'Sansa', 'Bran', 'Arya']
|
||||||
var newLength = myStarkFamily.push('Rickon'); // oops! forgot Rickon
|
|
||||||
console.log(newLength); // 6
|
var newLength = myStarkFamily.push('Rickon'); // oops! forgot Rickon
|
||||||
console.log(myStarkFamily); // ['John', 'Robb', 'Sansa', 'Bran', 'Arya', 'Rickon']
|
console.log(newLength); // 6
|
||||||
`
|
console.log(myStarkFamily); // ['John', 'Robb', 'Sansa', 'Bran', 'Arya', 'Rickon']
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -41,19 +41,20 @@ localeTitle: Array.prototype.reduce
|
|||||||
|
|
||||||
قم بتحويل صفيف من السلاسل إلى كائن واحد يُظهر عدد المرات التي تظهر فيها كل سلسلة في الصفيف. لاحظ هذه المكالمة لتقليل التمريرات إلى كائن فارغ `{}` كمعلمة `initialValue` . سيتم استخدام هذا كقيمة أولية للمجمع (الوسيطة الأولى) التي تم تمريرها إلى وظيفة رد الاتصال.
|
قم بتحويل صفيف من السلاسل إلى كائن واحد يُظهر عدد المرات التي تظهر فيها كل سلسلة في الصفيف. لاحظ هذه المكالمة لتقليل التمريرات إلى كائن فارغ `{}` كمعلمة `initialValue` . سيتم استخدام هذا كقيمة أولية للمجمع (الوسيطة الأولى) التي تم تمريرها إلى وظيفة رد الاتصال.
|
||||||
|
|
||||||
`var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];
|
```js
|
||||||
|
var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];
|
||||||
var petCounts = pets.reduce(function(obj, pet){
|
|
||||||
if (!obj[pet]) {
|
var petCounts = pets.reduce(function(obj, pet){
|
||||||
obj[pet] = 1;
|
if (!obj[pet]) {
|
||||||
} else {
|
obj[pet] = 1;
|
||||||
obj[pet]++;
|
} else {
|
||||||
}
|
obj[pet]++;
|
||||||
return obj;
|
}
|
||||||
}, {});
|
return obj;
|
||||||
|
}, {});
|
||||||
console.log(petCounts);
|
|
||||||
`
|
console.log(petCounts);
|
||||||
|
```
|
||||||
|
|
||||||
انتاج: `js { dog: 2, chicken: 3, cat: 1, rabbit: 1 }`
|
انتاج: `js { dog: 2, chicken: 3, cat: 1, rabbit: 1 }`
|
||||||
|
|
||||||
|
@ -10,19 +10,20 @@ localeTitle: Array.prototype.sort
|
|||||||
|
|
||||||
مؤشر | الطابع --- | --- 33 |! 34 | " 35 | # 36 | $ 37 |٪
|
مؤشر | الطابع --- | --- 33 |! 34 | " 35 | # 36 | $ 37 |٪
|
||||||
|
|
||||||
`var myArray = ['#', '!'];
|
```js
|
||||||
var sortedArray = myArray.sort(); // ['!', '#'] because in the ASCII table "!" is before "#"
|
var myArray = ['#', '!'];
|
||||||
|
var sortedArray = myArray.sort(); // ['!', '#'] because in the ASCII table "!" is before "#"
|
||||||
myArray = ['a', 'c', 'b'];
|
|
||||||
console.log(myArray.sort()); // ['a', 'b', 'c']
|
myArray = ['a', 'c', 'b'];
|
||||||
console.log(myArray) // ['a', 'b', 'c']
|
console.log(myArray.sort()); // ['a', 'b', 'c']
|
||||||
|
console.log(myArray) // ['a', 'b', 'c']
|
||||||
myArray = ['b', 'a', 'aa'];
|
|
||||||
console.log(myArray.sort()); // ['a', 'aa', 'b']
|
myArray = ['b', 'a', 'aa'];
|
||||||
|
console.log(myArray.sort()); // ['a', 'aa', 'b']
|
||||||
myArray = [1, 2, 13, 23];
|
|
||||||
console.log(myArray.sort()); // [1, 13, 2, 23] numbers are treated like strings!
|
myArray = [1, 2, 13, 23];
|
||||||
`
|
console.log(myArray.sort()); // [1, 13, 2, 23] numbers are treated like strings!
|
||||||
|
```
|
||||||
|
|
||||||
# الاستخدام المتقدم
|
# الاستخدام المتقدم
|
||||||
|
|
||||||
@ -30,19 +31,20 @@ localeTitle: Array.prototype.sort
|
|||||||
|
|
||||||
### فمثلا
|
### فمثلا
|
||||||
|
|
||||||
`function compare(a, b){
|
```js
|
||||||
if (a < b){return -1;}
|
function compare(a, b){
|
||||||
if (a > b){return 1;}
|
if (a < b){return -1;}
|
||||||
if (a === b){return 0;}
|
if (a > b){return 1;}
|
||||||
}
|
if (a === b){return 0;}
|
||||||
|
}
|
||||||
var myArray = [1, 2, 23, 13];
|
|
||||||
console.log(myArray.sort()); // [ 1, 13, 2, 23 ]
|
var myArray = [1, 2, 23, 13];
|
||||||
console.log(myArray.sort(compare)); // [ 1, 2, 13, 23 ]
|
console.log(myArray.sort()); // [ 1, 13, 2, 23 ]
|
||||||
|
console.log(myArray.sort(compare)); // [ 1, 2, 13, 23 ]
|
||||||
myArray = [3, 4, 1, 2];
|
|
||||||
sortedArray = myArray.sort(function(a, b){.....}); // it depends from the compareFunction
|
myArray = [3, 4, 1, 2];
|
||||||
`
|
sortedArray = myArray.sort(function(a, b){.....}); // it depends from the compareFunction
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -14,26 +14,29 @@ localeTitle: Array.prototype.splice
|
|||||||
|
|
||||||
إذا تم تضمين معلمة واحدة فقط ، فسيقوم `splice(start)` بإزالة كل عناصر الصفيف من `start` إلى نهاية الصفيف.
|
إذا تم تضمين معلمة واحدة فقط ، فسيقوم `splice(start)` بإزالة كل عناصر الصفيف من `start` إلى نهاية الصفيف.
|
||||||
|
|
||||||
`let exampleArray = ['first', 'second', 'third', 'fourth'];
|
```js
|
||||||
exampleArray.splice(2);
|
let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||||
// exampleArray is now ['first', 'second'];
|
exampleArray.splice(2);
|
||||||
`
|
// exampleArray is now ['first', 'second'];
|
||||||
|
```
|
||||||
|
|
||||||
إذا كانت `start` سلبية ، فسيتم حسابها إلى الخلف من نهاية الصفيف.
|
إذا كانت `start` سلبية ، فسيتم حسابها إلى الخلف من نهاية الصفيف.
|
||||||
|
|
||||||
`let exampleArray = ['first', 'second', 'third', 'fourth'];
|
```js
|
||||||
exampleArray.splice(-1);
|
let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||||
// exampleArray is now ['first', 'second', 'third'];
|
exampleArray.splice(-1);
|
||||||
`
|
// exampleArray is now ['first', 'second', 'third'];
|
||||||
|
```
|
||||||
|
|
||||||
#### لصق (ابدأ ، deleteCount)
|
#### لصق (ابدأ ، deleteCount)
|
||||||
|
|
||||||
إذا تم تضمين معلمة ثانية `splice(start, deleteCount)` فسيؤدي `splice(start, deleteCount)` إلى إزالة عناصر `deleteCount` من الصفيف ، بدءًا من `start` .
|
إذا تم تضمين معلمة ثانية `splice(start, deleteCount)` فسيؤدي `splice(start, deleteCount)` إلى إزالة عناصر `deleteCount` من الصفيف ، بدءًا من `start` .
|
||||||
|
|
||||||
`let exampleArray = ['first', 'second', 'third', 'fourth'];
|
```js
|
||||||
exampleArray.splice(1, 2);
|
let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||||
// exampleArray is now ['first', 'fourth'];
|
exampleArray.splice(1, 2);
|
||||||
`
|
// exampleArray is now ['first', 'fourth'];
|
||||||
|
```
|
||||||
|
|
||||||
#### لصق (ابدأ ، deleteCount ، newElement1 ، newElement2 ، ...)
|
#### لصق (ابدأ ، deleteCount ، newElement1 ، newElement2 ، ...)
|
||||||
|
|
||||||
@ -41,27 +44,30 @@ localeTitle: Array.prototype.splice
|
|||||||
|
|
||||||
يمكن إضافة العناصر دون إزالة أي عناصر بتمرير `0` كمعامل ثان.
|
يمكن إضافة العناصر دون إزالة أي عناصر بتمرير `0` كمعامل ثان.
|
||||||
|
|
||||||
`let exampleArray = ['first', 'second', 'third', 'fourth'];
|
```js
|
||||||
exampleArray.splice(1, 0, 'new 1', 'new 2');
|
let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||||
// exampleArray is now ['first', 'new 1', 'new 2', 'second', 'third', 'fourth']
|
exampleArray.splice(1, 0, 'new 1', 'new 2');
|
||||||
`
|
// exampleArray is now ['first', 'new 1', 'new 2', 'second', 'third', 'fourth']
|
||||||
|
```
|
||||||
|
|
||||||
يمكن أيضا استبدال العناصر.
|
يمكن أيضا استبدال العناصر.
|
||||||
|
|
||||||
`let exampleArray = ['first', 'second', 'third', 'fourth'];
|
```js
|
||||||
exampleArray.splice(1, 2, 'new second', 'new third');
|
let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||||
// exampleArray is now ['first', 'new second', 'new third', 'fourth']
|
exampleArray.splice(1, 2, 'new second', 'new third');
|
||||||
`
|
// exampleArray is now ['first', 'new second', 'new third', 'fourth']
|
||||||
|
```
|
||||||
|
|
||||||
### قيمة الإرجاع
|
### قيمة الإرجاع
|
||||||
|
|
||||||
بالإضافة إلى تغيير الصفيف الذي يتم استدعاؤه ، يقوم `splice()` أيضًا بإرجاع صفيف يحتوي على القيم التي تمت إزالتها. هذه طريقة لقطع صفيف إلى صفيفين مختلفين.
|
بالإضافة إلى تغيير الصفيف الذي يتم استدعاؤه ، يقوم `splice()` أيضًا بإرجاع صفيف يحتوي على القيم التي تمت إزالتها. هذه طريقة لقطع صفيف إلى صفيفين مختلفين.
|
||||||
|
|
||||||
`let exampleArray = ['first', 'second', 'third', 'fourth'];
|
```js
|
||||||
let newArray = exampleArray.splice(1, 2);
|
let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||||
// exampleArray is now ['first', 'fourth']
|
let newArray = exampleArray.splice(1, 2);
|
||||||
// newArray is ['second', 'third']
|
// exampleArray is now ['first', 'fourth']
|
||||||
`
|
// newArray is ['second', 'third']
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -8,8 +8,9 @@ localeTitle: Array.prototype.toLocaleString
|
|||||||
|
|
||||||
##### بناء الجملة:
|
##### بناء الجملة:
|
||||||
|
|
||||||
`arr.toLocaleString();
|
```
|
||||||
`
|
arr.toLocaleString();
|
||||||
|
```
|
||||||
|
|
||||||
##### المعلمات
|
##### المعلمات
|
||||||
|
|
||||||
@ -22,25 +23,27 @@ localeTitle: Array.prototype.toLocaleString
|
|||||||
|
|
||||||
## أمثلة
|
## أمثلة
|
||||||
|
|
||||||
`var number = 12345;
|
```javascript
|
||||||
var date = new Date();
|
var number = 12345;
|
||||||
var myArray = [number, date, 'foo'];
|
var date = new Date();
|
||||||
var myString = myArray.toLocaleString();
|
var myArray = [number, date, 'foo'];
|
||||||
|
var myString = myArray.toLocaleString();
|
||||||
console.log(myString);
|
|
||||||
// OUTPUT '12345,10/25/2017, 4:20:02 PM,foo'
|
console.log(myString);
|
||||||
`
|
// OUTPUT '12345,10/25/2017, 4:20:02 PM,foo'
|
||||||
|
```
|
||||||
|
|
||||||
يمكن عرض مخرجات مختلفة بناء على اللغة ومعرف المنطقة (اللغة).
|
يمكن عرض مخرجات مختلفة بناء على اللغة ومعرف المنطقة (اللغة).
|
||||||
|
|
||||||
`var number = 54321;
|
```javascript
|
||||||
var date = new Date();
|
var number = 54321;
|
||||||
var myArray = [number, date, 'foo'];
|
var date = new Date();
|
||||||
var myJPString = myArray.toLocaleString('ja-JP');
|
var myArray = [number, date, 'foo'];
|
||||||
|
var myJPString = myArray.toLocaleString('ja-JP');
|
||||||
console.log(myJPString);
|
|
||||||
// OUTPUT '54321,10/26/2017, 5:20:02 PM,foo'
|
console.log(myJPString);
|
||||||
`
|
// OUTPUT '54321,10/26/2017, 5:20:02 PM,foo'
|
||||||
|
```
|
||||||
|
|
||||||
### معلومات اكثر:
|
### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -8,8 +8,9 @@ localeTitle: Array.prototype.values
|
|||||||
|
|
||||||
### بناء الجملة
|
### بناء الجملة
|
||||||
|
|
||||||
`arr.values()
|
```javascript
|
||||||
`
|
arr.values()
|
||||||
|
```
|
||||||
|
|
||||||
### عائدات
|
### عائدات
|
||||||
|
|
||||||
@ -17,19 +18,20 @@ localeTitle: Array.prototype.values
|
|||||||
|
|
||||||
### مثال
|
### مثال
|
||||||
|
|
||||||
`let friends = ["Rachel", "Monica", "Chandler", "Phoebe", "Joey", "Ross"]
|
```javascript
|
||||||
|
let friends = ["Rachel", "Monica", "Chandler", "Phoebe", "Joey", "Ross"]
|
||||||
for (let friend of friends) {
|
|
||||||
console.log(friend)
|
for (let friend of friends) {
|
||||||
}
|
console.log(friend)
|
||||||
|
}
|
||||||
// Rachel
|
|
||||||
// Monica
|
// Rachel
|
||||||
// Chandler
|
// Monica
|
||||||
// Phoebe
|
// Chandler
|
||||||
// Joey
|
// Phoebe
|
||||||
// Ross
|
// Joey
|
||||||
`
|
// Ross
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -8,14 +8,16 @@ localeTitle: التاريخ الآن
|
|||||||
|
|
||||||
### بناء الجملة
|
### بناء الجملة
|
||||||
|
|
||||||
`var timeInMs = Date.now();
|
```js
|
||||||
`
|
var timeInMs = Date.now();
|
||||||
|
```
|
||||||
|
|
||||||
### مثال
|
### مثال
|
||||||
|
|
||||||
`Date.now();
|
```js
|
||||||
// 1508783660969
|
Date.now();
|
||||||
`
|
// 1508783660969
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -8,16 +8,18 @@ localeTitle: Date.prototype.getDate
|
|||||||
|
|
||||||
### بناء الجملة
|
### بناء الجملة
|
||||||
|
|
||||||
`dateObject.getDate()
|
```js
|
||||||
`
|
dateObject.getDate()
|
||||||
|
```
|
||||||
|
|
||||||
### مثال
|
### مثال
|
||||||
|
|
||||||
`var Xmas95 = new Date('December 25, 1995 23:15:30');
|
```js
|
||||||
var day = Xmas95.getDate();
|
var Xmas95 = new Date('December 25, 1995 23:15:30');
|
||||||
|
var day = Xmas95.getDate();
|
||||||
console.log(day); // 25
|
|
||||||
`
|
console.log(day); // 25
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -8,16 +8,18 @@ localeTitle: Date.prototype.getFullYear
|
|||||||
|
|
||||||
### بناء الجملة
|
### بناء الجملة
|
||||||
|
|
||||||
`dateObj.getFullYear()
|
```javascript
|
||||||
`
|
dateObj.getFullYear()
|
||||||
|
```
|
||||||
|
|
||||||
### مثال
|
### مثال
|
||||||
|
|
||||||
`var date = new Date();
|
```javascript
|
||||||
// creates a new Date() object with current date and time.
|
var date = new Date();
|
||||||
date.getFullYear()
|
// creates a new Date() object with current date and time.
|
||||||
// 2018
|
date.getFullYear()
|
||||||
`
|
// 2018
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
@ -6,14 +6,15 @@ localeTitle: طول الوظيفة
|
|||||||
|
|
||||||
تحمل الخاصية `length` في كائن الدالة عدد الوسيطات المتوقع بواسطة الدالة عند استدعاء.
|
تحمل الخاصية `length` في كائن الدالة عدد الوسيطات المتوقع بواسطة الدالة عند استدعاء.
|
||||||
|
|
||||||
`function noArgs() { }
|
```javascript
|
||||||
|
function noArgs() { }
|
||||||
function oneArg(a) { }
|
|
||||||
|
function oneArg(a) { }
|
||||||
console.log(noArgs.length); // 0
|
|
||||||
|
console.log(noArgs.length); // 0
|
||||||
console.log(oneArg.length); // 1
|
|
||||||
`
|
console.log(oneArg.length); // 1
|
||||||
|
```
|
||||||
|
|
||||||
### ES2015 التركيب
|
### ES2015 التركيب
|
||||||
|
|
||||||
@ -21,17 +22,18 @@ ES2015 ، أو ES6 كما يطلق عليه عادة ، قدم المعلمات
|
|||||||
|
|
||||||
إذا تم استخدام عامل التشغيل المتبقي أو المعلمات الافتراضية في تعريف الدالة ، فإن خاصية `length` ستشمل فقط عدد الوسيطات قبل عامل تشغيل باقي أو معلمة افتراضية.
|
إذا تم استخدام عامل التشغيل المتبقي أو المعلمات الافتراضية في تعريف الدالة ، فإن خاصية `length` ستشمل فقط عدد الوسيطات قبل عامل تشغيل باقي أو معلمة افتراضية.
|
||||||
|
|
||||||
`function withRest(...args) { }
|
```javascript
|
||||||
|
function withRest(...args) { }
|
||||||
function withArgsAndRest(a, b, ...args) { }
|
|
||||||
|
function withArgsAndRest(a, b, ...args) { }
|
||||||
function withDefaults(a, b = 'I am the default') { }
|
|
||||||
|
function withDefaults(a, b = 'I am the default') { }
|
||||||
console.log(withRest.length); // 0
|
|
||||||
|
console.log(withRest.length); // 0
|
||||||
console.log(withArgsAndRest.length); // 2
|
|
||||||
|
console.log(withArgsAndRest.length); // 2
|
||||||
console.log(withDefaults.length); // 1
|
|
||||||
`
|
console.log(withDefaults.length); // 1
|
||||||
|
```
|
||||||
|
|
||||||
يمكن العثور على مزيد من المعلومات حول `Function.length` على [مستندات MDN الخاصة بـ Mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length) .
|
يمكن العثور على مزيد من المعلومات حول `Function.length` على [مستندات MDN الخاصة بـ Mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length) .
|
@ -12,29 +12,31 @@ localeTitle: Function.prototype.bind
|
|||||||
|
|
||||||
يتم تكليفك بكتابة الكود لتحديث عدد الحضور عند وصولهم إلى المؤتمر. يمكنك إنشاء صفحة ويب بسيطة تحتوي على زر ، عند النقر فوق ذلك ، بزيادة `numOfAttendees` خاصية على كائن الاستجواب. يمكنك استخدام jQuery لإضافة معالج النقر إلى الزر الخاص بك ، ولكن بعد النقر فوق الزر ، لم يتغير كائن الإيداع. قد تبدو شفرتك شيئًا كهذا.
|
يتم تكليفك بكتابة الكود لتحديث عدد الحضور عند وصولهم إلى المؤتمر. يمكنك إنشاء صفحة ويب بسيطة تحتوي على زر ، عند النقر فوق ذلك ، بزيادة `numOfAttendees` خاصية على كائن الاستجواب. يمكنك استخدام jQuery لإضافة معالج النقر إلى الزر الخاص بك ، ولكن بعد النقر فوق الزر ، لم يتغير كائن الإيداع. قد تبدو شفرتك شيئًا كهذا.
|
||||||
|
|
||||||
`var nodevember = {
|
```javascript
|
||||||
numOfAttendees: 0,
|
var nodevember = {
|
||||||
incrementNumOfAttendees: function() {
|
numOfAttendees: 0,
|
||||||
this.numOfAttendees++;
|
incrementNumOfAttendees: function() {
|
||||||
}
|
this.numOfAttendees++;
|
||||||
// other properties
|
}
|
||||||
};
|
// other properties
|
||||||
|
};
|
||||||
$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees);
|
|
||||||
`
|
$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees);
|
||||||
|
```
|
||||||
|
|
||||||
هذه مشكلة شائعة عند العمل مع jQuery و JavaScript. عند النقر فوق زر `this` الكلمة في الطريقة التي تم تمريرها إلى ومسج `on` طريقة يرجع زر وليس الكائن المؤتمر. يمكنك ربط `this` السياق الخاص بك بالطريقة لحل المشكلة.
|
هذه مشكلة شائعة عند العمل مع jQuery و JavaScript. عند النقر فوق زر `this` الكلمة في الطريقة التي تم تمريرها إلى ومسج `on` طريقة يرجع زر وليس الكائن المؤتمر. يمكنك ربط `this` السياق الخاص بك بالطريقة لحل المشكلة.
|
||||||
|
|
||||||
`var nodevember = {
|
```javascript
|
||||||
numOfAttendees: 0,
|
var nodevember = {
|
||||||
incrementNumOfAttendees: function() {
|
numOfAttendees: 0,
|
||||||
this.numOfAttendees++;
|
incrementNumOfAttendees: function() {
|
||||||
}
|
this.numOfAttendees++;
|
||||||
// other properties
|
}
|
||||||
};
|
// other properties
|
||||||
|
};
|
||||||
$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees.bind(nodevember));
|
|
||||||
`
|
$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees.bind(nodevember));
|
||||||
|
```
|
||||||
|
|
||||||
الآن عند النقر فوق الزر يشير `this` إلى كائن `nodevember` .
|
الآن عند النقر فوق الزر يشير `this` إلى كائن `nodevember` .
|
||||||
|
|
||||||
@ -42,14 +44,15 @@ localeTitle: Function.prototype.bind
|
|||||||
|
|
||||||
كل وسيطة تم تمريرها `bind` بعد الأول سوف تسبق أية وسائط يتم تمريرها عند استدعاء الوظيفة. هذا يسمح لك بتطبيق الحجج مسبقًا على إحدى الوظائف. في المثال أدناه ، تأخذ `combineStrings` معًا. `bind` ثم يتم استخدامها لإنشاء دالة التي توفر دائما "كول" كسلسلة الأولى.
|
كل وسيطة تم تمريرها `bind` بعد الأول سوف تسبق أية وسائط يتم تمريرها عند استدعاء الوظيفة. هذا يسمح لك بتطبيق الحجج مسبقًا على إحدى الوظائف. في المثال أدناه ، تأخذ `combineStrings` معًا. `bind` ثم يتم استخدامها لإنشاء دالة التي توفر دائما "كول" كسلسلة الأولى.
|
||||||
|
|
||||||
`function combineStrings(str1, str2) {
|
```javascript
|
||||||
return str1 + " " + str2
|
function combineStrings(str1, str2) {
|
||||||
}
|
return str1 + " " + str2
|
||||||
|
}
|
||||||
var makeCool = combineStrings.bind(null, "Cool");
|
|
||||||
|
var makeCool = combineStrings.bind(null, "Cool");
|
||||||
makeCool("trick"); // "Cool trick"
|
|
||||||
`
|
makeCool("trick"); // "Cool trick"
|
||||||
|
```
|
||||||
|
|
||||||
يحتوي الدليل على [هذا المرجع](https://guide.freecodecamp.org/javascript/this-reference) على مزيد من المعلومات حول كيفية تغيير ما تشير إليه `this` الكلمة الرئيسية.
|
يحتوي الدليل على [هذا المرجع](https://guide.freecodecamp.org/javascript/this-reference) على مزيد من المعلومات حول كيفية تغيير ما تشير إليه `this` الكلمة الرئيسية.
|
||||||
|
|
||||||
|
@ -33,20 +33,21 @@ localeTitle: JSON تحليل
|
|||||||
|
|
||||||
هنا مثال مع `reviver` :
|
هنا مثال مع `reviver` :
|
||||||
|
|
||||||
`var data = '{"value": 5}';
|
```javascript
|
||||||
|
var data = '{"value": 5}';
|
||||||
var result = JSON.parse(data, function(key, value) {
|
|
||||||
if (typeof value === 'number') {
|
var result = JSON.parse(data, function(key, value) {
|
||||||
return value * 10;
|
if (typeof value === 'number') {
|
||||||
}
|
return value * 10;
|
||||||
return value;
|
}
|
||||||
});
|
return value;
|
||||||
|
});
|
||||||
// Original Data
|
|
||||||
console.log("Original Data:", data); // This will print Original Data: {"value": 5}
|
// Original Data
|
||||||
// Result after parsing
|
console.log("Original Data:", data); // This will print Original Data: {"value": 5}
|
||||||
console.log("Parsed Result: ", result); // This will print Parsed Result: { value: 50 }
|
// Result after parsing
|
||||||
`
|
console.log("Parsed Result: ", result); // This will print Parsed Result: { value: 50 }
|
||||||
|
```
|
||||||
|
|
||||||
في المثال أعلاه ، يتم مضاعفة جميع القيم [الرقمية في](https://repl.it/Mwfp/0) `10` - [Repl.it Demo](https://repl.it/Mwfp/0)
|
في المثال أعلاه ، يتم مضاعفة جميع القيم [الرقمية في](https://repl.it/Mwfp/0) `10` - [Repl.it Demo](https://repl.it/Mwfp/0)
|
||||||
|
|
||||||
|
@ -21,8 +21,9 @@ localeTitle: JSON البناء
|
|||||||
|
|
||||||
يتكون زوج الاسم / القيمة من اسم حقل (في علامات اقتباس مزدوجة) ، متبوعًا بنقطتين ، متبوعًا بقيمة:
|
يتكون زوج الاسم / القيمة من اسم حقل (في علامات اقتباس مزدوجة) ، متبوعًا بنقطتين ، متبوعًا بقيمة:
|
||||||
|
|
||||||
`"handle":"moghya"
|
```
|
||||||
`
|
"handle":"moghya"
|
||||||
|
```
|
||||||
|
|
||||||
* تتطلب أسماء JSON علامات اقتباس مزدوجة.
|
* تتطلب أسماء JSON علامات اقتباس مزدوجة.
|
||||||
|
|
||||||
@ -34,13 +35,15 @@ localeTitle: JSON البناء
|
|||||||
|
|
||||||
* JSON
|
* JSON
|
||||||
|
|
||||||
`"handle":"moghya"
|
```
|
||||||
`
|
"handle":"moghya"
|
||||||
|
```
|
||||||
|
|
||||||
* جافا سكريبت
|
* جافا سكريبت
|
||||||
|
|
||||||
`handle:"moghya"
|
```
|
||||||
`
|
handle:"moghya"
|
||||||
|
```
|
||||||
|
|
||||||
### قيم JSON
|
### قيم JSON
|
||||||
|
|
||||||
@ -65,47 +68,51 @@ localeTitle: JSON البناء
|
|||||||
|
|
||||||
باستخدام JavaScript ، يمكنك إنشاء كائن وتعيين البيانات إليه ، على النحو التالي:
|
باستخدام JavaScript ، يمكنك إنشاء كائن وتعيين البيانات إليه ، على النحو التالي:
|
||||||
|
|
||||||
`var person = {
|
```
|
||||||
"name":"Shubham",
|
var person = {
|
||||||
"age":21,
|
"name":"Shubham",
|
||||||
"handle":"moghya",
|
"age":21,
|
||||||
"website":"http://moghya.me/"
|
"handle":"moghya",
|
||||||
};
|
"website":"http://moghya.me/"
|
||||||
`
|
};
|
||||||
|
```
|
||||||
|
|
||||||
يمكنك الوصول إلى كائن JavaScript مثل هذا:
|
يمكنك الوصول إلى كائن JavaScript مثل هذا:
|
||||||
|
|
||||||
`//returns moghya
|
```
|
||||||
person.handle;
|
//returns moghya
|
||||||
`
|
person.handle;
|
||||||
|
```
|
||||||
|
|
||||||
يمكن أيضًا الوصول إليه على النحو التالي:
|
يمكن أيضًا الوصول إليه على النحو التالي:
|
||||||
|
|
||||||
`//returns http://moghya.me/
|
```
|
||||||
person["website"];
|
//returns http://moghya.me/
|
||||||
`
|
person["website"];
|
||||||
|
```
|
||||||
|
|
||||||
### المصفوفات في JSON
|
### المصفوفات في JSON
|
||||||
|
|
||||||
`var team = {
|
```
|
||||||
"name":"novatoscript",
|
var team = {
|
||||||
"members" :
|
"name":"novatoscript",
|
||||||
[
|
"members" :
|
||||||
{
|
[
|
||||||
"name":"Shubham Sawant",
|
{
|
||||||
"age":21,
|
"name":"Shubham Sawant",
|
||||||
"handle":"moghya",
|
"age":21,
|
||||||
"website":"http://moghya.me",
|
"handle":"moghya",
|
||||||
},
|
"website":"http://moghya.me",
|
||||||
{
|
},
|
||||||
"name":"Saurabh Banore",
|
{
|
||||||
"age":21,
|
"name":"Saurabh Banore",
|
||||||
"handle":"banoresaurabh",
|
"age":21,
|
||||||
"website":"http://banoresaurabh.me/",
|
"handle":"banoresaurabh",
|
||||||
}
|
"website":"http://banoresaurabh.me/",
|
||||||
]
|
}
|
||||||
}
|
]
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### مثال
|
### مثال
|
||||||
|
|
||||||
|
@ -8,8 +8,9 @@ localeTitle: خريطة
|
|||||||
|
|
||||||
## بناء الجملة
|
## بناء الجملة
|
||||||
|
|
||||||
`new Map([iterable])
|
```javascript
|
||||||
`
|
new Map([iterable])
|
||||||
|
```
|
||||||
|
|
||||||
## المعلمات
|
## المعلمات
|
||||||
|
|
||||||
@ -17,15 +18,16 @@ localeTitle: خريطة
|
|||||||
|
|
||||||
## مثال
|
## مثال
|
||||||
|
|
||||||
`// basic usage
|
```javascript
|
||||||
const myMap = new Map();
|
// basic usage
|
||||||
myMap.set('foo',1);
|
const myMap = new Map();
|
||||||
myMap.set('bar',2);
|
myMap.set('foo',1);
|
||||||
myMap.set('baz',3);
|
myMap.set('bar',2);
|
||||||
|
myMap.set('baz',3);
|
||||||
myMap.get('foo'); // returns 1
|
|
||||||
myMap.get('baz'); // returns 3
|
myMap.get('foo'); // returns 1
|
||||||
myMap.get('hihi'); // return undefined
|
myMap.get('baz'); // returns 3
|
||||||
|
myMap.get('hihi'); // return undefined
|
||||||
myMap.size(); // 3
|
|
||||||
`
|
myMap.size(); // 3
|
||||||
|
```
|
@ -8,22 +8,24 @@ localeTitle: Map.prototype.clear
|
|||||||
|
|
||||||
## بناء الجملة
|
## بناء الجملة
|
||||||
|
|
||||||
`myMap.clear();
|
```javascript
|
||||||
`
|
myMap.clear();
|
||||||
|
```
|
||||||
|
|
||||||
## مثال
|
## مثال
|
||||||
|
|
||||||
`const myMap = new Map();
|
```javascript
|
||||||
myMap.set('foo',1);
|
const myMap = new Map();
|
||||||
myMap.set('bar',2);
|
myMap.set('foo',1);
|
||||||
myMap.set('baz',3);
|
myMap.set('bar',2);
|
||||||
|
myMap.set('baz',3);
|
||||||
|
|
||||||
myMap.size(); // 3
|
|
||||||
myMap.has('foo'); // true;
|
myMap.size(); // 3
|
||||||
|
myMap.has('foo'); // true;
|
||||||
myMap.clear();
|
|
||||||
|
myMap.clear();
|
||||||
myMap.size(); // 0
|
|
||||||
myMap.has('foo'); // false
|
myMap.size(); // 0
|
||||||
`
|
myMap.has('foo'); // false
|
||||||
|
```
|
@ -8,8 +8,9 @@ localeTitle: Map.prototype.delete
|
|||||||
|
|
||||||
## بناء الجملة
|
## بناء الجملة
|
||||||
|
|
||||||
`myMap.delete(key);
|
```javascript
|
||||||
`
|
myMap.delete(key);
|
||||||
|
```
|
||||||
|
|
||||||
## المعلمات
|
## المعلمات
|
||||||
|
|
||||||
@ -17,17 +18,18 @@ localeTitle: Map.prototype.delete
|
|||||||
|
|
||||||
## مثال
|
## مثال
|
||||||
|
|
||||||
`const myMap = new Map();
|
```javascript
|
||||||
myMap.set('foo',1);
|
const myMap = new Map();
|
||||||
myMap.set('bar',2);
|
myMap.set('foo',1);
|
||||||
myMap.set('baz',3);
|
myMap.set('bar',2);
|
||||||
|
myMap.set('baz',3);
|
||||||
|
|
||||||
myMap.size(); // 3
|
|
||||||
myMap.has('foo'); // true;
|
myMap.size(); // 3
|
||||||
|
myMap.has('foo'); // true;
|
||||||
myMap.delete('foo'); // Returns true. Successfully removed.
|
|
||||||
|
myMap.delete('foo'); // Returns true. Successfully removed.
|
||||||
myMap.size(); // 2
|
|
||||||
myMap.has('foo'); // Returns false. The "foo" element is no longer present.
|
myMap.size(); // 2
|
||||||
`
|
myMap.has('foo'); // Returns false. The "foo" element is no longer present.
|
||||||
|
```
|
@ -8,20 +8,22 @@ localeTitle: Map.prototype.entries
|
|||||||
|
|
||||||
## بناء الجملة
|
## بناء الجملة
|
||||||
|
|
||||||
`myMap.entries()
|
```javascript
|
||||||
`
|
myMap.entries()
|
||||||
|
```
|
||||||
|
|
||||||
## مثال
|
## مثال
|
||||||
|
|
||||||
`const myMap = new Map();
|
```javascript
|
||||||
myMap.set('foo',1);
|
const myMap = new Map();
|
||||||
myMap.set('bar',2);
|
myMap.set('foo',1);
|
||||||
myMap.set('baz',3);
|
myMap.set('bar',2);
|
||||||
|
myMap.set('baz',3);
|
||||||
|
|
||||||
var iterator = myMap.entries();
|
|
||||||
|
var iterator = myMap.entries();
|
||||||
console.log(iterator.next().value); // ['foo', 1]
|
|
||||||
console.log(iterator.next().value); // ['bar', 2]
|
console.log(iterator.next().value); // ['foo', 1]
|
||||||
console.log(iterator.next().value); // ['baz', 3]
|
console.log(iterator.next().value); // ['bar', 2]
|
||||||
`
|
console.log(iterator.next().value); // ['baz', 3]
|
||||||
|
```
|
@ -8,8 +8,9 @@ localeTitle: Map.prototype.forEach
|
|||||||
|
|
||||||
## بناء الجملة
|
## بناء الجملة
|
||||||
|
|
||||||
`myMap.forEach(callback, thisArg)
|
```javascript
|
||||||
`
|
myMap.forEach(callback, thisArg)
|
||||||
|
```
|
||||||
|
|
||||||
## المعلمات
|
## المعلمات
|
||||||
|
|
||||||
|
@ -8,8 +8,9 @@ localeTitle: Map.prototype.get
|
|||||||
|
|
||||||
## بناء الجملة
|
## بناء الجملة
|
||||||
|
|
||||||
`myMap.get(key);
|
```javascript
|
||||||
`
|
myMap.get(key);
|
||||||
|
```
|
||||||
|
|
||||||
## المعلمات
|
## المعلمات
|
||||||
|
|
||||||
@ -17,12 +18,13 @@ localeTitle: Map.prototype.get
|
|||||||
|
|
||||||
## مثال
|
## مثال
|
||||||
|
|
||||||
`const myMap = new Map();
|
```javascript
|
||||||
myMap.set('foo',1);
|
const myMap = new Map();
|
||||||
myMap.set('bar',2);
|
myMap.set('foo',1);
|
||||||
myMap.set('baz',3);
|
myMap.set('bar',2);
|
||||||
|
myMap.set('baz',3);
|
||||||
myMap.get('foo'); // returns 1
|
|
||||||
myMap.get('baz'); // returns 3
|
myMap.get('foo'); // returns 1
|
||||||
myMap.get('hihi'); // return undefined
|
myMap.get('baz'); // returns 3
|
||||||
`
|
myMap.get('hihi'); // return undefined
|
||||||
|
```
|
@ -8,20 +8,22 @@ localeTitle: Map.prototype.keys
|
|||||||
|
|
||||||
## بناء الجملة
|
## بناء الجملة
|
||||||
|
|
||||||
`myMap.keys()
|
```javascript
|
||||||
`
|
myMap.keys()
|
||||||
|
```
|
||||||
|
|
||||||
## مثال
|
## مثال
|
||||||
|
|
||||||
`const myMap = new Map();
|
```javascript
|
||||||
myMap.set('foo',1);
|
const myMap = new Map();
|
||||||
myMap.set('bar',2);
|
myMap.set('foo',1);
|
||||||
myMap.set('baz',3);
|
myMap.set('bar',2);
|
||||||
|
myMap.set('baz',3);
|
||||||
|
|
||||||
const iterator = myMap.keys();
|
|
||||||
|
const iterator = myMap.keys();
|
||||||
console.log(iterator.next().value); // 'foo'
|
|
||||||
console.log(iterator.next().value); // 'bar'
|
console.log(iterator.next().value); // 'foo'
|
||||||
console.log(iterator.next().value); // 'baz'
|
console.log(iterator.next().value); // 'bar'
|
||||||
`
|
console.log(iterator.next().value); // 'baz'
|
||||||
|
```
|
@ -8,8 +8,9 @@ localeTitle: Map.prototype.set
|
|||||||
|
|
||||||
## بناء الجملة
|
## بناء الجملة
|
||||||
|
|
||||||
`myMap.set(key, value);
|
```javascript
|
||||||
`
|
myMap.set(key, value);
|
||||||
|
```
|
||||||
|
|
||||||
## المعلمات
|
## المعلمات
|
||||||
|
|
||||||
@ -17,15 +18,16 @@ localeTitle: Map.prototype.set
|
|||||||
|
|
||||||
## مثال
|
## مثال
|
||||||
|
|
||||||
`const myMap = new Map();
|
```javascript
|
||||||
|
const myMap = new Map();
|
||||||
// sets new elements
|
|
||||||
myMap.set('foo',1);
|
// sets new elements
|
||||||
myMap.set('bar',2);
|
myMap.set('foo',1);
|
||||||
myMap.set('baz',3);
|
myMap.set('bar',2);
|
||||||
|
myMap.set('baz',3);
|
||||||
// Updates an element
|
|
||||||
myMap.set('foo', 100);
|
// Updates an element
|
||||||
|
myMap.set('foo', 100);
|
||||||
myMap.get('foo'); // returns 100
|
|
||||||
`
|
myMap.get('foo'); // returns 100
|
||||||
|
```
|
Reference in New Issue
Block a user