fix: converted single to triple backticks9 (#36236)
This commit is contained in:
Randell Dawson
Tom
@ -12,28 +12,28 @@ localeTitle: ف يوم
|
|||||||
|
|
||||||
### مثال
|
### مثال
|
||||||
|
|
||||||
`
|
```html
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Paragraph example</title>
|
<title>Paragraph example</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
This <strong>sentence</strong> was created to show how the paragraph works.
|
This <strong>sentence</strong> was created to show how the paragraph works.
|
||||||
</p>
|
</p>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`
|
```
|
||||||
|
|
||||||
يمكنك أيضًا تضمين عنصر الارتساء `<a>` في فقرة.
|
يمكنك أيضًا تضمين عنصر الارتساء `<a>` في فقرة.
|
||||||
|
|
||||||
### مثال
|
### مثال
|
||||||
|
|
||||||
`
|
```html
|
||||||
<p>Here's a
|
<p>Here's a
|
||||||
<a href="http://freecodecamp.com">link to Free Code Camp.com</a>
|
<a href="http://freecodecamp.com">link to Free Code Camp.com</a>
|
||||||
for you to follow.</p>
|
for you to follow.</p>
|
||||||
`
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
|||||||
@ -6,10 +6,10 @@ localeTitle: يوم واحد
|
|||||||
|
|
||||||
في HTML ، يتم استخدام العلامة `<s>` في نص يتوسطه خط. على سبيل المثال:
|
في HTML ، يتم استخدام العلامة `<s>` في نص يتوسطه خط. على سبيل المثال:
|
||||||
|
|
||||||
`
|
```html
|
||||||
<p><s>This year is the year of the monkey.</s></p>
|
<p><s>This year is the year of the monkey.</s></p>
|
||||||
<p>This year is the year of the Rooster.</p>
|
<p>This year is the year of the Rooster.</p>
|
||||||
`
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
|||||||
@ -8,24 +8,27 @@ localeTitle: علامة البرنامج النصي
|
|||||||
|
|
||||||
يتم استخدام العلامة / `<script>` لدمج جافا سكريبت من جانب العميل في ملف HTML الخاص بك والذي يمكن استخدامه لإضافة التفاعلية والمنطق إلى موقع الويب الخاص بك
|
يتم استخدام العلامة / `<script>` لدمج جافا سكريبت من جانب العميل في ملف HTML الخاص بك والذي يمكن استخدامه لإضافة التفاعلية والمنطق إلى موقع الويب الخاص بك
|
||||||
|
|
||||||
`<script>
|
```
|
||||||
//JavaScript code is written here
|
<script>
|
||||||
</script>
|
//JavaScript code is written here
|
||||||
|
</script>
|
||||||
<script src="js/app.js">
|
|
||||||
`
|
<script src="js/app.js">
|
||||||
|
```
|
||||||
|
|
||||||
يمكن استخدام العلامة لتشمل شفرة جافا سكريبت الفعلية في HTML نفسها مثل هذا
|
يمكن استخدام العلامة لتشمل شفرة جافا سكريبت الفعلية في HTML نفسها مثل هذا
|
||||||
|
|
||||||
`<script>
|
```
|
||||||
alert('hello this is my Javascript doing things!');
|
<script>
|
||||||
</script>
|
alert('hello this is my Javascript doing things!');
|
||||||
`
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
أو يمكنك استخدامه كطريقة للإشارة إلى ملف جافا سكريبت خارجي مثل هذا
|
أو يمكنك استخدامه كطريقة للإشارة إلى ملف جافا سكريبت خارجي مثل هذا
|
||||||
|
|
||||||
`<script src="main.js" />
|
```
|
||||||
`
|
<script src="main.js" />
|
||||||
|
```
|
||||||
|
|
||||||
وهنا تأخذ خاصية `src` للعنصر مسارًا إلى ملف Javascript
|
وهنا تأخذ خاصية `src` للعنصر مسارًا إلى ملف Javascript
|
||||||
|
|
||||||
|
|||||||
@ -10,19 +10,19 @@ localeTitle: قسم القسم
|
|||||||
|
|
||||||
لا ينبغي استخدام عنصر `<section>` بدلاً من عنصر `<div>` إذا كانت هناك حاجة إلى حاوية عامة. يجب استخدامه لتعريف الأقسام في صفحة HTML.
|
لا ينبغي استخدام عنصر `<section>` بدلاً من عنصر `<div>` إذا كانت هناك حاجة إلى حاوية عامة. يجب استخدامه لتعريف الأقسام في صفحة HTML.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Section Example</title>
|
<title>Section Example</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<section>
|
<section>
|
||||||
<h1>Heading</h1>
|
<h1>Heading</h1>
|
||||||
<p>Bunch of awesome content</p>
|
<p>Bunch of awesome content</p>
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
|||||||
@ -24,9 +24,9 @@ localeTitle: يوم سبان
|
|||||||
|
|
||||||
يشبه رمز الفقرة ذات النص الأحمر هذا:
|
يشبه رمز الفقرة ذات النص الأحمر هذا:
|
||||||
|
|
||||||
`
|
```html
|
||||||
<p>This paragraph has <span style="color:red">red span styling</span> inside it without affecting the rest of the document.</p>
|
<p>This paragraph has <span style="color:red">red span styling</span> inside it without affecting the rest of the document.</p>
|
||||||
`
|
```
|
||||||
|
|
||||||
#### الاختلافات بين `<span>` و `<div>`
|
#### الاختلافات بين `<span>` و `<div>`
|
||||||
|
|
||||||
|
|||||||
@ -8,8 +8,9 @@ localeTitle: علامة قوية
|
|||||||
|
|
||||||
### استعمال
|
### استعمال
|
||||||
|
|
||||||
`<strong> Hello World! </strong>
|
```
|
||||||
`
|
<strong> Hello World! </strong>
|
||||||
|
```
|
||||||
|
|
||||||
ينتج رمز أعلاه في
|
ينتج رمز أعلاه في
|
||||||
|
|
||||||
@ -33,12 +34,13 @@ localeTitle: علامة قوية
|
|||||||
|
|
||||||
### مثال:
|
### مثال:
|
||||||
|
|
||||||
`<body>
|
```
|
||||||
<p>
|
<body>
|
||||||
<strong> This </strong> is important.
|
<p>
|
||||||
</p>
|
<strong> This </strong> is important.
|
||||||
</body>
|
</p>
|
||||||
`
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
|||||||
@ -26,15 +26,15 @@ localeTitle: علامة نمط
|
|||||||
|
|
||||||
تُستخدم علامة النمط لتعيين أي أنماط CSS لصفحة الويب داخل مستند. يجب أن تكون علامة النمط متداخلة مع قسم الرأس في مستند html:
|
تُستخدم علامة النمط لتعيين أي أنماط CSS لصفحة الويب داخل مستند. يجب أن تكون علامة النمط متداخلة مع قسم الرأس في مستند html:
|
||||||
|
|
||||||
`
|
```html
|
||||||
<head>
|
<head>
|
||||||
<style>
|
<style>
|
||||||
h1 {
|
h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
`
|
```
|
||||||
|
|
||||||
يمكنك كتابة أي علامة نمط داخلية للرمز CSS - وفقًا للبناء الخاص بها.
|
يمكنك كتابة أي علامة نمط داخلية للرمز CSS - وفقًا للبناء الخاص بها.
|
||||||
@ -8,18 +8,18 @@ localeTitle: علامة الجدول
|
|||||||
|
|
||||||
### مثال
|
### مثال
|
||||||
|
|
||||||
`
|
```html
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Row 1, Cell 1</td>
|
<td>Row 1, Cell 1</td>
|
||||||
<td>Row 1, Cell 2</td>
|
<td>Row 1, Cell 2</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Row 2, Cell 1</td>
|
<td>Row 2, Cell 1</td>
|
||||||
<td>Row 2, Cell 2</td>
|
<td>Row 2, Cell 2</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
`
|
```
|
||||||
|
|
||||||
كتلة التعليمة البرمجية هذه قد ينتج الإخراج التالي:
|
كتلة التعليمة البرمجية هذه قد ينتج الإخراج التالي:
|
||||||
|
|
||||||
|
|||||||
@ -15,22 +15,22 @@ localeTitle: اليوم الثاني
|
|||||||
|
|
||||||
### مثال
|
### مثال
|
||||||
|
|
||||||
`
|
```html
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Td Tag Example</title>
|
<title>Td Tag Example</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Header1</th>
|
<th>Header1</th>
|
||||||
<th>Header2</th>
|
<th>Header2</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Cell A</td>
|
<td>Cell A</td>
|
||||||
<td>Cell B</td>
|
<td>Cell B</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`
|
```
|
||||||
@ -10,11 +10,11 @@ localeTitle: علامة Textarea
|
|||||||
|
|
||||||
عينة من الرموز:
|
عينة من الرموز:
|
||||||
|
|
||||||
`
|
```html
|
||||||
<form>
|
<form>
|
||||||
<textarea name="comment" rows="8" cols="80" maxlength="500" placeholder="Enter your comment here..." required></textarea>
|
<textarea name="comment" rows="8" cols="80" maxlength="500" placeholder="Enter your comment here..." required></textarea>
|
||||||
</form>
|
</form>
|
||||||
`
|
```
|
||||||
|
|
||||||
السمات الأكثر شيوعًا: تحدد `row` و `cols` ارتفاع وعرض النص تحدد السمة `placeholder` النص المرئي للمستخدم ، فهي تساعد المستخدم على فهم البيانات التي يجب كتابتها تحدد السمة `maxlength` الحد الأقصى لطول النص الذي يمكن كتابته في textarea ، لا يمكن للمستخدم إرسال المزيد من الأحرف تعني السمة `required` أنه يجب ملء هذا الحقل قبل إرسال النموذج
|
السمات الأكثر شيوعًا: تحدد `row` و `cols` ارتفاع وعرض النص تحدد السمة `placeholder` النص المرئي للمستخدم ، فهي تساعد المستخدم على فهم البيانات التي يجب كتابتها تحدد السمة `maxlength` الحد الأقصى لطول النص الذي يمكن كتابته في textarea ، لا يمكن للمستخدم إرسال المزيد من الأحرف تعني السمة `required` أنه يجب ملء هذا الحقل قبل إرسال النموذج
|
||||||
|
|
||||||
|
|||||||
@ -18,19 +18,19 @@ localeTitle: كيانات HTML
|
|||||||
|
|
||||||
كيان الشخصية يشبه هذا:
|
كيان الشخصية يشبه هذا:
|
||||||
|
|
||||||
`
|
```html
|
||||||
<!-- format &[entity_name]; -->
|
<!-- format &[entity_name]; -->
|
||||||
<!-- example for a less-than sign (<) -->
|
<!-- example for a less-than sign (<) -->
|
||||||
<
|
<
|
||||||
`
|
```
|
||||||
|
|
||||||
أو
|
أو
|
||||||
|
|
||||||
`
|
```html
|
||||||
<!-- &#[entity_number]; -->
|
<!-- &#[entity_number]; -->
|
||||||
<!-- example for a less-than sign (<) -->
|
<!-- example for a less-than sign (<) -->
|
||||||
<
|
<
|
||||||
`
|
```
|
||||||
|
|
||||||
## دليل مرجعي
|
## دليل مرجعي
|
||||||
|
|
||||||
|
|||||||
@ -24,26 +24,26 @@ localeTitle: نماذج HTML
|
|||||||
|
|
||||||
مثال الكود:
|
مثال الكود:
|
||||||
|
|
||||||
`
|
```html
|
||||||
<form>
|
<form>
|
||||||
<label for="username">Username:</label>
|
<label for="username">Username:</label>
|
||||||
<input type="text" name="username" id="username">
|
<input type="text" name="username" id="username">
|
||||||
<label for="password">Password:</label>
|
<label for="password">Password:</label>
|
||||||
<input type="password" name="password" id="password">
|
<input type="password" name="password" id="password">
|
||||||
<input type="radio" name="gender" value="male">Male<br>
|
<input type="radio" name="gender" value="male">Male<br>
|
||||||
<input type="radio" name="gender" value="female">Female<br>
|
<input type="radio" name="gender" value="female">Female<br>
|
||||||
<input type="radio" name="gender" value="other">Other
|
<input type="radio" name="gender" value="other">Other
|
||||||
<input list="Options">
|
<input list="Options">
|
||||||
<datalist id="Options">
|
<datalist id="Options">
|
||||||
<option value="Option1">
|
<option value="Option1">
|
||||||
<option value="Option2">
|
<option value="Option2">
|
||||||
<option value="Option3">
|
<option value="Option3">
|
||||||
</datalist>
|
</datalist>
|
||||||
<input type="submit" value="Submit">
|
<input type="submit" value="Submit">
|
||||||
<input type="color">
|
<input type="color">
|
||||||
<input type="checkbox" name="correct" value="correct">Correct
|
<input type="checkbox" name="correct" value="correct">Correct
|
||||||
</form>
|
</form>
|
||||||
`
|
```
|
||||||
|
|
||||||
العناصر الأخرى التي يمكن أن تحتوي على الشكل:
|
العناصر الأخرى التي يمكن أن تحتوي على الشكل:
|
||||||
|
|
||||||
|
|||||||
@ -12,20 +12,20 @@ localeTitle: صوت HTML5
|
|||||||
|
|
||||||
#### مثال 1
|
#### مثال 1
|
||||||
|
|
||||||
`
|
```html
|
||||||
<audio controls>
|
<audio controls>
|
||||||
<source src="tutorial.ogg" type="audio/ogg">
|
<source src="tutorial.ogg" type="audio/ogg">
|
||||||
<source src="tutorial.mp3" type="audio/mpeg">
|
<source src="tutorial.mp3" type="audio/mpeg">
|
||||||
Your browser does not support the audio element.
|
Your browser does not support the audio element.
|
||||||
</audio>
|
</audio>
|
||||||
`
|
```
|
||||||
|
|
||||||
#### مثال 2
|
#### مثال 2
|
||||||
|
|
||||||
`
|
```html
|
||||||
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" controls loop autoplay>
|
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" controls loop autoplay>
|
||||||
</audio>
|
</audio>
|
||||||
`
|
```
|
||||||
|
|
||||||
تتضمن سمة `controls` الصوتية مثل التشغيل والإيقاف المؤقت ومستوى الصوت. إذا لم تستخدم هذه السمة ، فلن يتم عرض أي عناصر تحكم.
|
تتضمن سمة `controls` الصوتية مثل التشغيل والإيقاف المؤقت ومستوى الصوت. إذا لم تستخدم هذه السمة ، فلن يتم عرض أي عناصر تحكم.
|
||||||
|
|
||||||
|
|||||||
@ -81,52 +81,52 @@ The `<section>` و `<article>` العناصر متشابهة م
|
|||||||
1. تهدف المقالة إلى أن تكون قابلة للتوزيع أو القابلة لإعادة الاستخدام بشكل مستقل.
|
1. تهدف المقالة إلى أن تكون قابلة للتوزيع أو القابلة لإعادة الاستخدام بشكل مستقل.
|
||||||
2. القسم هو تجميع موضوعي للمحتوى.
|
2. القسم هو تجميع موضوعي للمحتوى.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<section>
|
<section>
|
||||||
<p>Top Stories</p>
|
<p>Top Stories</p>
|
||||||
<section>
|
<section>
|
||||||
<p>News</p>
|
<p>News</p>
|
||||||
<article>Story 1</article>
|
<article>Story 1</article>
|
||||||
<article>Story 2</article>
|
<article>Story 2</article>
|
||||||
<article>Story 3</article>
|
<article>Story 3</article>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<p>Sport</p>
|
<p>Sport</p>
|
||||||
<article>Story 1</article>
|
<article>Story 1</article>
|
||||||
<article>Story 2</article>
|
<article>Story 2</article>
|
||||||
<article>Story 3</article>
|
<article>Story 3</article>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
`
|
```
|
||||||
|
|
||||||
#### `<header>` و `<hgroup>`
|
#### `<header>` و `<hgroup>`
|
||||||
|
|
||||||
`<header>` عنصر موجود بشكل عام في أعلى مستند أو قسم أو مقالة ويحتوي عادةً على العنوان الرئيسي وبعض أدوات التنقل والبحث.
|
`<header>` عنصر موجود بشكل عام في أعلى مستند أو قسم أو مقالة ويحتوي عادةً على العنوان الرئيسي وبعض أدوات التنقل والبحث.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<header>
|
<header>
|
||||||
<h1>Company A</h1>
|
<h1>Company A</h1>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/home">Home</a></li>
|
<li><a href="/home">Home</a></li>
|
||||||
<li><a href="/about">About</a></li>
|
<li><a href="/about">About</a></li>
|
||||||
<li><a href="/contact">Contact us</a></li>
|
<li><a href="/contact">Contact us</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<form target="/search">
|
<form target="/search">
|
||||||
<input name="q" type="search" />
|
<input name="q" type="search" />
|
||||||
<input type="submit" />
|
<input type="submit" />
|
||||||
</form>
|
</form>
|
||||||
</header>
|
</header>
|
||||||
`
|
```
|
||||||
|
|
||||||
`<hgroup>` يجب استخدام عنصر حيث تريد عنوان رئيسي مع واحد أو أكثر من العناوين الفرعية.
|
`<hgroup>` يجب استخدام عنصر حيث تريد عنوان رئيسي مع واحد أو أكثر من العناوين الفرعية.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<hgroup>
|
<hgroup>
|
||||||
<h1>Heading 1</h1>
|
<h1>Heading 1</h1>
|
||||||
<h2>Subheading 1</h2>
|
<h2>Subheading 1</h2>
|
||||||
<h2>Subheading 2</h2>
|
<h2>Subheading 2</h2>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
`
|
```
|
||||||
|
|
||||||
تذكر ، أن رأس `<header>` عنصر يمكن أن يحتوي على أي محتوى ، ولكن `<hgroup>` لا يمكن أن يحتوي العنصر إلا على رؤوس أخرى ، وهي `<h1>` إلى `<h6>` بما في ذلك `<hgroup>` .
|
تذكر ، أن رأس `<header>` عنصر يمكن أن يحتوي على أي محتوى ، ولكن `<hgroup>` لا يمكن أن يحتوي العنصر إلا على رؤوس أخرى ، وهي `<h1>` إلى `<h6>` بما في ذلك `<hgroup>` .
|
||||||
|
|
||||||
@ -134,47 +134,47 @@ The `<section>` و `<article>` العناصر متشابهة م
|
|||||||
|
|
||||||
The `<aside>` عنصر مخصص للمحتوى الذي ليس جزءًا من تدفق النص الذي يظهر فيه ، ومع ذلك لا يزال مرتبطًا بطريقة ما. هذا `<aside>` كشريط جانبي للمحتوى الرئيسي الخاص بك.
|
The `<aside>` عنصر مخصص للمحتوى الذي ليس جزءًا من تدفق النص الذي يظهر فيه ، ومع ذلك لا يزال مرتبطًا بطريقة ما. هذا `<aside>` كشريط جانبي للمحتوى الرئيسي الخاص بك.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<aside>
|
<aside>
|
||||||
<p>This is a sidebar, for example a terminology definition or a short background to a historical figure.</p>
|
<p>This is a sidebar, for example a terminology definition or a short background to a historical figure.</p>
|
||||||
</aside>
|
</aside>
|
||||||
`
|
```
|
||||||
|
|
||||||
قبل HTML5 ، تم إنشاء قوائمنا باستخدام `<ul>` 's و `<li>` الصورة. الآن ، مع هذه ، يمكننا فصل عناصر القائمة لدينا باستخدام `<nav>` للتنقل بين صفحاتك. يمكنك الحصول على أي عدد من `<nav>` العناصر على الصفحة ، على سبيل المثال ، من الشائع أن يكون لديك نظام ملاحة عمومي عبر الجزء العلوي (في `<header>` ) والتنقل المحلي في شريط جانبي (في عنصر `<aside>` ).
|
قبل HTML5 ، تم إنشاء قوائمنا باستخدام `<ul>` 's و `<li>` الصورة. الآن ، مع هذه ، يمكننا فصل عناصر القائمة لدينا باستخدام `<nav>` للتنقل بين صفحاتك. يمكنك الحصول على أي عدد من `<nav>` العناصر على الصفحة ، على سبيل المثال ، من الشائع أن يكون لديك نظام ملاحة عمومي عبر الجزء العلوي (في `<header>` ) والتنقل المحلي في شريط جانبي (في عنصر `<aside>` ).
|
||||||
|
|
||||||
`
|
```html
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/home">Home</a></li>
|
<li><a href="/home">Home</a></li>
|
||||||
<li><a href="/about">About</a></li>
|
<li><a href="/about">About</a></li>
|
||||||
<li><a href="/contact">Contact us</a></li>
|
<li><a href="/contact">Contact us</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
`
|
```
|
||||||
|
|
||||||
#### `<footer>`
|
#### `<footer>`
|
||||||
|
|
||||||
إذا كان هناك رأس `<header>` يجب أن يكون هناك `<footer>` . A `<footer>` بشكل عام في أسفل مستند أو قسم أو مقالة. تمامًا مثل `<header>` المحتوى عبارة عن معلومات عامة ، مثل تفاصيل المؤلف ، أو المعلومات القانونية ، و / أو روابط إلى المعلومات ذات الصلة. تسري أيضًا على تضمين `<section>` عناصر داخل تذييل الصفحة.
|
إذا كان هناك رأس `<header>` يجب أن يكون هناك `<footer>` . A `<footer>` بشكل عام في أسفل مستند أو قسم أو مقالة. تمامًا مثل `<header>` المحتوى عبارة عن معلومات عامة ، مثل تفاصيل المؤلف ، أو المعلومات القانونية ، و / أو روابط إلى المعلومات ذات الصلة. تسري أيضًا على تضمين `<section>` عناصر داخل تذييل الصفحة.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<footer>©Company A</footer>
|
<footer>©Company A</footer>
|
||||||
`
|
```
|
||||||
|
|
||||||
#### `<small>`
|
#### `<small>`
|
||||||
|
|
||||||
ال `<small>` يظهر العنصر غالبًا داخل `<footer>` أو `<aside>` العنصر الذي عادة ما يحتوي على معلومات حقوق الطبع والنشر أو التنازلات القانونية ، وغيرها من مثل هذه المطبوعة الجميلة. ومع ذلك ، هذا غير مخصص لجعل النص أصغر. إنه مجرد وصف محتواه ، وليس وصف العرض التقديمي.
|
ال `<small>` يظهر العنصر غالبًا داخل `<footer>` أو `<aside>` العنصر الذي عادة ما يحتوي على معلومات حقوق الطبع والنشر أو التنازلات القانونية ، وغيرها من مثل هذه المطبوعة الجميلة. ومع ذلك ، هذا غير مخصص لجعل النص أصغر. إنه مجرد وصف محتواه ، وليس وصف العرض التقديمي.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<footer><small>©Company A</small> Date</footer>
|
<footer><small>©Company A</small> Date</footer>
|
||||||
`
|
```
|
||||||
|
|
||||||
#### `<time>`
|
#### `<time>`
|
||||||
|
|
||||||
The `<time>` يسمح عنصر لا لبس فيها ISO 8601 تاريخ لإرفاق نسخة الإنسان من ذلك التاريخ.
|
The `<time>` يسمح عنصر لا لبس فيها ISO 8601 تاريخ لإرفاق نسخة الإنسان من ذلك التاريخ.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>
|
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>
|
||||||
`
|
```
|
||||||
|
|
||||||
لماذا تهتم بـ `<time>` ؟ في حين يستطيع البشر قراءة الوقت الذي يمكن أن يفسد من خلال السياق بالطريقة العادية ، يمكن لأجهزة الكمبيوتر قراءة تاريخ ISO 8601 ورؤية التاريخ والوقت والمنطقة الزمنية.
|
لماذا تهتم بـ `<time>` ؟ في حين يستطيع البشر قراءة الوقت الذي يمكن أن يفسد من خلال السياق بالطريقة العادية ، يمكن لأجهزة الكمبيوتر قراءة تاريخ ISO 8601 ورؤية التاريخ والوقت والمنطقة الزمنية.
|
||||||
|
|
||||||
@ -182,12 +182,12 @@ The `<time>` يسمح عنصر لا لبس فيها ISO 8601 تاريخ
|
|||||||
|
|
||||||
`<figure>` لتغليف محتوى الصور حوله ، و `<figcaption>` هو تسمية صورتك.
|
`<figure>` لتغليف محتوى الصور حوله ، و `<figcaption>` هو تسمية صورتك.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<figure>
|
<figure>
|
||||||
<img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
|
<img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
|
||||||
<figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
|
<figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
`
|
```
|
||||||
|
|
||||||
### تعرف على المزيد حول عناصر HTML5 الجديدة:
|
### تعرف على المزيد حول عناصر HTML5 الجديدة:
|
||||||
|
|
||||||
|
|||||||
@ -32,19 +32,21 @@ localeTitle: HTML5 فيديو
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
`#### poster
|
```
|
||||||
|
#### poster
|
||||||
The "poster" attribute is the image that shows on the video until the user clicks to play it.
|
|
||||||
`
|
The "poster" attribute is the image that shows on the video until the user clicks to play it.
|
||||||
|
```
|
||||||
|
|
||||||
أتش تي أم أل
|
أتش تي أم أل
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
`#### controls
|
```
|
||||||
|
#### controls
|
||||||
The "controls" attribute can be set to true or false and will handle whether controls such as the play/pause button or volume slider appear. You set it to true by adding it into the tag, if it is not present in the tag it is set to false.
|
|
||||||
`
|
The "controls" attribute can be set to true or false and will handle whether controls such as the play/pause button or volume slider appear. You set it to true by adding it into the tag, if it is not present in the tag it is set to false.
|
||||||
|
```
|
||||||
|
|
||||||
أتش تي أم أل
|
أتش تي أم أل
|
||||||
|
|
||||||
|
|||||||
@ -12,21 +12,23 @@ localeTitle: تخزين HTML5 على الويب
|
|||||||
|
|
||||||
`window.localStorage` : يخزن البيانات بدون تاريخ انتهاء الصلاحية ويعيش حتى تتم إزالتها.
|
`window.localStorage` : يخزن البيانات بدون تاريخ انتهاء الصلاحية ويعيش حتى تتم إزالتها.
|
||||||
|
|
||||||
`// Store Item
|
```javascript
|
||||||
localStorage.setItem("foo", "bar");
|
// Store Item
|
||||||
|
localStorage.setItem("foo", "bar");
|
||||||
// Get Item
|
|
||||||
localStorage.getItem("foo"); //returns "bar"
|
// Get Item
|
||||||
`
|
localStorage.getItem("foo"); //returns "bar"
|
||||||
|
```
|
||||||
|
|
||||||
`window.sessionStorage` : تخزين البيانات لجلسة واحدة ، حيث يتم فقدان البيانات عند إغلاق علامة تبويب المتصفح / المتصفح.
|
`window.sessionStorage` : تخزين البيانات لجلسة واحدة ، حيث يتم فقدان البيانات عند إغلاق علامة تبويب المتصفح / المتصفح.
|
||||||
|
|
||||||
`// Store Item
|
```javascript
|
||||||
sessionStorage.setItem("foo", "bar");
|
// Store Item
|
||||||
|
sessionStorage.setItem("foo", "bar");
|
||||||
// Get Item
|
|
||||||
sessionStorage.getItem("foo"); //returns "bar"
|
// Get Item
|
||||||
`
|
sessionStorage.getItem("foo"); //returns "bar"
|
||||||
|
```
|
||||||
|
|
||||||
نظرًا لأن التطبيق الحالي يعتمد فقط تعيينات سلسلة إلى سلسلة ، تحتاج إلى إجراء تسلسل وإزالة تسلسل هياكل البيانات الأخرى.
|
نظرًا لأن التطبيق الحالي يعتمد فقط تعيينات سلسلة إلى سلسلة ، تحتاج إلى إجراء تسلسل وإزالة تسلسل هياكل البيانات الأخرى.
|
||||||
|
|
||||||
@ -34,18 +36,21 @@ localeTitle: تخزين HTML5 على الويب
|
|||||||
|
|
||||||
على سبيل المثال لـ JSON المعطى
|
على سبيل المثال لـ JSON المعطى
|
||||||
|
|
||||||
`var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };
|
```
|
||||||
`
|
var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };
|
||||||
|
```
|
||||||
|
|
||||||
تم أولاً تحويل كائن JSON إلى سلسلة وحفظه في وحدة التخزين المحلية:
|
تم أولاً تحويل كائن JSON إلى سلسلة وحفظه في وحدة التخزين المحلية:
|
||||||
|
|
||||||
`localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));
|
```
|
||||||
`
|
localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));
|
||||||
|
```
|
||||||
|
|
||||||
للحصول على كائن JSON من السلسلة المخزنة في التخزين المحلي:
|
للحصول على كائن JSON من السلسلة المخزنة في التخزين المحلي:
|
||||||
|
|
||||||
`var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));
|
```
|
||||||
`
|
var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
|||||||
@ -16,37 +16,37 @@ localeTitle: نوافذ الأطر المدمجة
|
|||||||
|
|
||||||
تضمين فيديو YouTube مع `<iframe>` :
|
تضمين فيديو YouTube مع `<iframe>` :
|
||||||
|
|
||||||
`
|
```html
|
||||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es"
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es"
|
||||||
frameborder="0" allowfullscreen></iframe>
|
frameborder="0" allowfullscreen></iframe>
|
||||||
`
|
```
|
||||||
|
|
||||||
تضمين خرائط Google مع `<iframe>` :
|
تضمين خرائط Google مع `<iframe>` :
|
||||||
|
|
||||||
`
|
```html
|
||||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d774386.2436462595!2d-74.53874786161381!3d40.69718109704434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sau!4v1508405930424"
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d774386.2436462595!2d-74.53874786161381!3d40.69718109704434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sau!4v1508405930424"
|
||||||
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
|
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
|
||||||
`
|
```
|
||||||
|
|
||||||
### نص بديل
|
### نص بديل
|
||||||
|
|
||||||
يتم استخدام المحتوى بين علامتي الفتح `<iframe>` كنص بديل ، ليتم عرضه إذا كان متصفح المشاهد لا يدعم iframe.
|
يتم استخدام المحتوى بين علامتي الفتح `<iframe>` كنص بديل ، ليتم عرضه إذا كان متصفح المشاهد لا يدعم iframe.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es" frameborder="0">
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es" frameborder="0">
|
||||||
<p>Your browser does not support iframes.</p>
|
<p>Your browser does not support iframes.</p>
|
||||||
</iframe>
|
</iframe>
|
||||||
`
|
```
|
||||||
|
|
||||||
### استهداف إطار Iframe في ارتباط
|
### استهداف إطار Iframe في ارتباط
|
||||||
|
|
||||||
يمكن لأي رابط `<a>` أن يستهدف محتوى عنصر `<iframe>` . بدلاً من إعادة توجيه نافذة المتصفح إلى صفحة الويب المرتبطة ، سيعيد توجيه `<iframe>` . لكي يعمل هذا ، يجب أن تتطابق السمة `target` للعنصر `<a>` مع سمة `name` الخاصة بـ `<iframe>` .
|
يمكن لأي رابط `<a>` أن يستهدف محتوى عنصر `<iframe>` . بدلاً من إعادة توجيه نافذة المتصفح إلى صفحة الويب المرتبطة ، سيعيد توجيه `<iframe>` . لكي يعمل هذا ، يجب أن تتطابق السمة `target` للعنصر `<a>` مع سمة `name` الخاصة بـ `<iframe>` .
|
||||||
|
|
||||||
`
|
```html
|
||||||
<iframe width="560" height="315" src="about:blank" frameborder="0" name="iframe-redir"></iframe>
|
<iframe width="560" height="315" src="about:blank" frameborder="0" name="iframe-redir"></iframe>
|
||||||
|
|
||||||
<p><a href="https://www.youtube.com/embed/v8kFT4I31es" target="iframe-redir">Redirect the Iframe</a></p>
|
<p><a href="https://www.youtube.com/embed/v8kFT4I31es" target="iframe-redir">Redirect the Iframe</a></p>
|
||||||
`
|
```
|
||||||
|
|
||||||
سيعرض هذا المثال علامة `<iframe>` فارغة في البداية ، ولكن عند النقر على الرابط أعلاه ، سيعيد توجيه `<iframe>` لعرض فيديو YouTube.
|
سيعرض هذا المثال علامة `<iframe>` فارغة في البداية ، ولكن عند النقر على الرابط أعلاه ، سيعيد توجيه `<iframe>` لعرض فيديو YouTube.
|
||||||
|
|
||||||
|
|||||||
@ -16,20 +16,20 @@ HTML5 يقدم مجموعة من العناصر الدلالية. على الر
|
|||||||
|
|
||||||
## مثال بسيط على مستند HTML
|
## مثال بسيط على مستند HTML
|
||||||
|
|
||||||
`
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Page Title</title>
|
<title>Page Title</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>My First Heading</h1>
|
<h1>My First Heading</h1>
|
||||||
<p>My first paragraph.</p>
|
<p>My first paragraph.</p>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`
|
```
|
||||||
|
|
||||||
DOCTYPE html: يحدد هذا المستند ليكون HTML5
|
DOCTYPE html: يحدد هذا المستند ليكون HTML5
|
||||||
|
|
||||||
|
|||||||
@ -38,15 +38,16 @@ localeTitle: تخطيطات
|
|||||||
|
|
||||||
تقدم HTML5 عناصر دلالية دلالية تحدد الأجزاء المختلفة لصفحة الويب:
|
تقدم HTML5 عناصر دلالية دلالية تحدد الأجزاء المختلفة لصفحة الويب:
|
||||||
|
|
||||||
`<header> - Defines a header for a document or a section
|
```
|
||||||
<nav> - Defines a container for navigation links
|
<header> - Defines a header for a document or a section
|
||||||
<section> - Defines a section in a document
|
<nav> - Defines a container for navigation links
|
||||||
<article> - Defines an independent self-contained article
|
<section> - Defines a section in a document
|
||||||
<aside> - Defines content aside from the content (like a sidebar)
|
<article> - Defines an independent self-contained article
|
||||||
<footer> - Defines a footer for a document or a section
|
<aside> - Defines content aside from the content (like a sidebar)
|
||||||
<details> - Defines additional details
|
<footer> - Defines a footer for a document or a section
|
||||||
<summary> - Defines a heading for the <details> element
|
<details> - Defines additional details
|
||||||
`
|
<summary> - Defines a heading for the <details> element
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
|||||||
@ -22,12 +22,13 @@ localeTitle: قوائم
|
|||||||
|
|
||||||
تتم كتابة قائمة مرتبة ك
|
تتم كتابة قائمة مرتبة ك
|
||||||
|
|
||||||
`<ol>
|
```HTML
|
||||||
<li>January</li>
|
<ol>
|
||||||
<li>February</li>
|
<li>January</li>
|
||||||
<li>March</li>
|
<li>February</li>
|
||||||
</ol>
|
<li>March</li>
|
||||||
`
|
</ol>
|
||||||
|
```
|
||||||
|
|
||||||
ويتم عرضها على النحو التالي:
|
ويتم عرضها على النحو التالي:
|
||||||
|
|
||||||
@ -37,12 +38,13 @@ localeTitle: قوائم
|
|||||||
|
|
||||||
قائمة غير مرتبة مكتوبة باسم
|
قائمة غير مرتبة مكتوبة باسم
|
||||||
|
|
||||||
`<ul>
|
```HTML
|
||||||
<li>Macintosh</li>
|
<ul>
|
||||||
<li>Fuji</li>
|
<li>Macintosh</li>
|
||||||
<li>Gala</li>
|
<li>Fuji</li>
|
||||||
</ul>
|
<li>Gala</li>
|
||||||
`
|
</ul>
|
||||||
|
```
|
||||||
|
|
||||||
ويتم عرضها على النحو التالي:
|
ويتم عرضها على النحو التالي:
|
||||||
|
|
||||||
@ -56,20 +58,22 @@ localeTitle: قوائم
|
|||||||
|
|
||||||
إزالة الرموز النقطية:
|
إزالة الرموز النقطية:
|
||||||
|
|
||||||
`ul {
|
```CSS
|
||||||
list-style: none;
|
ul {
|
||||||
}
|
list-style: none;
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
قم بإدخال الخاص بك:
|
قم بإدخال الخاص بك:
|
||||||
|
|
||||||
`ul li::before {
|
```CSS
|
||||||
content: "\2022";
|
ul li::before {
|
||||||
color: orange;
|
content: "\2022";
|
||||||
display: inline-block;
|
color: orange;
|
||||||
width: 1em;
|
display: inline-block;
|
||||||
}
|
width: 1em;
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
يضيف نمط المحتوى نقطية جديدة بينما يعمل نمط العرض والعرض على إنشاء مسافة بين الرمز النقطي والكلمة. يمكن تطبيق أنماط الخطوط العادية هنا إذا كنت ترغب في جعل الرمز النقطي أكبر أو أكثر جرأة.
|
يضيف نمط المحتوى نقطية جديدة بينما يعمل نمط العرض والعرض على إنشاء مسافة بين الرمز النقطي والكلمة. يمكن تطبيق أنماط الخطوط العادية هنا إذا كنت ترغب في جعل الرمز النقطي أكبر أو أكثر جرأة.
|
||||||
|
|
||||||
@ -79,13 +83,14 @@ localeTitle: قوائم
|
|||||||
|
|
||||||
في ما يلي مثال لقائمة الوصف:
|
في ما يلي مثال لقائمة الوصف:
|
||||||
|
|
||||||
`<dl>
|
```HTML
|
||||||
<dt>Programming</dt>
|
<dl>
|
||||||
<dd>The process of writing computer programs.</dd>
|
<dt>Programming</dt>
|
||||||
<dt>freeCodeCamp</dt>
|
<dd>The process of writing computer programs.</dd>
|
||||||
<dd>An awesome non-profit organization teaching people how to code.</dd>
|
<dt>freeCodeCamp</dt>
|
||||||
</dl>
|
<dd>An awesome non-profit organization teaching people how to code.</dd>
|
||||||
`
|
</dl>
|
||||||
|
```
|
||||||
|
|
||||||
والتي من شأنها أن تبدو وكأنها:
|
والتي من شأنها أن تبدو وكأنها:
|
||||||
|
|
||||||
|
|||||||
@ -8,9 +8,9 @@ localeTitle: روابط Mailto
|
|||||||
|
|
||||||
### بناء الجملة الأساسي مع المستلم هو:
|
### بناء الجملة الأساسي مع المستلم هو:
|
||||||
|
|
||||||
`
|
```html
|
||||||
<a href="mailto:friend@something.com">Some text</a>
|
<a href="mailto:friend@something.com">Some text</a>
|
||||||
`
|
```
|
||||||
|
|
||||||
### مزيد من التخصيص!
|
### مزيد من التخصيص!
|
||||||
|
|
||||||
@ -32,9 +32,9 @@ Body: أكون مطورًا
|
|||||||
|
|
||||||
رابط html الآن:
|
رابط html الآن:
|
||||||
|
|
||||||
`
|
```html
|
||||||
<a href="mailto:?subject=Great%20news&body=I%20am%20becoming%20a%20developer">Send mail!</a>
|
<a href="mailto:?subject=Great%20news&body=I%20am%20becoming%20a%20developer">Send mail!</a>
|
||||||
`
|
```
|
||||||
|
|
||||||
هنا ، تركنا mailto فارغة (mailto :؟). سيؤدي ذلك إلى فتح عميل البريد الإلكتروني للمستخدم وسيضيف المستخدم عنوان المستلم نفسه.
|
هنا ، تركنا mailto فارغة (mailto :؟). سيؤدي ذلك إلى فتح عميل البريد الإلكتروني للمستخدم وسيضيف المستخدم عنوان المستلم نفسه.
|
||||||
|
|
||||||
@ -44,9 +44,9 @@ Body: أكون مطورًا
|
|||||||
|
|
||||||
يجب أن تسبق المعلمات الإضافية `&` .
|
يجب أن تسبق المعلمات الإضافية `&` .
|
||||||
|
|
||||||
`
|
```html
|
||||||
<a href="mailto:firstfriend@something.com?subject=Great%20news&cc=secondfriend@something.com,thirdfriend@something.com&bcc=fourthfriend@something.com">Send mail!</a>
|
<a href="mailto:firstfriend@something.com?subject=Great%20news&cc=secondfriend@something.com,thirdfriend@something.com&bcc=fourthfriend@something.com">Send mail!</a>
|
||||||
`
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
|||||||
@ -6,23 +6,23 @@ localeTitle: علامات اختيارية
|
|||||||
|
|
||||||
في HTML5 ، يمكنك تجاهل بعض علامات الفتح والإغلاق تحت شروط معينة. على سبيل المثال ، كود HTML التالي ...
|
في HTML5 ، يمكنك تجاهل بعض علامات الفتح والإغلاق تحت شروط معينة. على سبيل المثال ، كود HTML التالي ...
|
||||||
|
|
||||||
`
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<p>Hello World.
|
<p>Hello World.
|
||||||
`
|
```
|
||||||
|
|
||||||
سوف تقيم تلقائيا إلى ...
|
سوف تقيم تلقائيا إلى ...
|
||||||
|
|
||||||
`
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head></head>
|
<head></head>
|
||||||
<body>
|
<body>
|
||||||
<p>Hello world.
|
<p>Hello world.
|
||||||
</p>
|
</p>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`
|
```
|
||||||
|
|
||||||
مواصفات العلامة الاختيارية لعلامات HTML5 الأكثر شيوعًا هي كالتالي:
|
مواصفات العلامة الاختيارية لعلامات HTML5 الأكثر شيوعًا هي كالتالي:
|
||||||
|
|
||||||
|
|||||||
@ -6,16 +6,17 @@ localeTitle: هيكل الصفحة
|
|||||||
|
|
||||||
لإنشاء صفحاتك في `HTML` ، تحتاج إلى معرفة كيفية تنظيم صفحة `HTML` ، حيث أن هيكلية الصفحة تتبع الترتيب التالي:
|
لإنشاء صفحاتك في `HTML` ، تحتاج إلى معرفة كيفية تنظيم صفحة `HTML` ، حيث أن هيكلية الصفحة تتبع الترتيب التالي:
|
||||||
|
|
||||||
`<!DOCTYPE html>
|
```HTML
|
||||||
<html>
|
<!DOCTYPE html>
|
||||||
<head>
|
<html>
|
||||||
<title>Title of the Page</title>
|
<head>
|
||||||
</head>
|
<title>Title of the Page</title>
|
||||||
<body>
|
</head>
|
||||||
<!-- Content -->
|
<body>
|
||||||
</body>
|
<!-- Content -->
|
||||||
</html>
|
</body>
|
||||||
`
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
1 - يجب أن تكون العبارة `<!DOCTYPE html>` دائما أول من يظهر على صفحة `HTML` وتخبر المتصفح بنسخة اللغة المستخدمة. في هذه الحالة ، نعمل باستخدام `HTML5` .
|
1 - يجب أن تكون العبارة `<!DOCTYPE html>` دائما أول من يظهر على صفحة `HTML` وتخبر المتصفح بنسخة اللغة المستخدمة. في هذه الحالة ، نعمل باستخدام `HTML5` .
|
||||||
|
|
||||||
|
|||||||
@ -17,20 +17,22 @@ localeTitle: تصميم الويب سريع الاستجابة
|
|||||||
|
|
||||||
تخبر استعلامات الوسائط متصفح الويب بتجاهل أو استبدال خصائص صفحة الويب استنادًا إلى سمات معينة مثل عرض الشاشة أو ما إذا كان المستخدم يطبع.
|
تخبر استعلامات الوسائط متصفح الويب بتجاهل أو استبدال خصائص صفحة الويب استنادًا إلى سمات معينة مثل عرض الشاشة أو ما إذا كان المستخدم يطبع.
|
||||||
|
|
||||||
`@media (query) {
|
```
|
||||||
/* The browser will use the CSS rules within the curly braces when the query is true */
|
@media (query) {
|
||||||
}
|
/* The browser will use the CSS rules within the curly braces when the query is true */
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
يقوم المثال التالي بتعيين `padding-left` و `padding-right` داخل الطبقة الداخلية `more-padding` عندما يكون عرض الشاشة أقل من أو يساوي 768 بكسل.
|
يقوم المثال التالي بتعيين `padding-left` و `padding-right` داخل الطبقة الداخلية `more-padding` عندما يكون عرض الشاشة أقل من أو يساوي 768 بكسل.
|
||||||
|
|
||||||
`@media screen and (max-width: 768px) {
|
```
|
||||||
.more-padding {
|
@media screen and (max-width: 768px) {
|
||||||
padding-left: 10px;
|
.more-padding {
|
||||||
padding-right: 10px;
|
padding-left: 10px;
|
||||||
}
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### 2\. أطر CSS
|
### 2\. أطر CSS
|
||||||
|
|
||||||
@ -38,9 +40,9 @@ localeTitle: تصميم الويب سريع الاستجابة
|
|||||||
|
|
||||||
في هذا المثال ، يحدد `col-md-9` و `col-sm-6` عرض علامة `<div>` استنادًا إلى ما إذا كانت الشاشة صغيرة أم متوسطة.
|
في هذا المثال ، يحدد `col-md-9` و `col-sm-6` عرض علامة `<div>` استنادًا إلى ما إذا كانت الشاشة صغيرة أم متوسطة.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<div class="col-12 col-md-6"></div>
|
<div class="col-12 col-md-6"></div>
|
||||||
`
|
```
|
||||||
|
|
||||||
يقسم إطار Bootstrap الصف إلى اثني عشر عمودًا. في المثال أعلاه ، سوف ينتشر `<div>` عبر تسعة أو ستة منهم. يعد نظام الشبكة ، الموضح أدناه ، أمرًا أساسيًا في كيفية تسهيل Bootstrap للتصميم سريع الاستجابة.
|
يقسم إطار Bootstrap الصف إلى اثني عشر عمودًا. في المثال أعلاه ، سوف ينتشر `<div>` عبر تسعة أو ستة منهم. يعد نظام الشبكة ، الموضح أدناه ، أمرًا أساسيًا في كيفية تسهيل Bootstrap للتصميم سريع الاستجابة.
|
||||||
|
|
||||||
|
|||||||
@ -10,46 +10,46 @@ localeTitle: توسيط صورة باستخدام Text Align Center
|
|||||||
|
|
||||||
### مثال
|
### مثال
|
||||||
|
|
||||||
`
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Center an Image using text align center</title>
|
<title>Center an Image using text align center</title>
|
||||||
<style>
|
<style>
|
||||||
.img-container {
|
.img-container {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="img-container"> <!-- Block parent element -->
|
<div class="img-container"> <!-- Block parent element -->
|
||||||
<img src="user.png" alt="John Doe">
|
<img src="user.png" alt="John Doe">
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`
|
```
|
||||||
|
|
||||||
**ملاحظة:** يجب أن يكون العنصر الرئيسي عنصر كتلة. إذا لم يكن عنصر كتلة ، يجب عليك إضافة `display: block;` خاصية CSS مع خاصية `text-align` .
|
**ملاحظة:** يجب أن يكون العنصر الرئيسي عنصر كتلة. إذا لم يكن عنصر كتلة ، يجب عليك إضافة `display: block;` خاصية CSS مع خاصية `text-align` .
|
||||||
|
|
||||||
`
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Center an Image using text align center</title>
|
<title>Center an Image using text align center</title>
|
||||||
<style>
|
<style>
|
||||||
.img-container {
|
.img-container {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<span class="img-container"> <!-- Inline parent element -->
|
<span class="img-container"> <!-- Inline parent element -->
|
||||||
<img src="user.png" alt="">
|
<img src="user.png" alt="">
|
||||||
</span>
|
</span>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`
|
```
|
||||||
|
|
||||||
**العرض التوضيحي:** [Codepen](https://codepen.io/aravindio/pen/PJMXbp)
|
**العرض التوضيحي:** [Codepen](https://codepen.io/aravindio/pen/PJMXbp)
|
||||||
|
|
||||||
|
|||||||
@ -18,11 +18,11 @@ localeTitle: تضمين مقاطع الفيديو على Youtube
|
|||||||
* عنصر `<frame>` (لا تنسى إغلاقه!)
|
* عنصر `<frame>` (لا تنسى إغلاقه!)
|
||||||
* سمات `width` `height`
|
* سمات `width` `height`
|
||||||
|
|
||||||
`
|
```html
|
||||||
<iframe width="420" height="315"
|
<iframe width="420" height="315"
|
||||||
src="https://www.youtube.com/watch?v=v8kFT4I31es">
|
src="https://www.youtube.com/watch?v=v8kFT4I31es">
|
||||||
</iframe>
|
</iframe>
|
||||||
`
|
```
|
||||||
|
|
||||||
يتم إدراج القيم المدرجة ، ولكن لا تتردد في تغييرها بالطريقة التي تريدها.
|
يتم إدراج القيم المدرجة ، ولكن لا تتردد في تغييرها بالطريقة التي تريدها.
|
||||||
|
|
||||||
@ -30,8 +30,8 @@ localeTitle: تضمين مقاطع الفيديو على Youtube
|
|||||||
|
|
||||||
ماذا يجب أن نفعل إذا كنا نرغب في جعل هذا اللاعب يبدأ اللعب تلقائيًا؟ ما عليك سوى الإضافة إلى قيمة الرابط `?autoplay=1` . ولكن كن حذرًا ، فقد يكون الأمر مزعجًا بالنسبة إلى الكثير من الأشخاص الذين يزورون صفحتك على الويب.
|
ماذا يجب أن نفعل إذا كنا نرغب في جعل هذا اللاعب يبدأ اللعب تلقائيًا؟ ما عليك سوى الإضافة إلى قيمة الرابط `?autoplay=1` . ولكن كن حذرًا ، فقد يكون الأمر مزعجًا بالنسبة إلى الكثير من الأشخاص الذين يزورون صفحتك على الويب.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<iframe width="420" height="315"
|
<iframe width="420" height="315"
|
||||||
src="https://www.youtube.com/watch?v=v8kFT4I31es?autoplay=1">
|
src="https://www.youtube.com/watch?v=v8kFT4I31es?autoplay=1">
|
||||||
</iframe>
|
</iframe>
|
||||||
`
|
```
|
||||||
@ -8,27 +8,27 @@ localeTitle: كيفية إنشاء زر HTML التي تعمل مثل الارت
|
|||||||
|
|
||||||
إحدى الطرق هي ببساطة لف علامة `<button>` في علامة `<a>` :
|
إحدى الطرق هي ببساطة لف علامة `<button>` في علامة `<a>` :
|
||||||
|
|
||||||
`
|
```html
|
||||||
<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a>
|
<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a>
|
||||||
`
|
```
|
||||||
|
|
||||||
يؤدي هذا إلى تحويل الزر بالكامل إلى رابط.
|
يؤدي هذا إلى تحويل الزر بالكامل إلى رابط.
|
||||||
|
|
||||||
الخيار الثاني هو إنشاء الرابط الخاص بك كما تفعل عادةً مع العلامة `<a>` ثم إعداده عبر CSS:
|
الخيار الثاني هو إنشاء الرابط الخاص بك كما تفعل عادةً مع العلامة `<a>` ثم إعداده عبر CSS:
|
||||||
|
|
||||||
`
|
```html
|
||||||
<a href='https://www.freecodecamp.org/'>Link To freeCodeCamp</a>
|
<a href='https://www.freecodecamp.org/'>Link To freeCodeCamp</a>
|
||||||
`
|
```
|
||||||
|
|
||||||
بمجرد إنشاء الرابط ، يمكنك استخدام CSS لجعله يبدو وكأنه زر. على سبيل المثال ، يمكنك إضافة حد ولون خلفية وبعض الأنماط عندما يحوم المستخدم في الرابط ...
|
بمجرد إنشاء الرابط ، يمكنك استخدام CSS لجعله يبدو وكأنه زر. على سبيل المثال ، يمكنك إضافة حد ولون خلفية وبعض الأنماط عندما يحوم المستخدم في الرابط ...
|
||||||
|
|
||||||
هناك طريقة أخرى لإضافة زر وهي التفاف `input` داخل علامات `form` . حدد عنوان URL الهدف المطلوب في سمة إجراء النموذج.
|
هناك طريقة أخرى لإضافة زر وهي التفاف `input` داخل علامات `form` . حدد عنوان URL الهدف المطلوب في سمة إجراء النموذج.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<form action="http://google.com">
|
<form action="http://google.com">
|
||||||
<input type="submit" value="Go to Google" />
|
<input type="submit" value="Go to Google" />
|
||||||
</form>
|
</form>
|
||||||
`
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
|||||||
@ -8,22 +8,22 @@ localeTitle: كيفية توسيط علامة Div في علامة Div أخرى
|
|||||||
|
|
||||||
لنبدأ بإنشاء علامتين div مع فئتي "parent" و "child". سيكون الوالد الحاوية لدينا ، وسيكون الطفل هو `<div>` الذي نركز عليه أفقيًا.
|
لنبدأ بإنشاء علامتين div مع فئتي "parent" و "child". سيكون الوالد الحاوية لدينا ، وسيكون الطفل هو `<div>` الذي نركز عليه أفقيًا.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>How to Horizontally Center a Div Tag in Another Div Tag</title>
|
<title>How to Horizontally Center a Div Tag in Another Div Tag</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="parent">
|
<div class="parent">
|
||||||
<div class="child">
|
<div class="child">
|
||||||
<p>This is the center.</p>
|
<p>This is the center.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`
|
```
|
||||||
|
|
||||||
هناك عدة طرق يمكنك من خلالها معالجة هذا الأمر ، ولكن دعنا نركز على هذا البرنامج التعليمي على اثنين. سنقوم في `flexbox` باستخدام `<div>` باستخدام `margin` وفي الثانية سنستخدم `flexbox` .
|
هناك عدة طرق يمكنك من خلالها معالجة هذا الأمر ، ولكن دعنا نركز على هذا البرنامج التعليمي على اثنين. سنقوم في `flexbox` باستخدام `<div>` باستخدام `margin` وفي الثانية سنستخدم `flexbox` .
|
||||||
|
|
||||||
@ -31,16 +31,17 @@ localeTitle: كيفية توسيط علامة Div في علامة Div أخرى
|
|||||||
|
|
||||||
إذا قمت بتحديد `width` على div div ، يمكنك استخدام `margin: auto` . سيؤدي هذا إلى توسيط طفلك `<div>` عن طريق توزيع هوامش اليسار واليمين بالتساوي.
|
إذا قمت بتحديد `width` على div div ، يمكنك استخدام `margin: auto` . سيؤدي هذا إلى توسيط طفلك `<div>` عن طريق توزيع هوامش اليسار واليمين بالتساوي.
|
||||||
|
|
||||||
`.parent {
|
```css
|
||||||
border: 2px solid red;
|
.parent {
|
||||||
}
|
border: 2px solid red;
|
||||||
|
}
|
||||||
.centered-child {
|
|
||||||
width: 50%;
|
.centered-child {
|
||||||
margin: auto;
|
width: 50%;
|
||||||
border: 1px solid black;
|
margin: auto;
|
||||||
}
|
border: 1px solid black;
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### مثال على توسيط علامة Div مع Flexbox
|
### مثال على توسيط علامة Div مع Flexbox
|
||||||
|
|
||||||
@ -48,16 +49,17 @@ localeTitle: كيفية توسيط علامة Div في علامة Div أخرى
|
|||||||
|
|
||||||
لتوسيط طفل `<div>` باستخدام flexbox ، يلزمك استخدام `display: flex` مع `justify-content: center` الضبط `justify-content: center` على الأصل `<div>` .
|
لتوسيط طفل `<div>` باستخدام flexbox ، يلزمك استخدام `display: flex` مع `justify-content: center` الضبط `justify-content: center` على الأصل `<div>` .
|
||||||
|
|
||||||
`.parent {
|
```css
|
||||||
display: flex;
|
.parent {
|
||||||
justify-content: center;
|
display: flex;
|
||||||
border: 2px solid red;
|
justify-content: center;
|
||||||
}
|
border: 2px solid red;
|
||||||
|
}
|
||||||
.centered-child {
|
|
||||||
border: 1px solid black;
|
.centered-child {
|
||||||
}
|
border: 1px solid black;
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
|||||||
@ -16,15 +16,15 @@ localeTitle: كيفية استخدام الروابط
|
|||||||
|
|
||||||
في HTML ، يتم تعريف الارتباطات بالعلامة:
|
في HTML ، يتم تعريف الارتباطات بالعلامة:
|
||||||
|
|
||||||
`
|
```html
|
||||||
<a href="url">link text</a>
|
<a href="url">link text</a>
|
||||||
`
|
```
|
||||||
|
|
||||||
مثال
|
مثال
|
||||||
|
|
||||||
`
|
```html
|
||||||
<a href="https://www.freecodecamp.org/">Visit our site for tutorials</a>
|
<a href="https://www.freecodecamp.org/">Visit our site for tutorials</a>
|
||||||
`
|
```
|
||||||
|
|
||||||
تحدد السمة href عنوان الوجهة (https://www.freecodecamp.org) للرابط.
|
تحدد السمة href عنوان الوجهة (https://www.freecodecamp.org) للرابط.
|
||||||
|
|
||||||
|
|||||||
@ -12,13 +12,13 @@ localeTitle: كيفية استخدام القوائم
|
|||||||
|
|
||||||
##### الشفرة
|
##### الشفرة
|
||||||
|
|
||||||
`
|
```html
|
||||||
<ol>
|
<ol>
|
||||||
<li>Mix ingredients</li>
|
<li>Mix ingredients</li>
|
||||||
<li>Bake in oven for an hour</li>
|
<li>Bake in oven for an hour</li>
|
||||||
<li>Allow to stand for ten minutes</li>
|
<li>Allow to stand for ten minutes</li>
|
||||||
</ol>
|
</ol>
|
||||||
`
|
```
|
||||||
|
|
||||||
##### مثال
|
##### مثال
|
||||||
|
|
||||||
@ -32,13 +32,13 @@ localeTitle: كيفية استخدام القوائم
|
|||||||
|
|
||||||
##### الشفرة
|
##### الشفرة
|
||||||
|
|
||||||
`
|
```html
|
||||||
<ul>
|
<ul>
|
||||||
<li>Chocolate Cake</li>
|
<li>Chocolate Cake</li>
|
||||||
<li>Black Forest Cake</li>
|
<li>Black Forest Cake</li>
|
||||||
<li>Pineapple Cake</li>
|
<li>Pineapple Cake</li>
|
||||||
</ul>
|
</ul>
|
||||||
`
|
```
|
||||||
|
|
||||||
#### مثال
|
#### مثال
|
||||||
|
|
||||||
@ -52,14 +52,14 @@ localeTitle: كيفية استخدام القوائم
|
|||||||
|
|
||||||
##### الشفرة
|
##### الشفرة
|
||||||
|
|
||||||
`
|
```html
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Bread</dt>
|
<dt>Bread</dt>
|
||||||
<dd>A baked food made of flour.</dd>
|
<dd>A baked food made of flour.</dd>
|
||||||
<dt>Coffee</dt>
|
<dt>Coffee</dt>
|
||||||
<dd>A drink made from roasted coffee beans.</dd>
|
<dd>A drink made from roasted coffee beans.</dd>
|
||||||
</dl>
|
</dl>
|
||||||
`
|
```
|
||||||
|
|
||||||
##### انتاج |
|
##### انتاج |
|
||||||
|
|
||||||
|
|||||||
@ -12,33 +12,33 @@ localeTitle: الصور في HTML
|
|||||||
|
|
||||||
## مثال
|
## مثال
|
||||||
|
|
||||||
`
|
```html
|
||||||
<img src="URL of the Image" alt="Descriptive Title" />
|
<img src="URL of the Image" alt="Descriptive Title" />
|
||||||
`
|
```
|
||||||
|
|
||||||
### لتحديد ارتفاع وعرض صورة ، يمكنك استخدام سمة الارتفاع والعرض:
|
### لتحديد ارتفاع وعرض صورة ، يمكنك استخدام سمة الارتفاع والعرض:
|
||||||
|
|
||||||
`
|
```html
|
||||||
<img src="URL of the Image" alt="Descriptive Title" height="100" width="150"/>
|
<img src="URL of the Image" alt="Descriptive Title" height="100" width="150"/>
|
||||||
`
|
```
|
||||||
|
|
||||||
### يمكنك أيضًا تحديد سمك الحدود (0 يعني عدم وجود حد):
|
### يمكنك أيضًا تحديد سمك الحدود (0 يعني عدم وجود حد):
|
||||||
|
|
||||||
`
|
```html
|
||||||
<img src="URL of the Image" alt="Descriptive Title" border="2"/>
|
<img src="URL of the Image" alt="Descriptive Title" border="2"/>
|
||||||
`
|
```
|
||||||
|
|
||||||
### محاذاة صورة:
|
### محاذاة صورة:
|
||||||
|
|
||||||
`
|
```html
|
||||||
<img src="URL of the Image" alt="Descriptive Title" align="left"/>
|
<img src="URL of the Image" alt="Descriptive Title" align="left"/>
|
||||||
`
|
```
|
||||||
|
|
||||||
### يمكنك أيضًا استخدام الأنماط في سمة نمط:
|
### يمكنك أيضًا استخدام الأنماط في سمة نمط:
|
||||||
|
|
||||||
`
|
```html
|
||||||
<img src="URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/>
|
<img src="URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/>
|
||||||
`
|
```
|
||||||
|
|
||||||
#### معلومات اكثر
|
#### معلومات اكثر
|
||||||
|
|
||||||
|
|||||||
@ -10,8 +10,9 @@ localeTitle: تنسيق النص في HTML
|
|||||||
|
|
||||||
يمكنك بسهولة تغيير معنى النص الخاص بك باستخدام عنصر `<b>` HTML. يجعل الكلمات جريئة ، والتي تعمل على إفراد جزء التسلسل. فمثلا:
|
يمكنك بسهولة تغيير معنى النص الخاص بك باستخدام عنصر `<b>` HTML. يجعل الكلمات جريئة ، والتي تعمل على إفراد جزء التسلسل. فمثلا:
|
||||||
|
|
||||||
`The most important part of your code is <b>the end</b>, because if you <b>don't close</b> the element, it will affect to <b>everything</b>!
|
```
|
||||||
`
|
The most important part of your code is <b>the end</b>, because if you <b>don't close</b> the element, it will affect to <b>everything</b>!
|
||||||
|
```
|
||||||
|
|
||||||
يمكنك أيضًا استخدام `<strong>` أيضًا - إنها تضيف أيضًا أهمية "قوية" دلالية. لا يتعرف متصفحك على فرق بين هذين العنصرين ، ولكنه موجود.
|
يمكنك أيضًا استخدام `<strong>` أيضًا - إنها تضيف أيضًا أهمية "قوية" دلالية. لا يتعرف متصفحك على فرق بين هذين العنصرين ، ولكنه موجود.
|
||||||
|
|
||||||
@ -19,8 +20,9 @@ localeTitle: تنسيق النص في HTML
|
|||||||
|
|
||||||
عادة ما تستخدم عند اقتباس شيء ما أو وضع ترجمة للكلمة في الكثير من المقالات. يجعلها مائلة - فقط تخيل ركلها قليلاً في الأحرف الصحيحة. فمثلا:
|
عادة ما تستخدم عند اقتباس شيء ما أو وضع ترجمة للكلمة في الكثير من المقالات. يجعلها مائلة - فقط تخيل ركلها قليلاً في الأحرف الصحيحة. فمثلا:
|
||||||
|
|
||||||
`Theatre - <i>teatos</i>, <i>teates</i> and <i>teatron</i>.
|
```
|
||||||
`
|
Theatre - <i>teatos</i>, <i>teates</i> and <i>teatron</i>.
|
||||||
|
```
|
||||||
|
|
||||||
يمكنك أيضًا استخدام `<em>` أيضًا - حيث تضيف أيضًا أهمية دلالية "مؤكدة". لا يتعرف متصفحك على فرق بين هذين العنصرين ، ولكنه موجود.
|
يمكنك أيضًا استخدام `<em>` أيضًا - حيث تضيف أيضًا أهمية دلالية "مؤكدة". لا يتعرف متصفحك على فرق بين هذين العنصرين ، ولكنه موجود.
|
||||||
|
|
||||||
|
|||||||
@ -24,9 +24,10 @@ localeTitle: مرجع ترميز Url
|
|||||||
|
|
||||||
#### مثال:
|
#### مثال:
|
||||||
|
|
||||||
`encodeURI(Free Code Camp);
|
```js
|
||||||
// Free%20Code%20Camp
|
encodeURI(Free Code Camp);
|
||||||
`
|
// Free%20Code%20Camp
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
|||||||
@ -25,11 +25,11 @@ UTF 8 هو نظام ترميز يستخدم لترجمة الأحرف التي
|
|||||||
|
|
||||||
حدد علامة وصفية بها مجموعة أحرف من UTF 8 في علامة رأسك.
|
حدد علامة وصفية بها مجموعة أحرف من UTF 8 في علامة رأسك.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
</head>
|
</head>
|
||||||
`
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
|
|
||||||
|
|||||||
@ -10,22 +10,25 @@ localeTitle: مرحبا العالم في الأيونية
|
|||||||
|
|
||||||
#### 1\. تثبيت `ionic` ، `npm` ، `angular` و `cordova` إذا لم يتم تثبيت. \[انظر المقدمة [الأولى](https://guide.freecodecamp.org/ionic) لمزيد من المعلومات\]
|
#### 1\. تثبيت `ionic` ، `npm` ، `angular` و `cordova` إذا لم يتم تثبيت. \[انظر المقدمة [الأولى](https://guide.freecodecamp.org/ionic) لمزيد من المعلومات\]
|
||||||
|
|
||||||
`sudo apt-get install nodejs
|
```shell
|
||||||
sudo apt-get install npm
|
sudo apt-get install nodejs
|
||||||
sudo npm install -g ionic cordova
|
sudo apt-get install npm
|
||||||
`
|
sudo npm install -g ionic cordova
|
||||||
|
```
|
||||||
|
|
||||||
#### 2\. قم بإنشاء مجلد باسم `helloworld`
|
#### 2\. قم بإنشاء مجلد باسم `helloworld`
|
||||||
|
|
||||||
`ionic start helloworld blank
|
```shell
|
||||||
`
|
ionic start helloworld blank
|
||||||
|
```
|
||||||
|
|
||||||
ملحوظة: حيث أن هذا هو مشروع صغير أدخل لا أو N عند المطالبة أثناء تنفيذ البرنامج.
|
ملحوظة: حيث أن هذا هو مشروع صغير أدخل لا أو N عند المطالبة أثناء تنفيذ البرنامج.
|
||||||
|
|
||||||
#### 3\. قم بتغيير الدليل إلى `helloworld` \[هذا هو دليلك الأيوني\]
|
#### 3\. قم بتغيير الدليل إلى `helloworld` \[هذا هو دليلك الأيوني\]
|
||||||
|
|
||||||
`cd helloworld
|
```shell
|
||||||
`
|
cd helloworld
|
||||||
|
```
|
||||||
|
|
||||||
#### 4\. افتح المجلد في محرر النص الخاص بك. سترى مختلف الملفات والمجلدات الفرعية.
|
#### 4\. افتح المجلد في محرر النص الخاص بك. سترى مختلف الملفات والمجلدات الفرعية.
|
||||||
|
|
||||||
|
|||||||
@ -18,8 +18,9 @@ localeTitle: دروس مجردة في جاوة
|
|||||||
|
|
||||||
الطبقة العامة للدراجات النارية يمتد المركبة { ... }
|
الطبقة العامة للدراجات النارية يمتد المركبة { ... }
|
||||||
|
|
||||||
`You cannot create an object of Vehicle class anywhere in your program. You can however, extend the abstract vehicle class and create objects of the child classes;
|
```
|
||||||
`
|
You cannot create an object of Vehicle class anywhere in your program. You can however, extend the abstract vehicle class and create objects of the child classes;
|
||||||
|
```
|
||||||
|
|
||||||
جافا مركبة جديدة Véhicle = سيارة جديدة () ؛ // غير صالحة سيارة مركبة = سيارة جديدة () ؛ // صالح مركبة mBike = دراجة نارية جديدة () ؛ // صالح
|
جافا مركبة جديدة Véhicle = سيارة جديدة () ؛ // غير صالحة سيارة مركبة = سيارة جديدة () ؛ // صالح مركبة mBike = دراجة نارية جديدة () ؛ // صالح
|
||||||
|
|
||||||
|
|||||||
@ -34,17 +34,19 @@ localeTitle: معدّلات الوصول
|
|||||||
|
|
||||||
على سبيل المثال ، للإعلان عن فئة عامة ، كل ما تحتاج إليه هو:
|
على سبيل المثال ، للإعلان عن فئة عامة ، كل ما تحتاج إليه هو:
|
||||||
|
|
||||||
`public class Animal{
|
```java
|
||||||
|
public class Animal{
|
||||||
}
|
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
على هذا النحو ، يمكن الوصول إلى فئة الحيوان من أي فئة أخرى.
|
على هذا النحو ، يمكن الوصول إلى فئة الحيوان من أي فئة أخرى.
|
||||||
|
|
||||||
`public int age;
|
```java
|
||||||
public int getAge(){
|
public int age;
|
||||||
}
|
public int getAge(){
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
أعلاه هي طرق لتحديد متغير وطريقة عامة.
|
أعلاه هي طرق لتحديد متغير وطريقة عامة.
|
||||||
|
|
||||||
@ -54,18 +56,20 @@ localeTitle: معدّلات الوصول
|
|||||||
|
|
||||||
على سبيل المثال ، لاستخدام معدِّل الوصول الافتراضي لفئة ما ، يمكنك استخدامه
|
على سبيل المثال ، لاستخدام معدِّل الوصول الافتراضي لفئة ما ، يمكنك استخدامه
|
||||||
|
|
||||||
`class Bird{
|
```java
|
||||||
}
|
class Bird{
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
هذا يعني أنك تستخدم مودم الوصول الافتراضي. يسمح معدِّل الوصول الافتراضي للمتغير أو الطريقة أو الفئة بالوصول إليها عن طريق الفئات الأخرى داخل الحزمة نفسها. الحزمة عبارة عن مجموعة من الفئات ذات الصلة في دليل الملفات. لمزيد من المعلومات حول الحزم ، راجع قسم الحزم.
|
هذا يعني أنك تستخدم مودم الوصول الافتراضي. يسمح معدِّل الوصول الافتراضي للمتغير أو الطريقة أو الفئة بالوصول إليها عن طريق الفئات الأخرى داخل الحزمة نفسها. الحزمة عبارة عن مجموعة من الفئات ذات الصلة في دليل الملفات. لمزيد من المعلومات حول الحزم ، راجع قسم الحزم.
|
||||||
|
|
||||||
لا يمكن لأي فئة أخرى خارج الحزمة التي تم الإعلان عنها استخدام أي متغير أو طريقة أو فئة معلن عنها لاستخدام معدِّل الوصول الافتراضي.
|
لا يمكن لأي فئة أخرى خارج الحزمة التي تم الإعلان عنها استخدام أي متغير أو طريقة أو فئة معلن عنها لاستخدام معدِّل الوصول الافتراضي.
|
||||||
|
|
||||||
`int age;
|
```java
|
||||||
void setNewAge(){
|
int age;
|
||||||
}
|
void setNewAge(){
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
أعلاه هي بعض الطرق لاستخدام معدل الوصول الافتراضي للمتغير أو الطريقة. لا تنس أن معدِّل الوصول الافتراضي لا يحتوي على كلمة أساسية. يعني غياب معدّلات الوصول الثلاثة الأخرى أنك تستخدم معدّل الوصول الافتراضي.
|
أعلاه هي بعض الطرق لاستخدام معدل الوصول الافتراضي للمتغير أو الطريقة. لا تنس أن معدِّل الوصول الافتراضي لا يحتوي على كلمة أساسية. يعني غياب معدّلات الوصول الثلاثة الأخرى أنك تستخدم معدّل الوصول الافتراضي.
|
||||||
|
|
||||||
@ -81,11 +85,12 @@ localeTitle: معدّلات الوصول
|
|||||||
|
|
||||||
فيما يلي أمثلة لاستخدام معدِّل الوصول المحمي:
|
فيما يلي أمثلة لاستخدام معدِّل الوصول المحمي:
|
||||||
|
|
||||||
`protected int age;
|
```java
|
||||||
protected String getName(){
|
protected int age;
|
||||||
return "My Name is You";
|
protected String getName(){
|
||||||
}
|
return "My Name is You";
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
#### الوصول إلى المعدلات في الفصول الدراسية
|
#### الوصول إلى المعدلات في الفصول الدراسية
|
||||||
|
|
||||||
|
|||||||
@ -8,25 +8,29 @@ localeTitle: المصفوفات
|
|||||||
|
|
||||||
**بناء الجملة:**
|
**بناء الجملة:**
|
||||||
|
|
||||||
`dataType[] arrayName; // preferred way
|
```java
|
||||||
`
|
dataType[] arrayName; // preferred way
|
||||||
|
```
|
||||||
|
|
||||||
هنا ، يصف `java datatype[]` أن جميع المتغيرات التي تم ذكرها بعد ذلك سيتم إنشاء مثيل لها كمصفوفات من نوع البيانات المحدد. لذا ، إذا أردنا إنشاء مزيد من المصفوفات من نوع البيانات المماثل ، فكل ما علينا `java arrayName` هو إضافتها بعد `java arrayName` المحدد (لا تنسى فصلها عبر الفواصل فقط). ويرد مثال أدناه في القسم التالي للرجوع إليه.
|
هنا ، يصف `java datatype[]` أن جميع المتغيرات التي تم ذكرها بعد ذلك سيتم إنشاء مثيل لها كمصفوفات من نوع البيانات المحدد. لذا ، إذا أردنا إنشاء مزيد من المصفوفات من نوع البيانات المماثل ، فكل ما علينا `java arrayName` هو إضافتها بعد `java arrayName` المحدد (لا تنسى فصلها عبر الفواصل فقط). ويرد مثال أدناه في القسم التالي للرجوع إليه.
|
||||||
|
|
||||||
`dataType arrayName[]; // works but not preferred way
|
```java
|
||||||
`
|
dataType arrayName[]; // works but not preferred way
|
||||||
|
```
|
||||||
|
|
||||||
هنا ، يصف `java datatype` فقط أن المتغيرات المذكورة بعد أن تنتمي إلى هذا النوع من البيانات. إلى جانب ذلك ، يصف `java []` بعد اسم المتغير أن المتغير هو صفيف من نوع البيانات المحدد (وليس مجرد قيمة أو كائن من هذا النوع من البيانات). لذا ، إذا أردنا إنشاء مزيد من المصفوفات من نوع البيانات المماثل ، فسوف نضيف أسماء المتغيرات بعد الاسم المحدد بالفعل ، مفصولة بفواصل وكل مرة سيتعين علينا إضافة `java []` بعد اسم المتغير وإلا فسيكون المتغير إنشاء مثيل كمتغير تخزين قيمة عادية (وليس صفيف). لفهم أفضل يتم إعطاء مثال في المقطع التالي.
|
هنا ، يصف `java datatype` فقط أن المتغيرات المذكورة بعد أن تنتمي إلى هذا النوع من البيانات. إلى جانب ذلك ، يصف `java []` بعد اسم المتغير أن المتغير هو صفيف من نوع البيانات المحدد (وليس مجرد قيمة أو كائن من هذا النوع من البيانات). لذا ، إذا أردنا إنشاء مزيد من المصفوفات من نوع البيانات المماثل ، فسوف نضيف أسماء المتغيرات بعد الاسم المحدد بالفعل ، مفصولة بفواصل وكل مرة سيتعين علينا إضافة `java []` بعد اسم المتغير وإلا فسيكون المتغير إنشاء مثيل كمتغير تخزين قيمة عادية (وليس صفيف). لفهم أفضل يتم إعطاء مثال في المقطع التالي.
|
||||||
|
|
||||||
## مقتطفات الشفرة للبناء أعلاه:
|
## مقتطفات الشفرة للبناء أعلاه:
|
||||||
|
|
||||||
`double[] list1, list2; // preferred way
|
```java
|
||||||
`
|
double[] list1, list2; // preferred way
|
||||||
|
```
|
||||||
|
|
||||||
فوق المقتطف التعليمات البرمجية instantiates 2 صفائف من أسماء مزدوجة النوع list1 و list2.
|
فوق المقتطف التعليمات البرمجية instantiates 2 صفائف من أسماء مزدوجة النوع list1 و list2.
|
||||||
|
|
||||||
`double list1[], list2; // works but not preferred way
|
```java
|
||||||
`
|
double list1[], list2; // works but not preferred way
|
||||||
|
```
|
||||||
|
|
||||||
فوق المقتطف الشفوي مصفوفة من نوع البيانات مزدوج المسمى list1 ومتغير بسيط من نوع البيانات مزدوج المسمى list2 (لا تخلط مع قائمة **name2** . أسماء المتغيرات لا علاقة لها بنوع المتغير).
|
فوق المقتطف الشفوي مصفوفة من نوع البيانات مزدوج المسمى list1 ومتغير بسيط من نوع البيانات مزدوج المسمى list2 (لا تخلط مع قائمة **name2** . أسماء المتغيرات لا علاقة لها بنوع المتغير).
|
||||||
|
|
||||||
@ -34,74 +38,86 @@ localeTitle: المصفوفات
|
|||||||
|
|
||||||
## إنشاء المصفوفات:
|
## إنشاء المصفوفات:
|
||||||
|
|
||||||
`dataType[] arrayName = new dataType[arraySize];
|
```java
|
||||||
`
|
dataType[] arrayName = new dataType[arraySize];
|
||||||
|
```
|
||||||
|
|
||||||
## مقتطفات الشفرة للبناء أعلاه:
|
## مقتطفات الشفرة للبناء أعلاه:
|
||||||
|
|
||||||
`double[] List = new double[10];
|
```java
|
||||||
`
|
double[] List = new double[10];
|
||||||
|
```
|
||||||
|
|
||||||
## طريقة أخرى لإنشاء صفيف:
|
## طريقة أخرى لإنشاء صفيف:
|
||||||
|
|
||||||
`dataType[] arrayName = {value_0, value_1, ..., value_k};
|
```java
|
||||||
`
|
dataType[] arrayName = {value_0, value_1, ..., value_k};
|
||||||
|
```
|
||||||
|
|
||||||
## مقتطفات الشفرة للبناء أعلاه:
|
## مقتطفات الشفرة للبناء أعلاه:
|
||||||
|
|
||||||
`double[] list = {1, 2, 3, 4};
|
```java
|
||||||
|
double[] list = {1, 2, 3, 4};
|
||||||
The code above is equivalent to:
|
|
||||||
double[] list = new double[4];
|
The code above is equivalent to:
|
||||||
*IMPORTANT NOTE: Please note the difference between the types of brackets
|
double[] list = new double[4];
|
||||||
that are used to represent arrays in two different ways.
|
*IMPORTANT NOTE: Please note the difference between the types of brackets
|
||||||
`
|
that are used to represent arrays in two different ways.
|
||||||
|
```
|
||||||
|
|
||||||
## الوصول إلى المصفوفات:
|
## الوصول إلى المصفوفات:
|
||||||
|
|
||||||
`arrayName[index]; // gives you the value at the specified index
|
```java
|
||||||
`
|
arrayName[index]; // gives you the value at the specified index
|
||||||
|
```
|
||||||
|
|
||||||
## مقتطفات الشفرة للبناء أعلاه:
|
## مقتطفات الشفرة للبناء أعلاه:
|
||||||
|
|
||||||
`System.out.println(list[1]);
|
```java
|
||||||
`
|
System.out.println(list[1]);
|
||||||
|
```
|
||||||
|
|
||||||
انتاج:
|
انتاج:
|
||||||
|
|
||||||
`2.0
|
```
|
||||||
`
|
2.0
|
||||||
|
```
|
||||||
|
|
||||||
## تعديل المصفوفات:
|
## تعديل المصفوفات:
|
||||||
|
|
||||||
`arrayName[index] = value;
|
```java
|
||||||
`
|
arrayName[index] = value;
|
||||||
|
```
|
||||||
|
|
||||||
ملاحظة: لا يمكنك تغيير حجم أو نوع الصفيف بعد تهيئته. ملاحظة: يمكنك مع ذلك إعادة ضبط المصفوفة مثل ذلك
|
ملاحظة: لا يمكنك تغيير حجم أو نوع الصفيف بعد تهيئته. ملاحظة: يمكنك مع ذلك إعادة ضبط المصفوفة مثل ذلك
|
||||||
|
|
||||||
`arrayName = new dataType[] {value1, value2, value3};
|
```java
|
||||||
`
|
arrayName = new dataType[] {value1, value2, value3};
|
||||||
|
```
|
||||||
|
|
||||||
## حجم المصفوفات:
|
## حجم المصفوفات:
|
||||||
|
|
||||||
من الممكن العثور على عدد العناصر في صفيف باستخدام "سمة الطول". تجدر الإشارة هنا إلى أن `java length` هو **سمة** لكل صفيف أي اسم متغير يخزن طول المتغير. يجب عدم الخلط بينه وبين **طريقة** الصفيف لأن الاسم هو نفس طريقة `java length()` المطابقة لفئات String.
|
من الممكن العثور على عدد العناصر في صفيف باستخدام "سمة الطول". تجدر الإشارة هنا إلى أن `java length` هو **سمة** لكل صفيف أي اسم متغير يخزن طول المتغير. يجب عدم الخلط بينه وبين **طريقة** الصفيف لأن الاسم هو نفس طريقة `java length()` المطابقة لفئات String.
|
||||||
|
|
||||||
`int[] a = {4, 5, 6, 7, 8}; // declare array
|
```java
|
||||||
System.out.println(a.length); //prints 5
|
int[] a = {4, 5, 6, 7, 8}; // declare array
|
||||||
`
|
System.out.println(a.length); //prints 5
|
||||||
|
```
|
||||||
|
|
||||||
## مقتطفات الشفرة للبناء أعلاه:
|
## مقتطفات الشفرة للبناء أعلاه:
|
||||||
|
|
||||||
`list[1] = 3; // now, if you access the array like above, it will output 3 rather than 2
|
```java
|
||||||
`
|
list[1] = 3; // now, if you access the array like above, it will output 3 rather than 2
|
||||||
|
```
|
||||||
|
|
||||||
_مثال على الكود:_
|
_مثال على الكود:_
|
||||||
|
|
||||||
`int[] a = {4, 5, 6, 7, 8}; // declare array
|
```java
|
||||||
for (int i = 0; i < a.length; i++){ // loop goes through each index
|
int[] a = {4, 5, 6, 7, 8}; // declare array
|
||||||
System.out.println(a[i]); // prints the array
|
for (int i = 0; i < a.length; i++){ // loop goes through each index
|
||||||
}
|
System.out.println(a[i]); // prints the array
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
انتاج:
|
انتاج:
|
||||||
|
|
||||||
@ -116,15 +132,16 @@ _مثال على الكود:_
|
|||||||
|
|
||||||
يمكن اعتبار صفائف ثنائية الأبعاد (صفائف ثنائية الأبعاد) كطاولة ذات صفوف وأعمدة. على الرغم من أن هذا التمثيل هو مجرد طريقة لتصور المجموعة لحل المشاكل بشكل أفضل. يتم تخزين القيم فعليًا في عناوين الذاكرة المتسلسلة فقط.
|
يمكن اعتبار صفائف ثنائية الأبعاد (صفائف ثنائية الأبعاد) كطاولة ذات صفوف وأعمدة. على الرغم من أن هذا التمثيل هو مجرد طريقة لتصور المجموعة لحل المشاكل بشكل أفضل. يتم تخزين القيم فعليًا في عناوين الذاكرة المتسلسلة فقط.
|
||||||
|
|
||||||
`int M = 5;
|
```java
|
||||||
int N = 5;
|
int M = 5;
|
||||||
double[][] a = new double [M][N]; //M = rows N = columns
|
int N = 5;
|
||||||
for(int i = 0; i < M; i++) {
|
double[][] a = new double [M][N]; //M = rows N = columns
|
||||||
for (int j = 0; j < N; j++) {
|
for(int i = 0; i < M; i++) {
|
||||||
//Do something here at index
|
for (int j = 0; j < N; j++) {
|
||||||
}
|
//Do something here at index
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
ستنفذ هذه الحلقة M ^ N مرة وستبني هذا:
|
ستنفذ هذه الحلقة M ^ N مرة وستبني هذا:
|
||||||
|
|
||||||
@ -136,9 +153,10 @@ _مثال على الكود:_
|
|||||||
|
|
||||||
وبالمثل ، يمكن أيضًا إنشاء مصفوفة ثلاثية الأبعاد. يمكن تصوره كمكعبوب بدلاً من مستطيل (كما هو مذكور أعلاه) ، مقسم إلى مكعبات أصغر مع كل مكعب يخزن بعض القيمة. يمكن التهيئة الأولية:
|
وبالمثل ، يمكن أيضًا إنشاء مصفوفة ثلاثية الأبعاد. يمكن تصوره كمكعبوب بدلاً من مستطيل (كما هو مذكور أعلاه) ، مقسم إلى مكعبات أصغر مع كل مكعب يخزن بعض القيمة. يمكن التهيئة الأولية:
|
||||||
|
|
||||||
`int a=2, b=3, c=4;
|
```java
|
||||||
int[][][] a=new int[a][b][c];
|
int a=2, b=3, c=4;
|
||||||
`
|
int[][][] a=new int[a][b][c];
|
||||||
|
```
|
||||||
|
|
||||||
بطريقة مماثلة ، يمكن للمرء أن مجموعة من أبعاد مثل ما هو / هي ترغب في ولكن تصور مجموعة من أكثر من 3 أبعاد يصعب تصور بطريقة معينة.
|
بطريقة مماثلة ، يمكن للمرء أن مجموعة من أبعاد مثل ما هو / هي ترغب في ولكن تصور مجموعة من أكثر من 3 أبعاد يصعب تصور بطريقة معينة.
|
||||||
|
|
||||||
@ -146,13 +164,14 @@ _مثال على الكود:_
|
|||||||
|
|
||||||
الصفائف الخشنة هي صفائف متعددة الأبعاد لها عدد محدد من الصفوف ولكن عدد الأعمدة متفاوت. يتم استخدام الصفائف الخشنة للحفاظ على استخدام الذاكرة للمصفوفة. فيما يلي مثال الكود:
|
الصفائف الخشنة هي صفائف متعددة الأبعاد لها عدد محدد من الصفوف ولكن عدد الأعمدة متفاوت. يتم استخدام الصفائف الخشنة للحفاظ على استخدام الذاكرة للمصفوفة. فيما يلي مثال الكود:
|
||||||
|
|
||||||
`int[][] array = new int[5][]; //initialize a 2D array with 5 rows
|
```java
|
||||||
array[0] = new int[1]; //creates 1 column for first row
|
int[][] array = new int[5][]; //initialize a 2D array with 5 rows
|
||||||
array[1] = new int[2]; //creates 2 columns for second row
|
array[0] = new int[1]; //creates 1 column for first row
|
||||||
array[2] = new int[5]; //creates 5 columns for third row
|
array[1] = new int[2]; //creates 2 columns for second row
|
||||||
array[3] = new int[5]; //creates 5 columns for fourth row
|
array[2] = new int[5]; //creates 5 columns for third row
|
||||||
array[4] = new int[5]; //creates 5 columns for fifth row
|
array[3] = new int[5]; //creates 5 columns for fourth row
|
||||||
`
|
array[4] = new int[5]; //creates 5 columns for fifth row
|
||||||
|
```
|
||||||
|
|
||||||
انتاج:
|
انتاج:
|
||||||
|
|
||||||
|
|||||||
@ -6,8 +6,9 @@ localeTitle: وظائف مدمجة
|
|||||||
|
|
||||||
تحتوي Java أيضًا على العديد من الوظائف المضمنة أو المحددة مسبقاً والتي عادة ما يتم تخزينها في حزم java.lang و java.io ، التي يتم استيرادها تلقائيًا في برامج التحرير مثل BlueJ أو يمكن استيرادها باستخدام Syntax-
|
تحتوي Java أيضًا على العديد من الوظائف المضمنة أو المحددة مسبقاً والتي عادة ما يتم تخزينها في حزم java.lang و java.io ، التي يتم استيرادها تلقائيًا في برامج التحرير مثل BlueJ أو يمكن استيرادها باستخدام Syntax-
|
||||||
|
|
||||||
`import java.lang.*;
|
```java
|
||||||
import java.io.*;
|
import java.lang.*;
|
||||||
`
|
import java.io.*;
|
||||||
|
```
|
||||||
|
|
||||||
وتشمل هذه الوظائف التي تجعل مهمة طويلة وصعبة للغاية أن تفعل.
|
وتشمل هذه الوظائف التي تجعل مهمة طويلة وصعبة للغاية أن تفعل.
|
||||||
@ -8,23 +8,25 @@ localeTitle: مجموعات
|
|||||||
|
|
||||||
كما تعمل واجهة المجموعة على توسيع واجهة Iterable ، مما يعني أن كل مجموعة في جافا يجب أن تكون قابلة للتكرار. وهذا بدوره يعني أنه يمكن استخدام حلقة for-each لجلبها في تسلسل.
|
كما تعمل واجهة المجموعة على توسيع واجهة Iterable ، مما يعني أن كل مجموعة في جافا يجب أن تكون قابلة للتكرار. وهذا بدوره يعني أنه يمكن استخدام حلقة for-each لجلبها في تسلسل.
|
||||||
|
|
||||||
`public interface Collection<E> extends Iterable<E>
|
```java
|
||||||
`
|
public interface Collection<E> extends Iterable<E>
|
||||||
|
```
|
||||||
|
|
||||||
بعض الطرق الأكثر شيوعًا التي توفرها هذه الواجهة هي:
|
بعض الطرق الأكثر شيوعًا التي توفرها هذه الواجهة هي:
|
||||||
|
|
||||||
`boolean add(E e) // Adds the specified element to the collection if not present and returns true if this collection changed.
|
```java
|
||||||
|
boolean add(E e) // Adds the specified element to the collection if not present and returns true if this collection changed.
|
||||||
void clear() // Removes all the elements from the collection.
|
|
||||||
|
void clear() // Removes all the elements from the collection.
|
||||||
boolean contains(Object o) // Returns true if the specified element is in the collection else false
|
|
||||||
|
boolean contains(Object o) // Returns true if the specified element is in the collection else false
|
||||||
boolean isEmpty() // Returns true if the collection is empty else false
|
|
||||||
|
boolean isEmpty() // Returns true if the collection is empty else false
|
||||||
boolean remove(Object o) // Removes the specifies element and return true on successful removal else false.
|
|
||||||
|
boolean remove(Object o) // Removes the specifies element and return true on successful removal else false.
|
||||||
int size() // Returns number of items in the collection.
|
|
||||||
`
|
int size() // Returns number of items in the collection.
|
||||||
|
```
|
||||||
|
|
||||||
يجب تنفيذ هذه الطرق وغيرها من الطرق المختلفة من خلال أي واجهة تطبيق جماعية.
|
يجب تنفيذ هذه الطرق وغيرها من الطرق المختلفة من خلال أي واجهة تطبيق جماعية.
|
||||||
|
|
||||||
@ -46,35 +48,39 @@ localeTitle: مجموعات
|
|||||||
|
|
||||||
**قم بإنشاء LinkedList**
|
**قم بإنشاء LinkedList**
|
||||||
|
|
||||||
`LinkedList<Integer> intList = new LinkedList<Integer>(); // Creates a new list of Integer objects.
|
```java
|
||||||
`
|
LinkedList<Integer> intList = new LinkedList<Integer>(); // Creates a new list of Integer objects.
|
||||||
|
```
|
||||||
|
|
||||||
يمكنك أيضًا إنشاء قائمة بأي نوع كائن آخر. على سبيل المثال.
|
يمكنك أيضًا إنشاء قائمة بأي نوع كائن آخر. على سبيل المثال.
|
||||||
|
|
||||||
`LinkedList<String> stringList = new LinkedList();
|
```java
|
||||||
|
LinkedList<String> stringList = new LinkedList();
|
||||||
LinkedList<LinkedList<Integer>> listOfList = new LinkedList();
|
|
||||||
`
|
LinkedList<LinkedList<Integer>> listOfList = new LinkedList();
|
||||||
|
```
|
||||||
|
|
||||||
ملاحظة: تم تحويل جميع المجموعات في Java إلى أنواع عامة منذ 1.5 JDK
|
ملاحظة: تم تحويل جميع المجموعات في Java إلى أنواع عامة منذ 1.5 JDK
|
||||||
|
|
||||||
**إضافة عناصر إلى القائمة**
|
**إضافة عناصر إلى القائمة**
|
||||||
|
|
||||||
`intList.add(new Integer(1)); // Add 1 to the end.
|
```java
|
||||||
|
intList.add(new Integer(1)); // Add 1 to the end.
|
||||||
intList.add(2); // This works as Java provides autoboxing and unboxing of primitive datatypes and their respective wrapper classes
|
|
||||||
|
intList.add(2); // This works as Java provides autoboxing and unboxing of primitive datatypes and their respective wrapper classes
|
||||||
intList.addFirst(3); // Add to the beginning of the list
|
|
||||||
|
intList.addFirst(3); // Add to the beginning of the list
|
||||||
intList.addLast(2); // Add to the end of the list
|
|
||||||
|
intList.addLast(2); // Add to the end of the list
|
||||||
intList.add(2, 5); // Add element 5 at index 2
|
|
||||||
`
|
intList.add(2, 5); // Add element 5 at index 2
|
||||||
|
```
|
||||||
|
|
||||||
دعونا نطبع القائمة
|
دعونا نطبع القائمة
|
||||||
|
|
||||||
`System.out.println(intList); // toString() method is automatically called on the list
|
```java
|
||||||
`
|
System.out.println(intList); // toString() method is automatically called on the list
|
||||||
|
```
|
||||||
|
|
||||||
انتاج: \[3 ، 1 ، 5 ، 2 ، 2\]
|
انتاج: \[3 ، 1 ، 5 ، 2 ، 2\]
|
||||||
|
|
||||||
@ -95,19 +101,21 @@ localeTitle: مجموعات
|
|||||||
|
|
||||||
بما أن جافا لا توفر منفصلة
|
بما أن جافا لا توفر منفصلة
|
||||||
|
|
||||||
`intList.push(5); // Add element to the end of list. Works same as addLast()
|
```java
|
||||||
|
intList.push(5); // Add element to the end of list. Works same as addLast()
|
||||||
intList.pop(); // Removes and returns the last element of the list.
|
|
||||||
`
|
intList.pop(); // Removes and returns the last element of the list.
|
||||||
|
```
|
||||||
|
|
||||||
**إزالة العناصر من القائمة**
|
**إزالة العناصر من القائمة**
|
||||||
|
|
||||||
`intList.remove(3); // Removes the element at index 3 of the list
|
```java
|
||||||
|
intList.remove(3); // Removes the element at index 3 of the list
|
||||||
intList.removeFirst(); // Removes first element of the list
|
|
||||||
|
intList.removeFirst(); // Removes first element of the list
|
||||||
intList.removeLast(); // Removes last element of the list
|
|
||||||
`
|
intList.removeLast(); // Removes last element of the list
|
||||||
|
```
|
||||||
|
|
||||||
ملاحظة: جميع الطرق المذكورة أعلاه لإزالة وجلب عنصر إرجاع NoSuchElementException في قائمة فارغة.
|
ملاحظة: جميع الطرق المذكورة أعلاه لإزالة وجلب عنصر إرجاع NoSuchElementException في قائمة فارغة.
|
||||||
|
|
||||||
|
|||||||
@ -16,8 +16,9 @@ localeTitle: تعليقات في جافا
|
|||||||
|
|
||||||
لإنشاء خط تعليق واحد فقط إضافة اثنين `//` مائلة قبل النص.
|
لإنشاء خط تعليق واحد فقط إضافة اثنين `//` مائلة قبل النص.
|
||||||
|
|
||||||
`// This is how single line comment looks like
|
```java
|
||||||
`
|
// This is how single line comment looks like
|
||||||
|
```
|
||||||
|
|
||||||
#### 2\. تعليق متعدد الخط
|
#### 2\. تعليق متعدد الخط
|
||||||
|
|
||||||
|
|||||||
@ -8,24 +8,26 @@ localeTitle: الصانعين
|
|||||||
|
|
||||||
عند كتابة فصل دراسي بدون أي مُنشئ ، ينشئ المحول البرمجي لـ Java مُنشئًا افتراضيًا:
|
عند كتابة فصل دراسي بدون أي مُنشئ ، ينشئ المحول البرمجي لـ Java مُنشئًا افتراضيًا:
|
||||||
|
|
||||||
`public class Car {
|
```java
|
||||||
private String name;
|
public class Car {
|
||||||
}
|
private String name;
|
||||||
|
}
|
||||||
Car modelS = new Car();
|
|
||||||
`
|
Car modelS = new Car();
|
||||||
|
```
|
||||||
|
|
||||||
هذا التهيئة بدون معلمات هي طريقة استدعاء المُنشئ الافتراضي. يمكنك أيضًا الحصول على مُنشئ افتراضي مكتوب بهذه الطريقة:
|
هذا التهيئة بدون معلمات هي طريقة استدعاء المُنشئ الافتراضي. يمكنك أيضًا الحصول على مُنشئ افتراضي مكتوب بهذه الطريقة:
|
||||||
|
|
||||||
`public class Car {
|
```java
|
||||||
private String name;
|
public class Car {
|
||||||
|
private String name;
|
||||||
// User Specified Default Constructor
|
|
||||||
public Car() {
|
// User Specified Default Constructor
|
||||||
name = "Tesla";
|
public Car() {
|
||||||
}
|
name = "Tesla";
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
ثم ، عند استدعاء `new Car()` ، سيتم الحصول على تهيئة `name` المتغير تلقائيًا إلى "Tesla" لمثيل كائن السيارة هذا.
|
ثم ، عند استدعاء `new Car()` ، سيتم الحصول على تهيئة `name` المتغير تلقائيًا إلى "Tesla" لمثيل كائن السيارة هذا.
|
||||||
|
|
||||||
@ -43,25 +45,26 @@ localeTitle: الصانعين
|
|||||||
|
|
||||||
دعونا ننظر في مثال آخر. لنفترض أن شركة هوندا (الشركة المصنعة للسيارات) تريد أن يتم تسمية جميع سياراتها باسم `Honda <a name>` . من أجل تنفيذ ذلك ، قد نمثل هذا باستخدام فئة على النحو التالي:
|
دعونا ننظر في مثال آخر. لنفترض أن شركة هوندا (الشركة المصنعة للسيارات) تريد أن يتم تسمية جميع سياراتها باسم `Honda <a name>` . من أجل تنفيذ ذلك ، قد نمثل هذا باستخدام فئة على النحو التالي:
|
||||||
|
|
||||||
`public class Car {
|
```java
|
||||||
|
public class Car {
|
||||||
private String name;
|
|
||||||
|
private String name;
|
||||||
// Constructor.
|
|
||||||
public Car(String model){
|
// Constructor.
|
||||||
this.name = "Honda " + model;
|
public Car(String model){
|
||||||
}
|
this.name = "Honda " + model;
|
||||||
|
}
|
||||||
public String getName(){
|
|
||||||
return this.name;
|
public String getName(){
|
||||||
}
|
return this.name;
|
||||||
|
}
|
||||||
public static void main(String args[]){
|
|
||||||
Car car = new Car("Civic");
|
public static void main(String args[]){
|
||||||
System.out.println( car.getName() );
|
Car car = new Car("Civic");
|
||||||
}
|
System.out.println( car.getName() );
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CTJ4/1)
|
 [تشغيل الكود](https://repl.it/CTJ4/1)
|
||||||
|
|
||||||
@ -92,8 +95,9 @@ localeTitle: الصانعين
|
|||||||
لاحظ أن منشئ `private` . هذا يفرض حقيقة أنه لا يسمح لأي شخص آخر بإنشاء مثيل للبنك.
|
لاحظ أن منشئ `private` . هذا يفرض حقيقة أنه لا يسمح لأي شخص آخر بإنشاء مثيل للبنك.
|
||||||
في الواقع ، إذا كنت في فصل آخر ، فحاول:
|
في الواقع ، إذا كنت في فصل آخر ، فحاول:
|
||||||
|
|
||||||
`Bank account = new Bank(); // Throws a compilation error: Bank() has private access in Bank.
|
```java
|
||||||
`
|
Bank account = new Bank(); // Throws a compilation error: Bank() has private access in Bank.
|
||||||
|
```
|
||||||
|
|
||||||
لذلك ، الطريقة الوحيدة للوصول إلى المثيل باستخدام `Bank.getInstance()` . تسمى مثل هذه الحالات `Singleton` منذ أن تحصل على مثيل واحد بالضبط (لكل VM لتكون دقيقة) طوال فترة تطبيقك.
|
لذلك ، الطريقة الوحيدة للوصول إلى المثيل باستخدام `Bank.getInstance()` . تسمى مثل هذه الحالات `Singleton` منذ أن تحصل على مثيل واحد بالضبط (لكل VM لتكون دقيقة) طوال فترة تطبيقك.
|
||||||
|
|
||||||
|
|||||||
@ -29,34 +29,36 @@ localeTitle: تدفق التحكم
|
|||||||
|
|
||||||
يعد التبديل خيارًا بديلًا `if...else` إنشاء `if...else` عند وجود قيم وحالات متعددة للتحقق منها.
|
يعد التبديل خيارًا بديلًا `if...else` إنشاء `if...else` عند وجود قيم وحالات متعددة للتحقق منها.
|
||||||
|
|
||||||
`switch( <integer / String / Enum > ){
|
```java
|
||||||
case <int/String/Enum>:
|
switch( <integer / String / Enum > ){
|
||||||
<statements>
|
case <int/String/Enum>:
|
||||||
break;
|
<statements>
|
||||||
case <int/String/Enum>:
|
break;
|
||||||
<statements>
|
case <int/String/Enum>:
|
||||||
break;
|
<statements>
|
||||||
default:
|
break;
|
||||||
<statements>
|
default:
|
||||||
}
|
<statements>
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
ملاحظة: `falls through` تدفق البرنامج `falls through` `case` التالية إذا كان بيان `break` مفقودًا. على سبيل المثال ، دعنا نقول أنك تقول "مرحباً" لكل شخص في المكتب ، لكنك لطيف جداً للفتاة التي تجلس إلى جانبك وتسمع صوت غاضب إلى رئيسك في العمل. طريقة التمثيل ستكون شيئًا مثل:
|
ملاحظة: `falls through` تدفق البرنامج `falls through` `case` التالية إذا كان بيان `break` مفقودًا. على سبيل المثال ، دعنا نقول أنك تقول "مرحباً" لكل شخص في المكتب ، لكنك لطيف جداً للفتاة التي تجلس إلى جانبك وتسمع صوت غاضب إلى رئيسك في العمل. طريقة التمثيل ستكون شيئًا مثل:
|
||||||
|
|
||||||
`switch(person){
|
```java
|
||||||
case 'boss':
|
switch(person){
|
||||||
soundGrumpy();
|
case 'boss':
|
||||||
break;
|
soundGrumpy();
|
||||||
case 'neighbour':
|
break;
|
||||||
soundExtraNice();
|
case 'neighbour':
|
||||||
break;
|
soundExtraNice();
|
||||||
case 'colleague':
|
break;
|
||||||
soundNormal();
|
case 'colleague':
|
||||||
break;
|
soundNormal();
|
||||||
default:
|
break;
|
||||||
soundNormal();
|
default:
|
||||||
}
|
soundNormal();
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
``Note: The `default` case runs when none of the `case` matches. Remember that when a case has no `break` statement, it `falls through` to the next case and will continue to the subsequent `cases` till a `break` is encountered. Because of this, make sure that each case has a `break` statement. The `default` case does not require a `break` statement.
|
``Note: The `default` case runs when none of the `case` matches. Remember that when a case has no `break` statement, it `falls through` to the next case and will continue to the subsequent `cases` till a `break` is encountered. Because of this, make sure that each case has a `break` statement. The `default` case does not require a `break` statement.
|
||||||
``
|
``
|
||||||
@ -74,29 +76,30 @@ localeTitle: تدفق التحكم
|
|||||||
|
|
||||||
تتمثل إحدى الطرق لتمثيل ذلك في:
|
تتمثل إحدى الطرق لتمثيل ذلك في:
|
||||||
|
|
||||||
`int cash = 150;
|
```java
|
||||||
String company = "friends";
|
int cash = 150;
|
||||||
|
String company = "friends";
|
||||||
if( cash < 25 ){
|
|
||||||
getCoffee();
|
if( cash < 25 ){
|
||||||
} else if( cash < 60 ){
|
getCoffee();
|
||||||
getDecentMeal();
|
} else if( cash < 60 ){
|
||||||
} else if( cash < 100 ){
|
getDecentMeal();
|
||||||
getDecentMeal();
|
} else if( cash < 100 ){
|
||||||
getGlassOfWine();
|
getDecentMeal();
|
||||||
} else {
|
getGlassOfWine();
|
||||||
switch(company){
|
} else {
|
||||||
case "wife":
|
switch(company){
|
||||||
candleLitDinner();
|
case "wife":
|
||||||
break;
|
candleLitDinner();
|
||||||
case "friends":
|
break;
|
||||||
meetFriendsAtSportsBar();
|
case "friends":
|
||||||
break;
|
meetFriendsAtSportsBar();
|
||||||
default:
|
break;
|
||||||
getDecentMeal();
|
default:
|
||||||
}
|
getDecentMeal();
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
في هذا المثال ، سيتم تنفيذ `meetFriendsAtSportsBar()` .
|
في هذا المثال ، سيتم تنفيذ `meetFriendsAtSportsBar()` .
|
||||||
|
|
||||||
|
|||||||
@ -199,5 +199,6 @@ localeTitle: أنواع البيانات
|
|||||||
|
|
||||||
انتاج:
|
انتاج:
|
||||||
|
|
||||||
`10198442
|
```
|
||||||
`
|
10198442
|
||||||
|
```
|
||||||
@ -25,15 +25,16 @@ localeTitle: تحديد السمات
|
|||||||
|
|
||||||
يمكننا إنشاء كائنات متعددة لفئة مركباتنا ، واستخدام بناء الجملة للنقاط للوصول إلى سماتها وأساليبها.
|
يمكننا إنشاء كائنات متعددة لفئة مركباتنا ، واستخدام بناء الجملة للنقاط للوصول إلى سماتها وأساليبها.
|
||||||
|
|
||||||
`class MyClass {
|
```java
|
||||||
public static void main(String[] args) {
|
class MyClass {
|
||||||
Vehicle v1 = new Vehicle();
|
public static void main(String[] args) {
|
||||||
Vehicle v2 = new Vehicle();
|
Vehicle v1 = new Vehicle();
|
||||||
v1.color = "red";
|
Vehicle v2 = new Vehicle();
|
||||||
v2.horn();
|
v1.color = "red";
|
||||||
}
|
v2.horn();
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### معدلات الرؤية
|
### معدلات الرؤية
|
||||||
|
|
||||||
|
|||||||
@ -14,18 +14,19 @@ localeTitle: التحقق من المساواة
|
|||||||
|
|
||||||
بالنسبة لأنواع المتغيرات البدائية ، مثل `int` و `double` ، يمكن دائمًا استخدام عامل `==` للتحقق من المساواة ، حيث يتم تخزين قيمها مباشرة مع المتغير (وليس كمرجع إلى فتحة أخرى في الذاكرة).
|
بالنسبة لأنواع المتغيرات البدائية ، مثل `int` و `double` ، يمكن دائمًا استخدام عامل `==` للتحقق من المساواة ، حيث يتم تخزين قيمها مباشرة مع المتغير (وليس كمرجع إلى فتحة أخرى في الذاكرة).
|
||||||
|
|
||||||
`int var1 = 1;
|
```java
|
||||||
int var2 = 1;
|
int var1 = 1;
|
||||||
System.out.println(var1 == var2) // true
|
int var2 = 1;
|
||||||
|
System.out.println(var1 == var2) // true
|
||||||
MyObject obj1 = new MyObject();
|
|
||||||
MyObject obj2 = obj1;
|
MyObject obj1 = new MyObject();
|
||||||
MyObject obj3 = new MyObject();
|
MyObject obj2 = obj1;
|
||||||
|
MyObject obj3 = new MyObject();
|
||||||
System.out.println(obj1 == obj2) // true
|
|
||||||
System.out.println(obj1 == obj3) // false
|
System.out.println(obj1 == obj2) // true
|
||||||
System.out.println(obj2 == obj3) // false
|
System.out.println(obj1 == obj3) // false
|
||||||
`
|
System.out.println(obj2 == obj3) // false
|
||||||
|
```
|
||||||
|
|
||||||
## طريقة `.equals()`
|
## طريقة `.equals()`
|
||||||
|
|
||||||
@ -33,12 +34,13 @@ localeTitle: التحقق من المساواة
|
|||||||
|
|
||||||
تعد فئة "السلسلة" واحدة من الأمثلة الأكثر شيوعًا للفئة التي تتجاوز طريقة "يساوي ()". عند المقارنة بين "سلعة" للمساواة ، تحتاج إلى استخدام طريقة "يساوي ()" ، لأن "==" لن يعمل كما هو متوقع.
|
تعد فئة "السلسلة" واحدة من الأمثلة الأكثر شيوعًا للفئة التي تتجاوز طريقة "يساوي ()". عند المقارنة بين "سلعة" للمساواة ، تحتاج إلى استخدام طريقة "يساوي ()" ، لأن "==" لن يعمل كما هو متوقع.
|
||||||
|
|
||||||
`String s1 = "Bob";
|
```java
|
||||||
String s2 = "ob";
|
String s1 = "Bob";
|
||||||
s2 = "B" + s2; //s2 now is also "Bob"
|
String s2 = "ob";
|
||||||
System.out.println(s1 == s2); //false
|
s2 = "B" + s2; //s2 now is also "Bob"
|
||||||
System.out.println(s1.equals(s2)); //true
|
System.out.println(s1 == s2); //false
|
||||||
`
|
System.out.println(s1.equals(s2)); //true
|
||||||
|
```
|
||||||
|
|
||||||
عند إنشاء فئة جديدة في Java ، ستحتاج غالبًا إلى تجاوز طريقة `equals()` لتوفير طريقة أكثر فائدة لمقارنة كائنين من نفس الفئة. كيف يتم تنفيذ هذه الطريقة هو ما يصل تماما إلى حكم المطور.
|
عند إنشاء فئة جديدة في Java ، ستحتاج غالبًا إلى تجاوز طريقة `equals()` لتوفير طريقة أكثر فائدة لمقارنة كائنين من نفس الفئة. كيف يتم تنفيذ هذه الطريقة هو ما يصل تماما إلى حكم المطور.
|
||||||
|
|
||||||
|
|||||||
@ -8,13 +8,14 @@ localeTitle: نهائي
|
|||||||
|
|
||||||
**_مثال:_**
|
**_مثال:_**
|
||||||
|
|
||||||
`class MyClass {
|
```java
|
||||||
public static final double PI = 3.14;
|
class MyClass {
|
||||||
public static void main(String[] args){
|
public static final double PI = 3.14;
|
||||||
System.out.println(PI);
|
public static void main(String[] args){
|
||||||
}
|
System.out.println(PI);
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
PI هو الآن ثابت. أي محاولة لتعيينه قيمة ستسبب خطأ.
|
PI هو الآن ثابت. أي محاولة لتعيينه قيمة ستسبب خطأ.
|
||||||
|
|
||||||
|
|||||||
@ -8,13 +8,14 @@ localeTitle: أخيرا
|
|||||||
|
|
||||||
**_مثال:_**
|
**_مثال:_**
|
||||||
|
|
||||||
`try {
|
```java
|
||||||
// Normal execution path
|
try {
|
||||||
throw new EmptyStackException();
|
// Normal execution path
|
||||||
} catch (ExampleException ee) {
|
throw new EmptyStackException();
|
||||||
// deal with the ExampleException
|
} catch (ExampleException ee) {
|
||||||
} finally {
|
// deal with the ExampleException
|
||||||
// This optional section is executed upon termination of any of the try or catch blocks above,
|
} finally {
|
||||||
// except when System.exit() is called in "try" or "catch" blocks;
|
// This optional section is executed upon termination of any of the try or catch blocks above,
|
||||||
}
|
// except when System.exit() is called in "try" or "catch" blocks;
|
||||||
`
|
}
|
||||||
|
```
|
||||||
@ -29,14 +29,15 @@ localeTitle: رسائل ورسائل
|
|||||||
|
|
||||||
بمجرد أن يتم تعريف الستر والأدوات ، نستخدمها في هدفنا الرئيسي:
|
بمجرد أن يتم تعريف الستر والأدوات ، نستخدمها في هدفنا الرئيسي:
|
||||||
|
|
||||||
`public stativ void main(String[] args) {
|
```java
|
||||||
Vehicle v1 = new Vehicle();
|
public stativ void main(String[] args) {
|
||||||
v1.setColor("Red");
|
Vehicle v1 = new Vehicle();
|
||||||
System.out.println(v1.getColor());
|
v1.setColor("Red");
|
||||||
}
|
System.out.println(v1.getColor());
|
||||||
|
}
|
||||||
// Outputs "Red"
|
|
||||||
`
|
// Outputs "Red"
|
||||||
|
```
|
||||||
|
|
||||||
* * *
|
* * *
|
||||||
|
|
||||||
@ -46,22 +47,25 @@ localeTitle: رسائل ورسائل
|
|||||||
|
|
||||||
باستخدام أداة getter و setter ، يمكن للمبرمج التحكم في كيفية الوصول إلى المتغيرات الهامة وتحديثها ، مثل تغيير قيمة متغير داخل نطاق محدد. خذ بعين الاعتبار التعليمة البرمجية التالية لطريقة setter:
|
باستخدام أداة getter و setter ، يمكن للمبرمج التحكم في كيفية الوصول إلى المتغيرات الهامة وتحديثها ، مثل تغيير قيمة متغير داخل نطاق محدد. خذ بعين الاعتبار التعليمة البرمجية التالية لطريقة setter:
|
||||||
|
|
||||||
`public void setNumber(int num) {
|
```java
|
||||||
if (num < 10 || num > 100) {
|
public void setNumber(int num) {
|
||||||
throw new IllegalArgumentException();
|
if (num < 10 || num > 100) {
|
||||||
}
|
throw new IllegalArgumentException();
|
||||||
this.number = num;
|
}
|
||||||
}
|
this.number = num;
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
وهذا يضمن تعيين قيمة الرقم دائمًا بين 10 و 100. إذا كان المبرمج يسمح بتحديث رقم المتغير مباشرة ، يمكن للمتصل تعيين أي قيمة عشوائية له:
|
وهذا يضمن تعيين قيمة الرقم دائمًا بين 10 و 100. إذا كان المبرمج يسمح بتحديث رقم المتغير مباشرة ، يمكن للمتصل تعيين أي قيمة عشوائية له:
|
||||||
|
|
||||||
`obj.number = 3;
|
```java
|
||||||
`
|
obj.number = 3;
|
||||||
|
```
|
||||||
|
|
||||||
هذا ينتهك القيد لقيم تتراوح بين 10 إلى 100 لهذا المتغير. نظرًا لأننا لا نتوقع حدوث ذلك ، فإن إخفاء رقم المتغير كخاصية خاصة واستخدام أداة ضبط يمنعه. من ناحية أخرى ، فإن طريقة الوسيلة هي الطريقة الوحيدة للعالم الخارجي لقراءة قيمة المتغير:
|
هذا ينتهك القيد لقيم تتراوح بين 10 إلى 100 لهذا المتغير. نظرًا لأننا لا نتوقع حدوث ذلك ، فإن إخفاء رقم المتغير كخاصية خاصة واستخدام أداة ضبط يمنعه. من ناحية أخرى ، فإن طريقة الوسيلة هي الطريقة الوحيدة للعالم الخارجي لقراءة قيمة المتغير:
|
||||||
|
|
||||||
`public int getNumber() {
|
```java
|
||||||
return this.number;
|
public int getNumber() {
|
||||||
}
|
return this.number;
|
||||||
`
|
}
|
||||||
|
```
|
||||||
@ -8,42 +8,43 @@ localeTitle: أساسيات الوراثة
|
|||||||
|
|
||||||
الحل: **الميراث** . توفر Java طريقة مرتبة لخصائص الأصل "الوراثة":
|
الحل: **الميراث** . توفر Java طريقة مرتبة لخصائص الأصل "الوراثة":
|
||||||
|
|
||||||
`public class Car {
|
```java
|
||||||
|
public class Car {
|
||||||
private String name;
|
|
||||||
private String manufacturerName;
|
private String name;
|
||||||
|
private String manufacturerName;
|
||||||
public Car(String name, String man) {
|
|
||||||
this.name = name;
|
public Car(String name, String man) {
|
||||||
this.manufacturerName = man;
|
this.name = name;
|
||||||
}
|
this.manufacturerName = man;
|
||||||
// Getter method
|
}
|
||||||
public String getName() {
|
// Getter method
|
||||||
return name;
|
public String getName() {
|
||||||
}
|
return name;
|
||||||
// Getter method
|
}
|
||||||
public String getManufacturerName() {
|
// Getter method
|
||||||
return manufacturerName;
|
public String getManufacturerName() {
|
||||||
}
|
return manufacturerName;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
public class ElectricCar extends Car {
|
|
||||||
|
public class ElectricCar extends Car {
|
||||||
public ElectricCar(String name, String man) {
|
|
||||||
super(name, man);
|
public ElectricCar(String name, String man) {
|
||||||
}
|
super(name, man);
|
||||||
|
}
|
||||||
public void charge() {
|
|
||||||
System.out.println("Charging ...");
|
public void charge() {
|
||||||
}
|
System.out.println("Charging ...");
|
||||||
}
|
}
|
||||||
|
}
|
||||||
ElectricCar modelS = new ElectricCar("Model S","Tesla");
|
|
||||||
// prints Tesla
|
ElectricCar modelS = new ElectricCar("Model S","Tesla");
|
||||||
System.out.println(modelS.getManufacturerName());
|
// prints Tesla
|
||||||
// prints Charging ...
|
System.out.println(modelS.getManufacturerName());
|
||||||
modelS.charge();
|
// prints Charging ...
|
||||||
`
|
modelS.charge();
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CJZY/0)
|
 [تشغيل الكود](https://repl.it/CJZY/0)
|
||||||
|
|
||||||
|
|||||||
@ -13,33 +13,35 @@ localeTitle: ميراث
|
|||||||
|
|
||||||
دعونا وصف ذلك مع المثال الكلاسيكي لل `Vehicle` الفئة و `Car` الفئة:
|
دعونا وصف ذلك مع المثال الكلاسيكي لل `Vehicle` الفئة و `Car` الفئة:
|
||||||
|
|
||||||
`public class Vehicle {
|
```java
|
||||||
public void start() {
|
public class Vehicle {
|
||||||
// starting the engine
|
public void start() {
|
||||||
}
|
// starting the engine
|
||||||
|
}
|
||||||
public void stop() {
|
|
||||||
// stopping the engine
|
public void stop() {
|
||||||
}
|
// stopping the engine
|
||||||
}
|
}
|
||||||
|
}
|
||||||
public class Car extends Vehicle {
|
|
||||||
int numberOfSeats = 4;
|
public class Car extends Vehicle {
|
||||||
|
int numberOfSeats = 4;
|
||||||
public int getNumberOfSeats() {
|
|
||||||
return numberOfSeats;
|
public int getNumberOfSeats() {
|
||||||
}
|
return numberOfSeats;
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
هنا ، يمكننا رؤية فئة `Car` ترث خصائص فئة `Vehicle` . لذلك ، ليس علينا كتابة نفس الكود `start()` الطريقتين `start()` و `stop()` `Car` كذلك ، حيث أن هذه الخصائص متاحة من الشركة الأم أو الطبقة الفائقة. لذلك ، فإن الكائنات التي تم إنشاؤها من فئة `Car` سيكون لها هذه الخصائص _أيضًا_ !
|
هنا ، يمكننا رؤية فئة `Car` ترث خصائص فئة `Vehicle` . لذلك ، ليس علينا كتابة نفس الكود `start()` الطريقتين `start()` و `stop()` `Car` كذلك ، حيث أن هذه الخصائص متاحة من الشركة الأم أو الطبقة الفائقة. لذلك ، فإن الكائنات التي تم إنشاؤها من فئة `Car` سيكون لها هذه الخصائص _أيضًا_ !
|
||||||
|
|
||||||
`Car tesla = new Car();
|
```java
|
||||||
|
Car tesla = new Car();
|
||||||
tesla.start();
|
|
||||||
|
tesla.start();
|
||||||
tesla.stop();
|
|
||||||
`
|
tesla.stop();
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CJXz/0)
|
 [تشغيل الكود](https://repl.it/CJXz/0)
|
||||||
|
|
||||||
@ -62,26 +64,29 @@ localeTitle: ميراث
|
|||||||
|
|
||||||
في Java ، من الممكن الإشارة إلى فئة فرعية _كمثال_ لفئة الطبقة المميزة الخاصة بها. يطلق عليه _تعدد الأشكال_ في البرمجة الشيئية (OOP) ، والقدرة على كائن تأخذ على أشكال كثيرة. على سبيل المثال، `Car` كائن الفئة يمكن الرجوع إليها على أنها `Vehicle` مثيل فئة مثل هذا:
|
في Java ، من الممكن الإشارة إلى فئة فرعية _كمثال_ لفئة الطبقة المميزة الخاصة بها. يطلق عليه _تعدد الأشكال_ في البرمجة الشيئية (OOP) ، والقدرة على كائن تأخذ على أشكال كثيرة. على سبيل المثال، `Car` كائن الفئة يمكن الرجوع إليها على أنها `Vehicle` مثيل فئة مثل هذا:
|
||||||
|
|
||||||
`Vehicle car = new Car();
|
```java
|
||||||
`
|
Vehicle car = new Car();
|
||||||
|
```
|
||||||
|
|
||||||
على الرغم من أن العكس غير ممكن:
|
على الرغم من أن العكس غير ممكن:
|
||||||
|
|
||||||
`Car car = new Vehicle(); // ERROR
|
```java
|
||||||
`
|
Car car = new Vehicle(); // ERROR
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CJYB/0)
|
 [تشغيل الكود](https://repl.it/CJYB/0)
|
||||||
|
|
||||||
نظرًا لأنه يمكنك الرجوع إلى فئة فرعية من Java كمثيل فائق ، يمكنك بسهولة عرض مثيل لكائن فئة فرعية إلى مثيل superclass. من الممكن إرسال كائن superclass إلى نوع فئة فرعية ، ولكن _فقط إذا كان الكائن بالفعل مثيلًا للفئة الفرعية_ . لذا ضع ذلك في اعتبارك:
|
نظرًا لأنه يمكنك الرجوع إلى فئة فرعية من Java كمثيل فائق ، يمكنك بسهولة عرض مثيل لكائن فئة فرعية إلى مثيل superclass. من الممكن إرسال كائن superclass إلى نوع فئة فرعية ، ولكن _فقط إذا كان الكائن بالفعل مثيلًا للفئة الفرعية_ . لذا ضع ذلك في اعتبارك:
|
||||||
|
|
||||||
`Car car = new Car();
|
```java
|
||||||
Vehicle vehicle = car; // upcasting
|
Car car = new Car();
|
||||||
Car car2 = (Car)vechile; //downcasting
|
Vehicle vehicle = car; // upcasting
|
||||||
|
Car car2 = (Car)vechile; //downcasting
|
||||||
Bike bike = new Bike(); // say Bike is also a subclass of Vehicle
|
|
||||||
Vehicle v = bike; // upcasting, no problem here.
|
Bike bike = new Bike(); // say Bike is also a subclass of Vehicle
|
||||||
Car car3 = (Car)bike; // Compilation Error : as bike is NOT a instance of Car
|
Vehicle v = bike; // upcasting, no problem here.
|
||||||
`
|
Car car3 = (Car)bike; // Compilation Error : as bike is NOT a instance of Car
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CJYM/0)
|
 [تشغيل الكود](https://repl.it/CJYM/0)
|
||||||
|
|
||||||
@ -91,21 +96,22 @@ localeTitle: ميراث
|
|||||||
|
|
||||||
تسمح لك Java _بإلغاء_ أو إعادة تعريف الطرق المحددة في الطبقة الفائقة. على سبيل المثال ، يكون لفئة `Car` الخاصة بك تطبيق مختلف `start()` من `Vehicle` ، لذلك يمكنك القيام بذلك:
|
تسمح لك Java _بإلغاء_ أو إعادة تعريف الطرق المحددة في الطبقة الفائقة. على سبيل المثال ، يكون لفئة `Car` الخاصة بك تطبيق مختلف `start()` من `Vehicle` ، لذلك يمكنك القيام بذلك:
|
||||||
|
|
||||||
`public class Vehicle {
|
```java
|
||||||
public void start() {
|
public class Vehicle {
|
||||||
System.out.println("Vehicle start code");
|
public void start() {
|
||||||
}
|
System.out.println("Vehicle start code");
|
||||||
}
|
}
|
||||||
|
}
|
||||||
public class Car extends Vehicle {
|
|
||||||
public void start() {
|
public class Car extends Vehicle {
|
||||||
System.out.println("Car start code");
|
public void start() {
|
||||||
}
|
System.out.println("Car start code");
|
||||||
}
|
}
|
||||||
|
}
|
||||||
Car car = new Car();
|
|
||||||
car.start(); // "Car start code"
|
Car car = new Car();
|
||||||
`
|
car.start(); // "Car start code"
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CJYZ/1)
|
 [تشغيل الكود](https://repl.it/CJYZ/1)
|
||||||
|
|
||||||
@ -122,21 +128,22 @@ localeTitle: ميراث
|
|||||||
|
|
||||||
مضحك تسأل عن ذلك! ما عليك سوى استخدام الكلمة الرئيسية `super` :
|
مضحك تسأل عن ذلك! ما عليك سوى استخدام الكلمة الرئيسية `super` :
|
||||||
|
|
||||||
`public class Vehicle() {
|
```java
|
||||||
public void start() {
|
public class Vehicle() {
|
||||||
System.out.println("Vehicle start code");
|
public void start() {
|
||||||
}
|
System.out.println("Vehicle start code");
|
||||||
}
|
}
|
||||||
|
}
|
||||||
public class Car extends Vehicle {
|
|
||||||
public void run() {
|
public class Car extends Vehicle {
|
||||||
super.start();
|
public void run() {
|
||||||
}
|
super.start();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
Car car = new Car();
|
|
||||||
car.run(); // "Vehicle start code"
|
Car car = new Car();
|
||||||
`
|
car.run(); // "Vehicle start code"
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CJY4/0)
|
 [تشغيل الكود](https://repl.it/CJY4/0)
|
||||||
|
|
||||||
@ -146,33 +153,35 @@ localeTitle: ميراث
|
|||||||
|
|
||||||
باستخدام `instanceof` الكلمة. بوجود الكثير من الطبقات والفئات الفرعية ، سيكون من المربك قليلاً معرفة أي فئة هي فئة فرعية واحدة في وقت التشغيل. لذا ، يمكننا استخدام `instanceof` لتحديد ما إذا كان الكائن عبارة عن مثيل لفئة أو مثيل لفئة فرعية أو مثيل لواجهة.
|
باستخدام `instanceof` الكلمة. بوجود الكثير من الطبقات والفئات الفرعية ، سيكون من المربك قليلاً معرفة أي فئة هي فئة فرعية واحدة في وقت التشغيل. لذا ، يمكننا استخدام `instanceof` لتحديد ما إذا كان الكائن عبارة عن مثيل لفئة أو مثيل لفئة فرعية أو مثيل لواجهة.
|
||||||
|
|
||||||
`Car car = new Car();
|
```java
|
||||||
|
Car car = new Car();
|
||||||
boolean flag = car instanceof Vehicle; // true in this case!
|
|
||||||
`
|
boolean flag = car instanceof Vehicle; // true in this case!
|
||||||
|
```
|
||||||
|
|
||||||
## المقاولون والميراث
|
## المقاولون والميراث
|
||||||
|
|
||||||
كما ذكرنا سابقًا ، لا يمكن تكوين المنشئات بشكل مباشر عن طريق فئة فرعية. على الرغم من أن فئة فرعية _مطلوبة_ لاستدعاء constructor الأصل الخاص به [كأول عملية](http://stackoverflow.com/questions/1168345/why-does-this-and-super-have-to-be-the-first-statement-in-a-constructor) في مُنشئه الخاص. ماذا؟ كنت تفكر في ذلك ، وذلك باستخدام `super` :
|
كما ذكرنا سابقًا ، لا يمكن تكوين المنشئات بشكل مباشر عن طريق فئة فرعية. على الرغم من أن فئة فرعية _مطلوبة_ لاستدعاء constructor الأصل الخاص به [كأول عملية](http://stackoverflow.com/questions/1168345/why-does-this-and-super-have-to-be-the-first-statement-in-a-constructor) في مُنشئه الخاص. ماذا؟ كنت تفكر في ذلك ، وذلك باستخدام `super` :
|
||||||
|
|
||||||
`public class Vehicle {
|
```java
|
||||||
public Vehicle() {
|
public class Vehicle {
|
||||||
// constructor
|
public Vehicle() {
|
||||||
}
|
// constructor
|
||||||
public void start() {
|
}
|
||||||
System.out.println("Vehicle start code");
|
public void start() {
|
||||||
}
|
System.out.println("Vehicle start code");
|
||||||
}
|
}
|
||||||
|
}
|
||||||
public class Car extends Vehicle {
|
|
||||||
public Car() {
|
public class Car extends Vehicle {
|
||||||
super();
|
public Car() {
|
||||||
}
|
super();
|
||||||
public void run() {
|
}
|
||||||
super.start();
|
public void run() {
|
||||||
}
|
super.start();
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CJY8/0)
|
 [تشغيل الكود](https://repl.it/CJY8/0)
|
||||||
|
|
||||||
|
|||||||
@ -6,28 +6,30 @@ localeTitle: واجهات
|
|||||||
|
|
||||||
واجهة في جافا قليلا مثل فئة، ولكن مع فارق كبير: و `interface` يمكن أن يكون _فقط_ تواقيع طريقة والحقول والطرق الافتراضية. منذ Java 8 ، يمكنك أيضًا إنشاء [طرق افتراضية](https://docs.oracle.com/javase/tutorial/java/IandI/defaultmethods.html) . في الجزء التالي ، يمكنك مشاهدة مثال على الواجهة:
|
واجهة في جافا قليلا مثل فئة، ولكن مع فارق كبير: و `interface` يمكن أن يكون _فقط_ تواقيع طريقة والحقول والطرق الافتراضية. منذ Java 8 ، يمكنك أيضًا إنشاء [طرق افتراضية](https://docs.oracle.com/javase/tutorial/java/IandI/defaultmethods.html) . في الجزء التالي ، يمكنك مشاهدة مثال على الواجهة:
|
||||||
|
|
||||||
`public interface Vehicle {
|
```java
|
||||||
public String licensePlate = "";
|
public interface Vehicle {
|
||||||
public float maxVel
|
public String licensePlate = "";
|
||||||
public void start();
|
public float maxVel
|
||||||
public void stop();
|
public void start();
|
||||||
default void blowHorn(){
|
public void stop();
|
||||||
System.out.println("Blowing horn");
|
default void blowHorn(){
|
||||||
}
|
System.out.println("Blowing horn");
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
تحتوي الواجهة أعلاه على حقلين وطريقتين وطريقة افتراضية. وحدها ، ليست ذات فائدة كبيرة ، ولكنها تستخدم عادة مع الفصول. ماذا؟ بسيطة ، عليك أن تتأكد من أن بعض الصف يقوم `implements` .
|
تحتوي الواجهة أعلاه على حقلين وطريقتين وطريقة افتراضية. وحدها ، ليست ذات فائدة كبيرة ، ولكنها تستخدم عادة مع الفصول. ماذا؟ بسيطة ، عليك أن تتأكد من أن بعض الصف يقوم `implements` .
|
||||||
|
|
||||||
`public class Car implements Vehicle {
|
```java
|
||||||
public void start() {
|
public class Car implements Vehicle {
|
||||||
System.out.println("starting engine...");
|
public void start() {
|
||||||
}
|
System.out.println("starting engine...");
|
||||||
public void stop() {
|
}
|
||||||
System.out.println("stopping engine...");
|
public void stop() {
|
||||||
}
|
System.out.println("stopping engine...");
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CItd/0)
|
 [تشغيل الكود](https://repl.it/CItd/0)
|
||||||
|
|
||||||
@ -37,39 +39,41 @@ localeTitle: واجهات
|
|||||||
|
|
||||||
بمجرد إنشاء فئة Java تقوم `implements` أي واجهة ، يمكن الإشارة إلى مثيل الكائن كمثيل للواجهة. هذا المفهوم مشابه لمبدأ إنشاء الوراثة.
|
بمجرد إنشاء فئة Java تقوم `implements` أي واجهة ، يمكن الإشارة إلى مثيل الكائن كمثيل للواجهة. هذا المفهوم مشابه لمبدأ إنشاء الوراثة.
|
||||||
|
|
||||||
`// following our previous example
|
```java
|
||||||
|
// following our previous example
|
||||||
Vehicle tesla = new Car();
|
|
||||||
|
Vehicle tesla = new Car();
|
||||||
tesla.start(); // starting engine ...
|
|
||||||
`
|
tesla.start(); // starting engine ...
|
||||||
|
```
|
||||||
|
|
||||||
**لا يمكن أن** تحتوي واجهة على أساليب منشئ ، لذلك **لا يمكنك** إنشاء مثيل لواجهة بنفسها. يجب إنشاء مثيل لفئة معينة تقوم بتطبيق واجهة للرجوع إليها. فكر في الواجهات على أنها نموذج عقد فارغ ، أو نموذج.
|
**لا يمكن أن** تحتوي واجهة على أساليب منشئ ، لذلك **لا يمكنك** إنشاء مثيل لواجهة بنفسها. يجب إنشاء مثيل لفئة معينة تقوم بتطبيق واجهة للرجوع إليها. فكر في الواجهات على أنها نموذج عقد فارغ ، أو نموذج.
|
||||||
|
|
||||||
ما الذي يمكنك القيام به مع هذه الميزة؟ تعدد الأشكال! يمكنك استخدام الواجهات فقط للإشارة إلى مثيلات الكائن!
|
ما الذي يمكنك القيام به مع هذه الميزة؟ تعدد الأشكال! يمكنك استخدام الواجهات فقط للإشارة إلى مثيلات الكائن!
|
||||||
|
|
||||||
`class Truck implements Vehicle {
|
```java
|
||||||
public void start() {
|
class Truck implements Vehicle {
|
||||||
System.out.println("starting truck engine...");
|
public void start() {
|
||||||
}
|
System.out.println("starting truck engine...");
|
||||||
public void stop() {
|
}
|
||||||
System.out.println("stopping truck engine...");
|
public void stop() {
|
||||||
}
|
System.out.println("stopping truck engine...");
|
||||||
}
|
}
|
||||||
|
}
|
||||||
class Starter {
|
|
||||||
// static method, can be called without instantiating the class
|
class Starter {
|
||||||
public static void startEngine(Vehicle vehicle) {
|
// static method, can be called without instantiating the class
|
||||||
vehicle.start();
|
public static void startEngine(Vehicle vehicle) {
|
||||||
}
|
vehicle.start();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
Vehicle tesla = new Car();
|
|
||||||
Vehicle tata = new Truck();
|
Vehicle tesla = new Car();
|
||||||
|
Vehicle tata = new Truck();
|
||||||
Starter.startEngine(tesla); // starting engine ...
|
|
||||||
Starter.startEngine(tata); // starting truck engine ...
|
Starter.startEngine(tesla); // starting engine ...
|
||||||
`
|
Starter.startEngine(tata); // starting truck engine ...
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CItm/0)
|
 [تشغيل الكود](https://repl.it/CItm/0)
|
||||||
|
|
||||||
@ -77,27 +81,28 @@ localeTitle: واجهات
|
|||||||
|
|
||||||
نعم ، يمكنك تنفيذ واجهات متعددة في فصل واحد. أثناء [تواجدك](//forum.freecodecamp.com/t/java-docs-inheritance) في [التوارث](//forum.freecodecamp.com/t/java-docs-inheritance) داخل الصفوف ، تم تقييدك في فئة واحدة فقط ، يمكنك هنا توسيع أي عدد من الواجهات. ولكن لا ننسى تنفيذ _جميع_ أساليب جميع واجهات ، وإلا سوف تفشل التجميع!
|
نعم ، يمكنك تنفيذ واجهات متعددة في فصل واحد. أثناء [تواجدك](//forum.freecodecamp.com/t/java-docs-inheritance) في [التوارث](//forum.freecodecamp.com/t/java-docs-inheritance) داخل الصفوف ، تم تقييدك في فئة واحدة فقط ، يمكنك هنا توسيع أي عدد من الواجهات. ولكن لا ننسى تنفيذ _جميع_ أساليب جميع واجهات ، وإلا سوف تفشل التجميع!
|
||||||
|
|
||||||
`public interface GPS {
|
```java
|
||||||
public void getCoordinates();
|
public interface GPS {
|
||||||
}
|
public void getCoordinates();
|
||||||
|
}
|
||||||
public interface Radio {
|
|
||||||
public void startRadio();
|
public interface Radio {
|
||||||
public void stopRadio();
|
public void startRadio();
|
||||||
}
|
public void stopRadio();
|
||||||
|
}
|
||||||
public class Smartphone implements GPS,Radio {
|
|
||||||
public void getCoordinates() {
|
public class Smartphone implements GPS,Radio {
|
||||||
// return some coordinates
|
public void getCoordinates() {
|
||||||
}
|
// return some coordinates
|
||||||
public void startRadio() {
|
}
|
||||||
// start Radio
|
public void startRadio() {
|
||||||
}
|
// start Radio
|
||||||
public void stopRadio() {
|
}
|
||||||
// stop Radio
|
public void stopRadio() {
|
||||||
}
|
// stop Radio
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CIto/0)
|
 [تشغيل الكود](https://repl.it/CIto/0)
|
||||||
|
|
||||||
@ -116,37 +121,38 @@ localeTitle: واجهات
|
|||||||
|
|
||||||
لحسن الحظ ، توفر لك Java 8 الآن الطرق `default` للواجهات. _يمكن أن_ تحتوي الطريقة `default` على التنفيذ الخاص بها _مباشرة_ داخل الواجهة! لذا ، إذا لم يقم تطبيق Class بتنفيذ طريقة افتراضية ، فسيأخذ المترجم التنفيذ المذكور داخل الواجهة. جميل أليس كذلك؟ لذلك في مكتبتك ، يمكنك إضافة أي عدد من الطرق الافتراضية في واجهات دون الخوف من كسر أي شيء!
|
لحسن الحظ ، توفر لك Java 8 الآن الطرق `default` للواجهات. _يمكن أن_ تحتوي الطريقة `default` على التنفيذ الخاص بها _مباشرة_ داخل الواجهة! لذا ، إذا لم يقم تطبيق Class بتنفيذ طريقة افتراضية ، فسيأخذ المترجم التنفيذ المذكور داخل الواجهة. جميل أليس كذلك؟ لذلك في مكتبتك ، يمكنك إضافة أي عدد من الطرق الافتراضية في واجهات دون الخوف من كسر أي شيء!
|
||||||
|
|
||||||
`public interface GPS {
|
```java
|
||||||
public void getCoordinates();
|
public interface GPS {
|
||||||
default public void getRoughCoordinates() {
|
public void getCoordinates();
|
||||||
// implementation to return coordinates from rough sources
|
default public void getRoughCoordinates() {
|
||||||
// such as wifi & mobile
|
// implementation to return coordinates from rough sources
|
||||||
System.out.println("Fetching rough coordinates...");
|
// such as wifi & mobile
|
||||||
}
|
System.out.println("Fetching rough coordinates...");
|
||||||
}
|
}
|
||||||
|
}
|
||||||
public interface Radio {
|
|
||||||
public void startRadio();
|
public interface Radio {
|
||||||
public void stopRadio();
|
public void startRadio();
|
||||||
}
|
public void stopRadio();
|
||||||
|
}
|
||||||
public class Smartphone implements GPS,Radio {
|
|
||||||
public void getCoordinates() {
|
public class Smartphone implements GPS,Radio {
|
||||||
// return some coordinates
|
public void getCoordinates() {
|
||||||
}
|
// return some coordinates
|
||||||
public void startRadio() {
|
}
|
||||||
// start Radio
|
public void startRadio() {
|
||||||
}
|
// start Radio
|
||||||
public void stopRadio() {
|
}
|
||||||
// stop Radio
|
public void stopRadio() {
|
||||||
}
|
// stop Radio
|
||||||
|
}
|
||||||
// no implementation of getRoughCoordinates()
|
|
||||||
}
|
// no implementation of getRoughCoordinates()
|
||||||
|
}
|
||||||
Smartphone motoG = new Smartphone();
|
|
||||||
motog.getRoughCoordinates(); // Fetching rough coordinates...
|
Smartphone motoG = new Smartphone();
|
||||||
`
|
motog.getRoughCoordinates(); // Fetching rough coordinates...
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CItp/0)
|
 [تشغيل الكود](https://repl.it/CItp/0)
|
||||||
|
|
||||||
@ -154,35 +160,36 @@ localeTitle: واجهات
|
|||||||
|
|
||||||
سؤال رائع. في هذه الحالة ، إذا لم تقدم التطبيق في الصف ، فسوف يتم خلط المترجم الضعيف ويفشل ببساطة! يجب عليك توفير تنفيذ طريقة افتراضية داخل الفئة أيضًا. هناك أيضًا طريقة رائعة تستخدم ميزة `super` للاتصال بأي تطبيق تريده:
|
سؤال رائع. في هذه الحالة ، إذا لم تقدم التطبيق في الصف ، فسوف يتم خلط المترجم الضعيف ويفشل ببساطة! يجب عليك توفير تنفيذ طريقة افتراضية داخل الفئة أيضًا. هناك أيضًا طريقة رائعة تستخدم ميزة `super` للاتصال بأي تطبيق تريده:
|
||||||
|
|
||||||
`public interface Radio {
|
```java
|
||||||
// public void startRadio();
|
public interface Radio {
|
||||||
// public void stopRadio();
|
// public void startRadio();
|
||||||
|
// public void stopRadio();
|
||||||
default public void next() {
|
|
||||||
System.out.println("Next from Radio");
|
default public void next() {
|
||||||
}
|
System.out.println("Next from Radio");
|
||||||
}
|
}
|
||||||
|
}
|
||||||
public interface MusicPlayer {
|
|
||||||
// public void start();
|
public interface MusicPlayer {
|
||||||
// public void pause();
|
// public void start();
|
||||||
// public void stop();
|
// public void pause();
|
||||||
|
// public void stop();
|
||||||
default public void next() {
|
|
||||||
System.out.println("Next from MusicPlayer");
|
default public void next() {
|
||||||
}
|
System.out.println("Next from MusicPlayer");
|
||||||
}
|
}
|
||||||
|
}
|
||||||
public class Smartphone implements Radio, MusicPlayer {
|
|
||||||
public void next() {
|
public class Smartphone implements Radio, MusicPlayer {
|
||||||
// Suppose you want to call MusicPlayer next
|
public void next() {
|
||||||
MusicPlayer.super.next();
|
// Suppose you want to call MusicPlayer next
|
||||||
}
|
MusicPlayer.super.next();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
Smartphone motoG = new Smartphone();
|
|
||||||
motoG.next(); // Next from MusicPlayer
|
Smartphone motoG = new Smartphone();
|
||||||
`
|
motoG.next(); // Next from MusicPlayer
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CIts/0)
|
 [تشغيل الكود](https://repl.it/CIts/0)
|
||||||
|
|
||||||
@ -220,33 +227,35 @@ localeTitle: واجهات
|
|||||||
|
|
||||||
من الممكن أيضًا في Java لواجهة _ترث_ واجهة أخرى ، باستخدام ، تفكر في ذلك ، `extends` الكلمة الرئيسية:
|
من الممكن أيضًا في Java لواجهة _ترث_ واجهة أخرى ، باستخدام ، تفكر في ذلك ، `extends` الكلمة الرئيسية:
|
||||||
|
|
||||||
`public interface Player {
|
```java
|
||||||
public void start();
|
public interface Player {
|
||||||
public void pause();
|
public void start();
|
||||||
public void stop();
|
public void pause();
|
||||||
}
|
public void stop();
|
||||||
|
}
|
||||||
public interface MusicPlayer extends Player {
|
|
||||||
default public void next() {
|
public interface MusicPlayer extends Player {
|
||||||
System.out.println("Next from MusicPlayer");
|
default public void next() {
|
||||||
}
|
System.out.println("Next from MusicPlayer");
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
هذا يعني ، أن تطبيق Class `MusicPlayer` Interface (واجهة `MusicPlayer` يجب أن يقوم بتنفيذ _جميع_ أساليب `MusicPlayer` بالإضافة إلى `Player` :
|
هذا يعني ، أن تطبيق Class `MusicPlayer` Interface (واجهة `MusicPlayer` يجب أن يقوم بتنفيذ _جميع_ أساليب `MusicPlayer` بالإضافة إلى `Player` :
|
||||||
|
|
||||||
`public class SmartPhone implements MusicPlayer {
|
```java
|
||||||
public void start() {
|
public class SmartPhone implements MusicPlayer {
|
||||||
System.out.println("start");
|
public void start() {
|
||||||
}
|
System.out.println("start");
|
||||||
public void stop() {
|
}
|
||||||
System.out.println("stop");
|
public void stop() {
|
||||||
}
|
System.out.println("stop");
|
||||||
public void pause() {
|
}
|
||||||
System.out.println("pause");
|
public void pause() {
|
||||||
}
|
System.out.println("pause");
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CIty/0)
|
 [تشغيل الكود](https://repl.it/CIty/0)
|
||||||
|
|
||||||
|
|||||||
@ -22,10 +22,11 @@ FXML هي لغة ترميز مبنية على XML تستخدم لتعريف ال
|
|||||||
|
|
||||||
#### مثال:
|
#### مثال:
|
||||||
|
|
||||||
`<HBox spacing="10" alignment="bottom_right" > // Creates an HBox Object
|
```XML
|
||||||
<Button text="Sign In"/> // Nested inside the HBox is a Button object with the text 'Sign In'
|
<HBox spacing="10" alignment="bottom_right" > // Creates an HBox Object
|
||||||
</HBox>
|
<Button text="Sign In"/> // Nested inside the HBox is a Button object with the text 'Sign In'
|
||||||
`
|
</HBox>
|
||||||
|
```
|
||||||
|
|
||||||
### المراجع:
|
### المراجع:
|
||||||
|
|
||||||
|
|||||||
@ -40,21 +40,22 @@ localeTitle: بيان التحكم في الاستراحة
|
|||||||
|
|
||||||
قد تكون عبارات `break` مفيدة بشكل خاص أثناء البحث عن عنصر في صفيف. يؤدي استخدام `break` في التعليمة البرمجية التالية إلى تحسين الكفاءة أثناء توقف الحلقة بمجرد العثور على العنصر الذي نبحث عنه ( `searchFor` ) ، بدلاً من الاستمرار حتى يتم الوصول إلى نهاية `arrayInts` .
|
قد تكون عبارات `break` مفيدة بشكل خاص أثناء البحث عن عنصر في صفيف. يؤدي استخدام `break` في التعليمة البرمجية التالية إلى تحسين الكفاءة أثناء توقف الحلقة بمجرد العثور على العنصر الذي نبحث عنه ( `searchFor` ) ، بدلاً من الاستمرار حتى يتم الوصول إلى نهاية `arrayInts` .
|
||||||
|
|
||||||
`int j = 0;
|
```java
|
||||||
int[] arrayOfInts = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
|
int j = 0;
|
||||||
int searchFor = 5;
|
int[] arrayOfInts = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
|
||||||
|
int searchFor = 5;
|
||||||
for (int i : arrayOfInts)
|
|
||||||
{
|
for (int i : arrayOfInts)
|
||||||
if (arrayOfInts[j] == searchFor)
|
{
|
||||||
{
|
if (arrayOfInts[j] == searchFor)
|
||||||
break;
|
{
|
||||||
}
|
break;
|
||||||
j++;
|
}
|
||||||
}
|
j++;
|
||||||
|
}
|
||||||
System.out.println("j = " + j);
|
|
||||||
`
|
System.out.println("j = " + j);
|
||||||
|
```
|
||||||
|
|
||||||
يمكن استخدام بيان الاستراحة أيضًا ضمن عبارة "بيان".
|
يمكن استخدام بيان الاستراحة أيضًا ضمن عبارة "بيان".
|
||||||
|
|
||||||
|
|||||||
@ -6,15 +6,16 @@ localeTitle: متابعة بيان التحكم
|
|||||||
|
|
||||||
يؤدي العبارة `continue` إلى تخطي حلقة ما بعد السطور التالية بعد المتابعة والانتقال إلى بداية التكرار التالي. في `for` حلقة، يقفز التحكم إلى بيان التحديث، وفي `while` أو `do while` حلقة، يقفز التحكم إلى التعبير المنطقية / حالة.
|
يؤدي العبارة `continue` إلى تخطي حلقة ما بعد السطور التالية بعد المتابعة والانتقال إلى بداية التكرار التالي. في `for` حلقة، يقفز التحكم إلى بيان التحديث، وفي `while` أو `do while` حلقة، يقفز التحكم إلى التعبير المنطقية / حالة.
|
||||||
|
|
||||||
`for (int j = 0; j < 10; j++)
|
```java
|
||||||
{
|
for (int j = 0; j < 10; j++)
|
||||||
if (j == 5)
|
{
|
||||||
{
|
if (j == 5)
|
||||||
continue;
|
{
|
||||||
}
|
continue;
|
||||||
System.out.print (j + " ");
|
}
|
||||||
}
|
System.out.print (j + " ");
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
ستتم طباعة قيمة `j` لكل تكرار ، ما عدا عندما تساوي `5` . سوف تحصل على تخطي العبارة الطباعة بسبب `continue` وسوف يكون الإخراج:
|
ستتم طباعة قيمة `j` لكل تكرار ، ما عدا عندما تساوي `5` . سوف تحصل على تخطي العبارة الطباعة بسبب `continue` وسوف يكون الإخراج:
|
||||||
|
|
||||||
@ -23,26 +24,27 @@ localeTitle: متابعة بيان التحكم
|
|||||||
|
|
||||||
لنفترض أنك تريد حساب عدد `i` s في كلمة `mississippi` . هنا يمكنك استخدام حلقة مع عبارة `continue` ، كما يلي:
|
لنفترض أنك تريد حساب عدد `i` s في كلمة `mississippi` . هنا يمكنك استخدام حلقة مع عبارة `continue` ، كما يلي:
|
||||||
|
|
||||||
`String searchWord = "mississippi";
|
```java
|
||||||
|
String searchWord = "mississippi";
|
||||||
// max stores the length of the string
|
|
||||||
int max = searchWord.length();
|
// max stores the length of the string
|
||||||
int numPs = 0;
|
int max = searchWord.length();
|
||||||
|
int numPs = 0;
|
||||||
for (int i = 0; i < max; i++)
|
|
||||||
{
|
for (int i = 0; i < max; i++)
|
||||||
// We only want to count i's - skip other letters
|
{
|
||||||
if (searchWord.charAt(i) != 'i')
|
// We only want to count i's - skip other letters
|
||||||
{
|
if (searchWord.charAt(i) != 'i')
|
||||||
continue;
|
{
|
||||||
}
|
continue;
|
||||||
|
}
|
||||||
// Increase count_i for each i encountered
|
|
||||||
numPs++;
|
// Increase count_i for each i encountered
|
||||||
}
|
numPs++;
|
||||||
|
}
|
||||||
System.out.println("numPs = " + numPs);
|
|
||||||
`
|
System.out.println("numPs = " + numPs);
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CJZH/0)
|
 [تشغيل الكود](https://repl.it/CJZH/0)
|
||||||
|
|
||||||
|
|||||||
@ -13,15 +13,16 @@ localeTitle: بيانات القفز
|
|||||||
|
|
||||||
تقسيم بيان التحكم "فاصل" خارج الحلقة عندما يتم استيفاء الشرط. هذا يعني أن بقية الحلقة لن تعمل. على سبيل المثال ، في الحلقة أدناه إذا وصلت إلى 5 ، فواصل الحلقة ، بحيث لا تستمر.
|
تقسيم بيان التحكم "فاصل" خارج الحلقة عندما يتم استيفاء الشرط. هذا يعني أن بقية الحلقة لن تعمل. على سبيل المثال ، في الحلقة أدناه إذا وصلت إلى 5 ، فواصل الحلقة ، بحيث لا تستمر.
|
||||||
|
|
||||||
`for(int i=0;i<10;i++){
|
```java
|
||||||
|
for(int i=0;i<10;i++){
|
||||||
if(i == 5){ //if i is 5, break out of the loop.
|
|
||||||
break;
|
if(i == 5){ //if i is 5, break out of the loop.
|
||||||
}
|
break;
|
||||||
|
}
|
||||||
System.out.println(i);
|
|
||||||
}
|
System.out.println(i);
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
انتاج:
|
انتاج:
|
||||||
|
|
||||||
@ -30,15 +31,16 @@ localeTitle: بيانات القفز
|
|||||||
|
|
||||||
إن بيان التحكم 'continue' هو الإصدار الأقل كثافة من 'break'. إنه يخرج فقط من المثيل الحالي للحلقة ويستمر. في الحلقة أدناه ، إذا كان i هو 5 ، تستمر الحلقة ، لذا سوف تتخطى بيان الطباعة أدناه وتتحرك حتى تصل إلى 10 وتوقف الحلقة.
|
إن بيان التحكم 'continue' هو الإصدار الأقل كثافة من 'break'. إنه يخرج فقط من المثيل الحالي للحلقة ويستمر. في الحلقة أدناه ، إذا كان i هو 5 ، تستمر الحلقة ، لذا سوف تتخطى بيان الطباعة أدناه وتتحرك حتى تصل إلى 10 وتوقف الحلقة.
|
||||||
|
|
||||||
`for(int i=0;i<10;i++){
|
```java
|
||||||
|
for(int i=0;i<10;i++){
|
||||||
if(i == 5){ //if i is 5, break out of the current instance loop.
|
|
||||||
continue;
|
if(i == 5){ //if i is 5, break out of the current instance loop.
|
||||||
}
|
continue;
|
||||||
|
}
|
||||||
System.out.println(i);
|
|
||||||
}
|
System.out.println(i);
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
انتاج:
|
انتاج:
|
||||||
|
|
||||||
|
|||||||
@ -6,26 +6,28 @@ localeTitle: هل ... في حين حلقة
|
|||||||
|
|
||||||
يتشابه `do while` the `while` loop ، لكن مجموعة البيانات يتم ضمان تشغيلها مرة واحدة على الأقل قبل التحقق من شرط معين. من المهم ملاحظة أن حلقة "حين" هي حلقة تحكم خروج. بينما (لن يتم تنفيذه بالضرورة) ، 'do while' عبارة عن حلقة يتم التحكم في دخولها (سيتم تنفيذها مرة واحدة على الأقل ، حتى إذا كان الشرط غير صحيح).
|
يتشابه `do while` the `while` loop ، لكن مجموعة البيانات يتم ضمان تشغيلها مرة واحدة على الأقل قبل التحقق من شرط معين. من المهم ملاحظة أن حلقة "حين" هي حلقة تحكم خروج. بينما (لن يتم تنفيذه بالضرورة) ، 'do while' عبارة عن حلقة يتم التحكم في دخولها (سيتم تنفيذها مرة واحدة على الأقل ، حتى إذا كان الشرط غير صحيح).
|
||||||
|
|
||||||
`do
|
```java
|
||||||
{
|
do
|
||||||
// Statements
|
{
|
||||||
}
|
// Statements
|
||||||
while (condition);
|
}
|
||||||
`
|
while (condition);
|
||||||
|
```
|
||||||
|
|
||||||
## مثال
|
## مثال
|
||||||
|
|
||||||
`int iter_DoWhile = 20;
|
```java
|
||||||
do
|
int iter_DoWhile = 20;
|
||||||
{
|
do
|
||||||
System.out.print (iter_DoWhile + " ");
|
{
|
||||||
|
System.out.print (iter_DoWhile + " ");
|
||||||
// Increment the counter
|
|
||||||
iter_DoWhile++;
|
// Increment the counter
|
||||||
}
|
iter_DoWhile++;
|
||||||
while (iter_DoWhile < 10);
|
}
|
||||||
System.out.println("iter_DoWhile Value: " + iter_DoWhile);
|
while (iter_DoWhile < 10);
|
||||||
`
|
System.out.println("iter_DoWhile Value: " + iter_DoWhile);
|
||||||
|
```
|
||||||
|
|
||||||
انتاج:
|
انتاج:
|
||||||
|
|
||||||
@ -41,11 +43,12 @@ localeTitle: هل ... في حين حلقة
|
|||||||
|
|
||||||
هل يمكنك تخمين ناتج مقتطف الشفرة التالي؟
|
هل يمكنك تخمين ناتج مقتطف الشفرة التالي؟
|
||||||
|
|
||||||
`int i = 10;
|
```java
|
||||||
do
|
int i = 10;
|
||||||
{
|
do
|
||||||
System.out.println("The value of i is " + i);
|
{
|
||||||
i--;
|
System.out.println("The value of i is " + i);
|
||||||
}
|
i--;
|
||||||
while (i >= 10);
|
}
|
||||||
`
|
while (i >= 10);
|
||||||
|
```
|
||||||
@ -6,22 +6,24 @@ localeTitle: لكل حلقة
|
|||||||
|
|
||||||
كما دعا إلى تعزيز `for` حلقة، فإنه هو وسيلة مفيدة للغاية وبسيطة لتكرار عبر كل عنصر في مجموعة، مجموعة أو أي كائن التي تطبق `Iterable` اجهة.
|
كما دعا إلى تعزيز `for` حلقة، فإنه هو وسيلة مفيدة للغاية وبسيطة لتكرار عبر كل عنصر في مجموعة، مجموعة أو أي كائن التي تطبق `Iterable` اجهة.
|
||||||
|
|
||||||
`for (object : iterable)
|
```java
|
||||||
{
|
for (object : iterable)
|
||||||
// Statements
|
{
|
||||||
}
|
// Statements
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
تتم قراءة الحلقة كـ "لكل عنصر في `iterable` (يمكن أن يكون صفيفًا أو قابل للتحصيل وما إلى ذلك)". يجب أن يتطابق نوع `object` مع نوع عنصر `iterable` .
|
تتم قراءة الحلقة كـ "لكل عنصر في `iterable` (يمكن أن يكون صفيفًا أو قابل للتحصيل وما إلى ذلك)". يجب أن يتطابق نوع `object` مع نوع عنصر `iterable` .
|
||||||
|
|
||||||
`int[] number_list = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
|
```java
|
||||||
|
int[] number_list = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
|
||||||
for (int numbers : number_list)
|
|
||||||
{
|
for (int numbers : number_list)
|
||||||
System.out.print(numbers + " ");
|
{
|
||||||
// Iterated 10 times, numbers 0,1,2...9
|
System.out.print(numbers + " ");
|
||||||
}
|
// Iterated 10 times, numbers 0,1,2...9
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
انتاج:
|
انتاج:
|
||||||
|
|
||||||
@ -32,15 +34,16 @@ localeTitle: لكل حلقة
|
|||||||
|
|
||||||
وبمقارنة هذا مع التقليدية `for` حلقات:
|
وبمقارنة هذا مع التقليدية `for` حلقات:
|
||||||
|
|
||||||
`int[] number_list = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
|
```java
|
||||||
|
int[] number_list = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
|
||||||
for(int i=0;i < number_list.length;i++)
|
|
||||||
{
|
for(int i=0;i < number_list.length;i++)
|
||||||
System.out.print(number_list[i]+" ");
|
{
|
||||||
// Iterated 10 times, numbers 0,1,2...9
|
System.out.print(number_list[i]+" ");
|
||||||
|
// Iterated 10 times, numbers 0,1,2...9
|
||||||
}
|
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
انتاج:
|
انتاج:
|
||||||
|
|
||||||
|
|||||||
@ -23,42 +23,46 @@ localeTitle: لحلقة
|
|||||||
|
|
||||||
لاحظ أنك ستتحقق مما إذا كانت القيمة أقل من 10 ، وليس أقل من أو تساوي 10 ، حيث أنك تبدأ العدّاد الخاص بك عند 0.
|
لاحظ أنك ستتحقق مما إذا كانت القيمة أقل من 10 ، وليس أقل من أو تساوي 10 ، حيث أنك تبدأ العدّاد الخاص بك عند 0.
|
||||||
|
|
||||||
`for (int iter_For = 0; iter_For < 10; iter_For++)
|
```java
|
||||||
{
|
for (int iter_For = 0; iter_For < 10; iter_For++)
|
||||||
System.out.print(iter_For + " ");
|
{
|
||||||
// Iterated 10 times, iter_For 0,1,2...9
|
System.out.print(iter_For + " ");
|
||||||
}
|
// Iterated 10 times, iter_For 0,1,2...9
|
||||||
|
}
|
||||||
System.out.println("iter_For Value: " + iter_For);
|
|
||||||
`
|
System.out.println("iter_For Value: " + iter_For);
|
||||||
|
```
|
||||||
|
|
||||||
ملاحظة: من المقبول أيضًا الإعلان عن متغير داخل الحلقة for for single ككلمة.
|
ملاحظة: من المقبول أيضًا الإعلان عن متغير داخل الحلقة for for single ككلمة.
|
||||||
|
|
||||||
`for (int iter_For = 0; iter_For < 10; iter_For++)
|
```java
|
||||||
{
|
for (int iter_For = 0; iter_For < 10; iter_For++)
|
||||||
System.out.print (iter_For + " ");
|
{
|
||||||
// Iterated 10 times, iter_For 0,1,2...9
|
System.out.print (iter_For + " ");
|
||||||
}
|
// Iterated 10 times, iter_For 0,1,2...9
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
انتاج:
|
انتاج:
|
||||||
|
|
||||||
`0 1 2 3 4 5 6 7 8 9
|
```
|
||||||
iter_For Value: 10
|
0 1 2 3 4 5 6 7 8 9
|
||||||
`
|
iter_For Value: 10
|
||||||
|
```
|
||||||
|
|
||||||
مثال آخر للحلقة التي تضيف أول 50 رقم سيكون مثل هذا. i ++ تعني i = i + 1.
|
مثال آخر للحلقة التي تضيف أول 50 رقم سيكون مثل هذا. i ++ تعني i = i + 1.
|
||||||
|
|
||||||
`int addUntil = 50;
|
```java
|
||||||
int sum 0;
|
int addUntil = 50;
|
||||||
|
int sum 0;
|
||||||
for (int i = 1; i <= addUntil; i++)
|
|
||||||
{
|
for (int i = 1; i <= addUntil; i++)
|
||||||
sum+=i
|
{
|
||||||
}
|
sum+=i
|
||||||
|
}
|
||||||
System.out.println("The sum of the first 50 numbers is: " + 50);
|
|
||||||
`
|
System.out.println("The sum of the first 50 numbers is: " + 50);
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CJYr/0)
|
 [تشغيل الكود](https://repl.it/CJYr/0)
|
||||||
|
|
||||||
|
|||||||
@ -10,35 +10,37 @@ localeTitle: حلقات لا نهائية
|
|||||||
|
|
||||||
أمثلة:
|
أمثلة:
|
||||||
|
|
||||||
`// Infinite For Loop
|
```java
|
||||||
for ( ; ; )
|
// Infinite For Loop
|
||||||
{
|
for ( ; ; )
|
||||||
// some code here
|
{
|
||||||
}
|
// some code here
|
||||||
|
}
|
||||||
// Infinite While Loop
|
|
||||||
while (true)
|
// Infinite While Loop
|
||||||
{
|
while (true)
|
||||||
// some code here
|
{
|
||||||
}
|
// some code here
|
||||||
|
}
|
||||||
// Infinite Do While Loop
|
|
||||||
do
|
// Infinite Do While Loop
|
||||||
{
|
do
|
||||||
// some code here
|
{
|
||||||
} while (true);
|
// some code here
|
||||||
`
|
} while (true);
|
||||||
|
```
|
||||||
|
|
||||||
عادةً ، إذا كان يتم تشغيل الحلقة الخاصة بك بشكل لا نهائي ، فهذا خطأ لا ينبغي أن يحدث لأن حلقة لا نهائية لا تتوقف وتمنع بقية البرنامج من التشغيل.
|
عادةً ، إذا كان يتم تشغيل الحلقة الخاصة بك بشكل لا نهائي ، فهذا خطأ لا ينبغي أن يحدث لأن حلقة لا نهائية لا تتوقف وتمنع بقية البرنامج من التشغيل.
|
||||||
|
|
||||||
`for(int i=0;i<100;i++){
|
```java
|
||||||
|
for(int i=0;i<100;i++){
|
||||||
if(i==49){
|
|
||||||
i=0;
|
if(i==49){
|
||||||
}
|
i=0;
|
||||||
|
}
|
||||||
}
|
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
يتم تشغيل الحلقة أعلاه بشكل لا نهائي لأن كل مرة أقترب فيها من 49 ، يتم تعيينها إلى 0. هذا يعني أني لم تصل إلى 100 لإنهاء الحلقة ، لذا فإن الحلقة هي حلقة لا نهائية.
|
يتم تشغيل الحلقة أعلاه بشكل لا نهائي لأن كل مرة أقترب فيها من 49 ، يتم تعيينها إلى 0. هذا يعني أني لم تصل إلى 100 لإنهاء الحلقة ، لذا فإن الحلقة هي حلقة لا نهائية.
|
||||||
|
|
||||||
|
|||||||
@ -6,11 +6,12 @@ localeTitle: حائط اللوب
|
|||||||
|
|
||||||
في `while` حلقة تنفيذ مرارا وتكرارا على كتلة من البيانات حتى الشرط المحدد داخل الأقواس بتقييم ل `false` . على سبيل المثال:
|
في `while` حلقة تنفيذ مرارا وتكرارا على كتلة من البيانات حتى الشرط المحدد داخل الأقواس بتقييم ل `false` . على سبيل المثال:
|
||||||
|
|
||||||
`while (some_condition_is_true)
|
```java
|
||||||
{
|
while (some_condition_is_true)
|
||||||
// do something
|
{
|
||||||
}
|
// do something
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
يتم تنفيذ كل "التكرار" (من تنفيذ كتلة البيانات) من قبل تقييم الشرط المحدد داخل الأقواس - يتم تنفيذ البيانات فقط إذا تم تقييم الشرط إلى `true` . إذا تم تقييمه إلى " `false` ، يتم استئناف تنفيذ البرنامج من العبارة الموجودة مباشرةً بعد المربع " `while` .
|
يتم تنفيذ كل "التكرار" (من تنفيذ كتلة البيانات) من قبل تقييم الشرط المحدد داخل الأقواس - يتم تنفيذ البيانات فقط إذا تم تقييم الشرط إلى `true` . إذا تم تقييمه إلى " `false` ، يتم استئناف تنفيذ البرنامج من العبارة الموجودة مباشرةً بعد المربع " `while` .
|
||||||
|
|
||||||
@ -20,21 +21,23 @@ localeTitle: حائط اللوب
|
|||||||
|
|
||||||
في المثال التالي ، يتم إعطاء `expression` بواسطة `iter_While < 10` . نحن زيادة `iter_While` بواسطة `1` كل مرة يتم تنفيذ الحلقة. حلقة `while` فواصل عندما تصل قيمة `iter_While` إلى `10` .
|
في المثال التالي ، يتم إعطاء `expression` بواسطة `iter_While < 10` . نحن زيادة `iter_While` بواسطة `1` كل مرة يتم تنفيذ الحلقة. حلقة `while` فواصل عندما تصل قيمة `iter_While` إلى `10` .
|
||||||
|
|
||||||
`int iter_While = 0;
|
```java
|
||||||
while (iter_While < 10)
|
int iter_While = 0;
|
||||||
{
|
while (iter_While < 10)
|
||||||
System.out.print(iter_While + " ");
|
{
|
||||||
// Increment the counter
|
System.out.print(iter_While + " ");
|
||||||
// Iterated 10 times, iter_While 0,1,2...9
|
// Increment the counter
|
||||||
iter_While++;
|
// Iterated 10 times, iter_While 0,1,2...9
|
||||||
}
|
iter_While++;
|
||||||
System.out.println("iter_While Value: " + iter_While);
|
}
|
||||||
`
|
System.out.println("iter_While Value: " + iter_While);
|
||||||
|
```
|
||||||
|
|
||||||
انتاج:
|
انتاج:
|
||||||
|
|
||||||
`0 1 2 3 4 5 6 7 8 9
|
```
|
||||||
iter_While Value: 10
|
0 1 2 3 4 5 6 7 8 9
|
||||||
`
|
iter_While Value: 10
|
||||||
|
```
|
||||||
|
|
||||||
 [تشغيل الكود](https://repl.it/CJYj/0)
|
 [تشغيل الكود](https://repl.it/CJYj/0)
|
||||||
@ -41,14 +41,15 @@ localeTitle: الأساليب 'Methods'
|
|||||||
|
|
||||||
يمكن تمرير المعلمات في الأساليب. المعلمات معلنة فقط بعد اسم الأسلوب ، داخل الأقواس. بناء الجملة لإعلان المعلمة هو \[نوع البيانات\] \[الاسم\].
|
يمكن تمرير المعلمات في الأساليب. المعلمات معلنة فقط بعد اسم الأسلوب ، داخل الأقواس. بناء الجملة لإعلان المعلمة هو \[نوع البيانات\] \[الاسم\].
|
||||||
|
|
||||||
`public class Car {
|
```java
|
||||||
private String name;
|
public class Car {
|
||||||
|
private String name;
|
||||||
public void changeName(String newName) {
|
|
||||||
name = newName;
|
public void changeName(String newName) {
|
||||||
}
|
name = newName;
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
كما هو الحال مع أي لغة أخرى ، يتم استخدام الأساليب (أو الوظائف ، إذا كنت هنا من JS world) في كثير من الأحيان من حيث النمطية والقابلية لإعادة الاستخدام.
|
كما هو الحال مع أي لغة أخرى ، يتم استخدام الأساليب (أو الوظائف ، إذا كنت هنا من JS world) في كثير من الأحيان من حيث النمطية والقابلية لإعادة الاستخدام.
|
||||||
|
|
||||||
|
|||||||
@ -10,10 +10,11 @@ POJO لتقف على "كائن جافا قديم سهل". هذا يختلف عن
|
|||||||
|
|
||||||
1. يجب ألا يتم توسيع فئات Java المحددة مسبقًا ؛
|
1. يجب ألا يتم توسيع فئات Java المحددة مسبقًا ؛
|
||||||
|
|
||||||
`public class Foo extends javax.servlet.http.HttpServlet {
|
```java
|
||||||
...// body ...
|
public class Foo extends javax.servlet.http.HttpServlet {
|
||||||
}
|
...// body ...
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
2. يجب أن لا تنفذ واجهات prespecified ؛
|
2. يجب أن لا تنفذ واجهات prespecified ؛
|
||||||
|
|
||||||
|
|||||||
@ -12,25 +12,27 @@ localeTitle: ثابتة
|
|||||||
|
|
||||||
**_مثال:_**
|
**_مثال:_**
|
||||||
|
|
||||||
`public class Counter {
|
```java
|
||||||
public static int COUNT = 0;
|
public class Counter {
|
||||||
Counter() {
|
public static int COUNT = 0;
|
||||||
COUNT++;
|
Counter() {
|
||||||
}
|
COUNT++;
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
ستتم مشاركة المتغير `COUNT` بواسطة جميع كائنات تلك الفئة. عندما نقوم بإنشاء كائنات من صف مكافحة لدينا في الرئيسي ، والوصول إلى متغير ثابت.
|
ستتم مشاركة المتغير `COUNT` بواسطة جميع كائنات تلك الفئة. عندما نقوم بإنشاء كائنات من صف مكافحة لدينا في الرئيسي ، والوصول إلى متغير ثابت.
|
||||||
|
|
||||||
`public class MyClass {
|
```java
|
||||||
public static void main(String[] args) {
|
public class MyClass {
|
||||||
Counter c1 = new Counter();
|
public static void main(String[] args) {
|
||||||
Counter c2 = new Counter();
|
Counter c1 = new Counter();
|
||||||
System.out.println(Counter.COUNT);
|
Counter c2 = new Counter();
|
||||||
}
|
System.out.println(Counter.COUNT);
|
||||||
}
|
}
|
||||||
// Outputs "2"
|
}
|
||||||
`
|
// Outputs "2"
|
||||||
|
```
|
||||||
|
|
||||||
Outout هو 2 ، لأن متغير `COUNT` ثابت ويتم زيادته بمقدار واحد في كل مرة يتم إنشاء كائن جديد لفئة Counter. يمكنك أيضًا الوصول إلى المتغير الثابت باستخدام أي كائن من هذه الفئة ، مثل `c1.COUNT` .
|
Outout هو 2 ، لأن متغير `COUNT` ثابت ويتم زيادته بمقدار واحد في كل مرة يتم إنشاء كائن جديد لفئة Counter. يمكنك أيضًا الوصول إلى المتغير الثابت باستخدام أي كائن من هذه الفئة ، مثل `c1.COUNT` .
|
||||||
|
|
||||||
@ -43,29 +45,31 @@ Outout هو 2 ، لأن متغير `COUNT` ثابت ويتم زيادته بمق
|
|||||||
|
|
||||||
**_مثال:_**
|
**_مثال:_**
|
||||||
|
|
||||||
`public class Counter {
|
```java
|
||||||
public static int COUNT = 0;
|
public class Counter {
|
||||||
Counter() {
|
public static int COUNT = 0;
|
||||||
COUNT++;
|
Counter() {
|
||||||
}
|
COUNT++;
|
||||||
|
}
|
||||||
public static void increment(){
|
|
||||||
COUNT++;
|
public static void increment(){
|
||||||
}
|
COUNT++;
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
يمكن أيضًا استدعاء أساليب ثابتة من مثيل الطبقة.
|
يمكن أيضًا استدعاء أساليب ثابتة من مثيل الطبقة.
|
||||||
|
|
||||||
`public class MyClass {
|
```java
|
||||||
public static void main(String[] args) {
|
public class MyClass {
|
||||||
Counter.increment();
|
public static void main(String[] args) {
|
||||||
Counter.increment();
|
Counter.increment();
|
||||||
System.out.println(Counter.COUNT);
|
Counter.increment();
|
||||||
}
|
System.out.println(Counter.COUNT);
|
||||||
}
|
}
|
||||||
// Outputs "2"
|
}
|
||||||
`
|
// Outputs "2"
|
||||||
|
```
|
||||||
|
|
||||||
هو 2 الإخراج لأنه يحصل زيادة بواسطة `increament()` الأسلوب `increament()` . على غرار المتغيرات الثابتة ، يمكن أيضًا الوصول إلى الطرق الثابتة باستخدام متغيرات الحالة.
|
هو 2 الإخراج لأنه يحصل زيادة بواسطة `increament()` الأسلوب `increament()` . على غرار المتغيرات الثابتة ، يمكن أيضًا الوصول إلى الطرق الثابتة باستخدام متغيرات الحالة.
|
||||||
|
|
||||||
@ -75,22 +79,24 @@ Outout هو 2 ، لأن متغير `COUNT` ثابت ويتم زيادته بمق
|
|||||||
|
|
||||||
**_مثال:_**
|
**_مثال:_**
|
||||||
|
|
||||||
`public class Saturn {
|
```java
|
||||||
public static final int MOON_COUNT;
|
public class Saturn {
|
||||||
|
public static final int MOON_COUNT;
|
||||||
static {
|
|
||||||
MOON_COUNT = 62;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
`public class Main {
|
static {
|
||||||
public static void main(String[] args) {
|
MOON_COUNT = 62;
|
||||||
System.out.println(Saturn.MOON_COUNT);
|
}
|
||||||
}
|
}
|
||||||
}
|
```
|
||||||
// Outputs "62"
|
|
||||||
`
|
```java
|
||||||
|
public class Main {
|
||||||
|
public static void main(String[] args) {
|
||||||
|
System.out.println(Saturn.MOON_COUNT);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Outputs "62"
|
||||||
|
```
|
||||||
|
|
||||||
الإخراج هو 62 ، لأنه يتم تعيين متغير `MOON_COUNT` تلك القيمة في كتلة ثابتة.
|
الإخراج هو 62 ، لأنه يتم تعيين متغير `MOON_COUNT` تلك القيمة في كتلة ثابتة.
|
||||||
|
|
||||||
@ -100,25 +106,27 @@ Outout هو 2 ، لأن متغير `COUNT` ثابت ويتم زيادته بمق
|
|||||||
|
|
||||||
**_مثال:_**
|
**_مثال:_**
|
||||||
|
|
||||||
`public class Outer {
|
```java
|
||||||
|
public class Outer {
|
||||||
public Outer() {
|
|
||||||
}
|
public Outer() {
|
||||||
|
}
|
||||||
public static class Inner {
|
|
||||||
public Inner() {
|
public static class Inner {
|
||||||
}
|
public Inner() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
في المثال أعلاه ، يمكن الوصول إلى الطبقة `Inner` مباشرة كعضو ثابت في الفصل `Outer` .
|
في المثال أعلاه ، يمكن الوصول إلى الطبقة `Inner` مباشرة كعضو ثابت في الفصل `Outer` .
|
||||||
|
|
||||||
`public class Main {
|
```java
|
||||||
public static void main(String[] args) {
|
public class Main {
|
||||||
Outer.Inner inner = new Outer.Inner();
|
public static void main(String[] args) {
|
||||||
}
|
Outer.Inner inner = new Outer.Inner();
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
واحدة من حالات الاستخدام للدروس المتداخلة الثابتة في [نموذج البناء](https://en.wikipedia.org/wiki/Builder_pattern#Java) المستخدمة بشكل شائع في جافا.
|
واحدة من حالات الاستخدام للدروس المتداخلة الثابتة في [نموذج البناء](https://en.wikipedia.org/wiki/Builder_pattern#Java) المستخدمة بشكل شائع في جافا.
|
||||||
@ -42,54 +42,57 @@ localeTitle: تيارات
|
|||||||
|
|
||||||
## أمثلة
|
## أمثلة
|
||||||
|
|
||||||
`// print the length of all Strings in a List
|
```java
|
||||||
for (String string : Arrays.asList("abc", "de", "f", "abc")) {
|
// print the length of all Strings in a List
|
||||||
int length = string.length();
|
for (String string : Arrays.asList("abc", "de", "f", "abc")) {
|
||||||
System.out.println(length);
|
int length = string.length();
|
||||||
}
|
System.out.println(length);
|
||||||
|
}
|
||||||
Arrays.asList("abc", "de", "f", "abc")
|
|
||||||
.stream()
|
|
||||||
.map(String::length)
|
|
||||||
.forEach(System.out::println);
|
|
||||||
|
|
||||||
// output: 3 2 1 3
|
|
||||||
`
|
|
||||||
|
|
||||||
`// print all Strings in a List with a Length greater than 2
|
Arrays.asList("abc", "de", "f", "abc")
|
||||||
for (String string : Arrays.asList("abc", "de", "f", "abc")) {
|
.stream()
|
||||||
if (string.length() > 2) {
|
.map(String::length)
|
||||||
System.out.println(string);
|
.forEach(System.out::println);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Arrays.asList("abc", "de", "f", "abc")
|
|
||||||
.stream()
|
|
||||||
.filter(string -> string.length() > 2)
|
|
||||||
.forEach(System.out::println);
|
|
||||||
|
|
||||||
// output: abc abc
|
|
||||||
`
|
|
||||||
|
|
||||||
`// create a sorted List with all unique Strings from another List which are longer than or requal 2
|
// output: 3 2 1 3
|
||||||
List<String> result = new ArrayList<>();
|
```
|
||||||
for (String string : Arrays.asList("de", "abc", "f", "abc")) {
|
|
||||||
if (string.length() >= 2
|
```java
|
||||||
&& ! result.contains(string)) {
|
// print all Strings in a List with a Length greater than 2
|
||||||
result.add(string);
|
for (String string : Arrays.asList("abc", "de", "f", "abc")) {
|
||||||
}
|
if (string.length() > 2) {
|
||||||
}
|
System.out.println(string);
|
||||||
Collections.sort(result);
|
}
|
||||||
|
}
|
||||||
List<String> result2 = Arrays.asList("de", "abc", "f", "abc")
|
|
||||||
.stream()
|
Arrays.asList("abc", "de", "f", "abc")
|
||||||
.filter(string -> string.length() >= 2)
|
.stream()
|
||||||
.distinct()
|
.filter(string -> string.length() > 2)
|
||||||
.sorted()
|
.forEach(System.out::println);
|
||||||
.collect(Collectors.toList());
|
|
||||||
|
// output: abc abc
|
||||||
// result: abc de
|
```
|
||||||
`
|
|
||||||
|
```java
|
||||||
|
// create a sorted List with all unique Strings from another List which are longer than or requal 2
|
||||||
|
List<String> result = new ArrayList<>();
|
||||||
|
for (String string : Arrays.asList("de", "abc", "f", "abc")) {
|
||||||
|
if (string.length() >= 2
|
||||||
|
&& ! result.contains(string)) {
|
||||||
|
result.add(string);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Collections.sort(result);
|
||||||
|
|
||||||
|
List<String> result2 = Arrays.asList("de", "abc", "f", "abc")
|
||||||
|
.stream()
|
||||||
|
.filter(string -> string.length() >= 2)
|
||||||
|
.distinct()
|
||||||
|
.sorted()
|
||||||
|
.collect(Collectors.toList());
|
||||||
|
|
||||||
|
// result: abc de
|
||||||
|
```
|
||||||
|
|
||||||
### مصادر
|
### مصادر
|
||||||
|
|
||||||
|
|||||||
@ -6,14 +6,16 @@ localeTitle: سلاسل
|
|||||||
|
|
||||||
سلاسل هي تسلسل من الشخصيات. في Java ، تعد `String` `Object` . ينبغي عدم الخلط بين السلاسل مع `char` كأحرف حرفيا 1 قيمة بدلا من سلسلة من الأحرف. لا يزال بإمكانك استخدام قيمة واحدة داخل سلسلة ، ومع ذلك يفضل استخدام `char` عند التحقق من حرف واحد.
|
سلاسل هي تسلسل من الشخصيات. في Java ، تعد `String` `Object` . ينبغي عدم الخلط بين السلاسل مع `char` كأحرف حرفيا 1 قيمة بدلا من سلسلة من الأحرف. لا يزال بإمكانك استخدام قيمة واحدة داخل سلسلة ، ومع ذلك يفضل استخدام `char` عند التحقق من حرف واحد.
|
||||||
|
|
||||||
`String course = "FCC";
|
```java
|
||||||
System.out.println(course instanceof Object);
|
String course = "FCC";
|
||||||
`
|
System.out.println(course instanceof Object);
|
||||||
|
```
|
||||||
|
|
||||||
انتاج:
|
انتاج:
|
||||||
|
|
||||||
`true
|
```
|
||||||
`
|
true
|
||||||
|
```
|
||||||
|
|
||||||
يمكنك إنشاء كائن سلسلة بالطرق التالية:
|
يمكنك إنشاء كائن سلسلة بالطرق التالية:
|
||||||
|
|
||||||
@ -27,10 +29,11 @@ localeTitle: سلاسل
|
|||||||
|
|
||||||
في مقتطف الشفرة هذا ، كم عدد كائنات السلسلة التي تم إنشاؤها؟
|
في مقتطف الشفرة هذا ، كم عدد كائنات السلسلة التي تم إنشاؤها؟
|
||||||
|
|
||||||
`String str = "This is a string";
|
```java
|
||||||
String str2 = "This is a string";
|
String str = "This is a string";
|
||||||
String str3 = new String("This is a string");
|
String str2 = "This is a string";
|
||||||
`
|
String str3 = new String("This is a string");
|
||||||
|
```
|
||||||
|
|
||||||
الإجابة هي: يتم إنشاء كائنات سلسلة 2. `str` و `str2` كلاهما يشيران إلى نفس الكائن. `str3` لديه نفس المحتوى ولكن باستخدام القسري `new` خلق كائن جديد ومتميز.
|
الإجابة هي: يتم إنشاء كائنات سلسلة 2. `str` و `str2` كلاهما يشيران إلى نفس الكائن. `str3` لديه نفس المحتوى ولكن باستخدام القسري `new` خلق كائن جديد ومتميز.
|
||||||
|
|
||||||
@ -38,10 +41,11 @@ localeTitle: سلاسل
|
|||||||
|
|
||||||
يمكنك اختبار ذلك باستخدام swallow أو fast Object Compar `==` و `equals()` .
|
يمكنك اختبار ذلك باستخدام swallow أو fast Object Compar `==` و `equals()` .
|
||||||
|
|
||||||
`System.out.println(str == str2); // This prints 'true'
|
```java
|
||||||
System.out.println(str == str3); // This prints 'false'
|
System.out.println(str == str2); // This prints 'true'
|
||||||
System.out.println(str.equals(str3)); // This prints 'true'
|
System.out.println(str == str3); // This prints 'false'
|
||||||
`
|
System.out.println(str.equals(str3)); // This prints 'true'
|
||||||
|
```
|
||||||
|
|
||||||
فيما يلي مثال آخر حول كيفية إنشاء سلسلة في Java باستخدام الطرق المختلفة:
|
فيما يلي مثال آخر حول كيفية إنشاء سلسلة في Java باستخدام الطرق المختلفة:
|
||||||
|
|
||||||
@ -63,17 +67,19 @@ localeTitle: سلاسل
|
|||||||
|
|
||||||
إذا كنت ترغب في مقارنة قيمة متغيرين للسلسلة ، فلا يمكنك استخدام ==. هذا يرجع إلى حقيقة أن هذا سوف يقارن إشارات المتغيرات وليس القيم المرتبطة بها. لمقارنة القيم المخزنة من السلاسل التي تستخدمها تساوي هذه الطريقة.
|
إذا كنت ترغب في مقارنة قيمة متغيرين للسلسلة ، فلا يمكنك استخدام ==. هذا يرجع إلى حقيقة أن هذا سوف يقارن إشارات المتغيرات وليس القيم المرتبطة بها. لمقارنة القيم المخزنة من السلاسل التي تستخدمها تساوي هذه الطريقة.
|
||||||
|
|
||||||
`boolean equals(Object obj)
|
```java
|
||||||
`
|
boolean equals(Object obj)
|
||||||
|
```
|
||||||
|
|
||||||
تقوم بإرجاع true إذا كان كائنان متساويان و false على خلاف ذلك.
|
تقوم بإرجاع true إذا كان كائنان متساويان و false على خلاف ذلك.
|
||||||
|
|
||||||
`String str = "Hello world";
|
```java
|
||||||
String str2 = "Hello world";
|
String str = "Hello world";
|
||||||
|
String str2 = "Hello world";
|
||||||
System.out.println(str == str2); // This prints false
|
|
||||||
System.out.println(str.equals(str2); // This prints true
|
System.out.println(str == str2); // This prints false
|
||||||
`
|
System.out.println(str.equals(str2); // This prints true
|
||||||
|
```
|
||||||
|
|
||||||
المقارنة الأولى غير صحيحة لأن "==" ينظر إلى المراجع وهي ليست متماثلة.
|
المقارنة الأولى غير صحيحة لأن "==" ينظر إلى المراجع وهي ليست متماثلة.
|
||||||
|
|
||||||
@ -81,15 +87,16 @@ localeTitle: سلاسل
|
|||||||
|
|
||||||
لدينا عدة طرق يحمل في ثناياه عوامل في سلسلة. فيما يلي مثال لطريقة طول السلسلة ().
|
لدينا عدة طرق يحمل في ثناياه عوامل في سلسلة. فيما يلي مثال لطريقة طول السلسلة ().
|
||||||
|
|
||||||
`public class StringDemo {
|
```java
|
||||||
|
public class StringDemo {
|
||||||
public static void main(String args[]) {
|
|
||||||
String palindrome = "Dot saw I was Tod";
|
public static void main(String args[]) {
|
||||||
int len = palindrome.length();
|
String palindrome = "Dot saw I was Tod";
|
||||||
System.out.println( "String Length is : " + len );
|
int len = palindrome.length();
|
||||||
}
|
System.out.println( "String Length is : " + len );
|
||||||
}
|
}
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
سيؤدي ذلك إلى - `String Length is : 17`
|
سيؤدي ذلك إلى - `String Length is : 17`
|
||||||
|
|
||||||
@ -105,25 +112,28 @@ localeTitle: سلاسل
|
|||||||
|
|
||||||
"طول" السلسلة هو مجرد عدد الأحرف الموجودة فيه. حتى "hi" هي طول 2 و "Hello" هي length 5. ترجع طريقة length () على سلسلة طولها ، كما يلي:
|
"طول" السلسلة هو مجرد عدد الأحرف الموجودة فيه. حتى "hi" هي طول 2 و "Hello" هي length 5. ترجع طريقة length () على سلسلة طولها ، كما يلي:
|
||||||
|
|
||||||
`String a = "Hello";
|
```java
|
||||||
int len = a.length(); // len is 5
|
String a = "Hello";
|
||||||
`
|
int len = a.length(); // len is 5
|
||||||
|
```
|
||||||
|
|
||||||
#### طرق المقارنة الأخرى التي يمكن استخدامها أيضًا في السلسلة هي:
|
#### طرق المقارنة الأخرى التي يمكن استخدامها أيضًا في السلسلة هي:
|
||||||
|
|
||||||
1. equalsIgnoreCase (): - يقارن السلسلة دون الأخذ بعين الاعتبار حساسية الحالة.
|
1. equalsIgnoreCase (): - يقارن السلسلة دون الأخذ بعين الاعتبار حساسية الحالة.
|
||||||
|
|
||||||
`String a = "HELLO";
|
```java
|
||||||
String b = "hello";
|
String a = "HELLO";
|
||||||
System.out.println(a.equalsIgnoreCase(b)); // It will print true
|
String b = "hello";
|
||||||
`
|
System.out.println(a.equalsIgnoreCase(b)); // It will print true
|
||||||
|
```
|
||||||
|
|
||||||
2. قارنTo: - يقارن قيمة lexicographically وإرجاع عدد صحيح.
|
2. قارنTo: - يقارن قيمة lexicographically وإرجاع عدد صحيح.
|
||||||
|
|
||||||
`String a = "Sam";
|
```java
|
||||||
String b = "Sam";
|
String a = "Sam";
|
||||||
String c = "Ram";
|
String b = "Sam";
|
||||||
System.out.println(a.compareTo(b)); // 0
|
String c = "Ram";
|
||||||
System.out.prinltn(a.compareTo(c)); // 1 since (a>b)
|
System.out.println(a.compareTo(b)); // 0
|
||||||
System.out.println(c.compareTo(a)); // -1 since (c<a)
|
System.out.prinltn(a.compareTo(c)); // 1 since (a>b)
|
||||||
`
|
System.out.println(c.compareTo(a)); // -1 since (c<a)
|
||||||
|
```
|
||||||
@ -8,8 +8,9 @@ localeTitle: يرمي
|
|||||||
|
|
||||||
**_مثال:_**
|
**_مثال:_**
|
||||||
|
|
||||||
`throw new ArithmeticException("/ by zero not permitted");
|
```java
|
||||||
`
|
throw new ArithmeticException("/ by zero not permitted");
|
||||||
|
```
|
||||||
|
|
||||||
##### المزيد من الموارد
|
##### المزيد من الموارد
|
||||||
|
|
||||||
|
|||||||
@ -16,34 +16,36 @@ localeTitle: المتغيرات
|
|||||||
|
|
||||||
عادة ، يمكنك أن _تعلن_ (أي إنشاء) المتغيرات وفقا للبناء التالي: < _data-type_ > < _variableName_ >؛
|
عادة ، يمكنك أن _تعلن_ (أي إنشاء) المتغيرات وفقا للبناء التالي: < _data-type_ > < _variableName_ >؛
|
||||||
|
|
||||||
`// Primitive Data Type
|
```java
|
||||||
int i;
|
// Primitive Data Type
|
||||||
|
int i;
|
||||||
// Reference Data Type
|
|
||||||
Float myFloat;
|
// Reference Data Type
|
||||||
`
|
Float myFloat;
|
||||||
|
```
|
||||||
|
|
||||||
يمكنك _تعيين_ قيمة للمتغير إما في نفس الوقت الذي تقوم فيه بالتصريح (الذي يسمى _التهيئة_ ) ، أو في أي مكان في الكود بعد أن تقوم بإعلانه. الرمز **\=** يستخدم لنفسه.
|
يمكنك _تعيين_ قيمة للمتغير إما في نفس الوقت الذي تقوم فيه بالتصريح (الذي يسمى _التهيئة_ ) ، أو في أي مكان في الكود بعد أن تقوم بإعلانه. الرمز **\=** يستخدم لنفسه.
|
||||||
|
|
||||||
`// Initialise the variable of Primitive Data Type 'int' to store the value 10
|
```java
|
||||||
int i = 10;
|
// Initialise the variable of Primitive Data Type 'int' to store the value 10
|
||||||
double amount = 10.0;
|
int i = 10;
|
||||||
boolean isOpen = false;
|
double amount = 10.0;
|
||||||
char c = 'a'; // Note the single quotes
|
boolean isOpen = false;
|
||||||
|
char c = 'a'; // Note the single quotes
|
||||||
//Variables can also be declared in one statement, and assigned values later.
|
|
||||||
int j;
|
//Variables can also be declared in one statement, and assigned values later.
|
||||||
j = 10;
|
int j;
|
||||||
|
j = 10;
|
||||||
// initiates an Float object with value 1.0
|
|
||||||
// variable myFloat now points to the object
|
// initiates an Float object with value 1.0
|
||||||
Float myFloat = new Float(1.0);
|
// variable myFloat now points to the object
|
||||||
|
Float myFloat = new Float(1.0);
|
||||||
//Bytes are one of types in Java and can be
|
|
||||||
//represented with this code
|
//Bytes are one of types in Java and can be
|
||||||
int byteValue = 0B101;
|
//represented with this code
|
||||||
byte anotherByte = (byte)0b00100001;
|
int byteValue = 0B101;
|
||||||
`
|
byte anotherByte = (byte)0b00100001;
|
||||||
|
```
|
||||||
|
|
||||||
كما يتضح من المثال أعلاه ، فإن متغيرات النوع البدائي تتصرف بشكل مختلف قليلاً عن متغيرات النوع المرجعي (& التفاف) - بينما المتغيرات الأولية _تخزن_ القيمة الفعلية ، _تشير_ المتغيرات المرجعية _إلى_ "كائن" يحتوي على القيمة الفعلية. يمكنك معرفة المزيد في الأقسام المرتبطة أدناه.
|
كما يتضح من المثال أعلاه ، فإن متغيرات النوع البدائي تتصرف بشكل مختلف قليلاً عن متغيرات النوع المرجعي (& التفاف) - بينما المتغيرات الأولية _تخزن_ القيمة الفعلية ، _تشير_ المتغيرات المرجعية _إلى_ "كائن" يحتوي على القيمة الفعلية. يمكنك معرفة المزيد في الأقسام المرتبطة أدناه.
|
||||||
|
|
||||||
|
|||||||
@ -45,11 +45,11 @@ Question: شرح ng-App directive. الإجابة: يبدأ توجيه ng-app ت
|
|||||||
|
|
||||||
سؤال: اشرح توجيه ng-init الإجابة: يشرح توجيه ng-init بيانات تطبيق AngularJS. يتم استخدامه لوضع القيم للمتغيرات لاستخدامها في التطبيق. على سبيل المثال: في المثال أدناه ، قمنا بتهيئة مجموعة من البلدان ، باستخدام بنية JSON لتحديد مجموعة من البلدان.
|
سؤال: اشرح توجيه ng-init الإجابة: يشرح توجيه ng-init بيانات تطبيق AngularJS. يتم استخدامه لوضع القيم للمتغيرات لاستخدامها في التطبيق. على سبيل المثال: في المثال أدناه ، قمنا بتهيئة مجموعة من البلدان ، باستخدام بنية JSON لتحديد مجموعة من البلدان.
|
||||||
|
|
||||||
`
|
```html
|
||||||
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
|
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
|
||||||
...
|
...
|
||||||
</div>
|
</div>
|
||||||
`
|
```
|
||||||
|
|
||||||
سؤال: كيف تشارك البيانات بين وحدات التحكم؟ الإجابة: أنشئ خدمة AngularJS التي ستحتفظ بالبيانات وحقنها داخل وحدات التحكم. يعد استخدام الخدمة هو الطريقة الأنظف والأسرع والأسهل للاختبار. ومع ذلك ، هناك طريقتان آخرتان لتنفيذ مشاركة البيانات بين وحدات التحكم ، مثل: - استخدام الأحداث - استخدام $ parent ، nextSibling ، controllerAs ، وما إلى ذلك للوصول مباشرة إلى وحدات التحكم - استخدام $ rootScope لإضافة البيانات على (ليس ممارسة جيدة)
|
سؤال: كيف تشارك البيانات بين وحدات التحكم؟ الإجابة: أنشئ خدمة AngularJS التي ستحتفظ بالبيانات وحقنها داخل وحدات التحكم. يعد استخدام الخدمة هو الطريقة الأنظف والأسرع والأسهل للاختبار. ومع ذلك ، هناك طريقتان آخرتان لتنفيذ مشاركة البيانات بين وحدات التحكم ، مثل: - استخدام الأحداث - استخدام $ parent ، nextSibling ، controllerAs ، وما إلى ذلك للوصول مباشرة إلى وحدات التحكم - استخدام $ rootScope لإضافة البيانات على (ليس ممارسة جيدة)
|
||||||
|
|
||||||
|
|||||||
@ -9,8 +9,9 @@ localeTitle: الحجج
|
|||||||
\`\` \`جافا سكريبت
|
\`\` \`جافا سكريبت
|
||||||
function storeNames () {return arguments؛ }
|
function storeNames () {return arguments؛ }
|
||||||
|
|
||||||
`* Then, when we execute that function with **n arguments**, 3 in this case, it will return the object to us and it will **look like** an array. We can convert it to an array, but more on that later...
|
```
|
||||||
`
|
* Then, when we execute that function with **n arguments**, 3 in this case, it will return the object to us and it will **look like** an array. We can convert it to an array, but more on that later...
|
||||||
|
```
|
||||||
|
|
||||||
جافا سكريبت // إذا قمنا بتنفيذ السطر التالي في وحدة التحكم: storeNames ("Mulder"، "Scully"، "Alex Kryceck")؛ // سيكون الناتج {'0': 'Mulder' ، '1': 'Scully' ، '2': 'Alex Kryceck'}
|
جافا سكريبت // إذا قمنا بتنفيذ السطر التالي في وحدة التحكم: storeNames ("Mulder"، "Scully"، "Alex Kryceck")؛ // سيكون الناتج {'0': 'Mulder' ، '1': 'Scully' ، '2': 'Alex Kryceck'}
|
||||||
|
|
||||||
@ -25,8 +26,9 @@ function storeNames () {return arguments؛ }
|
|||||||
|
|
||||||
// أو طريقة es6: var args = Array.from (الحجج)
|
// أو طريقة es6: var args = Array.from (الحجج)
|
||||||
|
|
||||||
`Since **slice()** has two (the parameter **end** is optional) parameters, you can grab a certain portion of the arguments by specifying (using the _slice.call()_ method renders these two parameters optional, not just _end_) the beginning and the ending of your portion; check out the following code:
|
```
|
||||||
`
|
Since **slice()** has two (the parameter **end** is optional) parameters, you can grab a certain portion of the arguments by specifying (using the _slice.call()_ method renders these two parameters optional, not just _end_) the beginning and the ending of your portion; check out the following code:
|
||||||
|
```
|
||||||
|
|
||||||
جافا سكريبت function getGrades () { var args = Array.prototype.slice.call (الحجج ، 1 ، 3) ؛ عودة الارجاع }
|
جافا سكريبت function getGrades () { var args = Array.prototype.slice.call (الحجج ، 1 ، 3) ؛ عودة الارجاع }
|
||||||
|
|
||||||
@ -34,18 +36,19 @@ function storeNames () {return arguments؛ }
|
|||||||
|
|
||||||
// يجب أن يكون الناتج: // // \[100 ، 75\] <- لماذا؟ لأنه بدأ من الفهرس 1 وتوقف عند الفهرس 3 // لذلك ، لم يؤخذ في الاعتبار المؤشر 3 (40). // // إذا أزلنا المعلمة "3" ، لن نتركها سوى (الحجج ، 1) // كل حجة من الفهرس 1: \[100 ، 75 ، 40 ، 89 ، 95\].
|
// يجب أن يكون الناتج: // // \[100 ، 75\] <- لماذا؟ لأنه بدأ من الفهرس 1 وتوقف عند الفهرس 3 // لذلك ، لم يؤخذ في الاعتبار المؤشر 3 (40). // // إذا أزلنا المعلمة "3" ، لن نتركها سوى (الحجج ، 1) // كل حجة من الفهرس 1: \[100 ، 75 ، 40 ، 89 ، 95\].
|
||||||
|
|
||||||
`### Optimization issues with Array.slice()
|
```
|
||||||
|
### Optimization issues with Array.slice()
|
||||||
There is a little problem, it's not recommended to use slice in the arguments object (optimization reasons)...
|
|
||||||
|
There is a little problem, it's not recommended to use slice in the arguments object (optimization reasons)...
|
||||||
> **Important**: You should not slice on arguments because it prevents optimizations in JavaScript engines (V8 for example). Instead, try constructing a new array by iterating through the arguments object.
|
|
||||||
>
|
> **Important**: You should not slice on arguments because it prevents optimizations in JavaScript engines (V8 for example). Instead, try constructing a new array by iterating through the arguments object.
|
||||||
> _by_ **_Mozilla Developer Network_** <a href='https://developer.mozilla.org/ca/docs/Web/JavaScript/Reference/Functions/arguments' target='_blank' rel='nofollow'>(reference)<a>
|
>
|
||||||
|
> _by_ **_Mozilla Developer Network_** <a href='https://developer.mozilla.org/ca/docs/Web/JavaScript/Reference/Functions/arguments' target='_blank' rel='nofollow'>(reference)<a>
|
||||||
|
|
||||||
|
|
||||||
So, what other method is available to convert _arguments_ to an array? I recommend the for-loop (not the for-in loop), you can do it like this:
|
|
||||||
`
|
So, what other method is available to convert _arguments_ to an array? I recommend the for-loop (not the for-in loop), you can do it like this:
|
||||||
|
```
|
||||||
|
|
||||||
جافا سكريبت var args = \[\]؛ // صفيف فارغ ، في البداية. لـ (var i = 0؛ i <arguments.length؛ i ++) { args.push (الحجج \[أنا\]) } // Now 'args' هي مصفوفة تحمل وسائطك. \`\` \`
|
جافا سكريبت var args = \[\]؛ // صفيف فارغ ، في البداية. لـ (var i = 0؛ i <arguments.length؛ i ++) { args.push (الحجج \[أنا\]) } // Now 'args' هي مصفوفة تحمل وسائطك. \`\` \`
|
||||||
|
|
||||||
|
|||||||
@ -64,18 +64,20 @@ RabbitMQ يحدث ليكون أسهل وسيط منصات منصة الوسيط
|
|||||||
|
|
||||||
بعد استيراد `tortoise` `node-cron` ، لقد ذهبنا إلى الأمام وأضفت اتصالاً بـ RabbitMQ. بعد ذلك ، دعنا نكتب وظيفة سريعة وقذرة تنشر رسالة إلى أرنب:
|
بعد استيراد `tortoise` `node-cron` ، لقد ذهبنا إلى الأمام وأضفت اتصالاً بـ RabbitMQ. بعد ذلك ، دعنا نكتب وظيفة سريعة وقذرة تنشر رسالة إلى أرنب:
|
||||||
|
|
||||||
`function scheduleMessage(){
|
```javascript
|
||||||
let payload = {url: 'https://randomuser.me/api'}
|
function scheduleMessage(){
|
||||||
tortoise
|
let payload = {url: 'https://randomuser.me/api'}
|
||||||
.exchange('random-user-exchange', 'direct', { durable:false })
|
tortoise
|
||||||
.publish('random-user-key', payload)
|
.exchange('random-user-exchange', 'direct', { durable:false })
|
||||||
}
|
.publish('random-user-key', payload)
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
هذا بسيط بما فيه الكفاية. لقد حددنا قاموسًا يحتوي على عنوان URL [لواجهة](https://randomuser.me/) برمجة تطبيقات [RandomUser.me](https://randomuser.me/) ، والتي يتم نشرها بعد ذلك إلى `random-user-exchange` تبادل `random-user-exchange` على RabbitMQ ، مع `random-user-key` التوجيه `random-user-key` . كما ذكرنا من قبل ، فإن مفتاح التوجيه هو الذي يحدد من الذي يستهلك رسالة. الآن ، دعنا نكتب قاعدة جدولة ، لنشر هذه الرسالة كل 60 ثانية.
|
هذا بسيط بما فيه الكفاية. لقد حددنا قاموسًا يحتوي على عنوان URL [لواجهة](https://randomuser.me/) برمجة تطبيقات [RandomUser.me](https://randomuser.me/) ، والتي يتم نشرها بعد ذلك إلى `random-user-exchange` تبادل `random-user-exchange` على RabbitMQ ، مع `random-user-key` التوجيه `random-user-key` . كما ذكرنا من قبل ، فإن مفتاح التوجيه هو الذي يحدد من الذي يستهلك رسالة. الآن ، دعنا نكتب قاعدة جدولة ، لنشر هذه الرسالة كل 60 ثانية.
|
||||||
|
|
||||||
`cron.schedule('60 * * * * *', scheduleMessage)
|
```javascript
|
||||||
`
|
cron.schedule('60 * * * * *', scheduleMessage)
|
||||||
|
```
|
||||||
|
|
||||||
وناشرنا جاهز! ولكن في الحقيقة ليس جيدًا بدون المستهلك أن يستهلك هذه الرسائل فعليًا! لكننا نحتاج أولاً إلى مكتبة يمكنها الاتصال بعنوان URL في هذه الرسائل. شخصيا ، أنا استخدم `superagent` : `npm install --save superagent` .
|
وناشرنا جاهز! ولكن في الحقيقة ليس جيدًا بدون المستهلك أن يستهلك هذه الرسائل فعليًا! لكننا نحتاج أولاً إلى مكتبة يمكنها الاتصال بعنوان URL في هذه الرسائل. شخصيا ، أنا استخدم `superagent` : `npm install --save superagent` .
|
||||||
|
|
||||||
@ -97,20 +99,21 @@ RabbitMQ يحدث ليكون أسهل وسيط منصات منصة الوسيط
|
|||||||
|
|
||||||
وقت كتابة التعليمات البرمجية لاستهلاك الرسائل فعليًا:
|
وقت كتابة التعليمات البرمجية لاستهلاك الرسائل فعليًا:
|
||||||
|
|
||||||
`tortoise
|
```javascript
|
||||||
.queue('random-user-queue', { durable: false })
|
tortoise
|
||||||
// Add as many bindings as needed
|
.queue('random-user-queue', { durable: false })
|
||||||
.exchange('random-user-exchange', 'direct', 'random-user-key', { durable: false })
|
// Add as many bindings as needed
|
||||||
.prefetch(1)
|
.exchange('random-user-exchange', 'direct', 'random-user-key', { durable: false })
|
||||||
.subscribe(function(msg, ack, nack) {
|
.prefetch(1)
|
||||||
// Handle
|
.subscribe(function(msg, ack, nack) {
|
||||||
let payload = JSON.parse(msg)
|
// Handle
|
||||||
getURL(payload['url']).then((response) => {
|
let payload = JSON.parse(msg)
|
||||||
console.log('Job result: ', response)
|
getURL(payload['url']).then((response) => {
|
||||||
})
|
console.log('Job result: ', response)
|
||||||
ack() // or nack()
|
})
|
||||||
})
|
ack() // or nack()
|
||||||
`
|
})
|
||||||
|
```
|
||||||
|
|
||||||
هنا ، أخبرنا `tortoise` أن نستمع إلى `random-user-queue` ، وهذا يرتبط `random-user-key` `random-user-exchange` . بمجرد استلام الرسالة ، يتم استرداد الحمولة من `msg` ، ويتم تمريرها إلى `getURL` ، والتي بدورها تقوم بإرجاع Promation مع استجابة JSON المطلوبة من RandomUser API.
|
هنا ، أخبرنا `tortoise` أن نستمع إلى `random-user-queue` ، وهذا يرتبط `random-user-key` `random-user-exchange` . بمجرد استلام الرسالة ، يتم استرداد الحمولة من `msg` ، ويتم تمريرها إلى `getURL` ، والتي بدورها تقوم بإرجاع Promation مع استجابة JSON المطلوبة من RandomUser API.
|
||||||
|
|
||||||
|
|||||||
@ -8,11 +8,12 @@ Booleans هي نوع بيانات بدائي شائع الاستخدام في ل
|
|||||||
|
|
||||||
في Javascript ، غالبًا ما يكون هناك نوع الإكراه الضمني للقيمة المنطقية. إذا كان لديك مثلاً عبارة if تتحقق من تعبير معين ، فسيتم فرض هذا التعبير على قيمة منطقية:
|
في Javascript ، غالبًا ما يكون هناك نوع الإكراه الضمني للقيمة المنطقية. إذا كان لديك مثلاً عبارة if تتحقق من تعبير معين ، فسيتم فرض هذا التعبير على قيمة منطقية:
|
||||||
|
|
||||||
`var a = 'a string';
|
```javascript
|
||||||
if (a) {
|
var a = 'a string';
|
||||||
console.log(a); // logs 'a string'
|
if (a) {
|
||||||
}
|
console.log(a); // logs 'a string'
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
هناك بعض القيم القليلة التي سيتم فرضها على false:
|
هناك بعض القيم القليلة التي سيتم فرضها على false:
|
||||||
|
|
||||||
@ -27,24 +28,25 @@ Booleans هي نوع بيانات بدائي شائع الاستخدام في ل
|
|||||||
|
|
||||||
إحدى الطرق التي يتم بها استخدام نوع الإكراه هي استخدام مشغلي (أو `||` ) و ( `&&` ):
|
إحدى الطرق التي يتم بها استخدام نوع الإكراه هي استخدام مشغلي (أو `||` ) و ( `&&` ):
|
||||||
|
|
||||||
`var a = 'word';
|
```javascript
|
||||||
var b = false;
|
var a = 'word';
|
||||||
var c = true;
|
var b = false;
|
||||||
var d = 0
|
var c = true;
|
||||||
var e = 1
|
var d = 0
|
||||||
var f = 2
|
var e = 1
|
||||||
var g = null
|
var f = 2
|
||||||
|
var g = null
|
||||||
console.log(a || b); // 'word'
|
|
||||||
console.log(c || a); // true
|
console.log(a || b); // 'word'
|
||||||
console.log(b || a); // 'word'
|
console.log(c || a); // true
|
||||||
console.log(e || f); // 1
|
console.log(b || a); // 'word'
|
||||||
console.log(f || e); // 2
|
console.log(e || f); // 1
|
||||||
console.log(d || g); // null
|
console.log(f || e); // 2
|
||||||
console.log(g || d); // 0
|
console.log(d || g); // null
|
||||||
console.log(a && c); // true
|
console.log(g || d); // 0
|
||||||
console.log(c && a); // 'word'
|
console.log(a && c); // true
|
||||||
`
|
console.log(c && a); // 'word'
|
||||||
|
```
|
||||||
|
|
||||||
كما ترى ، يفحص المشغل _أو_ العامل الأول. إذا كان هذا صحيحًا أو صريحًا ، فسيتم إرجاعه على الفور (وهذا هو سبب حصولنا على كلمة في الحالة الأولى وصحيح في الحالة الثانية). إذا لم يكن صحيحا أو صائبا ، فإنه يعيد المعامل الثاني (وهذا هو السبب في أننا نحصل على كلمة في الحالة الثالثة).
|
كما ترى ، يفحص المشغل _أو_ العامل الأول. إذا كان هذا صحيحًا أو صريحًا ، فسيتم إرجاعه على الفور (وهذا هو سبب حصولنا على كلمة في الحالة الأولى وصحيح في الحالة الثانية). إذا لم يكن صحيحا أو صائبا ، فإنه يعيد المعامل الثاني (وهذا هو السبب في أننا نحصل على كلمة في الحالة الثالثة).
|
||||||
|
|
||||||
@ -60,33 +62,37 @@ Booleans هي نوع بيانات بدائي شائع الاستخدام في ل
|
|||||||
|
|
||||||
يتم تقييم أي كائن لا تكون قيمته غير محددة أو خالية ، بما في ذلك كائن منطقي قيمته غير صحيح ، إلى true عند تمريره إلى بيان شرطي. إذا كان هذا صحيحًا ، فسيؤدي هذا إلى تنفيذ الوظيفة. على سبيل المثال ، يتم تقييم الشرط الموجود في العبارة if في الحالة التالية:
|
يتم تقييم أي كائن لا تكون قيمته غير محددة أو خالية ، بما في ذلك كائن منطقي قيمته غير صحيح ، إلى true عند تمريره إلى بيان شرطي. إذا كان هذا صحيحًا ، فسيؤدي هذا إلى تنفيذ الوظيفة. على سبيل المثال ، يتم تقييم الشرط الموجود في العبارة if في الحالة التالية:
|
||||||
|
|
||||||
`var x = new Boolean(false);
|
```javascript
|
||||||
if (x) {
|
var x = new Boolean(false);
|
||||||
// this code is executed
|
if (x) {
|
||||||
}
|
// this code is executed
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
لا ينطبق هذا السلوك على الأوليات البولية. على سبيل المثال ، يتم تقييم الشرط الموجود في العبارة if في حالة الخطأ:
|
لا ينطبق هذا السلوك على الأوليات البولية. على سبيل المثال ، يتم تقييم الشرط الموجود في العبارة if في حالة الخطأ:
|
||||||
|
|
||||||
`var x = false;
|
```javascript
|
||||||
if (x) {
|
var x = false;
|
||||||
// this code is not executed
|
if (x) {
|
||||||
}
|
// this code is not executed
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
لا تستخدم كائنًا منطقيًا لتحويل قيمة غير منطقية إلى قيمة منطقية. بدلاً من ذلك ، استخدم Boolean كدالة لتنفيذ هذه المهمة:
|
لا تستخدم كائنًا منطقيًا لتحويل قيمة غير منطقية إلى قيمة منطقية. بدلاً من ذلك ، استخدم Boolean كدالة لتنفيذ هذه المهمة:
|
||||||
|
|
||||||
`var x = Boolean(expression); // preferred
|
```javascript
|
||||||
var x = new Boolean(expression); // don't use
|
var x = Boolean(expression); // preferred
|
||||||
`
|
var x = new Boolean(expression); // don't use
|
||||||
|
```
|
||||||
|
|
||||||
إذا قمت بتحديد أي كائن ، بما في ذلك كائن منطقي قيمته غير كاذبة ، كالقيمة الأولية لكائن Boolean ، فإن الكائن المنطقي الجديد يحتوي على قيمة true.
|
إذا قمت بتحديد أي كائن ، بما في ذلك كائن منطقي قيمته غير كاذبة ، كالقيمة الأولية لكائن Boolean ، فإن الكائن المنطقي الجديد يحتوي على قيمة true.
|
||||||
|
|
||||||
`var myFalse = new Boolean(false); // initial value of false
|
```javascript
|
||||||
var g = new Boolean(myFalse); // initial value of true
|
var myFalse = new Boolean(false); // initial value of false
|
||||||
var myString = new String('Hello'); // string object
|
var g = new Boolean(myFalse); // initial value of true
|
||||||
var s = new Boolean(myString); // initial value of true
|
var myString = new String('Hello'); // string object
|
||||||
`
|
var s = new Boolean(myString); // initial value of true
|
||||||
|
```
|
||||||
|
|
||||||
لا تستخدم كائن منطقي بدلاً من بدائي منطقي.
|
لا تستخدم كائن منطقي بدلاً من بدائي منطقي.
|
||||||
|
|
||||||
|
|||||||
@ -14,20 +14,21 @@ localeTitle: وظائف رد الاتصال
|
|||||||
|
|
||||||
لتوضيح معاودة الاتصال ، دعنا نبدأ بمثال بسيط:
|
لتوضيح معاودة الاتصال ، دعنا نبدأ بمثال بسيط:
|
||||||
|
|
||||||
`function createQuote(quote, callback){
|
```javascript
|
||||||
var myQuote = "Like I always say, " + quote;
|
function createQuote(quote, callback){
|
||||||
callback(myQuote); // 2
|
var myQuote = "Like I always say, " + quote;
|
||||||
}
|
callback(myQuote); // 2
|
||||||
|
}
|
||||||
function logQuote(quote){
|
|
||||||
console.log(quote);
|
function logQuote(quote){
|
||||||
}
|
console.log(quote);
|
||||||
|
}
|
||||||
createQuote("eat your vegetables!", logQuote); // 1
|
|
||||||
|
createQuote("eat your vegetables!", logQuote); // 1
|
||||||
// Result in console:
|
|
||||||
// Like I always say, eat your vegetables!
|
// Result in console:
|
||||||
`
|
// Like I always say, eat your vegetables!
|
||||||
|
```
|
||||||
|
|
||||||
في المثال أعلاه ، يعد `createQuote` هو دالة الترتيب الأعلى ، والتي تقبل الوسيطتين ، والثانية هي معاودة الاتصال. يتم استخدام وظيفة `logQuote` لتمرير في وظيفة رد الاتصال الخاصة بنا. عندما نقوم بتنفيذ وظيفة `createQuote` _(1)_ ، نلاحظ أننا _لا_ `logQuote` أقواس `logQuote` عندما `logQuote` كوسيطة. هذا لأننا لا نريد تنفيذ وظيفة معاودة الاتصال الخاصة بنا على الفور ، فنحن نريد ببساطة تمرير تعريف الدالة إلى الوظيفة ذات الترتيب الأعلى بحيث يمكن تنفيذه لاحقًا.
|
في المثال أعلاه ، يعد `createQuote` هو دالة الترتيب الأعلى ، والتي تقبل الوسيطتين ، والثانية هي معاودة الاتصال. يتم استخدام وظيفة `logQuote` لتمرير في وظيفة رد الاتصال الخاصة بنا. عندما نقوم بتنفيذ وظيفة `createQuote` _(1)_ ، نلاحظ أننا _لا_ `logQuote` أقواس `logQuote` عندما `logQuote` كوسيطة. هذا لأننا لا نريد تنفيذ وظيفة معاودة الاتصال الخاصة بنا على الفور ، فنحن نريد ببساطة تمرير تعريف الدالة إلى الوظيفة ذات الترتيب الأعلى بحيث يمكن تنفيذه لاحقًا.
|
||||||
|
|
||||||
@ -35,18 +36,20 @@ localeTitle: وظائف رد الاتصال
|
|||||||
|
|
||||||
بالإضافة إلى ذلك ، يمكن أن نمر في وظائف مجهولة مثل الاستدعاءات. سيكون للنداء أدناه إلى `createQuote` نفس النتيجة كما في المثال أعلاه:
|
بالإضافة إلى ذلك ، يمكن أن نمر في وظائف مجهولة مثل الاستدعاءات. سيكون للنداء أدناه إلى `createQuote` نفس النتيجة كما في المثال أعلاه:
|
||||||
|
|
||||||
`createQuote("eat your vegetables!", function(quote){
|
```javascript
|
||||||
console.log(quote);
|
createQuote("eat your vegetables!", function(quote){
|
||||||
});
|
console.log(quote);
|
||||||
`
|
});
|
||||||
|
```
|
||||||
|
|
||||||
بالمناسبة ، لا _تحتاج_ إلى استخدام الكلمة "callback" كاسم لوسيطة الخاص بك ، تحتاج Javascript فقط إلى معرفة أنه اسم الوسيطة الصحيح. استناداً إلى المثال أعلاه ، ستتصرف الدالة أدناه بنفس الطريقة بالضبط.
|
بالمناسبة ، لا _تحتاج_ إلى استخدام الكلمة "callback" كاسم لوسيطة الخاص بك ، تحتاج Javascript فقط إلى معرفة أنه اسم الوسيطة الصحيح. استناداً إلى المثال أعلاه ، ستتصرف الدالة أدناه بنفس الطريقة بالضبط.
|
||||||
|
|
||||||
`function createQuote(quote, functionToCall) {
|
```javascript
|
||||||
var myQuote = "Like I always say, " + quote;
|
function createQuote(quote, functionToCall) {
|
||||||
functionToCall(myQuote);
|
var myQuote = "Like I always say, " + quote;
|
||||||
}
|
functionToCall(myQuote);
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## لماذا استخدام Callbacks؟
|
## لماذا استخدام Callbacks؟
|
||||||
|
|
||||||
@ -54,22 +57,23 @@ localeTitle: وظائف رد الاتصال
|
|||||||
|
|
||||||
دعونا نلقي نظرة على مثال يحاكي طلب إلى الخادم:
|
دعونا نلقي نظرة على مثال يحاكي طلب إلى الخادم:
|
||||||
|
|
||||||
`function serverRequest(query, callback){
|
```javascript
|
||||||
setTimeout(function(){
|
function serverRequest(query, callback){
|
||||||
var response = query + "full!";
|
setTimeout(function(){
|
||||||
callback(response);
|
var response = query + "full!";
|
||||||
},5000);
|
callback(response);
|
||||||
}
|
},5000);
|
||||||
|
}
|
||||||
function getResults(results){
|
|
||||||
console.log("Response from the server: " + results);
|
function getResults(results){
|
||||||
}
|
console.log("Response from the server: " + results);
|
||||||
|
}
|
||||||
serverRequest("The glass is half ", getResults);
|
|
||||||
|
serverRequest("The glass is half ", getResults);
|
||||||
// Result in console after 5 second delay:
|
|
||||||
// Response from the server: The glass is half full!
|
// Result in console after 5 second delay:
|
||||||
`
|
// Response from the server: The glass is half full!
|
||||||
|
```
|
||||||
|
|
||||||
في المثال أعلاه ، نجري طلبًا زائفًا على الخادم. بعد مرور 5 ثوانٍ يتم تعديل الاستجابة ثم يتم تنفيذ `getResults` وظيفة رد الاتصال الخاصة بنا. للاطلاع على هذا الإجراء ، يمكنك نسخ / لصق الشفرة الواردة أعلاه في أداة مطور المتصفح وتنفيذها.
|
في المثال أعلاه ، نجري طلبًا زائفًا على الخادم. بعد مرور 5 ثوانٍ يتم تعديل الاستجابة ثم يتم تنفيذ `getResults` وظيفة رد الاتصال الخاصة بنا. للاطلاع على هذا الإجراء ، يمكنك نسخ / لصق الشفرة الواردة أعلاه في أداة مطور المتصفح وتنفيذها.
|
||||||
|
|
||||||
|
|||||||
@ -25,27 +25,28 @@ localeTitle: الطبقات
|
|||||||
|
|
||||||
هذا غير مدعوم في المتصفحات القديمة وتم تقديمه في ECMAScript 2015.
|
هذا غير مدعوم في المتصفحات القديمة وتم تقديمه في ECMAScript 2015.
|
||||||
|
|
||||||
`class Person {
|
```javascript
|
||||||
constructor(firstName, lastName) {
|
class Person {
|
||||||
this._firstName = firstName;
|
constructor(firstName, lastName) {
|
||||||
this._lastName = lastName;
|
this._firstName = firstName;
|
||||||
}
|
this._lastName = lastName;
|
||||||
|
}
|
||||||
log() {
|
|
||||||
console.log('I am', this._firstName, this._lastName);
|
log() {
|
||||||
}
|
console.log('I am', this._firstName, this._lastName);
|
||||||
|
}
|
||||||
// setters
|
|
||||||
set profession(val) {
|
// setters
|
||||||
this._profession = val;
|
set profession(val) {
|
||||||
}
|
this._profession = val;
|
||||||
// getters
|
}
|
||||||
get profession() {
|
// getters
|
||||||
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
get profession() {
|
||||||
}
|
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
||||||
|
}
|
||||||
}
|
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -58,111 +59,115 @@ localeTitle: الطبقات
|
|||||||
|
|
||||||
هنا ، تتم إضافة جميع الأساليب إلى النموذج الأولي
|
هنا ، تتم إضافة جميع الأساليب إلى النموذج الأولي
|
||||||
|
|
||||||
`function Person(firstName, lastName) {
|
```javascript
|
||||||
this._firstName = firstName;
|
function Person(firstName, lastName) {
|
||||||
this._lastName = lastName;
|
this._firstName = firstName;
|
||||||
}
|
this._lastName = lastName;
|
||||||
|
}
|
||||||
Person.prototype.log = function() {
|
|
||||||
console.log('I am', this._firstName, this._lastName);
|
Person.prototype.log = function() {
|
||||||
}
|
console.log('I am', this._firstName, this._lastName);
|
||||||
|
}
|
||||||
// This line adds getters and setters for the profession object. Note that in general you could just write your own get and set functions like the 'log' method above.
|
|
||||||
// Since in this example we are trying the mimic the class above, we try to use the getters and setters property provided by JavaScript
|
// This line adds getters and setters for the profession object. Note that in general you could just write your own get and set functions like the 'log' method above.
|
||||||
Object.defineProperty(Person.prototype, 'profession', {
|
// Since in this example we are trying the mimic the class above, we try to use the getters and setters property provided by JavaScript
|
||||||
set: function(val) {
|
Object.defineProperty(Person.prototype, 'profession', {
|
||||||
this._profession = val;
|
set: function(val) {
|
||||||
},
|
this._profession = val;
|
||||||
get: function() {
|
},
|
||||||
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
get: function() {
|
||||||
}
|
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
||||||
})
|
}
|
||||||
`
|
})
|
||||||
|
```
|
||||||
|
|
||||||
يمكنك أيضا كتابة أساليب النموذج الأولي على وظيفة `Person` النحو التالي
|
يمكنك أيضا كتابة أساليب النموذج الأولي على وظيفة `Person` النحو التالي
|
||||||
|
|
||||||
`Person.prototype = {
|
```javascript
|
||||||
log: function() {
|
Person.prototype = {
|
||||||
console.log('I am ', this._firstName, this._lastName);
|
log: function() {
|
||||||
}
|
console.log('I am ', this._firstName, this._lastName);
|
||||||
set profession(val) {
|
}
|
||||||
this._profession = val;
|
set profession(val) {
|
||||||
}
|
this._profession = val;
|
||||||
|
}
|
||||||
get profession() {
|
|
||||||
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
get profession() {
|
||||||
}
|
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
||||||
|
}
|
||||||
}
|
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### استخدام أساليب مضافة داخليا
|
### استخدام أساليب مضافة داخليا
|
||||||
|
|
||||||
هنا تضاف الأساليب داخليا بدلا من النموذج الأولي
|
هنا تضاف الأساليب داخليا بدلا من النموذج الأولي
|
||||||
|
|
||||||
`function Person(firstName, lastName) {
|
```javascript
|
||||||
this._firstName = firstName;
|
function Person(firstName, lastName) {
|
||||||
this._lastName = lastName;
|
this._firstName = firstName;
|
||||||
|
this._lastName = lastName;
|
||||||
this.log = function() {
|
|
||||||
console.log('I am ', this._firstName, this._lastName);
|
this.log = function() {
|
||||||
}
|
console.log('I am ', this._firstName, this._lastName);
|
||||||
|
}
|
||||||
Object.defineProperty(this, 'profession', {
|
|
||||||
set: function(val) {
|
Object.defineProperty(this, 'profession', {
|
||||||
this._profession = val;
|
set: function(val) {
|
||||||
},
|
this._profession = val;
|
||||||
get: function() {
|
},
|
||||||
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
get: function() {
|
||||||
}
|
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
||||||
})
|
}
|
||||||
}
|
})
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### إخفاء التفاصيل في فصول بالرموز
|
### إخفاء التفاصيل في فصول بالرموز
|
||||||
|
|
||||||
في أغلب الأحيان يجب إخفاء بعض الخصائص والأساليب لمنع الوصول من خارج الوظيفة. مع الفئات ، للحصول على هذه الوظيفة ، إحدى الطرق للقيام بذلك باستخدام الرموز. Symbol هو نوع جديد من جافا سكريبت المدمج ، والذي يمكن استدعاؤه لإعطاء قيمة رمزية جديدة. كل رمز فريد ويمكن استخدامه كمفتاح على الكائن. لذا ، فإن إحدى حالات استخدام الرموز هي أنه يمكنك إضافة شيء إلى كائن قد لا تمتلكه ، وقد لا ترغب في التصادم مع أي مفاتيح أخرى للعنصر ، لذلك ، فإن إنشاء كائن جديد وإضافة خاصية على هذا الكائن باستخدام الرمز هو الأكثر أمانًا . أيضا ، عندما يتم إضافة قيمة الرمز إلى كائن ؛ لا أحد آخر يعرف كيفية الحصول عليه.
|
في أغلب الأحيان يجب إخفاء بعض الخصائص والأساليب لمنع الوصول من خارج الوظيفة. مع الفئات ، للحصول على هذه الوظيفة ، إحدى الطرق للقيام بذلك باستخدام الرموز. Symbol هو نوع جديد من جافا سكريبت المدمج ، والذي يمكن استدعاؤه لإعطاء قيمة رمزية جديدة. كل رمز فريد ويمكن استخدامه كمفتاح على الكائن. لذا ، فإن إحدى حالات استخدام الرموز هي أنه يمكنك إضافة شيء إلى كائن قد لا تمتلكه ، وقد لا ترغب في التصادم مع أي مفاتيح أخرى للعنصر ، لذلك ، فإن إنشاء كائن جديد وإضافة خاصية على هذا الكائن باستخدام الرمز هو الأكثر أمانًا . أيضا ، عندما يتم إضافة قيمة الرمز إلى كائن ؛ لا أحد آخر يعرف كيفية الحصول عليه.
|
||||||
|
|
||||||
`class Person {
|
```javascript
|
||||||
constructor(firstName, lastName) {
|
class Person {
|
||||||
this._firstName = firstName;
|
constructor(firstName, lastName) {
|
||||||
this._lastName = lastName;
|
this._firstName = firstName;
|
||||||
}
|
this._lastName = lastName;
|
||||||
|
}
|
||||||
log() {
|
|
||||||
console.log('I am', this._firstName, this._lastName);
|
log() {
|
||||||
}
|
console.log('I am', this._firstName, this._lastName);
|
||||||
|
}
|
||||||
// setters
|
|
||||||
set profession(val) {
|
// setters
|
||||||
this._profession = val;
|
set profession(val) {
|
||||||
}
|
this._profession = val;
|
||||||
// getters
|
}
|
||||||
get profession() {
|
// getters
|
||||||
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
get profession() {
|
||||||
}
|
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
||||||
// With the above code, even though we can access the properties outside the function to change their content what if we don't want that.
|
}
|
||||||
// Symbols come to rescue.
|
// With the above code, even though we can access the properties outside the function to change their content what if we don't want that.
|
||||||
let s_firstname = new Symbol();
|
// Symbols come to rescue.
|
||||||
|
let s_firstname = new Symbol();
|
||||||
class Person {
|
|
||||||
constructor(firstName, lastName) {
|
class Person {
|
||||||
this[s_firstName] = firstName;
|
constructor(firstName, lastName) {
|
||||||
this._lastName = lastName;
|
this[s_firstName] = firstName;
|
||||||
}
|
this._lastName = lastName;
|
||||||
|
}
|
||||||
log() {
|
|
||||||
console.log('I am', this._firstName, this._lastName);
|
log() {
|
||||||
}
|
console.log('I am', this._firstName, this._lastName);
|
||||||
|
}
|
||||||
// setters
|
|
||||||
set profession(val) {
|
// setters
|
||||||
this._profession = val;
|
set profession(val) {
|
||||||
}
|
this._profession = val;
|
||||||
// getters
|
}
|
||||||
get profession() {
|
// getters
|
||||||
console.log(this[s_firstName], this._lastName, 'is a', this._profession);
|
get profession() {
|
||||||
}
|
console.log(this[s_firstName], this._lastName, 'is a', this._profession);
|
||||||
`
|
}
|
||||||
|
```
|
||||||
|
|
||||||
#### معلومات اكثر:
|
#### معلومات اكثر:
|
||||||
@ -32,36 +32,38 @@ localeTitle: إغلاق
|
|||||||
|
|
||||||
### مثال آخر
|
### مثال آخر
|
||||||
|
|
||||||
`function by(propName) {
|
```js
|
||||||
return function(a, b) {
|
function by(propName) {
|
||||||
return a[propName] - b[propName];
|
return function(a, b) {
|
||||||
}
|
return a[propName] - b[propName];
|
||||||
}
|
}
|
||||||
|
}
|
||||||
const person1 = {name: 'joe', height: 72};
|
|
||||||
const person2 = {name: 'rob', height: 70};
|
const person1 = {name: 'joe', height: 72};
|
||||||
const person3 = {name: 'nicholas', height: 66};
|
const person2 = {name: 'rob', height: 70};
|
||||||
|
const person3 = {name: 'nicholas', height: 66};
|
||||||
const arr_ = [person1, person2, person3];
|
|
||||||
|
const arr_ = [person1, person2, person3];
|
||||||
const arr_sorted = arr_.sort(by('height')); // [ { name: 'nicholas', height: 66 }, { name: 'rob', height: 70 },{ name: 'joe', height: 72 } ]
|
|
||||||
`
|
const arr_sorted = arr_.sort(by('height')); // [ { name: 'nicholas', height: 66 }, { name: 'rob', height: 70 },{ name: 'joe', height: 72 } ]
|
||||||
|
```
|
||||||
|
|
||||||
إغلاق "يتذكر" البيئة التي تم إنشاؤه فيها. تتكون هذه البيئة من أي متغيرات محلية كانت ضمن النطاق في الوقت الذي تم فيه إنشاء الإغلاق.
|
إغلاق "يتذكر" البيئة التي تم إنشاؤه فيها. تتكون هذه البيئة من أي متغيرات محلية كانت ضمن النطاق في الوقت الذي تم فيه إنشاء الإغلاق.
|
||||||
|
|
||||||
`function outside(num) {
|
```js
|
||||||
var rememberedVar = num; // In this example, rememberedVar is the lexical environment that the closure 'remembers'
|
function outside(num) {
|
||||||
return function inside() { // This is the function which the closure 'remembers'
|
var rememberedVar = num; // In this example, rememberedVar is the lexical environment that the closure 'remembers'
|
||||||
console.log(rememberedVar)
|
return function inside() { // This is the function which the closure 'remembers'
|
||||||
}
|
console.log(rememberedVar)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
var remember1 = outside(7); // remember1 is now a closure which contains rememberedVar = 7 in its lexical environment, and //the function 'inside'
|
|
||||||
var remember2 = outside(9); // remember2 is now a closure which contains rememberedVar = 9 in its lexical environment, and //the function 'inside'
|
var remember1 = outside(7); // remember1 is now a closure which contains rememberedVar = 7 in its lexical environment, and //the function 'inside'
|
||||||
|
var remember2 = outside(9); // remember2 is now a closure which contains rememberedVar = 9 in its lexical environment, and //the function 'inside'
|
||||||
remember1(); // This now executes the function 'inside' which console.logs(rememberedVar) => 7
|
|
||||||
remember2(); // This now executes the function 'inside' which console.logs(rememberedVar) => 9
|
remember1(); // This now executes the function 'inside' which console.logs(rememberedVar) => 7
|
||||||
`
|
remember2(); // This now executes the function 'inside' which console.logs(rememberedVar) => 9
|
||||||
|
```
|
||||||
|
|
||||||
عمليات الإغلاق مفيدة لأنها تتيح لك "تذكر" البيانات ثم تتيح لك العمل على هذه البيانات من خلال الوظائف التي تم إرجاعها. هذا يسمح لجافا سكريبت بمحاكاة الأساليب الخاصة الموجودة في لغات البرمجة الأخرى. تعتبر الطرق الخاصة مفيدة لتقييد الوصول إلى التعليمات البرمجية بالإضافة إلى إدارة مساحة الاسم العام الخاصة بك.
|
عمليات الإغلاق مفيدة لأنها تتيح لك "تذكر" البيانات ثم تتيح لك العمل على هذه البيانات من خلال الوظائف التي تم إرجاعها. هذا يسمح لجافا سكريبت بمحاكاة الأساليب الخاصة الموجودة في لغات البرمجة الأخرى. تعتبر الطرق الخاصة مفيدة لتقييد الوصول إلى التعليمات البرمجية بالإضافة إلى إدارة مساحة الاسم العام الخاصة بك.
|
||||||
|
|
||||||
@ -69,25 +71,26 @@ localeTitle: إغلاق
|
|||||||
|
|
||||||
يمكن أيضًا استخدام عمليات الإغلاق لتغليف البيانات / الطرق الخاصة. الق نظرة على هذا المثال:
|
يمكن أيضًا استخدام عمليات الإغلاق لتغليف البيانات / الطرق الخاصة. الق نظرة على هذا المثال:
|
||||||
|
|
||||||
`const bankAccount = (initialBalance) => {
|
```javascript
|
||||||
const balance = initialBalance;
|
const bankAccount = (initialBalance) => {
|
||||||
|
const balance = initialBalance;
|
||||||
return {
|
|
||||||
getBalance: function() {
|
return {
|
||||||
return balance;
|
getBalance: function() {
|
||||||
},
|
return balance;
|
||||||
deposit: function(amount) {
|
},
|
||||||
balance += amount;
|
deposit: function(amount) {
|
||||||
return balance;
|
balance += amount;
|
||||||
},
|
return balance;
|
||||||
};
|
},
|
||||||
};
|
};
|
||||||
|
};
|
||||||
const account = bankAccount(100);
|
|
||||||
|
const account = bankAccount(100);
|
||||||
account.getBalance(); // 100
|
|
||||||
account.deposit(10); // 110
|
account.getBalance(); // 100
|
||||||
`
|
account.deposit(10); // 110
|
||||||
|
```
|
||||||
|
|
||||||
في هذا المثال ، لن نتمكن من الوصول إلى `balance` من أي مكان خارج وظيفة `bankAccount` ، مما يعني أننا قمنا للتو بإنشاء متغير خاص. أين الإغلاق؟ حسنًا ، فكر في ما `bankAccount()` . إنها في الواقع ترجع كائنًا يحتوي على مجموعة من الوظائف داخله ، ومع ذلك عندما نطلق على `account.getBalance()` ، فإن الوظيفة قادرة على "تذكر" مرجعها الأولي إلى `balance` . هذه هي قوة الإغلاق ، حيث "تتذكر" الدالة نطاقها المعجمى (ترجمة النطاق الزمني) ، حتى عندما يتم تنفيذ الوظيفة خارج النطاق المعجمى.
|
في هذا المثال ، لن نتمكن من الوصول إلى `balance` من أي مكان خارج وظيفة `bankAccount` ، مما يعني أننا قمنا للتو بإنشاء متغير خاص. أين الإغلاق؟ حسنًا ، فكر في ما `bankAccount()` . إنها في الواقع ترجع كائنًا يحتوي على مجموعة من الوظائف داخله ، ومع ذلك عندما نطلق على `account.getBalance()` ، فإن الوظيفة قادرة على "تذكر" مرجعها الأولي إلى `balance` . هذه هي قوة الإغلاق ، حيث "تتذكر" الدالة نطاقها المعجمى (ترجمة النطاق الزمني) ، حتى عندما يتم تنفيذ الوظيفة خارج النطاق المعجمى.
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user