fix: converted single to triple backticks10 (#36237)

This commit is contained in:
Randell Dawson
2019-06-20 14:53:53 -07:00
committed by Tom
parent da6bd27eec
commit 039fea8b6d
75 changed files with 1880 additions and 1655 deletions

View File

@ -12,37 +12,41 @@ localeTitle: تعليقات
الطريقة الأولى هي `//` التعليق ؛ كل النص التالي `//` على نفس السطر في تعليق. فمثلا:
`function hello() {
```javascript
function hello() {
// This is a one line JavaScript comment
console.log("Hello world!");
}
hello();
`
}
hello();
```
والطريقة الثانية هي `/* */` comment ، التي يمكن استخدامها للتعليقات ذات السطر الواحد والمتعددة الخطوط. فمثلا:
`function hello() {
```javascript
function hello() {
/* This is a one line JavaScript comment */
console.log("Hello world!");
}
hello();
`
}
hello();
```
`function hello() {
```javascript
function hello() {
/* This comment spans multiple lines. Notice
that we don't need to end the comment until we're done. */
console.log("Hello world!");
}
hello();
`
}
hello();
```
يمكنك أيضًا منع تنفيذ شفرة جافا سكريبت فقط عند استخدام خطوط الرمز مثل هذا:
`function hello() {
```javascript
function hello() {
/*console.log("Hello world!");*/
}
hello();
`
}
hello();
```
#### معلومات اكثر:
@ -59,22 +63,24 @@ localeTitle: تعليقات
كما أن التعليقات مفيدة جدًا لاختبار الشفرة حيث يمكنك منع تشغيل سطر / فقرة رمز معين
`function hello() {
```javascript
function hello() {
// The statement below is not going to get executed
// console.log('hi')
}
hello();
`
hello();
```
`function hello() {
```
function hello() {
// The statements below are not going to get executed
/*
console.log('hi');
console.log('code-test');
*/
}
hello();
`
}
hello();
```
#### معلومات اكثر:

View File

@ -10,21 +10,22 @@ localeTitle: نموذج التزامن وحلقة الحدث
لنأخذ مثال الكود لفهم مكدس المكالمات
`function multiply(x,y) {
```javascript
function multiply(x,y) {
return x * y;
}
}
function squared(n) {
function squared(n) {
return multiply(n,n)
}
function printSquare(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 () بحيث يدفع وقت التشغيل هذا إلى المكدس الذي ينفذها وبالتالي طباعة الرقم التربيعي على وحدة التحكم. وتجدر الإشارة إلى أن الوظيفة الأولى التي يتم دفعها إلى الكدسة قبل تشغيل أي من التعليمات البرمجية المذكورة أعلاه هي الوظيفة الرئيسية التي يُشار إليها في وقت التشغيل بأنها "وظيفة مجهولة".
@ -44,14 +45,15 @@ localeTitle: نموذج التزامن وحلقة الحدث
دعونا نفهم هذا مع مثال الكود
`console.log('hi');
```javascript
console.log('hi');
setTimeout(function() {
setTimeout(function() {
console.log('freecodeCamp')
},5000);
},5000);
console.log('JS')
`
console.log('JS')
```
عندما ينفّذ السطر الأول ، يكون الأمر console.log () وهو عبارة عن استدعاء للوظيفة ، مما يعني أن هذه الوظيفة يتم دفعها إلى مكدس الاستدعاءات حيث تقوم بتنفيذ الطباعة "hi" إلى وحدة التحكم وأخيراً يتم إرجاعها ويتم إفراغها من المكدس. ثم عندما يذهب وقت التشغيل لتنفيذ setTimeout () فإنه يعرف أن هذا هو API على شبكة الإنترنت ، وبالتالي فإنه يعطيها إلى المتصفح للتعامل مع تنفيذ ذلك. يبدأ المتصفح في تشغيل جهاز ضبط الوقت ثم ينبثق وقت تشغيل JS في وضع setTimeout () خارج الحزمة. يواجه استدعاء آخر console.log () ومن ثم فإنه يدفع هذا في مكدس الاستدعاءات يتم تسجيل الرسالة 'JS' في وحدة التحكم ومن ثم يتم إرجاعها ومن ثم يتم إفراغ الأخير console.log () إيقاف المكدس. الآن مكدس الاستدعاءات فارغ. في الوقت نفسه بينما كان كل هذا يحدث على انتهاء جهاز ضبط الوقت الذي يكون عند مرور 5 ثوان ، ينتقل المتصفح ويدفع وظيفة رد الاتصال إلى قائمة انتظار رد الاتصال. بعد ذلك ، تقوم حلقة الحدث بالتحقق مما إذا كانت مكدس الاستدعاءات مجاني أم لا. نظرًا لأنه مجاني ، فإنه يأخذ وظيفة رد الاتصال ويدفعه مرة أخرى إلى مكدس الاستدعاءات الذي ينفذ الشفرة بداخله. مرة أخرى داخل التعليمات البرمجية هناك استدعاء console.log () بحيث تنتقل هذه الوظيفة إلى الجزء العلوي من المكدس الذي يسجل "freecodecamp" في وحدة التحكم وأخيراً يتم إرجاعه يعني أنه يحصل poppped إيقاف المكدس وأخيراً ينفجر رد الاتصال من المكدس وإننا انتهينا.

View File

@ -8,26 +8,30 @@ localeTitle: مشغلون شرطيون شرطيون
المشغل الثلاثي هو طريقة مدمجة لكتابة 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>
: <second condition> ? <value if second is true>
: <fallback value>
`
```js
<first condition> ? <value if first true>
: <second condition> ? <value if second is true>
: <fallback value>
```
> **نصيحة للمحترفين** : كما ترى ، يمكنك تقسيم المشغل الثلاثي على عدة أسطر على سبيل المثال
`const wealth = housesOwned > 3 ? "rich"
```
const wealth = housesOwned > 3 ? "rich"
: housesOwned > 1 ? "nothing to complain"
: "poor"
`
```

View File

@ -8,62 +8,66 @@ localeTitle: خطأ في التعامل ومحاولة رمي الصيد
#### `try...catch`
`try {
```javascript
try {
throw new Error('my error');
}
catch (e) {
}
catch (e) {
console.error(e.message);
}
}
// Output:
// my error
`
// Output:
// my error
```
#### `try...finally` :
`try {
```javascript
try {
throw new Error('my error');
}
finally {
}
finally {
console.error('finally');
}
}
// Output:
// finally
`
// Output:
// finally
```
_ملاحظة:_ عندما لا `catch` الخطأ ، فإنه في الواقع لا "يصطاد" ​​، حتى لو تم تنفيذ الحظر `finally` . وهذا يعني أن الخطأ سيستمر في كتلة `try` العليا (أو الكتلة الرئيسية).
#### `try...catch...finally` :
`try {
```javascript
try {
throw new Error('my error');
}
catch (e) {
}
catch (e) {
console.error(e.message);
}
finally {
}
finally {
console.error('finally');
}
}
// Output:
// my error
// finally
`
// Output:
// my error
// finally
```
الاستخدام النموذجي:
`try {
```javascript
try {
openFile(file);
readFile(file)
}
catch (e) {
}
catch (e) {
console.error(e.message);
}
finally {
}
finally {
closeFile(file);
}
`
}
```
#### `try...catch` متداخلة `try...catch`
@ -72,7 +76,8 @@ _ملاحظة:_ عندما لا `catch` الخطأ ، فإنه في الواقع
* اعتبر عبارة `try-catch` داخل كتلة `try` .
* رمي الخطأ صعودا.
`try {
```javascript
try {
try {
throw new Error('my error');
}
@ -83,64 +88,68 @@ _ملاحظة:_ عندما لا `catch` الخطأ ، فإنه في الواقع
finally {
console.log('finally');
}
}
catch (e) {
}
catch (e) {
console.error('outer', e.message);
}
}
// Output:
// inner my error
// finally
// outer my error
`
// Output:
// inner my error
// finally
// outer my error
```
#### أنواع الخطأ
##### خطأ مرجعي
`var x;
try {
```javascript
var x;
try {
x = y + 1; // y cannot be referenced (used)
}
catch(err) {
}
catch(err) {
console.log(err.name, err.message);
}
// ReferenceError y is not defined
`
}
// ReferenceError y is not defined
```
##### خطأ في بناء الجملة
`try {
```javascript
try {
eval("alert('Hello)"); // Missing ' will produce an error
}
catch(err) {
}
catch(err) {
console.log(err.name,err.message);
}
// SyntaxError Invalid or unexpected token
`
}
// SyntaxError Invalid or unexpected token
```
##### خطأ مطبعي
`var num = 1;
try {
```javascript
var num = 1;
try {
num.toUpperCase(); // You cannot convert a number to upper case
}
catch(err) {
}
catch(err) {
console.log(err.name, err.message);
}
// TypeError num.toUpperCase is not a function
`
}
// TypeError num.toUpperCase is not a function
```
##### خطأ URI
`try {
```javascript
try {
decodeURI("%%%"); // You cannot URI decode these percent signs
}
catch(err) {
}
catch(err) {
console.log(err.name, err.message);
}
// URIError URI malformed
`
}
// URIError URI malformed
```
#### معلومات اكثر:

View File

@ -43,15 +43,16 @@ localeTitle: وظائف السهم
ميزة لا تصدق من وظيفة الأسهم هو أنه لا يمكنك إعادة وظيفة السهم. سوف يطلق عليه دائما مع السياق الذي تم تعريفه فيه. مجرد استخدام وظيفة عادية.
`// Old Syntax
axios.get(url).then(function(response) {
```javascript
// Old Syntax
axios.get(url).then(function(response) {
this.data = response.data;
}).bind(this);
}).bind(this);
// New Syntax
axios.get(url).then(response => {
// New Syntax
axios.get(url).then(response => {
this.data = response.data;
});
`
});
```
لا أعتقد أنني بحاجة إلى تقديم تفسير لهذا. انها بسيطة.

View File

@ -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;
```
يعمل بشكل جيد.

View File

@ -10,49 +10,55 @@ localeTitle: مهمة التدمير
**ES5 Destructuring**
`var fullName = ["John", "Smith"];
var firstName = fullName[0];
var lastName = fullName[1];
```js
var fullName = ["John", "Smith"];
var firstName = fullName[0];
var lastName = fullName[1];
console.log(firstName, lastName); // John Smith
`
console.log(firstName, lastName); // John Smith
```
**ES6 Destructuring**
`const fullName = ["John", "Smith"];
const [firstName, lastName] = fullName;
```js
const fullName = ["John", "Smith"];
const [firstName, lastName] = fullName;
console.log(firstName, lastName); // John Smith
`
console.log(firstName, lastName); // John Smith
```
توضح الأمثلة المذكورة أعلاه فائدة استخدام تعيين Destructuring ES6.
يمكنك أيضًا استخدام Destructuring على الكائنات باستخدام بناء جملة مشابه
`const fullName = { first: "John", last: "Smith"};
const {first, last} = fullName;
```js
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) عن بعض الشيء لأن الكائن يجب أن يكون له خصائص بالأسماء التي تقوم بتعيينها. لذلك ، لن يعمل الرمز أدناه على النحو المنشود.
`const fullName = { first: "John", last: "Smith"};
const {firstName, lastName} = fullName;
```js
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}
{propertyName: desiredVariableName} = obj
`
```js
const obj = {propertyName: value}
{propertyName: desiredVariableName} = obj
```
مثالنا السابق سوف يعاد كتابته على النحو التالي:
`const fullName = { first: "John", last: "Smith"};
const {first: firstName, last: lastName} = fullName;
```js
const fullName = { first: "John", last: "Smith"};
const {first: firstName, last: lastName} = fullName;
console.log(firstName, lastName); // John Smith
`
console.log(firstName, lastName); // John Smith
```

View File

@ -12,7 +12,8 @@ localeTitle: ES6
> مثال ES5:
`var User = function () {
```javascript
var User = function () {
function User(name) {
this._name = name;
}
@ -22,8 +23,8 @@ localeTitle: ES6
};
return User;
}();
`
}();
```
> مثال ES6:

View File

@ -33,19 +33,21 @@ localeTitle: واسمحوا Const
يتم استخدام Const لتعيين قيمة ثابتة للمتغير. ولا يمكن تغيير القيمة. انها ثابتة.
`const a = 50;
a = 60; // shows error. You cannot change the value of const.
const b = "Constant variable";
b = "Assigning new value"; // shows error.
`
```
const a = 50;
a = 60; // shows error. You cannot change the value of const.
const b = "Constant variable";
b = "Assigning new value"; // shows error.
```
فكر في مثال آخر.
`const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
LANGUAGES = "Javascript"; // shows error.
LANGUAGES.push('Java'); // Works fine.
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']
`
```
const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
LANGUAGES = "Javascript"; // shows error.
LANGUAGES.push('Java'); // Works fine.
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']
```
قد يكون هذا مربكًا قليلاً.

View File

@ -10,55 +10,60 @@ localeTitle: القيم الفارسية
من الممكن التحقق من وجود قيمة كاذبة في متغير مع شرط بسيط:
`if (!variable) {
```javascript
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 }
if (match.teamA)
```javascript
const match = { teamA: 0, teamB: 1 }
if (match.teamA)
// The following won't run due to the falsy evaluation
console.log('Team A: ' + match.teamA);
}
`
}
```
بديل لحالة الاستخدام أعلاه هو تقييم القيمة باستخدام `typeof` :
`const match = { teamA: 0, teamB: 1 }
if (typeof match.teamA === 'number')
```javascript
const match = { teamA: 0, teamB: 1 }
if (typeof match.teamA === 'number')
console.log('Team A: ' + match.teamA);
}
`
}
```
## معلومات اكثر

View File

@ -8,20 +8,21 @@ localeTitle: استدعاء وظيفة
يجب أن تكون الوظائف في النطاق عندما يتم استدعاؤها. نطاق الوظيفة هو الوظيفة التي يتم الإعلان عنها ، أو البرنامج بالكامل إذا تم الإعلان عنه في المستوى الأعلى.
`function myFunction(a, b) {
```javascript
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) {
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 ، وهما الوسيطات المستخدمة في استدعاء الدالة.
@ -31,15 +32,16 @@ localeTitle: استدعاء وظيفة
المثال التالي يقوم بإنشاء كائن ( `myObject` ) ، مع خاصيتين ( `firstName` و `lastName` ) ، وطريقة ( `fullName` ):
`var myObject = {
```javascript
var myObject = {
firstName:"John",
lastName: "Doe",
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"
```
### وظائف السهم

View File

@ -8,13 +8,14 @@ localeTitle: كائن عالمي
فمثلا:
`// global scope
var foo = "bar";
```javascript
// 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(this.foo); // bar (if strict mode is disabled)
`
console.log(global.foo); // bar (in a Node environment)
console.log(window.foo); // bar (in a browser window)
console.log(this.foo); // bar (if strict mode is disabled)
```
من المهم هنا التمييز بين النطاقات المحلية إلى الدوال والنطاق العالمي: فالعنصر العام يحتوي فقط على المتغيرات التي تم الإعلان عنها على النطاق العالمي ، وليس النطاقات المحلية للوظائف.

View File

@ -4,34 +4,36 @@ localeTitle: المتغيرات العالمية
---
يتم تعريف المتغيرات العالمية خارج وظيفة لسهولة الوصول في جميع أنحاء البرنامج، في حين يتم تخزين المتغيرات المحلية داخل دالة باستخدام `var` للاستخدام فقط في تلك الوظيفة في [نطاق](https://developer.mozilla.org/en-US/docs/Glossary/Scope) . إذا قمت بتعريف متغير بدون استخدام `var` ، حتى لو كان داخل دالة ، فسيظل ينظر إليه على أنه عالمي:
`var x = 5; //global
function someThing(y) {
var z = x + y;
console.log(z);
}
```javascript
var x = 5; //global
function someThing(y) {
var z = x + y;
console.log(z);
}
function someThing(y) {
x = 5; //still global!
var z = x + y;
console.log(z);
}
function someThing(y) {
x = 5; //still global!
var z = x + y;
console.log(z);
}
function someThing(y) {
var x = 5; //local
var z = x + y;
console.log(z);
}
`
function someThing(y) {
var x = 5; //local
var z = x + y;
console.log(z);
}
```
المتغير الشامل هو أيضًا كائن في النطاق الحالي ، مثل نافذة المتصفح:
`var dog = “Fluffy”;
console.log(dog); //Fluffy;
```javascript
var dog = “Fluffy;
console.log(dog); //Fluffy;
var dog = “Fluffy”;
console.log(window.dog); //Fluffy
`
var dog = “Fluffy”;
console.log(window.dog); //Fluffy
```
إنها أفضل الممارسات لتقليل المتغيرات العالمية. نظرًا لأنه يمكن الوصول إلى المتغير في أي مكان في البرنامج ، فقد يتسبب ذلك في حدوث سلوك غريب.

View File

@ -8,31 +8,33 @@ localeTitle: وظائف من الدرجة العليا
عندما تستخدم `Array.map` ، فإنك تقدم دالة كوسيطة واحدة فقط ، والتي ينطبق عليها كل عنصر موجود في الصفيف.
`var arr = [ 1, 2, 3 ];
```javascript
var arr = [ 1, 2, 3 ];
var arrDoubled = arr.map(function(num) {
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` . سيعطيك هذا النتيجة نفسها التي رأيتها أعلاه.
`function multiplyBy(num1) {
```javascript
function multiplyBy(num1) {
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` في المثال أعلاه.

View File

@ -8,24 +8,26 @@ localeTitle: HTML DOM getElementById الطريقة
**محتوى HTML:**
`
```html
<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` العنصر الأول الذي تم العثور عليه:
`
```html
<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'
```
#### معلومات اكثر:

View File

@ -8,33 +8,35 @@ localeTitle: خاصية HTML Dom Innerhtml
**_الحصول على عنصر المحتوى_**
`
```html
<div id="demo">
<p>Demo</p>
</div>
`
</div>
```
`var element = document.getElementById("demo");
console.log(element.innerHTML) //logs <p>Demo</p>
`
```javascript
var element = document.getElementById("demo");
console.log(element.innerHTML) //logs <p>Demo</p>
```
**_محتوى مجموعة العنصر_**
`
```html
<div id="demo"></div>
`
```
`var element = document.getElementById("demo");
element.innerHTML = "<div>Demo</div>";
`
```javascript
var element = document.getElementById("demo");
element.innerHTML = "<div>Demo</div>";
```
سوف يكون مثل HTML الآن
`
```html
<div id="demo">
<div>Demo</div>
</div>
`
</div>
```
**_اعتبارات أمنية_**
@ -44,10 +46,11 @@ localeTitle: خاصية HTML Dom Innerhtml
سيؤدي تعيين قيمة " `<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) .

View File

@ -6,28 +6,30 @@ localeTitle: HTML DOM querySelector ()
**محتوى HTML:**
`
```html
<div id="id-example"></div>
<div class="class-example"></div>
<a>element-example</a>
`
<div class="class-example"></div>
<a>element-example</a>
```
**محتوى جافا سكريبت:**
`document.querySelector("#id-example"); // Returns the element with id "id-example"
document.querySelector(".class-example"); // Returns the element with class "class-example"
document.querySelector("a"); // Returns the "a" element
`
```javascript
document.querySelector("#id-example"); // Returns the element with id "id-example"
document.querySelector(".class-example"); // Returns the element with class "class-example"
document.querySelector("a"); // Returns the "a" element
```
ملاحظة `querySelector()` إرجاع عنصر المطابقة الأول ، لإرجاع كافة التطابقات ، استخدم أسلوب querySelectorAll () بدلاً من ذلك.
`
```html
<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'
```
#### معلومات اكثر:

View File

@ -12,17 +12,17 @@ localeTitle: HTML دوم
كل عنصر في DOM يسمى أيضًا عقدة.
`
```html
<html>
<head>
<head>
<title> My title </title>
</head>
<body>
</head>
<body>
<a href="#">My Link</a>
<h1> My header </h1>
</body>
</html>
`
</body>
</html>
```
يكون DOM الخاص بـ HTML أعلاه على النحو التالي:

View File

@ -8,35 +8,38 @@ localeTitle: If-Else Statement
**ملاحظة:** العبارة `else` اختيارية.
`if (condition)
```javascript
if (condition)
/* do something */
else
else
/* do something else */
`
```
يمكن أن تكون متسلسلة متعددة `if...else` بيانات أخرى لإنشاء شرط `else if` . هذا يحدد شرط جديد لاختبار ويمكن تكرار لاختبار شروط متعددة ، والتحقق حتى يتم تقديم بيان صحيح لتنفيذ.
`if (condition1)
```javascript
if (condition1)
/* do something */
else if (condition2)
else if (condition2)
/* do something else */
else if (condition3)
else if (condition3)
/* do something else */
else
else
/* final statement */
`
```
**ملاحظة:** إذا كنت ترغب في تنفيذ البيان أكثر من واحد في `if` ، `else` أو `else if` مطلوبة جزئيا، الأقواس المجعدة حول البيانات:
`if (condition) {
```javascript
if (condition) {
/* do */
/* something */
/* with multiple statements */
} 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)
@ -54,14 +57,15 @@ localeTitle: If-Else Statement
**استخدام** `else if` :
`if (x < 10)
```javascript
if (x < 10)
return "Small number";
else if (x < 50)
else if (x < 50)
return "Medium number";
else if (x < 100)
else if (x < 100)
return "Large number";
else {
else {
flag = 1;
return "Invalid number";
}
`
}
```

View File

@ -34,11 +34,12 @@ localeTitle: تعبيرات الوظائف المستحثة على الفور (I
**مثال سيء** :
`var x = 2 //no semicolon, will throw error
(function(y){
```javascript
var x = 2 //no semicolon, will throw error
(function(y){
return x;
})(x); //Uncaught TypeError: 2 is not a function
`
})(x); //Uncaught TypeError: 2 is not a function
```
## لماذا استخدام تعبيرات الاستدلال على الفور؟

View File

@ -16,13 +16,15 @@ localeTitle: طريقة تحديث الموقع
* `True` يعيد تحميل الصفحة من الخادم (على سبيل المثال لا يخزن البيانات المخزنة مؤقتًا بواسطة المتصفح):
`window.location.reload(true);
`
```
window.location.reload(true);
```
* `False` بإعادة تحميل الصفحة باستخدام إصدار الصفحة المخزنة مؤقتًا بواسطة المستعرض.
`window.location.reload(false);
`
```
window.location.reload(false);
```
`False` هي المعلمة الافتراضية ، لذلك إذا تركت فارغة ، فإن `object.reload()` يعيد تحميل الصفحة باستخدام بيانات broswer المخبأة ، أي أنه مماثل لاستخدام الطريقة كـ `object.reload(false)` .
@ -30,29 +32,33 @@ localeTitle: طريقة تحديث الموقع
* إرفاق `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>
function reloadThePage(){
window.location.reload();
}
</script>
`
}
</script>
```
### مثال:
`// Reload the current resources from the server
window.location.reload(true);
```javascript
// 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 الحالي من الخادم.

View File

@ -12,14 +12,15 @@ localeTitle: العوامل المنطقية
عند تضمين قيم منطقية فقط (سواء كانت `true` أو `false` ) ، فإنها ترجع true فقط إذا كان كلا التعبيرين صحيحين. إذا كان تعبير واحد أو كلاهما غير صحيح ، فستظهر العبارة بالكامل false.
`true && true //returns the second value, true
true && false //returns the second value, false
false && false //returns the first value, false
123 && 'abc' // returns the second value, 'abc'
'abc' && null //returns the second value, null
undefined && 'abc' //returns the first value, undefined
0 && false //returns the first value, 0
`
```js
true && true //returns the second value, true
true && false //returns the second value, false
false && false //returns the first value, false
123 && 'abc' // returns the second value, 'abc'
'abc' && null //returns the second value, null
undefined && 'abc' //returns the first value, undefined
0 && false //returns the first value, 0
```
#### منطقية أو (||
@ -27,14 +28,15 @@ localeTitle: العوامل المنطقية
عند تضمين قيم منطقية فقط (سواء كانت `true` أو `false` ) ، فإنها ترجع true إذا كان التعبير صحيحًا. يمكن أن يكون كلا التعبيرين صحيحًا ، لكن هناك حاجة إلى تعبير واحد فقط للحصول على النتيجة الحقيقية.
`true || true //returns the first value, true
true || false //returns the first value, true
false || false //returns the second value, false
123 || 'abc' // returns the first value, 123
'abc' || null //returns the first value, 'abc'
undefined || 'abc' //returns the second value, 'abc'
0 || false //returns the second value, false
`
```js
true || true //returns the first value, true
true || false //returns the first value, true
false || false //returns the second value, false
123 || 'abc' // returns the first value, 123
'abc' || null //returns the first value, 'abc'
undefined || 'abc' //returns the second value, 'abc'
0 || false //returns the second value, false
```
#### تقييم دائرة قصر
@ -55,33 +57,35 @@ localeTitle: العوامل المنطقية
1. تحويل التعبير إلى منطقي.
2. إرجاع معكوس القيمة المنطقية التي تم الحصول عليها في الخطوة الأخيرة.
`var spam = 'rinki'; //spam may be equal to any non empty string
var booSpam = !spam;
/*returns false
```js
var spam = 'rinki'; //spam may be equal to any non empty string
var booSpam = !spam;
/*returns 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;
/*returns true
var spam2 = ''; //spam2 here is equal to empty string
var booSpam2 = !spam2;
/*returns true
since when a empty string when converted to boolean returns false
inverse of which is evaluated to true.
*/
`
*/
```
#### نصائح:
كلا المشغلين المنطقيين سيعودون قيمة آخر تعبير تم تقييمه. فمثلا:
`"cat" && "dog" //returns "dog"
"cat" && false //returns false
0 && "cat" //returns 0 (which is a falsy value)
```js
"cat" && "dog" //returns "dog"
"cat" && false //returns false
0 && "cat" //returns 0 (which is a falsy value)
"cat" || "dog" //returns "cat"
"cat" || false //returns "cat"
0 || "cat" //returns "cat"
`
"cat" || "dog" //returns "cat"
"cat" || false //returns "cat"
0 || "cat" //returns "cat"
```
لاحظ أن where `&&` تُرجع القيمة الأولى ، `||` يعيد القيمة الثانية والعكس صحيح.

View File

@ -4,10 +4,11 @@ localeTitle: لحلقة
---
### بناء الجملة
`for ([initialization]); [condition]; [final-expression]) {
```javascript
for ([initialization]); [condition]; [final-expression]) {
// statement
}
`
}
```
جافا سكريبت `for` بيان يتكون من ثلاث عبارات وبيان:
@ -46,36 +47,38 @@ localeTitle: لحلقة
تكرار عبر الأعداد الصحيحة من 0-8
`for (var i = 0; i < 9; i++) {
```javascript
for (var i = 0; i < 9; i++) {
console.log(i);
}
}
output:
0
1
2
3
4
5
6
7
8
`
output:
0
1
2
3
4
5
6
7
8
```
الخروج من حلقة قبل تعبير الشرط غير صحيح
`for (var elephant = 1; elephant < 10; elephant+=2) {
```javascript
for (var elephant = 1; elephant < 10; elephant+=2) {
if (elephant === 7) {
break;
}
console.info('elephant is ' + elephant);
}
}
output:
elephant is 1
elephant is 3
elephant is 5
`
output:
elephant is 1
elephant is 3
elephant is 5
```
### موارد آخرى

View File

@ -11,14 +11,16 @@ localeTitle: التعامل مع كائنات جافا سكريبت
إضافة خصائص إلى كائنات باستخدام تدرج قوس:
`myObject['myProperty'] = "myValue";
`
```javascript
myObject['myProperty'] = "myValue";
```
باستخدام تدرج القوس ، يمكننا استخدام المتغيرات كأسماء للممتلكات:
`var dynamicProperty = "myProperty";
myObject[dynamicProperty] = "myValue";
`
```javascript
var dynamicProperty = "myProperty";
myObject[dynamicProperty] = "myValue";
```
يمكننا أيضًا حذفها كما يلي:

View File

@ -22,38 +22,41 @@ _يتذكر موقع الويب اللغة التي حددتها في زيارت
**ضع في اعتبارك أن ملف تعريف الارتباط الذي تم تعيينه بواسطة نطاق معين لا يمكن قراءته إلا من خلال ذلك النطاق والنطاقات الفرعية فقط.**
`// Using vanilla javascript
document.cookie = 'userLanguage=french; expires=Sun, 2 Dec 2017 23:56:11 UTC; path=/';
```javascript
// 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 أيام_
### احصل على ملفات تعريف الارتباط
`// Using vanilla javascript
console.log(document.cookie)
```javascript
// 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
document.cookie = 'userLanguage; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
```javascript
// 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) وحفظ وقتًا كبيرًا من الوقت._

View File

@ -10,30 +10,34 @@ localeTitle: أعداد
وأعرب عدد الحرفية عموما `base-10` حرفية عشري.
`var foo = 47;
var bar = 47.9;
`
```javascript
var foo = 47;
var bar = 47.9;
```
الجزء الرئيسي من القيمة العشرية ، إذا كان `0` ، هو اختياري:
`var same = 0.47;
var stillSame = .47;
`
```javascript
var same = 0.47;
var stillSame = .47;
```
وبالمثل ، فإن الجزء زائدة (الجزئي) من قيمة عشرية بعد `.` ، إذا كان `0` ، هو اختياري:
`var a = 47.0;
var b = 47.;
`
```javascript
var a = 47.0;
var b = 47.;
```
بشكل افتراضي ، سيتم إخراج معظم الأرقام في شكل `base-10` decimals ، مع إزالة الكسر `0` ثانية. وبالتالي:
`var foo = 47.300;
var bar = 47.0;
```javascript
var foo = 47.300;
var bar = 47.0;
foo; // 47.3
bar; // 47
`
foo; // 47.3
bar; // 47
```
يمكن كتابة `numbers` كبيرة جدًا أو صغيرة جدًا على النحو التالي:
@ -43,20 +47,22 @@ localeTitle: أعداد
يمكن استخدام طريقة `toExponential` لتحويل `number` إلى `exponential notation` .
`var foo = 47e8;
foo; // 4700000000
foo.toExponential() //"47e8"
`
```javascript
var foo = 47e8;
foo; // 4700000000
foo.toExponential() //"47e8"
```
لدى الأرقام الوصول إلى الأساليب المضمنة في `Number.prototype` .
فمثلا: `toFixed()` طريقة `toFixed()` رقمًا مع عدد محدد من الأرقام إلى يمين `toFixed()` العشرية.
`var foo = 47.69;
foo.toFixed(0); // "48"
foo.toFixed(1); // "47.7"
foo.toFixed(2); // "47.69"
`
```javascript
var foo = 47.69;
foo.toFixed(0); // "48"
foo.toFixed(1); // "47.7"
foo.toFixed(2); // "47.69"
```
> اكتب `Number.prototype` في متصفحك `Number.prototype` الطرق الأخرى المتاحة بنفسك.

View File

@ -2,7 +2,8 @@
title: Functional
localeTitle: وظيفي
---
`var fun = function(a, b) {
```javascript
var fun = function(a, b) {
var funInstance = {};
funInstance.a = a;
funInstance.b = b;
@ -16,10 +17,10 @@ localeTitle: وظيفي
// method code here
}
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 fun = function(a, b) {
var funInstance = {};
funInstance.a = a;
funInstance.b = b;
extend(funInstance, funMethods);
return funInstance;
}
var extend = function(to, from) {
}
var extend = function(to, from) {
for (var key in from) {
to[key] = from[key];
}
}
var funMethods = {};
funMethods.method1 = function() {
}
var funMethods = {};
funMethods.method1 = function() {
// method code here
}
funMethods.method2 = function() {
}
funMethods.method2 = function() {
// method code here
}
funMethods.method3 = function() {
}
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
`var fun = function(a, b) {
```javascript
var fun = function(a, b) {
var funInstance = Object.create(funMethods);
funInstance.a = a;
funInstance.b = b;
return funInstance;
}
var funMethods = {};
funMethods.method1 = function() {
}
var funMethods = {};
funMethods.method1 = function() {
// method code here
}
funMethods.method2 = function() {
}
funMethods.method2 = function() {
// method code here
}
funMethods.method3 = function() {
}
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
`var Fun = function(a, b) {
```javascript
var Fun = function(a, b) {
// this = Object.create(Fun.prototype);
this.a = a;
this.b = b;
// return this;
}
Fun.prototype.method1 = function() {
}
Fun.prototype.method1 = function() {
// method code here
}
Fun.prototype.method2 = function() {
}
Fun.prototype.method2 = function() {
// method code here
}
Fun.prototype.method3 = function() {
}
Fun.prototype.method3 = function() {
// method code here
}
var myFun = new Fun(1, 2);
myFun.method1();
`
}
var myFun = new Fun(1, 2);
myFun.method1();
```
## كيف يمكنني التعرف عليه؟

View File

@ -10,56 +10,62 @@ localeTitle: Instantization كائن
يمكنك إنشاء كائن بخصائص محددة مسبقًا مثل:
`let myObject = {
```javascript
let myObject = {
name: "Dave",
age: 33
}
`
}
```
### خلق كائن فارغ
يؤدي هذا إلى إنشاء كائن فارغ داخل متغير myObject الخاص بنا:
`let myObject = new Object();
`
```javascript
let myObject = new Object();
```
عندما ترغب في إضافة خصائص إلى الكائن الخاص بك ، يمكنك ببساطة استخدام إما تدوين نقطي أو تدوين قوس مع اسم الخاصية الذي تختاره:
`myObject.name = "Johnny Mnemonic"
myObject["age"] = 55
`
```javascript
myObject.name = "Johnny Mnemonic"
myObject["age"] = 55
```
### باستخدام وظيفة منشئ
يمكنك تعريف دالة منشئ يمكنك استخدامها لإنشاء الكائنات الخاصة بك:
`function Kitten(name, cute, color) {
```javascript
function Kitten(name, cute, color) {
this.name = name,
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 () (المحدد أولاً في ECMAScript 5.1) إنشاء كائنات. يسمح لك باختيار كائن النموذج الأصلي للكائن الجديد دون الحاجة إلى تعريف دالة منشئ مسبقًا.
`// Our pre-defined object
let kitten = {
```javascript
// Our pre-defined object
let kitten = {
name: "Fluff",
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"
```
#### معلومات اكثر

View File

@ -8,14 +8,15 @@ localeTitle: حدث Onclick
### مثال
`<button onclick="myFunction()">Click me</button>
```javascript
<button onclick="myFunction()">Click me</button>
<script>
<script>
function myFunction() {
alert('Button was clicked!');
}
</script>
`
</script>
```
في المثال البسيط أعلاه ، عندما ينقر المستخدم على الزر ، سيرى تنبيهًا في المتصفح يعرض `Button was clicked!` .
@ -45,15 +46,16 @@ localeTitle: حدث Onclick
ولكن إذا كان لنا أن نعلق `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>
<script>
function myAlert(event) {
event.preventDefault();
alert("Link was clicked but page was not open");
}
</script>
`
</script>
```
في المثال أعلاه يمكننا منع السلوك الافتراضي `a` عنصر (وصلة فتح) باستخدام `event.preventDefault()` داخل لدينا `onclick` ظيفة رد.

View File

@ -8,14 +8,15 @@ localeTitle: حدث Onload
### مثال:
`<body onload="myFunction()">
```javascript
<body onload="myFunction()">
<script>
<script>
function myFunction() {
alert('Page finished loading');
}
</script>
`
</script>
```
في المثال أعلاه ، بمجرد تحميل صفحة الويب ، سيتم استدعاء وظيفة `myFunction` ، مما يعرض تنبيه `Page finished loading` المنتهي إلى المستخدم.

View File

@ -10,24 +10,26 @@ localeTitle: انتاج |
إنها الطريقة الأكثر شيوعًا واستخدامًا لإخراج البيانات. من الشائع أن يتم إدخال زوجين من هذه العبارات بين العبارات لتوضيح كيفية تدفق البيانات ومعالجتها. أيضا ، يمكنك استخدام `debugger` أو نقاط التوقف في devtools أن تفعل الشيء نفسه دون تلويث التعليمات البرمجية الخاصة بك.
`var numbers = [ 1, 2, 3, 4, 5, 6, 7];
numbers.forEach(function(number){
```javascript
var numbers = [ 1, 2, 3, 4, 5, 6, 7];
numbers.forEach(function(number){
console.log(number + ' is divisible by 2', number%2 == 0);
});
`
});
```
#### `console.warn`
كما خمنت بالاسم ، يُستخدم هذا لعرض التحذيرات ، ويميزها اللون الأصفر النموذجي عن الخطأ الأحمر & `console.log` .
`function isAdult(age){
```javascript
function isAdult(age){
if(Number(age) < 18){
console.warn('You are not an adult');
return false;
}
return true;
}
`
}
```
#### `console.error`
@ -39,7 +41,8 @@ localeTitle: انتاج |
اول تشغيل التعليمة البرمجية أدناه في وحدة التحكم الخاصة بك_
`var data = {
```javascript
var data = {
"colors": [
{
"color": "black",
@ -84,10 +87,10 @@ _حاول تشغيل التعليمة البرمجية أدناه في وحدة
},
]
}
}
console.table(data.colors);
`
console.table(data.colors);
```
يمكنك أيضًا التحكم في نوع المخرجات الذي تريد رؤيته في وحدة التحكم.

View File

@ -26,13 +26,14 @@ localeTitle: مربعات منبثقة
### مثال:
`var result = window.confirm('Are you sure?');
if (result === true) {
```javascript
var result = window.confirm('Are you sure?');
if (result === true) {
window.alert('Okay, if you're sure.');
} else {
} else {
window.alert('You seem uncertain.');
}
`
}
```
![MDN Confirm Example](https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png)
@ -50,13 +51,15 @@ localeTitle: مربعات منبثقة
إذا كنت غير راضٍ عن النوافذ المنبثقة 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("Oops!", "Something went wrong on the page!", "error");
`
```javascript
swal("Oops!", "Something went wrong on the page!", "error");
```
سيعمل الكود أعلاه على إنتاج النافذة المنبثقة التالية: ![SweetAlert مثال](https://ludu-assets.s3.amazonaws.com/lesson-content/rWqOoQXgDrSVSMrAKiZ9) SweetAlert ليست بأي حال المعادل الوحيد للوحدات القياسية ، ولكنها نظيفة وسهلة التنفيذ.

View File

@ -6,7 +6,8 @@ localeTitle: وعود
جافا سكريبت واحد مترابطة ، مما يعني أنه لا يمكن تشغيل نصين من النص البرمجي في نفس الوقت ؛ لديهم لتشغيل واحد تلو الآخر. الوعد هو كائن يمثل الانتهاء النهائي (أو الفشل) لعملية غير متزامنة ، والقيمة الناتجة عنها.
`var promise = new Promise(function(resolve, reject) {
```javascript
var promise = new Promise(function(resolve, reject) {
// do thing, then…
if (/* everything worked */) {
@ -15,8 +16,8 @@ localeTitle: وعود
else {
reject(Error("It broke"));
}
});
`
});
```
## الوعد موجود في واحدة من هذه الحالات
@ -30,7 +31,8 @@ localeTitle: وعود
لاتخاذ العديد من المكالمات غير المتزامنة ومزامنتها واحدة تلو الأخرى ، يمكنك استخدام تسلسل الوعد. يسمح هذا باستخدام قيمة من الوعد الأول في عمليات الاسترجاع اللاحقة لاحقًا.
`Promise.resolve('some')
```javascript
Promise.resolve('some')
.then(function(string) { // <-- This will happen after the above Promise resolves (returning the value 'some')
return new Promise(function(resolve, reject) {
setTimeout(function() {
@ -42,7 +44,7 @@ localeTitle: وعود
.then(function(string) { // <-- This will happen after the above .then's new Promise resolves
console.log(string); // <-- Logs 'something' to the console
});
`
```
## Promise API
@ -113,37 +115,40 @@ localeTitle: وعود
في الإصدارات الحديثة ، قدمت JavaScript المزيد من الطرق للتعامل مع Promises. أحد هذه الطرق هو مولد الدالة. مولدات الدالة هي دالات "يمكن إيقافها". عند استخدامها مع Promises ، يمكن للمولدات أن تجعل عملية القراءة أكثر سهولة وأن تظهر "متزامنة".
`const myFirstGenerator = function* () {
```javascript
const myFirstGenerator = function* () {
const one = yield 1;
const two = yield 2;
const three = yield 3;
return 'Finished!';
}
}
const gen = myFirstGenerator();
`
const gen = myFirstGenerator();
```
ها هو أول مولد لدينا ، والذي يمكنك رؤيته بواسطة بناء الجملة `function*` . و `gen` متغير أعلنا لن يتم تشغيل `myFirstGenerator` ، ولكن بدلا من ذلك سوف "هذه المولدات جاهزة للاستخدام".
`console.log(gen.next());
// Returns { value: 1, done: false }
`
```javascript
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` .
`console.log(gen.next());
// Returns { value: 2, done: false }
```javascript
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()` مرة أخرى ، فسوف ترمي خطأ عندما ينتهي المولد.
@ -153,15 +158,16 @@ localeTitle: وعود
ترجع طريقة Promise.all (iterable) وعدًا واحدًا يحل عندما يتم حل جميع الوعود في الوسيطة المتقابلة أو عندما لا تحتوي الوسيطة القابلة للتكرار على أي وعود. إنها ترفض سبب الوعد الأول الذي يرفض.
`var promise1 = Promise.resolve(catSource);
var promise2 = Promise.resolve(dogSource);
var promise3 = Promise.resolve(cowSource);
```javascript
var promise1 = Promise.resolve(catSource);
var promise2 = Promise.resolve(dogSource);
var promise3 = Promise.resolve(cowSource);
Promise.all([promise1, promise2, promise3]).then(function(values) {
Promise.all([promise1, promise2, promise3]).then(function(values) {
console.log(values);
});
// expected output: Array ["catData", "dogData", "cowData"]
`
});
// expected output: Array ["catData", "dogData", "cowData"]
```
### معلومات اكثر

View File

@ -10,24 +10,26 @@ localeTitle: نماذج
من أجل الوضوح ، دعنا نفحص المثال التالي:
`function Point2D(x, y) {
```javascript
function Point2D(x, 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.prototype.move = function(dx, dy) {
```javascript
Point2D.prototype.move = function(dx, dy) {
this.x += dx;
this.y += dy;
}
}
var p1 = new Point2D(1, 2);
p1.move(3, 4);
console.log(p1.x); // 4
console.log(p1.y); // 6
`
var p1 = new Point2D(1, 2);
p1.move(3, 4);
console.log(p1.x); // 4
console.log(p1.y); // 6
```
يسمى `Point2D.prototype` **كائن prototype** أو **prototype** من كائن `p1` وعن أي كائن آخر تم إنشاؤه باستخدام بناء جملة `new Point2D(...)` . يمكنك إضافة المزيد من الخصائص إلى كائن `Point2D.prototype` كما تريد. النمط المشترك هو إعلان الطرق إلى `Point2D.prototype` وسيتم الإعلان عن خصائص أخرى في وظيفة منشئ.
@ -43,18 +45,19 @@ localeTitle: نماذج
آلية سلسلة النموذج بسيطة: عند الوصول إلى خاصية `p` على كائن `obj` ، سيقوم محرك JavaScript بالبحث في هذه الخاصية داخل كائن `obj` . إذا فشل المحرك في البحث ، فإنه يستمر في البحث في نموذج كائن `obj` وهكذا حتى يصل إلى `Object.prototype` . إذا انتهى البحث ، ولم يتم العثور على أي شيء ، فإن النتيجة ستكون `undefined` . فمثلا:
`var obj1 = {
```javascript
var obj1 = {
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.c); // undefined
`
console.log(obj2.a); // 2
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` .
@ -62,7 +65,8 @@ localeTitle: نماذج
في ES2016 ، أصبحنا الآن نستخدم الكلمة الرئيسية `Class` وكذلك الأساليب المذكورة أعلاه للتلاعب في `prototype` . تروق `Class` جافا سكريبت للمطورين من خلفيات OOP ، ولكنها في الأساس تقوم بنفس الشيء على النحو الوارد أعلاه.
`class Rectangle {
```javascript
class Rectangle {
constructor(height, width) {
this.height = height
this.width = width
@ -75,24 +79,25 @@ localeTitle: نماذج
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
function Rectangle(height, width) {
this.height = height
this.width = width
}
}
Rectangle.prototype.calcArea = function calcArea() {
Rectangle.prototype.calcArea = function calcArea() {
return this.height * this.width
}
`
}
```
و `getter` و `setter` الأساليب في الطبقات ربط خاصية كائن إلى وظيفة التي سيتم استدعاؤها عند بدا أن الممتلكات تصل. إنه مجرد سكر نحوي للمساعدة في تسهيل _البحث عن_ الخصائص أو _ضبطها_ .

View File

@ -10,15 +10,16 @@ localeTitle: طريقة عشوائية
سيقوم الأسلوب `Math.random()` بإرجاع رقم عشري (عشري) أكبر من أو يساوي 0 وأقل من (ولكن لا يساوي مطلقًا) 1. وبعبارة أخرى `0 <= x < 1` . فمثلا:
`console.log(Math.random());
// 0.7069207248635578
```JavaScript
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 ، فيمكنك استخدام:
`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;
var max = 193.36;
```JavaScript
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
@ -55,11 +58,12 @@ localeTitle: طريقة عشوائية
على سبيل المثال ، إذا كنت تريد التحديد عشوائياً من مصفوفة من 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 أو أقل.)
@ -67,32 +71,35 @@ localeTitle: طريقة عشوائية
إذا كنت بحاجة إلى رقم عشوائي مع الحد الأدنى لعدد 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 إليها:
`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;
var max = 3429;
```JavaScript
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 ()؟

View File

@ -40,9 +40,10 @@ localeTitle: مرجع التعبيرات العادية
التعبير العادي هو نوع من الكائنات. يمكن بناؤها إما مع منشئ RegExp أو مكتوبة كقيمة حرفية من خلال إحاطة نمط في مائلة (/) حرفا.
`var re1 = new RegExp (" abc ") ;
var re2 = / abc /;
`
```
var re1 = new RegExp (" abc ") ;
var re2 = / abc /;
```
تمثل كل من كائنات التعبير العادية نفس النمط: حرف متبوعًا بـ ab متبوعًا بـ c.
@ -52,28 +53,31 @@ localeTitle: مرجع التعبيرات العادية
### اختبار للمباريات
`console . log (/ abc /. test (" abcde ") );
// → true
console . log (/ abc /. test (" abxde ") );
// → false
`
```
console . log (/ abc /. test (" abcde ") );
// → true
console . log (/ abc /. test (" abxde ") );
// → false
```
### مطابقة مجموعة من الشخصيات
`console . log (/[0123456789]/. test (" in 1992") );
// → true
console . log (/[0 -9]/. test (" in 1992") );
// → true
`
```
console . log (/[0123456789]/. test (" in 1992") );
// → true
console . log (/[0 -9]/. test (" in 1992") );
// → true
```
### أنماط الاختيار
`var animalCount = /\ b \ d + ( pig | cow | chicken )s ?\ b /;
console . log ( animalCount . test ("15 pigs ") );
// → true
console . log ( animalCount . test ("15 pigchickens ") );
// → false
`
```
var animalCount = /\ b \ d + ( pig | cow | chicken )s ?\ b /;
console . log ( animalCount . test ("15 pigs ") );
// → true
console . log ( animalCount . test ("15 pigchickens ") );
// → false
```
#### أساليب
@ -83,11 +87,12 @@ localeTitle: مرجع التعبيرات العادية
يمكن أن تكون الوسيطة الأولى أيضًا تعبيرًا عاديًا ، وفي هذه الحالة يتم استبدال المطابقة الأولى للتعبير العادي. عند إضافة خيار ag (للعامة) إلى التعبير العادي ، سيتم استبدال كل التطابقات في السلسلة ، وليس فقط الأول.
`console . log (" Borobudur ". replace (/[ ou ]/ , "a ") );
// → Barobudur
console . log (" Borobudur ". replace (/[ ou ]/g , "a ") );
// → Barabadar
`
```
console . log (" Borobudur ". replace (/[ ou ]/ , "a ") );
// → Barobudur
console . log (" Borobudur ". replace (/[ ou ]/g , "a ") );
// → Barabadar
```
### معلومات اكثر:

View File

@ -10,21 +10,23 @@ localeTitle: معايير الراحة
### بناء الجملة
`function myFunc(...args) {
```js
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
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 ]
```
يتيح لك `...` جمع ما تبقى من الوسيطات ، إن وجدت ، في مصفوفة.

View File

@ -16,20 +16,21 @@ localeTitle: بيان العودة
عدم إرجاع أي شيء على سطر جديد بدون استخدام الأقواس. هذا هو quirk JavaScript وستكون النتيجة غير محددة. حاول دائمًا استخدام الأقواس عند إرجاع شيء ما على أسطر متعددة.
`function foo() {
```javascript
function foo() {
return
1;
}
}
function boo() {
function boo() {
return (
1
);
}
}
foo(); --> undefined
boo(); --> 1
`
foo(); --> undefined
boo(); --> 1
```
## أمثلة

View File

@ -8,10 +8,11 @@ localeTitle: منقوطة
هناك حالة واحدة فقط حيث يفشل ASI: عندما يبدأ سطر مع قوس فتح `(` . لتجنب هذا يسبب أخطاء ، عندما يبدأ سطر مع قوس فتح ، يمكنك وضع فاصلة منقوطة في بداية السطر الذي يحتوي على قوس فتح :
`;(function() {
```js
;(function() {
console.log('Hi!')
})
`
})
```
لاحظ أن هذا مطلوب فقط إذا كنت لا تستخدم الفواصل المنقوطة.

View File

@ -37,14 +37,15 @@ localeTitle: خلق سينجلتون في جافا سكريبت
الآن لتنفيذ أو استخدام المفرد الخاص بك. في المتصفح بعد حفظ هذا الملف 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".
```
الآن مع هذه المعرفة يمكنك تحديد الثوابت ، التعدادات أو أي شيء يحتاج إلى استخدام متعددة في مشروع مكتوب هنا. أو شيء من هذا القبيل التكوينات.

View File

@ -10,13 +10,15 @@ localeTitle: بناء الجملة
لمكالمات الوظائف:
`myFunction(...iterableObj);
`
```
myFunction(...iterableObj);
```
بالنسبة للمعايير الحرفية أو الأوتار:
`[...iterableObj, '4', 'five', 6];
`
```
[...iterableObj, '4', 'five', 6];
```
### أمثلة
@ -26,36 +28,41 @@ localeTitle: بناء الجملة
من الشائع استخدام `Function.prototype.apply` في الحالات التي تريد فيها استخدام عناصر مصفوفة كوسيطة للدالة.
`function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);
`
```
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);
```
مع صيغة الانتشار يمكن كتابة ما سبق على النحو التالي:
`function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
`
```
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
```
يمكن لأي وسيطة في قائمة الوسيطة استخدام صيغة الانتشار ويمكن استخدامها عدة مرات.
`function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);
`
```
function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);
```
### تقديم طلب جديد
عند استدعاء منشئ مع `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 applyAndNew(constructor, args) {
function partial () {
return constructor.apply(this, args);
};
@ -63,24 +70,24 @@ localeTitle: بناء الجملة
partial.prototype = Object.create(constructor.prototype);
}
return partial;
}
}
function myConstructor () {
function myConstructor () {
console.log("arguments.length: " + arguments.length);
console.log(arguments);
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
// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null]
// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}
`
console.log(new myConstructorWithArguments);
// (internal log of myConstructor): arguments.length: 6
// (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'];
// ["head", "shoulders", "knees", "and", "toes"]
`
```
var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]
```
تماما مثل انتشار لقوائم الحجج ، `...` يمكن استخدامها في أي مكان في الصفيف الحرفية ويمكن استخدامه عدة مرات.
### انسخ صفيف
`var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4);
```
var arr = [1, 2, 3];
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).
`var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// Now array a is affected as well: [[], [2], [3]]
`
```
var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// Now array a is affected as well: [[], [2], [3]]
```
### طريقة أفضل لسلسل صفائف
`Array.concat` غالباً لسَلسَلة صفيف إلى نهاية صفيف موجود. بدون صيغة الانتشار يتم ذلك على النحو التالي:
`var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Append all items from arr2 onto arr1
arr1 = arr1.concat(arr2);
`
```
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Append all items from arr2 onto arr1
arr1 = arr1.concat(arr2);
```
مع صيغة الانتشار يصبح هذا:
`var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
`
```
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
```
غالباً ما يتم استخدام `Array.unshift` لإدراج صفيف من القيم في بداية صفيف موجود. بدون صيغة الانتشار يتم ذلك على النحو التالي:
`var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 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];
// 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];
arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2]
`
```
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2]
```

View File

@ -10,34 +10,37 @@ localeTitle: Dray
### الواجب الأساسي المتغير
`var names = ['neel', 'meet', 'darshan'];
var [nameOne, nameTwo, nameThree] = names;
console.log(nameOne); // "neel"
console.log(nameTwo); // "meet"
console.log(nameThree); // "darshan"
`
```
var names = ['neel', 'meet', 'darshan'];
var [nameOne, nameTwo, nameThree] = names;
console.log(nameOne); // "neel"
console.log(nameTwo); // "meet"
console.log(nameThree); // "darshan"
```
### مهمة منفصلة عن الإعلان
يمكن تعيين متغير قيمته من خلال التدمير المنفصل عن تعريف المتغير.
`var a, b;
```
var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
`
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
```
### قيم افتراضية
يمكن تعيين متغير افتراضي ، في حالة أن القيمة unpacked من الصفيف غير `undefined` .
`var a, b;
```
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
`
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
```
### تحليل مجموعة من عاد من وظيفة
@ -45,47 +48,52 @@ localeTitle: Dray
في هذا المثال ، تقوم `getNames()` بارجاع القيم `['neel', 'meet']` `getNames()` لها ، والتي يمكن تحليلها في سطر واحد مع destructuring.
`function getNames() {
```
function getNames() {
return ['neel', 'meet'];
}
}
var neel, meet;
[nameOne, nameTwo] = getNames();
console.log(nameOne); // neel
console.log(nameTwo); // meet
`
var neel, meet;
[nameOne, nameTwo] = getNames();
console.log(nameOne); // neel
console.log(nameTwo); // meet
```
### تجاهل بعض القيم التي تم إرجاعها
يمكنك تجاهل قيم الإرجاع التي لا تهتم بها:
`function getNames() {
```
function getNames() {
return ['neel', 'meet', 'darshan'];
}
}
var [nameOne, , nameThree] = getNames();
console.log(nameOne); // neel
console.log(nameThree); // darshan
`
var [nameOne, , nameThree] = getNames();
console.log(nameOne); // neel
console.log(nameThree); // darshan
```
يمكنك أيضًا تجاهل جميع القيم التي تم إرجاعها:
`[,,] = getNames();
`
```
[,,] = getNames();
```
### تعيين بقية صفيف إلى متغير
عند تدمير صفيف ، يمكنك فك وتعيين الجزء المتبقي منه إلى متغير باستخدام نمط الباقي:
`var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
`
```
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
```
لاحظ أنه سيتم طرح `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)

View File

@ -8,16 +8,18 @@ localeTitle: طول صفيف
يمكن إرجاع خاصية `length` صفيف مثل هكذا.
`let desserts = ["Cake", "Pie", "Brownies"];
console.log(desserts.length); // 3
`
```js
let desserts = ["Cake", "Pie", "Brownies"];
console.log(desserts.length); // 3
```
يمكن استخدام عامل التعيين ، بالتزامن مع خاصية `length` ، لضبط عدد العناصر في صفيف مثل ذلك.
`let cars = ["Saab", "BMW", "Volvo"];
cars.length = 2;
console.log(cars.length); // 2
`
```js
let cars = ["Saab", "BMW", "Volvo"];
cars.length = 2;
console.log(cars.length); // 2
```
#### معلومات اكثر:

View File

@ -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
Array.of(1, 2, 3); // [1, 2, 3]
```javascript
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]
```
#### معلومات اكثر:

View File

@ -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'];
var warm = ['Red', 'Orange', 'Yellow'];
```javascript
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];
const even = [0, 2, 4, 6, 8];
```javascript
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];
```
#### معلومات اكثر:

View File

@ -10,12 +10,13 @@ localeTitle: Array.prototype.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\]

View File

@ -12,25 +12,26 @@ localeTitle: Array.prototype.filter
في هذه الحالة ، نريد الحصول على جميع الطلاب الذين تزيد درجاتهم عن 90 أو تساويها.
`var students = [
```javascript
var students = [
{ name: 'Quincy', grade: 96 },
{ name: 'Jason', grade: 84 },
{ name: 'Alexis', grade: 100 },
{ name: 'Sam', grade: 65 },
{ name: 'Katie', grade: 90 }
];
//Define an array to push student objects to.
var studentsGrades = []
for (var i = 0; i < students.length; i++) {
];
//Define an array to push student objects to.
var studentsGrades = []
for (var i = 0; i < students.length; i++) {
//Check if grade is greater than 90
if (students[i].grade >= 90) {
//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
var students = [
{ name: 'Quincy', grade: 96 },
{ name: 'Jason', grade: 84 },
{ name: 'Alexis', grade: 100 },
{ name: 'Sam', grade: 65 },
{ name: 'Katie', grade: 90 }
];
];
var studentGrades = students.filter(function (student) {
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.
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 مع الفلتر:
`var students = [
```javascript
var students = [
{ name: 'Quincy', grade: 96 },
{ name: 'Jason', grade: 84 },
{ name: 'Alexis', grade: 100 },
{ 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 } ]
```
الفلتر مفيد جدًا وخيارًا رائعًا للصفحات لتصفية المصفوفات مقابل العبارات الشرطية.

View File

@ -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
let items = [
{name: 'books', quantity: 2},
{name: 'movies', quantity: 1},
{name: 'games', quantity: 5}
];
];
function findMovies(item) {
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` نظرًا لأن أيًا من العناصر لن يعود صحيحًا من وظيفة رد الاتصال.
`function showInfo(element, index, array) {
```javascript
function showInfo(element, index, array) {
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
// element = 6, index = 1, array = 4,6,8,12
// element = 8, index = 2, array = 4,6,8,12
// element = 12, index = 3, array = 4,6,8,12
// return = undefined
`
// Output
// element = 4, index = 0, array = 4,6,8,12
// element = 6, index = 1, array = 4,6,8,12
// element = 8, index = 2, array = 4,6,8,12
// element = 12, index = 3, array = 4,6,8,12
// return = undefined
```

View File

@ -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
let items = [
{name: 'books', quantity: 2},
{name: 'movies', quantity: 1},
{name: 'games', quantity: 5}
];
];
function findMovies(item) {
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 من وظيفة رد الاتصال.
`function showInfo(element, index, array) {
```javascript
function showInfo(element, index, array) {
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
// element = 6, index = 1, array = 4,6,8,12
// element = 8, index = 2, array = 4,6,8,12
// element = 12, index = 3, array = 4,6,8,12
// return = -1
`
// Output
// element = 4, index = 0, array = 4,6,8,12
// element = 6, index = 1, array = 4,6,8,12
// element = 8, index = 2, array = 4,6,8,12
// element = 12, index = 3, array = 4,6,8,12
// return = -1
```

View File

@ -6,16 +6,17 @@ localeTitle: Array.prototype.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
// 6
// 8
// 10
`
// 2
// 4
// 6
// 8
// 10
```
يمكن أن تأخذ وظيفة رد الاتصال أيضًا معلمة ثانية للفهرس في حال كنت بحاجة إلى الرجوع إلى فهرس العنصر الحالي في الصفيف.

View File

@ -13,10 +13,11 @@ localeTitle: Array.prototype.includes
### مثال
`const a = [1, 2, 3];
a.includes(2); // true
a.includes(4); // false
`
```js
const a = [1, 2, 3];
a.includes(2); // true
a.includes(4); // false
```
#### معلومات اكثر:

View File

@ -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(6); // -1
array.indexOf('1'); // -1
array.indexOf('hello'); // -1
array.indexOf(1, 2); // 3
array.indexOf(1, -3); // 3
`
array.indexOf(1); // 0
array.indexOf(7); // 4
array.indexOf(6); // -1
array.indexOf('1'); // -1
array.indexOf('hello'); // -1
array.indexOf(1, 2); // 3
array.indexOf(1, -3); // 3
```
### معلومات اكثر:

View File

@ -10,18 +10,20 @@ localeTitle: Array.prototype.map
**ES5**
`var arr = [1, 2, 3, 4];
var newArray = arr.map(function(element) { return element * 2});
console.log(newArray); // [2, 4, 6, 8]
`
```js
var arr = [1, 2, 3, 4];
var newArray = arr.map(function(element) { return element * 2});
console.log(newArray); // [2, 4, 6, 8]
```
**ES6**
`const arr = [1, 2, 3, 4];
const newArray = arr.map(element => element * 2);
console.log(newArray);
//[2, 4, 6, 8]
`
```js
const arr = [1, 2, 3, 4];
const newArray = arr.map(element => element * 2);
console.log(newArray);
//[2, 4, 6, 8]
```
**معلومات اكثر**

View File

@ -23,12 +23,13 @@ localeTitle: Array.prototype.pop
## أمثلة
`let array = [1, 2, 3, 4];
array.pop(); // removes 4
console.log(array); // [1, 2, 3]
```js
let array = [1, 2, 3, 4];
array.pop(); // removes 4
console.log(array); // [1, 2, 3]
[].pop() // undefined
`
[].pop() // undefined
```
#### معلومات اكثر:

View File

@ -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'` إلى الصفيف في الفهرس بعد الفهرس الأخير مثل:
`myStarkFamily[4] = 'Arya';
`
```javascript
myStarkFamily[4] = 'Arya';
```
المشكلة مع هذا الحل هو أنه لا يمكن معالجة الحالات العامة. إذا كنت لا تعرف مسبقا ما طول الصفيف ، لا يمكنك إضافة عناصر جديدة بهذه الطريقة. هذا هو ما `push()` ل. لا نحتاج إلى معرفة طول المصفوفة. نحن نضيف فقط عنصرنا في نهاية الصفيف.
`myStarkFamily.push('Arya');
console.log(myStarkFamily); // ['John', 'Robb', 'Sansa', 'Bran', 'Arya']
```javascript
myStarkFamily.push('Arya');
console.log(myStarkFamily); // ['John', 'Robb', 'Sansa', 'Bran', 'Arya']
var newLength = myStarkFamily.push('Rickon'); // oops! forgot Rickon
console.log(newLength); // 6
console.log(myStarkFamily); // ['John', 'Robb', 'Sansa', 'Bran', 'Arya', 'Rickon']
`
var newLength = myStarkFamily.push('Rickon'); // oops! forgot Rickon
console.log(newLength); // 6
console.log(myStarkFamily); // ['John', 'Robb', 'Sansa', 'Bran', 'Arya', 'Rickon']
```
#### معلومات اكثر:

View File

@ -41,19 +41,20 @@ localeTitle: Array.prototype.reduce
قم بتحويل صفيف من السلاسل إلى كائن واحد يُظهر عدد المرات التي تظهر فيها كل سلسلة في الصفيف. لاحظ هذه المكالمة لتقليل التمريرات إلى كائن فارغ `{}` كمعلمة `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){
var petCounts = pets.reduce(function(obj, pet){
if (!obj[pet]) {
obj[pet] = 1;
} else {
obj[pet]++;
}
return obj;
}, {});
}, {});
console.log(petCounts);
`
console.log(petCounts);
```
انتاج: `js { dog: 2, chicken: 3, cat: 1, rabbit: 1 }`

View File

@ -10,19 +10,20 @@ localeTitle: Array.prototype.sort
مؤشر | الطابع --- | --- 33 |! 34 | " 35 | # 36 | $ 37 |٪
`var myArray = ['#', '!'];
var sortedArray = myArray.sort(); // ['!', '#'] because in the ASCII table "!" is before "#"
```js
var myArray = ['#', '!'];
var sortedArray = myArray.sort(); // ['!', '#'] because in the ASCII table "!" is before "#"
myArray = ['a', 'c', 'b'];
console.log(myArray.sort()); // ['a', 'b', 'c']
console.log(myArray) // ['a', 'b', 'c']
myArray = ['a', 'c', 'b'];
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
function compare(a, b){
if (a < b){return -1;}
if (a > b){return 1;}
if (a === b){return 0;}
}
}
var myArray = [1, 2, 23, 13];
console.log(myArray.sort()); // [ 1, 13, 2, 23 ]
console.log(myArray.sort(compare)); // [ 1, 2, 13, 23 ]
var myArray = [1, 2, 23, 13];
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
```
#### معلومات اكثر:

View File

@ -14,26 +14,29 @@ localeTitle: Array.prototype.splice
إذا تم تضمين معلمة واحدة فقط ، فسيقوم `splice(start)` بإزالة كل عناصر الصفيف من `start` إلى نهاية الصفيف.
`let exampleArray = ['first', 'second', 'third', 'fourth'];
exampleArray.splice(2);
// exampleArray is now ['first', 'second'];
`
```js
let exampleArray = ['first', 'second', 'third', 'fourth'];
exampleArray.splice(2);
// exampleArray is now ['first', 'second'];
```
إذا كانت `start` سلبية ، فسيتم حسابها إلى الخلف من نهاية الصفيف.
`let exampleArray = ['first', 'second', 'third', 'fourth'];
exampleArray.splice(-1);
// exampleArray is now ['first', 'second', 'third'];
`
```js
let exampleArray = ['first', 'second', 'third', 'fourth'];
exampleArray.splice(-1);
// exampleArray is now ['first', 'second', 'third'];
```
#### لصق (ابدأ ، deleteCount)
إذا تم تضمين معلمة ثانية `splice(start, deleteCount)` فسيؤدي `splice(start, deleteCount)` إلى إزالة عناصر `deleteCount` من الصفيف ، بدءًا من `start` .
`let exampleArray = ['first', 'second', 'third', 'fourth'];
exampleArray.splice(1, 2);
// exampleArray is now ['first', 'fourth'];
`
```js
let exampleArray = ['first', 'second', 'third', 'fourth'];
exampleArray.splice(1, 2);
// exampleArray is now ['first', 'fourth'];
```
#### لصق (ابدأ ، deleteCount ، newElement1 ، newElement2 ، ...)
@ -41,27 +44,30 @@ localeTitle: Array.prototype.splice
يمكن إضافة العناصر دون إزالة أي عناصر بتمرير `0` كمعامل ثان.
`let exampleArray = ['first', 'second', 'third', 'fourth'];
exampleArray.splice(1, 0, 'new 1', 'new 2');
// exampleArray is now ['first', 'new 1', 'new 2', 'second', 'third', 'fourth']
`
```js
let exampleArray = ['first', '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'];
exampleArray.splice(1, 2, 'new second', 'new third');
// exampleArray is now ['first', 'new second', 'new third', 'fourth']
`
```js
let exampleArray = ['first', 'second', 'third', 'fourth'];
exampleArray.splice(1, 2, 'new second', 'new third');
// exampleArray is now ['first', 'new second', 'new third', 'fourth']
```
### قيمة الإرجاع
بالإضافة إلى تغيير الصفيف الذي يتم استدعاؤه ، يقوم `splice()` أيضًا بإرجاع صفيف يحتوي على القيم التي تمت إزالتها. هذه طريقة لقطع صفيف إلى صفيفين مختلفين.
`let exampleArray = ['first', 'second', 'third', 'fourth'];
let newArray = exampleArray.splice(1, 2);
// exampleArray is now ['first', 'fourth']
// newArray is ['second', 'third']
`
```js
let exampleArray = ['first', 'second', 'third', 'fourth'];
let newArray = exampleArray.splice(1, 2);
// exampleArray is now ['first', 'fourth']
// newArray is ['second', 'third']
```
#### معلومات اكثر:

View File

@ -8,8 +8,9 @@ localeTitle: Array.prototype.toLocaleString
##### بناء الجملة:
`arr.toLocaleString();
`
```
arr.toLocaleString();
```
##### المعلمات
@ -22,25 +23,27 @@ localeTitle: Array.prototype.toLocaleString
## أمثلة
`var number = 12345;
var date = new Date();
var myArray = [number, date, 'foo'];
var myString = myArray.toLocaleString();
```javascript
var number = 12345;
var date = new Date();
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;
var date = new Date();
var myArray = [number, date, 'foo'];
var myJPString = myArray.toLocaleString('ja-JP');
```javascript
var number = 54321;
var date = new Date();
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'
```
### معلومات اكثر:

View File

@ -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) {
for (let friend of friends) {
console.log(friend)
}
}
// Rachel
// Monica
// Chandler
// Phoebe
// Joey
// Ross
`
// Rachel
// Monica
// Chandler
// Phoebe
// Joey
// Ross
```
#### معلومات اكثر:

View File

@ -8,14 +8,16 @@ localeTitle: التاريخ الآن
### بناء الجملة
`var timeInMs = Date.now();
`
```js
var timeInMs = Date.now();
```
### مثال
`Date.now();
// 1508783660969
`
```js
Date.now();
// 1508783660969
```
#### معلومات اكثر:

View File

@ -8,16 +8,18 @@ localeTitle: Date.prototype.getDate
### بناء الجملة
`dateObject.getDate()
`
```js
dateObject.getDate()
```
### مثال
`var Xmas95 = new Date('December 25, 1995 23:15:30');
var day = Xmas95.getDate();
```js
var Xmas95 = new Date('December 25, 1995 23:15:30');
var day = Xmas95.getDate();
console.log(day); // 25
`
console.log(day); // 25
```
#### معلومات اكثر:

View File

@ -8,16 +8,18 @@ localeTitle: Date.prototype.getFullYear
### بناء الجملة
`dateObj.getFullYear()
`
```javascript
dateObj.getFullYear()
```
### مثال
`var date = new Date();
// creates a new Date() object with current date and time.
date.getFullYear()
// 2018
`
```javascript
var date = new Date();
// creates a new Date() object with current date and time.
date.getFullYear()
// 2018
```
#### معلومات اكثر:

View File

@ -6,14 +6,15 @@ localeTitle: طول الوظيفة
تحمل الخاصية `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 التركيب
@ -21,17 +22,18 @@ ES2015 ، أو ES6 كما يطلق عليه عادة ، قدم المعلمات
إذا تم استخدام عامل التشغيل المتبقي أو المعلمات الافتراضية في تعريف الدالة ، فإن خاصية `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) .

View File

@ -12,29 +12,31 @@ localeTitle: Function.prototype.bind
يتم تكليفك بكتابة الكود لتحديث عدد الحضور عند وصولهم إلى المؤتمر. يمكنك إنشاء صفحة ويب بسيطة تحتوي على زر ، عند النقر فوق ذلك ، بزيادة `numOfAttendees` خاصية على كائن الاستجواب. يمكنك استخدام jQuery لإضافة معالج النقر إلى الزر الخاص بك ، ولكن بعد النقر فوق الزر ، لم يتغير كائن الإيداع. قد تبدو شفرتك شيئًا كهذا.
`var nodevember = {
```javascript
var nodevember = {
numOfAttendees: 0,
incrementNumOfAttendees: function() {
this.numOfAttendees++;
}
// other properties
};
};
$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees);
`
$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees);
```
هذه مشكلة شائعة عند العمل مع jQuery و JavaScript. عند النقر فوق زر `this` الكلمة في الطريقة التي تم تمريرها إلى ومسج `on` طريقة يرجع زر وليس الكائن المؤتمر. يمكنك ربط `this` السياق الخاص بك بالطريقة لحل المشكلة.
`var nodevember = {
```javascript
var nodevember = {
numOfAttendees: 0,
incrementNumOfAttendees: function() {
this.numOfAttendees++;
}
// other properties
};
};
$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees.bind(nodevember));
`
$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees.bind(nodevember));
```
الآن عند النقر فوق الزر يشير `this` إلى كائن `nodevember` .
@ -42,14 +44,15 @@ localeTitle: Function.prototype.bind
كل وسيطة تم تمريرها `bind` بعد الأول سوف تسبق أية وسائط يتم تمريرها عند استدعاء الوظيفة. هذا يسمح لك بتطبيق الحجج مسبقًا على إحدى الوظائف. في المثال أدناه ، تأخذ `combineStrings` معًا. `bind` ثم يتم استخدامها لإنشاء دالة التي توفر دائما "كول" كسلسلة الأولى.
`function combineStrings(str1, str2) {
```javascript
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` الكلمة الرئيسية.

View File

@ -33,20 +33,21 @@ localeTitle: JSON تحليل
هنا مثال مع `reviver` :
`var data = '{"value": 5}';
```javascript
var data = '{"value": 5}';
var result = JSON.parse(data, function(key, value) {
var result = JSON.parse(data, function(key, value) {
if (typeof value === 'number') {
return value * 10;
}
return value;
});
});
// Original Data
console.log("Original Data:", data); // This will print Original Data: {"value": 5}
// Result after parsing
console.log("Parsed Result: ", result); // This will print Parsed Result: { value: 50 }
`
// Original Data
console.log("Original Data:", data); // This will print Original Data: {"value": 5}
// 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)

View File

@ -21,8 +21,9 @@ localeTitle: JSON البناء
يتكون زوج الاسم / القيمة من اسم حقل (في علامات اقتباس مزدوجة) ، متبوعًا بنقطتين ، متبوعًا بقيمة:
`"handle":"moghya"
`
```
"handle":"moghya"
```
* تتطلب أسماء JSON علامات اقتباس مزدوجة.
@ -34,13 +35,15 @@ localeTitle: JSON البناء
* JSON
`"handle":"moghya"
`
```
"handle":"moghya"
```
* جافا سكريبت
`handle:"moghya"
`
```
handle:"moghya"
```
### قيم JSON
@ -65,29 +68,33 @@ localeTitle: JSON البناء
باستخدام JavaScript ، يمكنك إنشاء كائن وتعيين البيانات إليه ، على النحو التالي:
`var person = {
```
var person = {
"name":"Shubham",
"age":21,
"handle":"moghya",
"website":"http://moghya.me/"
};
`
```
يمكنك الوصول إلى كائن JavaScript مثل هذا:
`//returns moghya
person.handle;
`
```
//returns moghya
person.handle;
```
يمكن أيضًا الوصول إليه على النحو التالي:
`//returns http://moghya.me/
person["website"];
`
```
//returns http://moghya.me/
person["website"];
```
### المصفوفات في JSON
`var team = {
```
var team = {
"name":"novatoscript",
"members" :
[
@ -104,8 +111,8 @@ localeTitle: JSON البناء
"website":"http://banoresaurabh.me/",
}
]
}
`
}
```
### مثال

View File

@ -8,8 +8,9 @@ localeTitle: خريطة
## بناء الجملة
`new Map([iterable])
`
```javascript
new Map([iterable])
```
## المعلمات
@ -17,15 +18,16 @@ localeTitle: خريطة
## مثال
`// basic usage
const myMap = new Map();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);
```javascript
// basic usage
const myMap = new Map();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);
myMap.get('foo'); // returns 1
myMap.get('baz'); // returns 3
myMap.get('hihi'); // return undefined
myMap.get('foo'); // returns 1
myMap.get('baz'); // returns 3
myMap.get('hihi'); // return undefined
myMap.size(); // 3
`
myMap.size(); // 3
```

View File

@ -8,22 +8,24 @@ localeTitle: Map.prototype.clear
## بناء الجملة
`myMap.clear();
`
```javascript
myMap.clear();
```
## مثال
`const myMap = new Map();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);
```javascript
const myMap = new Map();
myMap.set('foo',1);
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
```

View File

@ -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();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);
```javascript
const myMap = new Map();
myMap.set('foo',1);
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.
```

View File

@ -8,20 +8,22 @@ localeTitle: Map.prototype.entries
## بناء الجملة
`myMap.entries()
`
```javascript
myMap.entries()
```
## مثال
`const myMap = new Map();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);
```javascript
const myMap = new Map();
myMap.set('foo',1);
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); // ['baz', 3]
`
console.log(iterator.next().value); // ['foo', 1]
console.log(iterator.next().value); // ['bar', 2]
console.log(iterator.next().value); // ['baz', 3]
```

View File

@ -8,8 +8,9 @@ localeTitle: Map.prototype.forEach
## بناء الجملة
`myMap.forEach(callback, thisArg)
`
```javascript
myMap.forEach(callback, thisArg)
```
## المعلمات

View File

@ -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();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);
```javascript
const myMap = new Map();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);
myMap.get('foo'); // returns 1
myMap.get('baz'); // returns 3
myMap.get('hihi'); // return undefined
`
myMap.get('foo'); // returns 1
myMap.get('baz'); // returns 3
myMap.get('hihi'); // return undefined
```

View File

@ -8,20 +8,22 @@ localeTitle: Map.prototype.keys
## بناء الجملة
`myMap.keys()
`
```javascript
myMap.keys()
```
## مثال
`const myMap = new Map();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);
```javascript
const myMap = new Map();
myMap.set('foo',1);
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); // 'baz'
`
console.log(iterator.next().value); // 'foo'
console.log(iterator.next().value); // 'bar'
console.log(iterator.next().value); // 'baz'
```

View File

@ -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);
myMap.set('bar',2);
myMap.set('baz',3);
// sets new elements
myMap.set('foo',1);
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
```