fix: converted single to triple backticks11 (#36238)
This commit is contained in:
@ -8,16 +8,18 @@ localeTitle: Map.prototype.size
|
||||
|
||||
## بناء الجملة
|
||||
|
||||
`myMap.size();
|
||||
`
|
||||
```javascript
|
||||
myMap.size();
|
||||
```
|
||||
|
||||
## مثال
|
||||
|
||||
`const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
|
||||
myMap.size(); // 3
|
||||
`
|
||||
```javascript
|
||||
const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
|
||||
myMap.size(); // 3
|
||||
```
|
@ -8,19 +8,21 @@ localeTitle: Map.prototype.values
|
||||
|
||||
## بناء الجملة
|
||||
|
||||
`myMap.values()
|
||||
`
|
||||
```javascript
|
||||
myMap.values()
|
||||
```
|
||||
|
||||
## مثال
|
||||
|
||||
`const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
|
||||
const iterator = myMap.values();
|
||||
console.log(iterator.next().value); // 1
|
||||
console.log(iterator.next().value); // 2
|
||||
console.log(iterator.next().value); // 3
|
||||
`
|
||||
```javascript
|
||||
const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
|
||||
const iterator = myMap.values();
|
||||
console.log(iterator.next().value); // 1
|
||||
console.log(iterator.next().value); // 2
|
||||
console.log(iterator.next().value); // 3
|
||||
```
|
@ -10,11 +10,12 @@ localeTitle: الرياضيات
|
||||
|
||||
يوضح المثال التالي كيفية استخدام كائن `Math` لكتابة دالة تقوم بحساب مساحة دائرة:
|
||||
|
||||
`function calculateCircleArea(radius) {
|
||||
return Math.PI * Math.pow(radius, 2);
|
||||
}
|
||||
calculateCircleArea(1); // 3.141592653589793
|
||||
`
|
||||
```javascript
|
||||
function calculateCircleArea(radius) {
|
||||
return Math.PI * Math.pow(radius, 2);
|
||||
}
|
||||
calculateCircleArea(1); // 3.141592653589793
|
||||
```
|
||||
|
||||
### موارد آخرى
|
||||
|
||||
|
@ -8,11 +8,12 @@ localeTitle: الرياضيات Ceil
|
||||
|
||||
### أمثلة
|
||||
|
||||
`Math.ceil(0.1) // 1
|
||||
Math.ceil(1.3) // 2
|
||||
Math.ceil(-0.9) // -0
|
||||
Math.ceil(-1.5) // -1
|
||||
`
|
||||
```javascript
|
||||
Math.ceil(0.1) // 1
|
||||
Math.ceil(1.3) // 2
|
||||
Math.ceil(-0.9) // -0
|
||||
Math.ceil(-1.5) // -1
|
||||
```
|
||||
|
||||
### معلومات اكثر:
|
||||
|
||||
|
@ -8,12 +8,13 @@ localeTitle: الطابق الرياضيات
|
||||
|
||||
### أمثلة
|
||||
|
||||
`Math.floor(0.9) // 0
|
||||
Math.floor(1.3) // 1
|
||||
Math.floor(0.5) // 0
|
||||
Math.floor(-0.9) // -1
|
||||
Math.floor(-1.3) // -2
|
||||
`
|
||||
```javascript
|
||||
Math.floor(0.9) // 0
|
||||
Math.floor(1.3) // 1
|
||||
Math.floor(0.5) // 0
|
||||
Math.floor(-0.9) // -1
|
||||
Math.floor(-1.3) // -2
|
||||
```
|
||||
|
||||
### معلومات اكثر:
|
||||
|
||||
|
@ -10,8 +10,9 @@ localeTitle: الرياضيات ماكس
|
||||
|
||||
### بناء الجملة
|
||||
|
||||
`Math.max(value1, value2, value3, ...);
|
||||
`
|
||||
```js
|
||||
Math.max(value1, value2, value3, ...);
|
||||
```
|
||||
|
||||
### المعلمات
|
||||
|
||||
@ -25,27 +26,31 @@ localeTitle: الرياضيات ماكس
|
||||
|
||||
_الأرقام كمعلمات_
|
||||
|
||||
`Math.max(4, 13, 27, 0, -5); // returns 27
|
||||
`
|
||||
```js
|
||||
Math.max(4, 13, 27, 0, -5); // returns 27
|
||||
```
|
||||
|
||||
_معلمة غير صالحة_
|
||||
|
||||
`Math.max(4, 13, 27, 'eight', -5); // returns NaN
|
||||
`
|
||||
```js
|
||||
Math.max(4, 13, 27, 'eight', -5); // returns NaN
|
||||
```
|
||||
|
||||
_صفيف كمعلمة ، استخدام السبريد (…)_
|
||||
|
||||
`let numbers = [4, 13, 27, 0, -5];
|
||||
|
||||
Math.max(...numbers); // returns 27
|
||||
`
|
||||
```js
|
||||
let numbers = [4, 13, 27, 0, -5];
|
||||
|
||||
Math.max(...numbers); // returns 27
|
||||
```
|
||||
|
||||
_صفيف كمعلمة ، باستخدام تطبيق_
|
||||
|
||||
`let numbers = [4, 13, 27, 0, -5];
|
||||
|
||||
Math.max.apply(null, numbers); // returns 27
|
||||
`
|
||||
```js
|
||||
let numbers = [4, 13, 27, 0, -5];
|
||||
|
||||
Math.max.apply(null, numbers); // returns 27
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -8,9 +8,10 @@ localeTitle: الرياضيات مين
|
||||
|
||||
يمكنك تمرير أي عدد من الحجج.
|
||||
|
||||
`Math.min(7, 2, 9, -6);
|
||||
// returns -6
|
||||
`
|
||||
```javascript
|
||||
Math.min(7, 2, 9, -6);
|
||||
// returns -6
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -10,8 +10,9 @@ localeTitle: الرياضيات PI
|
||||
|
||||
## أمثلة
|
||||
|
||||
`Math.PI \\ 3.141592653589793
|
||||
`
|
||||
```js
|
||||
Math.PI \\ 3.141592653589793
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -14,12 +14,13 @@ localeTitle: الرياضيات الأسرى
|
||||
|
||||
#### أمثلة
|
||||
|
||||
`Math.pow(5, 2); // 25
|
||||
Math.pow(7, 4); // 2401
|
||||
Math.pow(9, 0.5); // 3
|
||||
Math.pow(-8, 2); // 64
|
||||
Math.pow(-4, 3); // -64
|
||||
`
|
||||
```js
|
||||
Math.pow(5, 2); // 25
|
||||
Math.pow(7, 4); // 2401
|
||||
Math.pow(9, 0.5); // 3
|
||||
Math.pow(-8, 2); // 64
|
||||
Math.pow(-4, 3); // -64
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -12,10 +12,11 @@ localeTitle: الرياضيات عشوائي
|
||||
|
||||
#### مثال
|
||||
|
||||
`function randomInRange(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
`
|
||||
```js
|
||||
function randomInRange(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -16,12 +16,13 @@ localeTitle: الرياضيات Sqrt
|
||||
|
||||
#### أمثلة
|
||||
|
||||
`Math.sqrt(25); // 5
|
||||
Math.sqrt(169); // 13
|
||||
Math.sqrt(3); // 1.732050807568
|
||||
Math.sqrt(1); // 1
|
||||
Math.sqrt(-5); // NaN
|
||||
`
|
||||
```js
|
||||
Math.sqrt(25); // 5
|
||||
Math.sqrt(169); // 13
|
||||
Math.sqrt(3); // 1.732050807568
|
||||
Math.sqrt(1); // 1
|
||||
Math.sqrt(-5); // NaN
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -10,12 +10,13 @@ localeTitle: Math Trunc
|
||||
|
||||
### أمثلة
|
||||
|
||||
`Math.trunc(0.1) // 0
|
||||
Math.trunc(1.3) // 1
|
||||
Math.trunc(-0.9) // -0
|
||||
Math.trunc(-1.5) // -1
|
||||
Math.trunc('foo') // NaN
|
||||
`
|
||||
```javascript
|
||||
Math.trunc(0.1) // 0
|
||||
Math.trunc(1.3) // 1
|
||||
Math.trunc(-0.9) // -0
|
||||
Math.trunc(-1.5) // -1
|
||||
Math.trunc('foo') // NaN
|
||||
```
|
||||
|
||||
### معلومات اكثر:
|
||||
|
||||
|
@ -26,25 +26,26 @@ A [Boolean](https://guide.freecodecamp.org/javascript/booleans) تشير إلى
|
||||
|
||||
## أمثلة
|
||||
|
||||
`Number.isInteger(0); // true
|
||||
Number.isInteger(-0); // true
|
||||
Number.isInteger(1); // true
|
||||
Number.isInteger(2); // true
|
||||
Number.isInteger(-100001); // true
|
||||
Number.isInteger(999999999999999999999999); // true
|
||||
|
||||
Number.isInteger(0.1); // false
|
||||
Number.isInteger(0.3); // false
|
||||
Number.isInteger(Math.PI); // false
|
||||
|
||||
Number.isInteger(NaN); // false
|
||||
Number.isInteger(Infinity); // false
|
||||
Number.isInteger(-Infinity); // false
|
||||
Number.isInteger('10'); // false
|
||||
Number.isInteger(true); // false
|
||||
Number.isInteger(false); // false
|
||||
Number.isInteger([1]); // false
|
||||
`
|
||||
```
|
||||
Number.isInteger(0); // true
|
||||
Number.isInteger(-0); // true
|
||||
Number.isInteger(1); // true
|
||||
Number.isInteger(2); // true
|
||||
Number.isInteger(-100001); // true
|
||||
Number.isInteger(999999999999999999999999); // true
|
||||
|
||||
Number.isInteger(0.1); // false
|
||||
Number.isInteger(0.3); // false
|
||||
Number.isInteger(Math.PI); // false
|
||||
|
||||
Number.isInteger(NaN); // false
|
||||
Number.isInteger(Infinity); // false
|
||||
Number.isInteger(-Infinity); // false
|
||||
Number.isInteger('10'); // false
|
||||
Number.isInteger(true); // false
|
||||
Number.isInteger(false); // false
|
||||
Number.isInteger([1]); // false
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -16,8 +16,9 @@ localeTitle: كائن التعيين
|
||||
|
||||
**بناء الجملة**
|
||||
|
||||
`Object.assign(targetObject, ...sourceObject)
|
||||
`
|
||||
```javascript
|
||||
Object.assign(targetObject, ...sourceObject)
|
||||
```
|
||||
|
||||
**قيمة الإرجاع**
|
||||
|
||||
@ -27,33 +28,36 @@ localeTitle: كائن التعيين
|
||||
|
||||
_تعديل ونسخ targetObject_
|
||||
|
||||
`let obj = {name: 'Dave', age: 30};
|
||||
|
||||
let objCopy = Object.assign(obj, {coder: true});
|
||||
|
||||
console.log(obj); // returns { name: 'Dave', age: 30, coder: true }
|
||||
console.log(objCopy); // returns { name: 'Dave', age: 30, coder: true }
|
||||
`
|
||||
```javascript
|
||||
let obj = {name: 'Dave', age: 30};
|
||||
|
||||
let objCopy = Object.assign(obj, {coder: true});
|
||||
|
||||
console.log(obj); // returns { name: 'Dave', age: 30, coder: true }
|
||||
console.log(objCopy); // returns { name: 'Dave', age: 30, coder: true }
|
||||
```
|
||||
|
||||
_نسخ targetObject بدون تعديل_
|
||||
|
||||
`let obj = {name: 'Dave', age: 30};
|
||||
|
||||
let objCopy = Object.assign({}, obj, {coder: true});
|
||||
|
||||
console.log(obj); // returns { name: 'Dave', age: 30 }
|
||||
console.log(objCopy); // returns { name: 'Dave', age: 30, coder: true }
|
||||
`
|
||||
```javascript
|
||||
let obj = {name: 'Dave', age: 30};
|
||||
|
||||
let objCopy = Object.assign({}, obj, {coder: true});
|
||||
|
||||
console.log(obj); // returns { name: 'Dave', age: 30 }
|
||||
console.log(objCopy); // returns { name: 'Dave', age: 30, coder: true }
|
||||
```
|
||||
|
||||
_كائنات ذات خصائص مماثلة_
|
||||
|
||||
`let obj = {name: 'Dave', age: 30, favoriteColor: 'blue'};
|
||||
|
||||
let objCopy = Object.assign({}, obj, {coder: true, favoriteColor: 'red'});
|
||||
|
||||
console.log(obj); // returns { name: 'Dave', age: 30, favoriteColor: 'blue' }
|
||||
console.log(objCopy); // { name: 'Dave', age: 30, favoriteColor: 'red', coder: true }
|
||||
`
|
||||
```javascript
|
||||
let obj = {name: 'Dave', age: 30, favoriteColor: 'blue'};
|
||||
|
||||
let objCopy = Object.assign({}, obj, {coder: true, favoriteColor: 'red'});
|
||||
|
||||
console.log(obj); // returns { name: 'Dave', age: 30, favoriteColor: 'blue' }
|
||||
console.log(objCopy); // { name: 'Dave', age: 30, favoriteColor: 'red', coder: true }
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -10,21 +10,23 @@ localeTitle: Object Destructuring
|
||||
|
||||
### الواجب الأساسي
|
||||
|
||||
`var userInfo = {name: 'neel', age: 22};
|
||||
var {name, age} = userInfo;
|
||||
|
||||
console.log(name); // neel
|
||||
console.log(age); // 22
|
||||
`
|
||||
```
|
||||
var userInfo = {name: 'neel', age: 22};
|
||||
var {name, age} = userInfo;
|
||||
|
||||
console.log(name); // neel
|
||||
console.log(age); // 22
|
||||
```
|
||||
|
||||
### التنازل دون تصريح
|
||||
|
||||
يمكن تعيين متغير قيمته مع التدمير المنفصل عن تصريحه.
|
||||
|
||||
`var name, age;
|
||||
|
||||
({name, age} = {name: 'neel', age: 22});
|
||||
`
|
||||
```
|
||||
var name, age;
|
||||
|
||||
({name, age} = {name: 'neel', age: 22});
|
||||
```
|
||||
|
||||
> و `( .. )` حول جملة الواجب هو بناء جملة مطلوب عند استخدام التعيين الحرفي كائن الهدف دون تصريح.
|
||||
>
|
||||
@ -36,22 +38,24 @@ localeTitle: Object Destructuring
|
||||
|
||||
يمكن فك أي خاصية من أحد الكائنات وتخصيصها لمتغير باسم مختلف عن خاصية الكائن.
|
||||
|
||||
`var userInfo = {a: 'neel', b: 22};
|
||||
var {a: name, b: bar} = userInfo;
|
||||
|
||||
console.log(name); // neel
|
||||
console.log(bar); // 22
|
||||
`
|
||||
```
|
||||
var userInfo = {a: 'neel', b: 22};
|
||||
var {a: name, b: bar} = userInfo;
|
||||
|
||||
console.log(name); // neel
|
||||
console.log(bar); // 22
|
||||
```
|
||||
|
||||
### قيم افتراضية
|
||||
|
||||
متغير يمكن تعيين الافتراضي، في حالة أن القيمة تفكيك من الكائن هو `undefined` .
|
||||
|
||||
`var {name = 'ananonumys', age = 20} = {name: 'neel'};
|
||||
|
||||
console.log(name); // neel
|
||||
console.log(age); // 20
|
||||
`
|
||||
```
|
||||
var {name = 'ananonumys', age = 20} = {name: 'neel'};
|
||||
|
||||
console.log(name); // neel
|
||||
console.log(age); // 20
|
||||
```
|
||||
|
||||
### تعيين أسماء المتغيرات الجديدة وتوفير القيم الافتراضية
|
||||
|
||||
@ -60,132 +64,139 @@ localeTitle: Object Destructuring
|
||||
1. تفكيكها من كائن وتعيين لمتغير مع اسم مختلف و
|
||||
2. تعيين قيمة افتراضية في حالة القيمة غير `undefined` غير `undefined` .
|
||||
|
||||
`var {a:name = 'ananonumys', b:age = 20} = {age: 22};
|
||||
|
||||
console.log(name); // ananonumys
|
||||
console.log(age); // 22
|
||||
`
|
||||
```
|
||||
var {a:name = 'ananonumys', b:age = 20} = {age: 22};
|
||||
|
||||
console.log(name); // ananonumys
|
||||
console.log(age); // 22
|
||||
```
|
||||
|
||||
### إعداد القيمة الافتراضية لعلامة دالة
|
||||
|
||||
#### ES5 الإصدار
|
||||
|
||||
`function getUserInfo(data) {
|
||||
data = data === undefined ? {} : data;
|
||||
var name = data.name === undefined ? 'ananonumys' : data.name;
|
||||
var age = data.age === undefined ? 20 : data.age;
|
||||
var location = data.location === undefined ? 'india' : data.location;
|
||||
console.log(name, age, location);
|
||||
// print user data
|
||||
}
|
||||
|
||||
getUserInfo({
|
||||
name: 'neel',
|
||||
age: 22,
|
||||
location: 'canada'
|
||||
});
|
||||
`
|
||||
```
|
||||
function getUserInfo(data) {
|
||||
data = data === undefined ? {} : data;
|
||||
var name = data.name === undefined ? 'ananonumys' : data.name;
|
||||
var age = data.age === undefined ? 20 : data.age;
|
||||
var location = data.location === undefined ? 'india' : data.location;
|
||||
console.log(name, age, location);
|
||||
// print user data
|
||||
}
|
||||
|
||||
getUserInfo({
|
||||
name: 'neel',
|
||||
age: 22,
|
||||
location: 'canada'
|
||||
});
|
||||
```
|
||||
|
||||
#### نسخة ES2015
|
||||
|
||||
`function getUserInfo({name = 'ananonumys', age = 20, location = 'india'} = {}) {
|
||||
console.log(name, age, location);
|
||||
// print user data
|
||||
}
|
||||
|
||||
getUserInfo({
|
||||
name: 'neel',
|
||||
age: 22,
|
||||
location: 'canada'
|
||||
});
|
||||
`
|
||||
```
|
||||
function getUserInfo({name = 'ananonumys', age = 20, location = 'india'} = {}) {
|
||||
console.log(name, age, location);
|
||||
// print user data
|
||||
}
|
||||
|
||||
getUserInfo({
|
||||
name: 'neel',
|
||||
age: 22,
|
||||
location: 'canada'
|
||||
});
|
||||
```
|
||||
|
||||
> في توقيع الدالة `getUserInfo` أعلاه ، يتم تعيين الجانب الأيسر المدمر إلى كائن حرفي فارغ على الجانب الأيمن: `{name = 'ananonumys', age = 20, location = 'india'} = {}` . كان بإمكانك أيضًا كتابة الوظيفة بدون تعيين الجانب الأيمن. ومع ذلك ، إذا قمت `getUserInfo()` تعيين الجانب الأيمن ، ستبحث الدالة عن وسيطة واحدة على الأقل `getUserInfo()` عند استدعاء ، بينما في شكلها الحالي ، يمكنك ببساطة استدعاء `getUserInfo()` دون توفير أي معلمات. يفيد التصميم الحالي إذا كنت تريد أن تكون قادرًا على استدعاء الدالة دون توفير أي معلمات ، يمكن أن يكون الآخر مفيدًا عندما تريد التأكد من تمرير كائن إلى الوظيفة.
|
||||
|
||||
### كائن متداخل ومجموعة المدمر
|
||||
|
||||
`var metadata = {
|
||||
title: 'Scratchpad',
|
||||
translations: [
|
||||
{
|
||||
locale: 'de',
|
||||
localization_tags: [],
|
||||
last_edit: '2014-04-14T08:43:37',
|
||||
url: '/de/docs/Tools/Scratchpad',
|
||||
title: 'JavaScript-Umgebung'
|
||||
}
|
||||
],
|
||||
url: '/en-US/docs/Tools/Scratchpad'
|
||||
};
|
||||
|
||||
var {title: englishTitle, translations: [{title: localeTitle}]} = metadata;
|
||||
|
||||
console.log(englishTitle); // "Scratchpad"
|
||||
console.log(localeTitle); // "JavaScript-Umgebung"
|
||||
`
|
||||
```
|
||||
var metadata = {
|
||||
title: 'Scratchpad',
|
||||
translations: [
|
||||
{
|
||||
locale: 'de',
|
||||
localization_tags: [],
|
||||
last_edit: '2014-04-14T08:43:37',
|
||||
url: '/de/docs/Tools/Scratchpad',
|
||||
title: 'JavaScript-Umgebung'
|
||||
}
|
||||
],
|
||||
url: '/en-US/docs/Tools/Scratchpad'
|
||||
};
|
||||
|
||||
var {title: englishTitle, translations: [{title: localeTitle}]} = metadata;
|
||||
|
||||
console.log(englishTitle); // "Scratchpad"
|
||||
console.log(localeTitle); // "JavaScript-Umgebung"
|
||||
```
|
||||
|
||||
### للتكرار والتدمير
|
||||
|
||||
`var people = [
|
||||
{
|
||||
name: 'Mike Smith',
|
||||
family: {
|
||||
mother: 'Jane Smith',
|
||||
father: 'Harry Smith',
|
||||
sister: 'Samantha Smith'
|
||||
},
|
||||
age: 35
|
||||
},
|
||||
{
|
||||
name: 'Tom Jones',
|
||||
family: {
|
||||
mother: 'Norah Jones',
|
||||
father: 'Richard Jones',
|
||||
brother: 'Howard Jones'
|
||||
},
|
||||
age: 25
|
||||
}
|
||||
];
|
||||
|
||||
for (var {name: n, family: {father: f}} of people) {
|
||||
console.log('Name: ' + n + ', Father: ' + f);
|
||||
}
|
||||
|
||||
// "Name: Mike Smith, Father: Harry Smith"
|
||||
// "Name: Tom Jones, Father: Richard Jones"
|
||||
`
|
||||
```
|
||||
var people = [
|
||||
{
|
||||
name: 'Mike Smith',
|
||||
family: {
|
||||
mother: 'Jane Smith',
|
||||
father: 'Harry Smith',
|
||||
sister: 'Samantha Smith'
|
||||
},
|
||||
age: 35
|
||||
},
|
||||
{
|
||||
name: 'Tom Jones',
|
||||
family: {
|
||||
mother: 'Norah Jones',
|
||||
father: 'Richard Jones',
|
||||
brother: 'Howard Jones'
|
||||
},
|
||||
age: 25
|
||||
}
|
||||
];
|
||||
|
||||
for (var {name: n, family: {father: f}} of people) {
|
||||
console.log('Name: ' + n + ', Father: ' + f);
|
||||
}
|
||||
|
||||
// "Name: Mike Smith, Father: Harry Smith"
|
||||
// "Name: Tom Jones, Father: Richard Jones"
|
||||
```
|
||||
|
||||
### تفريغ الحقول من الكائنات التي تم تمريرها كمعلمة دالة
|
||||
|
||||
`function userId({id}) {
|
||||
return id;
|
||||
}
|
||||
|
||||
function whois({displayName, fullName: {firstName: name}}) {
|
||||
console.log(displayName + ' is ' + name);
|
||||
}
|
||||
|
||||
var user = {
|
||||
id: 42,
|
||||
displayName: 'jdoe',
|
||||
fullName: {
|
||||
firstName: 'John',
|
||||
lastName: 'Doe'
|
||||
}
|
||||
};
|
||||
|
||||
console.log('userId: ' + userId(user)); // "userId: 42"
|
||||
whois(user); // "jdoe is John"
|
||||
`
|
||||
```
|
||||
function userId({id}) {
|
||||
return id;
|
||||
}
|
||||
|
||||
function whois({displayName, fullName: {firstName: name}}) {
|
||||
console.log(displayName + ' is ' + name);
|
||||
}
|
||||
|
||||
var user = {
|
||||
id: 42,
|
||||
displayName: 'jdoe',
|
||||
fullName: {
|
||||
firstName: 'John',
|
||||
lastName: 'Doe'
|
||||
}
|
||||
};
|
||||
|
||||
console.log('userId: ' + userId(user)); // "userId: 42"
|
||||
whois(user); // "jdoe is John"
|
||||
```
|
||||
|
||||
هذا unpacks `id` و `displayName` و `firstName` من كائن المستخدم `firstName` .
|
||||
|
||||
### أسماء خصائص كائن محسوب و destructuring
|
||||
|
||||
`let key = 'z';
|
||||
let {[key]: foo} = {z: 'bar'};
|
||||
|
||||
console.log(foo); // "bar"
|
||||
`
|
||||
```
|
||||
let key = 'z';
|
||||
let {[key]: foo} = {z: 'bar'};
|
||||
|
||||
console.log(foo); // "bar"
|
||||
```
|
||||
|
||||
انظر أيضا: **Object Destructuring** | [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring)
|
@ -12,8 +12,9 @@ localeTitle: تجميد الكائن
|
||||
|
||||
### بناء الجملة
|
||||
|
||||
`Object.freeze(obj)
|
||||
`
|
||||
```javascript
|
||||
Object.freeze(obj)
|
||||
```
|
||||
|
||||
### المعلمات
|
||||
|
||||
@ -31,35 +32,36 @@ localeTitle: تجميد الكائن
|
||||
|
||||
### مثال
|
||||
|
||||
`// Create your object
|
||||
let person = {
|
||||
name: 'Johnny',
|
||||
age: 23,
|
||||
guild: 'Army of Darkness',
|
||||
hobbies: ['music', 'gaming', 'rock climbing']
|
||||
}
|
||||
|
||||
// Modify your object
|
||||
person.name = 'John'
|
||||
person.age = 24
|
||||
person.hobbies.splice(1,1)
|
||||
delete person.guild
|
||||
|
||||
// Verify your object has been modified
|
||||
console.log(person) // { name: 'John', age: 24, hobbies: ['music', 'rock climbing']
|
||||
|
||||
// Freeze your object
|
||||
Object.freeze(person)
|
||||
|
||||
// Verify that your object can no longer be modified
|
||||
person.name = 'Johnny' // fails silently
|
||||
person.age = 23 // fails silently
|
||||
console.log(person) // { name: 'John', age: 24, hobbies: ['music', 'rock climbing']
|
||||
|
||||
// The freeze is "shallow" and nested objects (including arrays) can still be modified
|
||||
person.hobbies.push('basketball')
|
||||
consol.log(person.hobbies) // ['music', 'rock climbing', 'basketball']
|
||||
`
|
||||
```javascript
|
||||
// Create your object
|
||||
let person = {
|
||||
name: 'Johnny',
|
||||
age: 23,
|
||||
guild: 'Army of Darkness',
|
||||
hobbies: ['music', 'gaming', 'rock climbing']
|
||||
}
|
||||
|
||||
// Modify your object
|
||||
person.name = 'John'
|
||||
person.age = 24
|
||||
person.hobbies.splice(1,1)
|
||||
delete person.guild
|
||||
|
||||
// Verify your object has been modified
|
||||
console.log(person) // { name: 'John', age: 24, hobbies: ['music', 'rock climbing']
|
||||
|
||||
// Freeze your object
|
||||
Object.freeze(person)
|
||||
|
||||
// Verify that your object can no longer be modified
|
||||
person.name = 'Johnny' // fails silently
|
||||
person.age = 23 // fails silently
|
||||
console.log(person) // { name: 'John', age: 24, hobbies: ['music', 'rock climbing']
|
||||
|
||||
// The freeze is "shallow" and nested objects (including arrays) can still be modified
|
||||
person.hobbies.push('basketball')
|
||||
consol.log(person.hobbies) // ['music', 'rock climbing', 'basketball']
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -8,24 +8,26 @@ localeTitle: الكائن هو المجمدة
|
||||
|
||||
#### **بناء الجملة**
|
||||
|
||||
`Object.isFrozen(obj)
|
||||
`
|
||||
```javascript
|
||||
Object.isFrozen(obj)
|
||||
```
|
||||
|
||||
**فمثلا:**
|
||||
|
||||
`var foods = {
|
||||
grain : "wheat",
|
||||
dairy : "milk",
|
||||
vegetable : "carrot",
|
||||
fruit : "grape"
|
||||
};
|
||||
|
||||
var frozenFoods = Object.freeze(foods);
|
||||
|
||||
var areMyFoodsFrozen = Object.isFrozen(frozenFoods);
|
||||
|
||||
\\ returns true
|
||||
`
|
||||
```javascript
|
||||
var foods = {
|
||||
grain : "wheat",
|
||||
dairy : "milk",
|
||||
vegetable : "carrot",
|
||||
fruit : "grape"
|
||||
};
|
||||
|
||||
var frozenFoods = Object.freeze(foods);
|
||||
|
||||
var areMyFoodsFrozen = Object.isFrozen(frozenFoods);
|
||||
|
||||
\\ returns true
|
||||
```
|
||||
|
||||
تذكر ، **لا يمكن أن** يكون له خاصية مجمدة تغير خصائصها.
|
||||
|
||||
|
@ -24,21 +24,22 @@ localeTitle: Object.prototype.hasOwnProperty
|
||||
|
||||
باستخدام **hasOwnProperty ()** لاختبار ما إذا كانت خاصية موجودة أم لا في كائن محدد:
|
||||
|
||||
`var course = {
|
||||
name: 'freeCodeCamp',
|
||||
feature: 'is awesome',
|
||||
}
|
||||
|
||||
var student = {
|
||||
name: 'enthusiastic student',
|
||||
}
|
||||
|
||||
course.hasOwnProperty('name'); // returns true
|
||||
course.hasOwnProperty('feature'); // returns true
|
||||
|
||||
student.hasOwnProperty('name'); // returns true
|
||||
student.hasOwnProperty('feature'); // returns false
|
||||
`
|
||||
```js
|
||||
var course = {
|
||||
name: 'freeCodeCamp',
|
||||
feature: 'is awesome',
|
||||
}
|
||||
|
||||
var student = {
|
||||
name: 'enthusiastic student',
|
||||
}
|
||||
|
||||
course.hasOwnProperty('name'); // returns true
|
||||
course.hasOwnProperty('feature'); // returns true
|
||||
|
||||
student.hasOwnProperty('name'); // returns true
|
||||
student.hasOwnProperty('feature'); // returns false
|
||||
```
|
||||
|
||||
#### الروابط
|
||||
|
||||
|
@ -8,13 +8,14 @@ localeTitle: وعد رفض
|
||||
|
||||
سيسمح لك تسلسل وظيفة catch في نهاية المتصل Promise بالتقاط حالة الخطأ.
|
||||
|
||||
`promiseCallingFunction(paramList)
|
||||
.then( ... )
|
||||
...
|
||||
.then( ... )
|
||||
.catch( function(err) { // catch function
|
||||
/*
|
||||
* this is where you can access the reason for the rejection
|
||||
*/
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
promiseCallingFunction(paramList)
|
||||
.then( ... )
|
||||
...
|
||||
.then( ... )
|
||||
.catch( function(err) { // catch function
|
||||
/*
|
||||
* this is where you can access the reason for the rejection
|
||||
*/
|
||||
});
|
||||
```
|
@ -12,32 +12,35 @@ localeTitle: وعد بالقرار
|
||||
|
||||
يمكن أن تكون "القيمة" لدالة التصميم هي أنواع جافا سكريبت الأساسية ، أو المصفوفات ، أو الكائنات.
|
||||
|
||||
`Promise.resolve('success'); // string
|
||||
Promise.resolve([2, 3, 5]); // array
|
||||
Promise.resolve({name: 'John', age: '43'}); // object
|
||||
`
|
||||
```javascript
|
||||
Promise.resolve('success'); // string
|
||||
Promise.resolve([2, 3, 5]); // array
|
||||
Promise.resolve({name: 'John', age: '43'}); // object
|
||||
```
|
||||
|
||||
A "thenable" هي دالة تأخذ وظيفتي رد اتصال كمعلمات. يمكنك استخدام المعلمة الأولى لتشغيل عملية إكمال ناجحة ، والثاني لإرجاع خطأ في Promise.
|
||||
|
||||
`thenableFunction = {then: function(onSuccesss, onFailure) {
|
||||
if (condition === 'success') {
|
||||
onSuccess(paramList); // success condition
|
||||
} else {
|
||||
onFailure(paramList); // error condition
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Promise.resolve(thenableFunction);
|
||||
`
|
||||
```javascript
|
||||
thenableFunction = {then: function(onSuccesss, onFailure) {
|
||||
if (condition === 'success') {
|
||||
onSuccess(paramList); // success condition
|
||||
} else {
|
||||
onFailure(paramList); // error condition
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Promise.resolve(thenableFunction);
|
||||
```
|
||||
|
||||
سيؤدي تسلسل وظيفة ثم إلى متصل الوعد إلى الوصول إلى نتيجة `Promise.resolve` .
|
||||
|
||||
`promiseCallingFunction(paramList)
|
||||
.then(function(value) {
|
||||
/*
|
||||
* this is where you get access to the value
|
||||
* returned by a promise on successful completion
|
||||
*/
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
promiseCallingFunction(paramList)
|
||||
.then(function(value) {
|
||||
/*
|
||||
* this is where you get access to the value
|
||||
* returned by a promise on successful completion
|
||||
*/
|
||||
});
|
||||
```
|
@ -8,27 +8,29 @@ localeTitle: RegExp.prototype.test
|
||||
|
||||
## أمثلة
|
||||
|
||||
`let str = 'freeCodeCamp';
|
||||
let regEx = /Code/;
|
||||
let result = regEx.test(str);
|
||||
|
||||
console.log(result); // prints true
|
||||
`
|
||||
```javascript
|
||||
let str = 'freeCodeCamp';
|
||||
let regEx = /Code/;
|
||||
let result = regEx.test(str);
|
||||
|
||||
console.log(result); // prints true
|
||||
```
|
||||
|
||||
**ملاحظة:** التعبيرات العادية حساسة لحالة الأحرف. سيظهر المثال أعلاه `false` إذا كان `regEx` `/code/` بدلاً من `/Code/` . لجعل التعبير العادي غير حساس لحالة الأحرف ، يجب عليك إضافة علامة `i` إلى التعبير العادي.
|
||||
|
||||
`let str = 'freeCodeCamp';
|
||||
let regEx = /code/;
|
||||
let result = regEx.test(str);
|
||||
|
||||
console.log(result); // prints false
|
||||
|
||||
// Include the 'i' flag.
|
||||
|
||||
regEx = /code/i;
|
||||
result = regEx.test(str);
|
||||
console.log(result); // prints true
|
||||
`
|
||||
```javascript
|
||||
let str = 'freeCodeCamp';
|
||||
let regEx = /code/;
|
||||
let result = regEx.test(str);
|
||||
|
||||
console.log(result); // prints false
|
||||
|
||||
// Include the 'i' flag.
|
||||
|
||||
regEx = /code/i;
|
||||
result = regEx.test(str);
|
||||
console.log(result); // prints true
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -8,14 +8,16 @@ localeTitle: String.prototype.endsWith
|
||||
|
||||
### فمثلا
|
||||
|
||||
`let str = "Hello world";
|
||||
let bool = str.endsWith("ld") // true
|
||||
bool = str.endsWith("llo") // false
|
||||
`
|
||||
```js
|
||||
let str = "Hello world";
|
||||
let bool = str.endsWith("ld") // true
|
||||
bool = str.endsWith("llo") // false
|
||||
```
|
||||
|
||||
يمكن أن تقبل هذه الطريقة أيضًا معلمة أخرى ، وهي `length` الذي يحدد قبل أي حرف للبحث في السلسلة.
|
||||
|
||||
`let str = "Hello world";
|
||||
let bool = str.endsWith("ld", 5) // false, it's the same as "Hello".endsWith("ld")
|
||||
bool = str.endsWith("llo", 5) // true, it's the same as "Hello".endsWith("llo")
|
||||
`
|
||||
```js
|
||||
let str = "Hello world";
|
||||
let bool = str.endsWith("ld", 5) // false, it's the same as "Hello".endsWith("ld")
|
||||
bool = str.endsWith("llo", 5) // true, it's the same as "Hello".endsWith("llo")
|
||||
```
|
@ -14,8 +14,9 @@ localeTitle: String.prototype.includes
|
||||
|
||||
**بناء الجملة**
|
||||
|
||||
`string.includes(searchString[, position])
|
||||
`
|
||||
```js
|
||||
string.includes(searchString[, position])
|
||||
```
|
||||
|
||||
**المعلمات**
|
||||
|
||||
@ -23,30 +24,35 @@ localeTitle: String.prototype.includes
|
||||
|
||||
**أمثلة**
|
||||
|
||||
`let string = "Roses are red, violets are blue.";
|
||||
|
||||
string.includes('red'); // returns true
|
||||
`
|
||||
```js
|
||||
let string = "Roses are red, violets are blue.";
|
||||
|
||||
`let string = "Roses are red, violets are blue.";
|
||||
|
||||
string.includes('Red'); // returns false
|
||||
`
|
||||
string.includes('red'); // returns true
|
||||
```
|
||||
|
||||
`let string = "Roses are red, violets are blue.";
|
||||
|
||||
string.includes('red',12); // returns false because 'red' starts at position 9, and our search begins at position 12.
|
||||
`
|
||||
```javascript
|
||||
let string = "Roses are red, violets are blue.";
|
||||
|
||||
`let string = "Roses are red, violets are blue.";
|
||||
|
||||
string.includes('blue',12); // returns true because 'blue' starts after our search begins at position 12.
|
||||
`
|
||||
string.includes('Red'); // returns false
|
||||
```
|
||||
|
||||
`let string = "Roses are red, violets are blue.";
|
||||
|
||||
string.includes('violets are blue'); // returns true
|
||||
`
|
||||
```javascript
|
||||
let string = "Roses are red, violets are blue.";
|
||||
|
||||
string.includes('red',12); // returns false because 'red' starts at position 9, and our search begins at position 12.
|
||||
```
|
||||
|
||||
```javascript
|
||||
let string = "Roses are red, violets are blue.";
|
||||
|
||||
string.includes('blue',12); // returns true because 'blue' starts after our search begins at position 12.
|
||||
```
|
||||
|
||||
```javascript
|
||||
let string = "Roses are red, violets are blue.";
|
||||
|
||||
string.includes('violets are blue'); // returns true
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -8,8 +8,9 @@ localeTitle: String.prototype.indexOf
|
||||
|
||||
**بناء الجملة**
|
||||
|
||||
`str.indexOf(searchValue[, fromIndex])
|
||||
`
|
||||
```javascript
|
||||
str.indexOf(searchValue[, fromIndex])
|
||||
```
|
||||
|
||||
### المعلمات
|
||||
|
||||
@ -24,17 +25,18 @@ localeTitle: String.prototype.indexOf
|
||||
|
||||
### أمثلة
|
||||
|
||||
`'Blue Whale'.indexOf('Blue'); // returns 0
|
||||
'Blue Whale'.indexOf('Blute'); // returns -1
|
||||
'Blue Whale'.indexOf('Whale', 0); // returns 5
|
||||
'Blue Whale'.indexOf('Whale', 5); // returns 5
|
||||
'Blue Whale'.indexOf('Whale', 7); // returns -1
|
||||
'Blue Whale'.indexOf(''); // returns 0
|
||||
'Blue Whale'.indexOf('', 9); // returns 9
|
||||
'Blue Whale'.indexOf('', 10); // returns 10
|
||||
'Blue Whale'.indexOf('', 11); // returns 10
|
||||
'Blue Whale'.indexOf('blue'); // returns -1
|
||||
`
|
||||
```javascript
|
||||
'Blue Whale'.indexOf('Blue'); // returns 0
|
||||
'Blue Whale'.indexOf('Blute'); // returns -1
|
||||
'Blue Whale'.indexOf('Whale', 0); // returns 5
|
||||
'Blue Whale'.indexOf('Whale', 5); // returns 5
|
||||
'Blue Whale'.indexOf('Whale', 7); // returns -1
|
||||
'Blue Whale'.indexOf(''); // returns 0
|
||||
'Blue Whale'.indexOf('', 9); // returns 9
|
||||
'Blue Whale'.indexOf('', 10); // returns 10
|
||||
'Blue Whale'.indexOf('', 11); // returns 10
|
||||
'Blue Whale'.indexOf('blue'); // returns -1
|
||||
```
|
||||
|
||||
### معلومات اكثر:
|
||||
|
||||
|
@ -12,26 +12,28 @@ localeTitle: String.prototype.split
|
||||
|
||||
أمثلة:
|
||||
|
||||
`// We have a regular string
|
||||
"Hello. I am a string. You can separate me."
|
||||
|
||||
// Let's use the split function to separate the string by the period character:
|
||||
"Hello. I am a string. You can separate me.".split(".");
|
||||
// output is [ "Hello", " I am a string", " You can separate me", "" ]
|
||||
`
|
||||
```js
|
||||
// We have a regular string
|
||||
"Hello. I am a string. You can separate me."
|
||||
|
||||
// Let's use the split function to separate the string by the period character:
|
||||
"Hello. I am a string. You can separate me.".split(".");
|
||||
// output is [ "Hello", " I am a string", " You can separate me", "" ]
|
||||
```
|
||||
|
||||
بما أننا استخدمنا النقطة ( `.` ) _كسلسلة فاصلة_ ، فإن السلاسل في صفيف الخرج لا تحتوي على الفترة الموجودة فيها ؛ _لا تتضمن_ سلاسل فصل الإخراج _سلسلة سلسلة فاصل الإدخال نفسه_ .
|
||||
|
||||
ليس من الضروري أن يكون _فاصل السلسلة_ حرفًا واحدًا ، يمكن أن يكون أي سلسلة أخرى:
|
||||
|
||||
`"Hello... I am another string... keep on learning!".split("...");
|
||||
// output is [ "Hello", " I am another string", " keep on learning!" ]
|
||||
|
||||
const names = "Kratos- Atreus- Freya- Hela- Thor- Odin";
|
||||
// notice separator is a dash and a space
|
||||
names.split("- ");
|
||||
// output is [ "Kratos", "Atreus", "Freya", "Hela", "Thor", "Odin" ]
|
||||
`
|
||||
```js
|
||||
"Hello... I am another string... keep on learning!".split("...");
|
||||
// output is [ "Hello", " I am another string", " keep on learning!" ]
|
||||
|
||||
const names = "Kratos- Atreus- Freya- Hela- Thor- Odin";
|
||||
// notice separator is a dash and a space
|
||||
names.split("- ");
|
||||
// output is [ "Kratos", "Atreus", "Freya", "Hela", "Thor", "Odin" ]
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -17,14 +17,16 @@ localeTitle: String.prototype.substr
|
||||
|
||||
#### أمثلة:
|
||||
|
||||
`let str = "Hello world!";
|
||||
let res = str.substr(1, 4);
|
||||
`
|
||||
```JavaScript
|
||||
let str = "Hello world!";
|
||||
let res = str.substr(1, 4);
|
||||
```
|
||||
|
||||
ستكون نتيجة الدقة:
|
||||
|
||||
`ello
|
||||
`
|
||||
```
|
||||
ello
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -10,18 +10,20 @@ localeTitle: String.prototype.substring
|
||||
|
||||
أمثلة:
|
||||
|
||||
`"Hello, campers".substring(7, 14);
|
||||
// output is "campers"
|
||||
|
||||
"Hello, world".substring(0, 5);
|
||||
// output is "Hello"
|
||||
`
|
||||
```js
|
||||
"Hello, campers".substring(7, 14);
|
||||
// output is "campers"
|
||||
|
||||
"Hello, world".substring(0, 5);
|
||||
// output is "Hello"
|
||||
```
|
||||
|
||||
يمكنك أيضًا حذف معلمة فهرس الأحرف الأخيرة ، وسيتم استخراج التسلسل الفرعي من فهرس البدء حتى نهاية السلسلة. مثال:
|
||||
|
||||
`"Hello, campers!".substring(7);
|
||||
// output is "campers!"
|
||||
`
|
||||
```js
|
||||
"Hello, campers!".substring(7);
|
||||
// output is "campers!"
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -8,9 +8,10 @@ localeTitle: String.prototype.trim
|
||||
|
||||
أمثلة:
|
||||
|
||||
`" Hello, campers. I have spaces on both ends! ".trim();
|
||||
// output is "Hello, campers. I have spaces on both ends!"
|
||||
`
|
||||
```js
|
||||
" Hello, campers. I have spaces on both ends! ".trim();
|
||||
// output is "Hello, campers. I have spaces on both ends!"
|
||||
```
|
||||
|
||||
`trim()` لا يزيل فقط أحرف الفضاء. يزيل أي حرف مسافة بيضاء ، مثل علامات التبويب ، فواصل الأسطر ، فواصل عدم الانكسار ، إلخ.
|
||||
|
||||
|
@ -12,16 +12,17 @@ localeTitle: الوضع الصارم
|
||||
|
||||
يمكن أن تتعايش شفرة الأسلوب الصارم ورمز الوضع غير المقيد في نفس البرنامج النصي.
|
||||
|
||||
`// Non-strict code...
|
||||
|
||||
(function(){
|
||||
"use strict";
|
||||
|
||||
// Define your library strictly...
|
||||
})();
|
||||
|
||||
// Non-strict code...
|
||||
`
|
||||
```javascript
|
||||
// Non-strict code...
|
||||
|
||||
(function(){
|
||||
"use strict";
|
||||
|
||||
// Define your library strictly...
|
||||
})();
|
||||
|
||||
// Non-strict code...
|
||||
```
|
||||
|
||||
## استدعاء وضع صارم
|
||||
|
||||
@ -29,24 +30,26 @@ localeTitle: الوضع الصارم
|
||||
|
||||
**وضع صارم للنصوص**
|
||||
|
||||
`// Whole-script strict mode syntax
|
||||
|
||||
"use strict";
|
||||
var v = "Hi! I'm a strict mode script!";
|
||||
`
|
||||
```javascript
|
||||
// Whole-script strict mode syntax
|
||||
|
||||
"use strict";
|
||||
var v = "Hi! I'm a strict mode script!";
|
||||
```
|
||||
|
||||
**وضع صارم للوظائف**
|
||||
|
||||
`function strict(){
|
||||
// Function-level strict mode syntax
|
||||
|
||||
'use strict';
|
||||
function nested() { return "And so am I!"; }
|
||||
return "Hi! I'm a strict mode function! " + nested();
|
||||
}
|
||||
|
||||
function notStrict() { return "I'm not strict."; }
|
||||
`
|
||||
```javascript
|
||||
function strict(){
|
||||
// Function-level strict mode syntax
|
||||
|
||||
'use strict';
|
||||
function nested() { return "And so am I!"; }
|
||||
return "Hi! I'm a strict mode function! " + nested();
|
||||
}
|
||||
|
||||
function notStrict() { return "I'm not strict."; }
|
||||
```
|
||||
|
||||
**في الأساس ، يساعدك على ارتكاب أخطاء أقل ، من خلال اكتشاف الأشياء التي قد تؤدي إلى حدوث كسر والتي لا يتم اكتشافها بشكل طبيعي (الوضع غير الصارم).**
|
||||
|
||||
|
@ -8,17 +8,18 @@ localeTitle: تبديل العبارات
|
||||
|
||||
### بناء الجملة:
|
||||
|
||||
`switch(expression) {
|
||||
case 1:
|
||||
console.log('1');
|
||||
break;
|
||||
case 2:
|
||||
console.log('2');
|
||||
break;
|
||||
default:
|
||||
console.log('No true condition, default');
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
switch(expression) {
|
||||
case 1:
|
||||
console.log('1');
|
||||
break;
|
||||
case 2:
|
||||
console.log('2');
|
||||
break;
|
||||
default:
|
||||
console.log('No true condition, default');
|
||||
}
|
||||
```
|
||||
|
||||
يظهر المقتطف أعلاه بناء الجملة لبيان `switch` أساسي. في هذا المثال ، هناك 3 سيناريوهات مختلفة لـ:
|
||||
|
||||
@ -32,19 +33,20 @@ localeTitle: تبديل العبارات
|
||||
|
||||
فمثلا:
|
||||
|
||||
`var someValue;
|
||||
var expression = someValue;
|
||||
switch(expression){
|
||||
case someValue:
|
||||
console.log('10'); // 10 would be printed to the console
|
||||
break;
|
||||
case 23:
|
||||
console.log('12');
|
||||
break;
|
||||
default:
|
||||
console.log('No matches');
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
var someValue;
|
||||
var expression = someValue;
|
||||
switch(expression){
|
||||
case someValue:
|
||||
console.log('10'); // 10 would be printed to the console
|
||||
break;
|
||||
case 23:
|
||||
console.log('12');
|
||||
break;
|
||||
default:
|
||||
console.log('No matches');
|
||||
}
|
||||
```
|
||||
|
||||
ملاحظة: يمكن أن يكون `expression` في المقتطف أعلاه عبارة عن سلسلة أو رقم.
|
||||
|
||||
@ -52,17 +54,18 @@ localeTitle: تبديل العبارات
|
||||
|
||||
مطلوب الكلمة الأساسية `break` في كل حالة للتأكد من أن يتم تنفيذ التعليمات البرمجية فقط في هذه الحالة. بدون الفاصل ، يمكن تنفيذ عدة حالات. عندما تصل JavaScript إلى كلمة رئيسية `break` ، فإنها `break` عن كتلة المحول. إذا تم ترك `break` خارج المثال أعلاه ، فهذا ما سيحدث:
|
||||
|
||||
`var expression = 1;
|
||||
switch(expression) {
|
||||
case 1:
|
||||
console.log('1'); // 1 would be printed to console
|
||||
case 2: // As there is no break after case 1, this case is also executed.
|
||||
console.log('2'); // 2 would be printed to the console.
|
||||
break; // break -> Switch statement is exited
|
||||
default:
|
||||
console.log('No true condition, default');
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
var expression = 1;
|
||||
switch(expression) {
|
||||
case 1:
|
||||
console.log('1'); // 1 would be printed to console
|
||||
case 2: // As there is no break after case 1, this case is also executed.
|
||||
console.log('2'); // 2 would be printed to the console.
|
||||
break; // break -> Switch statement is exited
|
||||
default:
|
||||
console.log('No true condition, default');
|
||||
}
|
||||
```
|
||||
|
||||
### تنفيذ حالات متعددة:
|
||||
|
||||
@ -70,19 +73,20 @@ localeTitle: تبديل العبارات
|
||||
|
||||
على سبيل المثال:
|
||||
|
||||
`switch (day) {
|
||||
case 4:
|
||||
case 5:
|
||||
console.log('it is nearly the weekend');
|
||||
break;
|
||||
case 0:
|
||||
case 6:
|
||||
console.log('it is the weekend');
|
||||
break;
|
||||
default:
|
||||
console.log('Looking forward to the Weekend');
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
switch (day) {
|
||||
case 4:
|
||||
case 5:
|
||||
console.log('it is nearly the weekend');
|
||||
break;
|
||||
case 0:
|
||||
case 6:
|
||||
console.log('it is the weekend');
|
||||
break;
|
||||
default:
|
||||
console.log('Looking forward to the Weekend');
|
||||
}
|
||||
```
|
||||
|
||||
في المقتطف أعلاه:
|
||||
|
||||
|
@ -4,8 +4,9 @@ localeTitle: مشغل ثلاثي
|
||||
---
|
||||
يستبدل مشغل Ternary كتلة `if` / `else` بتنسيق مكثف. ما يلي هو الشكل العام للمشغل الثلاثي.
|
||||
|
||||
`condition ? expr1 : expr2
|
||||
`
|
||||
```
|
||||
condition ? expr1 : expr2
|
||||
```
|
||||
|
||||
## وصف
|
||||
|
||||
@ -13,10 +14,11 @@ localeTitle: مشغل ثلاثي
|
||||
|
||||
على سبيل المثال ، لعرض رسالة مختلفة بناءً على قيمة متغير isMember ، يمكنك استخدام هذا البيان:
|
||||
|
||||
`let isMember = true;
|
||||
|
||||
let message = isMember ? 'Welcome Back!' : 'You need to login'; // 'Welcome Back'
|
||||
`
|
||||
```javascript
|
||||
let isMember = true;
|
||||
|
||||
let message = isMember ? 'Welcome Back!' : 'You need to login'; // 'Welcome Back'
|
||||
```
|
||||
|
||||
ومن الطرق المفيدة الأخرى لاستخدام المشغل الثلاثي هو حثه على تنفيذ وظيفة أو طريقة بشكل مشروط
|
||||
|
||||
|
@ -10,13 +10,14 @@ localeTitle: هذا المرجع
|
||||
|
||||
عندما يتم استدعاء دالة في النطاق العمومي ، يكون `this` المرجع بشكل افتراضي مرتبطًا **بالعنصر العام** ( `window` في المستعرض ، أو `global` في Node.js). فمثلا:
|
||||
|
||||
`function foo() {
|
||||
this.a = 2;
|
||||
}
|
||||
|
||||
foo();
|
||||
console.log(a); // 2
|
||||
`
|
||||
```javascript
|
||||
function foo() {
|
||||
this.a = 2;
|
||||
}
|
||||
|
||||
foo();
|
||||
console.log(a); // 2
|
||||
```
|
||||
|
||||
ملاحظة: إذا قمت بالإعلان عن الدالة `foo()` أعلاه في الوضع المقيد ، فإنك تقوم باستدعاء هذه الوظيفة في النطاق العالمي ، فسيكون `this` `undefined` `this.a = 2` التعيين هذا. `this.a = 2` إلى `this.a = 2` استثناء `Uncaught TypeError` .
|
||||
|
||||
@ -24,17 +25,18 @@ localeTitle: هذا المرجع
|
||||
|
||||
دعونا نفحص المثال أدناه:
|
||||
|
||||
`function foo() {
|
||||
this.a = 2;
|
||||
}
|
||||
|
||||
var obj = {
|
||||
foo: foo
|
||||
};
|
||||
|
||||
obj.foo();
|
||||
console.log(obj.a); // 2
|
||||
`
|
||||
```javascript
|
||||
function foo() {
|
||||
this.a = 2;
|
||||
}
|
||||
|
||||
var obj = {
|
||||
foo: foo
|
||||
};
|
||||
|
||||
obj.foo();
|
||||
console.log(obj.a); // 2
|
||||
```
|
||||
|
||||
بوضوح ، في المقتطف أعلاه ، يتم استدعاء الدالة `foo()` مع _السياق_ هو كائن `obj` `this` الإشارة مرتبطة الآن بـ `obj` . لذلك عندما يتم استدعاء دالة مع كائن سياق ، سيكون `this` المرجع مرتبطًا بهذا الكائن.
|
||||
|
||||
@ -42,12 +44,13 @@ localeTitle: هذا المرجع
|
||||
|
||||
`.call` ، `.apply` و `.bind` يمكن لجميع استخدامها في موقع الدعوة إلى ربط صراحة `this` . باستخدام `.bind(this)` هو شيء قد تراه في الكثير من مكونات React.
|
||||
|
||||
`var foo = function() {
|
||||
console.log(this.bar)
|
||||
}
|
||||
|
||||
foo.call({ bar: 1 }) // 1
|
||||
`
|
||||
```javascript
|
||||
var foo = function() {
|
||||
console.log(this.bar)
|
||||
}
|
||||
|
||||
foo.call({ bar: 1 }) // 1
|
||||
```
|
||||
|
||||
في ما يلي مثال سريع عن كيفية استخدام كل منها لربط `this` :
|
||||
|
||||
@ -57,15 +60,16 @@ localeTitle: هذا المرجع
|
||||
|
||||
### القاعدة 4
|
||||
|
||||
`function Point2D(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
|
||||
var p1 = new Point2D(1, 2);
|
||||
console.log(p1.x); // 1
|
||||
console.log(p1.y); // 2
|
||||
`
|
||||
```javascript
|
||||
function Point2D(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
|
||||
var p1 = new Point2D(1, 2);
|
||||
console.log(p1.x); // 1
|
||||
console.log(p1.y); // 2
|
||||
```
|
||||
|
||||
الشيء الذي يجب أن تلاحظه هو الدالة `Point2D` التي يتم `Point2D` رئيسية `new` ، `this` المرجع مرتبط بـ كائن `p1` . لذلك عندما يتم استدعاء دالة بكلمة رئيسية `new` ، فإنها ستنشئ كائنًا جديدًا وستكون `this` الإشارة مرتبطة بهذا الكائن.
|
||||
|
||||
@ -77,16 +81,17 @@ localeTitle: هذا المرجع
|
||||
|
||||
خذ بعين الاعتبار هذا المثال لفئة Cat باستخدام طريقة تسمى `makeSound()` ، متبعاً النمط في القاعدة 4 (أعلاه) مع دالة منشئ وكلمة رئيسية `new` .
|
||||
|
||||
`var Cat = function(name, sound) {
|
||||
this.name = name;
|
||||
this.sound = sound;
|
||||
this.makeSound = function() {
|
||||
console.log( this.name + ' says: ' + this.sound );
|
||||
};
|
||||
}
|
||||
var kitty = new Cat('Fat Daddy', 'Mrrooowww');
|
||||
kitty.makeSound(); // Fat Daddy says: Mrrooowww
|
||||
`
|
||||
```javascript
|
||||
var Cat = function(name, sound) {
|
||||
this.name = name;
|
||||
this.sound = sound;
|
||||
this.makeSound = function() {
|
||||
console.log( this.name + ' says: ' + this.sound );
|
||||
};
|
||||
}
|
||||
var kitty = new Cat('Fat Daddy', 'Mrrooowww');
|
||||
kitty.makeSound(); // Fat Daddy says: Mrrooowww
|
||||
```
|
||||
|
||||
الآن دعونا نحاول إعطاء القطة وسيلة `annoy()` الناس عن طريق تكرار صوته 100 مرة ، مرة واحدة كل نصف ثانية.
|
||||
|
||||
@ -117,50 +122,52 @@ localeTitle: هذا المرجع
|
||||
|
||||
1) قبل إنشاء إطار جديد، تعيين `this` إلى متغير محلي يدعى `me` ، أو `self` ، أو ما تريد أن نسميها، واستخدام هذا المتغير داخل الاستدعاء.
|
||||
|
||||
`var Cat = function(name, sound) {
|
||||
this.name = name;
|
||||
this.sound = sound;
|
||||
this.makeSound = function() {
|
||||
console.log( this.name + ' says: ' + this.sound );
|
||||
};
|
||||
this.annoy = function() {
|
||||
var count = 0, max = 100;
|
||||
var self = this;
|
||||
var t = setInterval(function() {
|
||||
self.makeSound();
|
||||
count++;
|
||||
if (count === max) {
|
||||
clearTimeout(t);
|
||||
}
|
||||
}, 500);
|
||||
};
|
||||
}
|
||||
var kitty = new Cat('Fat Daddy', 'Mrrooowww');
|
||||
kitty.annoy();
|
||||
`
|
||||
```javascript
|
||||
var Cat = function(name, sound) {
|
||||
this.name = name;
|
||||
this.sound = sound;
|
||||
this.makeSound = function() {
|
||||
console.log( this.name + ' says: ' + this.sound );
|
||||
};
|
||||
this.annoy = function() {
|
||||
var count = 0, max = 100;
|
||||
var self = this;
|
||||
var t = setInterval(function() {
|
||||
self.makeSound();
|
||||
count++;
|
||||
if (count === max) {
|
||||
clearTimeout(t);
|
||||
}
|
||||
}, 500);
|
||||
};
|
||||
}
|
||||
var kitty = new Cat('Fat Daddy', 'Mrrooowww');
|
||||
kitty.annoy();
|
||||
```
|
||||
|
||||
2) باستخدام ES6 ، يمكنك تجنب تعيين `this` للمتغير المحلي باستخدام وظيفة السهم ، والتي تربط `this` بسياق الرمز المحيط حيث تم تعريفه.
|
||||
|
||||
`var Cat = function(name, sound) {
|
||||
this.name = name;
|
||||
this.sound = sound;
|
||||
this.makeSound = function() {
|
||||
console.log( this.name + ' says: ' + this.sound );
|
||||
};
|
||||
this.annoy = function() {
|
||||
var count = 0, max = 100;
|
||||
var t = setInterval(() => {
|
||||
this.makeSound();
|
||||
count++;
|
||||
if (count === max) {
|
||||
clearTimeout(t);
|
||||
}
|
||||
}, 500);
|
||||
};
|
||||
}
|
||||
var kitty = new Cat('Fat Daddy', 'Mrrooowww');
|
||||
kitty.annoy();
|
||||
`
|
||||
```javascript
|
||||
var Cat = function(name, sound) {
|
||||
this.name = name;
|
||||
this.sound = sound;
|
||||
this.makeSound = function() {
|
||||
console.log( this.name + ' says: ' + this.sound );
|
||||
};
|
||||
this.annoy = function() {
|
||||
var count = 0, max = 100;
|
||||
var t = setInterval(() => {
|
||||
this.makeSound();
|
||||
count++;
|
||||
if (count === max) {
|
||||
clearTimeout(t);
|
||||
}
|
||||
}, 500);
|
||||
};
|
||||
}
|
||||
var kitty = new Cat('Fat Daddy', 'Mrrooowww');
|
||||
kitty.annoy();
|
||||
```
|
||||
|
||||
### موارد آخرى
|
||||
|
||||
|
@ -12,16 +12,17 @@ localeTitle: أحداث التوقيت
|
||||
|
||||
مثال `setTimeout()` :
|
||||
|
||||
`var timeoutID;
|
||||
|
||||
function delayTimer() {
|
||||
timeoutID = setTimeout(delayedFunction, 3000);
|
||||
}
|
||||
|
||||
function delayedFunction() {
|
||||
alert(“Three seconds have elapsed.”);
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
var timeoutID;
|
||||
|
||||
function delayTimer() {
|
||||
timeoutID = setTimeout(delayedFunction, 3000);
|
||||
}
|
||||
|
||||
function delayedFunction() {
|
||||
alert(“Three seconds have elapsed.”);
|
||||
}
|
||||
```
|
||||
|
||||
عندما يتم استدعاء الدالة delayTimer فإنه سيتم تشغيل setTimeout. بعد مرور 3 ثوانٍ ، سيتم تنفيذ الأمر delayedFunction الذي سيرسل تنبيهًا.
|
||||
|
||||
@ -29,16 +30,17 @@ localeTitle: أحداث التوقيت
|
||||
|
||||
مثال `setInterval()` :
|
||||
|
||||
`var intervalID;
|
||||
|
||||
function repeatEverySecond() {
|
||||
intervalID = setInterval(sendMessage, 1000);
|
||||
}
|
||||
|
||||
function sendMessage() {
|
||||
console.log(“One second elapsed.”);
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
var intervalID;
|
||||
|
||||
function repeatEverySecond() {
|
||||
intervalID = setInterval(sendMessage, 1000);
|
||||
}
|
||||
|
||||
function sendMessage() {
|
||||
console.log(“One second elapsed.”);
|
||||
}
|
||||
```
|
||||
|
||||
عند استدعاء التعليمات البرمجية الخاصة بك الدالة repeatEverySecond سيتم تشغيله setInterval. سوف setInterval تشغيل وظيفة sendMessage كل 1000 ميلي ثانية.
|
||||
|
||||
@ -52,17 +54,18 @@ localeTitle: أحداث التوقيت
|
||||
|
||||
مثال:
|
||||
|
||||
`var timeoutID;
|
||||
|
||||
function delayTimer() {
|
||||
timeoutID = setTimeout(delayedFunction, 3000);
|
||||
}
|
||||
|
||||
function delayedFunction() {
|
||||
alert(“Three seconds have elapsed.”);
|
||||
}
|
||||
|
||||
function clearAlert() {
|
||||
clearTimeout(timeoutID);
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
var timeoutID;
|
||||
|
||||
function delayTimer() {
|
||||
timeoutID = setTimeout(delayedFunction, 3000);
|
||||
}
|
||||
|
||||
function delayedFunction() {
|
||||
alert(“Three seconds have elapsed.”);
|
||||
}
|
||||
|
||||
function clearAlert() {
|
||||
clearTimeout(timeoutID);
|
||||
}
|
||||
```
|
@ -13,11 +13,13 @@ localeTitle: أضف خصائص جديدة إلى كائن JavaScript
|
||||
|
||||
إليك كيفية استخدام تدرج قوس:
|
||||
|
||||
`myObject['bark'] = "woof-woof";
|
||||
`
|
||||
```javascript
|
||||
myObject['bark'] = "woof-woof";
|
||||
```
|
||||
|
||||
باستخدام تدرج القوس ، يمكننا استخدام المتغيرات كأسماء للممتلكات:
|
||||
|
||||
`var dynamicProperty = "bark";
|
||||
myObject[dynamicProperty] = "woof-woof";
|
||||
`
|
||||
```javascript
|
||||
var dynamicProperty = "bark";
|
||||
myObject[dynamicProperty] = "woof-woof";
|
||||
```
|
@ -12,9 +12,10 @@ localeTitle: تعليق كود جافاسكريبت الخاص بك
|
||||
|
||||
* سيعلق تعليق slash-star-star-slash كل شيء بين `/*` و `*/` characters:
|
||||
|
||||
`/*
|
||||
This is
|
||||
a multi-line comment
|
||||
(comment block)
|
||||
*/
|
||||
`
|
||||
```javascript
|
||||
/*
|
||||
This is
|
||||
a multi-line comment
|
||||
(comment block)
|
||||
*/
|
||||
```
|
@ -8,13 +8,15 @@ localeTitle: تصحيح ملفات عقدة باستخدام أوامر CLI
|
||||
|
||||
لنفترض أن لديك ملفًا باسم `contents.js` . يمكنك تشغيل الملف باستخدام أمر `node` .
|
||||
|
||||
`node contents.js
|
||||
`
|
||||
```bash
|
||||
node contents.js
|
||||
```
|
||||
|
||||
يجب أن يكون هذا معروفًا لك منذ كتابة رمز Node.js. والآن يجب تصحيح أي أخطاء تنبثق. لتشغيل الملف في وضع التصحيح إلحاق الكلمة `inspect` أثناء تشغيل الملف.
|
||||
|
||||
`node inspect contents.js
|
||||
`
|
||||
```bash
|
||||
node inspect contents.js
|
||||
```
|
||||
|
||||
الآن سيفتح هذا الأمر ملفك في وضع التصحيح. من الآن فصاعدًا ، يمكنك التنقل خلال سطر واحد من الكود في كل مرة بالضغط على المفتاح **N** في لوحة المفاتيح.
|
||||
|
||||
|
@ -15,16 +15,19 @@ localeTitle: قم بتعريف كائنات JavaScript كمتغيرات
|
||||
|
||||
باستخدام ميزة التدوين النقطي:
|
||||
|
||||
`console.log(car.wheels); // 4
|
||||
`
|
||||
```javascript
|
||||
console.log(car.wheels); // 4
|
||||
```
|
||||
|
||||
باستخدام تدرج قوس:
|
||||
|
||||
`console.log(car["wheels"]); // 1
|
||||
`
|
||||
```javascript
|
||||
console.log(car["wheels"]); // 1
|
||||
```
|
||||
|
||||
استخدام تدرج قوس ديناميكي:
|
||||
|
||||
`var seatsProperty = "seats";
|
||||
console.log(car[seatsProperty]); // 5
|
||||
`
|
||||
```javascript
|
||||
var seatsProperty = "seats";
|
||||
console.log(car[seatsProperty]); // 5
|
||||
```
|
@ -27,11 +27,12 @@ localeTitle: حذف الخصائص من كائن JavaScript
|
||||
|
||||
## مثال
|
||||
|
||||
`var person = {name:'Jay', age:'52'};
|
||||
delete person['age'];
|
||||
|
||||
console.log(person); //{name:'Jay'}
|
||||
`
|
||||
```js
|
||||
var person = {name:'Jay', age:'52'};
|
||||
delete person['age'];
|
||||
|
||||
console.log(person); //{name:'Jay'}
|
||||
```
|
||||
|
||||
## قيمة الإرجاع
|
||||
|
||||
|
@ -10,16 +10,17 @@ localeTitle: اكتشاف أحداث النقرات الأصلية
|
||||
|
||||
#### هنا مثال على استخدام هذه الطريقة
|
||||
|
||||
`// Assume there is a button in the HTML
|
||||
const button = document.querySelector('button');
|
||||
|
||||
button.addEventListener('click', (e) => {
|
||||
if (e.isTrusted) {
|
||||
console.log('Button clicked by a real user');
|
||||
} else {
|
||||
console.log('Button click simulated by a script');
|
||||
}
|
||||
});
|
||||
|
||||
button.click() // Outputs "Button click simulated by a script"
|
||||
`
|
||||
```javascript
|
||||
// Assume there is a button in the HTML
|
||||
const button = document.querySelector('button');
|
||||
|
||||
button.addEventListener('click', (e) => {
|
||||
if (e.isTrusted) {
|
||||
console.log('Button clicked by a real user');
|
||||
} else {
|
||||
console.log('Button click simulated by a script');
|
||||
}
|
||||
});
|
||||
|
||||
button.click() // Outputs "Button click simulated by a script"
|
||||
```
|
@ -12,10 +12,11 @@ localeTitle: كيف تصنع عرض الشرائح
|
||||
|
||||
\`\` \`أتش تي أم أل عرض الشرائح
|
||||
|
||||
`### Write styles to hide slides and show only one slide.
|
||||
|
||||
For hide the slides you have to give them a default style and only show one slide if this is active or you want to show it.
|
||||
`
|
||||
```
|
||||
### Write styles to hide slides and show only one slide.
|
||||
|
||||
For hide the slides you have to give them a default style and only show one slide if this is active or you want to show it.
|
||||
```
|
||||
|
||||
المغلق \[data-component = "slideshow"\] .slide { عرض لا شيء؛ }
|
||||
|
||||
|
@ -22,9 +22,10 @@ localeTitle: كيفية إنشاء النوافذ المنبثقة
|
||||
|
||||
X
|
||||
|
||||
`### Step 2 CSS
|
||||
We will choose our own style for the popup window. Notice: the popup div should be hidden at first, so in the style I will select display: none;
|
||||
`
|
||||
```
|
||||
### Step 2 CSS
|
||||
We will choose our own style for the popup window. Notice: the popup div should be hidden at first, so in the style I will select display: none;
|
||||
```
|
||||
|
||||
المغلق .popup _main_ div { الموقع: ثابت العرض: 800 بكسل ؛ الارتفاع: 400 بكسل ؛ border: 2px solid black؛ border-radius: 5px؛ لون الخلفية: #fff؛ اليسار: 50 ٪. الهامش الأيسر: -400 بكسل ؛ أعلى: 50 ٪ ؛ الهامش العلوي: - 250 بكسل ؛ عرض لا شيء؛
|
||||
|
||||
@ -34,8 +35,9 @@ X
|
||||
|
||||
}
|
||||
|
||||
`### Step 3 JavaScript
|
||||
`
|
||||
```
|
||||
### Step 3 JavaScript
|
||||
```
|
||||
|
||||
شبيبة // بادئ ذي بدء ، سوف أقوم بتهيئة متغيراتي // اختر العناصر التي سنستخدمها من DOM // أقوم بإضافة حدث en في الزر الذي سيؤدي إلى تشغيل وظيفة من شأنها تغيير نمط العرض المنبثق من لا شيء إلى حظر
|
||||
|
||||
|
@ -10,10 +10,11 @@ localeTitle: صفحة يعيد التوجيه باستخدام جافا سكري
|
||||
|
||||
هناك عدة طرق مختلفة للقيام بذلك ، ولكن أبسط طريقة هي استخدام الكائن `window.location` لإرسال المستخدم إلى الصفحة التي ترغب في إعادة توجيههم إليها. يمكن أن يستخدم كائن `window.location` أي قيمة URL صالحة مثل `http://www.yoururl.com` ، `somepage.html` ، إلخ.
|
||||
|
||||
`window.location = 'http://www.yoururl.com';
|
||||
// window.location = 'somepage.html';
|
||||
// etc.
|
||||
`
|
||||
```javascript
|
||||
window.location = 'http://www.yoururl.com';
|
||||
// window.location = 'somepage.html';
|
||||
// etc.
|
||||
```
|
||||
|
||||
### حالة خاصة إعادة توجيه
|
||||
|
||||
@ -21,23 +22,25 @@ localeTitle: صفحة يعيد التوجيه باستخدام جافا سكري
|
||||
|
||||
فيما يلي مثال على استخدام هذه الطريقة (ستظل تعمل بنفس طريقة استخدام `window.location` في المتصفحات الأخرى):
|
||||
|
||||
`window.location.replace('http://www.yoururl.com');
|
||||
// window.location.replace('somepage.html');
|
||||
// etc.
|
||||
`
|
||||
```javascript
|
||||
window.location.replace('http://www.yoururl.com');
|
||||
// window.location.replace('somepage.html');
|
||||
// etc.
|
||||
```
|
||||
|
||||
### A إعادة توجيه توقيت بسيط باستخدام JS
|
||||
|
||||
هنا مثال على إعادة توجيه بسيطة موقوتة باستخدام وظيفة `setTimeout()` . تُعد عمليات إعادة التوجيه المحددة التوقيت مفيدة حتى يمكنك شرحها للمستخدم ، عبر المحتوى الموجود على صفحة إعادة التوجيه ، والسبب في إعادة توجيهها إلى صفحة أخرى.
|
||||
|
||||
`// the 5000 below is 5000 milliseconds which equals 5 seconds until the redirect happens
|
||||
// keep in mind that 1 second = 1000 milliseconds
|
||||
setTimeout(function () {
|
||||
window.location = 'http://www.yoururl.com';
|
||||
// window.location = 'somepage.html';
|
||||
// etc.
|
||||
}, 5000);
|
||||
`
|
||||
```javascript
|
||||
// the 5000 below is 5000 milliseconds which equals 5 seconds until the redirect happens
|
||||
// keep in mind that 1 second = 1000 milliseconds
|
||||
setTimeout(function () {
|
||||
window.location = 'http://www.yoururl.com';
|
||||
// window.location = 'somepage.html';
|
||||
// etc.
|
||||
}, 5000);
|
||||
```
|
||||
|
||||
### تراجع
|
||||
|
||||
@ -45,11 +48,11 @@ localeTitle: صفحة يعيد التوجيه باستخدام جافا سكري
|
||||
|
||||
ضع عنصر `<meta>` داخل `<head>` للمستند الخاص بك مثل:
|
||||
|
||||
`
|
||||
<head>
|
||||
<!-- Change the 6 below to however many seconds you wish to wait until redirection to the new page. Change the portion after "URL=" to the URL of your choice. This can be a local page: URL=somepage.html, a web address: URL=http://www.yoururl.com, or any other valid URL. It is important to note the semicolon between the number of seconds to refresh and the URL. -->
|
||||
<meta http-equiv="refresh" content="6;URL=http://www.yoururl.com">
|
||||
</head>
|
||||
`
|
||||
```html
|
||||
<head>
|
||||
<!-- Change the 6 below to however many seconds you wish to wait until redirection to the new page. Change the portion after "URL=" to the URL of your choice. This can be a local page: URL=somepage.html, a web address: URL=http://www.yoururl.com, or any other valid URL. It is important to note the semicolon between the number of seconds to refresh and the URL. -->
|
||||
<meta http-equiv="refresh" content="6;URL=http://www.yoururl.com">
|
||||
</head>
|
||||
```
|
||||
|
||||
ضع في اعتبارك أنه ليس كل المتصفحات تدعم العنصر `<meta>` (أنا أبحث عنك ، والإصدارات الأقدم من IE ، و Safari) ، ولكن معظم المتصفحات الحديثة تفعل (Microsoft Edge ، Google Chrome ، Mozilla Firefox ، Opera).
|
@ -20,13 +20,13 @@ localeTitle: ماذا يفعل جافا سكريبت Void 0 Mean
|
||||
|
||||
#### مثال 1 نموذج مع void Javascript (0):
|
||||
|
||||
`
|
||||
<html>
|
||||
<body>
|
||||
<a href="javascript:void(0);alert('Hello ! I am here')">Click Me</a>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<a href="javascript:void(0);alert('Hello ! I am here')">Click Me</a>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### انتاج :
|
||||
|
||||
@ -36,13 +36,13 @@ localeTitle: ماذا يفعل جافا سكريبت Void 0 Mean
|
||||
|
||||
#### مثال 2 نموذج مع void Javascript (0):
|
||||
|
||||
`
|
||||
<html>
|
||||
<body>
|
||||
<a href="javascript:void(0)" ondblclick="alert('Hi,i didnt refresh the page')" )>Click Me</a>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<a href="javascript:void(0)" ondblclick="alert('Hi,i didnt refresh the page')" )>Click Me</a>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### انتاج :
|
||||
|
||||
@ -50,14 +50,14 @@ localeTitle: ماذا يفعل جافا سكريبت Void 0 Mean
|
||||
|
||||
#### مثال 3 نموذج مع void Javascript (0):
|
||||
|
||||
`
|
||||
<html>
|
||||
<body>
|
||||
<a href="javascript:void(0);https://www.google.co.in/"
|
||||
ondblclick="alert('Hello !! You will see me and not get redirected to google.com ')">Click Me</a>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<a href="javascript:void(0);https://www.google.co.in/"
|
||||
ondblclick="alert('Hello !! You will see me and not get redirected to google.com ')">Click Me</a>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### انتاج :
|
||||
|
||||
@ -65,13 +65,13 @@ localeTitle: ماذا يفعل جافا سكريبت Void 0 Mean
|
||||
|
||||
#### مثال نموذج دون void Javascript (0):
|
||||
|
||||
`
|
||||
<html>
|
||||
<body>
|
||||
<a href="https://www.google.co.in/" ondblclick="alert('Hello !! You will see me and then get redirected to google.com even if not needed')">Click Me</a>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<a href="https://www.google.co.in/" ondblclick="alert('Hello !! You will see me and then get redirected to google.com even if not needed')">Click Me</a>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### انتاج :
|
||||
|
||||
|
@ -10,77 +10,85 @@ localeTitle: نوع من
|
||||
|
||||
فمثلا:
|
||||
|
||||
`var x = 12345; // number
|
||||
x = 'string'; // string
|
||||
x = { key: 'value' }; // object
|
||||
`
|
||||
```javascript
|
||||
var x = 12345; // number
|
||||
x = 'string'; // string
|
||||
x = { key: 'value' }; // object
|
||||
```
|
||||
|
||||
كما ترى من المثال أعلاه ، يمكن للمتغير في JavaScript تغيير الأنواع خلال تنفيذ البرنامج. يمكن أن يكون من الصعب تعقب كمبرمج ، وهذا هو المكان الذي يكون فيه عامل التشغيل `typeof` مفيدًا.
|
||||
|
||||
عامل التشغيل `typeof` بإرجاع سلسلة تمثل النوع الحالي للمتغير. يمكنك استخدامه عن طريق كتابة `typeof(variable)` أو `typeof variable` . بالعودة إلى المثال السابق ، يمكنك استخدامه للتحقق من نوع المتغير `x` في كل مرحلة:
|
||||
|
||||
`var x = 12345;
|
||||
console.log(typeof x) // number
|
||||
x = 'string';
|
||||
console.log(typeof x) // string
|
||||
x = { key: 'value' };
|
||||
console.log(typeof x) // object
|
||||
`
|
||||
```javascript
|
||||
var x = 12345;
|
||||
console.log(typeof x) // number
|
||||
x = 'string';
|
||||
console.log(typeof x) // string
|
||||
x = { key: 'value' };
|
||||
console.log(typeof x) // object
|
||||
```
|
||||
|
||||
هذا يمكن أن يكون مفيدا للتحقق من نوع متغير في وظيفة والاستمرار حسب الاقتضاء.
|
||||
|
||||
في ما يلي مثال لدالة يمكن أن تأخذ متغيرًا هو سلسلة أو رقم:
|
||||
|
||||
`function doSomething(x) {
|
||||
if(typeof(x) === 'string') {
|
||||
alert('x is a string')
|
||||
} else if(typeof(x) === 'number') {
|
||||
alert('x is a number')
|
||||
}
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
function doSomething(x) {
|
||||
if(typeof(x) === 'string') {
|
||||
alert('x is a string')
|
||||
} else if(typeof(x) === 'number') {
|
||||
alert('x is a number')
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
طريقة أخرى لمشغل `typeof` يمكن أن تكون مفيدة عن طريق التأكد من تحديد متغير قبل محاولة الوصول إليه في التعليمات البرمجية. يمكن أن يساعد هذا في منع الأخطاء في أحد البرامج التي قد تحدث في حالة محاولة الوصول إلى متغير لم يتم تعريفه.
|
||||
|
||||
`function(x){
|
||||
if (typeof(x) === 'undefined') {
|
||||
console.log('variable x is not defined');
|
||||
return;
|
||||
}
|
||||
// continue with function here...
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
function(x){
|
||||
if (typeof(x) === 'undefined') {
|
||||
console.log('variable x is not defined');
|
||||
return;
|
||||
}
|
||||
// continue with function here...
|
||||
}
|
||||
```
|
||||
|
||||
قد لا يكون ناتج عامل التشغيل `typeof` دائمًا ما تتوقعه عند التحقق من وجود رقم.
|
||||
يمكن أن تتحول الأرقام إلى قيمة [NaN (ليس رقم)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN) لأسباب متعددة.
|
||||
|
||||
`console.log(typeof NaN); //"number"
|
||||
`
|
||||
```javascript
|
||||
console.log(typeof NaN); //"number"
|
||||
```
|
||||
|
||||
ربما حاولت ضرب رقم مع كائن لأنك نسيت الوصول إلى الرقم داخل الكائن.
|
||||
|
||||
`var x = 1;
|
||||
var y = { number: 2 };
|
||||
console.log(x * y); // NaN
|
||||
console.log(typeof (x * y)); // number
|
||||
`
|
||||
```javascript
|
||||
var x = 1;
|
||||
var y = { number: 2 };
|
||||
console.log(x * y); // NaN
|
||||
console.log(typeof (x * y)); // number
|
||||
```
|
||||
|
||||
عند التحقق من وجود رقم ، لا يكفي التحقق من إخراج `typeof` لرقم ، لأن `NaN` أيضًا
|
||||
يمر هذا الاختبار.
|
||||
تحقق هذه الوظيفة من الأرقام ، ولا تسمح أيضًا لقيمة `NaN` بالمرور.
|
||||
|
||||
`function isNumber(data) {
|
||||
return (typeof data === 'number' && !isNan(data));
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
function isNumber(data) {
|
||||
return (typeof data === 'number' && !isNan(data));
|
||||
}
|
||||
```
|
||||
|
||||
حتى ظننا أن هذه طريقة تحقق مفيدة ، يجب أن نكون حذرين لأن javascript يحتوي على بعض الأجزاء الغريبة وأحدها هو نتيجة `typeof` على تعليمات معينة. على سبيل المثال ، في javascript ، هناك الكثير من الأشياء `objects` يمكنك العثور عليها فقط.
|
||||
|
||||
`var x = [1,2,3,4];
|
||||
console.log(typeof x) // object
|
||||
|
||||
console.log(typeof null) // object
|
||||
`
|
||||
```javascript
|
||||
var x = [1,2,3,4];
|
||||
console.log(typeof x) // object
|
||||
|
||||
console.log(typeof null) // object
|
||||
```
|
||||
|
||||
### معلومات اكثر:
|
||||
|
||||
|
@ -8,11 +8,11 @@ JavaScript هي لغة برمجة HTML والويب. في HTML ، يجب إدر
|
||||
|
||||
### مثال
|
||||
|
||||
`
|
||||
<script>
|
||||
window.alert("This JavaScript Works!");
|
||||
</script>
|
||||
`
|
||||
```html
|
||||
<script>
|
||||
window.alert("This JavaScript Works!");
|
||||
</script>
|
||||
```
|
||||
|
||||
تذكر أيضًا أنه يمكنك وضع أي عدد من علامات `<script>` في مستند HTML.
|
||||
|
||||
@ -24,25 +24,25 @@ JavaScript هي لغة برمجة HTML والويب. في HTML ، يجب إدر
|
||||
|
||||
في هذا المثال ، يتم وضع JavaScript في قسم `<head>` من المستند. يتم إنشاء وظيفة **onClicked** ، والتي تسمى عند الضغط على زر.
|
||||
|
||||
`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script>
|
||||
function onClicked() {
|
||||
window.alert("Hi, there!");
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>JavaScript Testing</h1>
|
||||
<button type="button" onclick="onClicked()">Try it</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script>
|
||||
function onClicked() {
|
||||
window.alert("Hi, there!");
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>JavaScript Testing</h1>
|
||||
<button type="button" onclick="onClicked()">Try it</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### JavaScript في `<body>`
|
||||
|
||||
@ -74,8 +74,9 @@ JavaScript هي لغة برمجة HTML والويب. في HTML ، يجب إدر
|
||||
|
||||
##### script.js
|
||||
|
||||
`window.alert("Hi!");
|
||||
`
|
||||
```javascript
|
||||
window.alert("Hi!");
|
||||
```
|
||||
|
||||
يمكن تضمين هذا البرنامج النصي في مستند HTML على النحو التالي:
|
||||
|
||||
|
@ -8,10 +8,11 @@ localeTitle: نافذة تأكيد طريقة
|
||||
|
||||
على سبيل المثال ، لنفترض أن شخصًا ما قد نقر على الزر "حذف". يمكنك تشغيل التعليمة البرمجية التالية:
|
||||
|
||||
`if (window.confirm("Are you sure you want to delete this item?")) {
|
||||
// Delete the item
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
if (window.confirm("Are you sure you want to delete this item?")) {
|
||||
// Delete the item
|
||||
}
|
||||
```
|
||||
|
||||
الرسالة "هل أنت متأكد من أنك تريد حذف هذا العنصر؟" سوف تظهر في مربع الحوار. إذا قام المستخدم بالنقر فوق "موافق" ، ستعود طريقة التأكيد `true` وسيقوم المستعرض بتشغيل التعليمة البرمجية داخل بيان if. إذا نقر على "إلغاء" ، فستظهر هذه الطريقة `false` ولن يحدث أي شيء آخر. يوفر هذا بعض الحماية ضد شخص ما النقر فوق حذف بطريق الخطأ.
|
||||
|
||||
|
@ -25,28 +25,33 @@ _ملاحظة: تنطبق هذه الطرق على كل من أنواع تخزي
|
||||
|
||||
لتعيين البيانات ، نحتاج إلى إجراء ما يلي:
|
||||
|
||||
`localStorage.setItem('Name', 'somevalue');
|
||||
`
|
||||
```javascript
|
||||
localStorage.setItem('Name', 'somevalue');
|
||||
```
|
||||
|
||||
لاسترداد بعض البيانات من التخزين:
|
||||
|
||||
`localStorage.getItem('Name');
|
||||
`
|
||||
```javascript
|
||||
localStorage.getItem('Name');
|
||||
```
|
||||
|
||||
لإزالة أو حذف بعض البيانات ، يمكننا القيام بذلك:
|
||||
|
||||
`localStorage.removeItem('Name');
|
||||
`
|
||||
```javascript
|
||||
localStorage.removeItem('Name');
|
||||
```
|
||||
|
||||
لمسح السعة التخزينية بالكامل (وليس فقط عنصرًا فرديًا) ، يمكننا استخدام:
|
||||
|
||||
`localStorage.clear();
|
||||
`
|
||||
```javascript
|
||||
localStorage.clear();
|
||||
```
|
||||
|
||||
للحصول على عدد الخصائص في السعة التخزينية:
|
||||
|
||||
`localStorage.length;
|
||||
`
|
||||
```javascript
|
||||
localStorage.length;
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -21,13 +21,14 @@ localeTitle: نافذة طريقة مفتوحة
|
||||
|
||||
## مثال
|
||||
|
||||
`var windowObjectReference;
|
||||
var strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
|
||||
|
||||
function openRequestedPopup() {
|
||||
windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", strWindowFeatures);
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
var windowObjectReference;
|
||||
var strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
|
||||
|
||||
function openRequestedPopup() {
|
||||
windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", strWindowFeatures);
|
||||
}
|
||||
```
|
||||
|
||||
إذا كانت هناك نافذة تحمل الاسم بالفعل ، فسيتم تحميل strURL في النافذة الحالية. في هذه الحالة ، تكون قيمة الإرجاع للطريقة هي النافذة الموجودة ويتم تجاهل strWindowFeatures.
|
||||
|
||||
|
@ -14,37 +14,41 @@ localeTitle: نافذة setTimeout الطريقة
|
||||
|
||||
إن بناء جملة الأسلوب `setTimout()` كما يلي:
|
||||
|
||||
`setTimeout(function, milliseconds, param1, param2, ...);
|
||||
`
|
||||
```js
|
||||
setTimeout(function, milliseconds, param1, param2, ...);
|
||||
```
|
||||
|
||||
فمثلا:
|
||||
|
||||
`setTimeout(function(){ alert("Hello"); }, 3000);
|
||||
`
|
||||
```js
|
||||
setTimeout(function(){ alert("Hello"); }, 3000);
|
||||
```
|
||||
|
||||
شيء مهم جداً حول `setTimeout()` هو أنه سيتم تنفيذه بشكل غير متزامن. لنأخذ مثال على ذلك:
|
||||
|
||||
`console.log("A");
|
||||
setTimeout(function(){ console.log("B"); }, 0);
|
||||
console.log("C");
|
||||
// The order in the console will be
|
||||
// A
|
||||
// C
|
||||
// B
|
||||
`
|
||||
```js
|
||||
console.log("A");
|
||||
setTimeout(function(){ console.log("B"); }, 0);
|
||||
console.log("C");
|
||||
// The order in the console will be
|
||||
// A
|
||||
// C
|
||||
// B
|
||||
```
|
||||
|
||||
**ليس كما exepected! لكننا نحدد فقط 0 ثانية !!!** لحل هذه المشكلة والتأكد من تنفيذ الكود الخاص بنا بشكل متزامن ، يجب علينا فقط ضبط وحدة التحكم الأخيرة في الوظيفة
|
||||
|
||||
`console.log("A");
|
||||
setTimeout(function() {
|
||||
console.log("B");
|
||||
console.log("C");
|
||||
}, 0);
|
||||
// The order in the console will be
|
||||
// A
|
||||
// B
|
||||
// C
|
||||
`
|
||||
```js
|
||||
console.log("A");
|
||||
setTimeout(function() {
|
||||
console.log("B");
|
||||
console.log("C");
|
||||
}, 0);
|
||||
// The order in the console will be
|
||||
// A
|
||||
// B
|
||||
// C
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -10,52 +10,57 @@ localeTitle: مع
|
||||
|
||||
### بناء الجملة
|
||||
|
||||
`with (expression)
|
||||
statement
|
||||
`
|
||||
```syntax
|
||||
with (expression)
|
||||
statement
|
||||
```
|
||||
|
||||
### مثال للاستخدام
|
||||
|
||||
في JavaScript ، يمكنك تعديل خصائص أحد الكائنات على حدة مثل أدناه:
|
||||
|
||||
`let earth = {};
|
||||
earth.moons = 1;
|
||||
earth.continents = 7;
|
||||
`
|
||||
```javascript
|
||||
let earth = {};
|
||||
earth.moons = 1;
|
||||
earth.continents = 7;
|
||||
```
|
||||
|
||||
`with` يمنحك اختصار لتعديل الخصائص على كائن:
|
||||
|
||||
`with (earth) {
|
||||
moons = 1;
|
||||
continents = 7;
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
with (earth) {
|
||||
moons = 1;
|
||||
continents = 7;
|
||||
}
|
||||
```
|
||||
|
||||
في حين أن هذا المثال مفتعل ، يمكنك فهم حالات الاستخدام `with` المزيد إذا كان لديك كائنات أكبر مثل أدناه:
|
||||
|
||||
`earth.continents.australia.geography.ocean = "Pacific";
|
||||
earth.continents.australia.geography.river = "Murray";
|
||||
earth.continents.australia.geography.mountain = "Kosciuszko";
|
||||
`
|
||||
```javascript
|
||||
earth.continents.australia.geography.ocean = "Pacific";
|
||||
earth.continents.australia.geography.river = "Murray";
|
||||
earth.continents.australia.geography.mountain = "Kosciuszko";
|
||||
```
|
||||
|
||||
### البدائل
|
||||
|
||||
يجب عدم استخدامه `with` وجود مشكلات بسيطة في الأخطاء والتوافق. يتمثل أسلوب موصى به للغاية في تعيين الكائن إلى متغير ، ثم تعديل خصائص المتغير. هنا مثال على استخدام كائن أكبر:
|
||||
|
||||
`let earth = {
|
||||
continents: {
|
||||
australia: {
|
||||
geography: {}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let geo = earth.continents.australia.geography;
|
||||
|
||||
geo.ocean = "Pacific";
|
||||
geo.river = "Murray";
|
||||
geo.mountain = "Kosciuszko";
|
||||
`
|
||||
```javascript
|
||||
let earth = {
|
||||
continents: {
|
||||
australia: {
|
||||
geography: {}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let geo = earth.continents.australia.geography;
|
||||
|
||||
geo.ocean = "Pacific";
|
||||
geo.river = "Murray";
|
||||
geo.mountain = "Kosciuszko";
|
||||
```
|
||||
|
||||
### حاول
|
||||
|
||||
|
@ -18,12 +18,13 @@ jQuery هي مكتبة جافا سكريبت الأكثر استخدامًا ،
|
||||
|
||||
سيتم إخفاء العناصر:
|
||||
|
||||
`$(document).ready(function(){
|
||||
$("button").click(function(){
|
||||
$("p").hide();
|
||||
});
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
$(document).ready(function(){
|
||||
$("button").click(function(){
|
||||
$("p").hide();
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
#### معلومات اكثر
|
||||
|
||||
|
@ -6,8 +6,9 @@ localeTitle: jQuery اياكس الحصول على طريقة
|
||||
|
||||
يرسل طلب GET http غير متزامن لتحميل البيانات من الخادم. شكله العام هو:
|
||||
|
||||
`jQuery.get( url [, data ] [, success ] [, dataType ] )
|
||||
`
|
||||
```javascript
|
||||
jQuery.get( url [, data ] [, success ] [, dataType ] )
|
||||
```
|
||||
|
||||
* `url` : المعلمة الإلزامية الوحيدة. تحتوي هذه السلسلة على العنوان الذي تريد إرسال الطلب إليه. سيتم تجاهل البيانات التي تم إرجاعها في حالة عدم تحديد أي معلمة أخرى.
|
||||
* `data` : يتم إرسال كائن عادي أو سلسلة إلى الخادم مع الطلب.
|
||||
|
@ -6,8 +6,9 @@ localeTitle: jQuery Ajax Post Method
|
||||
|
||||
يرسل طلب HTTP POST غير متزامن لتحميل البيانات من الخادم. شكله العام هو:
|
||||
|
||||
`jQuery.post( url [, data ] [, success ] [, dataType ] )
|
||||
`
|
||||
```javascript
|
||||
jQuery.post( url [, data ] [, success ] [, dataType ] )
|
||||
```
|
||||
|
||||
* url: هي المعلمة الإلزامية الوحيدة. تحتوي هذه السلسلة على العنوان الذي تريد إرسال الطلب إليه. سيتم تجاهل البيانات التي تم إرجاعها في حالة عدم تحديد أي معلمة أخرى
|
||||
* البيانات: كائن عادي أو سلسلة يتم إرسالها إلى الخادم مع الطلب.
|
||||
@ -16,24 +17,27 @@ localeTitle: jQuery Ajax Post Method
|
||||
|
||||
#### أمثلة
|
||||
|
||||
`$.post('http://example.com/form.php', {category:'client', type:'premium'});
|
||||
`
|
||||
```javascript
|
||||
$.post('http://example.com/form.php', {category:'client', type:'premium'});
|
||||
```
|
||||
|
||||
طلبات `form.php` من الخادم ، وإرسال بيانات إضافية وتجاهل النتيجة التي تم إرجاعها
|
||||
|
||||
`$.post('http://example.com/form.php', {category:'client', type:'premium'}, function(response){
|
||||
alert("success");
|
||||
$("#mypar").html(response.amount);
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
$.post('http://example.com/form.php', {category:'client', type:'premium'}, function(response){
|
||||
alert("success");
|
||||
$("#mypar").html(response.amount);
|
||||
});
|
||||
```
|
||||
|
||||
طلبات `form.php` من الخادم ، وإرسال بيانات إضافية والتعامل مع الاستجابة المرتجعة (تنسيق json). يمكن كتابة هذا المثال بهذا التنسيق:
|
||||
|
||||
`$.post('http://example.com/form.php', {category:'client', type:'premium'}).done(function(response){
|
||||
alert("success");
|
||||
$("#mypar").html(response.amount);
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
$.post('http://example.com/form.php', {category:'client', type:'premium'}).done(function(response){
|
||||
alert("success");
|
||||
$("#mypar").html(response.amount);
|
||||
});
|
||||
```
|
||||
|
||||
يقوم المثال التالي بنشر نموذج باستخدام Ajax ووضع النتائج في div \`\` \`أتش تي أم أل jQuery.post التجريبي
|
||||
|
||||
@ -41,8 +45,9 @@ localeTitle: jQuery Ajax Post Method
|
||||
|
||||
// Attach a submit handler to the form $( "#searchForm" ).submit(function( event ) { // Stop form from submitting normally event.preventDefault(); // Get some values from elements on the page: var $form = $( this ), term = $form.find( "input\[name='s'\]" ).val(), url = $form.attr( "action" ); // Send the data using post var posting = $.post( url, { s: term } ); // Put the results in a div posting.done(function( data ) { var content = $( data ).find( "#content" ); $( "#result" ).empty().append( content ); }); });
|
||||
|
||||
`The following example use the github api to fetch the list of repositories of a user using jQuery.ajax() and put results in a div
|
||||
`
|
||||
```
|
||||
The following example use the github api to fetch the list of repositories of a user using jQuery.ajax() and put results in a div
|
||||
```
|
||||
|
||||
أتش تي أم أل
|
||||
|
||||
|
@ -6,8 +6,9 @@ localeTitle: jQuery تحريك
|
||||
|
||||
طريقة jQuery المتحركة تجعل من السهل إنشاء رسوم متحركة بسيطة ، باستخدام بضعة أسطر من التعليمات البرمجية فقط. الهيكل الأساسي هو على النحو التالي:
|
||||
|
||||
`$(".selector").animate(properties, duration, callbackFunction());
|
||||
`
|
||||
```javascript
|
||||
$(".selector").animate(properties, duration, callbackFunction());
|
||||
```
|
||||
|
||||
بالنسبة لوسيطة `properties` تحتاج إلى تمرير كائن javascript ، مع خصائص CSS التي تريد تحريكها كمفاتيح ، والقيم التي تريد تحريكها كقيم. `duration` التي تحتاجها لإدخال مقدار الوقت بالمللي ثانية يجب أن تأخذ الرسوم المتحركة. يتم تنفيذ `callbackFunction()` بمجرد الانتهاء من الرسوم المتحركة.
|
||||
|
||||
|
@ -6,8 +6,9 @@ localeTitle: انقر فوق الطريقة
|
||||
|
||||
تقوم طريقة jQuery Click بتشغيل وظيفة عند النقر على عنصر. تُعرف الدالة باسم "معالج" لأنه يعالج الحدث النقر. وظائف يمكن التأثير على عنصر HTML المرتبط بالنقرة باستخدام طريقة jQuery Click أو يمكنهم تغيير شيء آخر تمامًا. الشكل الأكثر استخدامًا هو:
|
||||
|
||||
`$("#clickMe").click(handler)
|
||||
`
|
||||
```javascript
|
||||
$("#clickMe").click(handler)
|
||||
```
|
||||
|
||||
تأخذ طريقة النقر وظيفة المعالج كوسيطة وتقوم بتنفيذها في كل مرة يتم فيها النقر `#clickMe` عنصر `#clickMe` . الدالة معالج يتلقى المعلمة المعروفة باسم [eventObject](http://api.jquery.com/Types/#Event) والتي يمكن أن تكون مفيدة للتحكم في الإجراء.
|
||||
|
||||
@ -15,27 +16,29 @@ localeTitle: انقر فوق الطريقة
|
||||
|
||||
يعرض هذا الرمز تنبيهًا عندما ينقر المستخدم على زر:
|
||||
|
||||
`
|
||||
<button id="alert">Click Here</button>
|
||||
`
|
||||
```html
|
||||
<button id="alert">Click Here</button>
|
||||
```
|
||||
|
||||
`$("#alert").click(function () {
|
||||
alert("Hi! I'm an alert");
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
$("#alert").click(function () {
|
||||
alert("Hi! I'm an alert");
|
||||
});
|
||||
```
|
||||
|
||||
[jsFiddle](https://jsfiddle.net/pL63cL6m/)
|
||||
|
||||
يحتوي [eventObject](http://api.jquery.com/Types/#Event) على بعض الأساليب المضمنة ، بما في ذلك `preventDefault()` ، الذي يقوم بما يقوله بالضبط - يتوقف الحدث الافتراضي لعنصر. نحن هنا نرسم علامة المرساة من العمل كرابط:
|
||||
|
||||
`
|
||||
<a id="myLink" href="www.google.com">Link to Google</a>
|
||||
`
|
||||
```html
|
||||
<a id="myLink" href="www.google.com">Link to Google</a>
|
||||
```
|
||||
|
||||
`$("#myLink").click(function (event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
$("#myLink").click(function (event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
```
|
||||
|
||||
[jsFiddle](https://jsfiddle.net/dy457gbh/)
|
||||
|
||||
@ -43,25 +46,28 @@ localeTitle: انقر فوق الطريقة
|
||||
|
||||
يمكن أيضًا أن تقبل وظيفة المعالج بيانات إضافية في شكل كائن:
|
||||
|
||||
`jqueryElement.click(usefulInfo, handler)
|
||||
`
|
||||
```javascript
|
||||
jqueryElement.click(usefulInfo, handler)
|
||||
```
|
||||
|
||||
يمكن أن تكون البيانات من أي نوع.
|
||||
|
||||
`$("element").click({firstWord: "Hello", secondWord: "World"}, function(event){
|
||||
alert(event.data.firstWord);
|
||||
alert(event.data.secondWord);
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
$("element").click({firstWord: "Hello", secondWord: "World"}, function(event){
|
||||
alert(event.data.firstWord);
|
||||
alert(event.data.secondWord);
|
||||
});
|
||||
```
|
||||
|
||||
يؤدي استدعاء طريقة النقر بدون دالة معالج إلى تشغيل حدث نقرة:
|
||||
|
||||
`$("#alert").click(function () {
|
||||
alert("Hi! I'm an alert");
|
||||
});
|
||||
|
||||
$("#alert").click();
|
||||
`
|
||||
```javascript
|
||||
$("#alert").click(function () {
|
||||
alert("Hi! I'm an alert");
|
||||
});
|
||||
|
||||
$("#alert").click();
|
||||
```
|
||||
|
||||
الآن ، عندما يتم تحميل الصفحة ، سيتم تشغيل حدث النقر عند إدخال الصفحة أو إعادة تحميلها ، وإظهار التنبيه المحدد.
|
||||
|
||||
@ -75,17 +81,19 @@ localeTitle: انقر فوق الطريقة
|
||||
|
||||
على سبيل المثال ، مثال أسلوب النقر هذا:
|
||||
|
||||
`$( "element" ).click(function() {
|
||||
alert("I've been clicked!");
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
$( "element" ).click(function() {
|
||||
alert("I've been clicked!");
|
||||
});
|
||||
```
|
||||
|
||||
يمكن تغييره في هذا المثال على سبيل المثال:
|
||||
|
||||
`$( document ).on("click", "element", function() {
|
||||
alert("I've been clicked!");
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
$( document ).on("click", "element", function() {
|
||||
alert("I've been clicked!");
|
||||
});
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -6,8 +6,9 @@ localeTitle: jQuery الآثار طريقة إخفاء
|
||||
|
||||
في أبسط أشكالها ، يخفي **.hide ()** العنصر المتطابق على الفور ، بدون رسوم متحركة. فمثلا:
|
||||
|
||||
`$(".myclass").hide()
|
||||
`
|
||||
```javascript
|
||||
$(".myclass").hide()
|
||||
```
|
||||
|
||||
سوف يخفي كل العناصر التي الطبقة هي _myclass_ . يمكن استخدام أي محدد jQuery.
|
||||
|
||||
@ -17,8 +18,9 @@ localeTitle: jQuery الآثار طريقة إخفاء
|
||||
|
||||
* يمكن توفير المدة بالمللي ثانية أو باستخدام القيم الحرفية البطيئة (600 مللي ثانية) وبسرعة (200 مللي ثانية). فمثلا:
|
||||
|
||||
`$("#myobject").hide(800)
|
||||
`
|
||||
```javascript
|
||||
$("#myobject").hide(800)
|
||||
```
|
||||
|
||||
* يمكن تحديد وظيفة ليتم استدعاؤها بمجرد اكتمال الرسوم المتحركة ، مرة واحدة لكل عنصر متطابق. هذا الاستدعاء مفيد بشكل أساسي في ربط الصور المتحركة المختلفة. فمثلا
|
||||
|
||||
@ -41,11 +43,12 @@ localeTitle: jQuery الآثار طريقة إخفاء
|
||||
|
||||
يقوم هذا الأسلوب بتحريك ارتفاع العناصر المتطابقة. يؤدي ذلك إلى انخفاض أجزاء من الصفحة لأسفل ، مما يجعل الطريق للعناصر التي تم الكشف عنها. الاستعمال:
|
||||
|
||||
`$(".myclass").slideDown(); //will expand the element with the identifier myclass for 400 ms.
|
||||
$(".myclass").slideDown(1000); //will expand the element with the identifier myclass for 1000 ms.
|
||||
$(".myclass").slideDown("slow"); //will expand the element with the identifier myclass for 600 ms.
|
||||
$(".myclass").slideDown("fast"); //will expand the element with the identifier myclass for 200 ms.
|
||||
`
|
||||
```javascript
|
||||
$(".myclass").slideDown(); //will expand the element with the identifier myclass for 400 ms.
|
||||
$(".myclass").slideDown(1000); //will expand the element with the identifier myclass for 1000 ms.
|
||||
$(".myclass").slideDown("slow"); //will expand the element with the identifier myclass for 600 ms.
|
||||
$(".myclass").slideDown("fast"); //will expand the element with the identifier myclass for 200 ms.
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -6,8 +6,9 @@ localeTitle: طريقة jQuery تظهر طريقة
|
||||
|
||||
في أبسط أشكالها ، يعرض **.show ()** العنصر المطابق على الفور ، بدون رسوم متحركة. فمثلا:
|
||||
|
||||
`$(".myclass").show();
|
||||
`
|
||||
```javascript
|
||||
$(".myclass").show();
|
||||
```
|
||||
|
||||
سوف تظهر جميع العناصر التي الطبقة هي _myclass_ . يمكن استخدام أي محدد jQuery.
|
||||
|
||||
@ -19,8 +20,9 @@ localeTitle: طريقة jQuery تظهر طريقة
|
||||
|
||||
* يمكن توفير المدة بالمللي ثانية أو باستخدام القيم الحرفية البطيئة (600 مللي ثانية) وبسرعة (200 مللي ثانية). فمثلا:
|
||||
|
||||
`$("#myobject").show("slow");
|
||||
`
|
||||
```javascript
|
||||
$("#myobject").show("slow");
|
||||
```
|
||||
|
||||
* يمكن تحديد وظيفة ليتم استدعاؤها بمجرد اكتمال الرسوم المتحركة ، مرة واحدة لكل عنصر متطابق. فمثلا
|
||||
|
||||
|
@ -6,8 +6,9 @@ localeTitle: طريقة jQuery Hover
|
||||
|
||||
طريقة `mouseenter` hover هي مزيج من أحداث `mouseleave` و `mouseleave` . بناء الجملة هو:
|
||||
|
||||
`$(selector).hover(inFunction, outFunction);
|
||||
`
|
||||
```
|
||||
$(selector).hover(inFunction, outFunction);
|
||||
```
|
||||
|
||||
سيتم تشغيل الدالة الأولى ، inFunction ، عند حدوث حدث `mouseenter` . الوظيفة الثانية اختيارية ، ولكن سيتم تشغيلها عند `mouseleave` الحدث `mouseleave` . إذا تم تحديد وظيفة واحدة فقط، سيتم تشغيل وظيفة أخرى لكل من `mouseenter` و `mouseleave` الأحداث.
|
||||
|
||||
|
@ -12,27 +12,30 @@ localeTitle: مختارات jQuery
|
||||
|
||||
في ما يلي مثال لأسلوب jQuery يحدد جميع عناصر الفقرة ، ويضيف فئة "محددة" إليهم:
|
||||
|
||||
`<p>This is a paragraph selected by a jQuery method.</p>
|
||||
<p>This is also a paragraph selected by a jQuery method.</p>
|
||||
|
||||
$("p").addClass("selected");
|
||||
`
|
||||
```javascript
|
||||
<p>This is a paragraph selected by a jQuery method.</p>
|
||||
<p>This is also a paragraph selected by a jQuery method.</p>
|
||||
|
||||
$("p").addClass("selected");
|
||||
```
|
||||
|
||||
في jQuery ، تكون محددات الفئة ومعرّف الهوية هي نفسها الموجودة في CSS. إذا كنت تريد تحديد عناصر بفئة معينة ، فاستخدم نقطة ( `.` ) واسم الفئة. إذا كنت تريد تحديد عناصر بمعرف معين ، فاستخدم رمز التجزئة ( `#` ) واسم المعرف. تجدر الإشارة إلى أن HTML ليس حساسًا لحالة الأحرف ، لذلك من الأفضل أن تظل علامات HTML ومتغيرات CSS صغيرة جدًا.
|
||||
|
||||
الاختيار حسب الصف:
|
||||
|
||||
`<p class="p-with-class">Paragraph with a class.</p>
|
||||
|
||||
$(".p-with-class").css("color", "blue"); // colors the text blue
|
||||
`
|
||||
```javascript
|
||||
<p class="p-with-class">Paragraph with a class.</p>
|
||||
|
||||
$(".p-with-class").css("color", "blue"); // colors the text blue
|
||||
```
|
||||
|
||||
التحديد حسب المعرّف:
|
||||
|
||||
`<li id="li-with-id">List item with an ID.</li>
|
||||
|
||||
$("#li-with-id").replaceWith("<p>Socks</p>");
|
||||
`
|
||||
```javascript
|
||||
<li id="li-with-id">List item with an ID.</li>
|
||||
|
||||
$("#li-with-id").replaceWith("<p>Socks</p>");
|
||||
```
|
||||
|
||||
يمكنك أيضًا تحديد عناصر معينة مع فئاتها ومعرفاتها:
|
||||
|
||||
@ -40,12 +43,13 @@ localeTitle: مختارات jQuery
|
||||
|
||||
إذا كنت تريد تحديد عناصر بفئة معينة ، فاستخدم نقطة (.) واسم الفئة.
|
||||
|
||||
`
|
||||
<p class="pWithClass">Paragraph with a class.</p>
|
||||
`
|
||||
```html
|
||||
<p class="pWithClass">Paragraph with a class.</p>
|
||||
```
|
||||
|
||||
`$(".pWithClass").css("color", "blue"); // colors the text blue
|
||||
`
|
||||
```javascript
|
||||
$(".pWithClass").css("color", "blue"); // colors the text blue
|
||||
```
|
||||
|
||||
يمكنك أيضًا استخدام محدد الفئة مع اسم العلامة لتكون أكثر تحديدًا.
|
||||
|
||||
@ -53,55 +57,60 @@ localeTitle: مختارات jQuery
|
||||
<ul class="wishList">My Wish List</ul>`<br>
|
||||
``
|
||||
|
||||
`$("ul.wishList").append("<li>New blender</li>");
|
||||
`
|
||||
```javascript
|
||||
$("ul.wishList").append("<li>New blender</li>");
|
||||
```
|
||||
|
||||
### اختيار حسب الهوية
|
||||
|
||||
إذا كنت تريد تحديد عناصر بقيمة معرف معينة ، فاستخدم رمز التجزئة (#) واسم المعرف.
|
||||
|
||||
`
|
||||
<li id="liWithID">List item with an ID.</li>
|
||||
`
|
||||
```html
|
||||
<li id="liWithID">List item with an ID.</li>
|
||||
```
|
||||
|
||||
`$("#liWithID").replaceWith("<p>Socks</p>");
|
||||
`
|
||||
```javascript
|
||||
$("#liWithID").replaceWith("<p>Socks</p>");
|
||||
```
|
||||
|
||||
كما هو الحال مع محدد الصف ، يمكن استخدام هذا أيضًا مع اسم العلامة.
|
||||
|
||||
`
|
||||
<h1 id="headline">News Headline</h1>
|
||||
`
|
||||
```html
|
||||
<h1 id="headline">News Headline</h1>
|
||||
```
|
||||
|
||||
`$("h1#headline").css("font-size", "2em");
|
||||
`
|
||||
```javascript
|
||||
$("h1#headline").css("font-size", "2em");
|
||||
```
|
||||
|
||||
### محددات تعمل كمرشحات
|
||||
|
||||
هناك أيضًا محددات تعمل كمرشحات - وعادةً ما تبدأ بالنقطتين. على سبيل المثال ، يحدد الخيار `:first` العنصر الذي يكون الطفل الأول من أصله. فيما يلي مثال لقائمة غير مرتبة ببعض عناصر القائمة. يحدد محدد jQuery أسفل القائمة أول عنصر `<li>` في القائمة - عنصر القائمة "One" - ثم يستخدم طريقة `.css` لتحويل النص إلى اللون الأخضر.
|
||||
|
||||
`
|
||||
<ul>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</ul>
|
||||
`
|
||||
```html
|
||||
<ul>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
`$("li:first").css("color", "green");
|
||||
`
|
||||
```javascript
|
||||
$("li:first").css("color", "green");
|
||||
```
|
||||
|
||||
**ملاحظة:** لا تنس أن تطبيق css في JavaScript ليس ممارسة جيدة. يجب عليك دائمًا تقديم أنماطك في ملفات css.
|
||||
|
||||
محدد التصفية الآخر ، `:contains(text)` ، يحدد العناصر التي تحتوي على نص معين. ضع النص الذي تريد مطابقته بين الأقواس. هنا مثال مع فقرتين. يأخذ محدد jQuery الكلمة "Moto" ويغير لونه إلى اللون الأصفر.
|
||||
|
||||
`
|
||||
<p>Hello</p>
|
||||
<p>World</p>
|
||||
`
|
||||
```html
|
||||
<p>Hello</p>
|
||||
<p>World</p>
|
||||
```
|
||||
|
||||
`$("p:contains('World')").css("color", "yellow");
|
||||
`
|
||||
```javascript
|
||||
$("p:contains('World')").css("color", "yellow");
|
||||
```
|
||||
|
||||
وبالمثل ، يحدد `:last` selector `:last` العنصر الأخير للطفل التابع له. يحدد محدد jQuery أدناه العنصر `<li>` الأخير في القائمة - عنصر القائمة "Three" - ثم يستخدم طريقة `.css` لتحويل النص إلى اللون الأصفر.
|
||||
|
||||
@ -111,8 +120,9 @@ localeTitle: مختارات jQuery
|
||||
|
||||
**اختيار متعددة** في jQuery ، يمكنك استخدام العديد من المحددات لتطبيق نفس التغييرات على أكثر من عنصر واحد ، باستخدام سطر واحد من التعليمات البرمجية. يمكنك القيام بذلك عن طريق فصل معرفات مختلفة بفاصلة. على سبيل المثال ، إذا كنت ترغب في تعيين لون الخلفية لثلاثة عناصر باستخدام ids cat و dog و rat على التوالي إلى اللون الأحمر ، فقم بذلك ببساطة:
|
||||
|
||||
`$("#cat,#dog,#rat").css("background-color","red");
|
||||
`
|
||||
```
|
||||
$("#cat,#dog,#rat").css("background-color","red");
|
||||
```
|
||||
|
||||
هذه ليست سوى عدد قليل من المحددات المتاحة للاستخدام في jQuery. راجع قسم "مزيد من المعلومات" للحصول على ارتباط إلى القائمة الكاملة على موقع jQuery على الويب.
|
||||
|
||||
|
@ -10,12 +10,13 @@ localeTitle: مرحبا العالم في Kotlin
|
||||
|
||||
## مرحبا بالبرنامج العالمي
|
||||
|
||||
`// This is a simple Hello World program written in Kotlin
|
||||
|
||||
fun main(args : Array<String>) {
|
||||
println("Hello, World!")
|
||||
}
|
||||
`
|
||||
```kotlin
|
||||
// This is a simple Hello World program written in Kotlin
|
||||
|
||||
fun main(args : Array<String>) {
|
||||
println("Hello, World!")
|
||||
}
|
||||
```
|
||||
|
||||
كما يجب أن تتوقع ، عند تشغيل هذا البرنامج يجب أن يكون الإخراج "Hello، World!".
|
||||
|
||||
@ -23,29 +24,33 @@ localeTitle: مرحبا العالم في Kotlin
|
||||
|
||||
### تعليقات
|
||||
|
||||
`// This is a simple Hello World program written in Kotlin
|
||||
`
|
||||
```
|
||||
// This is a simple Hello World program written in Kotlin
|
||||
```
|
||||
|
||||
التعليقات عبارة عن نص مكتوب بواسطة مطور تمت إضافته بغرض تسهيل فهم الكود من قِبل مطورين آخرين. في تعليقات Kotlin يمكن أن تكون التعليقات ذات سطر واحد (باستخدام //) أو تعليقات متعددة الخطوط (باستخدام / \*\* /).
|
||||
|
||||
`// Single line comment
|
||||
|
||||
/* This is a
|
||||
Multi-line comment
|
||||
*/
|
||||
`
|
||||
```
|
||||
// Single line comment
|
||||
|
||||
/* This is a
|
||||
Multi-line comment
|
||||
*/
|
||||
```
|
||||
|
||||
### الوظيفة الأساسية
|
||||
|
||||
`fun main(args : Array<String>) {...}
|
||||
`
|
||||
```kotlin
|
||||
fun main(args : Array<String>) {...}
|
||||
```
|
||||
|
||||
الوظيفة الرئيسية هي وظيفة إلزامية تخبر المترجم حيث يجب أن يبدأ تنفيذ الكود الخاص بنا. يستغرق صفيفًا من السلاسل كمعلمة ويعيد نوع الوحدة الذي يتوافق مع نوع `void` في لغات مثل جافا. كما يمكننا أن نرى ، يتم الإعلان عن الوظائف باستخدام `fun` الكلمة الرئيسية ويجب كتابة جسمها داخل أقواس معقوفة.
|
||||
|
||||
ستؤدي الدالات بدون نوع الإرجاع المعلن بشكل صريح إلى إرجاع `Unit` ، لذا ، فإن الشفرة المذكورة أعلاه تعادل
|
||||
|
||||
`fun main(args : Array<String>): Unit {...}
|
||||
`
|
||||
```kotlin
|
||||
fun main(args : Array<String>): Unit {...}
|
||||
```
|
||||
|
||||
### بيان الطباعة
|
||||
|
||||
|
@ -46,85 +46,88 @@ localeTitle: Kotlin
|
||||
|
||||
\`\` \` المرح الرئيسي (args: Array ) { println ("مرحبًا بكم!") }
|
||||
|
||||
`
|
||||
|
||||
You can now run this program by either clicking on the Kotlin icon on the gutter (left side of your editor with line numbers)
|
||||
|
||||

|
||||
|
||||
If everything goes fine, you should see the message Hello World! in your Run window as shown below
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
* ## Eclipse
|
||||
|
||||
While IntelliJ is the recommended IDE for developing with Kotlin, it is definitely not the only option out there. **Eclipse** happens to be another popular IDE of choice among Java developers and Kotlin is supported by Eclipse as well.
|
||||
|
||||
After setting up the **JDK** on your system, follow the instructions below.
|
||||
|
||||
Download <a href='https://www.eclipse.org/downloads/'>**Eclipse Neon** </a>for your operating system and once you have successfully installed it on your system, download the **Kotlin Plugin** for Eclipse from the <a href='http://marketplace.eclipse.org/content/kotlin-plugin-eclipse'>**Eclipse Marketplace**</a>.
|
||||
|
||||

|
||||
|
||||
***NOTE: You can also do the same by going into Help -> Eclipse Marketplace and then search for Kotlin Plugin***
|
||||
|
||||
Once, the plugin is installed you are pretty much done but it would be a good idea to take the IDE for a spin with a quick Hello World sample.
|
||||
|
||||
Create a new Kotlin Project by clicking on File -> New -> Kotlin Project
|
||||
|
||||

|
||||
|
||||
An empty project will be created with a directory structure quite similar to a Java project. It would look something like this
|
||||
|
||||

|
||||
|
||||
Go ahead and create a new Kotlin file in the **src** folder
|
||||
|
||||
Once that is done go ahead and type out the following code. Don't worry if it does not make sense right now, it will be covered later in the guide.
|
||||
`
|
||||
```
|
||||

|
||||
|
||||
You can now run this program by either clicking on the Kotlin icon on the gutter (left side of your editor with line numbers)
|
||||
|
||||

|
||||
|
||||
If everything goes fine, you should see the message Hello World! in your Run window as shown below
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
* ## Eclipse
|
||||
|
||||
While IntelliJ is the recommended IDE for developing with Kotlin, it is definitely not the only option out there. **Eclipse** happens to be another popular IDE of choice among Java developers and Kotlin is supported by Eclipse as well.
|
||||
|
||||
After setting up the **JDK** on your system, follow the instructions below.
|
||||
|
||||
Download <a href='https://www.eclipse.org/downloads/'>**Eclipse Neon** </a>for your operating system and once you have successfully installed it on your system, download the **Kotlin Plugin** for Eclipse from the <a href='http://marketplace.eclipse.org/content/kotlin-plugin-eclipse'>**Eclipse Marketplace**</a>.
|
||||
|
||||

|
||||
|
||||
***NOTE: You can also do the same by going into Help -> Eclipse Marketplace and then search for Kotlin Plugin***
|
||||
|
||||
Once, the plugin is installed you are pretty much done but it would be a good idea to take the IDE for a spin with a quick Hello World sample.
|
||||
|
||||
Create a new Kotlin Project by clicking on File -> New -> Kotlin Project
|
||||
|
||||

|
||||
|
||||
An empty project will be created with a directory structure quite similar to a Java project. It would look something like this
|
||||
|
||||

|
||||
|
||||
Go ahead and create a new Kotlin file in the **src** folder
|
||||
|
||||
Once that is done go ahead and type out the following code. Don't worry if it does not make sense right now, it will be covered later in the guide.
|
||||
```
|
||||
|
||||
المرح الرئيسي (args: Array ) { println ("مرحبًا بكم!") }
|
||||
|
||||
`
|
||||
|
||||
Now that you are done typing out the Hello World code, go ahead and run it. To run the file, right click anywhere inside the editor and click on ***Run As -> Kotlin Application***
|
||||
|
||||
|
||||

|
||||
|
||||
If all goes well, the console window would open to show you the output.
|
||||
|
||||

|
||||
|
||||
* ## Using the standalone compiler on the terminal
|
||||
If you are someone who prefers doing things in a more manual way and do not want to tie yourself down to an editor/IDE you might wanna use the Kotlin compiler.
|
||||
|
||||
### Downloading the compiler
|
||||
|
||||
With every release of Kotlin, Jetbrains ship a standalone compiler which can be downloaded from the <a href='https://github.com/JetBrains/kotlin/releases/tag/v1.1.51'>GitHub releases</a>. Version 1.1.51 happens to be the latest at the time of this writing.
|
||||
|
||||
|
||||
</br>
|
||||
|
||||
**Manual Installation**
|
||||
|
||||
Once you have downloaded the compiler you need to unzip it and proceed with the standard installation using the installation wizard. Adding the **bin** directory to the system path is an optional step. It contains the scripts that are necessary to compile and run Kotlin on Windows, Linux and macOS.
|
||||
|
||||
</br>
|
||||
|
||||
**Installation via Homebrew**
|
||||
|
||||
You can install the compiler on macOS using <a href='http://brew.sh/'>Homebrew </a>which is a package manager for macOS. Launch the Terminal app and issue the following commands
|
||||
`
|
||||
```
|
||||

|
||||
|
||||
Now that you are done typing out the Hello World code, go ahead and run it. To run the file, right click anywhere inside the editor and click on ***Run As -> Kotlin Application***
|
||||
|
||||
|
||||

|
||||
|
||||
If all goes well, the console window would open to show you the output.
|
||||
|
||||

|
||||
|
||||
* ## Using the standalone compiler on the terminal
|
||||
If you are someone who prefers doing things in a more manual way and do not want to tie yourself down to an editor/IDE you might wanna use the Kotlin compiler.
|
||||
|
||||
### Downloading the compiler
|
||||
|
||||
With every release of Kotlin, Jetbrains ship a standalone compiler which can be downloaded from the <a href='https://github.com/JetBrains/kotlin/releases/tag/v1.1.51'>GitHub releases</a>. Version 1.1.51 happens to be the latest at the time of this writing.
|
||||
|
||||
|
||||
</br>
|
||||
|
||||
**Manual Installation**
|
||||
|
||||
Once you have downloaded the compiler you need to unzip it and proceed with the standard installation using the installation wizard. Adding the **bin** directory to the system path is an optional step. It contains the scripts that are necessary to compile and run Kotlin on Windows, Linux and macOS.
|
||||
|
||||
</br>
|
||||
|
||||
**Installation via Homebrew**
|
||||
|
||||
You can install the compiler on macOS using <a href='http://brew.sh/'>Homebrew </a>which is a package manager for macOS. Launch the Terminal app and issue the following commands
|
||||
```
|
||||
|
||||
تحديث الشراب $ $ brew install kotlin
|
||||
|
||||
`**Installation via SDKMAN!**
|
||||
|
||||
Another simple way of installing the Kotlin compiler on macOS, Linux, Cygwin, FreeBSD and Solaris is by using <a href='http://sdkman.io/'>SDKMAN!</a>. Launch the terminal and issue the following commands
|
||||
`
|
||||
```
|
||||
**Installation via SDKMAN!**
|
||||
|
||||
Another simple way of installing the Kotlin compiler on macOS, Linux, Cygwin, FreeBSD and Solaris is by using <a href='http://sdkman.io/'>SDKMAN!</a>. Launch the terminal and issue the following commands
|
||||
```
|
||||
|
||||
$ curl -s https://get.sdkman.io | bash\`\`\`
|
||||
|
||||
@ -136,10 +139,11 @@ $ curl -s https://get.sdkman.io | bash\`\`\`
|
||||
|
||||
فتح محرر نص من اختيارك وكتابة برنامج Kotlin الأساسي الواردة أدناه
|
||||
|
||||
`fun main(args: Array<String>) {
|
||||
println("Hello, World!")
|
||||
}
|
||||
`
|
||||
```
|
||||
fun main(args: Array<String>) {
|
||||
println("Hello, World!")
|
||||
}
|
||||
```
|
||||
|
||||
احفظ هذا الملف **بامتداد .kt** . أنت الآن على استعداد لتجميعها ورؤية النتائج. للقيام بذلك ، لإصدار الأمر التالي
|
||||
|
||||
|
@ -10,32 +10,36 @@ localeTitle: سلاسل
|
||||
|
||||
#### إعلان
|
||||
|
||||
`// Explicit type declaration
|
||||
var firstName : String = "Elon"
|
||||
|
||||
// or Implicit type declaration and will still compile
|
||||
val lastName = "Musk"
|
||||
`
|
||||
```kotlin
|
||||
// Explicit type declaration
|
||||
var firstName : String = "Elon"
|
||||
|
||||
// or Implicit type declaration and will still compile
|
||||
val lastName = "Musk"
|
||||
```
|
||||
|
||||
بالإضافة إلى ذلك ، لاحظ استخدام نوع متغير `val` ، وهنا كيف تتصرف
|
||||
|
||||
`firstName = "Mark" // can be changed
|
||||
lastName = "Zuckerberg" // cannot be changed
|
||||
lastName = 12 // Error: type mismatch
|
||||
`
|
||||
```kotlin
|
||||
firstName = "Mark" // can be changed
|
||||
lastName = "Zuckerberg" // cannot be changed
|
||||
lastName = 12 // Error: type mismatch
|
||||
```
|
||||
|
||||
#### سلسلة سلسلة
|
||||
|
||||
تظهر في مقتطف الشفرة ، تمامًا مثل جافا ، إلحاق `Int` ستؤدي `String` إلى إخراج `String`
|
||||
|
||||
`var str = "abc" + 1
|
||||
println(str + "def")
|
||||
`
|
||||
```kotlin
|
||||
var str = "abc" + 1
|
||||
println(str + "def")
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
`abc1def
|
||||
`
|
||||
```shell
|
||||
abc1def
|
||||
```
|
||||
|
||||
حتى بدون تحويل قيمة `Int` 1 إلى كائن `String` أولاً ، لا يزال الإخراج الناتج عبارة عن `String` .
|
||||
|
||||
@ -43,13 +47,14 @@ localeTitle: سلاسل
|
||||
|
||||
يمكن للمبرمجين الإعلان عن متغيرات `String` مع أسطر متعددة باستخدام علامات اقتباس ثلاثية بدلاً من علامات الاقتباس المزدوجة
|
||||
|
||||
`var str = """
|
||||
This is line 1
|
||||
This is line 2
|
||||
This is line 3
|
||||
"""
|
||||
println(str)
|
||||
`
|
||||
```kotlin
|
||||
var str = """
|
||||
This is line 1
|
||||
This is line 2
|
||||
This is line 3
|
||||
"""
|
||||
println(str)
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
@ -62,20 +67,22 @@ localeTitle: سلاسل
|
||||
|
||||
استخدام `trimIndent()` سيساعد بالإضافة إلى توفير تنسيق إخراج نظيف عن طريق إزالة indention الزائد و unrespour كل سطر. افحص مقتطف الشفرة أدناه:
|
||||
|
||||
`var str = """
|
||||
This is line 1
|
||||
This is line 2
|
||||
This is line 3
|
||||
""".trimIndent()
|
||||
println(str)
|
||||
`
|
||||
```kotlin
|
||||
var str = """
|
||||
This is line 1
|
||||
This is line 2
|
||||
This is line 3
|
||||
""".trimIndent()
|
||||
println(str)
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
`This is line 1
|
||||
This is line 2
|
||||
This is line 3
|
||||
`
|
||||
```shell
|
||||
This is line 1
|
||||
This is line 2
|
||||
This is line 3
|
||||
```
|
||||
|
||||
### الوصول إلى أحرف سلسلة
|
||||
|
||||
@ -83,76 +90,86 @@ localeTitle: سلاسل
|
||||
|
||||
يمكن للمبرمجين الوصول إلى العناصر (الأحرف) لسلسلة باستخدام معامل الوصول إلى الفهرس:
|
||||
|
||||
`var str = "Example"
|
||||
println(str[2])
|
||||
`
|
||||
```kotlin
|
||||
var str = "Example"
|
||||
println(str[2])
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
`a
|
||||
`
|
||||
```shell
|
||||
a
|
||||
```
|
||||
|
||||
إنه مثل الوصول إلى عنصر من صفيف ، تحصل على:
|
||||
|
||||
`var str = "Example"
|
||||
println(str[9]) // Error: index out of bounds
|
||||
`
|
||||
```kotlin
|
||||
var str = "Example"
|
||||
println(str[9]) // Error: index out of bounds
|
||||
```
|
||||
|
||||
#### تكرار عبر سلسلة
|
||||
|
||||
عناصر السلسلة هي أحرف يمكن الوصول إليها بواسطة عملية الفهرسة: `s[i]` .
|
||||
|
||||
`var str = "Example"
|
||||
for (c in str) {
|
||||
println(c)
|
||||
}
|
||||
`
|
||||
```kotlin
|
||||
var str = "Example"
|
||||
for (c in str) {
|
||||
println(c)
|
||||
}
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
`E
|
||||
x
|
||||
a
|
||||
m
|
||||
p
|
||||
l
|
||||
e
|
||||
`
|
||||
```shell
|
||||
E
|
||||
x
|
||||
a
|
||||
m
|
||||
p
|
||||
l
|
||||
e
|
||||
```
|
||||
|
||||
### ثبات سلسلة
|
||||
|
||||
تمامًا مثل جافا ، لا يمكنك تغيير العناصر الفردية `String`
|
||||
|
||||
`var str = "Example"
|
||||
str[2] = "b" // Error
|
||||
`
|
||||
```kotlin
|
||||
var str = "Example"
|
||||
str[2] = "b" // Error
|
||||
```
|
||||
|
||||
#### إعادة تعيين قيم السلسلة
|
||||
|
||||
`var str = "Example"
|
||||
println(str)
|
||||
str = "Example was changed"
|
||||
println(str)
|
||||
`
|
||||
```kotlin
|
||||
var str = "Example"
|
||||
println(str)
|
||||
str = "Example was changed"
|
||||
println(str)
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
`Example
|
||||
Example was changed
|
||||
`
|
||||
```shell
|
||||
Example
|
||||
Example was changed
|
||||
```
|
||||
|
||||
### خصائص سلسلة
|
||||
|
||||
#### تحديد طول سلسلة
|
||||
|
||||
`var str = "Example"
|
||||
println(str.length)
|
||||
`
|
||||
```kotlin
|
||||
var str = "Example"
|
||||
println(str.length)
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
`7
|
||||
`
|
||||
```shell
|
||||
7
|
||||
```
|
||||
|
||||
### وظائف سلسلة
|
||||
|
||||
@ -162,38 +179,42 @@ localeTitle: سلاسل
|
||||
|
||||
يقارن هذا الكائن بالعنصر المحدد للترتيب. يتم إرجاع الصفر إذا كان هذا الكائن مساويًا للكائن الآخر المحدد ، أو رقم سالب إذا كان أقل من رقم آخر ، أو رقم موجب إذا كان أكبر من الآخر.
|
||||
|
||||
`var str = "Example"
|
||||
var str2 = "Example123"
|
||||
var str3 = "Example12345"
|
||||
println(str.compareTo(str2))
|
||||
println(str.compareTo(str3))
|
||||
println(str3.compareTo(str))
|
||||
println(str.compareTo("Example"))
|
||||
`
|
||||
```kotlin
|
||||
var str = "Example"
|
||||
var str2 = "Example123"
|
||||
var str3 = "Example12345"
|
||||
println(str.compareTo(str2))
|
||||
println(str.compareTo(str3))
|
||||
println(str3.compareTo(str))
|
||||
println(str.compareTo("Example"))
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
`-3
|
||||
-5
|
||||
5
|
||||
0 # Equal
|
||||
`
|
||||
```shell
|
||||
-3
|
||||
-5
|
||||
5
|
||||
0 # Equal
|
||||
```
|
||||
|
||||
### يساوي
|
||||
|
||||
يشير إلى ما إذا كان كائن `String` يساوي تمامًا كائن `String` آخر
|
||||
|
||||
`var str = "Example"
|
||||
var str2 = "Example2"
|
||||
println(str.equals("Example"))
|
||||
println(str2.equals("Example"))
|
||||
`
|
||||
```kotlin
|
||||
var str = "Example"
|
||||
var str2 = "Example2"
|
||||
println(str.equals("Example"))
|
||||
println(str2.equals("Example"))
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
`true
|
||||
false
|
||||
`
|
||||
```shell
|
||||
true
|
||||
false
|
||||
```
|
||||
|
||||
### احصل على
|
||||
|
||||
@ -201,20 +222,23 @@ localeTitle: سلاسل
|
||||
|
||||
"" كوتلن var str = "مثال" println (str.get (3))
|
||||
|
||||
`Output:
|
||||
`
|
||||
```
|
||||
Output:
|
||||
```
|
||||
|
||||
الصدف م
|
||||
|
||||
`### toString
|
||||
|
||||
Returns a string representation of the object.
|
||||
`
|
||||
```
|
||||
### toString
|
||||
|
||||
Returns a string representation of the object.
|
||||
```
|
||||
|
||||
kotlin println (9. toString () + 10) println (9 + 10)
|
||||
|
||||
`Output:
|
||||
`
|
||||
```
|
||||
Output:
|
||||
```
|
||||
|
||||
الصدف "910" 19 \`\` \`
|
||||
|
||||
|
@ -6,8 +6,9 @@ localeTitle: قم بإنشاء ملف وهمي بحجم معين
|
||||
|
||||
يمكن استخدام الأمر "dd" لإنشاء ملف بحجم معين. هذا مفيد إذا كنت ترغب في اختبار سرعة التنزيل ، أو أي اختبارات أخرى ، وتحتاج إلى ملف بحجم معين.
|
||||
|
||||
`dd if=/dev/zero of=file_name.txt bs=1024k count=10
|
||||
`
|
||||
```
|
||||
dd if=/dev/zero of=file_name.txt bs=1024k count=10
|
||||
```
|
||||
|
||||
سيؤدي ذلك إلى إنشاء ملف بحجم 1 ميغابايت يسمى file\_name.txt.
|
||||
|
||||
@ -15,5 +16,6 @@ bs هو حجم البايت الخاص بك والعد يمثل عدد الكت
|
||||
|
||||
إليك طريقة أكثر بساطة لإنشاء ملف 1MB:
|
||||
|
||||
`dd if=/dev/zero of=file_name.txt bs=1MB count=1
|
||||
`
|
||||
```
|
||||
dd if=/dev/zero of=file_name.txt bs=1MB count=1
|
||||
```
|
@ -22,14 +22,16 @@ localeTitle: ابدء
|
||||
|
||||
cd (تغيير الدليل) - الأمر cd هو أحد الأوامر التي ستستخدمها أكثر في سطر الأوامر في linux. يسمح لك بتغيير دليل العمل الخاص بك. يمكنك استخدامه للتنقل داخل التسلسل الهرمي لنظام الملفات الخاص بك.
|
||||
|
||||
`cd
|
||||
`
|
||||
```unix
|
||||
cd
|
||||
```
|
||||
|
||||
سيؤدي استخدام الأمر cd وحده إلى تغيير الدليل الحالي إلى دليل المستخدم الرئيسي ، الموجود في "/ home / username" كما في "/ home / mark".
|
||||
|
||||
ls (قائمة) - يسرد هذا الأمر المحتوى في الدليل الحالي. يمكن استخدامه أيضًا في سرد معلومات الملف.
|
||||
|
||||
`ls
|
||||
`
|
||||
```unix
|
||||
ls
|
||||
```
|
||||
|
||||
الآن يمكننا رؤية دلائلنا في منزلنا.
|
@ -33,16 +33,17 @@ localeTitle: عملية تمهيد لينكس
|
||||
* GRUB لديه معرفة بنظام الملفات (لا يفهم لودر لينوكس الأقدم LILO نظام الملفات).
|
||||
* ملف تكوين Grub هو /boot/grub/grub.conf (/etc/grub.conf هو رابط لهذا). فيما يلي عينة من grub.conf من CentOS.
|
||||
|
||||
`#boot=/dev/sda
|
||||
default=0
|
||||
timeout=5
|
||||
splashimage=(hd0,0)/boot/grub/splash.xpm.gz
|
||||
hiddenmenu
|
||||
title CentOS (2.6.18-194.el5PAE)
|
||||
root (hd0,0)
|
||||
kernel /boot/vmlinuz-2.6.18-194.el5PAE ro root=LABEL=/
|
||||
initrd /boot/initrd-2.6.18-194.el5PAE.img
|
||||
`
|
||||
```
|
||||
#boot=/dev/sda
|
||||
default=0
|
||||
timeout=5
|
||||
splashimage=(hd0,0)/boot/grub/splash.xpm.gz
|
||||
hiddenmenu
|
||||
title CentOS (2.6.18-194.el5PAE)
|
||||
root (hd0,0)
|
||||
kernel /boot/vmlinuz-2.6.18-194.el5PAE ro root=LABEL=/
|
||||
initrd /boot/initrd-2.6.18-194.el5PAE.img
|
||||
```
|
||||
|
||||
### 4\. النواة
|
||||
|
||||
|
@ -14,30 +14,36 @@ localeTitle: كيفية تنزيل الملفات باستخدام الأداة
|
||||
|
||||
البنية الأساسية لل `wget` هي ...
|
||||
|
||||
`wget [option]... [URL]...
|
||||
`
|
||||
```
|
||||
wget [option]... [URL]...
|
||||
```
|
||||
|
||||
### تفاصيل wget
|
||||
|
||||
`wget --version
|
||||
`
|
||||
```
|
||||
wget --version
|
||||
```
|
||||
|
||||
`wget --help
|
||||
`
|
||||
```
|
||||
wget --help
|
||||
```
|
||||
|
||||
### تنزيل ملف واحد
|
||||
|
||||
`wget http://ftp.gnu.org/gnu/wget/wget-1.5.3.tar.gz
|
||||
`
|
||||
```
|
||||
wget http://ftp.gnu.org/gnu/wget/wget-1.5.3.tar.gz
|
||||
```
|
||||
|
||||
### جارٍ التنزيل من FTP
|
||||
|
||||
`wget ftp://ftp.gnu.org/gnu/wget/wget-1.10.1.tar.gz.sig
|
||||
`
|
||||
```
|
||||
wget ftp://ftp.gnu.org/gnu/wget/wget-1.10.1.tar.gz.sig
|
||||
```
|
||||
|
||||
### تقييد حدود سرعة التنزيل
|
||||
|
||||
`wget --limit-rate=100k http://ftp.gnu.org/gnu/wget/wget-1.5.3.tar.gz
|
||||
`
|
||||
```
|
||||
wget --limit-rate=100k http://ftp.gnu.org/gnu/wget/wget-1.5.3.tar.gz
|
||||
```
|
||||
|
||||
يمكنك اللعب مع الميزات المتبقية من الأداة المساعدة `wget`
|
@ -10,46 +10,54 @@ localeTitle: كيفية استخدام SFTP لنقل الملفات بشكل آ
|
||||
|
||||
إذا لم تكن قد قمت بذلك بالفعل ، اختبر قدرتك على SSH في الخادم. تستخدم SFTP بروتوكول Secure Shell (SSH) ، لذلك إذا كنت غير قادر على SSH ، فلن تتمكن على الأرجح من SFTP.
|
||||
|
||||
`ssh your_username@hostname_or_ip_address
|
||||
`
|
||||
```unix
|
||||
ssh your_username@hostname_or_ip_address
|
||||
```
|
||||
|
||||
### بدء جلسة SFTP
|
||||
|
||||
يستخدم هذا نفس بنية SSH ويفتح جلسة يمكنك فيها نقل الملفات.
|
||||
|
||||
`sftp your_username@hostname_or_ip_address
|
||||
`
|
||||
```unix
|
||||
sftp your_username@hostname_or_ip_address
|
||||
```
|
||||
|
||||
لإدراج أوامر مفيدة:
|
||||
|
||||
`help
|
||||
`
|
||||
```unix
|
||||
help
|
||||
```
|
||||
|
||||
### نقل الملفات والمجلدات
|
||||
|
||||
لتنزيل ملف:
|
||||
|
||||
`get <filename>
|
||||
`
|
||||
```unix
|
||||
get <filename>
|
||||
```
|
||||
|
||||
لتنزيل مجلد ومحتوياته ، استخدم علامة "-r" (كما يعمل للتحميل):
|
||||
|
||||
`get -r <foldername>
|
||||
`
|
||||
```unix
|
||||
get -r <foldername>
|
||||
```
|
||||
|
||||
لتحميل ملف:
|
||||
|
||||
`put <filename>
|
||||
`
|
||||
```unix
|
||||
put <filename>
|
||||
```
|
||||
|
||||
### تغيير المجلدات
|
||||
|
||||
لتغيير المجلد المحلي:
|
||||
|
||||
`lcd <path/to/folder>
|
||||
`
|
||||
```unix
|
||||
lcd <path/to/folder>
|
||||
```
|
||||
|
||||
لتغيير المجلد البعيد:
|
||||
|
||||
`cd <path/to/folder>
|
||||
`
|
||||
```unix
|
||||
cd <path/to/folder>
|
||||
```
|
@ -10,32 +10,37 @@ localeTitle: إعداد مستودعات Yum في RedHat / CentOS Linux
|
||||
|
||||
الخطوة 1: التحقق من وجود مستودعات حالية أم لا.
|
||||
|
||||
`#yum repolist
|
||||
`
|
||||
```sh
|
||||
#yum repolist
|
||||
```
|
||||
|
||||
سوف تجد أنه لا يوجد مستودعات.
|
||||
|
||||
الخطوة 2: تغيير الدليل إلى
|
||||
|
||||
`#cd /etc/yum.repos.d
|
||||
`
|
||||
```sh
|
||||
#cd /etc/yum.repos.d
|
||||
```
|
||||
|
||||
الخطوة 3: إنشاء ملف جديد
|
||||
|
||||
`#vim myrepo.repo
|
||||
`
|
||||
```sh
|
||||
#vim myrepo.repo
|
||||
```
|
||||
|
||||
الخطوة 4: اكتب الأسطر التالية في الملف
|
||||
|
||||
`[file-name]
|
||||
name=filename
|
||||
baseurl="location of yum repositories"
|
||||
gpgcheck=0
|
||||
`
|
||||
```sh
|
||||
[file-name]
|
||||
name=filename
|
||||
baseurl="location of yum repositories"
|
||||
gpgcheck=0
|
||||
```
|
||||
|
||||
الخطوة 5: حفظ وخروج
|
||||
|
||||
الخطوة 6: كرر الخطوة 1
|
||||
|
||||
`You Will find repositories
|
||||
`
|
||||
```sh
|
||||
You Will find repositories
|
||||
```
|
@ -10,31 +10,36 @@ localeTitle: البرمجة النصية شل
|
||||
|
||||
1) قم بإنشاء الملف:
|
||||
|
||||
`$ touch myscript.sh
|
||||
`
|
||||
```bash
|
||||
$ touch myscript.sh
|
||||
```
|
||||
|
||||
2) إضافة [shebang](https://en.wikipedia.org/wiki/Shebang_(Unix)) في بداية الملف. خط Shebang مسؤول عن السماح لمترجم الأوامر بمعرفة أي مترجم سيتم تشغيل البرنامج النصي shell مع:
|
||||
|
||||
`$ echo "#!/bin/bash" > myscript.sh
|
||||
# or
|
||||
$ your-desired-editor myscript.sh
|
||||
# write at the first line #!/bin/bash
|
||||
`
|
||||
```bash
|
||||
$ echo "#!/bin/bash" > myscript.sh
|
||||
# or
|
||||
$ your-desired-editor myscript.sh
|
||||
# write at the first line #!/bin/bash
|
||||
```
|
||||
|
||||
3) إضافة بعض comands:
|
||||
|
||||
`$ echo "echo Hello World!" >> myscript.sh
|
||||
`
|
||||
```bash
|
||||
$ echo "echo Hello World!" >> myscript.sh
|
||||
```
|
||||
|
||||
4) إعطاء وضع _تنفيذ_ الملف:
|
||||
|
||||
`$ chmod +x myscript.sh
|
||||
`
|
||||
```bash
|
||||
$ chmod +x myscript.sh
|
||||
```
|
||||
|
||||
5) قم بتنفيذها!
|
||||
|
||||
`$ ./myscript.sh
|
||||
Hello World!
|
||||
`
|
||||
```bash
|
||||
$ ./myscript.sh
|
||||
Hello World!
|
||||
```
|
||||
|
||||
يمكن العثور على مزيد من المعلومات حول نصوص shell [هنا](https://www.shellscript.sh/)
|
@ -14,8 +14,9 @@ localeTitle: تشريح خط قيادة لينكس
|
||||
|
||||
للبدء باستخدام فتح المحطة الطرفية (لأوبونتو ببساطة اضغط على Ctrl + Alt + T) وترحب بك من خلال سلسلة من الرموز مرتبة في هذا الشكل.
|
||||
|
||||
`user_name@machine_name:~$
|
||||
`
|
||||
```linux
|
||||
user_name@machine_name:~$
|
||||
```
|
||||
|
||||
يمكنك مشاهدة سطر أوامر ينتهي بمطالبة شفافية وامضة ، مما يعني أن shell جاهز لتلقي الأوامر من المستخدم.
|
||||
|
||||
|
@ -85,12 +85,13 @@ _Shell_ s هي برامج تقوم بتفسير الأوامر.
|
||||
|
||||
يعد أمر `info` هو خيار المساعدة الثالث ، ويتم استخدامه تمامًا مثل `man` .
|
||||
|
||||
`ls --help
|
||||
|
||||
man ls
|
||||
|
||||
info ls
|
||||
`
|
||||
```bash
|
||||
ls --help
|
||||
|
||||
man ls
|
||||
|
||||
info ls
|
||||
```
|
||||
|
||||
### الموجه
|
||||
|
||||
@ -104,13 +105,15 @@ _Shell_ s هي برامج تقوم بتفسير الأوامر.
|
||||
|
||||
فمثلا:
|
||||
|
||||
`$ ls -l
|
||||
`
|
||||
```bash
|
||||
$ ls -l
|
||||
```
|
||||
|
||||
يعني كتابة `ls -l` في موجه عادي.
|
||||
|
||||
`# apt-get install node
|
||||
`
|
||||
```bash
|
||||
# apt-get install node
|
||||
```
|
||||
|
||||
يعني أنك تكتب `apt-get install node` باستخدام امتيازات المشرف. تعتمد كيفية رفع الامتيازات على توزيع Linux الخاص بك.
|
||||
|
||||
@ -128,8 +131,9 @@ _Shell_ s هي برامج تقوم بتفسير الأوامر.
|
||||
|
||||
لم يتم منحك shell root ، ولن يكون للأمر التالي الذي تكتبه امتيازات مرتفعة ، ما لم تستخدم `sudo` مرة أخرى.
|
||||
|
||||
`sudo apt-get update
|
||||
`
|
||||
```bash
|
||||
sudo apt-get update
|
||||
```
|
||||
|
||||
باستثناء أول مستخدم تم إنشاؤه في بعض المواقع ، يجب إضافة المستخدمين إلى قائمة خاصة (موجودة في `/etc/sudoers` ) من أجل استخدام sudo.
|
||||
|
||||
@ -147,8 +151,9 @@ _Shell_ s هي برامج تقوم بتفسير الأوامر.
|
||||
|
||||
يمكن أن يؤدي ذلك إلى نتائج غير متوقعة ، وإذا كنت تريد استخدام `su` للتبديل إلى مستخدم آخر ، فأضِف واصلة بعد الأمر:
|
||||
|
||||
`su -
|
||||
`
|
||||
```bash
|
||||
su -
|
||||
```
|
||||
|
||||
هذا سوف يحولك بشكل كامل إلى موجه الجذر.
|
||||
|
||||
@ -156,14 +161,15 @@ _Shell_ s هي برامج تقوم بتفسير الأوامر.
|
||||
|
||||
يمكن استخدام `sudo` في تركيبة مع `su` للسماح للمدير بالتبديل إلى أي مستخدم.
|
||||
|
||||
`myUser@linux $ su - otherUsername
|
||||
Password: (typed my password)
|
||||
su: Authentication failure
|
||||
|
||||
myUser@linux $ sudo su - otherUsername
|
||||
Password: (typed my password)
|
||||
otherUsername@Linux $
|
||||
`
|
||||
```bash
|
||||
myUser@linux $ su - otherUsername
|
||||
Password: (typed my password)
|
||||
su: Authentication failure
|
||||
|
||||
myUser@linux $ sudo su - otherUsername
|
||||
Password: (typed my password)
|
||||
otherUsername@Linux $
|
||||
```
|
||||
|
||||
### المسارات النسبية والمطلقة
|
||||
|
||||
@ -199,8 +205,9 @@ _Shell_ s هي برامج تقوم بتفسير الأوامر.
|
||||
|
||||
تتبع معظم أوامر shell نفس بناء الجملة ، وهي **ملفات خيارات الأوامر** .
|
||||
|
||||
`ls -l *.txt
|
||||
`
|
||||
```bash
|
||||
ls -l *.txt
|
||||
```
|
||||
|
||||
أين
|
||||
|
||||
@ -220,8 +227,9 @@ _Shell_ s هي برامج تقوم بتفسير الأوامر.
|
||||
|
||||
الأمر الثاني ، `grep` هو برنامج يخرج النص الموجود بناءً على بعض المدخلات ، ونمط بحث. يمكن أن يكون نمط البحث عبارة عن نص بسيط ، أو تعبير عادي (تعبير عادي) لعمليات بحث أكثر تقدمًا.
|
||||
|
||||
`cat index.html | grep img
|
||||
`
|
||||
```bash
|
||||
cat index.html | grep img
|
||||
```
|
||||
|
||||
هناك العديد من الطرق للقيام بذلك ، ولكن هذا سيخرج كل سطر في index.html يحتوي على `img` إلى المحطة الطرفية. يستخدم هذا المثال واحد فقط `|` ، لكنك لا تقتصر على ذلك.
|
||||
|
||||
@ -231,15 +239,17 @@ _Shell_ s هي برامج تقوم بتفسير الأوامر.
|
||||
|
||||
المثال التالي هو عدد مستخدمي دبيان وأوبونتو الذين يقومون بتحديث قائمة البرامج الخاصة بهم ، ثم قم بتشغيل ترقية النظام.
|
||||
|
||||
`sudo apt-get update && sudo apt-get dist-upgrade
|
||||
`
|
||||
```bash
|
||||
sudo apt-get update && sudo apt-get dist-upgrade
|
||||
```
|
||||
|
||||
خيار آخر هو أنبوب مزدوج `||` مما يعني منطقية **OR** . يمكنك استخدامه عندما تريد تشغيل أمر فقط عندما يخرج الأول بخطأ.
|
||||
|
||||
سوف يقوم ما يلي بإنشاء أرشيف يسمى `project.tar` على سطح مكتب المستخدم من الملفات الموجودة في دليل مشروع ، وإذا فشل ذلك ، صدى رسالة.
|
||||
|
||||
`tar -cvf /home/user/Desktop/project.tar /home/user/project/* || echo "archive failed"
|
||||
`
|
||||
```bash
|
||||
tar -cvf /home/user/Desktop/project.tar /home/user/project/* || echo "archive failed"
|
||||
```
|
||||
|
||||
### وظائف الخلفية
|
||||
|
||||
@ -253,10 +263,11 @@ o تعليق برنامج قيد التشغيل في المحطة الطرفية
|
||||
|
||||
عندما أكتب `jobs` أحصل على الناتج التالي:
|
||||
|
||||
`$ jobs
|
||||
|
||||
[1] + suspended man ls
|
||||
`
|
||||
```bash
|
||||
$ jobs
|
||||
|
||||
[1] + suspended man ls
|
||||
```
|
||||
|
||||
من هنا ، يمكنني السماح باستئنافها في الخلفية بكتابة `bg %1` حيث `1` هو رقم المهمة الموجود بين الأقواس المربعة.
|
||||
|
||||
|
@ -8,15 +8,17 @@ localeTitle: إدارة المستخدم على لينكس
|
||||
|
||||
#### استخدم الأمر `adduser` أو `useradd` لإضافة مستخدم جديد إلى نظامك.
|
||||
|
||||
`$ sudo adduser username
|
||||
`
|
||||
```
|
||||
$ sudo adduser username
|
||||
```
|
||||
|
||||
تأكد من استبدال `username` بالمستخدم الذي ترغب في إنشائه.
|
||||
|
||||
#### استخدم الأمر `passwd` لتحديث كلمة مرور المستخدم الجديد.
|
||||
|
||||
`$ sudo passwd username
|
||||
`
|
||||
```
|
||||
$ sudo passwd username
|
||||
```
|
||||
|
||||
ينصح بشدة كلمة مرور قوية!
|
||||
|
||||
@ -26,31 +28,36 @@ localeTitle: إدارة المستخدم على لينكس
|
||||
|
||||
##### على أنظمة ديبيان (أوبونتو / لينكس مينت / ElementryOS)، وأعضاء `sudo` مجموعة لديه امتيازات سودو.
|
||||
|
||||
`$ sudo usermod -aG sudo username
|
||||
`
|
||||
```
|
||||
$ sudo usermod -aG sudo username
|
||||
```
|
||||
|
||||
##### على syhels مقرها RHEL (فيدورا / CentOs) ، أعضاء مجموعة `wheel` لديهم sudo privilages.
|
||||
|
||||
`$ sudo usermod -aG wheel username
|
||||
`
|
||||
```
|
||||
$ sudo usermod -aG wheel username
|
||||
```
|
||||
|
||||
## كيفية حذف مستخدم
|
||||
|
||||
##### لديبيان (أوبونتو)
|
||||
|
||||
`$ sudo deluser username
|
||||
`
|
||||
```
|
||||
$ sudo deluser username
|
||||
```
|
||||
|
||||
##### ل RHEL (فيدورا / CentOS)
|
||||
|
||||
`$ sudo userdel username
|
||||
`
|
||||
```
|
||||
$ sudo userdel username
|
||||
```
|
||||
|
||||
##### إنشاء مجموعات وإضافة مستخدمين
|
||||
|
||||
`$ sudo groupadd editorial
|
||||
$ sudo usermod -a -G editorial username
|
||||
`
|
||||
```
|
||||
$ sudo groupadd editorial
|
||||
$ sudo usermod -a -G editorial username
|
||||
```
|
||||
|
||||
#### ملاحظة: يمكن تنفيذ جميع الأوامر المذكورة أعلاه بدون sudo في وضع `root`
|
||||
|
||||
@ -58,15 +65,17 @@ localeTitle: إدارة المستخدم على لينكس
|
||||
|
||||
##### على أنظمة ديبيان (أوبونتو / لينكس مينت / ElementryOS)، وأعضاء `sudo` مجموعة لديه امتيازات سودو.
|
||||
|
||||
`$ sudo usermod -aG sudo username
|
||||
`
|
||||
```
|
||||
$ sudo usermod -aG sudo username
|
||||
```
|
||||
|
||||
## كيف تصنع مجموعة
|
||||
|
||||
لإنشاء مجموعة ، استخدم الأمر `groupadd`
|
||||
|
||||
`$ sudo groupadd groupname
|
||||
`
|
||||
```
|
||||
$ sudo groupadd groupname
|
||||
```
|
||||
|
||||
## كيفية حذف المجموعة
|
||||
|
||||
|
@ -50,40 +50,43 @@ Bash هو اسم مترجم سطر الأوامر ، وهو برنامج يجع
|
||||
|
||||
في بعض الأحيان ترغب في أن يقوم برنامجك النصي بعمل شيء ما فقط إذا كان هناك شيء آخر صحيح. على سبيل المثال ، طباعة رسالة فقط إذا كانت القيمة تحت حد معين. في ما يلي مثال لاستخدامه في `if` القيام بذلك:
|
||||
|
||||
`#!/bin/bash
|
||||
|
||||
count=1 # Create a variable named count and set it to 1
|
||||
|
||||
if [[ $count -lt 11 ]]; then # This is an if block (or conditional). Test to see if $count is 10 or less. If it is, execute the instructions inside the block.
|
||||
echo "$count is 10 or less" # This will print, because count = 1.
|
||||
fi # Every if ends with fi
|
||||
`
|
||||
```
|
||||
#!/bin/bash
|
||||
|
||||
count=1 # Create a variable named count and set it to 1
|
||||
|
||||
if [[ $count -lt 11 ]]; then # This is an if block (or conditional). Test to see if $count is 10 or less. If it is, execute the instructions inside the block.
|
||||
echo "$count is 10 or less" # This will print, because count = 1.
|
||||
fi # Every if ends with fi
|
||||
```
|
||||
|
||||
وبالمثل ، يمكننا ترتيب البرنامج النصي بحيث ينفذ تعليمات فقط بينما يكون شيء ما صحيحًا. سنقوم بتغيير الكود بحيث قيمة التغيرات المتغيرة العد:
|
||||
|
||||
`#!/bin/bash
|
||||
|
||||
count=1 # Create a variable named count and set it to 1
|
||||
|
||||
while [[ $count -lt 11 ]]; do # This is an if block (or conditional). Test to see if $count is 10 or less. If it is, execute the instructions inside the block.
|
||||
echo "$count is 10 or less" # This will print as long as count <= 10.
|
||||
count=$((count+1)) # Increment count
|
||||
done # Every while ends with done
|
||||
`
|
||||
```
|
||||
#!/bin/bash
|
||||
|
||||
count=1 # Create a variable named count and set it to 1
|
||||
|
||||
while [[ $count -lt 11 ]]; do # This is an if block (or conditional). Test to see if $count is 10 or less. If it is, execute the instructions inside the block.
|
||||
echo "$count is 10 or less" # This will print as long as count <= 10.
|
||||
count=$((count+1)) # Increment count
|
||||
done # Every while ends with done
|
||||
```
|
||||
|
||||
سيظهر ناتج هذا الإصدار من myscript.sh بالشكل التالي:
|
||||
|
||||
`"1 is 10 or less"
|
||||
"2 is 10 or less"
|
||||
"3 is 10 or less"
|
||||
"4 is 10 or less"
|
||||
"5 is 10 or less"
|
||||
"6 is 10 or less"
|
||||
"7 is 10 or less"
|
||||
"8 is 10 or less"
|
||||
"9 is 10 or less"
|
||||
"10 is 10 or less"
|
||||
`
|
||||
```
|
||||
"1 is 10 or less"
|
||||
"2 is 10 or less"
|
||||
"3 is 10 or less"
|
||||
"4 is 10 or less"
|
||||
"5 is 10 or less"
|
||||
"6 is 10 or less"
|
||||
"7 is 10 or less"
|
||||
"8 is 10 or less"
|
||||
"9 is 10 or less"
|
||||
"10 is 10 or less"
|
||||
```
|
||||
|
||||
## مخطوطات العالم الحقيقي
|
||||
|
||||
|
@ -60,44 +60,45 @@ localeTitle: خوارزميات التجميع
|
||||
|
||||
في ما يلي مثال تجميع في Python يستخدم " [مجموعة بيانات Iris"](https://www.kaggle.com/uciml/iris)
|
||||
|
||||
`import pandas as pd
|
||||
import numpy as np
|
||||
iris = pd.read_csv('Iris.csv')
|
||||
del iris['Id']
|
||||
del iris['SepalLengthCm']
|
||||
del iris['SepalWidthCm']
|
||||
|
||||
from matplotlib import pyplot as plt
|
||||
# k is the input parameter set to the number of species
|
||||
k = len(iris['Species'].unique())
|
||||
for i in iris['Species'].unique():
|
||||
# select only the applicable rows
|
||||
ds = iris[iris['Species'] == i]
|
||||
# plot the points
|
||||
plt.plot(ds[['PetalLengthCm']],ds[['PetalWidthCm']],'o')
|
||||
plt.title("Original Iris by Species")
|
||||
plt.show()
|
||||
|
||||
from sklearn import cluster
|
||||
del iris['Species']
|
||||
kmeans = cluster.KMeans(n_clusters=k, n_init=10, max_iter=300, algorithm='auto')
|
||||
kmeans.fit(iris)
|
||||
labels = kmeans.labels_
|
||||
centroids = kmeans.cluster_centers_
|
||||
|
||||
for i in range(k):
|
||||
# select only data observations from the applicable cluster
|
||||
ds = iris.iloc[np.where(labels==i)]
|
||||
# plot the data observations
|
||||
plt.plot(ds['PetalLengthCm'],ds['PetalWidthCm'],'o')
|
||||
# plot the centroids
|
||||
lines = plt.plot(centroids[i,0],centroids[i,1],'kx')
|
||||
# make the centroid x's bigger
|
||||
plt.setp(lines,ms=15.0)
|
||||
plt.setp(lines,mew=2.0)
|
||||
plt.title("Iris by K-Means Clustering")
|
||||
plt.show()
|
||||
`
|
||||
```python
|
||||
import pandas as pd
|
||||
import numpy as np
|
||||
iris = pd.read_csv('Iris.csv')
|
||||
del iris['Id']
|
||||
del iris['SepalLengthCm']
|
||||
del iris['SepalWidthCm']
|
||||
|
||||
from matplotlib import pyplot as plt
|
||||
# k is the input parameter set to the number of species
|
||||
k = len(iris['Species'].unique())
|
||||
for i in iris['Species'].unique():
|
||||
# select only the applicable rows
|
||||
ds = iris[iris['Species'] == i]
|
||||
# plot the points
|
||||
plt.plot(ds[['PetalLengthCm']],ds[['PetalWidthCm']],'o')
|
||||
plt.title("Original Iris by Species")
|
||||
plt.show()
|
||||
|
||||
from sklearn import cluster
|
||||
del iris['Species']
|
||||
kmeans = cluster.KMeans(n_clusters=k, n_init=10, max_iter=300, algorithm='auto')
|
||||
kmeans.fit(iris)
|
||||
labels = kmeans.labels_
|
||||
centroids = kmeans.cluster_centers_
|
||||
|
||||
for i in range(k):
|
||||
# select only data observations from the applicable cluster
|
||||
ds = iris.iloc[np.where(labels==i)]
|
||||
# plot the data observations
|
||||
plt.plot(ds['PetalLengthCm'],ds['PetalWidthCm'],'o')
|
||||
# plot the centroids
|
||||
lines = plt.plot(centroids[i,0],centroids[i,1],'kx')
|
||||
# make the centroid x's bigger
|
||||
plt.setp(lines,ms=15.0)
|
||||
plt.setp(lines,mew=2.0)
|
||||
plt.title("Iris by K-Means Clustering")
|
||||
plt.show()
|
||||
```
|
||||
|
||||
بما أن نقاط البيانات تنتمي عادة إلى مساحة عالية الأبعاد ، فإن مقياس التشابه غالباً ما يتم تعريفه على أنه مسافة بين متجهين (Euclidean ، Manhathan ، Cosine ، Mahalanobis…)
|
||||
|
||||
|
@ -10,31 +10,32 @@ localeTitle: الانحدارالخطي
|
||||
|
||||
في بايثون:
|
||||
|
||||
`#Price of wheat/kg and the average price of bread
|
||||
wheat_and_bread = [[0.5,5],[0.6,5.5],[0.8,6],[1.1,6.8],[1.4,7]]
|
||||
|
||||
def step_gradient(b_current, m_current, points, learningRate):
|
||||
b_gradient = 0
|
||||
m_gradient = 0
|
||||
N = float(len(points))
|
||||
for i in range(0, len(points)):
|
||||
x = points[i][0]
|
||||
y = points[i][1]
|
||||
b_gradient += -(2/N) * (y - ((m_current * x) + b_current))
|
||||
m_gradient += -(2/N) * x * (y - ((m_current * x) + b_current))
|
||||
new_b = b_current - (learningRate * b_gradient)
|
||||
new_m = m_current - (learningRate * m_gradient)
|
||||
return [new_b, new_m]
|
||||
|
||||
def gradient_descent_runner(points, starting_b, starting_m, learning_rate, num_iterations):
|
||||
b = starting_b
|
||||
m = starting_m
|
||||
for i in range(num_iterations):
|
||||
b, m = step_gradient(b, m, points, learning_rate)
|
||||
return [b, m]
|
||||
|
||||
gradient_descent_runner(wheat_and_bread, 1, 1, 0.01, 100)
|
||||
`
|
||||
```py
|
||||
#Price of wheat/kg and the average price of bread
|
||||
wheat_and_bread = [[0.5,5],[0.6,5.5],[0.8,6],[1.1,6.8],[1.4,7]]
|
||||
|
||||
def step_gradient(b_current, m_current, points, learningRate):
|
||||
b_gradient = 0
|
||||
m_gradient = 0
|
||||
N = float(len(points))
|
||||
for i in range(0, len(points)):
|
||||
x = points[i][0]
|
||||
y = points[i][1]
|
||||
b_gradient += -(2/N) * (y - ((m_current * x) + b_current))
|
||||
m_gradient += -(2/N) * x * (y - ((m_current * x) + b_current))
|
||||
new_b = b_current - (learningRate * b_gradient)
|
||||
new_m = m_current - (learningRate * m_gradient)
|
||||
return [new_b, new_m]
|
||||
|
||||
def gradient_descent_runner(points, starting_b, starting_m, learning_rate, num_iterations):
|
||||
b = starting_b
|
||||
m = starting_m
|
||||
for i in range(num_iterations):
|
||||
b, m = step_gradient(b, m, points, learning_rate)
|
||||
return [b, m]
|
||||
|
||||
gradient_descent_runner(wheat_and_bread, 1, 1, 0.01, 100)
|
||||
```
|
||||
|
||||
المثال رمز من [هذه المقالة](http://blog.floydhub.com/coding-the-history-of-deep-learning/) . كما يشرح نزول التدرج والمفاهيم الأساسية الأخرى للتعلم العميق.
|
||||
|
||||
@ -42,23 +43,24 @@ localeTitle: الانحدارالخطي
|
||||
|
||||
في بايثون: تطبيق مباشرة باستخدام مكتبة scikit ، مما يجعل من السهل استخدام الانحدار الخطي حتى على مجموعات البيانات الكبيرة.
|
||||
|
||||
`import pandas as pd
|
||||
from sklearn.cross_validation import train_test_split
|
||||
from sklearn.linear_model import LinearRegression as lr
|
||||
train = pd.read_csv('../input/train.csv')
|
||||
test = pd.read_csv('../input/test.csv')
|
||||
X = train.iloc[:, 0:4].values
|
||||
y = train.iloc[:, 4].values
|
||||
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size = 0.2, random_state = 0)
|
||||
X_train
|
||||
model = lr()
|
||||
model.fit(X_train, y_train)
|
||||
print(model.score(X_train,y_train))
|
||||
y_pred_class = model.predict(X_test)
|
||||
model.score(X_train,y_train)
|
||||
print(model.coef_)
|
||||
print(model.intercept_)
|
||||
# calculate accuracy
|
||||
from sklearn import metrics
|
||||
print(metrics.accuracy_score(y_test, y_pred_class))
|
||||
`
|
||||
```py
|
||||
import pandas as pd
|
||||
from sklearn.cross_validation import train_test_split
|
||||
from sklearn.linear_model import LinearRegression as lr
|
||||
train = pd.read_csv('../input/train.csv')
|
||||
test = pd.read_csv('../input/test.csv')
|
||||
X = train.iloc[:, 0:4].values
|
||||
y = train.iloc[:, 4].values
|
||||
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size = 0.2, random_state = 0)
|
||||
X_train
|
||||
model = lr()
|
||||
model.fit(X_train, y_train)
|
||||
print(model.score(X_train,y_train))
|
||||
y_pred_class = model.predict(X_test)
|
||||
model.score(X_train,y_train)
|
||||
print(model.coef_)
|
||||
print(model.intercept_)
|
||||
# calculate accuracy
|
||||
from sklearn import metrics
|
||||
print(metrics.accuracy_score(y_test, y_pred_class))
|
||||
```
|
Reference in New Issue
Block a user