gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: converted single to triple backticks (#36228)

Browse Source
This commit is contained in:
Randell Dawson
2019-06-20 14:33:33 -07:00
committed by Tom
parent fce8901c56
commit 9c90b163d6
75 changed files with 3244 additions and 2994 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
guide/arabic/accessibility/accessibility-basics/index.md
View File

@ -69,13 +69,13 @@ localeTitle: أساسيات الوصول
مواصفات HTML عبارة عن مستند يصف كيفية استخدام اللغة لإنشاء مواقع ويب. إن التقنيات المساعدة ، مثل برامج قراءة الشاشة وبرامج التعرف على الكلام إلخ ، على دراية بهذا المستند. على الرغم من ذلك ، غالبًا ما لا يكون مطورو الويب ، أو على الأقل غير كافٍ ، ويعتقدون أن شيئًا كهذا على ما يرام:
`
<div class="awesome-button"></div>
<span><strong>Huge heading I will style with CSS later</strong></span>
<span class="clickable-with-JavaScript">English</span>
`
```html
<div class="awesome-button"></div>
<span><strong>Huge heading I will style with CSS later</strong></span>
<span class="clickable-with-JavaScript">English</span>
```
خمين ما؟ كل ثلاثة من هذه العناصر كسر عدة معايير WCAG ، وبالتالي لا يمكن الوصول إليها على الإطلاق.
@ -90,13 +90,13 @@ Spans و divs غير عناصر. أنها تهدف إلى احتواء عناص
* يمكنك إضافة سمات ARIA-يدوياً إلى العناصر المذكورة أعلاه. هذا موضوع متقدم وخارج نطاق هذه المقالة.
* أو يمكنك ببساطة القيام بذلك:
`
<button>This is a button</button>
<h2>Here's a heading level two</h2>
<a href="JavascriptThing">English</a>
`
```html
<button>This is a button</button>
<h2>Here's a heading level two</h2>
<a href="JavascriptThing">English</a>
```
فقاعة. فجأة ، كل هذه العناصر يمكن الوصول إليها بشكل كامل ، فقط باستخدام HTML الأصلي. HTML بالطريقة التي كان من المفترض أن يتم استخدامها ، وبعبارة أخرى.
@ -142,11 +142,11 @@ Spans و divs غير عناصر. أنها تهدف إلى احتواء عناص
أعتقد أن أفضل طريقة لتوضيح ذلك هي إعطاء مثال على ذلك:
`
<label for='username'>
<input type='text' id='username'>
`
```html
<label for='username'>
<input type='text' id='username'>
```
سيؤدي هذا على سبيل المثال إلى أن قارئ الشاشة يقول "اسم المستخدم ، حقل تحرير النص" ، بدلاً من مجرد "إعداد حقل تعديل النص" ويطلب من المستخدم البحث عن تصنيف. هذا أيضًا يساعد الأشخاص الذين يستخدمون برنامج التعرف على الكلام.

6
guide/arabic/accessibility/accessibility-examples/index.md
View File

@ -16,9 +16,9 @@ localeTitle: أمثلة على سهولة الوصول
1. إنشاء "تخطي صلة الملاحة" التي تعيش مباشرة تحت افتتاح `body` علامة.
`
<a tabindex="0" class="skip-link" href="#main-content">Skip to Main Content</a>
`
```html
<a tabindex="0" class="skip-link" href="#main-content">Skip to Main Content</a>
```
`tabindex="0"` يضاف للتأكد من أن الوصلة هي لوحة المفاتيح قابلة للتركيز على جميع المتصفحات. يمكن العثور على مزيد من المعلومات حول إمكانية الوصول إلى لوحة المفاتيح على [webaim.org](https://webaim.org/techniques/keyboard/tabindex) .

41
guide/arabic/agile/behavior-driven-development/index.md
View File

@ -22,26 +22,27 @@ localeTitle: تنمية السلوك مدفوعة
مثال
`Story: Returns go to stock
As a store owner
In order to keep track of stock
I want to add items back to stock when they're returned.
Scenario 1: Refunded items should be returned to stock
Given that a customer previously bought a black sweater from me
And I have three black sweaters in stock.
When he returns the black sweater for a refund
Then I should have four black sweaters in stock.
Scenario 2: Replaced items should be returned to stock
Given that a customer previously bought a blue garment from me
And I have two blue garments in stock
And three black garments in stock.
When he returns the blue garment for a replacement in black
Then I should have three blue garments in stock
And two black garments in stock.
`
```
Story: Returns go to stock
As a store owner
In order to keep track of stock
I want to add items back to stock when they're returned.
Scenario 1: Refunded items should be returned to stock
Given that a customer previously bought a black sweater from me
And I have three black sweaters in stock.
When he returns the black sweater for a refund
Then I should have four black sweaters in stock.
Scenario 2: Replaced items should be returned to stock
Given that a customer previously bought a blue garment from me
And I have two blue garments in stock
And three black garments in stock.
When he returns the blue garment for a replacement in black
Then I should have three blue garments in stock
And two black garments in stock.
```
جنبا إلى جنب مع بعض الفوائد:

46
guide/arabic/algorithms/backtracking-algorithms/index.md
View File

@ -16,33 +16,35 @@ _يتم وضع الفارس على أول كتلة من لوحة فارغة ،
تقوم Naive Algorithm بتوليد جميع الجولات واحدة تلو الأخرى والتحقق مما إذا كانت الجولة التي تم إنشاؤها تفي بالقيود.
`while there are untried tours
{
generate the next tour
if this tour covers all squares
{
print this path;
}
}
`
```
while there are untried tours
{
generate the next tour
if this tour covers all squares
{
print this path;
}
}
```
### خوارزمية التراجع عن جولة نايت
فيما يلي خوارزمية Backtracking لمشكلة جولة Knight.
`If all squares are visited
print the solution
Else
a) Add one of the next moves to solution vector and recursively
check if this move leads to a solution. (A Knight can make maximum
eight moves. We choose one of the 8 moves in this step).
b) If the move chosen in the above step doesn't lead to a solution
then remove this move from the solution vector and try other
alternative moves.
c) If none of the alternatives work then return false (Returning false
will remove the previously added item in recursion and if false is
returned by the initial call of recursion then "no solution exists" )
`
```
If all squares are visited
print the solution
Else
a) Add one of the next moves to solution vector and recursively
check if this move leads to a solution. (A Knight can make maximum
eight moves. We choose one of the 8 moves in this step).
b) If the move chosen in the above step doesn't lead to a solution
then remove this move from the solution vector and try other
alternative moves.
c) If none of the alternatives work then return false (Returning false
will remove the previously added item in recursion and if false is
returned by the initial call of recursion then "no solution exists" )
```
### معلومات اكثر

48
guide/arabic/algorithms/binary-search-trees/index.md
View File

@ -82,12 +82,13 @@ localeTitle: أشجار البحث الثنائي
وإليك تعريفًا لعقدة BST التي تحتوي على بعض البيانات ، مع الإشارة إلى عقد الطفل اليمنى واليسرى.
`struct node {
int data;
struct node *leftChild;
struct node *rightChild;
};
`
```c
struct node {
int data;
struct node *leftChild;
struct node *rightChild;
};
```
#### عملية البحث
@ -184,10 +185,11 @@ localeTitle: أشجار البحث الثنائي
#### خوارزمية الارتفاع (شجرة)
`if tree = nil:
return 0
return 1 + Max(Height(tree.left),Height(tree.right))
`
```
if tree = nil:
return 0
return 1 + Max(Height(tree.left),Height(tree.right))
```
#### هنا هو رمز في C ++
@ -219,21 +221,23 @@ localeTitle: أشجار البحث الثنائي
#### خوارزمية الحجم (شجرة)
`if tree = nil
return 0
return 1 + Size(tree.left) + Size(tree.right)
`
```
if tree = nil
return 0
return 1 + Size(tree.left) + Size(tree.right)
```
#### هنا هو رمز في C ++
`int treeSize(struct node* node)
{
if (node==NULL)
return 0;
else
return 1+(treeSize(node->left) + treeSize(node->right));
}
`
```
int treeSize(struct node* node)
{
if (node==NULL)
return 0;
else
return 1+(treeSize(node->left) + treeSize(node->right));
}
```
### مقاطع الفيديو ذات الصلة على قناة YouTube freeCodeCamp

42
guide/arabic/algorithms/exponentiation/index.md
View File

@ -10,31 +10,33 @@ localeTitle: الأسي
نموذج حسابي: تقسيم وقهر.
`int power(int x, unsigned int y) {
if (y == 0)
return 1;
else if (y%2 == 0)
return power(x, y/2)*power(x, y/2);
else
return x*power(x, y/2)*power(x, y/2);
}
`
```C
int power(int x, unsigned int y) {
if (y == 0)
return 1;
else if (y%2 == 0)
return power(x, y/2)*power(x, y/2);
else
return x*power(x, y/2)*power(x, y/2);
}
```
تعقيد الوقت: O (n) | تعقيد الفضاء: O (1)
#### الحل الأمثل: O (تسجيل الدخول)
`int power(int x, unsigned int y) {
int temp;
if( y == 0)
return 1;
temp = power(x, y/2);
if (y%2 == 0)
return temp*temp;
else
return x*temp*temp;
}
`
```C
int power(int x, unsigned int y) {
int temp;
if( y == 0)
return 1;
temp = power(x, y/2);
if (y%2 == 0)
return temp*temp;
else
return x*temp*temp;
}
```
## الأسيوي وحدات

19
guide/arabic/algorithms/graph-algorithms/depth-first-search/index.md
View File

@ -66,15 +66,16 @@ void Graph :: add _edge (int u، int v) { adj \[u\] .الرجوع_ مرة أخر
}
`### Evaluation
Space Complexity: O(n)
Worse Case Time Complexity: O(n)
Depth First Search is complete on a finite set of nodes. I works better on shallow trees.
### Implementation of DFS in C++
`
```
### Evaluation
Space Complexity: O(n)
Worse Case Time Complexity: O(n)
Depth First Search is complete on a finite set of nodes. I works better on shallow trees.
### Implementation of DFS in C++
```
ج ++

51
guide/arabic/algorithms/graph-algorithms/floyd-warshall-algorithm/index.md
View File

@ -14,31 +14,32 @@ localeTitle: Floyd Warshall Algorithm
### تنفيذ بايثون
`# A large value as infinity
inf = 1e10
def floyd_warshall(weights):
V = len(weights)
distance_matrix = weights
for k in range(V):
next_distance_matrix = [list(row) for row in distance_matrix] # make a copy of distance matrix
for i in range(V):
for j in range(V):
# Choose if the k vertex can work as a path with shorter distance
next_distance_matrix[i][j] = min(distance_matrix[i][j], distance_matrix[i][k] + distance_matrix[k][j])
distance_matrix = next_distance_matrix # update
return distance_matrix
# A graph represented as Adjacency matrix
graph = [
[0, inf, inf, -3],
[inf, 0, inf, 8],
[inf, 4, 0, -2],
[5, inf, 3, 0]
]
print(floyd_warshall(graph))
`
```python
# A large value as infinity
inf = 1e10
def floyd_warshall(weights):
V = len(weights)
distance_matrix = weights
for k in range(V):
next_distance_matrix = [list(row) for row in distance_matrix] # make a copy of distance matrix
for i in range(V):
for j in range(V):
# Choose if the k vertex can work as a path with shorter distance
next_distance_matrix[i][j] = min(distance_matrix[i][j], distance_matrix[i][k] + distance_matrix[k][j])
distance_matrix = next_distance_matrix # update
return distance_matrix
# A graph represented as Adjacency matrix
graph = [
[0, inf, inf, -3],
[inf, 0, inf, 8],
[inf, 4, 0, -2],
[5, inf, 3, 0]
]
print(floyd_warshall(graph))
```
#### معلومات اكثر:

36
guide/arabic/algorithms/greatest-common-divisor-euclidean/index.md
View File

@ -45,26 +45,28 @@ GCD من 42 و 120 و 285 = 3 _(3 هو أكبر عدد يقسم 42 و 120 و 285
شفرة جافا سكريبت لتنفيذ GCD-
`function gcd(a, b) {
var R;
while ((a % b) > 0) {
R = a % b;
a = b;
b = R;
}
return b;
}
`
```javascript
function gcd(a, b) {
var R;
while ((a % b) > 0) {
R = a % b;
a = b;
b = R;
}
return b;
}
```
شفرة جافا سكريبت لتنفيذ GCD باستخدام Recursion-
`function gcd(a, b) {
if (b == 0)
return a;
else
return gcd(b, (a % b));
}
`
```javascript
function gcd(a, b) {
if (b == 0)
return a;
else
return gcd(b, (a % b));
}
```
يمكنك أيضًا استخدام خوارزمية Euclidean للعثور على GCD لأكثر من رقمين. نظرًا لأن GCD هي علاقة ارتباطية ، فإن العملية التالية صالحة - `GCD(a,b,c) == GCD(GCD(a,b), c)`

21
guide/arabic/algorithms/greedy-algorithms/index.md
View File

@ -60,16 +60,17 @@ localeTitle: خوارزميات الجشع
4. **أقرب وقت للتنفيذ أولاً** . هذا هو النهج الذي يمنحنا دائمًا أفضل الحلول لهذه المشكلة. لقد استمدنا الكثير من الأفكار من المقاربات السابقة وأخيرًا جاء هذا النهج. نقوم بتصنيف الفواصل حسب ترتيب متزايد لأوقات الانتهاء ثم نبدأ باختيار فترات من البداية. انظر إلى الرمز الزائف التالي لمزيد من الوضوح.
`function interval_scheduling_problem(requests)
schedule \gets \{\}
while requests is not yet empty
choose a request i_r \in requests that has the lowest finishing time
schedule \gets schedule \cup \{i_r\}
delete all requests in requests that are not compatible with i_r
end
return schedule
end
`
```
function interval_scheduling_problem(requests)
schedule \gets \{\}
while requests is not yet empty
choose a request i_r \in requests that has the lowest finishing time
schedule \gets schedule \cup \{i_r\}
delete all requests in requests that are not compatible with i_r
end
return schedule
end
```
## متى نستخدم خوارزميات الجشع

121
guide/arabic/algorithms/search-algorithms/binary-search/index.md
View File

@ -25,20 +25,23 @@ localeTitle: بحث ثنائي
بالتفصيل ، كم مرة يمكنك قسمة N على 2 حتى يكون لديك 1؟ هذا هو القول الأساسي ، قم بإجراء بحث ثنائي (نصف العناصر) حتى تجده. في صيغة هذا سيكون هذا:
`1 = N / 2x
`
```
1 = N / 2x
```
اضرب 2x:
`2x = N
`
```
2x = N
```
الآن القيام log2:
`log2(2x) = log2 N
x * log2(2) = log2 N
x * 1 = log2 N
`
```
log2(2x) = log2 N
x * log2(2) = log2 N
x * 1 = log2 N
```
هذا يعني أنه يمكنك تقسيم سجل N مرة حتى يتم تقسيم كل شيء. مما يعني أنه يجب عليك تقسيم السجل N ("القيام بعملية البحث الثنائي") حتى تعثر على العنصر الخاص بك.
@ -114,44 +117,46 @@ _O_ ( _log 2 N_ ) يكون هكذا لأنه في كل خطوة نصف العن
في ما يلي تطبيق آخر في جافا سكريبت:
`function binary_search(a, v) {
function search(low, high) {
if (low === high) {
return a[low] === v;
} else {
var mid = math_floor((low + high) / 2);
return (v === a[mid])
||
(v < a[mid])
? search(low, mid - 1)
: search(mid + 1, high);
}
}
return search(0, array_length(a) - 1);
}
`
```Javascript
function binary_search(a, v) {
function search(low, high) {
if (low === high) {
return a[low] === v;
} else {
var mid = math_floor((low + high) / 2);
return (v === a[mid])
||
(v < a[mid])
? search(low, mid - 1)
: search(mid + 1, high);
}
}
return search(0, array_length(a) - 1);
}
```
### تطبيق روبي
`def binary_search(target, array)
sorted_array = array.sort
low = 0
high = (sorted_array.length) - 1
while high >= low
middle = (low + high) / 2
if target > sorted_array[middle]
low = middle + 1
elsif target < sorted_array[middle]
high = middle - 1
else
return middle
end
end
return nil
end
`
```ruby
def binary_search(target, array)
sorted_array = array.sort
low = 0
high = (sorted_array.length) - 1
while high >= low
middle = (low + high) / 2
if target > sorted_array[middle]
low = middle + 1
elsif target < sorted_array[middle]
high = middle - 1
else
return middle
end
end
return nil
end
```
### مثال في C
@ -187,18 +192,19 @@ _O_ ( _log 2 N_ ) يكون هكذا لأنه في كل خطوة نصف العن
### تنفيذ بايثون
`def binary_search(arr, l, r, target):
if r >= l:
mid = l + (r - l)/2
if arr[mid] == target:
return mid
elif arr[mid] > target:
return binary_search(arr, l, mid-1, target)
else:
return binary_search(arr, mid+1, r, target)
else:
return -1
`
```Python
def binary_search(arr, l, r, target):
if r >= l:
mid = l + (r - l)/2
if arr[mid] == target:
return mid
elif arr[mid] > target:
return binary_search(arr, l, mid-1, target)
else:
return binary_search(arr, mid+1, r, target)
else:
return -1
```
### مثال في C ++
@ -249,8 +255,9 @@ _O_ ( _log 2 N_ ) يكون هكذا لأنه في كل خطوة نصف العن
} العودة -1 ؛ }
`Iterative approach!
`
```
Iterative approach!
```
C ++ - نهج تكراري int binarySearch (int arr \[\]، int start، int int، int x) { بينما (تبدأ <= النهاية) { int mid = start + (end-start) / 2؛ إذا (arr \[mid\] == x) عودة منتصف ؛ إذا (arr \[mid\] <x) start = mid + 1؛ آخر end = mid - 1؛ } العودة -1 ؛ } \`\` \`

131
guide/arabic/algorithms/search-algorithms/exponential-search/index.md
View File

@ -17,71 +17,72 @@ O (سجل (N)) كثيرًا ما يتم الخلط بسبب الاسم ، ويت
# الشفرة
`// C++ program to find an element x in a
// sorted array using Exponential search.
#include <bits/stdc++.h>
using namespace std;
int binarySearch(int arr[], int, int, int);
// Returns position of first ocurrence of
// x in array
int exponentialSearch(int arr[], int n, int x)
{
// If x is present at firt location itself
if (arr[0] == x)
return 0;
// Find range for binary search by
// repeated doubling
int i = 1;
while (i < n && arr[i] <= x)
i = i*2;
// Call binary search for the found range.
return binarySearch(arr, i/2, min(i, n), x);
}
// A recursive binary search function. It returns
// location of x in given array arr[l..r] is
// present, otherwise -1
int binarySearch(int arr[], int l, int r, int x)
{
if (r >= l)
{
int mid = l + (r - l)/2;
// If the element is present at the middle
// itself
if (arr[mid] == x)
return mid;
// If element is smaller than mid, then it
// can only be present n left subarray
if (arr[mid] > x)
return binarySearch(arr, l, mid-1, x);
// Else the element can only be present
// in right subarray
return binarySearch(arr, mid+1, r, x);
}
// We reach here when element is not present
// in array
return -1;
}
int main(void)
{
int arr[] = {2, 3, 4, 10, 40};
int n = sizeof(arr)/ sizeof(arr[0]);
int x = 10;
int result = exponentialSearch(arr, n, x);
(result == -1)? printf("Element is not present in array")
: printf("Element is present at index %d", result);
return 0;
}
`
```
// C++ program to find an element x in a
// sorted array using Exponential search.
#include <bits/stdc++.h>
using namespace std;
int binarySearch(int arr[], int, int, int);
// Returns position of first ocurrence of
// x in array
int exponentialSearch(int arr[], int n, int x)
{
// If x is present at firt location itself
if (arr[0] == x)
return 0;
// Find range for binary search by
// repeated doubling
int i = 1;
while (i < n && arr[i] <= x)
i = i*2;
// Call binary search for the found range.
return binarySearch(arr, i/2, min(i, n), x);
}
// A recursive binary search function. It returns
// location of x in given array arr[l..r] is
// present, otherwise -1
int binarySearch(int arr[], int l, int r, int x)
{
if (r >= l)
{
int mid = l + (r - l)/2;
// If the element is present at the middle
// itself
if (arr[mid] == x)
return mid;
// If element is smaller than mid, then it
// can only be present n left subarray
if (arr[mid] > x)
return binarySearch(arr, l, mid-1, x);
// Else the element can only be present
// in right subarray
return binarySearch(arr, mid+1, r, x);
}
// We reach here when element is not present
// in array
return -1;
}
int main(void)
{
int arr[] = {2, 3, 4, 10, 40};
int n = sizeof(arr)/ sizeof(arr[0]);
int x = 10;
int result = exponentialSearch(arr, n, x);
(result == -1)? printf("Element is not present in array")
: printf("Element is present at index %d", result);
return 0;
}
```
# معلومات اكثر

68
guide/arabic/algorithms/search-algorithms/linear-search/index.md
View File

@ -57,19 +57,20 @@ localeTitle: بحث خطي
### مثال في روبي
`def linear_search(target, array)
counter = 0
while counter < array.length
if array[counter] == target
return counter
else
counter += 1
end
end
return nil
end
`
```ruby
def linear_search(target, array)
counter = 0
while counter < array.length
if array[counter] == target
return counter
else
counter += 1
end
end
return nil
end
```
### مثال في C ++
@ -103,26 +104,27 @@ localeTitle: بحث خطي
يحتوي هذا الصفيف على 3 مرات من 5s ونريد إرجاع الفهارس (حيث توجد في المصفوفة) لجميعهم. وهذا ما يسمى بالبحث الخطي العالمي ، وستحتاج إلى ضبط شفرتك لإرجاع مصفوفة من نقاط الفهرسة التي يعثر فيها على عنصر الهدف. عند العثور على عنصر فهرس يطابق الهدف ، ستتم إضافة نقطة الفهرس (العداد) في مصفوفة النتائج. إذا لم يتطابق مع الرمز ، فستستمر في الانتقال إلى العنصر التالي في الصفيف بإضافة 1 إلى العداد.
`def global_linear_search(target, array)
counter = 0
results = []
while counter < array.length
if array[counter] == target
results << counter
counter += 1
else
counter += 1
end
end
if results.empty?
return nil
else
return results
end
end
`
```ruby
def global_linear_search(target, array)
counter = 0
results = []
while counter < array.length
if array[counter] == target
results << counter
counter += 1
else
counter += 1
end
end
if results.empty?
return nil
else
return results
end
end
```
## لماذا البحث الخطي غير فعال

31
guide/arabic/algorithms/sorting-algorithms/bubble-sort/index.md
View File

@ -56,21 +56,22 @@ Bubble Sort هي أبسط خوارزمية الفرز التي تعمل من خ
سيستخدم هذا الرمز الفرز الفقاعي لفرز الصفيف.
`let arr = [1, 4, 7, 45, 7,43, 44, 25, 6, 4, 6, 9];
let sorted = false
while(!sorted) {
sorted = true
for(var i=0; i < arr.length; i++) {
if(arr[i] < arr[i-1]) {
let temp = arr[i];
arr[i] = arr[i-1];
arr[i-1] = temp;
sorted = false;
}
}
}
`
```js
let arr = [1, 4, 7, 45, 7,43, 44, 25, 6, 4, 6, 9];
let sorted = false
while(!sorted) {
sorted = true
for(var i=0; i < arr.length; i++) {
if(arr[i] < arr[i-1]) {
let temp = arr[i];
arr[i] = arr[i-1];
arr[i-1] = temp;
sorted = false;
}
}
}
```
### الخصائص:

45
guide/arabic/algorithms/sorting-algorithms/bucket-sort/index.md
View File

@ -16,28 +16,29 @@ localeTitle: فرز دلو
### رمز زائف لدلو الفرز:
`void bucketSort(float[] a,int n)
{
for(each floating integer 'x' in n)
{
insert x into bucket[n*x];
}
for(each bucket)
{
sort(bucket);
}
}
`
```
void bucketSort(float[] a,int n)
{
for(each floating integer 'x' in n)
{
insert x into bucket[n*x];
}
for(each bucket)
{
sort(bucket);
}
}
```
### معلومات اكثر:

41
guide/arabic/algorithms/sorting-algorithms/counting-sort/index.md
View File

@ -8,26 +8,27 @@ localeTitle: فرز الفرز
### مثال:
`For simplicity, consider the data in the range 0 to 9.
Input data: 1, 4, 1, 2, 7, 5, 2
1) Take a count array to store the count of each unique object.
Index: 0 1 2 3 4 5 6 7 8 9
Count: 0 2 2 0 1 1 0 1 0 0
2) Modify the count array such that each element at each index
stores the sum of previous counts.
Index: 0 1 2 3 4 5 6 7 8 9
Count: 0 2 4 4 5 6 6 7 7 7
The modified count array indicates the position of each object in
the output sequence.
3) Output each object from the input sequence followed by
decreasing its count by 1.
Process the input data: 1, 4, 1, 2, 7, 5, 2. Position of 1 is 2.
Put data 1 at index 2 in output. Decrease count by 1 to place
next data 1 at an index 1 smaller than this index.
`
```
For simplicity, consider the data in the range 0 to 9.
Input data: 1, 4, 1, 2, 7, 5, 2
1) Take a count array to store the count of each unique object.
Index: 0 1 2 3 4 5 6 7 8 9
Count: 0 2 2 0 1 1 0 1 0 0
2) Modify the count array such that each element at each index
stores the sum of previous counts.
Index: 0 1 2 3 4 5 6 7 8 9
Count: 0 2 4 4 5 6 6 7 7 7
The modified count array indicates the position of each object in
the output sequence.
3) Output each object from the input sequence followed by
decreasing its count by 1.
Process the input data: 1, 4, 1, 2, 7, 5, 2. Position of 1 is 2.
Put data 1 at index 2 in output. Decrease count by 1 to place
next data 1 at an index 1 smaller than this index.
```
### التنفيذ

89
guide/arabic/algorithms/sorting-algorithms/insertion-sort/index.md
View File

@ -104,21 +104,22 @@ localeTitle: ترتيب بالإدراج
في ما يلي تطبيق تم إلغاء تنفيذه في جافا سكريبت:
`function insertion_sort(A) {
var len = array_length(A);
var i = 1;
while (i < len) {
var x = A[i];
var j = i - 1;
while (j >= 0 && A[j] > x) {
A[j + 1] = A[j];
j = j - 1;
}
A[j+1] = x;
i = i + 1;
}
}
`
```
function insertion_sort(A) {
var len = array_length(A);
var i = 1;
while (i < len) {
var x = A[i];
var j = i - 1;
while (j >= 0 && A[j] > x) {
A[j + 1] = A[j];
j = j - 1;
}
A[j+1] = x;
i = i + 1;
}
}
```
يتم تنفيذ سريع في سويفت كما هو موضح أدناه:
@ -141,37 +142,39 @@ localeTitle: ترتيب بالإدراج
يظهر مثال Java أدناه:
`public int[] insertionSort(int[] arr)
for (j = 1; j < arr.length; j++) {
int key = arr[j]
int i = j - 1
while (i > 0 and arr[i] > key) {
arr[i+1] = arr[i]
i -= 1
}
arr[i+1] = key
}
return arr;
`
```
public int[] insertionSort(int[] arr)
for (j = 1; j < arr.length; j++) {
int key = arr[j]
int i = j - 1
while (i > 0 and arr[i] > key) {
arr[i+1] = arr[i]
i -= 1
}
arr[i+1] = key
}
return arr;
```
### الإدراج الإدراج في ج ...
`void insertionSort(int arr[], int n)
{
int i, key, j;
for (i = 1; i < n; i++)
{
key = arr[i];
j = i-1;
while (j >= 0 && arr[j] > key)
{
arr[j+1] = arr[j];
j = j-1;
}
arr[j+1] = key;
}
}
`
```C
void insertionSort(int arr[], int n)
{
int i, key, j;
for (i = 1; i < n; i++)
{
key = arr[i];
j = i-1;
while (j >= 0 && arr[j] > key)
{
arr[j+1] = arr[j];
j = j-1;
}
arr[j+1] = key;
}
}
```
### الخصائص:

38
guide/arabic/algorithms/sorting-algorithms/merge-sort/index.md
View File

@ -12,14 +12,15 @@ localeTitle: دمج التصنيف
وضعه في الإنجليزية بسيطة ، نقوم بتحليل المشكلة الفرعية إلى جزأين في كل خطوة ولدينا بعض العمل الخطي الذي يتعين علينا القيام به لدمج النصفين اللذين تم فرزهما معاً في كل خطوة.
`T(n) = 2T(n/2) + n
= 2(2T(n/4) + n/2) + n
= 4T(n/4) + n + n
= 4(2T(n/8) + n/4) + n + n
= 8T(n/8) + n + n + n
= nT(n/n) + n + ... + n + n + n
= n + n + ... + n + n + n
`
```
T(n) = 2T(n/2) + n
= 2(2T(n/4) + n/2) + n
= 4T(n/4) + n + n
= 4(2T(n/8) + n/4) + n + n
= 8T(n/8) + n + n + n
= nT(n/n) + n + ... + n + n + n
= n + n + ... + n + n + n
```
بإحصاء عدد التكرارات لـ n في المجموع في النهاية ، نرى أن هناك lg n + 1 منهم. وبالتالي فإن وقت التشغيل هو n (lg n + 1) = n lg n + n. نلاحظ أن ng n + n <n lg n + n lg n = 2n lg n لـ n> 0 ، وبالتالي فإن وقت التشغيل هو O (n lg n).
@ -68,8 +69,9 @@ const merge = (يسار ، يمين) => { var result = \[\]؛ بينما (left.l
console.log (mergeSort (list)) // \[3، 4، 8، 15، 16، 23، 42\]
`### Implementation in C
`
```
### Implementation in C
```
C
@ -143,11 +145,12 @@ int m = l + (rl) / 2؛
return 0;
`
`### Implementation in C++
Let us consider array A = {2,5,7,8,9,12,13}
and array B = {3,5,6,9,15} and we want array C to be in ascending order as well.
`
```
### Implementation in C++
Let us consider array A = {2,5,7,8,9,12,13}
and array B = {3,5,6,9,15} and we want array C to be in ascending order as well.
```
ج ++ vcess mergesort (int A \[\]، int size _a، int B \[\]، int size_ b، int C \[\]) { رمز token _a ، الرمز المميز_ b ، الرمز المميز _c ؛ for (token_ a = 0، token _b = 0، token_ c = 0؛ token _a_ _a && token _b__ __ب؛ ) { إذا (A \[token _a\] <= B \[token_ b\]) C \[token _c ++\] = A \[token_ a ++\]؛ آخر C \[token _c ++\] = B \[token_ b ++\]؛ }__
@ -165,8 +168,9 @@ int m = l + (rl) / 2؛
}
`### Implementation in Python
`
```
### Implementation in Python
```
الثعبان درجة الحرارة = لا شيء def def (arr، left، right): درجة الحرارة العالمية ، الانقلابات mid = (يسار + يمين) // 2 لأني في النطاق (يسار ، يمين + 1): درجة الحرارة \[i\] = arr \[i\]

119
guide/arabic/algorithms/sorting-algorithms/quick-sort/index.md
View File

@ -14,65 +14,66 @@ localeTitle: فرز سريع
تنفيذ سريع في JavaScript:
`const arr = [6, 2, 5, 3, 8, 7, 1, 4]
const quickSort = (arr, start, end) => {
if(start < end) {
// You can learn about how the pivot value is derived in the comments below
let pivot = partition(arr, start, end)
// Make sure to read the below comments to understand why pivot - 1 and pivot + 1 are used
// These are the recursive calls to quickSort
quickSort(arr, start, pivot - 1)
quickSort(arr, pivot + 1, end)
}
}
const partition = (arr, start, end) => {
let pivot = end
// Set i to start - 1 so that it can access the first index in the event that the value at arr[0] is greater than arr[pivot]
// Succeeding comments will expound upon the above comment
let i = start - 1
let j = start
// Increment j up to the index preceding the pivot
while (j < pivot) {
// If the value is greater than the pivot increment j
if (arr[j] > arr[pivot]) {
j++
}
// When the value at arr[j] is less than the pivot:
// increment i (arr[i] will be a value greater than arr[pivot]) and swap the value at arr[i] and arr[j]
else {
i++
swap(arr, j, i)
j++
}
}
//The value at arr[i + 1] will be greater than the value of arr[pivot]
swap(arr, i + 1, pivot)
//You return i + 1, as the values to the left of it are less than arr[i+1], and values to the right are greater than arr[i + 1]
// As such, when the recursive quicksorts are called, the new sub arrays will not include this the previously used pivot value
return i + 1
}
const swap = (arr, firstIndex, secondIndex) => {
let temp = arr[firstIndex]
arr[firstIndex] = arr[secondIndex]
arr[secondIndex] = temp
}
quickSort(arr, 0, arr.length - 1)
console.log(arr)
`
```javascript
const arr = [6, 2, 5, 3, 8, 7, 1, 4]
const quickSort = (arr, start, end) => {
if(start < end) {
// You can learn about how the pivot value is derived in the comments below
let pivot = partition(arr, start, end)
// Make sure to read the below comments to understand why pivot - 1 and pivot + 1 are used
// These are the recursive calls to quickSort
quickSort(arr, start, pivot - 1)
quickSort(arr, pivot + 1, end)
}
}
const partition = (arr, start, end) => {
let pivot = end
// Set i to start - 1 so that it can access the first index in the event that the value at arr[0] is greater than arr[pivot]
// Succeeding comments will expound upon the above comment
let i = start - 1
let j = start
// Increment j up to the index preceding the pivot
while (j < pivot) {
// If the value is greater than the pivot increment j
if (arr[j] > arr[pivot]) {
j++
}
// When the value at arr[j] is less than the pivot:
// increment i (arr[i] will be a value greater than arr[pivot]) and swap the value at arr[i] and arr[j]
else {
i++
swap(arr, j, i)
j++
}
}
//The value at arr[i + 1] will be greater than the value of arr[pivot]
swap(arr, i + 1, pivot)
//You return i + 1, as the values to the left of it are less than arr[i+1], and values to the right are greater than arr[i + 1]
// As such, when the recursive quicksorts are called, the new sub arrays will not include this the previously used pivot value
return i + 1
}
const swap = (arr, firstIndex, secondIndex) => {
let temp = arr[firstIndex]
arr[firstIndex] = arr[secondIndex]
arr[secondIndex] = temp
}
quickSort(arr, 0, arr.length - 1)
console.log(arr)
```
تنفيذ فرز سريع في C

89
guide/arabic/algorithms/sorting-algorithms/radix-sort/index.md
View File

@ -59,50 +59,51 @@ QuickSort و MergeSort و HeapSort هي خوارزميات الفرز على أ
تنفيذ في C:
`void countsort(int arr[],int n,int place){
int i,freq[range]={0}; //range for integers is 10 as digits range from 0-9
int output[n];
for(i=0;i<n;i++)
freq[(arr[i]/place)%range]++;
for(i=1;i<range;i++)
freq[i]+=freq[i-1];
for(i=n-1;i>=0;i--){
output[freq[(arr[i]/place)%range]-1]=arr[i];
freq[(arr[i]/place)%range]--;
}
for(i=0;i<n;i++)
arr[i]=output[i];
}
void radixsort(ll arr[],int n,int maxx){ //maxx is the maximum element in the array
int mul=1;
while(maxx){
countsort(arr,n,mul);
mul*=10;
maxx/=10;
}
}
`
```
void countsort(int arr[],int n,int place){
int i,freq[range]={0}; //range for integers is 10 as digits range from 0-9
int output[n];
for(i=0;i<n;i++)
freq[(arr[i]/place)%range]++;
for(i=1;i<range;i++)
freq[i]+=freq[i-1];
for(i=n-1;i>=0;i--){
output[freq[(arr[i]/place)%range]-1]=arr[i];
freq[(arr[i]/place)%range]--;
}
for(i=0;i<n;i++)
arr[i]=output[i];
}
void radixsort(ll arr[],int n,int maxx){ //maxx is the maximum element in the array
int mul=1;
while(maxx){
countsort(arr,n,mul);
mul*=10;
maxx/=10;
}
}
```
### معلومات اكثر:

5
guide/arabic/algorithms/sorting-algorithms/selection-sort/index.md
View File

@ -43,8 +43,9 @@ localeTitle: اختيار نوع
تبديل الدالة (A، x، y) { var temp = A \[x\]؛ A \[x\] = A \[y\]؛ A \[ص\] = درجة الحرارة }
`### Implementation in Python
`
```
### Implementation in Python
```
الثعبان def seletion _sort (arr): إن لم يكن arr: عودة arr لأني في المدى (len (arr)): دقيقة_ ط = ط لـ j في النطاق (i + 1، len (arr)): إذا كان \[j\] <arr \[min _i\]: دقيقة_ ط = ي arr \[i\] ، arr \[min _i\] = arr \[min_ i\] ، arr \[i\] \`\` \`

17
guide/arabic/android-development/firebase/connect-to-firebase/index.md
View File

@ -15,14 +15,15 @@ localeTitle: التي تربط إلى firebase
2. قم بتثبيت Google Repository يمكنك القيام بذلك عن طريق إضافة التبعية إلى ملف build.gradle على مستوى المشروع كما يلي:
`allprojects{
repositories {
maven {
url "https://maven.google.com" // Google's Maven repository
}
}
}
`
```java
allprojects{
repositories {
maven {
url "https://maven.google.com" // Google's Maven repository
}
}
}
```
بدلا من ذلك ، يمكنك القيام بذلك [باستخدام واجهة المستخدم الرسومية](https://developer.android.com/studio/write/firebase) .

11
guide/arabic/android-development/firebase/realtime-database/setup/index.md
View File

@ -18,11 +18,12 @@ localeTitle: إعداد قاعدة بيانات Firebase في الوقت الف
**إضافة التبعيات Gradle** 1 في ملف build.gradle على مستوى التطبيق ، أضف ما يلي
`dependencies {
implementation 'com.firebase:firebase-client-android:2.5.2+'
implementation 'com.google.firebase:firebase-database:15.0.0'
}
`
```java
dependencies {
implementation 'com.firebase:firebase-client-android:2.5.2+'
implementation 'com.google.firebase:firebase-database:15.0.0'
}
```
# تثبيت Firebase Android SDK والأذونات ورمز الإعداد

23
guide/arabic/angular/animations/index.md
View File

@ -251,17 +251,18 @@ localeTitle: الرسوم المتحركة
يتم عرض الرمز الأدنى لهذا السيناريو أدناه. سأعيد استخدام نفس حالة الرسوم المتحركة للشفرة أعلاه للاتساق ولا أقوم بعرض أي من رموز الرسوم المتحركة الفعلية حيث يمكنك بسهولة العثور على ذلك أعلاه.
`import { Component, HostBinding } from '@angular/core';
@Component({
...
})
export class ExampleComponent {
@HostBinding('@animateArc') get arcAnimation() {
return this.arc;
}
}
`
```typescript
import { Component, HostBinding } from '@angular/core';
@Component({
...
})
export class ExampleComponent {
@HostBinding('@animateArc') get arcAnimation() {
return this.arc;
}
}
```
الفكرة الكامنة وراء تحريك مكون المضيف تشبه إلى حد كبير تحريك عنصر من القالب مع الاختلاف الوحيد وهو عدم الوصول إلى العنصر الذي تقوم بتحريكه. لا يزال لديك لتمرير اسم الرسوم المتحركة ( `@animateArc` ) عندما يعلن `HostBinding` ولا يزال لديك للعودة للحالة الراهنة للرسوم المتحركة ( `this.arc` ). لا يمثل اسم الدالة مادة فعلية ، لذلك `arcAnimation` الممكن تغيير `arcAnimation` إلى أي شيء ، طالما أنها لا تتعارض مع أسماء الخصائص الموجودة على المكون ، وستعمل بشكل جيد تمامًا.

112
guide/arabic/angular/components/index.md
View File

@ -26,19 +26,20 @@ localeTitle: المكونات
المضي قدما وتثبيت [واجهة سطر الأوامر Angular (CLI)](https://cli.angular.io) . يمكنك معرفة المزيد حول هذا الموضوع من [هذه المقالة](https://guide.freecodecamp.org/angular/command-line-interface) . يعطي الأمر CLI `ng generate component [name-of-component]` الأمر التالي.
`import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
`
```typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
```
هذا هو الهيكل الأساسي الأساسي الذي تنشأ منه جميع المكونات الرائعة. `@Component` الديكور `@Component` الجزء الأكثر أهمية. بدون ذلك ، يصبح المثال أعلاه فئة عامة. الزاوي يعتمد على ديكور لتمييز نوع تخطيطي.
@ -71,49 +72,50 @@ localeTitle: المكونات
ستقوم المكونات في كثير من الأحيان بتهيئة مجموعة من الأعضاء (أو المتغيرات) التي تقوم بتخزين البيانات. يتم استخدامها في جميع أنحاء المنطق فئة مكون للراحة. تغذي هذه المعلومات المنطق الناتج عن القالب وسلوكه. انظر المثال التالي.
`// ./components/example/example.component.ts
import { Component, OnInit } from '@angular/core';
import { Post, DATA } from '../../data/posts.data';
@Component({
selector: 'app-example',
templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
username: string;
totalPosts: number;
allPosts: Post[];
deletePost(index: number): void {
this.allPosts.splice(index, 1);
this.totalPosts = this.allPosts.length;
}
ngOnInit(): void {
this.username = DATA.author;
this.totalPosts = DATA.thePosts.length;
this.allPosts = DATA.thePosts;
}
}
`
```typescript
// ./components/example/example.component.ts
`
<!-- ./components/example/example.component.html -->
<h1>{{ username }}</h1>
<span>Change Name: </span><input [(ngModel)]="username">
<h3>Posts: {{ totalPosts }}</h3>
<ul>
<hr/>
<div *ngFor="let post of allPosts; let i=index">
<button (click)="deletePost(i)">DELETE</button>
<h6>{{ post.title }}</h6>
<p>{{ post.body }}</p>
<hr/>
</div>
</ul>
`
import { Component, OnInit } from '@angular/core';
import { Post, DATA } from '../../data/posts.data';
@Component({
selector: 'app-example',
templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
username: string;
totalPosts: number;
allPosts: Post[];
deletePost(index: number): void {
this.allPosts.splice(index, 1);
this.totalPosts = this.allPosts.length;
}
ngOnInit(): void {
this.username = DATA.author;
this.totalPosts = DATA.thePosts.length;
this.allPosts = DATA.thePosts;
}
}
```
```html
<!-- ./components/example/example.component.html -->
<h1>{{ username }}</h1>
<span>Change Name: </span><input [(ngModel)]="username">
<h3>Posts: {{ totalPosts }}</h3>
<ul>
<hr/>
<div *ngFor="let post of allPosts; let i=index">
<button (click)="deletePost(i)">DELETE</button>
<h6>{{ post.title }}</h6>
<p>{{ post.body }}</p>
<hr/>
</div>
</ul>
```
لاحظ الطرق التي يتفاعل بها المكون مع بياناته. `../../data/posts.data` أولاً من `../../data/posts.data` قبل أن يبدأ بإعادة توجيهه إلى قالب العرض.

99
guide/arabic/angular/data-binding/index.md
View File

@ -30,20 +30,21 @@ localeTitle: ربط البيانات
للتعرف على خصائص العناصر المرتبطة بالبيانات ، يستخدم Angular بنية قوس خاصة.
`// my.component.ts
@Component({
templateUrl: './my.component.html'
})
export class MyComponent {
value:type = /* some value of type */;
}
`
```typescript
// my.component.ts
@Component({
templateUrl: './my.component.html'
})
`
<!-- my.component.html -->
<any-element [property]=“value”>innerHTML</any-element>
`
export class MyComponent {
value:type = /* some value of type */;
}
```
```html
<!-- my.component.html -->
<any-element [property]=“value”>innerHTML</any-element>
```
تحمل معي على هذا.
@ -71,22 +72,23 @@ localeTitle: ربط البيانات
إذا كان المكون يوفر بيانات ، فإن القالب يوفر الأحداث.
`// my.component.ts
@Component({
templateUrl: './my.component.html'
})
export class MyComponent {
handler(event):void {
// function does stuff
}
}
`
```typescript
// my.component.ts
@Component({
templateUrl: './my.component.html'
})
`
// my.component.html
<any-element (event)=“handler($event)”>innerHTML</any-element>
`
export class MyComponent {
handler(event):void {
// function does stuff
}
}
```
```html
// my.component.html
<any-element (event)=“handler($event)”>innerHTML</any-element>
```
هذا يعمل بالمثل لربط الملكية.
@ -104,23 +106,24 @@ localeTitle: ربط البيانات
يحتوي ربط البيانات ثنائي الاتجاه على الوحدة الخاصة به. قبل إلقاء نظرة على ذلك ، والنظر في المثال التالي.
`// my.component.ts
@Component({
templateUrl: './my.component.html'
})
export class MyComponent {
inputValue:string = "";
handler(event) {
this.inputValue = event.target.value;
}
}
`
```typescript
// my.component.ts
@Component({
templateUrl: './my.component.html'
})
export class MyComponent {
inputValue:string = "";
`
<!-- my.component.html -->
<input (input)=“handler($event)” [value]=“inputValue”>
`
handler(event) {
this.inputValue = event.target.value;
}
}
```
```html
<!-- my.component.html -->
<input (input)=“handler($event)” [value]=“inputValue”>
```
حان الوقت لكسر هذا.
@ -142,10 +145,10 @@ localeTitle: ربط البيانات
}
`
`
<!-- my.component.html -->
<input [(ngModel)]=“inputValue”>
`
```html
<!-- my.component.html -->
<input [(ngModel)]=“inputValue”>
```
`ngModel` هو راحة لطيفة. يجب عليك استيراد FormsModule في جذر التطبيق الخاص بك قبل استخدامه. مع هذا التربيع ، يصبح ربط البيانات ثنائي الاتجاه أسهل للعمل معه.

275
guide/arabic/angular/dependency-injection/index.md
View File

@ -30,60 +30,64 @@ localeTitle: حقن التبعية
إلقاء نظرة على الهياكل العظمية لكل فئة: الخدمة ، الوحدة ، التوجيه ، والمكون.
`// service
import { Injectable } from '@angular/core';
@Injectable({
providedIn: /* injector goes here */
})
export class TemplateService {
constructor() { }
}
`
```typescript
// service
`// module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: [],
providers: [ /* services go here */ ]
})
export class TemplateModule { }
`
import { Injectable } from '@angular/core';
`// directive
import { Directive } from '@angular/core';
@Directive({
selector: '[appTemplate]',
providers: [ /* services go here */ ]
})
export class TemplateDirective {
constructor() { }
}
`
@Injectable({
providedIn: /* injector goes here */
})
export class TemplateService {
constructor() { }
}
```
`//component
import { Component } from '@angular/core';
@Component({
selector: 'app-template',
templateUrl: './template.component.html',
styleUrls: ['./template.component.css'],
providers: [ /* services go here */ ]
})
export class TemplateComponent {
// class logic ...
}
`
```typescript
// module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: [],
providers: [ /* services go here */ ]
})
export class TemplateModule { }
```
```typescript
// directive
import { Directive } from '@angular/core';
@Directive({
selector: '[appTemplate]',
providers: [ /* services go here */ ]
})
export class TemplateDirective {
constructor() { }
}
```
```typescript
//component
import { Component } from '@angular/core';
@Component({
selector: 'app-template',
templateUrl: './template.component.html',
styleUrls: ['./template.component.css'],
providers: [ /* services go here */ ]
})
export class TemplateComponent {
// class logic ...
}
```
يمكن لكل هيكل عظمي تسجيل الخدمات إلى حاقن. في الواقع ، TemplateService _هي_ خدمة. اعتبارًا من Angular 6 ، يمكن الآن للخدمات التسجيل باستخدام الحقن باستخدام البيانات الوصفية `@Injectable` .
@ -121,53 +125,55 @@ localeTitle: حقن التبعية
التوجيهات في حاجة مستمرة من مراجع DOM. تؤدي التوجيهات إلى حدوث طفرات في عناصر المضيف من خلال هذه المراجع. انظر المثال التالي. يقوم حاقن التوجيه بإدخال مرجع لعنصر المضيف في مُنشئ الصف.
`// directives/highlight.directive.ts
import { Directive, ElementRef, Renderer2, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(
private renderer: Renderer2,
private host: ElementRef
) { }
@Input() set appHighlight (color: string) {
this.renderer.setStyle(this.host.nativeElement, 'background-color', color);
}
}
`
```typescript
// directives/highlight.directive.ts
`
// app.component.html
<p [appHighlight]="'yellow'">Highlighted Text!</p>
`
import { Directive, ElementRef, Renderer2, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(
private renderer: Renderer2,
private host: ElementRef
) { }
@Input() set appHighlight (color: string) {
this.renderer.setStyle(this.host.nativeElement, 'background-color', color);
}
}
```
```html
// app.component.html
<p [appHighlight]="'yellow'">Highlighted Text!</p>
```
`Renderer2` أيضاً يحصل على instantiated. أي حاقن تأتي من هذه الخدمات؟ حسنا ، رمز مصدر كل خدمة يأتي من `@angular/core` . يجب أن تسجل هذه الخدمات بعد ذلك مع حاقن الجذر الخاص بالتطبيق.
`import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HighlightDirective } from './directives/highlight.directive';
@NgModule({
declarations: [
AppComponent,
HighlightDirective
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [
AppComponent
]
})
export class AppModule { }
`
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HighlightDirective } from './directives/highlight.directive';
@NgModule({
declarations: [
AppComponent,
HighlightDirective
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [
AppComponent
]
})
export class AppModule { }
```
مجموعة موفري فارغة !؟ لا أخشى. يسجل الزاوي العديد من الخدمات باستخدام حاقن الجذر تلقائيًا. وهذا يشمل `ElementRef` و `Renderer2` . في هذا المثال ، نحن ندير عنصر المضيف من خلال واجهته النابعة من إنشاء `ElementRef` . يتيح لنا `Renderer2` تحديث نموذج عرض DOM من خلال Angular.
@ -181,34 +187,35 @@ localeTitle: حقن التبعية
المثال التالي سيحدد خدمة التسجيل التي تتم إضافتها إلى حاقن المكون من خلال موفريها `providers: []` البيانات التعريفية.
`// services/logger.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class LoggerService {
callStack: string[] = [];
addLog(message: string): void {
this.callStack = [message].concat(this.callStack);
this.printHead();
}
clear(): void {
this.printLog();
this.callStack = [];
console.log(“DELETED LOG”);
}
private printHead(): void {
console.log(this.callStack[0] || null);
}
private printLog(): void {
this.callStack.reverse().forEach((log) => console.log(message));
}
}
`
```typescript
// services/logger.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class LoggerService {
callStack: string[] = [];
addLog(message: string): void {
this.callStack = [message].concat(this.callStack);
this.printHead();
}
clear(): void {
this.printLog();
this.callStack = [];
console.log(“DELETED LOG”);
}
private printHead(): void {
console.log(this.callStack[0] || null);
}
private printLog(): void {
this.callStack.reverse().forEach((log) => console.log(message));
}
}
```
``// app.component.ts
@ -234,18 +241,18 @@ localeTitle: حقن التبعية
}
``
`
// app.component.html
<h1>Log Example</h1>
<form (submit)="logMessage($event, userInput.value)">
<input #userInput placeholder="Type a message...">
<button type="submit">SUBMIT</button>
</form>
<h3>Delete Logged Messages</h3>
<button type="button" (click)="clearLog()">CLEAR</button>
`
```html
// app.component.html
<h1>Log Example</h1>
<form (submit)="logMessage($event, userInput.value)">
<input #userInput placeholder="Type a message...">
<button type="submit">SUBMIT</button>
</form>
<h3>Delete Logged Messages</h3>
<button type="button" (click)="clearLog()">CLEAR</button>
```
التركيز على منشئ AppComponent والبيانات الوصفية. يتلقى حاقن المكون إرشادات من حقل بيانات التعريف الخاصة بالموفر الذي يحتوي على LoggerService. ثم يعرف الحاقن ما يتم إنشاء LoggerService من المطلوب في المُنشئ.

212
guide/arabic/angular/directives/index.md
View File

@ -28,39 +28,40 @@ localeTitle: توجيهات
تعتبر `component.css` و `component.spec.ts` خارج نطاق هذه المقالة. يتضمن الجانب _التوجيهي_ للمكون الملفين الآخرين. ألق نظرة على ملفي `component.ts` و `component.html` .
`// example.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html'
})
export class ExampleComponent {
constructor() { }
}
`
```typescript
// example.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html'
})
export class ExampleComponent {
constructor() { }
}
```
تم قطع اثنين من التفاصيل غير ذات صلة من الجيل الافتراضي من `component.ts` . بهذه الطريقة يكون التركيز على المكون نفسه.
`
<!-- example.component.html -->
<p>example works!</p>
`
```html
<!-- example.component.html -->
<p>example works!</p>
```
قد يبدو إدراج ExampleComponent كطفل مكون آخر كما يلي.
`
<!-- another.component.html -->
<h1>Welcome to AnotherComponent.</h1>
<h3>Check out ExampleComponent!</h3>
<!-- Outputs “<p>example works!</p>” -->
<app-example></app-example>
<h6>This is the end of the AnotherComponent template HTML.</h6>
`
```html
<!-- another.component.html -->
<h1>Welcome to AnotherComponent.</h1>
<h3>Check out ExampleComponent!</h3>
<!-- Outputs “<p>example works!</p>” -->
<app-example></app-example>
<h6>This is the end of the AnotherComponent template HTML.</h6>
```
انتبه إلى `<app-example></app-example>` . يتطابق `app-example` مع المحدد من decoratorComponent في `@Component` . هذا هو عنصر التوجيه. يتعرف الزاوي `app-example` _ويوجه_ عرضه إلى فئة ExampleComponent.
@ -85,27 +86,27 @@ localeTitle: توجيهات
`*ngIf` قيمة معينة لمعرفة ما إذا كانت _صحيحة_ أو _كاذبة_ تستند إلى التقييم المنطقي العام في JavaScript. إذا كانت الحقيقة ، يظهر العنصر و HTML الداخلي. خلاف ذلك ، فإنها لا تقدم أبدا إلى نموذج كائن المجال (DOM).
`
<!-- renders “<h1>Hello!</h1>” -->
<div *ngIf="true">
<h1>Hello!</h1>
</div>
<!-- does not render -->
<div *ngIf="false">
<h1>Hi!</h1>
</div>
`
```html
<!-- renders “<h1>Hello!</h1>” -->
<div *ngIf="true">
<h1>Hello!</h1>
</div>
<!-- does not render -->
<div *ngIf="false">
<h1>Hi!</h1>
</div>
```
هذا مثال مفتعل. يمكن استبدال أي قيمة عضو من فئة مكون القالب بـ `true` أو `false` .
ملاحظة: يمكنك أيضًا القيام بما يلي مع \* ngIf للوصول إلى قيمة الملاحظة
`
<div *ngIf="observable$ | async as anyNameYouWant">
{{ anyNameYouWant }}
</div>
`
```html
<div *ngIf="observable$ | async as anyNameYouWant">
{{ anyNameYouWant }}
</div>
```
##### \* ngFor
@ -134,11 +135,11 @@ localeTitle: توجيهات
ملاحظة: يمكنك أيضًا القيام بما يلي مع \* ngFor التوجيه للوصول إلى قيمة الملاحظة (hacky)
`
<div *ngFor="let anyNameYouWant of [(observable$ | async)]">
{{ anyNameYouWant }}
</div>
`
```html
<div *ngFor="let anyNameYouWant of [(observable$ | async)]">
{{ anyNameYouWant }}
</div>
```
##### \* ngSwitchCase و \* ngSwitchDefault
@ -165,15 +166,16 @@ localeTitle: توجيهات
يحدد `ng-template` التوجيهات الهيكلية. يشرح كيف يمكنهم تكوين HTML النموذج لإنتاج HTML الفعلي. ابدأ بإنشاء أمر توجيه باستخدام `ng generate directive [name-of-directive]` . استبدل `[name-of-directive]` باسم مفضل. يعطي الأمر ما يلي.
`import { Directive } from '@angular/core';
@Directive({
selector: '[appExample]'
})
export class ExampleDirective {
constructor() { }
}
`
```typescript
import { Directive } from '@angular/core';
@Directive({
selector: '[appExample]'
})
export class ExampleDirective {
constructor() { }
}
```
هذا الهيكل العظمي التوجيهي هي جميلة عارية. لا نعرف بعد ما إذا كنا نبني توجيهًا هيكليًا أو مسطرة. يحدد `selector: '[appExample]'` الزاوي ما `selector: '[appExample]'` التوجيهات إلى. نظرًا لأنك تقوم بإنشاء توجيه هيكلي ، قم بتعديل الهيكل العظمي كما يلي.
@ -201,14 +203,14 @@ localeTitle: توجيهات
تضمين عنصر عشوائي مع سمة `appExample` بمثابة مثال جيد.
`
<div *appExample=“value”>innerHTML content</div>
<!-- This is shorthand for:
<ng-template>
<div>innerHTML content</div>
</ng-template>
-->
`
```html
<div *appExample=“value”>innerHTML content</div>
<!-- This is shorthand for:
<ng-template>
<div>innerHTML content</div>
</ng-template>
-->
```
هذا هو الكثير ليأخذ في. `@Input() set ...` هو إعلان عضو واضعة. يتم تنفيذ ذلك عندما تظهر السمة `appExample` داخل عنصر ويتم تعيين قيمة منطقية لها. تستقبل الدالة setter تلك القيمة المنطقية كمعلمة للتنفيذ.
@ -224,17 +226,17 @@ localeTitle: توجيهات
في الواقع ، فإن ExampleDirective أعلاه يحاكي وظائف `*ngIf` !
`
<!-- renders “<h1>Hello!</h1>” -->
<div *ngExample="true">
<h1>Hello!</h1>
</div>
<!-- does not render -->
<div *appExample="false">
<h1>Hi!</h1>
</div>
`
```html
<!-- renders “<h1>Hello!</h1>” -->
<div *ngExample="true">
<h1>Hello!</h1>
</div>
<!-- does not render -->
<div *appExample="false">
<h1>Hi!</h1>
</div>
```
لا تنسى النجمة ( `*` ). هو اختزال لعنصر `ng-template` الذي تشير إليه فئة التوجيه الخاصة بنا.
@ -248,40 +250,42 @@ localeTitle: توجيهات
إنشاء توجيه آخر: `ng generate directive [name-of-directive]` . استبدل `[name-of-directive]` باسم مفضل.
`import { Directive } from '@angular/core';
@Directive({
selector: '[appExample]'
})
export class ExampleDirective {
constructor() { }
}
`
```typescript
import { Directive } from '@angular/core';
@Directive({
selector: '[appExample]'
})
export class ExampleDirective {
constructor() { }
}
```
تبدأ السمة والتوجيهات الهيكلية بنفس الهيكل العظمي. سوف تضيف بضعة إضافات أخرى توجيه السمة.
`import { Directive, Input, ElementRef } from '@angular/core';
@Directive({
selector: '[appExample]'
})
export class ExampleDirective {
@Input() set appExample(color:string) {
this.host.nativeElement.style.color = color;
}
constructor(private host:ElementRef) { }
}
`
```typescript
import { Directive, Input, ElementRef } from '@angular/core';
@Directive({
selector: '[appExample]'
})
export class ExampleDirective {
@Input() set appExample(color:string) {
this.host.nativeElement.style.color = color;
}
constructor(private host:ElementRef) { }
}
```
بعض العناصر لاختبار مع مساعدة.
`
<!-- the intended results are self-explanatory -->
<div appExample=“purple”>This text is purple!</div>
<div appExample=“blue”>This text is blue!</div>
<div appExample=“red”>This text is red!</div>
`
```html
<!-- the intended results are self-explanatory -->
<div appExample=“purple”>This text is purple!</div>
<div appExample=“blue”>This text is blue!</div>
<div appExample=“red”>This text is red!</div>
```
يوفر `ElementRef` إشارة مباشرة إلى عنصر المضيف. يستحوذ `ElementRef.nativeElement` على عقدة DOM. مع العقدة ، فإن تصميم العنصر بسيط مثل `this.host.nativeElement.style.color = color` .

11
guide/arabic/angular/index.md
View File

@ -22,9 +22,9 @@ AngularJS (الإصدارات 1.x) هو إطار مفتوح المصدر يست
AngularJS: يمكننا إضافة AngularJS (الإصدارات 1.x الزاوي) من خلال الرجوع إلى شبكة تسليم المحتوى من Google.
`
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
`
```html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
```
التنزيل / التثبيت: يمكننا تنزيل إطار العمل باستخدام npm أو Bower أو composer
@ -39,8 +39,9 @@ AngularJS: يمكننا إضافة AngularJS (الإصدارات 1.x الزاو
أتش تي أم أل
`bower
`
```
bower
```
الصدف باور تثبيت زاوية

393
guide/arabic/angular/ngmodules/index.md
View File

@ -20,13 +20,14 @@ localeTitle: iModules
يحدد Angular وحداته عن طريق تزيين فئة عامة. يشير مصمم `@NgModule` إلى الغرض المعياري للصف في Angular. يدمج صنف NgModule تبعيات الجذر التي يمكن الوصول إليها / سريعة التأثر من نطاق الوحدة. "النطاق" يعني أي شيء ينشأ عن البيانات الوصفية للوحدة.
`import { NgModule } from '@angular/core';
@NgModule({
// … metadata …
})
export class AppModule { }
`
```typescript
import { NgModule } from '@angular/core';
@NgModule({
// … metadata …
})
export class AppModule { }
```
#### NgModule Metadata
@ -41,37 +42,39 @@ localeTitle: iModules
تتضمن مصفوفة الإعلانات جميع المكونات أو التوجيهات أو الأنابيب المستضافة من قِبل NgModule. وهي خاصة بالوحدة ما لم يتم تصديرها صراحة داخل البيانات الوصفية الخاصة بها. بالنظر إلى حالة الاستخدام هذه ، فإن المكونات والتوجيهات والأنابيب تُلقَى بـ "المُعلنين". يجب أن يقوم NgModule بإعلان المصادفة بشكل فريد. لا يمكن تعريف declarable مرتين في NgModules منفصلة. يلقى خطأ وإلا. انظر المثال التالي.
`import { NgModule } from '@angular/core';
import { TwoComponent } from './components/two.component.ts';
@NgModule({
declarations: [ TwoComponent ]
})
export class TwoModule { }
@NgModule({
imports: [ TwoModule ],
declarations: [ TwoComponent ]
})
export class OneModule { }
`
```typescript
import { NgModule } from '@angular/core';
import { TwoComponent } from './components/two.component.ts';
@NgModule({
declarations: [ TwoComponent ]
})
export class TwoModule { }
@NgModule({
imports: [ TwoModule ],
declarations: [ TwoComponent ]
})
export class OneModule { }
```
يلقي الزاوي خطأ من أجل تغليف NgModule. تكون Declarables خاصة إلى NgModule التي تعلن عليها بشكل افتراضي. إذا احتاج العديد من NgModules إلى معينة يمكن تعريفه ، فيجب عليهم استيراد إعلان NgModule. يجب على هذا NgModule ثم تصدير المطلوبة declarable بحيث يمكن استخدام NgModules الأخرى عليه.
`import { NgModule } from '@angular/core';
import { TwoComponent } from './components/two.component.ts';
@NgModule({
declarations: [ TwoComponent ],
exports: [ TwoComponent ]
})
export class TwoModule { }
@NgModule({
imports: [ TwoModule ] // this module can now use TwoComponent
})
export class OneModule { }
`
```typescript
import { NgModule } from '@angular/core';
import { TwoComponent } from './components/two.component.ts';
@NgModule({
declarations: [ TwoComponent ],
exports: [ TwoComponent ]
})
export class TwoModule { }
@NgModule({
imports: [ TwoModule ] // this module can now use TwoComponent
})
export class OneModule { }
```
المثال أعلاه لن يرمي خطأ. تم الإعلان عن TwoComponent بشكل فريد بين اثنين NgModules. لدى OneModule أيضاً الوصول إلى TwoComponent منذ أن يقوم باستيراد TwoModule. TwoModule بدوره بتصدير في TwoComponent للاستخدام الخارجي.
@ -89,27 +92,28 @@ localeTitle: iModules
إذا كان موفرو NgModule يحتويون على قيم رمزية مطابقة ، فستكون الأولوية لوحدة جذور الاستيراد. الماضي ، فإن آخر NgModule المستوردة الأسبقية. انظر المثال التالي. انتبه بشكل خاص إلى NgModule باستيراد الاثنين الآخرين. تعرف على كيفية تأثير ذلك على أسبقية الخدمة المقدمة.
`import { NgModule } from '@angular/core';
@NgModule({
providers: [ AwesomeService ], // 1st precedence + importing module
imports: [
BModule,
CModule
]
})
export class AModule { }
@NgModule({
providers: [ AwesomeService ] // 3rd precedence + first import
})
export class BModule { }
@NgModule({
providers: [ AwesomeService ] // 2nd precedence + last import
})
export class CModule { }
`
```typescript
import { NgModule } from '@angular/core';
@NgModule({
providers: [ AwesomeService ], // 1st precedence + importing module
imports: [
BModule,
CModule
]
})
export class AModule { }
@NgModule({
providers: [ AwesomeService ] // 3rd precedence + first import
})
export class BModule { }
@NgModule({
providers: [ AwesomeService ] // 2nd precedence + last import
})
export class CModule { }
```
Instantinating AwesomeService من داخل نطاق AModule ينتج عنه مثيل AwesomeService كما هو منصوص عليه في البيانات الوصفية لـ AModule. إذا قام مزودو AModule بحذف هذه الخدمة ، فستكون الأولوية لـ Awesome Service من CModule. وهكذا ، بالنسبة إلى BModule إذا قام مزودو CModule بحذف AwesomeService.
@ -117,18 +121,19 @@ Instantinating AwesomeService من داخل نطاق AModule ينتج عنه م
يقبل مصفوفة bootstrap المكونات. بالنسبة لكل مكون في المصفوفة ، يقوم Angular بإدراج المكون كجذر خاص به لملف `index.html` . سوف يكون دائما جذر NgIodule من تطبيق CLI من تطبيق هذا الحقل.
`import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule ],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
`
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule ],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```
سيتم حقن عنصر AppComponent في HTML الأساسي من التطبيق ( `index.html` ). بقية شجرة المكون تتكشف من هناك. يغطي نطاق NgModule الشامل هذه الشجرة بأكملها بالإضافة إلى أي أخرى يتم حقنها من مصفوفة التمهيد. عادة ما يحتوي المصفوفة على عنصر واحد فقط. يمثل هذا المكون الوحدة النمطية كعنصر واحد والشجرة الأساسية.
@ -142,31 +147,32 @@ Instantinating AwesomeService من داخل نطاق AModule ينتج عنه م
توفر وحدات جافا سكريبت مراجع رمزية للبيانات الوصفية لـ `@NgModule` . يحدث هذا في أعلى ملف يستضيف فصل NgModule. يستخدم NgModule هذه الرموز المميزة داخل حقول البيانات الوصفية (المصاريف ، والواردات ، ومقدمي الخدمات ، إلخ). السبب الوحيد `@NgModule` بتزيين فئة في المقام الأول هو أن JavaScript تقوم باستيرادها من أعلى الملف.
`// JavaScript module system provides tokens
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppService } from './app.service';
// Javascript module system is strict about where it imports. It can only import at the top of files.
// Angular NgModule uses those tokens in its metadata settings
@NgModule({ // import { NgModule } from '@angular/core';
declarations: [
AppComponent // import { AppComponent } from './app.component';
],
imports: [
BrowserModule // import { BrowserModule } from '@angular/platform-browser';
],
providers: [
AppService // import { AppService } from './app.service';
],
bootstrap: [
AppComponent // import { AppComponent } from './app.component';
]
})
export class AppModule { }
// JavaScript module system exports the class. Other modules can now import AppModule.
`
```typescript
// JavaScript module system provides tokens
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppService } from './app.service';
// Javascript module system is strict about where it imports. It can only import at the top of files.
// Angular NgModule uses those tokens in its metadata settings
@NgModule({ // import { NgModule } from '@angular/core';
declarations: [
AppComponent // import { AppComponent } from './app.component';
],
imports: [
BrowserModule // import { BrowserModule } from '@angular/platform-browser';
],
providers: [
AppService // import { AppService } from './app.service';
],
bootstrap: [
AppComponent // import { AppComponent } from './app.component';
]
})
export class AppModule { }
// JavaScript module system exports the class. Other modules can now import AppModule.
```
المثال أعلاه لا يقدم أي شيء جديد. وينصب التركيز هنا على التعليقات التي توضح كيفية عمل النظامين المعياريين معًا. توفر JavaScript المراجع الرمزية بينما يستخدم NgModule تلك الرمز المميز لتغليف وتكوين الكتل الأساسية من التعليمة البرمجية الخاصة به.
@ -182,50 +188,52 @@ Instantinating AwesomeService من داخل نطاق AModule ينتج عنه م
في الجذر NgModule من التطبيق ، إضافة الرمز المميز وحدة نمطية في مجموعة `imports` الجذر يفعل خدعة. أيًا كانت الوحدة النمطية التي يصدرها أو يوفرها ، تصبح متاحة للجذر.
`// ./awesome.module.ts
import { NgModule } from '@angular/core';
import { AwesomePipe } from './awesome/pipes/awesome.pipe';
import { AwesomeComponent } from './awesome/components/awesome.component';
import { AwesomeDirective } from './awesome/directives/awesome.directive';
@NgModule({
exports: [
AwesomePipe,
AwesomeComponent,
AwesomeDirective
]
declarations: [
AwesomePipe,
AwesomeComponent,
AwesomeDirective
]
})
export class AwesomeModule { }
`
```typescript
// ./awesome.module.ts
`// ./app.module.ts
import { AwesomeModule } from './awesome.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
AwesomeModule,
BrowserModule
],
providers: [],
bootstrap: [
AppComponent
]
})
export class AppModule { }
`
import { NgModule } from '@angular/core';
import { AwesomePipe } from './awesome/pipes/awesome.pipe';
import { AwesomeComponent } from './awesome/components/awesome.component';
import { AwesomeDirective } from './awesome/directives/awesome.directive';
@NgModule({
exports: [
AwesomePipe,
AwesomeComponent,
AwesomeDirective
]
declarations: [
AwesomePipe,
AwesomeComponent,
AwesomeDirective
]
})
export class AwesomeModule { }
```
```typescript
// ./app.module.ts
import { AwesomeModule } from './awesome.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
AwesomeModule,
BrowserModule
],
providers: [],
bootstrap: [
AppComponent
]
})
export class AppModule { }
```
``// ./app.component.ts
@ -263,67 +271,70 @@ Instantinating AwesomeService من داخل نطاق AModule ينتج عنه م
لتحديد طريقة الوحدة النمطية الثابتة الخاصة بك يمكنك إضافته إلى فئة الوحدة النمطية باستخدام الكلمة الأساسية `static` . يجب أن يكون نوع الإرجاع هو `ModuleWithProviders` .
`// configureable.module.ts
import { AwesomeModule } from './awesome.module';
import { ConfigureableService, CUSTOM_CONFIG_TOKEN, Config } from './configurable.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
@NgModule({
imports: [
AwesomeModule,
BrowserModule
],
providers: [
ConfigureableService
]
})
export class ConfigureableModule {
static forRoot(config: Config): ModuleWithProviders {
return {
ngModule: ConfigureableModule,
providers: [
ConfigureableService,
{
provide: CUSTOM_CONFIG_TOKEN,
useValue: config
}
]
};
}
}
`
```ts
// configureable.module.ts
`// configureable.service.ts
import { Inject, Injectable, InjectionToken } from '@angular/core';
export const CUSTOM_CONFIG_TOKEN: InjectionToken<string> = new InjectionToken('customConfig');
export interface Config {
url: string
}
@Injectable()
export class ConfigureableService {
constructor(
@Inject(CUSTOM_CONFIG_TOKEN) private config: Config
)
}
`
import { AwesomeModule } from './awesome.module';
import { ConfigureableService, CUSTOM_CONFIG_TOKEN, Config } from './configurable.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
@NgModule({
imports: [
AwesomeModule,
BrowserModule
],
providers: [
ConfigureableService
]
})
export class ConfigureableModule {
static forRoot(config: Config): ModuleWithProviders {
return {
ngModule: ConfigureableModule,
providers: [
ConfigureableService,
{
provide: CUSTOM_CONFIG_TOKEN,
useValue: config
}
]
};
}
}
```
```ts
// configureable.service.ts
import { Inject, Injectable, InjectionToken } from '@angular/core';
export const CUSTOM_CONFIG_TOKEN: InjectionToken<string> = new InjectionToken('customConfig');
export interface Config {
url: string
}
@Injectable()
export class ConfigureableService {
constructor(
@Inject(CUSTOM_CONFIG_TOKEN) private config: Config
)
}
```
لاحظ أن الكائن إرجاع أسلوب `forRoot(...)` متطابقة تقريبًا إلى تكوين `NgModule` .
تقبل طريقة `forRoot(...)` كائن تكوين مخصص يمكن للمستخدم توفيره عند استيراد الوحدة النمطية.
`imports: [
...
ConfigureableModule.forRoot({ url: 'http://localhost' }),
...
]
`
```ts
imports: [
...
ConfigureableModule.forRoot({ url: 'http://localhost' }),
...
]
```
ثم يتم توفير التكوين باستخدام `InjectionToken` مخصص يسمى `CUSTOM_CONFIG_TOKEN` وحقنها في `ConfigureableService` . يجب أن يتم استيراد `ConfigureableModule` مرة واحدة فقط باستخدام أسلوب `forRoot(...)` . يوفر هذا `CUSTOM_CONFIG_TOKEN` مع التهيئة المخصصة. يجب على كافة الوحدات النمطية الأخرى استيراد `ConfigureableModule` بدون أسلوب `forRoot(...)` .

66
guide/arabic/angular/pipes/index.md
View File

@ -35,11 +35,11 @@ localeTitle: أنابيب
في حالة Obervables ، يقوم AsyncPipe بالاشتراك تلقائيًا في مصدر البيانات. بغض النظر عن مصدر البيانات ، يشترك AsyncPipe في المصدر الذي يمكن ملاحظته. `async` هو الاسم syntactical AsyncPipe كما هو موضح أدناه.
`
<ul *ngFor=“let potato of (potatoSack$ | async); let i=index”>
<li>Potatoe {{i + 1}}: {{potato}}</li>
</ul>
`
```html
<ul *ngFor=“let potato of (potatoSack$ | async); let i=index”>
<li>Potatoe {{i + 1}}: {{potato}}</li>
</ul>
```
في المثال ، `potatoSack$` في انتظار تحميل البطاطس. وبمجرد وصول البطاطا ، إما بشكل متزامن أو غير متزامن ، فإن AsyncPipe يستقبلها كمصفوفة قابلة _للتكرار_ . ثم يملأ عنصر القائمة بالبطاطس.
@ -91,34 +91,36 @@ localeTitle: أنابيب
أيا كانت الدالة ترجع ( `return null;` ) يصبح الإخراج من عملية الأنابيب. ألق نظرة على المثال التالي لمشاهدة مثال كامل على ExamplePipe. بالاعتماد على المتغير الذي يستقبله الأنبوب ، فإنه إما يحد أو يخفض المدخل كإخراج جديد. وسيؤدي وجود وسيطة غير صالحة أو غير موجودة إلى إعادة توجيه نفس المدخلات كإخراج.
`// example.pipe.ts
@Pipe({
name: 'example'
})
export class ExamplePipe implements PipeTransform {
transform(value:string, args?:string): any {
switch(args || null) {
case 'uppercase':
return value.toUpperCase();
case 'lowercase':
return value.toLowerCase();
default:
return value;
}
}
}
`
```typescript
// example.pipe.ts
`// app.component.ts
@Component({
templateUrl: 'app.component.html'
})
export class AppComponent {
someValue:string = "HeLlO WoRlD!";
}
`
@Pipe({
name: 'example'
})
export class ExamplePipe implements PipeTransform {
transform(value:string, args?:string): any {
switch(args || null) {
case 'uppercase':
return value.toUpperCase();
case 'lowercase':
return value.toLowerCase();
default:
return value;
}
}
}
```
```typescript
// app.component.ts
@Component({
templateUrl: 'app.component.html'
})
export class AppComponent {
someValue:string = "HeLlO WoRlD!";
}
```
`
<!-- app.component.html -->

182
guide/arabic/angular/reactive-extensions/index.md
View File

@ -30,31 +30,33 @@ localeTitle: الامتدادات التفاعلية
أن أكرر بسرعة، و `Observable` الصورة يمكن _ملاحظتها._ هذا بحيث يوفر `Observable` ملاحظات إلى تبعياته بناءً على تدفق البيانات. في RxJS، و `Observable` هي وظيفة مصنعها الخاصة المستخدمة في إنشاء `Observable` الكائنات. مخططهم الأساسي هو على النحو التالي.
`import { Observable } from 'rxjs';
const observable = Observable.create((source) => {
source.next(data);
});
`
```typescript
import { Observable } from 'rxjs';
const observable = Observable.create((source) => {
source.next(data);
});
```
`.next` يمر البيانات في حين ينبعث الحدث إلى مراقبيه. يقوم برنامج `Observable` بإرسال البيانات من داخل `.create` callback باستخدام `.next` . وهو يقبل وسيطة واحدة تمثل البيانات التي تنبعث منها. لم يتم تنفيذ `Observable` في JavaScript حتى الآن. يوفر RxJS بديلاً من مكتبته.
الخطوة التالية هي المراقبين. لنقول وظيفة أو يعترض على _مراقبة_ و `Observable` ، ويستخدم بناء الجملة التالي: `observable.subscribe(observer)` . طريقة أخرى للنظر في ذلك هو `producer.subscribe(consumer)` . _تنتج_ `.next` البيانات عن طريق استدعاء `.next` . يتم إعلام العملاء عند تلقي البيانات.
`import { Observable } from 'rxjs';
const observable = Observable.create((source) => {
source.next("Hello");
source.next("World!");
});
observable.subscribe((word) => console.log(word));
// console output
/*
Hello
World!
*/
`
```typescript
import { Observable } from 'rxjs';
const observable = Observable.create((source) => {
source.next("Hello");
source.next("World!");
});
observable.subscribe((word) => console.log(word));
// console output
/*
Hello
World!
*/
```
اثنين من الدعاء من `.next` تحدث من داخل `Observable` الصورة `.create` رد (منتج البيانات). وينتج عن ذلك مخرجات منفصلة لوحدة التحكم من المراقب (مستهلك البيانات).
@ -68,18 +70,19 @@ localeTitle: الامتدادات التفاعلية
وظائف رد الاتصال ليست هي الطريقة الوحيدة لاستهلاك البيانات. يمكن للمراقبين أن يتسلسلوا في بعضهم البعض كمنتجين ومستهلكين.
`const observableI = Observable.create((source) => {
source.next("Hello World!");
});
const observableII = new Observable().subscribe((v) => console.log(v));
observableI.subscribe(observableII);
// console output
/*
Hello World!
*/
`
```typescript
const observableI = Observable.create((source) => {
source.next("Hello World!");
});
const observableII = new Observable().subscribe((v) => console.log(v));
observableI.subscribe(observableII);
// console output
/*
Hello World!
*/
```
`.subscribe` هو على `Observable` الكائن. يمكنك أن تسميها `Observable` كمصدر (منتج) وأخرى يمكن ملاحظتها كحجة (مستهلك). يمكن أن تتدفق البيانات (تنبعث) من خلال أي عدد من الملاحظات.
@ -189,22 +192,23 @@ localeTitle: الامتدادات التفاعلية
أهداف `.map` وتحويل كل قيمة تيار الجارية.
`const stream: number[] = [1, 2, 3, 4, 5];
const observable: Observable<number> = from(stream).pipe(
map((val) => (val + 1))
);
observable.subscribe((val: number) => console.log(val));
// console output
/*
2
3
4
5
6
*/
`
```typescript
const stream: number[] = [1, 2, 3, 4, 5];
const observable: Observable<number> = from(stream).pipe(
map((val) => (val + 1))
);
observable.subscribe((val: number) => console.log(val));
// console output
/*
2
3
4
5
6
*/
```
##### التحدي: كل و Foreach
@ -220,47 +224,49 @@ localeTitle: الامتدادات التفاعلية
يستخدم المثال التالي واجهة برمجة تطبيقات عامة تم تصميمها بواسطة [Typicode](https://jsonplaceholder.typicode.com) . يوفر API صفيفًا مكونًا من 100 عنصر لكل طلب `GET` غير متزامن.
`// ./models/post.model.ts
export interface Post {
userId: number;
id: number;
title: string;
body: string;
}
`
```typescript
// ./models/post.model.ts
`// ./services/json.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, from } from 'rxjs';
import { switchMap, map, filter, reduce } from 'rxjs/operators';
import { Post } from '../models/post.model';
@Injectable({
providedIn: 'root'
})
export class JsonService {
constructor(private http: HttpClient) { }
getPostsByUserId(id: number): Observable<any> {
const trim$ = (stream) => from(stream)
.pipe(
filter((post: Post) => +post.userId === +id),
map((post: Post) => ({ title: post.title, body: post.body })),
reduce((accum: Post[], post: Post) => accum.concat([post]), [])
);
return this.http.get("https://jsonplaceholder.typicode.com/posts")
.pipe(
switchMap((value) => trim$(value))
);
}
}
`
export interface Post {
userId: number;
id: number;
title: string;
body: string;
}
```
```typescript
// ./services/json.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, from } from 'rxjs';
import { switchMap, map, filter, reduce } from 'rxjs/operators';
import { Post } from '../models/post.model';
@Injectable({
providedIn: 'root'
})
export class JsonService {
constructor(private http: HttpClient) { }
getPostsByUserId(id: number): Observable<any> {
const trim$ = (stream) => from(stream)
.pipe(
filter((post: Post) => +post.userId === +id),
map((post: Post) => ({ title: post.title, body: post.body })),
reduce((accum: Post[], post: Post) => accum.concat([post]), [])
);
return this.http.get("https://jsonplaceholder.typicode.com/posts")
.pipe(
switchMap((value) => trim$(value))
);
}
}
```
``// ./components/example/example.component.ts

659
guide/arabic/angular/routing/index.md
View File

@ -28,39 +28,41 @@ localeTitle: التوجيه
مع تزايد تعقيد الطريق ، فإن امتلاكه كوحدة خاصة به سيعزز من بساطة وحدة الجذر. ابقائه بسيط غبي دون المساومة على وظائف يشكل التصميم الجيد للوحدات.
`import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AComponent } from '../../components/a/a.component';
import { BComponent } from '../../components/b/b.component';
// an array of soon-to-be routes!
const routes: Routes = [];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
`
```typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AComponent } from '../../components/a/a.component';
import { BComponent } from '../../components/b/b.component';
// an array of soon-to-be routes!
const routes: Routes = [];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
```
`.forRoot(...)` هي وظيفة فئة متوفرة من فئة RouterModule. تقبل وظيفة مجموعة من `Route` الكائنات في `Routes` . `.forRoot(...)` بتكوين `.forRoot(...)` - تحميل أثناء به البديلة `.forChild(...)` لتكوين التحميل البطيئة.
تحميل حريصة يعني أن تحميل المسارات محتواها في التطبيق من الحصول على الذهاب. التحميل الزائف يحدث عند الطلب. محور هذه المقالة هو تحميل حريصة. هذا هو النهج الافتراضي للتحميل في تطبيق. يبدو تعريف فئة RouterModule شيئًا مثل كتلة التعليمة البرمجية التالية.
`@NgModule({
// … lots of metadata ...
})
export class RouterModule {
forRoot(routes: Routes) {
// … configuration for eagerly loaded routes …
}
forChild(routes: Routes) {
// … configuration for lazily loaded routes …
}
}
`
```typescript
@NgModule({
// … lots of metadata ...
})
export class RouterModule {
forRoot(routes: Routes) {
// … configuration for eagerly loaded routes …
}
forChild(routes: Routes) {
// … configuration for lazily loaded routes …
}
}
```
لا تقلق بشأن تفاصيل التكوين التي يغفلها المثال مع التعليقات. وجود فهم عام سيفعل في الوقت الحالي.
@ -68,43 +70,44 @@ localeTitle: التوجيه
هذا يفسر لماذا يجب على AppRoutingModule تصدير RouterModule. يفعل ذلك من أجل شجرة المكونات الأساسية في وحدة الجذر. يحتاج الوصول إلى تلك المرافق التوجيه!
`import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AComponent } from './components/a/a.component';
import { BComponent } from './components/b/b.component';
import { AppRoutingModule } from './modules/app-routing/app-routing.module';
@NgModule({
declarations: [
AppComponent,
AComponent,
BComponent
],
imports: [
AppRoutingModule, // routing feature module
BrowserModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
`
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AComponent } from './components/a/a.component';
import { BComponent } from './components/b/b.component';
import { AppRoutingModule } from './modules/app-routing/app-routing.module';
@NgModule({
declarations: [
AppComponent,
AComponent,
BComponent
],
imports: [
AppRoutingModule, // routing feature module
BrowserModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```
الواردات الرمز المميز AppRoutingModule من الأعلى. إدراج رمزي في صفيف واردات وحدة الجذر. قد تستخدم شجرة مكون الجذر الآن مكتبة RouterModule. يتضمن ذلك توجيهاته واجهاته وخدماته كما سبق ذكره. شكرا جزيلا ل AppRoutingModule لتصدير RouterModule!
وستكون أدوات RouterModule مفيدة لمكونات الجذر. يستخدم HTML الأساسي لـ AppComponent من توجيه واحد: `router-outlet` .
`
<!-- app.component.html -->
<ul>
<!-- routerLink(s) here -->
</ul>
<router-outlet></router-outlet>
<!-- routed content appends here (AFTER THE ELEMENT, NOT IN IT!) -->
`
```html
<!-- app.component.html -->
<ul>
<!-- routerLink(s) here -->
</ul>
<router-outlet></router-outlet>
<!-- routed content appends here (AFTER THE ELEMENT, NOT IN IT!) -->
```
`routerLink` عبارة عن توجيه سمة من سمات RouterModule. سيتم إرفاقه بكل عنصر من عناصر `<ul></ul>` بمجرد إعداد المسارات. `router-outlet` عبارة عن توجيه مكون ذو سلوك مثير للاهتمام. يعمل أكثر كمؤشر لعرض المحتوى الموجه. نتائج المحتوى الموجه من التنقل إلى مسار معين. عادةً ما يعني ذلك مكونًا واحدًا تم تكوينه في AppRoutingModule
@ -118,83 +121,86 @@ localeTitle: التوجيه
يحدد موقع المسار (أو المسار) ما يتم إلحاقه [بأصل موقع الويب](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) (على سبيل المثال http: // localhost: 4200) من خلال سلسلة من المائلة ( `/` ).
`// … same imports from before …
const routes: Routes = [
{
path: 'A',
component: AComponent
},
{
path: 'B',
component: BComponent
}
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
`
```typescript
// … same imports from before …
const routes: Routes = [
{
path: 'A',
component: AComponent
},
{
path: 'B',
component: BComponent
}
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
```
`http://localhost:4200/A` يجعل AComponent من منفذ `router-outlet` الخاص بـ AppComponent. `http://localhost:4200/B` renders BComponent. تحتاج إلى وسيلة لتوجيه إلى هذه المواقع دون استخدام شريط العنوان. يجب ألا يعتمد التطبيق على شريط عناوين متصفح الإنترنت للتنقل.
_يكمل CSS العالمي (أوراق الأنماط المتتالية) HTML أسفله. يجب أن يكون رابط جهاز التوجيه في التطبيق مظهرًا رائعًا. ينطبق هذا CSS على جميع الأمثلة الأخرى أيضًا._
`/* global styles.css */
ul li {
cursor: pointer;
display: inline-block;
padding: 20px;
margin: 5px;
background-color: whitesmoke;
border-radius: 5px;
border: 1px solid black;
}
ul li:hover {
background-color: lightgrey;
}
`
```css
/* global styles.css */
`
<!-- app.component.html -->
<ul>
<li routerLink="/A">Go to A!</li>
<li routerLink="/B">Go to B!</li>
</ul>
<router-outlet></router-outlet>
`
ul li {
cursor: pointer;
display: inline-block;
padding: 20px;
margin: 5px;
background-color: whitesmoke;
border-radius: 5px;
border: 1px solid black;
}
ul li:hover {
background-color: lightgrey;
}
```
```html
<!-- app.component.html -->
<ul>
<li routerLink="/A">Go to A!</li>
<li routerLink="/B">Go to B!</li>
</ul>
<router-outlet></router-outlet>
```
هذا هو التوجيه الأساسي! يؤدي النقر فوق أي من مسارات routerLink إلى توجيه عنوان الويب. يعيد تعيينه دون تحديث متصفح الويب. يقوم `Router` Angular بتحديد خرائط العنوان الموجه إلى `Routes` تكوينها في AppRoutingModule. يطابق العنوان إلى `path` ممتلكات واحد `Route` الكائن ضمن مجموعة. دائمًا ما تفوز المباراة الأولى ، لذا يجب أن تكون جميع المسارات المطابقة تقع في نهاية صفيف `Routes` .
تمنع جميع المسارات المتوافقة التطبيق من التعطل إذا تعذر مطابقة المسار الحالي. يمكن أن يحدث هذا من شريط العنوان حيث قد يكتب المستخدم في أي مسار. لهذا ، يوفر Angular قيمة مسار حرف البدل `**` التي تقبل جميع المسارات. يعرض هذا المسار عادةً مكون PageNotFoundComponent الذي يعرض "خطأ 404: الصفحة غير موجودة".
`// … PageNotFoundComponent imported along with everything else …
const routes: Routes = [
{
path: 'A',
component: AComponent
},
{
path: 'B',
component: BComponent
},
{
path: '',
redirectTo: 'A',
pathMatch: 'full'
},
{
path: '**',
component: PageNotFoundComponent
}
];
`
```typescript
// … PageNotFoundComponent imported along with everything else …
const routes: Routes = [
{
path: 'A',
component: AComponent
},
{
path: 'B',
component: BComponent
},
{
path: '',
redirectTo: 'A',
pathMatch: 'full'
},
{
path: '**',
component: PageNotFoundComponent
}
];
```
في `Route` الكائن الذي يحتوي `redirectTo` يحافظ على PageNotFoundComponent من تقديم نتيجة `http://localhost:4200` . هذا هو الطريق الرئيسية للتطبيقات. لإصلاح هذا ، `redirectTo` توجيه المسار الرئيسي إلى `http://localhost:4200/A` `http://localhost:4200/A` يصبح بطريقة `http://localhost:4200/A` مباشرة مسار المنزل الجديد للتطبيق.
@ -206,24 +212,25 @@ _يكمل CSS العالمي (أوراق الأنماط المتتالية) HTML
هذا اصلاحه سهل. عند النقر فوق عنصر `routerLink` ، يعين `Router` في Angular _التركيز_ عليه. يمكن أن يؤدي هذا التركيز إلى تشغيل أنماط معينة توفر ملاحظات مفيدة للمستخدم. يمكن لتوجيه `routerLinkActive` تتبع هذا التركيز للمطور.
`
<!-- app.component.html -->
<ul>
<li routerLink="/A" routerLinkActive="active">Go to A!</li>
<li routerLink="/B" routerLinkActive="active">Go to B!</li>
</ul>
<router-outlet></router-outlet>
`
```html
<!-- app.component.html -->
<ul>
<li routerLink="/A" routerLinkActive="active">Go to A!</li>
<li routerLink="/B" routerLinkActive="active">Go to B!</li>
</ul>
<router-outlet></router-outlet>
```
يمثل التعيين الصحيح لـ `routerLinkActive` سلسلة من الفئات. يصور هذا المثال فئة واحدة فقط (. `.active` ) ، ولكن قد يتم تطبيق أي عدد من الفئات المفصول `.active` . عندما يعين `Router` _التركيز_ على routerLink ، يتم تطبيق الفئات المحددة بفراغات على عنصر المضيف. عندما ينتقل التركيز بعيدًا ، تتم إزالة الفئات تلقائيًا.
`/* global styles.css */
.active {
background-color: lightgrey !important;
}
`
```css
/* global styles.css */
.active {
background-color: lightgrey !important;
}
```
يمكن للمستخدمين الآن التعرف بسهولة على كيفية تطابق المسار الحالي ومحتوى الصفحة. تسليط الضوء على `lightgrey` ينطبق على routerLink مطابقة الطريق الحالي. يضمن `!important` تجاوز التمييز stylings مضمنة.
@ -235,19 +242,20 @@ _يكمل CSS العالمي (أوراق الأنماط المتتالية) HTML
تبدأ المعلمات التقليدية من صفيف `Routes` المكوّنة في AppRoutingModule.
`const routes: Routes = [
// … other routes …
{
path: 'B',
component: BComponent
},
{
path: 'B/:parameter',
component: BComponent
},
// … other routes …
];
`
```typescript
const routes: Routes = [
// … other routes …
{
path: 'B',
component: BComponent
},
{
path: 'B/:parameter',
component: BComponent
},
// … other routes …
];
```
التركيز على مسارين BComponent. ستحدث المعلمة في نهاية المطاف في كلا الطريقين.
@ -257,30 +265,31 @@ _يكمل CSS العالمي (أوراق الأنماط المتتالية) HTML
يمكن BComponent مرجع معلمات التوجيه من فئة المكون الخاص به. كل من النهج إلى المعلمات (مصفوفة والتقليدية) تعطي النتائج نفسها في BComponent. قبل رؤية BComponent ، افحص شكل مصفوفة المعلمات أدناه.
`// app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
constructor(private router: Router) { }
routeMatrixParam(value: string) {
if (value)
this.router.navigate(['B', { parameter: value }]); // matrix parameter
else
this.router.navigate(['B']);
}
routeAddressParam(value: string) {
this.router.navigate(['B', value]);
}
}
`
```typescript
// app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
constructor(private router: Router) { }
routeMatrixParam(value: string) {
if (value)
this.router.navigate(['B', { parameter: value }]); // matrix parameter
else
this.router.navigate(['B']);
}
routeAddressParam(value: string) {
this.router.navigate(['B', value]);
}
}
```
يوفر نظام حقن التبعية في Angular إمكانية إنشاء مثيل لجهاز `Router` . يتيح هذا المكون برمجيًا التوجيه. تقبل الدالة `.navigate(...)` صفيف من القيم التي يتم `.navigate(...)` إلى مسار _قابل للتوجيه_ . شيء من هذا القبيل `.navigate(['path', 'to', 'something'])` يحل إلى `http://localhost:4200/path/to/something` . `.navigate(...)` يضيف علامات `/` مسارات المسار عند تطبيع الصفيف في مسار _قابل للتوجيه_ .
@ -292,22 +301,22 @@ _يكمل CSS العالمي (أوراق الأنماط المتتالية) HTML
لإضفاء فهم كامل على الشفرة الواردة أعلاه ، إليك شفرة HTML المقابلة للنموذج.
`
// app.component.html
<ul>
<li routerLink="/A">Go to A!</li>
<li>
<input #matrixInput>
<button (click)="routeMatrixParam(matrixInput.value)">Matrix!</button>
</li>
<li>
<input #paramInput>
<button (click)="routeAddressParam(paramInput.value)">Param!</button>
</li>
</ul>
<router-outlet></router-outlet>
`
```html
// app.component.html
<ul>
<li routerLink="/A">Go to A!</li>
<li>
<input #matrixInput>
<button (click)="routeMatrixParam(matrixInput.value)">Matrix!</button>
</li>
<li>
<input #paramInput>
<button (click)="routeAddressParam(paramInput.value)">Param!</button>
</li>
</ul>
<router-outlet></router-outlet>
```
في القالب ، يتم قبول القيم كمدخل نصي. يقوم الإدخال بحقنها في مسار المسار كمعلمة. توجد مجموعتان منفصلتان من الصناديق لكل إستراتيجية معلمات (تقليدية ومصفوفة). مع كافة القطع معاً ، فقد حان الوقت لفحص فئة مكون BComponent.
@ -349,30 +358,31 @@ _يكمل CSS العالمي (أوراق الأنماط المتتالية) HTML
قد تشكل `Routes` تسلسلاً هرمياً. في DOM ، ينطوي ذلك على `router-outlet` أحد الوالدين `router-outlet` `router-outlet` واحد على الأقل. في شريط العنوان ، يبدو كالتالي: `http://localhost/parentRoutes/childRoutes` . في تكوين `Routes` ، تشير الخاصية `children: []` إلى كائن `Route` أنه يحتوي على مسارات متداخلة (فرعية).
`import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NestComponent } from '../../components/nest/nest.component';
import { AComponent } from '../../components/nest/a/a.component';
import { BComponent } from '../../components/nest/b/b.component';
const routes: Routes = [
{
path: 'nest',
component: NestComponent,
children: [
{ path: 'A', component: AComponent },
{ path: 'B', component: BComponent }
]
}
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
`
```typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NestComponent } from '../../components/nest/nest.component';
import { AComponent } from '../../components/nest/a/a.component';
import { BComponent } from '../../components/nest/b/b.component';
const routes: Routes = [
{
path: 'nest',
component: NestComponent,
children: [
{ path: 'A', component: AComponent },
{ path: 'B', component: BComponent }
]
}
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
```
``// nest.component.ts
@ -472,40 +482,41 @@ _يكمل CSS العالمي (أوراق الأنماط المتتالية) HTML
لحراسة الطريق ، يجب أن تكون هناك فئة تستخدم أساليب الحراسة كخدمة. خدمة يمكن أن تضخ في AppRoutingModule لحراسة لها `Routes` . قد حقن قيمة رمزية للخدمة في أي واحد `Route` الكائن.
`import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthService } from '../../services/auth.service';
import { UserService } from '../../services/user.service';
import { PrivateNestComponent } from '../../components/private-nest/private-nest.component';
import { PrivateAComponent } from '../../components/private-nest/private-a/private-a.component';
import { PrivateBComponent } from '../../components/private-nest/private-b/private-b.component';
const routes: Routes = [
{
path: 'private-nest',
component: PrivateNestComponent,
canActivate: [ AuthService ], // !!!
canActivateChild: [ AuthService ], // !!!
canDeactivate: [ AuthService ], // !!!
children: [
{ path: 'private-A', component: PrivateAComponent },
{ path: 'private-B', component: PrivateBComponent }
]
}
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ],
providers: [
AuthService,
UserService
]
})
export class AppRoutingModule { }
`
```typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthService } from '../../services/auth.service';
import { UserService } from '../../services/user.service';
import { PrivateNestComponent } from '../../components/private-nest/private-nest.component';
import { PrivateAComponent } from '../../components/private-nest/private-a/private-a.component';
import { PrivateBComponent } from '../../components/private-nest/private-b/private-b.component';
const routes: Routes = [
{
path: 'private-nest',
component: PrivateNestComponent,
canActivate: [ AuthService ], // !!!
canActivateChild: [ AuthService ], // !!!
canDeactivate: [ AuthService ], // !!!
children: [
{ path: 'private-A', component: PrivateAComponent },
{ path: 'private-B', component: PrivateBComponent }
]
}
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ],
providers: [
AuthService,
UserService
]
})
export class AppRoutingModule { }
```
`canActivate` و `canActivateChild` و يمكن `canDeactivate` التطبيق من AuthService. سيتم عرض تنفيذ الخدمة قريبًا مع تطبيق UserService.
@ -517,82 +528,84 @@ _يكمل CSS العالمي (أوراق الأنماط المتتالية) HTML
راجع تطبيقات AuthService و UserService أدناه.
`// user.service.ts
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
class TheUser {
constructor(public isLoggedIn: boolean = false) { }
toggleLogin() {
this.isLoggedIn = true;
}
toggleLogout() {
this.isLoggedIn = false;
}
}
const globalUser = new TheUser();
@Injectable({
providedIn: 'root'
})
export class UserService {
theUser: TheUser = globalUser;
constructor(private router: Router) { }
get isLoggedIn() {
return this.theUser.isLoggedIn;
}
login() {
this.theUser.toggleLogin();
}
logout() {
this.theUser.toggleLogout();
this.router.navigate(['/']);
}
}
`
```typescript
// user.service.ts
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
class TheUser {
constructor(public isLoggedIn: boolean = false) { }
toggleLogin() {
this.isLoggedIn = true;
}
toggleLogout() {
this.isLoggedIn = false;
}
}
const globalUser = new TheUser();
@Injectable({
providedIn: 'root'
})
export class UserService {
theUser: TheUser = globalUser;
constructor(private router: Router) { }
get isLoggedIn() {
return this.theUser.isLoggedIn;
}
login() {
this.theUser.toggleLogin();
}
logout() {
this.theUser.toggleLogout();
this.router.navigate(['/']);
}
}
```
يتم تمرير المثيل نفسه من `TheUser` مع كل إنشاء مثيل لـ UserService. يوفر `TheUser` الوصول إلى `isLoggedIn` لتحديد حالة تسجيل دخول المستخدم. تسمح أساليب عامة أخرى اثنين UserService تبديل قيمة `isLoggedIn` . هذا هو أنه يمكن للمستخدم تسجيل الدخول والخروج.
يمكنك التفكير في `TheUser` كمثال عالمي. يعد `UserService` واجهة `UserService` تقوم بتكوين هذا العمومية. `TheUser` التغييرات على `TheUser` من `UserService` إنشاء `UserService` واحدة على كل مثيل خدمة `UserService` الأخرى. ينفذ `UserService` إلى AuthService لتوفير الوصول إلى `isLoggedIn` من `TheUser` للمصادقة.
`import { Component, Injectable } from '@angular/core';
import { CanActivate, CanActivateChild, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { UserService } from './user.service';
@Injectable({
providedIn: 'root'
})
export class AuthService implements CanActivate, CanActivateChild, CanDeactivate<Component> {
constructor(private user: UserService) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (this.user.isLoggedIn)
return true;
else
return false;
}
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.canActivate(route, state);
}
canDeactivate(component: Component, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (!this.user.isLoggedIn || window.confirm('Leave the nest?'))
return true;
else
return false;
}
}
`
```typescript
import { Component, Injectable } from '@angular/core';
import { CanActivate, CanActivateChild, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { UserService } from './user.service';
@Injectable({
providedIn: 'root'
})
export class AuthService implements CanActivate, CanActivateChild, CanDeactivate<Component> {
constructor(private user: UserService) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (this.user.isLoggedIn)
return true;
else
return false;
}
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.canActivate(route, state);
}
canDeactivate(component: Component, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (!this.user.isLoggedIn || window.confirm('Leave the nest?'))
return true;
else
return false;
}
}
```
تنفذ AuthService كل أسلوب حراسة مستورد من `@angular/router` . تحدد كل طريقة حراسة إلى حقل مناظر في كائن `Route` PrivateNestComponent. مثيل instantService instantiates من منشئ AuthService. تحدد AuthService إذا كان يمكن للمستخدم المتابعة باستخدام `isLoggedIn` المكشوفة بواسطة UserService.

138
guide/arabic/angular/services-and-injectors/index.md
View File

@ -20,15 +20,16 @@ localeTitle: الخدمات والحاقنات
الخدمة هي نوع من _التخطيطي_ المتاح في Angular. وهو قابل للتوليد بواسطة واجهة سطر الأوامر (CLI): `ng generate service [name-of-service]` . استبدل `[name-of-service]` باسم مفضل. يعطي الأمر CLI ما يلي.
`import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class LoggerService {
constructor() { }
}
`
```typescript
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class LoggerService {
constructor() { }
}
```
منطق الخدمة متميز داخل فئتها. يفسر الزاوي فئة كخدمة _للحقن_ القائمة قبالة الديكور `@Injectable` . يجب أن _تسجل_ الخدمات القابلة للحقن مع حاقن.
@ -89,49 +90,50 @@ localeTitle: الخدمات والحاقنات
هذا المثال يتراكم من الهيكل الأساسي `@Injectable` . الهيكل العظمي متاح من خلال تنفيذ CLI ( `ng generate service [name-of-service]]` .
`// services/logger.service.ts
import { Injectable } from '@angular/core';
interface LogMessage {
message:string;
timestamp:Date;
}
@Injectable({
providedIn: 'root'
})
export class LoggerService {
callStack:LogMessage[] = [];
constructor() { }
addLog(message:string):void {
// prepend new log to bottom of stack
this.callStack = [{ message, timestamp: new Date() }].concat(this.callStack);
}
clear():void {
// clear stack
this.callStack = [];
}
printHead():void {
// print bottom of stack
console.log(this.callStack[0] || null);
}
printLog():void {
// print bottom to top of stack on screen
this.callStack.reverse().forEach((logMessage) => console.log(logMessage));
}
getLog():LogMessage[] {
// return the entire log as an array
return this.callStack.reverse();
}
}
`
```typescript
// services/logger.service.ts
import { Injectable } from '@angular/core';
interface LogMessage {
message:string;
timestamp:Date;
}
@Injectable({
providedIn: 'root'
})
export class LoggerService {
callStack:LogMessage[] = [];
constructor() { }
addLog(message:string):void {
// prepend new log to bottom of stack
this.callStack = [{ message, timestamp: new Date() }].concat(this.callStack);
}
clear():void {
// clear stack
this.callStack = [];
}
printHead():void {
// print bottom of stack
console.log(this.callStack[0] || null);
}
printLog():void {
// print bottom to top of stack on screen
this.callStack.reverse().forEach((logMessage) => console.log(logMessage));
}
getLog():LogMessage[] {
// return the entire log as an array
return this.callStack.reverse();
}
}
```
تسجيل LoggerService مع الوحدة النمطية الجذر من خلال بيانات `@Injectable` . وبالتالي يمكن إنشاء في `app.component.html` .
@ -175,22 +177,22 @@ localeTitle: الخدمات والحاقنات
يوفر القالب HTML مزيدًا من الإحصاءات حول استخدام المكون لـ LoggerService.
`
<!-- app.component.html -->
<h1>Log Example</h1>
<form (submit)="logMessage($event, userInput.value)">
<input #userInput placeholder="Type a message...">
<button type="submit">SUBMIT</button>
</form>
<h3>Complete Log</h3>
<button type="button" (click)="clearLog()">CLEAR</button>
<ul>
<li *ngFor="let log of logs; let i=index">{{ logs.length - i }} > {{ log.message }} @ {{ log.timestamp }}</li>
</ul>
`
```html
<!-- app.component.html -->
<h1>Log Example</h1>
<form (submit)="logMessage($event, userInput.value)">
<input #userInput placeholder="Type a message...">
<button type="submit">SUBMIT</button>
</form>
<h3>Complete Log</h3>
<button type="button" (click)="clearLog()">CLEAR</button>
<ul>
<li *ngFor="let log of logs; let i=index">{{ logs.length - i }} > {{ log.message }} @ {{ log.timestamp }}</li>
</ul>
```
هذا يشعر به تطبيق ToDo. يمكنك تسجيل الرسائل ومسح سجل الرسائل. تخيل لو تم دفع كل المنطق من الخدمة في AppComponent! كان من شأنه أن يعقد رمز. يحتفظ LoggerService رمز السجل ذات الصلة مغلفة من فئة AppComponent الأساسية.

27
guide/arabic/angular/views/index.md
View File

@ -56,19 +56,20 @@ localeTitle: الآراء
حاول استخدام أمر واجهة سطر الأوامر (CLI) Angular: `ng generate component [name-of-component]` . وتنتج ما يلي.
`import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
`
```typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
```
يؤدي ذلك إلى إنشاء المكون مع `app-example` المحدد. يعلق هذا حاوية عرض على `<app-example></app-example>` في القالب. إذا كان هذا هو جذر التطبيق ، فإن العرض الخاص به سيضم جميع طرق العرض الأخرى. يمثل عرض الجذر بداية التطبيق من منظور Angular.

20
guide/arabic/bash/bash-head/index.md
View File

@ -10,8 +10,9 @@ localeTitle: باش هيد
### استعمال
`head [options] [file_name(s)]
`
```bash
head [options] [file_name(s)]
```
معظم الخيارات المستخدمة:
@ -21,18 +22,21 @@ localeTitle: باش هيد
### مثال
`head file.txt
`
```bash
head file.txt
```
يطبع في نهاية الأسطر العشرة الأولى من file.txt (افتراضي)
`head -n 7 file.txt
`
```bash
head -n 7 file.txt
```
يطبع في الأسطر السبعة الأولى من file.txt
`head -q -n 5 file1.txt file2.txt
`
```bash
head -q -n 5 file1.txt file2.txt
```
قم بطباعة أول 5 أسطر من file1.txt ، ثم اتبع أول 5 أسطر من file2.txt

7
guide/arabic/bash/bash-mv/index.md
View File

@ -6,9 +6,10 @@ localeTitle: باش ام فى
**ينقل الملفات والمجلدات.**
`mv source target
mv source ... directory
`
```
mv source target
mv source ... directory
```
الوسيطة الأولى هي الملف الذي تريد نقله ، والثاني هو الموقع الذي تريد نقله إليه.

26
guide/arabic/bash/index.md
View File

@ -19,9 +19,10 @@ Bash (باختصار لـ Bourne Again SHell) هي shell Unix ، ومترجم ل
يمكنك البدء في استخدام bash في معظم أنظمة التشغيل Linux و OS X من خلال فتح جهاز طرفي. دعونا نعتبر مثالًا بسيطًا في عالم الترحيب. افتح الطرفية الخاصة بك واكتب السطر التالي (كل شيء بعد علامة $):
`zach@marigold:~$ echo "Hello world!"
Hello world!
`
```
zach@marigold:~$ echo "Hello world!"
Hello world!
```
كما ترى ، استخدمنا أمر echo لطباعة سلسلة "Hello world!" إلى المحطة.
@ -29,9 +30,10 @@ Bash (باختصار لـ Bourne Again SHell) هي shell Unix ، ومترجم ل
يمكنك أيضًا وضع كل أوامر bash في ملف .sh وتشغيلها من سطر الأوامر. لنفترض أنه لديك برنامج نصي bash يحتوي على المحتويات التالية:
`#!/bin/bash
echo "Hello world!"
`
```
#!/bin/bash
echo "Hello world!"
```
تجدر الإشارة إلى أن السطر الأول من النص البرمجي يبدأ بـ `#!` . إنه توجيه خاص يعامله يونكس بشكل مختلف.
@ -41,16 +43,18 @@ Bash (باختصار لـ Bourne Again SHell) هي shell Unix ، ومترجم ل
ثم يمكنك تشغيل البرنامج النصي مثل: لجعل الملف القابل للتنفيذ يجب عليك استدعاء هذا الأمر تحت sudo chmod + x "filename".
`zach@marigold:~$ ./myBashScript.sh
Hello world!
`
```
zach@marigold:~$ ./myBashScript.sh
Hello world!
```
البرنامج النصي يحتوي على سطرين فقط. يشير الأول إلى ما الذي يجب أن يستخدمه مترجم لتشغيل الملف (في هذه الحالة ، bash). السطر الثاني هو الأمر الذي نريد استخدامه ، صدى ، متبوعًا بما نريد طباعته وهو "Hello World".
في بعض الأحيان لن يتم تنفيذ النص البرمجي ، وسيعرض الأمر أعلاه خطأً. يرجع ذلك إلى الأذونات المحددة على الملف. لتجنب هذا الاستخدام:
`zach@marigold:~$ chmod u+x myBashScript.sh
`
```
zach@marigold:~$ chmod u+x myBashScript.sh
```
\` ثم قم بتنفيذ البرنامج النصي.

72
guide/arabic/bootstrap/cards/index.md
View File

@ -13,12 +13,12 @@ localeTitle: بطاقات
###### هذه هي الطريقة التي ستبدو في مستند HTML
`
<div class="card">
<!-- content of the card goes here -->
<div class="card-body">Content</div>
</div>
`
```html
<div class="card">
<!-- content of the card goes here -->
<div class="card-body">Content</div>
</div>
```
## \### رأس وتذييل الصفحة
@ -26,14 +26,14 @@ localeTitle: بطاقات
###### هذه هي الطريقة التي ستبدو في مستند HTML
`
<div class="card">
<!-- content of the card goes here -->
<div class="card-header">Header content</div>
<div class="card-body">Body content</div>
<div class="card-footer">Footer content</div>
</div>
`
```html
<div class="card">
<!-- content of the card goes here -->
<div class="card-header">Header content</div>
<div class="card-body">Body content</div>
<div class="card-footer">Footer content</div>
</div>
```
## \### بطاقات مع الصور
@ -48,20 +48,20 @@ localeTitle: بطاقات
###### هذه هي الطريقة التي ستبدو في مستند HTML
`
<div class="card">
<!-- content of the card goes here -->
<!-- image on the top of the content -->
<img src="picture.jpg" alt="Picture" class="card-img-top">
<div class="card-body">Body content</div>
</div>
<div class="card">
<!-- content of the card goes here -->
<div class="card-body">Body content</div>
<!-- image on the bottom of the content -->
<img src="picture.jpg" alt="Picture" class="card-img-bottom">
</div>
`
```html
<div class="card">
<!-- content of the card goes here -->
<!-- image on the top of the content -->
<img src="picture.jpg" alt="Picture" class="card-img-top">
<div class="card-body">Body content</div>
</div>
<div class="card">
<!-- content of the card goes here -->
<div class="card-body">Body content</div>
<!-- image on the bottom of the content -->
<img src="picture.jpg" alt="Picture" class="card-img-bottom">
</div>
```
## \### تراكب البطاقات
@ -69,11 +69,11 @@ localeTitle: بطاقات
###### هذه هي الطريقة التي ستبدو في مستند HTML
`
<div class="card">
<!-- content of the card goes here -->
<img src="picture.jpg" alt="Picture" class="card-img-top">
<!-- this content is displayed over the image, which is now in the background and covers the whole element -->
<div class="card-img-overlay">Overlay content</div>
</div>
`
```html
<div class="card">
<!-- content of the card goes here -->
<img src="picture.jpg" alt="Picture" class="card-img-top">
<!-- this content is displayed over the image, which is now in the background and covers the whole element -->
<div class="card-img-overlay">Overlay content</div>
</div>
```

124
guide/arabic/bootstrap/collapse/index.md
View File

@ -29,20 +29,20 @@ localeTitle: انهدام
### أمثلة مع الأزرار
`
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
`
```html
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
```
في المثال أعلاه ، نستخدم زرًا وعلامة ارتساء للتحكم في عنصر div. يحتاج الزر والمرسلان وهما عنصران للتحكم إلى شيئين ، السمة التي تحدد أن عنصر التحكم هو من أجل الانهيار وسمة أخرى لتحديد العنصر الذي يتحكم فيه (يخفي أو يكشف).
@ -54,22 +54,22 @@ localeTitle: انهدام
## مثال مع الأكورديون
`
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
`
```html
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
```
في المثال أعلاه نستخدم انهيار bootstrap لإنشاء الأكورديون. الأكورديون هو مجرد لوحة bootstrap حيث يتم عرض الرأس ويستخدم للتحكم في جسم اللوحة.
@ -81,56 +81,57 @@ localeTitle: انهدام
فقرة!
`
<p>Lorem ipsum dolar, Free Code Camp rocks... </p>
`
```html
<p>Lorem ipsum dolar, Free Code Camp rocks... </p>
```
1. إضافة class `.collapse` إلى أن الفقرة عنصر قابل للطي.
2. إضافة `id` لجعل هذا العنصر القابل للطي قابلًا لعنصر وحدة التحكم.
`
<p id="myParagraph" class="collapse">Lorem ipsum dolar, Free Code Camp rocks... </p>
`
```html
<p id="myParagraph" class="collapse">Lorem ipsum dolar, Free Code Camp rocks... </p>
```
### عنصر تحكم
الزر!
`
<button>Click Me To See Some Magic!</button>
`
```html
<button>Click Me To See Some Magic!</button>
```
1. إضافة سمة `data-toggle="collapse"` للسيطرة على عنصر قابل للطي.
2. إضافة سمة `data-target="#id"` للإشارة إلى العنصر القابل للطي بمعرّفه.
`
<button data-toggle="collapse" data-target="#myParagraph">Click Me To See Some Magic!</button>
`
```html
<button data-toggle="collapse" data-target="#myParagraph">Click Me To See Some Magic!</button>
```
## مثال
`
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
`
```html
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
```
### استخدامه مع JavaScript
يتيح لك هذا المكون الإضافي استخدامه مع JavaScript حيث تحتاج فقط إلى تحديد العنصر الذي تريد طيه لتمكينه:
`$('.collapsible-element').collapse();
`
```js
$('.collapsible-element').collapse();
```
تقبل طريقة `collapse` كائنًا اختياريًا حيث يمكنك تعيين الحالة الأولية للعنصر القابل للطي. الخيارات هي:
@ -138,8 +139,9 @@ localeTitle: انهدام
* `hide` : إخفاء العنصر.
* `show` : يعرض العنصر.
`$('.collapsible-element').collapse('hide');
`
```js
$('.collapsible-element').collapse('hide');
```
أيضا هناك بعض الطرق المكشوفة للربط في وظائف الانهيار:

24
guide/arabic/bootstrap/dropdowns/index.md
View File

@ -10,18 +10,18 @@ localeTitle: هبوط قطرة
## مثال
`
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown example
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
`
```html
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown example
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
```
## شرح المثال

6
guide/arabic/bootstrap/fontawesome-icons/index.md
View File

@ -10,9 +10,9 @@ localeTitle: أيقونات Fontawesome ل Bootstrap
في `<head>` من html الخاص بك تتضمن مرجع إلى Font Awesome.
`
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
`
```html
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
```
استخدام fontawesome هو نفس استخدام Glyphicon.

132
guide/arabic/bootstrap/form-inputs/index.md
View File

@ -22,27 +22,27 @@ localeTitle: مدخلات النموذج
يحتوي المثال التالي على عنصرين إدخال ؛ واحد من نوع النص وواحد من نوع كلمة المرور:
`
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
`
```html
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
```
#### 2\. Textarea
يحتوي المثال التالي على نص:
`
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
`
```html
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
```
#### 3\. مربعات الاختيار
@ -50,28 +50,28 @@ localeTitle: مدخلات النموذج
يحتوي المثال التالي على ثلاثة مربعات اختيار. الخيار الأخير معطل:
`
<div class="checkbox">
<label>
<input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>Option 3</label>
</div>
`
```html
<div class="checkbox">
<label>
<input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>Option 3</label>
</div>
```
استخدم فئة **.checkbox-inline** إذا كنت تريد ظهور مربعات الاختيار على نفس السطر:
`
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
`
```html
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
```
#### 4\. أزرار الراديو
@ -79,25 +79,25 @@ localeTitle: مدخلات النموذج
يحتوي المثال التالي على ثلاثة أزرار للراديو. الخيار الأخير معطل:
`
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
`
```html
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
```
استخدم فئة **.radio-inline** إذا كنت تريد أن تظهر مربعات الاختيار على نفس السطر:
`
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
`
```html
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
```
#### 5\. حدد (قائمة)
@ -105,17 +105,17 @@ localeTitle: مدخلات النموذج
يحتوي المثال التالي على قائمة منسدلة (حدد القائمة):
`
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
`
```html
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
```
## كيفية جعل Bootstrap Inputs Accessible
@ -123,10 +123,10 @@ localeTitle: مدخلات النموذج
ويمكن أن يتم ذلك عن طريق utlizing و `for` معلمة في HTML:
`
<label for="email-input">Enter Email</label>
<input type="email" class="form-control" id="email-input" placeholder="Enter Email">
`
```html
<label for="email-input">Enter Email</label>
<input type="email" class="form-control" id="email-input" placeholder="Enter Email">
```
التسمية `for` سمة يحيل **دائما** حقل الإدخال عن طريق **المعرف** الخاص به. هذا يخبر قارئ الشاشة أن هذا التصنيف هو بالتأكيد حقل الإدخال هذا الذي سيقلل من الارتباك لأي مستخدم يستخدم قارئ الشاشة لزيارة موقع على شبكة الإنترنت.

26
guide/arabic/bootstrap/forms/index.md
View File

@ -27,8 +27,9 @@ localeTitle: إستمارات
خضع
`## Example of an inline form
`
```
## Example of an inline form
```
أتش تي أم أل
@ -38,8 +39,9 @@ localeTitle: إستمارات
إرسال دعوة
`## Example of horizontal form
`
```
## Example of horizontal form
```
أتش تي أم أل
@ -51,8 +53,9 @@ localeTitle: إستمارات
تسجيل الدخول
`![Inline Form 2](https://github.com/TroyB12/Pictures/blob/master/Inline%20Form2.PNG)
`
```
![Inline Form 2](https://github.com/TroyB12/Pictures/blob/master/Inline%20Form2.PNG)
```
أتش تي أم أل
@ -64,11 +67,12 @@ $
تحويل النقدية
`Bootstrap forms allow the programmer to use classes to easily make HTML forms presentable and responsive.
Take the following simple form:
![](https://siamcomm.com/wp-content/uploads/2017/10/Forms-·-Bootstrap.png)
`
```
Bootstrap forms allow the programmer to use classes to easily make HTML forms presentable and responsive.
Take the following simple form:
![](https://siamcomm.com/wp-content/uploads/2017/10/Forms-·-Bootstrap.png)
```
أتش تي أم أل

18
guide/arabic/bootstrap/get-started/index.md
View File

@ -14,18 +14,18 @@ Bootstrap هو إطار مجاني ومفتوح المصدر تم تطويره
تعد إضافة bootstrap إلى صفحتك عملية سريعة ، فما عليك سوى إضافة ما يلي إلى `<head>` العلامات في شفرتك.
`
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
`
```html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
```
سوف تحتاج أيضا إلى إضافة ما يلي بين `body` العلامات في التعليمات البرمجية. باستخدام Bootstrap ، ستستخدم علامات `<div>` عند استخدام العديد من ميزات Bootstrap ، وستحتوي كل علامة على مجموعة فريدة من الفئات المطبقة التي تسمح للعلامة بتنفيذ مهمتها. ستعرض الأقسام الأخرى من دليل Bootstrap هذا المزيد من الأمثلة عن كيفية استخدام Bootstrap `<div>` . (العلامات `<div>` ليست حصرية لـ Bootstrap ، ومع ذلك فإن Bootstrap تستفيد منها.). وفيما يلي التعليمات البرمجية التي سوف شأنه أن يضيف إلى `body` العلامات في التعليمات البرمجية لإنهاء بدء العمل. ضع في اعتبارك أنه أثناء إنشاء الحاوية ، ستظل الصفحة فارغة حتى تضيف محتوى إلى الحاوية.
`
<div class="alert alert-success" role="alert">
<strong>Congratulations!</strong>
<p>Bootstrap is now working on this page</p>
</div>
`
```html
<div class="alert alert-success" role="alert">
<strong>Congratulations!</strong>
<p>Bootstrap is now working on this page</p>
</div>
```
**تهانينا!**

10
guide/arabic/bootstrap/glyphicon-components/index.md
View File

@ -10,11 +10,11 @@ localeTitle: مكونات غليفيكون
## أمثلة
`
<p>Star icon: <span class="glyphicon glyphicon-star"></span></p>
<p>Refresh icon: <span class="glyphicon glyphicon-refresh"></span></p>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
`
```html
<p>Star icon: <span class="glyphicon glyphicon-star"></span></p>
<p>Refresh icon: <span class="glyphicon glyphicon-refresh"></span></p>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
```
## ملحوظة

30
guide/arabic/bootstrap/grid-examples/index.md
View File

@ -6,21 +6,21 @@ localeTitle: أمثلة الشبكة
#### شجرة أعمدة متساوية
`
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
`
```html
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
```
ينشئ المثال أعلاه ثلاثة أعمدة متساوية العرض على الأجهزة الصغيرة والمتوسطة والكبيرة ، والكبير جدًا باستخدام فئات الشبكة المحددة مسبقًا. يتم توسيط تلك الأعمدة في الصفحة مع الأصل. `.container` .

34
guide/arabic/bootstrap/grid-system/index.md
View File

@ -18,15 +18,17 @@ localeTitle: نظام الشبكة
الحاوية هي معظم العناصر الخارجية التي _ستحتوي على_ الشبكة الخاصة بك ، وتستخدم `container` عرض ثابتة في منتصف الشاشة (هامش إضافي على الشاشات الأكبر) أو `container-fluid` لعرض كامل.
`<div class="container"></div>
`
```
<div class="container"></div>
```
###### صف
استخدم `row` لتجميع الأعمدة الخاصة بك ، وهذا سيبقي كل شيء مصفوفًا بشكل صحيح ويساعدك في بناء شبكتك.
`<div class="row"></div>
`
```
<div class="row"></div>
```
###### أعمدة
@ -40,22 +42,24 @@ localeTitle: نظام الشبكة
* **كبير** `col-lg-1`
* **إضافي كبير** `col-xl-1`
`<div class="col-sm-1"></div>
`
```
<div class="col-sm-1"></div>
```
#### مثال
شبكة بعرض كامل تحتوي على أربعة أعمدة ، كل منها يشغل صفًا كاملاً على شاشات xs ، ونصف صف على الشاشات sm و md ، وربع عرض الصف على الشاشات الكبيرة وما فوقها.
`<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">First Column</div>
<div class="col-12 col-sm-6 col-lg-4">Second Column</div>
<div class="col-12 col-sm-6 col-lg-4">Third Column</div>
<div class="col-12 col-sm-6 col-lg-4">Forth Column</div>
</div>
</div>
`
```
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">First Column</div>
<div class="col-12 col-sm-6 col-lg-4">Second Column</div>
<div class="col-12 col-sm-6 col-lg-4">Third Column</div>
<div class="col-12 col-sm-6 col-lg-4">Forth Column</div>
</div>
</div>
```
_لاحظ أنه لم يتم تعريف `col-md` و `col-xl` ، حيث لم يتم تعريف الحجم ، سيتم تعيينه افتراضيًا إلى الحجم الأصغر التالي الذي تم تحديده._

10
guide/arabic/bootstrap/icons/index.md
View File

@ -38,11 +38,11 @@ _ملاحظة: لا تقم بتضمين النقطة في سمة فئة HTML ،
### أيقونة Bootstrap في الأزرار
`
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
`
```html
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
```
_ملاحظة: رمز Glyphicons الخاص ب Bootstrap غير متوفر على bootstrap V4_

10
guide/arabic/bootstrap/index.md
View File

@ -35,11 +35,11 @@ Bootstrap هو إطار أمامي شهير لتطوير الويب. يحتوي
تشبه إضافة عناصر JavaScript الخاصة بـ Bootstrap عناصر `<script>` الموضوعة عادة في الجزء السفلي من ' "العلامة. قد تحتاج إلى تضمين بعض التبعيات أولاً. انتبه بشكل خاص للترتيب المدرج:
`
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
`
```html
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
```
_ملاحظة: هذه أمثلة فقط وقد تتغير دون إشعار. يرجى الرجوع إلى CDN للوصلات الحالية لتضمينها في مشروعك._

158
guide/arabic/bootstrap/navigation-bar/index.md
View File

@ -14,21 +14,21 @@ localeTitle: شريط التنقل
هذه هي الشفرة اللازمة لإنشاء شريط تنقل أساسي.
`
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
`
```html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
```
#### أنماط Navbar
@ -41,26 +41,26 @@ localeTitle: شريط التنقل
يمكنك تضمين قائمة منسدلة داخل شريط التنقل. تتطلب هذه الميزة تضمين ملف javascript في Bootstrap حتى يعمل.
`
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Drop down
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
`
```html
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Drop down
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
```
#### إضافة أزرار إلى شريط التنقل
يمكنك إضافة أزرار على شريط التنقل. تعمل فئات Bootstrap Button الموجودة ولكن ستحتاج إلى تضمين `navbar-btn` class إلى نهاية قائمة الفئة.
`
<button class="btn navbar-btn">Button</button>
`
```html
<button class="btn navbar-btn">Button</button>
```
#### إضافة نماذج إلى navbar
@ -79,65 +79,65 @@ localeTitle: شريط التنقل
في بعض الحالات ، قد ترغب في محاذاة عناصر في شريط التنقل إلى اليمين (على سبيل المثال زر تسجيل الدخول أو التسجيل.). للقيام بذلك ، ستحتاج إلى استخدام فئة `navbar-right` .
`
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Action Link #1</a></li>
<li><a href="#">Action Link #2</a></li>
</ul>
</div>
</nav>
`
```html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Action Link #1</a></li>
<li><a href="#">Action Link #2</a></li>
</ul>
</div>
</nav>
```
#### عرض شريط التنقل مستقل عن التمرير
في بعض الحالات ، قد ترغب في الاحتفاظ بشريط التنقل في الجزء العلوي أو السفلي من الشاشة بغض النظر عن التمرير. ستحتاج إلى إضافة فئة `navbar-fixed-top` أو `navbar-fixed-bottom` إلى عنصر `<nav>` .
`
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
`
```html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
```
#### تصغير شريط التنقل
على شاشة صغيرة (مثل الهاتف أو الجهاز اللوحي) سيشغل شريط التنقل مساحة كبيرة جدًا. لحسن الحظ ، يوجد خيار تجميع شريط التنقل. يمكنك تحقيق ذلك باستخدام المثال التالي.
`
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
`
```html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
```
#### أمثلة Navbar

12
guide/arabic/bootstrap/panels/index.md
View File

@ -12,12 +12,12 @@ localeTitle: لوحات
**مثال الكود**
`
<div class="panel panel-primary">
<div class="panel panel-heading">Panel Primary</div>
<div class="panel panel-body"> This is a panel with the primary panel style.</div>
</div>
`
```html
<div class="panel panel-primary">
<div class="panel panel-heading">Panel Primary</div>
<div class="panel panel-body"> This is a panel with the primary panel style.</div>
</div>
```
#### أمثلة على اللوحة:

124
guide/arabic/bootstrap/tabs-and-pills/index.md
View File

@ -10,13 +10,13 @@ localeTitle: علامات التبويب وحبوب منع الحمل
للحصول على علامات تبويب تمهيدية ، تحتاج أولاً إلى عنصر يحتوي على فئة `.nav` . ثم يمكنك ببساطة إضافة فئة إضافية باسم `.nav-tabs` .
`
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
`
```html
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
```
## ![علامات تمهيد Bootstrap](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Tabs.PNG)
@ -24,13 +24,13 @@ localeTitle: علامات التبويب وحبوب منع الحمل
يتم تحقيق Bootstrap Pills بنفس طريقة Bootstrap Tabs ماعدا بدلا من `.nav-tabs` ، استخدم `.nav-pills` .
`
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
`
```html
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
```
## ![حبوب Bootstrap](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Pills.PNG)
@ -38,11 +38,11 @@ localeTitle: علامات التبويب وحبوب منع الحمل
حبوب منع الحمل هي أيضا تكويم عموديا باستخدام. `.nav stacked` بالتزامن مع `.nav-pills` .
`
<ul class="nav nav-pills nav-stacked">
...
</ul>
`
```html
<ul class="nav nav-pills nav-stacked">
...
</ul>
```
## ![حبوب Bootstrap مكدسة](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Pills%20Stacked.PNG)
@ -50,14 +50,14 @@ localeTitle: علامات التبويب وحبوب منع الحمل
يمكن أن يكون لكل من Bootstrap Tabs و Pills عرض متساوٍ للوالدين على شاشات أكبر من 768px باستخدام class .nav `.nav-justified` . على الشاشات الصغيرة ، يتم تكديس روابط التنقل.
`
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
`
```html
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
```
## ![علامات التمهيد / حبوب منع الحمل مبررة](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Tabs%20And%20Pills%20Justified.PNG)
@ -65,13 +65,13 @@ localeTitle: علامات التبويب وحبوب منع الحمل
بالنسبة لأي مكون من عناصر التنقل (علامات التبويب أو الحبوب) ، يمكنك إضافة `.disabled` للحصول على ارتباطات رمادية وبدون تأثيرات تحوم
`
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
`
```html
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
```
## ![روابط معطل](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Tabs%20and%20Pills%20Disabled%20Link.PNG)
@ -79,20 +79,20 @@ localeTitle: علامات التبويب وحبوب منع الحمل
أضف القوائم المنسدلة إلى علامات تبويب التنقل.
`
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
`
```html
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
```
## ![علامات التبويب مع القوائم المنسدلة](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Tabs%20Dropdown.PNG)
@ -100,19 +100,19 @@ localeTitle: علامات التبويب وحبوب منع الحمل
إضافة القوائم المنسدلة إلى حبوب الملاحة الخاصة بك.
`
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
`
```html
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
```
![حبوب منع الحمل مع القوائم المنسدلة](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Pills%20Dropdown.PNG)

119
guide/arabic/c/arrays-and-strings/index.md
View File

@ -10,18 +10,21 @@ localeTitle: المصفوفات والسلاسل
سيتم الإعلان عن متغير صحيح عادي على النحو التالي:
`int my_variable;
`
```C
int my_variable;
```
لإعلان هذا كصفيف ، وجعله مصفوفة من 5 أعداد صحيحة ، يمكن الإعلان عنه على النحو التالي:
`int my_array[5];
`
```C
int my_array[5];
```
سيؤدي ذلك إلى إنشاء صفيف يسمى `my_array` يمكنه الاحتفاظ بـ 5 أعداد صحيحة. ومع ذلك ، لم يتم تعيين أي من المواضع في الصفيف (حتى الآن). يمكنك تحديد الصفيف ، وتعيين القيم في البداية:
`int my_array[] = {1, 5, 3, 6, 2};
`
```C
int my_array[] = {1, 5, 3, 6, 2};
```
لاحظ أنه في هذا المثال ، لم نتعامل مع تحديد رقم في الأقواس المربعة. وذلك لأن الأقواس المتعرجة لها قيم فيها سيتم تعيينها لكل موضع في الصفيف. يمكنك وضع رقم في الأقواس على أي حال ، طالما أنك تأكد من إنشاء مواقع ذاكرة كافية لتخزين القيم التي مررت بها.
@ -39,46 +42,52 @@ float my\_array \[5\] = {5.0، 2.5}؛
في ما يلي مثال على تعيين المصفوفة إلى 9 في الموضع 1:
`my_array[1] = 9;
`
```C
my_array[1] = 9;
```
لذلك ، تمامًا مثل أي متغير آخر ، باستثناء أنه يحتوي على قيم متعددة للوصول باستخدام الرقم داخل الأقواس المربعة. يمكن إرجاع القيم بهذه الطريقة أيضًا:
`int variable = my_array[4];
`
```C
int variable = my_array[4];
```
هذا سوف يعلن `variable` ليكون عدد صحيح يساوي القيمة في الموضع 4 من `my_array` . ومع ذلك ، نظرًا لأن `variable` هو `int` مفرد وليس صفيفًا ، فهذا **ليس** رمزًا سيحقق النتيجة الصحيحة:
`// This code will NOT work properly!
int variable = my_array;
`
```C
// This code will NOT work properly!
int variable = my_array;
```
يمكن وضع أي عدد صحيح في الأقواس المربعة للحصول على موضع في الصفيف. يمكن أن تكون تلك الأعداد الصحيحة متغيرات أيضًا. ألق نظرة على هذا المثال ، الذي يطبع محتويات مصفوفة:
`#include <stdio.h>
int main(void) {
int my_array[] = {1, 1, 2, 3, 5, 7, 12};
for(int count = 0; count < 7; count++) {
printf("%i, \n", my_array[count]);
}
return 0;
}
`
```C
#include <stdio.h>
int main(void) {
int my_array[] = {1, 1, 2, 3, 5, 7, 12};
for(int count = 0; count < 7; count++) {
printf("%i, \n", my_array[count]);
}
return 0;
}
```
## سلاسل
الصفائف هي مجموعات من المتغيرات ، والسلاسل عبارة عن مجموعات من الأحرف. ونتيجة لذلك ، يمكننا تمثيل السلاسل باستخدام مصفوفة. _يمكنك_ يعلن شيء في نفس الطريقة كما في السابق، ولكن ستحتاج إلى وضع '\\ 0' واحدة من القيم الخاصة بك (أكثر على ذلك في دقيقة واحدة!):
`char hello_world[] = {'H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd', '!', '\0'};
`
```C
char hello_world[] = {'H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd', '!', '\0'};
```
ييكيس. هذا ليس حقا حلا رائعا. لحسن الحظ ، يوفر C طريقة أفضل مع وضع السلاسل في الاعتبار:
`char hello_world[] = "Hello world!";
`
```C
char hello_world[] = "Hello world!";
```
هذا أجمل بكثير. لا يتطلب منك حتى وضع "\\ 0" في النهاية ، إما. إذن ماذا كان هذا؟
@ -92,15 +101,16 @@ float my\_array \[5\] = {5.0، 2.5}؛
شيء آخر يجعل C أسهل بالنسبة لنا هو طباعة الأوتار. بدلاً من إجبارك على طباعة كل حرف في الصفيف ، يمكنك فقط استخدام محدد تنسيق٪ s ، وتعامل السلسلة كما تفعل مع أي قيمة `int` أو `double` . في ما يلي مثال على الترحيب ، البرنامج العالمي منذ البداية ، والذي أصبح أكثر تعقيدًا مع السلاسل:
`#include <stdio.h>
int main(void) {
char hello_world[] = "Hello, World!\n";
printf("%s", hello_world);
return 0;
}
`
```C
#include <stdio.h>
int main(void) {
char hello_world[] = "Hello, World!\n";
printf("%s", hello_world);
return 0;
}
```
### اللعب مع سلاسل
@ -110,8 +120,9 @@ float my\_array \[5\] = {5.0، 2.5}؛
`strcpy` (من 'نسخة السلسلة') نسخ سلسلة. على سبيل المثال ، سينسخ مقتطف الشفرة محتويات السلسلة `second` في السلسلة `first` :
`strpy(first, second);
`
```C
strpy(first, second);
```
في ما يلي مثال على الكيفية التي يبدو بها التنفيذ اليدوي لوظيفة strcpy:
@ -129,8 +140,9 @@ void copy _string (char \[\] first_ string، char \[\] second\_string) { int i؛
`strcat` (من "سلسلة سلسلة") سَلسَلة سلسلة ، بمعنى أنها ستأخذ محتويات سلسلة واحدة وتضعها في نهاية سلسلة أخرى. في هذا المثال ، سيتم تجميع محتويات `second` `first` :
`strcat(first, second);
`
```C
strcat(first, second);
```
في ما يلي مثال على التنفيذ اليدوي لـ strat fuction:
@ -140,8 +152,9 @@ void string\_concatenate (char \[\] s1، char \[\] s2) { int i = strlen (s1)، j
`strlen` (من "طول السلسلة") قيمة عدد صحيح تتطابق مع طول السلسلة. في هذا المثال ، سيتم تعيين عدد صحيح باسم `string_length` على طول `my_string` :
`string_length = strlen(my_string);
`
```C
string_length = strlen(my_string);
```
هنا هو تنفيذ يدوي من strlen fuction:
@ -158,12 +171,13 @@ int string\_length (char \[\] سلسلة) { int i؛
يقارن `strcmp` (من 'مقارنة السلسلة') سلسلتين. القيمة الصحيحة التي تقوم بإرجاعها هي 0 إذا كانت هي نفسها ، ولكنها ستعود أيضًا سالبة إذا كانت قيمة الأول (بإضافة الأحرف) أقل من قيمة الثانية ، وإيجابية إذا كان الأول أكبر من الثاني . ألق نظرة على مثال لكيفية استخدام هذا:
`if(!strcmp(first, second)){
printf("These strings are the same!\n");
} else {
printf("These strings are not the same!\n");
}
`
```C
if(!strcmp(first, second)){
printf("These strings are the same!\n");
} else {
printf("These strings are not the same!\n");
}
```
لاحظ `!` ، وهي مطلوبة لأن هذه الدالة تقوم بإرجاع 0 إذا كانت هي نفسها. إن وضع نقطة التعجب هنا سيجعل المقارنة صحيحة.
@ -171,8 +185,9 @@ int string\_length (char \[\] سلسلة) { int i؛
`strtok` (من "رمز السلسلة") يقطع سلسلة في سلسلة من الرموز المميزة باستخدام محدد. في هذا المثال ، يقطع strtok str str في سلسلة من الرموز المميزة باستخدام delimiter delim:
`char *strtok(char *str, const char *delim);
`
```C
char *strtok(char *str, const char *delim);
```
# قبل أن تذهب ...

189
guide/arabic/c/arrays/index.md
View File

@ -8,20 +8,21 @@ localeTitle: المصفوفات
قبل محاولة شرح المصفوفات ، دعنا نلقي نظرة على الكود الذي نريد طباعة 10 أرقام من قبل المستخدم بترتيب عكسي.
`#include <stdio.h>
int main(void) {
int a, b, c, d, e, f, g, i, j, k;
scanf("%d", &a);
scanf("%d", &b);
...
printf("%d", k);
printf("%d", j);
printf("%d", i);
... //and so on..
return 0;
}
`
```C
#include <stdio.h>
int main(void) {
int a, b, c, d, e, f, g, i, j, k;
scanf("%d", &a);
scanf("%d", &b);
...
printf("%d", k);
printf("%d", j);
printf("%d", i);
... //and so on..
return 0;
}
```
لذلك ، يبدو هذا مملاً بعض الشيء. حتى الآن ، كان لكل متغير تم إنشاؤه دور خاص. ولكن في الوقت الحالي ، سيكون من الرائع أن نتمكن فقط من تخزين قيم متعددة في مكان واحد والحصول على القيم مع مكانها في الخط ربما (القيمة الأولى والثانية وما إلى ذلك). هناك طريقة أخرى للنظر إلى هذا ، لنفترض أنك تريد تخزين مجموعة من الأسماء ، لا تحتاج إلى إنشاء متغيرات مختلفة لكل اسم ، بدلاً من ذلك يمكنك إنشاء مجموعة من الأسماء حيث يكون لكل اسم هويته الفريدة أو _فهرسها_ . أيضا ، يمكن أن نستخدم الحلقات عليها ، وهي الأشياء التي ستتعلمها فيما بعد ، ولكن في الأساس يفعلون الشيء نفسه مرارا وتكرارا. على سبيل المثال. القراءة من المستخدم ، أو طباعة القيم.
@ -29,42 +30,48 @@ localeTitle: المصفوفات
المصفوفات هي حاويات ذات حجم معين. تحتوي على متغيرات من **نفس النوع** . يمكنك الوصول إلى متغير تم تخزينه في الصفيف مع _فهرسه_ . دعونا ننظر في بعض التعليمات البرمجية:
`#include <stdio.h>
int main(void) {
int arr[4] = {1, 2, 3, 88};
int brr[] = {78, 65};
int crr[100] = {3};
int var = arr[0];
return 0;
}
`
```C
#include <stdio.h>
int main(void) {
int arr[4] = {1, 2, 3, 88};
int brr[] = {78, 65};
int crr[100] = {3};
int var = arr[0];
return 0;
}
```
والآن دعنا نكسر بناء الجملة قليلاً:
`int arr[4] = {1, 2, 3, 88};
`
```C
int arr[4] = {1, 2, 3, 88};
```
هنا قمت بإنشاء `array` من `ints` (أعداد صحيحة) ، تسمى `arr` . تحتوي هذه المجموعة على 4 عناصر: `1` ، `2` ، `3` ، `88` . لاحظ بناء الجملة!
`datatype name[number of elements]
`
```C
datatype name[number of elements]
```
العنصر الأول من هذه المجموعة هو `1` ، والثاني هو `2` وما إلى ذلك.
`int brr[] = {78, 65};
`
```C
int brr[] = {78, 65};
```
ليس عليك أن تخبر البعد مسبقًا. هنا سيتم إنشاء مجموعة من اثنين مع العناصر بين الأقواس المتعرجة.
`int crr[100] = {3};
`
```C
int crr[100] = {3};
```
إذا قمت بذلك ، فسيكون العنصر الأول هو `3` ، ولكن سيكون الباقي هو `0` .
`int var = arr[0];
`
```C
int var = arr[0];
```
هنا يتم إنشاء كثافة العمليات int تُسمى `var` ، ويتم تهيئتها إلى العنصر 0 من arr. **من المستورد جدا أن نلاحظ** أنه في C ، تبدأ الفهارس عند الصفر مقابل 1. وهذا يعني أنه للوصول إلى العنصر الأول ، يكون المؤشر (بين قوسين) 0 ، للوصول إلى العنصر الثاني ، المؤشر هو 1 الخ. في هذا المثال ، سيقوم `var` بتخزين القيمة `1` .
@ -79,45 +86,49 @@ localeTitle: المصفوفات
كما يدعم C صفائف متعددة الأبعاد.
`datatype name[size1][size2]...[sizeN]
`
```C
datatype name[size1][size2]...[sizeN]
```
صفائف ثنائية الأبعاد شائعة ويمكن تهيئتها باستخدام الصيغة التالية. يمكن للمرء أن يفكر منطقيًا في أول فهرس كصفوف والفهرس الثاني كأعمدة. يحتوي هذا المثال على صفين و 5 أعمدة.
`int arr[2][5] = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
`
```C
int arr[2][5] = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
```
قد يكون من الصعب تصور صفيف ثنائي الأبعاد باستخدام البنية الموضحة أعلاه حتى يستخدم المطورون أقواسًا اختيارية متداخلة لتوضيح بنية الصفيف. هذه أيضًا طريقة صالحة لتهيئة مصفوفة ثنائية الأبعاد.
`int arr[2][5] = {
{0, 1, 2, 3, 4},
{5, 6, 7, 8, 9}
};
`
```C
int arr[2][5] = {
{0, 1, 2, 3, 4},
{5, 6, 7, 8, 9}
};
```
يمكن استخدام اثنين متداخلين من أجل حلقات لطباعة محتويات صفيف ثنائي الأبعاد في تنسيق جدولي.
`#include <stdio.h>
int main() {
const int rows = 2, cols = 5;
int arr[rows][cols] = {
{0, 1, 2, 3, 4},
{5, 6, 7, 8, 9}
};
for (int row = 0; row < rows; row++) {
for (int col = 0; col < cols; col++) {
printf("%5d", arr[row][col]);
}
puts("");
}
return 0;
}
`
```C
#include <stdio.h>
int main() {
const int rows = 2, cols = 5;
int arr[rows][cols] = {
{0, 1, 2, 3, 4},
{5, 6, 7, 8, 9}
};
for (int row = 0; row < rows; row++) {
for (int col = 0; col < cols; col++) {
printf("%5d", arr[row][col]);
}
puts("");
}
return 0;
}
```
` 0 1 2 3 4
5 6 7 8 9
@ -129,32 +140,36 @@ localeTitle: المصفوفات
مثل ذلك:
`char string[6] = "Hello"; //here you get Hello\0, which is why we need an array with the length of 6
`
```C
char string[6] = "Hello"; //here you get Hello\0, which is why we need an array with the length of 6
```
كما هو الحال مع المصفوفات int في المثال أعلاه ، هناك عدة طرق لتعيين قيم لصفائف char:
`char string[] = "I do not want to count the chars in this.";
char string2[] = {'C','h','a','r',' ','b','y',' ','c','h','a','r','\0'};
char string3[] = "This is a string"
"with two lines";
`
```C
char string[] = "I do not want to count the chars in this.";
char string2[] = {'C','h','a','r',' ','b','y',' ','c','h','a','r','\0'};
char string3[] = "This is a string"
"with two lines";
```
مكافئ للنهج أعلاه ، يمكنك أيضًا إنشاء مؤشر إلى مجموعة char:
`char* string = "I do not want to count the chars in this.";
`
```C
char* string = "I do not want to count the chars in this.";
```
## أخطاء نموذجية ، نصائح
* عندما يكون لديك مصفوفة مليئة بالقيم وترغب في إنشاء صفيف آخر مماثل تمامًا لأول مرة ، لا تفعل ذلك مطلقًا:
`double first[] = {2,3,7};
double second[] = first;
//Or this:
double a[5], b[5]
a = b;
`
```C
double first[] = {2,3,7};
double second[] = first;
//Or this:
double a[5], b[5]
a = b;
```
يمكنك **فقط** التعامل مع القيم في صفيف واحد تلو الآخر. لا **يمكنك تعيين الكل مرة واحدة** ، عندما تتعرف على المؤشرات لاحقًا ، ستكون الأسباب واضحة.
@ -162,17 +177,19 @@ localeTitle: المصفوفات
* عندما تريد إنشاء مصفوفة ، يجب عليك إما معرفة حجمها ، أو تعيين قيم لها. لا تفعل هذا:
`int arr[];
`
```C
int arr[];
```
يجب أن يعرف الكمبيوتر حجم التخزين الذي يجب إنشاؤه للصفيف. في وقت لاحق ، سوف تتعلم طرق إنشاء حاويات يتم تحديد حجمها فيما بعد. (مرة أخرى ، المؤشرات.)
* عندما تقوم بفهرسة المصفوفة ، لن يقوم المترجم دائمًا بإعطائك خطأ. هذا ما يسمى السلوك غير معرف ، نحن لا نعرف ما الذي سيحدث. يمكن أن يؤدي إلى تعطل برنامجك ، ببساطة تباطؤ ، أي شيء.
`int test[6];
int a = test[-2];
int b = test[89];
`
```C
int test[6];
int a = test[-2];
int b = test[89];
```
السبب في أن C لا يتحقق من تقييد الفهرسة بسيط: C هي لغة فعالة. تم إعداده ، بحيث يكون البرنامج الأسرع: يتواصل بشكل جيد مع الأجهزة الخ. لا يحتوي كود C المكتوب بشكل جيد على أخطاء في الفهرسة ، فلماذا تريد C أن تتحقق أثناء التشغيل؟

32
guide/arabic/c/file-handling/index.md
View File

@ -8,24 +8,26 @@ localeTitle: التعامل مع الملف
إذا كنت قد قمت بكتابة برنامج C `helloworld` قبل ، فقد قمت بالفعل بإدخال ملف IO في C! تهانينا! : تادا:
`/* A simple hello world in C. */
#include <stdlib.h>
// Import IO functions.
#include <stdio.h>
int main() {
// This printf is where all the file IO magic happens!
// How exciting!
printf("Hello, world!\n");
return EXIT_SUCCESS;
}
`
```c
/* A simple hello world in C. */
#include <stdlib.h>
// Import IO functions.
#include <stdio.h>
int main() {
// This printf is where all the file IO magic happens!
// How exciting!
printf("Hello, world!\n");
return EXIT_SUCCESS;
}
```
تعد معالجة الملفات الجزء الأكثر أهمية من المبرمج. في لغة C ، نستخدم مؤشر بنية لنوع الملف لإعلان ملف
`FILE *fp;
`
```c
FILE *fp;
```
يوفر C عددًا من وظائف البناء لتنفيذ عملية الملف الأساسية

20
guide/arabic/c/for/index.md
View File

@ -8,10 +8,11 @@ localeTitle: لحلقة
## بناء جملة من أجل حلقة
`for ( init; condition; increment ) {
statement(s);
}
`
```c
for ( init; condition; increment ) {
statement(s);
}
```
تتألف الحلقة `for` من 3 أقسام ، وقسم التهيئة ، وحالة محددة ، وقسم التشغيل التزايدي أو التزايدي. تتحكم هذه المقاطع 3 و `for` حلقة.
@ -35,8 +36,9 @@ localeTitle: لحلقة
## انتاج:
`> Item on index 0 is 1
> Item on index 1 is 2
> Item on index 2 is 3
> Item on index 3 is 4
`
```shell
> Item on index 0 is 1
> Item on index 1 is 2
> Item on index 2 is 3
> Item on index 3 is 4
```

71
guide/arabic/c/functions/index.md
View File

@ -10,28 +10,30 @@ localeTitle: المهام
إليك مثال بسيط على وظيفة تقسم رقمين. انها ليست مفيدة جدا لأن لدينا `/` ، لكنه يظهر أجزاء مختلفة من وظيفة.
`#include <stdio.h>
int divides(int a, int b) {
return a / b;
}
int main(void) {
int first = 5;
int second = 10; //MUST NOT BE ZERO;
int result = divides(first, second);
printf("first divided by second is %i\n", result);
return 0;
}
`
```C
#include <stdio.h>
int divides(int a, int b) {
return a / b;
}
int main(void) {
int first = 5;
int second = 10; //MUST NOT BE ZERO;
int result = divides(first, second);
printf("first divided by second is %i\n", result);
return 0;
}
```
لاحظ أنه مثل `main` ، فإن `divides` لها تنسيق مشابه. ذلك لأن `main` هي أيضاً دالة- إنها خاصة فقط لأن C تبحث عنها أولاً. `divides` كما يأتي قبل `main` . هذا أمر مهم لأن `divides` النداءات `main` . استدعاء دالة يعني أنه يتم استخدام الرمز الخاص به. يجب أن يتم تجميع الكود قبل أن يتم استخدامه ، و C يجمع سطرًا سطحيًا من أعلى ، لذا لكي يتم استدعاء دالة ، يجب كتابتها قبل استدعاءها في هذا المثال. إذا جاءت `divides` بعد `main` ، فإنها ستفشل لأن المجمع لا يعرف أن `divides` موجودة حتى الآن. يمكنك أيضا استخدام النموذج الأولي وظيفة قبل الرئيسي للسماح لك بوضع `divides` بعد الرئيسي. النموذج الأولي للدالة متطابق مع الوظيفة التي لها نفس المتغيرات ونوع الإرجاع ، إلا أنه يتم حذف الأقواس واستبدالها بفاصلة منقوطة مثل:
`int divides(int a, int b);
`
```C
int divides(int a, int b);
```
لاحظ أيضًا أن `divides` `main` لا تتقاسم الأقواس ولا توجد بين قوسين. من المفترض أن تكون منفصلة ، على الرغم من أن واحد يدعو الآخر.
@ -39,8 +41,9 @@ localeTitle: المهام
## كسر إعلان الدالة
`int divides(int a, int b)
`
```C
int divides(int a, int b)
```
يبدأ تعريف الدالة بنوع بيانات ، وهو في هذه الحالة `int` . مهما كان نوع البيانات الذي تريد إرجاعه ، يجب عليك وضعه هنا. يمكنك الحصول على أي نوع من أنواع البيانات ، أو لا يمكن أن يكون نوع البيانات من خلال وضع `void` هنا.
@ -50,8 +53,9 @@ localeTitle: المهام
الآن دعونا نلقي نظرة على ما هو داخل الأقواس:
`return a / b;
`
```C
return a / b;
```
هذا واضح جدا ، لأن هذه هي وظيفة بسيطة. `a` مقسومة على `b` ، ويتم إرجاع هذه القيمة. كنت قد رأيت `return` قبل في المهمة `main` ، ولكن الآن بدلا من إنهاء برنامجنا ، فإنه ينهي الطريقة ويعطي قيمة لما يطلق عليه.
@ -67,16 +71,17 @@ localeTitle: المهام
ومع ذلك ، فإن معظم الوظائف لن تكون سطرًا واحدًا من التعليمات البرمجية. دعونا نلقي نظرة على مثال آخر أكثر تعقيدًا قليلاً يختار أكبر رقمين.
`int choose_bigger_int(int a, int b) {
if(a > b)
return a;
if(b > a)
return b;
return a;
}
`
```C
int choose_bigger_int(int a, int b) {
if(a > b)
return a;
if(b > a)
return b;
return a;
}
```
كما هو الحال من قبل ، ستقوم الدالة بإرجاع عدد صحيح ويأخذ عددًا صحيحًا اثنين. لا جديد لرؤية هناك.

215
guide/arabic/c/if-statements/index.md
View File

@ -8,30 +8,33 @@ localeTitle: مشغلات منطقية وبيانات إذا كانت
## بناء جملة من _البيان_
`if (testExpression) {
// statements
}
`
```
if (testExpression) {
// statements
}
```
## مثال بسيط
دعونا ننظر إلى مثال على ذلك في العمل:
`#include <stdio.h>
#include <stdbool.h>
int main(void) {
if(true) {
printf("Statement is True!\n");
}
return 0;
}
`
```C
#include <stdio.h>
#include <stdbool.h>
`output:
Statement is True!
`
int main(void) {
if(true) {
printf("Statement is True!\n");
}
return 0;
}
```
```
output:
Statement is True!
```
تمامًا مثل helloworld.c ، تم تضمين stdio.h. الجديد في هذا البرنامج هو stdbool.h ، وهو المكتبة البوولية القياسية - فهو يحتوي على كود يتيح لنا الوصول إلى 'true' و 'false'.
@ -43,25 +46,27 @@ localeTitle: مشغلات منطقية وبيانات إذا كانت
بالطبع ، لم يكن هذا المثال مفيدًا جدًا ، لأن الصواب صحيح دائمًا. وإليك آخر آخر أكثر عملية:
`#include <stdio.h>
int main(void) {
int n = 2;
if(n == 3) { // comparing n with 3
printf("Statement is True!\n");
}
else { // if first condition is not true, then comes to this block of code.
printf("Statement is False!\n");
}
return 0;
}
`
```C
#include <stdio.h>
`output:
Statement is False!
`
int main(void) {
int n = 2;
if(n == 3) { // comparing n with 3
printf("Statement is True!\n");
}
else { // if first condition is not true, then comes to this block of code.
printf("Statement is False!\n");
}
return 0;
}
```
```
output:
Statement is False!
```
هناك بعض الأشياء الهامة التي تختلف هنا. أولاً ، لم يتم تضمين `stdbool.h` . هذا مقبول ، لأنه لا يتم استخدام `true` `false` . في C ، لدينا بيانات تعامل على أنها صحيحة وكاذبة حتى ولو لم تكن الكلمات صحيحة أو خاطئة في العملية.
@ -71,24 +76,26 @@ localeTitle: مشغلات منطقية وبيانات إذا كانت
تسمح العبارة if-else بالاختيار بين بديلين محتملين. في بعض الأحيان ، يجب الاختيار بين أكثر من احتمالين. على سبيل المثال ، ترجع الدالة sign في الرياضيات -1 إذا كانت الوسيطة أقل من الصفر ، تُرجع +1 إذا كانت الوسيطة أكبر من الصفر وتعيد الصفر إذا كانت الوسيطة صفرًا. تطبق العبارة C ++ التالية هذه الوظيفة:
`if (x < 0)
sign = -1;
else
if (x == 0)
sign = 0;
else
sign = 1;
`
```C
if (x < 0)
sign = -1;
else
if (x == 0)
sign = 0;
else
sign = 1;
```
هذا هو عبارة if-else التي يكون فيها البيان الذي يلي الجملة هو نفسه عبارة if-else. إذا كانت قيمة x أقل من الصفر ، فسيتم تعيين علامة على -1 ، ومع ذلك إذا لم يكن أقل من العبارة التالية بعد تنفيذ آخر. في هذه الحالة ، إذا كانت x تساوي الصفر ، فسيتم تعيين التوقيع على الصفر وإلا يتم تعيينه على 1. غالبًا ما يستخدم المبرمجون المبتدئون تسلسلًا من عبارات if بدلاً من استخدام عبارة if-else متداخلة. هذا ما يكتبونه أعلاه في النموذج المكافئ منطقيًا:
`if (x < 0)
sign = -1;
if (x == 0)
sign = 0;
if (x > 0)
sign = 1;
`
```C
if (x < 0)
sign = -1;
if (x == 0)
sign = 0;
if (x > 0)
sign = 1;
```
لا ينصح بهذا الإصدار لأنه لا يوضح أنه سيتم تنفيذ واحد فقط من عبارات المهمة لقيمة معينة من x. كما أنها غير فعالة حيث يتم اختبار جميع الشروط الثلاثة دائما.
@ -100,25 +107,27 @@ localeTitle: مشغلات منطقية وبيانات إذا كانت
هناك الكثير يمكننا القيام به مع كل هؤلاء المشغلين! خذ بعين الاعتبار ما يلي ، حيث سنستخدم عبارة if-else:
`#include <stdio.h>
int main(void) {
int n = 5;
if(n == 5) {
printf("n is equal to 5!\n");
}
else if (n > 5) {
printf("n is greater than 5!\n");
}
return 0;
}
`
```C
#include <stdio.h>
`output:
n is equal to 5!
`
int main(void) {
int n = 5;
if(n == 5) {
printf("n is equal to 5!\n");
}
else if (n > 5) {
printf("n is greater than 5!\n");
}
return 0;
}
```
```
output:
n is equal to 5!
```
يحتوي بيان if-else على 'else if' مرتبط به. تعمل هذه التعليمة البرمجية إذا كان الشرط الموجود داخل السابق إذا كان خطأً ، ولكنه يضيف شرطًا داخل أقواسها يجب أن يكون صحيحًا قبل تشغيل الشفرة.
@ -126,32 +135,34 @@ localeTitle: مشغلات منطقية وبيانات إذا كانت
بالطبع ، قد نرغب في حدوث شيء ما إذا لم يكن ذلك صحيحًا ، أو إذا كان صحيحًا أو غير ذلك. لذلك ، لدينا عوامل منطقية:! ل ، لا & ، و و ل أو. دعونا نلقي نظرة على هذا في العمل:
`#include <stfio.h>
int main(void) {
int n = 5;
int m = 10;
if(n > m || n == 15) {
printf("Either n is greater than m, or n is equal to 15\n");
}
else if( n == 5 && m == 10 ) {
printf("n is equal to 5 and m is equal to 10!\n");
}
else if ( !(n == 6)) {
printf("It is not true that n is equal to 6!\n");
}
else if (n > 5) {
printf("n is greater than 5!\n");
}
return 0;
}
`
```C
#include <stfio.h>
`output:
n is equal to 5 and m is equal to 10!
`
int main(void) {
int n = 5;
int m = 10;
if(n > m || n == 15) {
printf("Either n is greater than m, or n is equal to 15\n");
}
else if( n == 5 && m == 10 ) {
printf("n is equal to 5 and m is equal to 10!\n");
}
else if ( !(n == 6)) {
printf("It is not true that n is equal to 6!\n");
}
else if (n > 5) {
printf("n is greater than 5!\n");
}
return 0;
}
```
```
output:
n is equal to 5 and m is equal to 10!
```
إليك المجموعة الأولى من الأقواس: `n > m || n == 5` . سيكون هذا صحيحًا إذا كان n أكبر من m ، أو إذا كان n تساوي 5. n ليس أكبر من m ، ولكن n تساوي 5. لأن أحد هذه الأشياء يكون صحيحًا ، ويتم ضمها بواسطة ، أو ، سيكون البيان صحيحًا وستتم طباعة التعليمة البرمجية داخل.
@ -167,16 +178,18 @@ localeTitle: مشغلات منطقية وبيانات إذا كانت
ونتيجة لذلك ، هذه العبارة إذا كانت صحيحة وصالحة:
`if(12452) {
printf("This is true!\n")
}
`
```C
if(12452) {
printf("This is true!\n")
}
```
حسب التصميم ، 0 غير صحيح ومن قبل الاصطلاح ، 1 صحيح. في الواقع ، إليك نظرة على مكتبة `stdbool.h` الموضحة مسبقًا:
`#define false 0
#define true 1
`
```C
#define false 0
#define true 1
```
هناك في الواقع أكثر قليلا من ذلك ، ولكن هذا هو الجزء الذي يقوم بكل العمل.

52
guide/arabic/c/if/index.md
View File

@ -31,31 +31,33 @@ localeTitle: إذا
## مثال
`#include <stdio.h>
int main () {
// Local variable definition
int a = 10;
// Check the boolean condition
if(a < 5) {
// If condition is true then print the following
printf("a is less than 5!\n" );
}
else {
// If condition is false then print the following
printf("a is not less than 5!\n" );
}
printf("Value of a is : %d\n", a);
return 0;
}
`
```
#include <stdio.h>
int main () {
// Local variable definition
int a = 10;
// Check the boolean condition
if(a < 5) {
// If condition is true then print the following
printf("a is less than 5!\n" );
}
else {
// If condition is false then print the following
printf("a is not less than 5!\n" );
}
printf("Value of a is : %d\n", a);
return 0;
}
```
## انتاج |
`-> a is not less than 5!
-> Value of a is : 100
`
```
-> a is not less than 5!
-> Value of a is : 100
```

46
guide/arabic/c/index.md
View File

@ -22,28 +22,31 @@ localeTitle: C
## مرحبا العالم في C
`#include <stdio.h>
int main(void)
{
printf("hello, world\n");
return 0;
}
`
```C
#include <stdio.h>
int main(void)
{
printf("hello, world\n");
return 0;
}
```
دعونا كسر هذا البرنامج لأسفل خطوة بخطوة.
الأول هو `#include` :
`#include <stdio.h> // This is called preprocessor directives
`
```C
#include <stdio.h> // This is called preprocessor directives
```
هذه تعليمات إلى المحول البرمجي للعثور على مجموعة من ملفات الرأس وتضمينها. تحتوي ملفات الرأس على تعليمات برمجية إضافية يمكننا استخدامها. في هذه الحالة ، تم إرشاد المحول البرمجي لتضمين `<stdio.h>` ، والذي يحتوي على جميع أنواع الوظائف المفيدة مثل `printf()` . يمكننا أيضا أن يكتب ذلك ك `#include"stdio.h"` . سنتطرق إلى التفاصيل المتعلقة بالوظائف التي يتم إجراؤها لاحقًا ، ولكن في الوقت الحالي تذكر فقط أن إحدى الوظائف هي مجموعة من الرموز التي يمكننا استخدامها.
`int main(void)
{
}
`
```C
int main(void)
{
}
```
هذا الرمز يعلن الوظيفة الرئيسية. وتتمثل المهمة الرئيسية الخاصة ، وسوف تحصل دائما على الدعوة ودائما هو الجزء الرئيسي من البرنامج. إذا لم يكن هذا في برنامجك ، فلا يمكن تشغيل البرنامج ولن يتم ترجمته.
@ -68,8 +71,9 @@ localeTitle: C
ينتهي البرنامج بعبارة عودة:
`return 0;
`
```C
return 0;
```
هذا يدل على أن الوظيفة قد انتهت وأنه يجب أن تنتهي بإعطاء قيمة 0 إلى أي مما جعلها تعمل. عندما تقوم بتشغيل التعليمات البرمجية على جهاز الكمبيوتر الخاص بك ، فمن الجيد أن يكون ذلك لأنه يسمح للبرامج الأخرى بالتفاعل مع جهازك بطريقة أفضل.
@ -87,8 +91,9 @@ localeTitle: C
لتشغيل برنامج C ، يجب أن يتم تجميعها. لكي يتم التحويل من سطر الأوامر باستخدام gcc ، قم بتشغيل الأمر التالي من المحطة الطرفية الخاصة بك:
`gcc -o helloworld ./helloworld.c
`
```shell
gcc -o helloworld ./helloworld.c
```
`gcc` هو Gnu C Compiler ، وسوف يقوم بتجميع الملف C الذي نعطيه إلى برنامج يمكن تشغيله بواسطة الكمبيوتر.
@ -96,8 +101,9 @@ localeTitle: C
بمجرد تجميعها ، قم بتشغيل الأمر التالي:
`./helloworld
`
```shell
./helloworld
```
إذا سار كل شيء بشكل جيد ، يجب أن ترى `Hello, World!` المطبوعة على الشاشة.

643
guide/arabic/c/loops/index.md
View File

@ -12,27 +12,29 @@ localeTitle: الحلقات من جميع الأنواع
### بناء الجملة
`while(condition) {
statement(s);
}
`
```
while(condition) {
statement(s);
}
```
إليك مثال على ذلك:
`#include <stdio.h>
int main(void) {
int my_number = 0;
while(my_number != 10){
++my_number;
}
printf("my_number = %i", my_number);
return 0;
}
`
```C
#include <stdio.h>
int main(void) {
int my_number = 0;
while(my_number != 10){
++my_number;
}
printf("my_number = %i", my_number);
return 0;
}
```
في حين أن العبارة داخل حلقة أثناء صحيحة ، سيتم تشغيل المحتوى داخل الأقواس. عندما يضرب البرنامج `while(my_number)` ، فإنه يتحقق من العبارة داخل الأقواس. إذا كانت هذه العبارة خاطئة ، فلن تقوم بتشغيل حلقة while. بدلاً من ذلك ، سيتم تخطي التعليمة البرمجية بين القوسين بين قوسين وسيتم التقاطها من حيث توقفت.
@ -40,27 +42,29 @@ localeTitle: الحلقات من جميع الأنواع
الشيء الذي قد تصادفه عند اللعب مع هذه الحلقة أو أي حلقة أخرى هو فكرة حلقة لا نهائية يمكن تشغيلها لعدد لا نهائي من المرات لأنه لا يوجد شيء لإيقافه. في بعض الأحيان يمكن أن يحدث هذا عن قصد:
`while(1) {
printf("This will get printed forever unless the program is stopped!");
}
`
```C
while(1) {
printf("This will get printed forever unless the program is stopped!");
}
```
بالطبع ، يمكن أن يحدث أيضا عن طريق الخطأ. إليك الشفرة نفسها التي كانت عليها من قبل ، ولكن مع اختلاف دقيق يجعلها في حلقة لا نهائية:
`#include <stdio.h>
int main(void) {
int my_number = 11;
while(my_number != 10){
++my_number;
}
printf("my_number = %i", my_number);
return 0;
}
`
```C
#include <stdio.h>
int main(void) {
int my_number = 11;
while(my_number != 10){
++my_number;
}
printf("my_number = %i", my_number);
return 0;
}
```
عندما يتم تقييم هذه الحلقة في `my_number` ، سيتم التحقق من `my_number` لمعرفة ما إذا كانت ليست 10. لم يتم ذلك ، لأنه تمت تهيئتها في 11 ، لذا سيتم تشغيل الشفرة داخل الحلقة بينما سيكون `my_number` 12. 12 لا يساوي 10 ، لذلك سيتم تشغيل التعليمات البرمجية داخل حلقة أثناء و `my_number` سيكون 13. سوف يستمر تشغيل هذا إلى الأبد لأن هذا الشرط لن تصبح خاطئة أبداً - الطريقة الوحيدة للتوقف هو أن يتم فرض البرنامج للتوقف عن التشغيل. هذا مثال على حلقة لا نهائية ، لأنه إذا تُرك بمفرده ، فسوف يتم تشغيل عدد لا نهائي من المرات.
@ -70,27 +74,29 @@ localeTitle: الحلقات من جميع الأنواع
### بناء الجملة
`do {
statement(s);
} while( condition );
`
```
do {
statement(s);
} while( condition );
```
وإليك نظرة على ذلك:
`#include <stdio.h>
int main(void){
int a = 0;
do {
a++
} while(a == -123);
printf("%i\n", a);
return 0;
}
`
```C
#include <stdio.h>
int main(void){
int a = 0;
do {
a++
} while(a == -123);
printf("%i\n", a);
return 0;
}
```
إذا كانت هذه حلقة مستمرة ، فلن يتم تشغيل الرمز الموجود بين الأقواس لأن هذا الشرط ليس صحيحًا عند إجراء التقييم. ومع ذلك ، نظرًا لأن هذه حلقة do-while ، سيتم تنفيذ الكود مرة واحدة ، ثم يتم إجراء التقييم لمعرفة ما إذا كان يجب إجراء ذلك مرة أخرى. تعد "مهام المهام أثناء العمل" مفيدة عندما تعرف أنك تريد القيام بشيء ما مرة واحدة ، ولكن قد تحتاج إلى تشغيله مرة أخرى بعد ذلك.
@ -100,11 +106,12 @@ localeTitle: الحلقات من جميع الأنواع
### بناء الجملة
`for(initialisation; condition; changer)
{
statement(s);
}
`
```
for(initialisation; condition; changer)
{
statement(s);
}
```
إليك مثال على ذلك:
@ -127,8 +134,9 @@ localeTitle: الحلقات من جميع الأنواع
الضرب هو مجرد تكرار زائد ، لذلك هذا هو إضافة على `a` ، `b` مرة. دعونا نلقي نظرة على على `for` قمة على وجه الخصوص:
`for(int count = 0; count != b; count++)
`
```C
for(int count = 0; count != b; count++)
```
على عكس الحلقة ، هناك ثلاثة أشياء في قوسينا مفصولة بفواصل منقوطة. القسم الأول هو التهيئة ، ويشار إليه بـ "التهيئة": فهو يسمح لك بإنشاء متغير جديد وتعيين قيمة له ، أو تعيين متغير موجود إلى قيمة مختلفة ، أو لا يمكنك تعيين أي شيء ووضعه فاصلة منقوطة.
@ -198,14 +206,15 @@ localeTitle: الحلقات من جميع الأنواع
خذ لحظة للنظر في ما سيفعله هذا الرمز:
`for(;;){
printf("hello, world! \n");
}
while("Free Code Camp"){
printf("hello, world! \n");
}
`
```C
for(;;){
printf("hello, world! \n");
}
while("Free Code Camp"){
printf("hello, world! \n");
}
```
لا يوجد شيء في قسم التهيئة ، لذا لم تتم تهيئة أي شيء. هذا أمر جيد ، ويتم ذلك أحيانًا لأنك لا تريد دائمًا أو تحتاج إلى تهيئة أي شيء.
@ -217,9 +226,10 @@ localeTitle: الحلقات من جميع الأنواع
خلال هذه الصفحة ، قرأت أن الكود "داخل الأقواس" هو ما يتم تشغيله ، وهذا صحيح في الغالب. ومع ذلك ، ماذا لو لم تكن هناك أقواس؟
`while(true)
printf("hello, world! \n");
`
```C
while(true)
printf("hello, world! \n");
```
في حالات مثل هذه ، سيعامل C السطر التالي باعتباره المحتوى الوحيد الذي يحتاج إلى حلقات. يتجاهل C المسافات البيضاء ، بحيث تكون المسافة البادئة موجودة فقط للوضوح. سيتم التعامل مع ذلك السطر فقط كما لو كان في الحلقة ، وهذه خاصية إذا كانت هناك عبارات لكل حلقات وحلقات أثناء المشاركة. نظرًا لأنه يتم تجاهل المساحة البيضاء ، فإن موضع الإعلان لا يهم: يمكن أن يكون على نفس السطر أو السطر التالي أو 300 سطر ومسافتين لأسفل طالما لا توجد أسطر أخرى من الكود بينهما. يمكن أن تجعل هذه الميزة التعليمات البرمجية تبدو منظفاً قليلاً عندما يكون لديك سطر واحد فقط من التعليمات البرمجية لتشغيل في عبارة.
@ -227,8 +237,9 @@ localeTitle: الحلقات من جميع الأنواع
إذا لم تكن هناك أقواس ، سيبدو المحول البرمجي فقط في السطر التالي ويكون ذلك هو محتوى الحلقة. تخبر الفواصل المنقوطة المترجم بأن الخط قد انتهى. مع هذه الأشياء مجتمعة ، يمكن أن ننتظر C حتى يصبح شيء صحيح. لنفترض أن لدينا طريقة تسمى `is_button_pressed` وترجع false إذا لم يتم الضغط على زر ، وصحيح إذا تم الضغط على زر:
`while(!is_button_pressed());
`
```C
while(!is_button_pressed());
```
لا يحدث شيء في هذه الحلقة ، لأن الخط الوحيد الذي سينظر إليه هو فاصلة منقوطة. نتيجة لذلك ، سيتم استدعاء الأسلوب `is_button_pressed` ، وسيتم تقييم قيمة الإرجاع الخاصة به. إذا لم يتم الضغط على الزر وكانت قيمة الإرجاع خاطئة ، فإن `!` سوف تقلبه إلى true حتى يتم تشغيل الوظيفة مرة أخرى وتقييمها مرة أخرى. إذا كانت قيمة الإرجاع صحيحة ، فإن `!` سوف تقلبه إلى false وستخرج الحلقة الداخلية.
@ -248,67 +259,71 @@ localeTitle: الحلقات من جميع الأنواع
#### مثال 1: برنامج لطباعة نصف الهرم باستخدام \*
`*
* *
* * *
* * * *
* * * * *
`
```
*
* *
* * *
* * * *
* * * * *
```
**مصدر الرمز**
`#include <stdio.h>
int main()
{
int i, j, rows;
printf("Enter number of rows: ");
scanf("%d",&rows);
for(i=1; i<=rows; ++i)
{
for(j=1; j<=i; ++j)
{
printf("* ");
}
printf("\n");
}
return 0;
}
`
```c
#include <stdio.h>
int main()
{
int i, j, rows;
printf("Enter number of rows: ");
scanf("%d",&rows);
for(i=1; i<=rows; ++i)
{
for(j=1; j<=i; ++j)
{
printf("* ");
}
printf("\n");
}
return 0;
}
```
#### مثال 2: برنامج لطباعة نصف الهرم باستخدام الأرقام
`1
1 2
1 2 3
1 2 3 4
1 2 3 4 5
`
```
1
1 2
1 2 3
1 2 3 4
1 2 3 4 5
```
**مصدر الرمز**
`#include <stdio.h>
int main()
{
int i, j, rows;
printf("Enter number of rows: ");
scanf("%d",&rows);
for(i=1; i<=rows; ++i)
{
for(j=1; j<=i; ++j)
{
printf("%d ",j);
}
printf("\n");
}
return 0;
}
`
```c
#include <stdio.h>
int main()
{
int i, j, rows;
printf("Enter number of rows: ");
scanf("%d",&rows);
for(i=1; i<=rows; ++i)
{
for(j=1; j<=i; ++j)
{
printf("%d ",j);
}
printf("\n");
}
return 0;
}
```
#### مثال 3: برنامج لطباعة نصف الهرم باستخدام الحروف الهجائية
@ -321,40 +336,42 @@ localeTitle: الحلقات من جميع الأنواع
**مصدر الرمز**
`#include <stdio.h>
int main()
{
int i, j;
char input, alphabet = 'A';
printf("Enter the uppercase character you want to print in last row: ");
scanf("%c",&input);
for(i=1; i <= (input-'A'+1); ++i)
{
for(j=1;j<=i;++j)
{
printf("%c", alphabet);
}
++alphabet;
printf("\n");
}
return 0;
}
`
```c
#include <stdio.h>
int main()
{
int i, j;
char input, alphabet = 'A';
printf("Enter the uppercase character you want to print in last row: ");
scanf("%c",&input);
for(i=1; i <= (input-'A'+1); ++i)
{
for(j=1;j<=i;++j)
{
printf("%c", alphabet);
}
++alphabet;
printf("\n");
}
return 0;
}
```
برامج لطباعة نصف الهرم المقلوب باستخدام \* والأرقام
#### مثال 4: نصف الهرم المقلوب باستخدام \*
`* * * * *
* * * *
* * *
* *
*
`
```
* * * * *
* * * *
* * *
* *
*
```
**مصدر الرمز**
@ -382,36 +399,38 @@ localeTitle: الحلقات من جميع الأنواع
#### مثال 5: هرم نصف مقلوب باستخدام الأرقام
`1 2 3 4 5
1 2 3 4
1 2 3
1 2
1
`
```
1 2 3 4 5
1 2 3 4
1 2 3
1 2
1
```
**مصدر الرمز**
`#include <stdio.h>
int main()
{
int i, j, rows;
printf("Enter number of rows: ");
scanf("%d",&rows);
for(i=rows; i>=1; --i)
{
for(j=1; j<=i; ++j)
{
printf("%d ",j);
}
printf("\n");
}
return 0;
}
`
```c
#include <stdio.h>
int main()
{
int i, j, rows;
printf("Enter number of rows: ");
scanf("%d",&rows);
for(i=rows; i>=1; --i)
{
for(j=1; j<=i; ++j)
{
printf("%d ",j);
}
printf("\n");
}
return 0;
}
```
#### مثال 6: برنامج لطباعة الهرم الكامل باستخدام \*
@ -464,82 +483,85 @@ localeTitle: الحلقات من جميع الأنواع
**مصدر الرمز**
`#include <stdio.h>
int main()
{
int i, space, rows, k=0, count = 0, count1 = 0;
printf("Enter number of rows: ");
scanf("%d",&rows);
for(i=1; i<=rows; ++i)
{
for(space=1; space <= rows-i; ++space)
{
printf(" ");
++count;
}
while(k != 2*i-1)
{
if (count <= rows-1)
{
printf("%d ", i+k);
++count;
}
else
{
++count1;
printf("%d ", (i+k-2*count1));
}
++k;
}
count1 = count = k = 0;
printf("\n");
}
return 0;
}
`
```c
#include <stdio.h>
int main()
{
int i, space, rows, k=0, count = 0, count1 = 0;
printf("Enter number of rows: ");
scanf("%d",&rows);
for(i=1; i<=rows; ++i)
{
for(space=1; space <= rows-i; ++space)
{
printf(" ");
++count;
}
while(k != 2*i-1)
{
if (count <= rows-1)
{
printf("%d ", i+k);
++count;
}
else
{
++count1;
printf("%d ", (i+k-2*count1));
}
++k;
}
count1 = count = k = 0;
printf("\n");
}
return 0;
}
```
#### مثال 8: الهرم الكامل المعكوس باستخدام \*
`* * * * * * * * *
* * * * * * *
* * * * *
* * *
*
`
```
* * * * * * * * *
* * * * * * *
* * * * *
* * *
*
```
**مصدر الرمز**
`#include<stdio.h>
int main()
{
int rows, i, j, space;
printf("Enter number of rows: ");
scanf("%d",&rows);
for(i=rows; i>=1; --i)
{
for(space=0; space < rows-i; ++space)
printf(" ");
for(j=i; j <= 2*i-1; ++j)
printf("* ");
for(j=0; j < i-1; ++j)
printf("* ");
printf("\n");
}
return 0;
}
`
```c
#include<stdio.h>
int main()
{
int rows, i, j, space;
printf("Enter number of rows: ");
scanf("%d",&rows);
for(i=rows; i>=1; --i)
{
for(space=0; space < rows-i; ++space)
printf(" ");
for(j=i; j <= 2*i-1; ++j)
printf("* ");
for(j=0; j < i-1; ++j)
printf("* ");
printf("\n");
}
return 0;
}
```
#### مثال 9: طباعة مثلث باسكال
@ -553,66 +575,69 @@ localeTitle: الحلقات من جميع الأنواع
**مصدر الرمز**
`#include <stdio.h>
int main()
{
int rows, coef = 1, space, i, j;
printf("Enter number of rows: ");
scanf("%d",&rows);
for(i=0; i<rows; i++)
{
for(space=1; space <= rows-i; space++)
printf(" ");
for(j=0; j <= i; j++)
{
if (j==0 || i==0)
coef = 1;
else
coef = coef*(i-j+1)/j;
printf("%4d", coef);
}
printf("\n");
}
return 0;
}
`
```c
#include <stdio.h>
int main()
{
int rows, coef = 1, space, i, j;
printf("Enter number of rows: ");
scanf("%d",&rows);
for(i=0; i<rows; i++)
{
for(space=1; space <= rows-i; space++)
printf(" ");
for(j=0; j <= i; j++)
{
if (j==0 || i==0)
coef = 1;
else
coef = coef*(i-j+1)/j;
printf("%4d", coef);
}
printf("\n");
}
return 0;
}
```
#### مثال 10: طباعة مثلث فلويد.
`1
2 3
4 5 6
7 8 9 10
`
```
1
2 3
4 5 6
7 8 9 10
```
**مصدر الرمز**
`#include <stdio.h>
int main()
{
int rows, i, j, number= 1;
printf("Enter number of rows: ");
scanf("%d",&rows);
for(i=1; i <= rows; i++)
{
for(j=1; j <= i; ++j)
{
printf("%d ", number);
++number;
}
printf("\n");
}
return 0;
}
`
```c
#include <stdio.h>
int main()
{
int rows, i, j, number= 1;
printf("Enter number of rows: ");
scanf("%d",&rows);
for(i=1; i <= rows; i++)
{
for(j=1; j <= i; ++j)
{
printf("%d ", number);
++number;
}
printf("\n");
}
return 0;
}
```

45
guide/arabic/c/macros/index.md
View File

@ -10,18 +10,21 @@ localeTitle: وحدات الماكرو في C
يتم استخدام الكلمة الأساسية `#define` لتحديد وحدات الماكرو الجديدة. يتبعه اسم ومحتوى. حسب الاصطلاح ، تتم كتابة أسماء الماكرو في أحرف كبيرة.
`#define PI 3.14
`
```C
#define PI 3.14
```
إذا كنت تستخدم الماكرو بهذه الطريقة:
`printf("Value of PI: %d", PI);
`
```C
printf("Value of PI: %d", PI);
```
هو نفس كتابة هذا:
`printf("Value of PI: %d", 3.14);
`
```C
printf("Value of PI: %d", 3.14);
```
#### أنواع وحدات الماكرو
@ -31,33 +34,39 @@ localeTitle: وحدات الماكرو في C
تشبه دالة تستخدم نفس الكلمة `#define` . الفرق هو أنك تستخدم قوسين زوج بعد اسم الدالة.
`#define hello_world() printf("Hello World!")
`
```C
#define hello_world() printf("Hello World!")
```
لذلك اتصلت:
`hello_world()
`
```C
hello_world()
```
لقد حصلت:
`printf("Hello World!");
`
```C
printf("Hello World!");
```
يمكنك تعيين المعلمات أيضًا:
`#define hello(X) printf("Hello " X "!")
`
```C
#define hello(X) printf("Hello " X "!")
```
الآن الاتصال:
`hello("World");
`
```C
hello("World");
```
تحصل على equivallent:
`printf("Hello World!");
`
```C
printf("Hello World!");
```
#### معلومات اكثر:

15
guide/arabic/c/malloc/index.md
View File

@ -13,20 +13,23 @@ malloc () جزء من stdlib.h ولتتمكن من استخدامه تحتاج
يخصص malloc () ذاكرة حجم المطلوب وإرجاع مؤشر إلى بداية كتلة المخصصة. للاحتفاظ بالمؤشر المرتجع ، يجب علينا إنشاء متغير. يجب أن يكون المؤشر من نفس النوع المستخدم في بيان malloc.
سنقوم هنا بإعداد مؤشر إلى مجموعة من النمل قريباً
`int* arrayPtr;
`
```C
int* arrayPtr;
```
بخلاف اللغات الأخرى ، لا تعرف C نوع البيانات الذي تقوم بتخصيص الذاكرة له ؛ يجب أن يقال. لحسن الحظ ، لدى C دالة تسمى `sizeof()` يمكننا استخدامها.
`arrayPtr = (int *)malloc(10 * sizeof(int));
`
```C
arrayPtr = (int *)malloc(10 * sizeof(int));
```
استخدم هذا البيان malloc لوضع الذاكرة جانباً لمجموعة من 10 أعداد صحيحة. بما أن الأحجام يمكن أن تتغير بين أجهزة الكمبيوتر ، فمن المهم استخدام الدالة sizeof () لحساب الحجم على الكمبيوتر الحالي.
ستحتاج أي ذاكرة مخصصة أثناء تنفيذ البرنامج إلى تحريرها قبل إغلاق البرنامج. `free` الذاكرة ، يمكننا استخدام وظيفة free ()
`free( arrayPtr );
`
```C
free( arrayPtr );
```
سيؤدي هذا البيان إلى إلغاء تخصيص الذاكرة التي تم تخصيصها مسبقًا. لا يأتي C مع `garbage collector` مثل بعض اللغات الأخرى ، مثل Java. نتيجة لذلك ، سيتم تخصيص الذاكرة التي لم يتم تحريرها بشكل صحيح بعد إغلاق البرنامج.

30
guide/arabic/c/math/index.md
View File

@ -14,8 +14,9 @@ localeTitle: الرياضيات الأساسية
يتم تنفيذ الإضافة بعلامة `+` ، مثل:
`result = a + b;
`
```C
result = a + b;
```
في المثال أعلاه ، ستكون `result` المتغيرة مساوية لـ + b.
@ -23,8 +24,9 @@ localeTitle: الرياضيات الأساسية
يتم تنفيذ الإضافة باستخدام `-` مثل:
`result = a - b;
`
```C
result = a - b;
```
في المثال أعلاه ، ستكون `result` المتغيرة مساوية للقيمة a - b.
@ -32,8 +34,9 @@ localeTitle: الرياضيات الأساسية
يتم تنفيذ الضرب بـ `*` ، مثل:
`result = a * b;
`
```C
result = a * b;
```
في المثال أعلاه ، ستكون `result` المتغيرة مساوية للقيمة مضروبًا في b.
@ -41,8 +44,9 @@ localeTitle: الرياضيات الأساسية
يتم تنفيذ القسم بـ `/` ، مثل:
`result = a / b;
`
```C
result = a / b;
```
في المثال أعلاه ، ستكون `result` المتغيرة مساوية للفقرة ب. هذا ليس دائما جزءا من أكثر من ب ، ولكن. عند التعامل مع الأعداد الصحيحة ، تصبح الأمور مختلفة قليلاً عن ذلك لاحقًا.
@ -56,8 +60,9 @@ localeTitle: الرياضيات الأساسية
يعتبر مشغل modulo أكثر أهمية مما قد تفكر به ، خاصة في C حيث يتم فرض الفرق بين النقطة العائمة والأرقام الصحيحة. الأمر يستحق أن تكون مرتاحًا. إليك مثال على ذلك:
`result = a % b;
`
```C
result = a % b;
```
في المثال أعلاه ، ستكون `result` مساوية ل modulo b.
@ -79,8 +84,9 @@ localeTitle: الرياضيات الأساسية
الصب (الموصوف لاحقا) هو أحد الحلول. والآخر هو استخدام أرقام النقطة العائمة. إذا كان أحد الأرقام أو كلاهما قيد التشغيل رقم نقطة عائمة ، ستكون النتيجة رقمًا عائمًا. يصبح هذا الأمر أكثر تعقيدًا عندما نبدأ في التعامل مع ترتيب العمليات ، ولكن في الوقت الحالي ، كن على علم بأن هذا يعمل:
`double result = 23.0 / 2;
`
```C
double result = 23.0 / 2;
```
# مثال كامل

78
guide/arabic/c/more-math/index.md
View File

@ -24,12 +24,13 @@ localeTitle: المزيد من الرياضيات
هناك الكثير من المواقف التي تريد فيها أخذ رقم وإما إلى الأعلى أو الأسفل بنسبة 1. بالنسبة لهذه الحالات ، لدينا عوامل تشغيل ما بعد الإصلاح والإصلاحات المسبقة:
`1: a++;
2: ++a;
3: a--;
4: --a;
`
```C
1: a++;
2: ++a;
3: a--;
4: --a;
```
كلا المثالين 1 و 2 سيزيدان قيمة الواحد تلو الآخر. كل من الأمثلة في 3 و 4 سيقلل من قيمة واحدة. ومع ذلك ، 1 لا تفعل نفس الشيء تمامًا مثل 2 ، و 3 لا تفعل نفس الشيء تمامًا مثل 4. تسمى عوامل ما قبل الإصلاح هذا لأن العملية هي البادئة (2 و 4 هي مشغلات البادئة لدينا). ﯾﻌﻣل ھذا ﺑﺷﮐل طﻔﯾف ﺑﺷﮐل ﻣﺧﺗﻟف ﻋن ﻣﺷﻐﻟﻲ ﻣﺎ ﺑﻌد اﻹﺻﻼح ﻓﻲ 1 و 3. ﯾﻘوم اﻟﻣﺷﻐﻟون ﻣﺳﺑﻘًﺎ ﺑﺈﺟراء اﻟﻌﻣﻟﯾﺔ ، ﺛم إﻋﺎدة اﻟﻘﯾﻣﺔ. عاملو الإصلاح اللاحق يعيدون القيمة ، ثم يقومون بالتزايد.
@ -39,9 +40,10 @@ localeTitle: المزيد من الرياضيات
C يفعل نفس الشيء: ضع `-` أمام رقم أو متغير - هذا التأثير ، مثل:
`int number = -3;
number = -number;
`
```C
int number = -3;
number = -number;
```
لذلك ، يبدأ `number` بالسالب 3 ، لكن يصبح بعد ذلك إيجابيًا نظرًا لأن السلبية سالبة إيجابية.
@ -83,8 +85,9 @@ C يفعل نفس الشيء: ضع `-` أمام رقم أو متغير - هذا
لإجراء تحول لليسار ، استخدم المشغل `<<` ، مثل:
`c = a << b;
`
```C
c = a << b;
```
وهذا التحول `a` لمن اليسار `b` بت، ووضع تلك النتيجة تساوي `c` .
@ -97,13 +100,15 @@ C يفعل نفس الشيء: ضع `-` أمام رقم أو متغير - هذا
في بعض الأحيان تريد زيادة متغير بقيمة معينة. يمكنك فعل هذا:
`a = a + b;
`
```C
a = a + b;
```
ومع ذلك ، هذا ما يفعله مشغلو التعيين المركب. بدلا من ذلك ، يمكنك كتابة هذا ، والذي يفعل نفس الشيء بالضبط:
`a += b;
`
```C
a += b;
```
هذا موجود لحفنة من المشغلين الآخرين ، أيضا. في ما يلي جدول مفيد لك:
@ -117,27 +122,29 @@ C يفعل نفس الشيء: ضع `-` أمام رقم أو متغير - هذا
كما تتذكر من مناقشة التقسيم الصحيح ، سيعطي المثال التالي قيمة عدد صحيح بدون أي قيمة عشرية ، لأن كل من الأرقام الموجودة هي أعداد صحيحة:
`#include <stdio.h>
int main(void) {
int a = 12;
int b = 5;
printf("a divided by b is %i", a/b);
}
`
```C
#include <stdio.h>
int main(void) {
int a = 12;
int b = 5;
printf("a divided by b is %i", a/b);
}
```
ومع ذلك ، باستخدام الصب ، يمكننا تحويلها إلى طوافات باستخدام الصب. هذا يسمح لهم أن يتم تقسيمهم على شكل عوامات ، وسوف ترجع المعادلة قيمة عائمة:
`#include <stdio.h>
int main(void) {
int a = 12;
int b = 5;
printf("a divided by b is %f", (float) a / b);
}
`
```C
#include <stdio.h>
int main(void) {
int a = 12;
int b = 5;
printf("a divided by b is %f", (float) a / b);
}
```
وهي الآن نقطة عائمة 12 مقسومة على 5 ، لذلك يقوم هذا بإعادة رقم نقطة عائمة لا يتم اقتطاعها بعد المكان العشري.
@ -147,8 +154,9 @@ C يفعل نفس الشيء: ضع `-` أمام رقم أو متغير - هذا
هذا هو كل الأشياء المدمجة ، ولكن مثل كيف يمكنك `#include` stdio و stdbool ، يمكنك تضمين مكتبة تسمى `math.h` تحتوي هذه المكتبة على جميع أنواع الوظائف المفيدة لجميع أنواع الرياضيات. من المفيد إعطاء قراءة [لصفحة ويكيبيديا عليه](https://en.wikipedia.org/wiki/C_mathematical_functions#Overview_of_functions) إذا كنت ترغب في الحصول على القائمة الكاملة للوظائف. فيما يلي مثال على كيفية استخدام `abs` ، وهي الأولى في قائمتهم:
`a = abs(-1);
`
```C
a = abs(-1);
```
`abs` يحسب القيمة المطلقة للقيمة التي تم تمريرها إليه. في هذه الحالة، هو تلقي ذلك -1، لذلك سوف يتحول ذلك إلى 1، و `a` سوف يكون على قدم المساواة إلى 1. وهناك الكثير أكثر لإعطاء أكثر من ذلك بكثير وظائف، وهذه هي الطريقة التي سوف تكون قادرة على القيام الدعاة، وحساب المثلثات، وأكثر بكثير.

64
guide/arabic/c/passing-pointers-to-function/index.md
View File

@ -6,39 +6,41 @@ localeTitle: تمرير مؤشرات إلى funtions
C يسمح تمرير مؤشر إلى دالة. لتحقيق ذلك ، قم ببساطة بتعريف المعلمات كنوع مؤشر. تعد هذه الطريقة في تمرير المراجع إلى الدالات مفيدة عندما تريد تعديل المتغيرات الخارجة عن نطاق تلك الوظيفة.
`// incorrect implementation of swap
#include <stdio.h>
void swap(int a, int b){
int c;
c = a;
a = b;
b = c;
}
int main(){
int var1 = 10;
int var2 = 20;
swap(var1, var2);
printf("Value of var1: %d \n", var1); // prints 10
printf("Value of var2: %d \n", var2); // prints 20
}
`
```C
// incorrect implementation of swap
#include <stdio.h>
void swap(int a, int b){
int c;
c = a;
a = b;
b = c;
}
int main(){
int var1 = 10;
int var2 = 20;
swap(var1, var2);
printf("Value of var1: %d \n", var1); // prints 10
printf("Value of var2: %d \n", var2); // prints 20
}
```
في مثال التعليمة البرمجية هذه ، لا تعمل وظيفة التبديل كما هو مقصود حيث تقوم بتبديل اثنين من المتغيرات الموجودة فقط داخل نطاق تلك الوظيفة. لإصلاح هذا ، نقوم بإجراء تعديل كما هو موضح أدناه.
`// correct implementation of swap
#include <stdio.h>
void swap(int* a, int* b){
int c = *a;
*a = *b;
*b = c;
}
int main(){
int var1 = 10;
int var2 = 20;
swap(&var1, &var2);
printf("Value of var1: %d \n", var1); // prints 20
printf("Value of var2: %d \n", var2); // prints 10
}
`
```C
// correct implementation of swap
#include <stdio.h>
void swap(int* a, int* b){
int c = *a;
*a = *b;
*b = c;
}
int main(){
int var1 = 10;
int var2 = 20;
swap(&var1, &var2);
printf("Value of var1: %d \n", var1); // prints 20
printf("Value of var2: %d \n", var2); // prints 10
}
```
في المثال الثاني من التعليمات البرمجية ، تمكّنت من تغيير قيم المتغيرات فقط لأنك كنت تعمل باستمرار على عدم الرجوع إلى المؤشر داخل الدالة بدلاً من محاولة تغيير القيم مباشرة.

93
guide/arabic/c/pointers/index.md
View File

@ -8,34 +8,37 @@ localeTitle: مؤشرات
#
`type *var-name;
`
```
type *var-name;
```
## صنع واستخدام مؤشر
`#include <stdio.h>
int main(void){
double my_double_variable = 10.1;
double *my_pointer;
my_pointer = &my_double_variable;
printf("value of my_double_variable: %f\n", my_double_variable);
++my_double_variable;
printf("value of my_pointer: %f\n", *my_pointer);
return 0;
}
`
```c
#include <stdio.h>
int main(void){
double my_double_variable = 10.1;
double *my_pointer;
my_pointer = &my_double_variable;
printf("value of my_double_variable: %f\n", my_double_variable);
++my_double_variable;
printf("value of my_pointer: %f\n", *my_pointer);
return 0;
}
```
انتاج:
`value of my_double_variable: 10.100000
value of my_pointer: 11.100000
`
```
value of my_double_variable: 10.100000
value of my_pointer: 11.100000
```
في هذا الرمز ، هناك إعلانان. الأول هو تهيئة متغيرة نموذجية مما يؤدي إلى `double` وتعيينها تساوي 10.1. الجديد في تصريحاتنا هو استخدام `*` . تستخدم العلامة النجمية ( `*` ) عادةً للضرب ، ولكن عندما نستخدمها بوضعها أمام متغير ، فإنها تخبر C بأن هذا متغير مؤشر.
@ -43,10 +46,11 @@ localeTitle: مؤشرات
مع أخذ ذلك في الاعتبار ، دعونا نلقي نظرة أخرى على هذا الرمز من التعليمات البرمجية:
`double *my_pointer;
// my_pointer now stored the address of my_double_variable
my_pointer = &my_double_variable;
`
```c
double *my_pointer;
// my_pointer now stored the address of my_double_variable
my_pointer = &my_double_variable;
```
تم الإعلان عن `my_pointer` وتم الإعلان عنه كمؤشر. يعرف المترجم C الآن أن `my_pointer` إلى موقع ذاكرة. يعيّن السطر التالي `my_pointer` قيمة موقع ذاكرة باستخدام `&` .
@ -65,8 +69,9 @@ localeTitle: مؤشرات
يمكنك تعريف مؤشر متعدد في عبارة واحدة كما هو الحال مع المتغيرات القياسية ، مثل:
`int *x, *y;
`
```c
int *x, *y;
```
لاحظ أن `*` مطلوب قبل كل متغير. وهذا لأن كونك مؤشرًا يعتبر جزءًا من المتغير وليس جزءًا من نوع البيانات.
@ -109,9 +114,10 @@ localeTitle: مؤشرات
انتاج |
`Number1 = 10
Number2 = 5
`
```
Number1 = 10
Number2 = 5
```
يتم تمرير العناوين ، أو مواقع الذاكرة ، من `num1` و `num2` إلى `swap` الدالة ويتم تمثيلها بواسطة المؤشرات `*n1` و `*n2` داخل الدالة. لذلك ، الآن تشير المؤشرات `n1` و `n2` إلى عناوين `num1` و `num2` على التوالي.
@ -157,18 +163,19 @@ localeTitle: مؤشرات
ألقِ نظرة على هذا الرمز ، الذي يحول شيء من الأحرف الكبيرة إلى الصغيرة:
`#include <stdio.h>
#include <ctype.h>
char *lowerCase (char *string) {
char *p = string;
while (*p) {
if (isupper(*p)) *p = tolower(*p);
p++;
}
return string;
}
`
```c
#include <stdio.h>
#include <ctype.h>
char *lowerCase (char *string) {
char *p = string;
while (*p) {
if (isupper(*p)) *p = tolower(*p);
p++;
}
return string;
}
```
يبدأ هذا عن طريق اتخاذ سلسلة (شيء ستتعرف عليه عندما تصل إلى المصفوفات) ويمر عبر كل موقع. لاحظ في p ++. هذا يزيد المؤشر ، مما يعني أنه يبحث في موقع الذاكرة التالي. كل حرف هو موقع ذاكرة ، لذلك في هذه الحالة المؤشر يتطلع إلى كل حرف واتخاذ قرار بشأن ما يجب القيام به لكل واحد.

85
guide/arabic/c/structures/index.md
View File

@ -15,58 +15,63 @@ localeTitle: الهياكل
* يمكن أن تساعدنا الكلمة الأساسية `struct` في تعريف نوع بيانات المعرفة من قبل المستخدم.
`struct StudentRecord
{
char Name[20];
int Class;
char Address[30];
char Phone[10];
};
`
```C
struct StudentRecord
{
char Name[20];
int Class;
char Address[30];
char Phone[10];
};
```
* يمكننا أيضًا تحديد **بنية** باستخدام **الرموز المميزة لـ typedef** مما يجعل تهيئة البنية لاحقًا في برنامجنا أسهل.
`typedef struct StudentRecord
{
char Name[20];
int Class;
char Address[30];
char Phone[10];
}Record;
`
```C
typedef struct StudentRecord
{
char Name[20];
int Class;
char Address[30];
char Phone[10];
}Record;
```
في `main()` ، يتم تعريف **StudentRecord** نوع البيانات المعرفة من قبل المستخدم على النحو التالي:
`int main(void)
{
struct StudentRecord student1;
}
`
```C
int main(void)
{
struct StudentRecord student1;
}
```
وباستخدام **typedef** ، يبدو نوع البيانات المعرفة من قبل المستخدم:
`int main(void)
{
Record student1;
}
`
```C
int main(void)
{
Record student1;
}
```
للوصول إلى البيانات المخزنة في **student1** ، نستخدم عامل نقطة ( **.** ) للوصول إلى محتويات متغير نوع البنية.
`int main(void)
{
struct StudentRecord student1;
student1.Class = 10;
printf("Enter Name of Student\n");
scanf("%s",&student1.Name);
printf("Enter Address of Student\n");
scanf("%s",&student1.Address);
printf("Enter Phone Number of Student\n");
scanf("%s",&student1.Phone);
// Printing the Data
printf("Name: %s \n, Class: %d \n, Address: %s \n, Phone: %s \n",student1.Name, student1.Class, student1.Address, student1.Phone);
}
`
```C
int main(void)
{
struct StudentRecord student1;
student1.Class = 10;
printf("Enter Name of Student\n");
scanf("%s",&student1.Name);
printf("Enter Address of Student\n");
scanf("%s",&student1.Address);
printf("Enter Phone Number of Student\n");
scanf("%s",&student1.Phone);
// Printing the Data
printf("Name: %s \n, Class: %d \n, Address: %s \n, Phone: %s \n",student1.Name, student1.Class, student1.Address, student1.Phone);
}
```
### معلومات اكثر

80
guide/arabic/c/switch/index.md
View File

@ -34,48 +34,50 @@ localeTitle: تبديل القضية
باستخدام عبارة switch عبر عدة if / else يمكن أن تساهم في زيادة السرعة والقابلية للقراءة.
`# include <stdio.h>
int main() {
char operator;
double firstNumber,secondNumber;
printf("Enter an operator (+, -, *, /): ");
scanf("%c", &operator);
printf("Enter two operands: ");
scanf("%lf %lf",&firstNumber, &secondNumber);
switch (operator) {
case '+':
printf("%.1lf + %.1lf = %.1lf",firstNumber, secondNumber, firstNumber+secondNumber);
break;
case '-':
printf("%.1lf - %.1lf = %.1lf",firstNumber, secondNumber, firstNumber-secondNumber);
break;
case '*':
printf("%.1lf * %.1lf = %.1lf",firstNumber, secondNumber, firstNumber*secondNumber);
break;
case '/':
printf("%.1lf / %.1lf = %.1lf",firstNumber, secondNumber, firstNumber/firstNumber);
break;
// Operator is doesn't match any case constant (+, -, *, /)
default:
printf("Error! operator is not correct");
}
return 0;
}
`
```c
# include <stdio.h>
int main() {
char operator;
double firstNumber,secondNumber;
printf("Enter an operator (+, -, *, /): ");
scanf("%c", &operator);
printf("Enter two operands: ");
scanf("%lf %lf",&firstNumber, &secondNumber);
switch (operator) {
case '+':
printf("%.1lf + %.1lf = %.1lf",firstNumber, secondNumber, firstNumber+secondNumber);
break;
case '-':
printf("%.1lf - %.1lf = %.1lf",firstNumber, secondNumber, firstNumber-secondNumber);
break;
case '*':
printf("%.1lf * %.1lf = %.1lf",firstNumber, secondNumber, firstNumber*secondNumber);
break;
case '/':
printf("%.1lf / %.1lf = %.1lf",firstNumber, secondNumber, firstNumber/firstNumber);
break;
// Operator is doesn't match any case constant (+, -, *, /)
default:
printf("Error! operator is not correct");
}
return 0;
}
```
## انتاج:
`-> Enter an operator (+, -, *,): -
-> Enter two operands: 32.5
-> 12.4
-> 32.5 - 12.4 = 20.1
`
```c
-> Enter an operator (+, -, *,): -
-> Enter two operands: 32.5
-> 12.4
-> 32.5 - 12.4 = 20.1
```
## مراجعة: التبديل ضد إذا كان آخر

10
guide/arabic/c/variables-and-basic-datatypes/index.md
View File

@ -38,13 +38,15 @@ localeTitle: المتغيرات وأنواع البيانات الأساسية
دعونا نكسر ما فعلناه تحت `Some shingy things` :
`printf("%d \n", c);
`
```C
printf("%d \n", c);
```
لطباعة قيمة المتغير `c` ، يمكنك استخدام الدالة `printf()` . لاحظ أن `%d` مضمن في علامات الاقتباس المزدوجة. هذا يخبر الكمبيوتر أن تتوقع قيمة **د** ecimal ، وأنه بعد الفاصلة.
`printf("%d %d \n", a, b);
`
```C
printf("%d %d \n", a, b);
```
يمكنك طباعة عدة أعداد صحيحة بالترتيب الموضح بعد الفاصلة.

70
guide/arabic/c/variables/index.md
View File

@ -6,18 +6,19 @@ localeTitle: المتغيرات في C
الآن أنت تعرف ما هي خياراتك مع أنواع البيانات. دعونا نطبقها مع مثال بسيط هنا:
`#include <stdio.h>
int main(void) {
int my_first_variable = 12;
double my_second_variable = 983.9;
printf("My int is %i\n", my_first_variable);
printf("My double is %f\n", my_second_variable);
return 0;
}
`
```C
#include <stdio.h>
int main(void) {
int my_first_variable = 12;
double my_second_variable = 983.9;
printf("My int is %i\n", my_first_variable);
printf("My double is %f\n", my_second_variable);
return 0;
}
```
هناك الكثير من الأشياء الجديدة لإلقاء نظرة هنا! كنت قد رأيت بالفعل `#include` `int main(void)` ، لذلك هذا لا يستحق المسكن. ما هو الجديد هو `int my_first_variable = 12;` .
@ -27,8 +28,9 @@ localeTitle: المتغيرات في C
الاسم الفعلي للمتغير ليس مهمًا. يمكن أن يكون ما تشاء ، طالما أنه ليس أيًا من الكلمات التي احتفظ بها C للغة الفعلية ، ولا يمكن أن يتضمن سوى الأرقام والحروف ، وليس أي مسافات. لا يمكن أن يبدأ اسم المتغير برقم. بالمقابل ، يستخدم C أسماء متغيرات واضحة تستبدل الشرطات السفلية للمسافات. يمكن أيضًا أن يكون المتغير camelCase ، مثل هذا:
`double myFirstVariable = 983.9
`
```C
double myFirstVariable = 983.9
```
في الواقع ، سيكون بهذه الطريقة بلغات أخرى. ومع ذلك ، في C لا يتم ذلك عادة.
@ -56,22 +58,23 @@ localeTitle: المتغيرات في C
الآن دعونا نبدأ بتغيير القيم داخل المتغيرات الخاصة بنا. إليك الأمثلة نفسها من قبل ، لكن مع بضعة أسطر أخرى:
`#include <stdio.h>
int main(void) {
int my_first_variable = 12;
double my_second_variable = 983.9;
printf("My int is %i\n", my_first_variable);
printf("My double is %f\n", my_second_variable);
my_second_variable = -18.2 + my_first_variable;
printf("Now my double is %f\n", my_second_variable);
return 0;
}
`
```C
#include <stdio.h>
int main(void) {
int my_first_variable = 12;
double my_second_variable = 983.9;
printf("My int is %i\n", my_first_variable);
printf("My double is %f\n", my_second_variable);
my_second_variable = -18.2 + my_first_variable;
printf("Now my double is %f\n", my_second_variable);
return 0;
}
```
يوجد الآن سطر يقرأ `my_second_variable = -18.2 + my_first_variable;` . تعين هذه المعادلة قيمة جديدة للمتغير الموجود على اليسار. في كل مرة يتم فيها تعيين قيمة جديدة ، يجب أن يكون المتغير الذي يتم تعيينه إليه على اليسار دائمًا ، ويجب أن يكون دائمًا موجودًا بمفرده. سيجد برنامجك نتيجة للجانب الأيمن ، ويعينه للمتغير الموجود على اليسار. في هذه الحالة ، أضفنا _أول_ متغير لي إلى -18.2. المتغير _الأول_ هو 12 ، و -18.2 + 12 هو -6.2 ، بحيث يصبح المتغير _الثاني_ -6.2 بعد هذه الخطوة. سوف نحصل على المزيد من الرياضيات في القليل!
@ -79,9 +82,10 @@ localeTitle: المتغيرات في C
عند طباعة العوامات والتضاعف ، نحتاج في كثير من الأحيان إلى الدقة بعد النقطة العشرية. اذا كان لدينا
`float var1 = 15.3;
printf("%f");
`
```C
float var1 = 15.3;
printf("%f");
```
نحصل على `15.300000` . لذلك ، لنفترض أننا نريد مكانين فقط بعد العلامة العشرية لتقديم `15.30` . سنستخدم٪ .2f. لاحظ أننا نستخدم الفاصلة العشرية أمام عدد المنازل العشرية التي نرغب فيها متبوعة بالعلامة f ، ونشير إلى أننا نريد طباعة طافية أو مزدوجة.

54
guide/arabic/canvas/animation-in-canvas/index.md
View File

@ -6,37 +6,39 @@ localeTitle: الرسوم المتحركة
لتحريك الأشياء في `canvas` ، استخدم `window.requestAnimationFrame` لإعداد حلقة رسم.
`function draw() {
/* code goes here */
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
`
```js
function draw() {
/* code goes here */
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
```
سيؤدي الرمز أدناه إلى تشغيل وظيفة `draw` كل إطار.
`canvas` لا يوجد لديه وظائف خاصة تسمح للرسوم المتحركة. عليك فقط أن تستخدم للكتابة في حلقات الرسوم المتحركة. نموذج التصميم المعتاد لحلقات الرسوم المتحركة هو تحديث الحالة ، ثم رسم الحالة. على سبيل المثال ، لرسم مربع يتحرك عبر الشاشة:
`canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
var x=0;
var y=50;
function draw() {
// reset canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
//update state
x+=1;
// render state
ctx.beginPath();
ctx.rect(x, y, 50, 50);
ctx.fill();
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
`
```js
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
var x=0;
var y=50;
function draw() {
// reset canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
//update state
x+=1;
// render state
ctx.beginPath();
ctx.rect(x, y, 50, 50);
ctx.fill();
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
```
لرؤية هذا المفهوم في العمل ، راجع صفحة " [الجسيم سيم](/articles/canvas/particle-sim) ".

13
guide/arabic/canvas/basic-usage/index.md
View File

@ -6,17 +6,18 @@ localeTitle: الاستخدام الأساسي
عند استخدام لوحة الرسم القماشية ، ضع لوحة قماشية أولاً في المستند كعنصر.
`
<canvas width="400" height="400" id="canvas"></canvas>
`
```html
<canvas width="400" height="400" id="canvas"></canvas>
```
تتحكم خصائص `width` `height` في حجم اللوحة. تتحكم هذه السمات في حجم الرسم القماشي ، وليس الحجم المعروض الفعلي. راجع صفحة "أبعاد Canvas" لمزيد من المعلومات.
لاستخدام `canvas` رسم ، يجب أولاً أن نأخذ العنصر من الصفحة كعنصر DOM ، ثم نحصل على سياق رسم منه.
`var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
`
```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
```
سيتم إجراء جميع مكالمات الرسم بعد ذلك من كائن `ctx` . يمثل `ctx` سياق الرسم للكائن ، ويحتوي على معلومات حول مساحة الرسم ثنائية الأبعاد. كائن `canvas` هو عنصر DOM الفعلي. يسمح لنا التفاعل معها بالوصول إلى سمات مثل `width` `height` .

21
guide/arabic/canvas/canvas-dimensions/index.md
View File

@ -14,16 +14,17 @@ localeTitle: أبعاد قماش
لجعل حجم سياق الرسم يتطابق مع الحجم المعروض لعنصر `canvas` ، يتعين علينا فرض هذا في الوقت الفعلي. إحدى الممارسات الشائعة هي وضع المعالج التالي في `onResize` إصغاء `onResize` .
`// somewhere early in the script
var canvas = document.getElementById("canvas");
...
window.addEventListener("resize", function() {
canvas.setAttribute("width", canvas.scrollWidth);
canvas.setAttribute("height", canvas.scrollHeight);
console.log(canvas.offsetWidth);
});
`
```js
// somewhere early in the script
var canvas = document.getElementById("canvas");
...
window.addEventListener("resize", function() {
canvas.setAttribute("width", canvas.scrollWidth);
canvas.setAttribute("height", canvas.scrollHeight);
console.log(canvas.offsetWidth);
});
```
#### معلومات اكثر: