fix: converted single to triple backticks9 (#36236)
This commit is contained in:
Randell Dawson
Tom
@ -12,28 +12,28 @@ localeTitle: ف يوم
|
||||
|
||||
### مثال
|
||||
|
||||
`
|
||||
<html>
|
||||
<head>
|
||||
<title>Paragraph example</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This <strong>sentence</strong> was created to show how the paragraph works.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Paragraph example</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This <strong>sentence</strong> was created to show how the paragraph works.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
يمكنك أيضًا تضمين عنصر الارتساء `<a>` في فقرة.
|
||||
|
||||
### مثال
|
||||
|
||||
`
|
||||
<p>Here's a
|
||||
<a href="http://freecodecamp.com">link to Free Code Camp.com</a>
|
||||
for you to follow.</p>
|
||||
`
|
||||
```html
|
||||
<p>Here's a
|
||||
<a href="http://freecodecamp.com">link to Free Code Camp.com</a>
|
||||
for you to follow.</p>
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
||||
@ -6,10 +6,10 @@ localeTitle: يوم واحد
|
||||
|
||||
في HTML ، يتم استخدام العلامة `<s>` في نص يتوسطه خط. على سبيل المثال:
|
||||
|
||||
`
|
||||
<p><s>This year is the year of the monkey.</s></p>
|
||||
<p>This year is the year of the Rooster.</p>
|
||||
`
|
||||
```html
|
||||
<p><s>This year is the year of the monkey.</s></p>
|
||||
<p>This year is the year of the Rooster.</p>
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
||||
@ -8,24 +8,27 @@ localeTitle: علامة البرنامج النصي
|
||||
|
||||
يتم استخدام العلامة / `<script>` لدمج جافا سكريبت من جانب العميل في ملف HTML الخاص بك والذي يمكن استخدامه لإضافة التفاعلية والمنطق إلى موقع الويب الخاص بك
|
||||
|
||||
`<script>
|
||||
//JavaScript code is written here
|
||||
</script>
|
||||
|
||||
<script src="js/app.js">
|
||||
`
|
||||
```
|
||||
<script>
|
||||
//JavaScript code is written here
|
||||
</script>
|
||||
|
||||
<script src="js/app.js">
|
||||
```
|
||||
|
||||
يمكن استخدام العلامة لتشمل شفرة جافا سكريبت الفعلية في 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
|
||||
|
||||
|
||||
@ -10,19 +10,19 @@ localeTitle: قسم القسم
|
||||
|
||||
لا ينبغي استخدام عنصر `<section>` بدلاً من عنصر `<div>` إذا كانت هناك حاجة إلى حاوية عامة. يجب استخدامه لتعريف الأقسام في صفحة HTML.
|
||||
|
||||
`
|
||||
<html>
|
||||
<head>
|
||||
<title>Section Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<h1>Heading</h1>
|
||||
<p>Bunch of awesome content</p>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Section Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<h1>Heading</h1>
|
||||
<p>Bunch of awesome content</p>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
||||
@ -24,9 +24,9 @@ localeTitle: يوم سبان
|
||||
|
||||
يشبه رمز الفقرة ذات النص الأحمر هذا:
|
||||
|
||||
`
|
||||
<p>This paragraph has <span style="color:red">red span styling</span> inside it without affecting the rest of the document.</p>
|
||||
`
|
||||
```html
|
||||
<p>This paragraph has <span style="color:red">red span styling</span> inside it without affecting the rest of the document.</p>
|
||||
```
|
||||
|
||||
#### الاختلافات بين `<span>` و `<div>`
|
||||
|
||||
|
||||
@ -8,8 +8,9 @@ localeTitle: علامة قوية
|
||||
|
||||
### استعمال
|
||||
|
||||
`<strong> Hello World! </strong>
|
||||
`
|
||||
```
|
||||
<strong> Hello World! </strong>
|
||||
```
|
||||
|
||||
ينتج رمز أعلاه في
|
||||
|
||||
@ -33,12 +34,13 @@ localeTitle: علامة قوية
|
||||
|
||||
### مثال:
|
||||
|
||||
`<body>
|
||||
<p>
|
||||
<strong> This </strong> is important.
|
||||
</p>
|
||||
</body>
|
||||
`
|
||||
```
|
||||
<body>
|
||||
<p>
|
||||
<strong> This </strong> is important.
|
||||
</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
||||
@ -26,15 +26,15 @@ localeTitle: علامة نمط
|
||||
|
||||
تُستخدم علامة النمط لتعيين أي أنماط CSS لصفحة الويب داخل مستند. يجب أن تكون علامة النمط متداخلة مع قسم الرأس في مستند html:
|
||||
|
||||
`
|
||||
<head>
|
||||
<style>
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
`
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
```
|
||||
|
||||
يمكنك كتابة أي علامة نمط داخلية للرمز CSS - وفقًا للبناء الخاص بها.
|
||||
@ -8,18 +8,18 @@ localeTitle: علامة الجدول
|
||||
|
||||
### مثال
|
||||
|
||||
`
|
||||
<table>
|
||||
<tr>
|
||||
<td>Row 1, Cell 1</td>
|
||||
<td>Row 1, Cell 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Row 2, Cell 1</td>
|
||||
<td>Row 2, Cell 2</td>
|
||||
</tr>
|
||||
</table>
|
||||
`
|
||||
```html
|
||||
<table>
|
||||
<tr>
|
||||
<td>Row 1, Cell 1</td>
|
||||
<td>Row 1, Cell 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Row 2, Cell 1</td>
|
||||
<td>Row 2, Cell 2</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
كتلة التعليمة البرمجية هذه قد ينتج الإخراج التالي:
|
||||
|
||||
|
||||
@ -15,22 +15,22 @@ localeTitle: اليوم الثاني
|
||||
|
||||
### مثال
|
||||
|
||||
`
|
||||
<html>
|
||||
<head>
|
||||
<title>Td Tag Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Header1</th>
|
||||
<th>Header2</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell A</td>
|
||||
<td>Cell B</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Td Tag Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Header1</th>
|
||||
<th>Header2</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell A</td>
|
||||
<td>Cell B</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -10,11 +10,11 @@ localeTitle: علامة Textarea
|
||||
|
||||
عينة من الرموز:
|
||||
|
||||
`
|
||||
<form>
|
||||
<textarea name="comment" rows="8" cols="80" maxlength="500" placeholder="Enter your comment here..." required></textarea>
|
||||
</form>
|
||||
`
|
||||
```html
|
||||
<form>
|
||||
<textarea name="comment" rows="8" cols="80" maxlength="500" placeholder="Enter your comment here..." required></textarea>
|
||||
</form>
|
||||
```
|
||||
|
||||
السمات الأكثر شيوعًا: تحدد `row` و `cols` ارتفاع وعرض النص تحدد السمة `placeholder` النص المرئي للمستخدم ، فهي تساعد المستخدم على فهم البيانات التي يجب كتابتها تحدد السمة `maxlength` الحد الأقصى لطول النص الذي يمكن كتابته في textarea ، لا يمكن للمستخدم إرسال المزيد من الأحرف تعني السمة `required` أنه يجب ملء هذا الحقل قبل إرسال النموذج
|
||||
|
||||
|
||||
@ -18,19 +18,19 @@ localeTitle: كيانات HTML
|
||||
|
||||
كيان الشخصية يشبه هذا:
|
||||
|
||||
`
|
||||
<!-- format &[entity_name]; -->
|
||||
<!-- example for a less-than sign (<) -->
|
||||
<
|
||||
`
|
||||
```html
|
||||
<!-- format &[entity_name]; -->
|
||||
<!-- example for a less-than sign (<) -->
|
||||
<
|
||||
```
|
||||
|
||||
أو
|
||||
|
||||
`
|
||||
<!-- &#[entity_number]; -->
|
||||
<!-- example for a less-than sign (<) -->
|
||||
<
|
||||
`
|
||||
```html
|
||||
<!-- &#[entity_number]; -->
|
||||
<!-- example for a less-than sign (<) -->
|
||||
<
|
||||
```
|
||||
|
||||
## دليل مرجعي
|
||||
|
||||
|
||||
@ -24,26 +24,26 @@ localeTitle: نماذج HTML
|
||||
|
||||
مثال الكود:
|
||||
|
||||
`
|
||||
<form>
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" name="username" id="username">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password" id="password">
|
||||
<input type="radio" name="gender" value="male">Male<br>
|
||||
<input type="radio" name="gender" value="female">Female<br>
|
||||
<input type="radio" name="gender" value="other">Other
|
||||
<input list="Options">
|
||||
<datalist id="Options">
|
||||
<option value="Option1">
|
||||
<option value="Option2">
|
||||
<option value="Option3">
|
||||
</datalist>
|
||||
<input type="submit" value="Submit">
|
||||
<input type="color">
|
||||
<input type="checkbox" name="correct" value="correct">Correct
|
||||
</form>
|
||||
`
|
||||
```html
|
||||
<form>
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" name="username" id="username">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password" id="password">
|
||||
<input type="radio" name="gender" value="male">Male<br>
|
||||
<input type="radio" name="gender" value="female">Female<br>
|
||||
<input type="radio" name="gender" value="other">Other
|
||||
<input list="Options">
|
||||
<datalist id="Options">
|
||||
<option value="Option1">
|
||||
<option value="Option2">
|
||||
<option value="Option3">
|
||||
</datalist>
|
||||
<input type="submit" value="Submit">
|
||||
<input type="color">
|
||||
<input type="checkbox" name="correct" value="correct">Correct
|
||||
</form>
|
||||
```
|
||||
|
||||
العناصر الأخرى التي يمكن أن تحتوي على الشكل:
|
||||
|
||||
|
||||
@ -12,20 +12,20 @@ localeTitle: صوت HTML5
|
||||
|
||||
#### مثال 1
|
||||
|
||||
`
|
||||
<audio controls>
|
||||
<source src="tutorial.ogg" type="audio/ogg">
|
||||
<source src="tutorial.mp3" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
`
|
||||
```html
|
||||
<audio controls>
|
||||
<source src="tutorial.ogg" type="audio/ogg">
|
||||
<source src="tutorial.mp3" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
```
|
||||
|
||||
#### مثال 2
|
||||
|
||||
`
|
||||
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" controls loop autoplay>
|
||||
</audio>
|
||||
`
|
||||
```html
|
||||
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" controls loop autoplay>
|
||||
</audio>
|
||||
```
|
||||
|
||||
تتضمن سمة `controls` الصوتية مثل التشغيل والإيقاف المؤقت ومستوى الصوت. إذا لم تستخدم هذه السمة ، فلن يتم عرض أي عناصر تحكم.
|
||||
|
||||
|
||||
@ -81,52 +81,52 @@ The `<section>` و `<article>` العناصر متشابهة م
|
||||
1. تهدف المقالة إلى أن تكون قابلة للتوزيع أو القابلة لإعادة الاستخدام بشكل مستقل.
|
||||
2. القسم هو تجميع موضوعي للمحتوى.
|
||||
|
||||
`
|
||||
<section>
|
||||
<p>Top Stories</p>
|
||||
<section>
|
||||
<p>News</p>
|
||||
<article>Story 1</article>
|
||||
<article>Story 2</article>
|
||||
<article>Story 3</article>
|
||||
</section>
|
||||
<section>
|
||||
<p>Sport</p>
|
||||
<article>Story 1</article>
|
||||
<article>Story 2</article>
|
||||
<article>Story 3</article>
|
||||
</section>
|
||||
</section>
|
||||
`
|
||||
```html
|
||||
<section>
|
||||
<p>Top Stories</p>
|
||||
<section>
|
||||
<p>News</p>
|
||||
<article>Story 1</article>
|
||||
<article>Story 2</article>
|
||||
<article>Story 3</article>
|
||||
</section>
|
||||
<section>
|
||||
<p>Sport</p>
|
||||
<article>Story 1</article>
|
||||
<article>Story 2</article>
|
||||
<article>Story 3</article>
|
||||
</section>
|
||||
</section>
|
||||
```
|
||||
|
||||
#### `<header>` و `<hgroup>`
|
||||
|
||||
`<header>` عنصر موجود بشكل عام في أعلى مستند أو قسم أو مقالة ويحتوي عادةً على العنوان الرئيسي وبعض أدوات التنقل والبحث.
|
||||
|
||||
`
|
||||
<header>
|
||||
<h1>Company A</h1>
|
||||
<ul>
|
||||
<li><a href="/home">Home</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
<li><a href="/contact">Contact us</a></li>
|
||||
</ul>
|
||||
<form target="/search">
|
||||
<input name="q" type="search" />
|
||||
<input type="submit" />
|
||||
</form>
|
||||
</header>
|
||||
`
|
||||
```html
|
||||
<header>
|
||||
<h1>Company A</h1>
|
||||
<ul>
|
||||
<li><a href="/home">Home</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
<li><a href="/contact">Contact us</a></li>
|
||||
</ul>
|
||||
<form target="/search">
|
||||
<input name="q" type="search" />
|
||||
<input type="submit" />
|
||||
</form>
|
||||
</header>
|
||||
```
|
||||
|
||||
`<hgroup>` يجب استخدام عنصر حيث تريد عنوان رئيسي مع واحد أو أكثر من العناوين الفرعية.
|
||||
|
||||
`
|
||||
<hgroup>
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Subheading 1</h2>
|
||||
<h2>Subheading 2</h2>
|
||||
</hgroup>
|
||||
`
|
||||
```html
|
||||
<hgroup>
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Subheading 1</h2>
|
||||
<h2>Subheading 2</h2>
|
||||
</hgroup>
|
||||
```
|
||||
|
||||
تذكر ، أن رأس `<header>` عنصر يمكن أن يحتوي على أي محتوى ، ولكن `<hgroup>` لا يمكن أن يحتوي العنصر إلا على رؤوس أخرى ، وهي `<h1>` إلى `<h6>` بما في ذلك `<hgroup>` .
|
||||
|
||||
@ -134,47 +134,47 @@ The `<section>` و `<article>` العناصر متشابهة م
|
||||
|
||||
The `<aside>` عنصر مخصص للمحتوى الذي ليس جزءًا من تدفق النص الذي يظهر فيه ، ومع ذلك لا يزال مرتبطًا بطريقة ما. هذا `<aside>` كشريط جانبي للمحتوى الرئيسي الخاص بك.
|
||||
|
||||
`
|
||||
<aside>
|
||||
<p>This is a sidebar, for example a terminology definition or a short background to a historical figure.</p>
|
||||
</aside>
|
||||
`
|
||||
```html
|
||||
<aside>
|
||||
<p>This is a sidebar, for example a terminology definition or a short background to a historical figure.</p>
|
||||
</aside>
|
||||
```
|
||||
|
||||
قبل HTML5 ، تم إنشاء قوائمنا باستخدام `<ul>` 's و `<li>` الصورة. الآن ، مع هذه ، يمكننا فصل عناصر القائمة لدينا باستخدام `<nav>` للتنقل بين صفحاتك. يمكنك الحصول على أي عدد من `<nav>` العناصر على الصفحة ، على سبيل المثال ، من الشائع أن يكون لديك نظام ملاحة عمومي عبر الجزء العلوي (في `<header>` ) والتنقل المحلي في شريط جانبي (في عنصر `<aside>` ).
|
||||
|
||||
`
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/home">Home</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
<li><a href="/contact">Contact us</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
`
|
||||
```html
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/home">Home</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
<li><a href="/contact">Contact us</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
```
|
||||
|
||||
#### `<footer>`
|
||||
|
||||
إذا كان هناك رأس `<header>` يجب أن يكون هناك `<footer>` . A `<footer>` بشكل عام في أسفل مستند أو قسم أو مقالة. تمامًا مثل `<header>` المحتوى عبارة عن معلومات عامة ، مثل تفاصيل المؤلف ، أو المعلومات القانونية ، و / أو روابط إلى المعلومات ذات الصلة. تسري أيضًا على تضمين `<section>` عناصر داخل تذييل الصفحة.
|
||||
|
||||
`
|
||||
<footer>©Company A</footer>
|
||||
`
|
||||
```html
|
||||
<footer>©Company A</footer>
|
||||
```
|
||||
|
||||
#### `<small>`
|
||||
|
||||
ال `<small>` يظهر العنصر غالبًا داخل `<footer>` أو `<aside>` العنصر الذي عادة ما يحتوي على معلومات حقوق الطبع والنشر أو التنازلات القانونية ، وغيرها من مثل هذه المطبوعة الجميلة. ومع ذلك ، هذا غير مخصص لجعل النص أصغر. إنه مجرد وصف محتواه ، وليس وصف العرض التقديمي.
|
||||
|
||||
`
|
||||
<footer><small>©Company A</small> Date</footer>
|
||||
`
|
||||
```html
|
||||
<footer><small>©Company A</small> Date</footer>
|
||||
```
|
||||
|
||||
#### `<time>`
|
||||
|
||||
The `<time>` يسمح عنصر لا لبس فيها ISO 8601 تاريخ لإرفاق نسخة الإنسان من ذلك التاريخ.
|
||||
|
||||
`
|
||||
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>
|
||||
`
|
||||
```html
|
||||
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>
|
||||
```
|
||||
|
||||
لماذا تهتم بـ `<time>` ؟ في حين يستطيع البشر قراءة الوقت الذي يمكن أن يفسد من خلال السياق بالطريقة العادية ، يمكن لأجهزة الكمبيوتر قراءة تاريخ ISO 8601 ورؤية التاريخ والوقت والمنطقة الزمنية.
|
||||
|
||||
@ -182,12 +182,12 @@ The `<time>` يسمح عنصر لا لبس فيها ISO 8601 تاريخ
|
||||
|
||||
`<figure>` لتغليف محتوى الصور حوله ، و `<figcaption>` هو تسمية صورتك.
|
||||
|
||||
`
|
||||
<figure>
|
||||
<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>
|
||||
</figure>
|
||||
`
|
||||
```html
|
||||
<figure>
|
||||
<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>
|
||||
</figure>
|
||||
```
|
||||
|
||||
### تعرف على المزيد حول عناصر HTML5 الجديدة:
|
||||
|
||||
|
||||
@ -32,19 +32,21 @@ localeTitle: HTML5 فيديو
|
||||
|
||||
|
||||
|
||||
`#### poster
|
||||
|
||||
The "poster" attribute is the image that shows on the video until the user clicks to play it.
|
||||
`
|
||||
```
|
||||
#### poster
|
||||
|
||||
The "poster" attribute is the image that shows on the video until the user clicks to play it.
|
||||
```
|
||||
|
||||
أتش تي أم أل
|
||||
|
||||
|
||||
|
||||
`#### 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.
|
||||
`
|
||||
```
|
||||
#### 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.
|
||||
```
|
||||
|
||||
أتش تي أم أل
|
||||
|
||||
|
||||
@ -12,21 +12,23 @@ localeTitle: تخزين HTML5 على الويب
|
||||
|
||||
`window.localStorage` : يخزن البيانات بدون تاريخ انتهاء الصلاحية ويعيش حتى تتم إزالتها.
|
||||
|
||||
`// Store Item
|
||||
localStorage.setItem("foo", "bar");
|
||||
|
||||
// Get Item
|
||||
localStorage.getItem("foo"); //returns "bar"
|
||||
`
|
||||
```javascript
|
||||
// Store Item
|
||||
localStorage.setItem("foo", "bar");
|
||||
|
||||
// Get Item
|
||||
localStorage.getItem("foo"); //returns "bar"
|
||||
```
|
||||
|
||||
`window.sessionStorage` : تخزين البيانات لجلسة واحدة ، حيث يتم فقدان البيانات عند إغلاق علامة تبويب المتصفح / المتصفح.
|
||||
|
||||
`// Store Item
|
||||
sessionStorage.setItem("foo", "bar");
|
||||
|
||||
// Get Item
|
||||
sessionStorage.getItem("foo"); //returns "bar"
|
||||
`
|
||||
```javascript
|
||||
// Store Item
|
||||
sessionStorage.setItem("foo", "bar");
|
||||
|
||||
// Get Item
|
||||
sessionStorage.getItem("foo"); //returns "bar"
|
||||
```
|
||||
|
||||
نظرًا لأن التطبيق الحالي يعتمد فقط تعيينات سلسلة إلى سلسلة ، تحتاج إلى إجراء تسلسل وإزالة تسلسل هياكل البيانات الأخرى.
|
||||
|
||||
@ -34,18 +36,21 @@ localeTitle: تخزين HTML5 على الويب
|
||||
|
||||
على سبيل المثال لـ JSON المعطى
|
||||
|
||||
`var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };
|
||||
`
|
||||
```
|
||||
var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };
|
||||
```
|
||||
|
||||
تم أولاً تحويل كائن JSON إلى سلسلة وحفظه في وحدة التخزين المحلية:
|
||||
|
||||
`localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));
|
||||
`
|
||||
```
|
||||
localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));
|
||||
```
|
||||
|
||||
للحصول على كائن JSON من السلسلة المخزنة في التخزين المحلي:
|
||||
|
||||
`var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));
|
||||
`
|
||||
```
|
||||
var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
||||
@ -16,37 +16,37 @@ localeTitle: نوافذ الأطر المدمجة
|
||||
|
||||
تضمين فيديو YouTube مع `<iframe>` :
|
||||
|
||||
`
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es"
|
||||
frameborder="0" allowfullscreen></iframe>
|
||||
`
|
||||
```html
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es"
|
||||
frameborder="0" allowfullscreen></iframe>
|
||||
```
|
||||
|
||||
تضمين خرائط Google مع `<iframe>` :
|
||||
|
||||
`
|
||||
<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>
|
||||
`
|
||||
```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"
|
||||
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
|
||||
```
|
||||
|
||||
### نص بديل
|
||||
|
||||
يتم استخدام المحتوى بين علامتي الفتح `<iframe>` كنص بديل ، ليتم عرضه إذا كان متصفح المشاهد لا يدعم iframe.
|
||||
|
||||
`
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es" frameborder="0">
|
||||
<p>Your browser does not support iframes.</p>
|
||||
</iframe>
|
||||
`
|
||||
```html
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/v8kFT4I31es" frameborder="0">
|
||||
<p>Your browser does not support iframes.</p>
|
||||
</iframe>
|
||||
```
|
||||
|
||||
### استهداف إطار Iframe في ارتباط
|
||||
|
||||
يمكن لأي رابط `<a>` أن يستهدف محتوى عنصر `<iframe>` . بدلاً من إعادة توجيه نافذة المتصفح إلى صفحة الويب المرتبطة ، سيعيد توجيه `<iframe>` . لكي يعمل هذا ، يجب أن تتطابق السمة `target` للعنصر `<a>` مع سمة `name` الخاصة بـ `<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>
|
||||
`
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
سيعرض هذا المثال علامة `<iframe>` فارغة في البداية ، ولكن عند النقر على الرابط أعلاه ، سيعيد توجيه `<iframe>` لعرض فيديو YouTube.
|
||||
|
||||
|
||||
@ -16,20 +16,20 @@ HTML5 يقدم مجموعة من العناصر الدلالية. على الر
|
||||
|
||||
## مثال بسيط على مستند HTML
|
||||
|
||||
`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Page Title</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>My First Heading</h1>
|
||||
<p>My first paragraph.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Page Title</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>My First Heading</h1>
|
||||
<p>My first paragraph.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
DOCTYPE html: يحدد هذا المستند ليكون HTML5
|
||||
|
||||
|
||||
@ -38,15 +38,16 @@ localeTitle: تخطيطات
|
||||
|
||||
تقدم HTML5 عناصر دلالية دلالية تحدد الأجزاء المختلفة لصفحة الويب:
|
||||
|
||||
`<header> - Defines a header for a document or a section
|
||||
<nav> - Defines a container for navigation links
|
||||
<section> - Defines a section in a document
|
||||
<article> - Defines an independent self-contained article
|
||||
<aside> - Defines content aside from the content (like a sidebar)
|
||||
<footer> - Defines a footer for a document or a section
|
||||
<details> - Defines additional details
|
||||
<summary> - Defines a heading for the <details> element
|
||||
`
|
||||
```
|
||||
<header> - Defines a header for a document or a section
|
||||
<nav> - Defines a container for navigation links
|
||||
<section> - Defines a section in a document
|
||||
<article> - Defines an independent self-contained article
|
||||
<aside> - Defines content aside from the content (like a sidebar)
|
||||
<footer> - Defines a footer for a document or a section
|
||||
<details> - Defines additional details
|
||||
<summary> - Defines a heading for the <details> element
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
||||
@ -22,12 +22,13 @@ localeTitle: قوائم
|
||||
|
||||
تتم كتابة قائمة مرتبة ك
|
||||
|
||||
`<ol>
|
||||
<li>January</li>
|
||||
<li>February</li>
|
||||
<li>March</li>
|
||||
</ol>
|
||||
`
|
||||
```HTML
|
||||
<ol>
|
||||
<li>January</li>
|
||||
<li>February</li>
|
||||
<li>March</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
ويتم عرضها على النحو التالي:
|
||||
|
||||
@ -37,12 +38,13 @@ localeTitle: قوائم
|
||||
|
||||
قائمة غير مرتبة مكتوبة باسم
|
||||
|
||||
`<ul>
|
||||
<li>Macintosh</li>
|
||||
<li>Fuji</li>
|
||||
<li>Gala</li>
|
||||
</ul>
|
||||
`
|
||||
```HTML
|
||||
<ul>
|
||||
<li>Macintosh</li>
|
||||
<li>Fuji</li>
|
||||
<li>Gala</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
ويتم عرضها على النحو التالي:
|
||||
|
||||
@ -56,20 +58,22 @@ localeTitle: قوائم
|
||||
|
||||
إزالة الرموز النقطية:
|
||||
|
||||
`ul {
|
||||
list-style: none;
|
||||
}
|
||||
`
|
||||
```CSS
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
```
|
||||
|
||||
قم بإدخال الخاص بك:
|
||||
|
||||
`ul li::before {
|
||||
content: "\2022";
|
||||
color: orange;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
}
|
||||
`
|
||||
```CSS
|
||||
ul li::before {
|
||||
content: "\2022";
|
||||
color: orange;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
}
|
||||
```
|
||||
|
||||
يضيف نمط المحتوى نقطية جديدة بينما يعمل نمط العرض والعرض على إنشاء مسافة بين الرمز النقطي والكلمة. يمكن تطبيق أنماط الخطوط العادية هنا إذا كنت ترغب في جعل الرمز النقطي أكبر أو أكثر جرأة.
|
||||
|
||||
@ -79,13 +83,14 @@ localeTitle: قوائم
|
||||
|
||||
في ما يلي مثال لقائمة الوصف:
|
||||
|
||||
`<dl>
|
||||
<dt>Programming</dt>
|
||||
<dd>The process of writing computer programs.</dd>
|
||||
<dt>freeCodeCamp</dt>
|
||||
<dd>An awesome non-profit organization teaching people how to code.</dd>
|
||||
</dl>
|
||||
`
|
||||
```HTML
|
||||
<dl>
|
||||
<dt>Programming</dt>
|
||||
<dd>The process of writing computer programs.</dd>
|
||||
<dt>freeCodeCamp</dt>
|
||||
<dd>An awesome non-profit organization teaching people how to code.</dd>
|
||||
</dl>
|
||||
```
|
||||
|
||||
والتي من شأنها أن تبدو وكأنها:
|
||||
|
||||
|
||||
@ -8,9 +8,9 @@ localeTitle: روابط Mailto
|
||||
|
||||
### بناء الجملة الأساسي مع المستلم هو:
|
||||
|
||||
`
|
||||
<a href="mailto:friend@something.com">Some text</a>
|
||||
`
|
||||
```html
|
||||
<a href="mailto:friend@something.com">Some text</a>
|
||||
```
|
||||
|
||||
### مزيد من التخصيص!
|
||||
|
||||
@ -32,9 +32,9 @@ Body: أكون مطورًا
|
||||
|
||||
رابط html الآن:
|
||||
|
||||
`
|
||||
<a href="mailto:?subject=Great%20news&body=I%20am%20becoming%20a%20developer">Send mail!</a>
|
||||
`
|
||||
```html
|
||||
<a href="mailto:?subject=Great%20news&body=I%20am%20becoming%20a%20developer">Send mail!</a>
|
||||
```
|
||||
|
||||
هنا ، تركنا mailto فارغة (mailto :؟). سيؤدي ذلك إلى فتح عميل البريد الإلكتروني للمستخدم وسيضيف المستخدم عنوان المستلم نفسه.
|
||||
|
||||
@ -44,9 +44,9 @@ Body: أكون مطورًا
|
||||
|
||||
يجب أن تسبق المعلمات الإضافية `&` .
|
||||
|
||||
`
|
||||
<a href="mailto:firstfriend@something.com?subject=Great%20news&cc=secondfriend@something.com,thirdfriend@something.com&bcc=fourthfriend@something.com">Send mail!</a>
|
||||
`
|
||||
```html
|
||||
<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 التالي ...
|
||||
|
||||
`
|
||||
<!DOCTYPE html>
|
||||
<p>Hello World.
|
||||
`
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<p>Hello World.
|
||||
```
|
||||
|
||||
سوف تقيم تلقائيا إلى ...
|
||||
|
||||
`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head></head>
|
||||
<body>
|
||||
<p>Hello world.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head></head>
|
||||
<body>
|
||||
<p>Hello world.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
مواصفات العلامة الاختيارية لعلامات HTML5 الأكثر شيوعًا هي كالتالي:
|
||||
|
||||
|
||||
@ -6,16 +6,17 @@ localeTitle: هيكل الصفحة
|
||||
|
||||
لإنشاء صفحاتك في `HTML` ، تحتاج إلى معرفة كيفية تنظيم صفحة `HTML` ، حيث أن هيكلية الصفحة تتبع الترتيب التالي:
|
||||
|
||||
`<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Title of the Page</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Content -->
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```HTML
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Title of the Page</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Content -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
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 بكسل.
|
||||
|
||||
`@media screen and (max-width: 768px) {
|
||||
.more-padding {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
`
|
||||
```
|
||||
@media screen and (max-width: 768px) {
|
||||
.more-padding {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2\. أطر CSS
|
||||
|
||||
@ -38,9 +40,9 @@ localeTitle: تصميم الويب سريع الاستجابة
|
||||
|
||||
في هذا المثال ، يحدد `col-md-9` و `col-sm-6` عرض علامة `<div>` استنادًا إلى ما إذا كانت الشاشة صغيرة أم متوسطة.
|
||||
|
||||
`
|
||||
<div class="col-12 col-md-6"></div>
|
||||
`
|
||||
```html
|
||||
<div class="col-12 col-md-6"></div>
|
||||
```
|
||||
|
||||
يقسم إطار Bootstrap الصف إلى اثني عشر عمودًا. في المثال أعلاه ، سوف ينتشر `<div>` عبر تسعة أو ستة منهم. يعد نظام الشبكة ، الموضح أدناه ، أمرًا أساسيًا في كيفية تسهيل Bootstrap للتصميم سريع الاستجابة.
|
||||
|
||||
|
||||
@ -10,46 +10,46 @@ localeTitle: توسيط صورة باستخدام Text Align Center
|
||||
|
||||
### مثال
|
||||
|
||||
`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Center an Image using text align center</title>
|
||||
<style>
|
||||
.img-container {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="img-container"> <!-- Block parent element -->
|
||||
<img src="user.png" alt="John Doe">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Center an Image using text align center</title>
|
||||
<style>
|
||||
.img-container {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="img-container"> <!-- Block parent element -->
|
||||
<img src="user.png" alt="John Doe">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**ملاحظة:** يجب أن يكون العنصر الرئيسي عنصر كتلة. إذا لم يكن عنصر كتلة ، يجب عليك إضافة `display: block;` خاصية CSS مع خاصية `text-align` .
|
||||
|
||||
`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Center an Image using text align center</title>
|
||||
<style>
|
||||
.img-container {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<span class="img-container"> <!-- Inline parent element -->
|
||||
<img src="user.png" alt="">
|
||||
</span>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Center an Image using text align center</title>
|
||||
<style>
|
||||
.img-container {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<span class="img-container"> <!-- Inline parent element -->
|
||||
<img src="user.png" alt="">
|
||||
</span>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**العرض التوضيحي:** [Codepen](https://codepen.io/aravindio/pen/PJMXbp)
|
||||
|
||||
|
||||
@ -18,11 +18,11 @@ localeTitle: تضمين مقاطع الفيديو على Youtube
|
||||
* عنصر `<frame>` (لا تنسى إغلاقه!)
|
||||
* سمات `width` `height`
|
||||
|
||||
`
|
||||
<iframe width="420" height="315"
|
||||
src="https://www.youtube.com/watch?v=v8kFT4I31es">
|
||||
</iframe>
|
||||
`
|
||||
```html
|
||||
<iframe width="420" height="315"
|
||||
src="https://www.youtube.com/watch?v=v8kFT4I31es">
|
||||
</iframe>
|
||||
```
|
||||
|
||||
يتم إدراج القيم المدرجة ، ولكن لا تتردد في تغييرها بالطريقة التي تريدها.
|
||||
|
||||
@ -30,8 +30,8 @@ localeTitle: تضمين مقاطع الفيديو على Youtube
|
||||
|
||||
ماذا يجب أن نفعل إذا كنا نرغب في جعل هذا اللاعب يبدأ اللعب تلقائيًا؟ ما عليك سوى الإضافة إلى قيمة الرابط `?autoplay=1` . ولكن كن حذرًا ، فقد يكون الأمر مزعجًا بالنسبة إلى الكثير من الأشخاص الذين يزورون صفحتك على الويب.
|
||||
|
||||
`
|
||||
<iframe width="420" height="315"
|
||||
src="https://www.youtube.com/watch?v=v8kFT4I31es?autoplay=1">
|
||||
</iframe>
|
||||
`
|
||||
```html
|
||||
<iframe width="420" height="315"
|
||||
src="https://www.youtube.com/watch?v=v8kFT4I31es?autoplay=1">
|
||||
</iframe>
|
||||
```
|
||||
@ -8,27 +8,27 @@ localeTitle: كيفية إنشاء زر HTML التي تعمل مثل الارت
|
||||
|
||||
إحدى الطرق هي ببساطة لف علامة `<button>` في علامة `<a>` :
|
||||
|
||||
`
|
||||
<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a>
|
||||
`
|
||||
```html
|
||||
<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a>
|
||||
```
|
||||
|
||||
يؤدي هذا إلى تحويل الزر بالكامل إلى رابط.
|
||||
|
||||
الخيار الثاني هو إنشاء الرابط الخاص بك كما تفعل عادةً مع العلامة `<a>` ثم إعداده عبر CSS:
|
||||
|
||||
`
|
||||
<a href='https://www.freecodecamp.org/'>Link To freeCodeCamp</a>
|
||||
`
|
||||
```html
|
||||
<a href='https://www.freecodecamp.org/'>Link To freeCodeCamp</a>
|
||||
```
|
||||
|
||||
بمجرد إنشاء الرابط ، يمكنك استخدام CSS لجعله يبدو وكأنه زر. على سبيل المثال ، يمكنك إضافة حد ولون خلفية وبعض الأنماط عندما يحوم المستخدم في الرابط ...
|
||||
|
||||
هناك طريقة أخرى لإضافة زر وهي التفاف `input` داخل علامات `form` . حدد عنوان URL الهدف المطلوب في سمة إجراء النموذج.
|
||||
|
||||
`
|
||||
<form action="http://google.com">
|
||||
<input type="submit" value="Go to Google" />
|
||||
</form>
|
||||
`
|
||||
```html
|
||||
<form action="http://google.com">
|
||||
<input type="submit" value="Go to Google" />
|
||||
</form>
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
||||
@ -8,22 +8,22 @@ localeTitle: كيفية توسيط علامة Div في علامة Div أخرى
|
||||
|
||||
لنبدأ بإنشاء علامتين div مع فئتي "parent" و "child". سيكون الوالد الحاوية لدينا ، وسيكون الطفل هو `<div>` الذي نركز عليه أفقيًا.
|
||||
|
||||
`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>How to Horizontally Center a Div Tag in Another Div Tag</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="parent">
|
||||
<div class="child">
|
||||
<p>This is the center.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>How to Horizontally Center a Div Tag in Another Div Tag</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="parent">
|
||||
<div class="child">
|
||||
<p>This is the center.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
هناك عدة طرق يمكنك من خلالها معالجة هذا الأمر ، ولكن دعنا نركز على هذا البرنامج التعليمي على اثنين. سنقوم في `flexbox` باستخدام `<div>` باستخدام `margin` وفي الثانية سنستخدم `flexbox` .
|
||||
|
||||
@ -31,16 +31,17 @@ localeTitle: كيفية توسيط علامة Div في علامة Div أخرى
|
||||
|
||||
إذا قمت بتحديد `width` على div div ، يمكنك استخدام `margin: auto` . سيؤدي هذا إلى توسيط طفلك `<div>` عن طريق توزيع هوامش اليسار واليمين بالتساوي.
|
||||
|
||||
`.parent {
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
.centered-child {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
border: 1px solid black;
|
||||
}
|
||||
`
|
||||
```css
|
||||
.parent {
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
.centered-child {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
border: 1px solid black;
|
||||
}
|
||||
```
|
||||
|
||||
### مثال على توسيط علامة Div مع Flexbox
|
||||
|
||||
@ -48,16 +49,17 @@ localeTitle: كيفية توسيط علامة Div في علامة Div أخرى
|
||||
|
||||
لتوسيط طفل `<div>` باستخدام flexbox ، يلزمك استخدام `display: flex` مع `justify-content: center` الضبط `justify-content: center` على الأصل `<div>` .
|
||||
|
||||
`.parent {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
.centered-child {
|
||||
border: 1px solid black;
|
||||
}
|
||||
`
|
||||
```css
|
||||
.parent {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
.centered-child {
|
||||
border: 1px solid black;
|
||||
}
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
||||
@ -16,15 +16,15 @@ localeTitle: كيفية استخدام الروابط
|
||||
|
||||
في HTML ، يتم تعريف الارتباطات بالعلامة:
|
||||
|
||||
`
|
||||
<a href="url">link text</a>
|
||||
`
|
||||
```html
|
||||
<a href="url">link text</a>
|
||||
```
|
||||
|
||||
مثال
|
||||
|
||||
`
|
||||
<a href="https://www.freecodecamp.org/">Visit our site for tutorials</a>
|
||||
`
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org/">Visit our site for tutorials</a>
|
||||
```
|
||||
|
||||
تحدد السمة href عنوان الوجهة (https://www.freecodecamp.org) للرابط.
|
||||
|
||||
|
||||
@ -12,13 +12,13 @@ localeTitle: كيفية استخدام القوائم
|
||||
|
||||
##### الشفرة
|
||||
|
||||
`
|
||||
<ol>
|
||||
<li>Mix ingredients</li>
|
||||
<li>Bake in oven for an hour</li>
|
||||
<li>Allow to stand for ten minutes</li>
|
||||
</ol>
|
||||
`
|
||||
```html
|
||||
<ol>
|
||||
<li>Mix ingredients</li>
|
||||
<li>Bake in oven for an hour</li>
|
||||
<li>Allow to stand for ten minutes</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
##### مثال
|
||||
|
||||
@ -32,13 +32,13 @@ localeTitle: كيفية استخدام القوائم
|
||||
|
||||
##### الشفرة
|
||||
|
||||
`
|
||||
<ul>
|
||||
<li>Chocolate Cake</li>
|
||||
<li>Black Forest Cake</li>
|
||||
<li>Pineapple Cake</li>
|
||||
</ul>
|
||||
`
|
||||
```html
|
||||
<ul>
|
||||
<li>Chocolate Cake</li>
|
||||
<li>Black Forest Cake</li>
|
||||
<li>Pineapple Cake</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
#### مثال
|
||||
|
||||
@ -52,14 +52,14 @@ localeTitle: كيفية استخدام القوائم
|
||||
|
||||
##### الشفرة
|
||||
|
||||
`
|
||||
<dl>
|
||||
<dt>Bread</dt>
|
||||
<dd>A baked food made of flour.</dd>
|
||||
<dt>Coffee</dt>
|
||||
<dd>A drink made from roasted coffee beans.</dd>
|
||||
</dl>
|
||||
`
|
||||
```html
|
||||
<dl>
|
||||
<dt>Bread</dt>
|
||||
<dd>A baked food made of flour.</dd>
|
||||
<dt>Coffee</dt>
|
||||
<dd>A drink made from roasted coffee beans.</dd>
|
||||
</dl>
|
||||
```
|
||||
|
||||
##### انتاج |
|
||||
|
||||
|
||||
@ -12,33 +12,33 @@ localeTitle: الصور في HTML
|
||||
|
||||
## مثال
|
||||
|
||||
`
|
||||
<img src="URL of the Image" alt="Descriptive Title" />
|
||||
`
|
||||
```html
|
||||
<img src="URL of the Image" alt="Descriptive Title" />
|
||||
```
|
||||
|
||||
### لتحديد ارتفاع وعرض صورة ، يمكنك استخدام سمة الارتفاع والعرض:
|
||||
|
||||
`
|
||||
<img src="URL of the Image" alt="Descriptive Title" height="100" width="150"/>
|
||||
`
|
||||
```html
|
||||
<img src="URL of the Image" alt="Descriptive Title" height="100" width="150"/>
|
||||
```
|
||||
|
||||
### يمكنك أيضًا تحديد سمك الحدود (0 يعني عدم وجود حد):
|
||||
|
||||
`
|
||||
<img src="URL of the Image" alt="Descriptive Title" border="2"/>
|
||||
`
|
||||
```html
|
||||
<img src="URL of the Image" alt="Descriptive Title" border="2"/>
|
||||
```
|
||||
|
||||
### محاذاة صورة:
|
||||
|
||||
`
|
||||
<img src="URL of the Image" alt="Descriptive Title" align="left"/>
|
||||
`
|
||||
```html
|
||||
<img src="URL of the Image" alt="Descriptive Title" align="left"/>
|
||||
```
|
||||
|
||||
### يمكنك أيضًا استخدام الأنماط في سمة نمط:
|
||||
|
||||
`
|
||||
<img src="URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/>
|
||||
`
|
||||
```html
|
||||
<img src="URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/>
|
||||
```
|
||||
|
||||
#### معلومات اكثر
|
||||
|
||||
|
||||
@ -10,8 +10,9 @@ localeTitle: تنسيق النص في 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>` أيضًا - إنها تضيف أيضًا أهمية "قوية" دلالية. لا يتعرف متصفحك على فرق بين هذين العنصرين ، ولكنه موجود.
|
||||
|
||||
@ -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>` أيضًا - حيث تضيف أيضًا أهمية دلالية "مؤكدة". لا يتعرف متصفحك على فرق بين هذين العنصرين ، ولكنه موجود.
|
||||
|
||||
|
||||
@ -24,9 +24,10 @@ localeTitle: مرجع ترميز Url
|
||||
|
||||
#### مثال:
|
||||
|
||||
`encodeURI(Free Code Camp);
|
||||
// Free%20Code%20Camp
|
||||
`
|
||||
```js
|
||||
encodeURI(Free Code Camp);
|
||||
// Free%20Code%20Camp
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
||||
@ -25,11 +25,11 @@ UTF 8 هو نظام ترميز يستخدم لترجمة الأحرف التي
|
||||
|
||||
حدد علامة وصفية بها مجموعة أحرف من UTF 8 في علامة رأسك.
|
||||
|
||||
`
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
`
|
||||
```html
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
||||
@ -10,22 +10,25 @@ localeTitle: مرحبا العالم في الأيونية
|
||||
|
||||
#### 1\. تثبيت `ionic` ، `npm` ، `angular` و `cordova` إذا لم يتم تثبيت. \[انظر المقدمة [الأولى](https://guide.freecodecamp.org/ionic) لمزيد من المعلومات\]
|
||||
|
||||
`sudo apt-get install nodejs
|
||||
sudo apt-get install npm
|
||||
sudo npm install -g ionic cordova
|
||||
`
|
||||
```shell
|
||||
sudo apt-get install nodejs
|
||||
sudo apt-get install npm
|
||||
sudo npm install -g ionic cordova
|
||||
```
|
||||
|
||||
#### 2\. قم بإنشاء مجلد باسم `helloworld`
|
||||
|
||||
`ionic start helloworld blank
|
||||
`
|
||||
```shell
|
||||
ionic start helloworld blank
|
||||
```
|
||||
|
||||
ملحوظة: حيث أن هذا هو مشروع صغير أدخل لا أو N عند المطالبة أثناء تنفيذ البرنامج.
|
||||
|
||||
#### 3\. قم بتغيير الدليل إلى `helloworld` \[هذا هو دليلك الأيوني\]
|
||||
|
||||
`cd helloworld
|
||||
`
|
||||
```shell
|
||||
cd helloworld
|
||||
```
|
||||
|
||||
#### 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 = دراجة نارية جديدة () ؛ // صالح
|
||||
|
||||
|
||||
@ -34,17 +34,19 @@ localeTitle: معدّلات الوصول
|
||||
|
||||
على سبيل المثال ، للإعلان عن فئة عامة ، كل ما تحتاج إليه هو:
|
||||
|
||||
`public class Animal{
|
||||
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class Animal{
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
على هذا النحو ، يمكن الوصول إلى فئة الحيوان من أي فئة أخرى.
|
||||
|
||||
`public int age;
|
||||
public int getAge(){
|
||||
}
|
||||
`
|
||||
```java
|
||||
public int age;
|
||||
public int getAge(){
|
||||
}
|
||||
```
|
||||
|
||||
أعلاه هي طرق لتحديد متغير وطريقة عامة.
|
||||
|
||||
@ -54,18 +56,20 @@ localeTitle: معدّلات الوصول
|
||||
|
||||
على سبيل المثال ، لاستخدام معدِّل الوصول الافتراضي لفئة ما ، يمكنك استخدامه
|
||||
|
||||
`class Bird{
|
||||
}
|
||||
`
|
||||
```java
|
||||
class Bird{
|
||||
}
|
||||
```
|
||||
|
||||
هذا يعني أنك تستخدم مودم الوصول الافتراضي. يسمح معدِّل الوصول الافتراضي للمتغير أو الطريقة أو الفئة بالوصول إليها عن طريق الفئات الأخرى داخل الحزمة نفسها. الحزمة عبارة عن مجموعة من الفئات ذات الصلة في دليل الملفات. لمزيد من المعلومات حول الحزم ، راجع قسم الحزم.
|
||||
|
||||
لا يمكن لأي فئة أخرى خارج الحزمة التي تم الإعلان عنها استخدام أي متغير أو طريقة أو فئة معلن عنها لاستخدام معدِّل الوصول الافتراضي.
|
||||
|
||||
`int age;
|
||||
void setNewAge(){
|
||||
}
|
||||
`
|
||||
```java
|
||||
int age;
|
||||
void setNewAge(){
|
||||
}
|
||||
```
|
||||
|
||||
أعلاه هي بعض الطرق لاستخدام معدل الوصول الافتراضي للمتغير أو الطريقة. لا تنس أن معدِّل الوصول الافتراضي لا يحتوي على كلمة أساسية. يعني غياب معدّلات الوصول الثلاثة الأخرى أنك تستخدم معدّل الوصول الافتراضي.
|
||||
|
||||
@ -81,11 +85,12 @@ localeTitle: معدّلات الوصول
|
||||
|
||||
فيما يلي أمثلة لاستخدام معدِّل الوصول المحمي:
|
||||
|
||||
`protected int age;
|
||||
protected String getName(){
|
||||
return "My Name is You";
|
||||
}
|
||||
`
|
||||
```java
|
||||
protected int age;
|
||||
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` المحدد (لا تنسى فصلها عبر الفواصل فقط). ويرد مثال أدناه في القسم التالي للرجوع إليه.
|
||||
|
||||
`dataType arrayName[]; // works but not preferred way
|
||||
`
|
||||
```java
|
||||
dataType arrayName[]; // works but not preferred way
|
||||
```
|
||||
|
||||
هنا ، يصف `java datatype` فقط أن المتغيرات المذكورة بعد أن تنتمي إلى هذا النوع من البيانات. إلى جانب ذلك ، يصف `java []` بعد اسم المتغير أن المتغير هو صفيف من نوع البيانات المحدد (وليس مجرد قيمة أو كائن من هذا النوع من البيانات). لذا ، إذا أردنا إنشاء مزيد من المصفوفات من نوع البيانات المماثل ، فسوف نضيف أسماء المتغيرات بعد الاسم المحدد بالفعل ، مفصولة بفواصل وكل مرة سيتعين علينا إضافة `java []` بعد اسم المتغير وإلا فسيكون المتغير إنشاء مثيل كمتغير تخزين قيمة عادية (وليس صفيف). لفهم أفضل يتم إعطاء مثال في المقطع التالي.
|
||||
|
||||
## مقتطفات الشفرة للبناء أعلاه:
|
||||
|
||||
`double[] list1, list2; // preferred way
|
||||
`
|
||||
```java
|
||||
double[] list1, list2; // preferred way
|
||||
```
|
||||
|
||||
فوق المقتطف التعليمات البرمجية instantiates 2 صفائف من أسماء مزدوجة النوع list1 و list2.
|
||||
|
||||
`double list1[], list2; // works but not preferred way
|
||||
`
|
||||
```java
|
||||
double list1[], list2; // works but not preferred way
|
||||
```
|
||||
|
||||
فوق المقتطف الشفوي مصفوفة من نوع البيانات مزدوج المسمى 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};
|
||||
|
||||
The code above is equivalent to:
|
||||
double[] list = new double[4];
|
||||
*IMPORTANT NOTE: Please note the difference between the types of brackets
|
||||
that are used to represent arrays in two different ways.
|
||||
`
|
||||
```java
|
||||
double[] list = {1, 2, 3, 4};
|
||||
|
||||
The code above is equivalent to:
|
||||
double[] list = new double[4];
|
||||
*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.
|
||||
|
||||
`int[] a = {4, 5, 6, 7, 8}; // declare array
|
||||
System.out.println(a.length); //prints 5
|
||||
`
|
||||
```java
|
||||
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
|
||||
for (int i = 0; i < a.length; i++){ // loop goes through each index
|
||||
System.out.println(a[i]); // prints the array
|
||||
}
|
||||
`
|
||||
```java
|
||||
int[] a = {4, 5, 6, 7, 8}; // declare 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;
|
||||
int N = 5;
|
||||
double[][] a = new double [M][N]; //M = rows N = columns
|
||||
for(int i = 0; i < M; i++) {
|
||||
for (int j = 0; j < N; j++) {
|
||||
//Do something here at index
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
int M = 5;
|
||||
int N = 5;
|
||||
double[][] a = new double [M][N]; //M = rows N = columns
|
||||
for(int i = 0; i < M; i++) {
|
||||
for (int j = 0; j < N; j++) {
|
||||
//Do something here at index
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
ستنفذ هذه الحلقة M ^ N مرة وستبني هذا:
|
||||
|
||||
@ -136,9 +153,10 @@ _مثال على الكود:_
|
||||
|
||||
وبالمثل ، يمكن أيضًا إنشاء مصفوفة ثلاثية الأبعاد. يمكن تصوره كمكعبوب بدلاً من مستطيل (كما هو مذكور أعلاه) ، مقسم إلى مكعبات أصغر مع كل مكعب يخزن بعض القيمة. يمكن التهيئة الأولية:
|
||||
|
||||
`int a=2, b=3, c=4;
|
||||
int[][][] a=new int[a][b][c];
|
||||
`
|
||||
```java
|
||||
int a=2, b=3, c=4;
|
||||
int[][][] a=new int[a][b][c];
|
||||
```
|
||||
|
||||
بطريقة مماثلة ، يمكن للمرء أن مجموعة من أبعاد مثل ما هو / هي ترغب في ولكن تصور مجموعة من أكثر من 3 أبعاد يصعب تصور بطريقة معينة.
|
||||
|
||||
@ -146,13 +164,14 @@ _مثال على الكود:_
|
||||
|
||||
الصفائف الخشنة هي صفائف متعددة الأبعاد لها عدد محدد من الصفوف ولكن عدد الأعمدة متفاوت. يتم استخدام الصفائف الخشنة للحفاظ على استخدام الذاكرة للمصفوفة. فيما يلي مثال الكود:
|
||||
|
||||
`int[][] array = new int[5][]; //initialize a 2D array with 5 rows
|
||||
array[0] = new int[1]; //creates 1 column for first row
|
||||
array[1] = new int[2]; //creates 2 columns for second row
|
||||
array[2] = new int[5]; //creates 5 columns for third row
|
||||
array[3] = new int[5]; //creates 5 columns for fourth row
|
||||
array[4] = new int[5]; //creates 5 columns for fifth row
|
||||
`
|
||||
```java
|
||||
int[][] array = new int[5][]; //initialize a 2D array with 5 rows
|
||||
array[0] = new int[1]; //creates 1 column for first row
|
||||
array[1] = new int[2]; //creates 2 columns for second row
|
||||
array[2] = new int[5]; //creates 5 columns for third 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-
|
||||
|
||||
`import java.lang.*;
|
||||
import java.io.*;
|
||||
`
|
||||
```java
|
||||
import java.lang.*;
|
||||
import java.io.*;
|
||||
```
|
||||
|
||||
وتشمل هذه الوظائف التي تجعل مهمة طويلة وصعبة للغاية أن تفعل.
|
||||
@ -8,23 +8,25 @@ localeTitle: مجموعات
|
||||
|
||||
كما تعمل واجهة المجموعة على توسيع واجهة 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.
|
||||
|
||||
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 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.
|
||||
|
||||
int size() // Returns number of items in the collection.
|
||||
`
|
||||
```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.
|
||||
|
||||
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 remove(Object o) // Removes the specifies element and return true on successful removal else false.
|
||||
|
||||
int size() // Returns number of items in the collection.
|
||||
```
|
||||
|
||||
يجب تنفيذ هذه الطرق وغيرها من الطرق المختلفة من خلال أي واجهة تطبيق جماعية.
|
||||
|
||||
@ -46,35 +48,39 @@ localeTitle: مجموعات
|
||||
|
||||
**قم بإنشاء 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();
|
||||
|
||||
LinkedList<LinkedList<Integer>> listOfList = new LinkedList();
|
||||
`
|
||||
```java
|
||||
LinkedList<String> stringList = new LinkedList();
|
||||
|
||||
LinkedList<LinkedList<Integer>> listOfList = new LinkedList();
|
||||
```
|
||||
|
||||
ملاحظة: تم تحويل جميع المجموعات في Java إلى أنواع عامة منذ 1.5 JDK
|
||||
|
||||
**إضافة عناصر إلى القائمة**
|
||||
|
||||
`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.addFirst(3); // Add to the beginning of the list
|
||||
|
||||
intList.addLast(2); // Add to the end of the list
|
||||
|
||||
intList.add(2, 5); // Add element 5 at index 2
|
||||
`
|
||||
```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.addFirst(3); // Add to the beginning of the list
|
||||
|
||||
intList.addLast(2); // Add to the end of the list
|
||||
|
||||
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\]
|
||||
|
||||
@ -95,19 +101,21 @@ localeTitle: مجموعات
|
||||
|
||||
بما أن جافا لا توفر منفصلة
|
||||
|
||||
`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.
|
||||
`
|
||||
```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.remove(3); // Removes the element at index 3 of the list
|
||||
|
||||
intList.removeFirst(); // Removes first element of the list
|
||||
|
||||
intList.removeLast(); // Removes last element 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.removeLast(); // Removes last element of the list
|
||||
```
|
||||
|
||||
ملاحظة: جميع الطرق المذكورة أعلاه لإزالة وجلب عنصر إرجاع NoSuchElementException في قائمة فارغة.
|
||||
|
||||
|
||||
@ -16,8 +16,9 @@ localeTitle: تعليقات في جافا
|
||||
|
||||
لإنشاء خط تعليق واحد فقط إضافة اثنين `//` مائلة قبل النص.
|
||||
|
||||
`// This is how single line comment looks like
|
||||
`
|
||||
```java
|
||||
// This is how single line comment looks like
|
||||
```
|
||||
|
||||
#### 2\. تعليق متعدد الخط
|
||||
|
||||
|
||||
@ -8,24 +8,26 @@ localeTitle: الصانعين
|
||||
|
||||
عند كتابة فصل دراسي بدون أي مُنشئ ، ينشئ المحول البرمجي لـ Java مُنشئًا افتراضيًا:
|
||||
|
||||
`public class Car {
|
||||
private String name;
|
||||
}
|
||||
|
||||
Car modelS = new Car();
|
||||
`
|
||||
```java
|
||||
public class Car {
|
||||
private String name;
|
||||
}
|
||||
|
||||
Car modelS = new Car();
|
||||
```
|
||||
|
||||
هذا التهيئة بدون معلمات هي طريقة استدعاء المُنشئ الافتراضي. يمكنك أيضًا الحصول على مُنشئ افتراضي مكتوب بهذه الطريقة:
|
||||
|
||||
`public class Car {
|
||||
private String name;
|
||||
|
||||
// User Specified Default Constructor
|
||||
public Car() {
|
||||
name = "Tesla";
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class Car {
|
||||
private String name;
|
||||
|
||||
// User Specified Default Constructor
|
||||
public Car() {
|
||||
name = "Tesla";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
ثم ، عند استدعاء `new Car()` ، سيتم الحصول على تهيئة `name` المتغير تلقائيًا إلى "Tesla" لمثيل كائن السيارة هذا.
|
||||
|
||||
@ -43,25 +45,26 @@ localeTitle: الصانعين
|
||||
|
||||
دعونا ننظر في مثال آخر. لنفترض أن شركة هوندا (الشركة المصنعة للسيارات) تريد أن يتم تسمية جميع سياراتها باسم `Honda <a name>` . من أجل تنفيذ ذلك ، قد نمثل هذا باستخدام فئة على النحو التالي:
|
||||
|
||||
`public class Car {
|
||||
|
||||
private String name;
|
||||
|
||||
// Constructor.
|
||||
public Car(String model){
|
||||
this.name = "Honda " + model;
|
||||
}
|
||||
|
||||
public String getName(){
|
||||
return this.name;
|
||||
}
|
||||
|
||||
public static void main(String args[]){
|
||||
Car car = new Car("Civic");
|
||||
System.out.println( car.getName() );
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class Car {
|
||||
|
||||
private String name;
|
||||
|
||||
// Constructor.
|
||||
public Car(String model){
|
||||
this.name = "Honda " + model;
|
||||
}
|
||||
|
||||
public String getName(){
|
||||
return this.name;
|
||||
}
|
||||
|
||||
public static void main(String args[]){
|
||||
Car car = new Car("Civic");
|
||||
System.out.println( car.getName() );
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CTJ4/1)
|
||||
|
||||
@ -92,8 +95,9 @@ localeTitle: الصانعين
|
||||
لاحظ أن منشئ `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 لتكون دقيقة) طوال فترة تطبيقك.
|
||||
|
||||
|
||||
@ -29,34 +29,36 @@ localeTitle: تدفق التحكم
|
||||
|
||||
يعد التبديل خيارًا بديلًا `if...else` إنشاء `if...else` عند وجود قيم وحالات متعددة للتحقق منها.
|
||||
|
||||
`switch( <integer / String / Enum > ){
|
||||
case <int/String/Enum>:
|
||||
<statements>
|
||||
break;
|
||||
case <int/String/Enum>:
|
||||
<statements>
|
||||
break;
|
||||
default:
|
||||
<statements>
|
||||
}
|
||||
`
|
||||
```java
|
||||
switch( <integer / String / Enum > ){
|
||||
case <int/String/Enum>:
|
||||
<statements>
|
||||
break;
|
||||
case <int/String/Enum>:
|
||||
<statements>
|
||||
break;
|
||||
default:
|
||||
<statements>
|
||||
}
|
||||
```
|
||||
|
||||
ملاحظة: `falls through` تدفق البرنامج `falls through` `case` التالية إذا كان بيان `break` مفقودًا. على سبيل المثال ، دعنا نقول أنك تقول "مرحباً" لكل شخص في المكتب ، لكنك لطيف جداً للفتاة التي تجلس إلى جانبك وتسمع صوت غاضب إلى رئيسك في العمل. طريقة التمثيل ستكون شيئًا مثل:
|
||||
|
||||
`switch(person){
|
||||
case 'boss':
|
||||
soundGrumpy();
|
||||
break;
|
||||
case 'neighbour':
|
||||
soundExtraNice();
|
||||
break;
|
||||
case 'colleague':
|
||||
soundNormal();
|
||||
break;
|
||||
default:
|
||||
soundNormal();
|
||||
}
|
||||
`
|
||||
```java
|
||||
switch(person){
|
||||
case 'boss':
|
||||
soundGrumpy();
|
||||
break;
|
||||
case 'neighbour':
|
||||
soundExtraNice();
|
||||
break;
|
||||
case 'colleague':
|
||||
soundNormal();
|
||||
break;
|
||||
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.
|
||||
``
|
||||
@ -74,29 +76,30 @@ localeTitle: تدفق التحكم
|
||||
|
||||
تتمثل إحدى الطرق لتمثيل ذلك في:
|
||||
|
||||
`int cash = 150;
|
||||
String company = "friends";
|
||||
|
||||
if( cash < 25 ){
|
||||
getCoffee();
|
||||
} else if( cash < 60 ){
|
||||
getDecentMeal();
|
||||
} else if( cash < 100 ){
|
||||
getDecentMeal();
|
||||
getGlassOfWine();
|
||||
} else {
|
||||
switch(company){
|
||||
case "wife":
|
||||
candleLitDinner();
|
||||
break;
|
||||
case "friends":
|
||||
meetFriendsAtSportsBar();
|
||||
break;
|
||||
default:
|
||||
getDecentMeal();
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
int cash = 150;
|
||||
String company = "friends";
|
||||
|
||||
if( cash < 25 ){
|
||||
getCoffee();
|
||||
} else if( cash < 60 ){
|
||||
getDecentMeal();
|
||||
} else if( cash < 100 ){
|
||||
getDecentMeal();
|
||||
getGlassOfWine();
|
||||
} else {
|
||||
switch(company){
|
||||
case "wife":
|
||||
candleLitDinner();
|
||||
break;
|
||||
case "friends":
|
||||
meetFriendsAtSportsBar();
|
||||
break;
|
||||
default:
|
||||
getDecentMeal();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
في هذا المثال ، سيتم تنفيذ `meetFriendsAtSportsBar()` .
|
||||
|
||||
|
||||
@ -199,5 +199,6 @@ localeTitle: أنواع البيانات
|
||||
|
||||
انتاج:
|
||||
|
||||
`10198442
|
||||
`
|
||||
```
|
||||
10198442
|
||||
```
|
||||
@ -25,15 +25,16 @@ localeTitle: تحديد السمات
|
||||
|
||||
يمكننا إنشاء كائنات متعددة لفئة مركباتنا ، واستخدام بناء الجملة للنقاط للوصول إلى سماتها وأساليبها.
|
||||
|
||||
`class MyClass {
|
||||
public static void main(String[] args) {
|
||||
Vehicle v1 = new Vehicle();
|
||||
Vehicle v2 = new Vehicle();
|
||||
v1.color = "red";
|
||||
v2.horn();
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
class MyClass {
|
||||
public static void main(String[] args) {
|
||||
Vehicle v1 = new Vehicle();
|
||||
Vehicle v2 = new Vehicle();
|
||||
v1.color = "red";
|
||||
v2.horn();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### معدلات الرؤية
|
||||
|
||||
|
||||
@ -14,18 +14,19 @@ localeTitle: التحقق من المساواة
|
||||
|
||||
بالنسبة لأنواع المتغيرات البدائية ، مثل `int` و `double` ، يمكن دائمًا استخدام عامل `==` للتحقق من المساواة ، حيث يتم تخزين قيمها مباشرة مع المتغير (وليس كمرجع إلى فتحة أخرى في الذاكرة).
|
||||
|
||||
`int var1 = 1;
|
||||
int var2 = 1;
|
||||
System.out.println(var1 == var2) // true
|
||||
|
||||
MyObject obj1 = new MyObject();
|
||||
MyObject obj2 = obj1;
|
||||
MyObject obj3 = new MyObject();
|
||||
|
||||
System.out.println(obj1 == obj2) // true
|
||||
System.out.println(obj1 == obj3) // false
|
||||
System.out.println(obj2 == obj3) // false
|
||||
`
|
||||
```java
|
||||
int var1 = 1;
|
||||
int var2 = 1;
|
||||
System.out.println(var1 == var2) // true
|
||||
|
||||
MyObject obj1 = new MyObject();
|
||||
MyObject obj2 = obj1;
|
||||
MyObject obj3 = new MyObject();
|
||||
|
||||
System.out.println(obj1 == obj2) // true
|
||||
System.out.println(obj1 == obj3) // false
|
||||
System.out.println(obj2 == obj3) // false
|
||||
```
|
||||
|
||||
## طريقة `.equals()`
|
||||
|
||||
@ -33,12 +34,13 @@ localeTitle: التحقق من المساواة
|
||||
|
||||
تعد فئة "السلسلة" واحدة من الأمثلة الأكثر شيوعًا للفئة التي تتجاوز طريقة "يساوي ()". عند المقارنة بين "سلعة" للمساواة ، تحتاج إلى استخدام طريقة "يساوي ()" ، لأن "==" لن يعمل كما هو متوقع.
|
||||
|
||||
`String s1 = "Bob";
|
||||
String s2 = "ob";
|
||||
s2 = "B" + s2; //s2 now is also "Bob"
|
||||
System.out.println(s1 == s2); //false
|
||||
System.out.println(s1.equals(s2)); //true
|
||||
`
|
||||
```java
|
||||
String s1 = "Bob";
|
||||
String s2 = "ob";
|
||||
s2 = "B" + s2; //s2 now is also "Bob"
|
||||
System.out.println(s1 == s2); //false
|
||||
System.out.println(s1.equals(s2)); //true
|
||||
```
|
||||
|
||||
عند إنشاء فئة جديدة في Java ، ستحتاج غالبًا إلى تجاوز طريقة `equals()` لتوفير طريقة أكثر فائدة لمقارنة كائنين من نفس الفئة. كيف يتم تنفيذ هذه الطريقة هو ما يصل تماما إلى حكم المطور.
|
||||
|
||||
|
||||
@ -8,13 +8,14 @@ localeTitle: نهائي
|
||||
|
||||
**_مثال:_**
|
||||
|
||||
`class MyClass {
|
||||
public static final double PI = 3.14;
|
||||
public static void main(String[] args){
|
||||
System.out.println(PI);
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
class MyClass {
|
||||
public static final double PI = 3.14;
|
||||
public static void main(String[] args){
|
||||
System.out.println(PI);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
PI هو الآن ثابت. أي محاولة لتعيينه قيمة ستسبب خطأ.
|
||||
|
||||
|
||||
@ -8,13 +8,14 @@ localeTitle: أخيرا
|
||||
|
||||
**_مثال:_**
|
||||
|
||||
`try {
|
||||
// Normal execution path
|
||||
throw new EmptyStackException();
|
||||
} catch (ExampleException ee) {
|
||||
// deal with the ExampleException
|
||||
} finally {
|
||||
// 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;
|
||||
}
|
||||
`
|
||||
```java
|
||||
try {
|
||||
// Normal execution path
|
||||
throw new EmptyStackException();
|
||||
} catch (ExampleException ee) {
|
||||
// deal with the ExampleException
|
||||
} finally {
|
||||
// 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) {
|
||||
Vehicle v1 = new Vehicle();
|
||||
v1.setColor("Red");
|
||||
System.out.println(v1.getColor());
|
||||
}
|
||||
|
||||
// Outputs "Red"
|
||||
`
|
||||
```java
|
||||
public stativ void main(String[] args) {
|
||||
Vehicle v1 = new Vehicle();
|
||||
v1.setColor("Red");
|
||||
System.out.println(v1.getColor());
|
||||
}
|
||||
|
||||
// Outputs "Red"
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
@ -46,22 +47,25 @@ localeTitle: رسائل ورسائل
|
||||
|
||||
باستخدام أداة getter و setter ، يمكن للمبرمج التحكم في كيفية الوصول إلى المتغيرات الهامة وتحديثها ، مثل تغيير قيمة متغير داخل نطاق محدد. خذ بعين الاعتبار التعليمة البرمجية التالية لطريقة setter:
|
||||
|
||||
`public void setNumber(int num) {
|
||||
if (num < 10 || num > 100) {
|
||||
throw new IllegalArgumentException();
|
||||
}
|
||||
this.number = num;
|
||||
}
|
||||
`
|
||||
```java
|
||||
public void setNumber(int num) {
|
||||
if (num < 10 || num > 100) {
|
||||
throw new IllegalArgumentException();
|
||||
}
|
||||
this.number = num;
|
||||
}
|
||||
```
|
||||
|
||||
وهذا يضمن تعيين قيمة الرقم دائمًا بين 10 و 100. إذا كان المبرمج يسمح بتحديث رقم المتغير مباشرة ، يمكن للمتصل تعيين أي قيمة عشوائية له:
|
||||
|
||||
`obj.number = 3;
|
||||
`
|
||||
```java
|
||||
obj.number = 3;
|
||||
```
|
||||
|
||||
هذا ينتهك القيد لقيم تتراوح بين 10 إلى 100 لهذا المتغير. نظرًا لأننا لا نتوقع حدوث ذلك ، فإن إخفاء رقم المتغير كخاصية خاصة واستخدام أداة ضبط يمنعه. من ناحية أخرى ، فإن طريقة الوسيلة هي الطريقة الوحيدة للعالم الخارجي لقراءة قيمة المتغير:
|
||||
|
||||
`public int getNumber() {
|
||||
return this.number;
|
||||
}
|
||||
`
|
||||
```java
|
||||
public int getNumber() {
|
||||
return this.number;
|
||||
}
|
||||
```
|
||||
@ -8,42 +8,43 @@ localeTitle: أساسيات الوراثة
|
||||
|
||||
الحل: **الميراث** . توفر Java طريقة مرتبة لخصائص الأصل "الوراثة":
|
||||
|
||||
`public class Car {
|
||||
|
||||
private String name;
|
||||
private String manufacturerName;
|
||||
|
||||
public Car(String name, String man) {
|
||||
this.name = name;
|
||||
this.manufacturerName = man;
|
||||
}
|
||||
// Getter method
|
||||
public String getName() {
|
||||
return name;
|
||||
}
|
||||
// Getter method
|
||||
public String getManufacturerName() {
|
||||
return manufacturerName;
|
||||
}
|
||||
}
|
||||
|
||||
public class ElectricCar extends Car {
|
||||
|
||||
public ElectricCar(String name, String man) {
|
||||
super(name, man);
|
||||
}
|
||||
|
||||
public void charge() {
|
||||
System.out.println("Charging ...");
|
||||
}
|
||||
}
|
||||
|
||||
ElectricCar modelS = new ElectricCar("Model S","Tesla");
|
||||
// prints Tesla
|
||||
System.out.println(modelS.getManufacturerName());
|
||||
// prints Charging ...
|
||||
modelS.charge();
|
||||
`
|
||||
```java
|
||||
public class Car {
|
||||
|
||||
private String name;
|
||||
private String manufacturerName;
|
||||
|
||||
public Car(String name, String man) {
|
||||
this.name = name;
|
||||
this.manufacturerName = man;
|
||||
}
|
||||
// Getter method
|
||||
public String getName() {
|
||||
return name;
|
||||
}
|
||||
// Getter method
|
||||
public String getManufacturerName() {
|
||||
return manufacturerName;
|
||||
}
|
||||
}
|
||||
|
||||
public class ElectricCar extends Car {
|
||||
|
||||
public ElectricCar(String name, String man) {
|
||||
super(name, man);
|
||||
}
|
||||
|
||||
public void charge() {
|
||||
System.out.println("Charging ...");
|
||||
}
|
||||
}
|
||||
|
||||
ElectricCar modelS = new ElectricCar("Model S","Tesla");
|
||||
// prints Tesla
|
||||
System.out.println(modelS.getManufacturerName());
|
||||
// prints Charging ...
|
||||
modelS.charge();
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CJZY/0)
|
||||
|
||||
|
||||
@ -13,33 +13,35 @@ localeTitle: ميراث
|
||||
|
||||
دعونا وصف ذلك مع المثال الكلاسيكي لل `Vehicle` الفئة و `Car` الفئة:
|
||||
|
||||
`public class Vehicle {
|
||||
public void start() {
|
||||
// starting the engine
|
||||
}
|
||||
|
||||
public void stop() {
|
||||
// stopping the engine
|
||||
}
|
||||
}
|
||||
|
||||
public class Car extends Vehicle {
|
||||
int numberOfSeats = 4;
|
||||
|
||||
public int getNumberOfSeats() {
|
||||
return numberOfSeats;
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class Vehicle {
|
||||
public void start() {
|
||||
// starting the engine
|
||||
}
|
||||
|
||||
public void stop() {
|
||||
// stopping the engine
|
||||
}
|
||||
}
|
||||
|
||||
public class Car extends Vehicle {
|
||||
int numberOfSeats = 4;
|
||||
|
||||
public int getNumberOfSeats() {
|
||||
return numberOfSeats;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
هنا ، يمكننا رؤية فئة `Car` ترث خصائص فئة `Vehicle` . لذلك ، ليس علينا كتابة نفس الكود `start()` الطريقتين `start()` و `stop()` `Car` كذلك ، حيث أن هذه الخصائص متاحة من الشركة الأم أو الطبقة الفائقة. لذلك ، فإن الكائنات التي تم إنشاؤها من فئة `Car` سيكون لها هذه الخصائص _أيضًا_ !
|
||||
|
||||
`Car tesla = new Car();
|
||||
|
||||
tesla.start();
|
||||
|
||||
tesla.stop();
|
||||
`
|
||||
```java
|
||||
Car tesla = new Car();
|
||||
|
||||
tesla.start();
|
||||
|
||||
tesla.stop();
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CJXz/0)
|
||||
|
||||
@ -62,26 +64,29 @@ localeTitle: ميراث
|
||||
|
||||
في 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)
|
||||
|
||||
نظرًا لأنه يمكنك الرجوع إلى فئة فرعية من Java كمثيل فائق ، يمكنك بسهولة عرض مثيل لكائن فئة فرعية إلى مثيل superclass. من الممكن إرسال كائن superclass إلى نوع فئة فرعية ، ولكن _فقط إذا كان الكائن بالفعل مثيلًا للفئة الفرعية_ . لذا ضع ذلك في اعتبارك:
|
||||
|
||||
`Car car = new Car();
|
||||
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.
|
||||
Car car3 = (Car)bike; // Compilation Error : as bike is NOT a instance of Car
|
||||
`
|
||||
```java
|
||||
Car car = new Car();
|
||||
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.
|
||||
Car car3 = (Car)bike; // Compilation Error : as bike is NOT a instance of Car
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CJYM/0)
|
||||
|
||||
@ -91,21 +96,22 @@ localeTitle: ميراث
|
||||
|
||||
تسمح لك Java _بإلغاء_ أو إعادة تعريف الطرق المحددة في الطبقة الفائقة. على سبيل المثال ، يكون لفئة `Car` الخاصة بك تطبيق مختلف `start()` من `Vehicle` ، لذلك يمكنك القيام بذلك:
|
||||
|
||||
`public class Vehicle {
|
||||
public void start() {
|
||||
System.out.println("Vehicle start code");
|
||||
}
|
||||
}
|
||||
|
||||
public class Car extends Vehicle {
|
||||
public void start() {
|
||||
System.out.println("Car start code");
|
||||
}
|
||||
}
|
||||
|
||||
Car car = new Car();
|
||||
car.start(); // "Car start code"
|
||||
`
|
||||
```java
|
||||
public class Vehicle {
|
||||
public void start() {
|
||||
System.out.println("Vehicle start code");
|
||||
}
|
||||
}
|
||||
|
||||
public class Car extends Vehicle {
|
||||
public void start() {
|
||||
System.out.println("Car start code");
|
||||
}
|
||||
}
|
||||
|
||||
Car car = new Car();
|
||||
car.start(); // "Car start code"
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CJYZ/1)
|
||||
|
||||
@ -122,21 +128,22 @@ localeTitle: ميراث
|
||||
|
||||
مضحك تسأل عن ذلك! ما عليك سوى استخدام الكلمة الرئيسية `super` :
|
||||
|
||||
`public class Vehicle() {
|
||||
public void start() {
|
||||
System.out.println("Vehicle start code");
|
||||
}
|
||||
}
|
||||
|
||||
public class Car extends Vehicle {
|
||||
public void run() {
|
||||
super.start();
|
||||
}
|
||||
}
|
||||
|
||||
Car car = new Car();
|
||||
car.run(); // "Vehicle start code"
|
||||
`
|
||||
```java
|
||||
public class Vehicle() {
|
||||
public void start() {
|
||||
System.out.println("Vehicle start code");
|
||||
}
|
||||
}
|
||||
|
||||
public class Car extends Vehicle {
|
||||
public void run() {
|
||||
super.start();
|
||||
}
|
||||
}
|
||||
|
||||
Car car = new Car();
|
||||
car.run(); // "Vehicle start code"
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CJY4/0)
|
||||
|
||||
@ -146,33 +153,35 @@ localeTitle: ميراث
|
||||
|
||||
باستخدام `instanceof` الكلمة. بوجود الكثير من الطبقات والفئات الفرعية ، سيكون من المربك قليلاً معرفة أي فئة هي فئة فرعية واحدة في وقت التشغيل. لذا ، يمكننا استخدام `instanceof` لتحديد ما إذا كان الكائن عبارة عن مثيل لفئة أو مثيل لفئة فرعية أو مثيل لواجهة.
|
||||
|
||||
`Car car = new Car();
|
||||
|
||||
boolean flag = car instanceof Vehicle; // true in this case!
|
||||
`
|
||||
```java
|
||||
Car car = new Car();
|
||||
|
||||
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` :
|
||||
|
||||
`public class Vehicle {
|
||||
public Vehicle() {
|
||||
// constructor
|
||||
}
|
||||
public void start() {
|
||||
System.out.println("Vehicle start code");
|
||||
}
|
||||
}
|
||||
|
||||
public class Car extends Vehicle {
|
||||
public Car() {
|
||||
super();
|
||||
}
|
||||
public void run() {
|
||||
super.start();
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class Vehicle {
|
||||
public Vehicle() {
|
||||
// constructor
|
||||
}
|
||||
public void start() {
|
||||
System.out.println("Vehicle start code");
|
||||
}
|
||||
}
|
||||
|
||||
public class Car extends Vehicle {
|
||||
public Car() {
|
||||
super();
|
||||
}
|
||||
public void run() {
|
||||
super.start();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CJY8/0)
|
||||
|
||||
|
||||
@ -6,28 +6,30 @@ localeTitle: واجهات
|
||||
|
||||
واجهة في جافا قليلا مثل فئة، ولكن مع فارق كبير: و `interface` يمكن أن يكون _فقط_ تواقيع طريقة والحقول والطرق الافتراضية. منذ Java 8 ، يمكنك أيضًا إنشاء [طرق افتراضية](https://docs.oracle.com/javase/tutorial/java/IandI/defaultmethods.html) . في الجزء التالي ، يمكنك مشاهدة مثال على الواجهة:
|
||||
|
||||
`public interface Vehicle {
|
||||
public String licensePlate = "";
|
||||
public float maxVel
|
||||
public void start();
|
||||
public void stop();
|
||||
default void blowHorn(){
|
||||
System.out.println("Blowing horn");
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public interface Vehicle {
|
||||
public String licensePlate = "";
|
||||
public float maxVel
|
||||
public void start();
|
||||
public void stop();
|
||||
default void blowHorn(){
|
||||
System.out.println("Blowing horn");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
تحتوي الواجهة أعلاه على حقلين وطريقتين وطريقة افتراضية. وحدها ، ليست ذات فائدة كبيرة ، ولكنها تستخدم عادة مع الفصول. ماذا؟ بسيطة ، عليك أن تتأكد من أن بعض الصف يقوم `implements` .
|
||||
|
||||
`public class Car implements Vehicle {
|
||||
public void start() {
|
||||
System.out.println("starting engine...");
|
||||
}
|
||||
public void stop() {
|
||||
System.out.println("stopping engine...");
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class Car implements Vehicle {
|
||||
public void start() {
|
||||
System.out.println("starting engine...");
|
||||
}
|
||||
public void stop() {
|
||||
System.out.println("stopping engine...");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CItd/0)
|
||||
|
||||
@ -37,39 +39,41 @@ localeTitle: واجهات
|
||||
|
||||
بمجرد إنشاء فئة Java تقوم `implements` أي واجهة ، يمكن الإشارة إلى مثيل الكائن كمثيل للواجهة. هذا المفهوم مشابه لمبدأ إنشاء الوراثة.
|
||||
|
||||
`// following our previous example
|
||||
|
||||
Vehicle tesla = new Car();
|
||||
|
||||
tesla.start(); // starting engine ...
|
||||
`
|
||||
```java
|
||||
// following our previous example
|
||||
|
||||
Vehicle tesla = new Car();
|
||||
|
||||
tesla.start(); // starting engine ...
|
||||
```
|
||||
|
||||
**لا يمكن أن** تحتوي واجهة على أساليب منشئ ، لذلك **لا يمكنك** إنشاء مثيل لواجهة بنفسها. يجب إنشاء مثيل لفئة معينة تقوم بتطبيق واجهة للرجوع إليها. فكر في الواجهات على أنها نموذج عقد فارغ ، أو نموذج.
|
||||
|
||||
ما الذي يمكنك القيام به مع هذه الميزة؟ تعدد الأشكال! يمكنك استخدام الواجهات فقط للإشارة إلى مثيلات الكائن!
|
||||
|
||||
`class Truck implements Vehicle {
|
||||
public void start() {
|
||||
System.out.println("starting truck engine...");
|
||||
}
|
||||
public void stop() {
|
||||
System.out.println("stopping truck engine...");
|
||||
}
|
||||
}
|
||||
|
||||
class Starter {
|
||||
// static method, can be called without instantiating the class
|
||||
public static void startEngine(Vehicle vehicle) {
|
||||
vehicle.start();
|
||||
}
|
||||
}
|
||||
|
||||
Vehicle tesla = new Car();
|
||||
Vehicle tata = new Truck();
|
||||
|
||||
Starter.startEngine(tesla); // starting engine ...
|
||||
Starter.startEngine(tata); // starting truck engine ...
|
||||
`
|
||||
```java
|
||||
class Truck implements Vehicle {
|
||||
public void start() {
|
||||
System.out.println("starting truck engine...");
|
||||
}
|
||||
public void stop() {
|
||||
System.out.println("stopping truck engine...");
|
||||
}
|
||||
}
|
||||
|
||||
class Starter {
|
||||
// static method, can be called without instantiating the class
|
||||
public static void startEngine(Vehicle vehicle) {
|
||||
vehicle.start();
|
||||
}
|
||||
}
|
||||
|
||||
Vehicle tesla = new Car();
|
||||
Vehicle tata = new Truck();
|
||||
|
||||
Starter.startEngine(tesla); // starting engine ...
|
||||
Starter.startEngine(tata); // starting truck engine ...
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CItm/0)
|
||||
|
||||
@ -77,27 +81,28 @@ localeTitle: واجهات
|
||||
|
||||
نعم ، يمكنك تنفيذ واجهات متعددة في فصل واحد. أثناء [تواجدك](//forum.freecodecamp.com/t/java-docs-inheritance) في [التوارث](//forum.freecodecamp.com/t/java-docs-inheritance) داخل الصفوف ، تم تقييدك في فئة واحدة فقط ، يمكنك هنا توسيع أي عدد من الواجهات. ولكن لا ننسى تنفيذ _جميع_ أساليب جميع واجهات ، وإلا سوف تفشل التجميع!
|
||||
|
||||
`public interface GPS {
|
||||
public void getCoordinates();
|
||||
}
|
||||
|
||||
public interface Radio {
|
||||
public void startRadio();
|
||||
public void stopRadio();
|
||||
}
|
||||
|
||||
public class Smartphone implements GPS,Radio {
|
||||
public void getCoordinates() {
|
||||
// return some coordinates
|
||||
}
|
||||
public void startRadio() {
|
||||
// start Radio
|
||||
}
|
||||
public void stopRadio() {
|
||||
// stop Radio
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public interface GPS {
|
||||
public void getCoordinates();
|
||||
}
|
||||
|
||||
public interface Radio {
|
||||
public void startRadio();
|
||||
public void stopRadio();
|
||||
}
|
||||
|
||||
public class Smartphone implements GPS,Radio {
|
||||
public void getCoordinates() {
|
||||
// return some coordinates
|
||||
}
|
||||
public void startRadio() {
|
||||
// start Radio
|
||||
}
|
||||
public void stopRadio() {
|
||||
// stop Radio
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CIto/0)
|
||||
|
||||
@ -116,37 +121,38 @@ localeTitle: واجهات
|
||||
|
||||
لحسن الحظ ، توفر لك Java 8 الآن الطرق `default` للواجهات. _يمكن أن_ تحتوي الطريقة `default` على التنفيذ الخاص بها _مباشرة_ داخل الواجهة! لذا ، إذا لم يقم تطبيق Class بتنفيذ طريقة افتراضية ، فسيأخذ المترجم التنفيذ المذكور داخل الواجهة. جميل أليس كذلك؟ لذلك في مكتبتك ، يمكنك إضافة أي عدد من الطرق الافتراضية في واجهات دون الخوف من كسر أي شيء!
|
||||
|
||||
`public interface GPS {
|
||||
public void getCoordinates();
|
||||
default public void getRoughCoordinates() {
|
||||
// implementation to return coordinates from rough sources
|
||||
// such as wifi & mobile
|
||||
System.out.println("Fetching rough coordinates...");
|
||||
}
|
||||
}
|
||||
|
||||
public interface Radio {
|
||||
public void startRadio();
|
||||
public void stopRadio();
|
||||
}
|
||||
|
||||
public class Smartphone implements GPS,Radio {
|
||||
public void getCoordinates() {
|
||||
// return some coordinates
|
||||
}
|
||||
public void startRadio() {
|
||||
// start Radio
|
||||
}
|
||||
public void stopRadio() {
|
||||
// stop Radio
|
||||
}
|
||||
|
||||
// no implementation of getRoughCoordinates()
|
||||
}
|
||||
|
||||
Smartphone motoG = new Smartphone();
|
||||
motog.getRoughCoordinates(); // Fetching rough coordinates...
|
||||
`
|
||||
```java
|
||||
public interface GPS {
|
||||
public void getCoordinates();
|
||||
default public void getRoughCoordinates() {
|
||||
// implementation to return coordinates from rough sources
|
||||
// such as wifi & mobile
|
||||
System.out.println("Fetching rough coordinates...");
|
||||
}
|
||||
}
|
||||
|
||||
public interface Radio {
|
||||
public void startRadio();
|
||||
public void stopRadio();
|
||||
}
|
||||
|
||||
public class Smartphone implements GPS,Radio {
|
||||
public void getCoordinates() {
|
||||
// return some coordinates
|
||||
}
|
||||
public void startRadio() {
|
||||
// start Radio
|
||||
}
|
||||
public void stopRadio() {
|
||||
// stop Radio
|
||||
}
|
||||
|
||||
// no implementation of getRoughCoordinates()
|
||||
}
|
||||
|
||||
Smartphone motoG = new Smartphone();
|
||||
motog.getRoughCoordinates(); // Fetching rough coordinates...
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CItp/0)
|
||||
|
||||
@ -154,35 +160,36 @@ localeTitle: واجهات
|
||||
|
||||
سؤال رائع. في هذه الحالة ، إذا لم تقدم التطبيق في الصف ، فسوف يتم خلط المترجم الضعيف ويفشل ببساطة! يجب عليك توفير تنفيذ طريقة افتراضية داخل الفئة أيضًا. هناك أيضًا طريقة رائعة تستخدم ميزة `super` للاتصال بأي تطبيق تريده:
|
||||
|
||||
`public interface Radio {
|
||||
// public void startRadio();
|
||||
// public void stopRadio();
|
||||
|
||||
default public void next() {
|
||||
System.out.println("Next from Radio");
|
||||
}
|
||||
}
|
||||
|
||||
public interface MusicPlayer {
|
||||
// public void start();
|
||||
// public void pause();
|
||||
// public void stop();
|
||||
|
||||
default public void next() {
|
||||
System.out.println("Next from MusicPlayer");
|
||||
}
|
||||
}
|
||||
|
||||
public class Smartphone implements Radio, MusicPlayer {
|
||||
public void next() {
|
||||
// Suppose you want to call MusicPlayer next
|
||||
MusicPlayer.super.next();
|
||||
}
|
||||
}
|
||||
|
||||
Smartphone motoG = new Smartphone();
|
||||
motoG.next(); // Next from MusicPlayer
|
||||
`
|
||||
```java
|
||||
public interface Radio {
|
||||
// public void startRadio();
|
||||
// public void stopRadio();
|
||||
|
||||
default public void next() {
|
||||
System.out.println("Next from Radio");
|
||||
}
|
||||
}
|
||||
|
||||
public interface MusicPlayer {
|
||||
// public void start();
|
||||
// public void pause();
|
||||
// public void stop();
|
||||
|
||||
default public void next() {
|
||||
System.out.println("Next from MusicPlayer");
|
||||
}
|
||||
}
|
||||
|
||||
public class Smartphone implements Radio, MusicPlayer {
|
||||
public void next() {
|
||||
// Suppose you want to call MusicPlayer next
|
||||
MusicPlayer.super.next();
|
||||
}
|
||||
}
|
||||
|
||||
Smartphone motoG = new Smartphone();
|
||||
motoG.next(); // Next from MusicPlayer
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CIts/0)
|
||||
|
||||
@ -220,33 +227,35 @@ localeTitle: واجهات
|
||||
|
||||
من الممكن أيضًا في Java لواجهة _ترث_ واجهة أخرى ، باستخدام ، تفكر في ذلك ، `extends` الكلمة الرئيسية:
|
||||
|
||||
`public interface Player {
|
||||
public void start();
|
||||
public void pause();
|
||||
public void stop();
|
||||
}
|
||||
|
||||
public interface MusicPlayer extends Player {
|
||||
default public void next() {
|
||||
System.out.println("Next from MusicPlayer");
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public interface Player {
|
||||
public void start();
|
||||
public void pause();
|
||||
public void stop();
|
||||
}
|
||||
|
||||
public interface MusicPlayer extends Player {
|
||||
default public void next() {
|
||||
System.out.println("Next from MusicPlayer");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
هذا يعني ، أن تطبيق Class `MusicPlayer` Interface (واجهة `MusicPlayer` يجب أن يقوم بتنفيذ _جميع_ أساليب `MusicPlayer` بالإضافة إلى `Player` :
|
||||
|
||||
`public class SmartPhone implements MusicPlayer {
|
||||
public void start() {
|
||||
System.out.println("start");
|
||||
}
|
||||
public void stop() {
|
||||
System.out.println("stop");
|
||||
}
|
||||
public void pause() {
|
||||
System.out.println("pause");
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class SmartPhone implements MusicPlayer {
|
||||
public void start() {
|
||||
System.out.println("start");
|
||||
}
|
||||
public void stop() {
|
||||
System.out.println("stop");
|
||||
}
|
||||
public void pause() {
|
||||
System.out.println("pause");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CIty/0)
|
||||
|
||||
|
||||
@ -22,10 +22,11 @@ FXML هي لغة ترميز مبنية على XML تستخدم لتعريف ال
|
||||
|
||||
#### مثال:
|
||||
|
||||
`<HBox spacing="10" alignment="bottom_right" > // Creates an HBox Object
|
||||
<Button text="Sign In"/> // Nested inside the HBox is a Button object with the text 'Sign In'
|
||||
</HBox>
|
||||
`
|
||||
```XML
|
||||
<HBox spacing="10" alignment="bottom_right" > // Creates an HBox Object
|
||||
<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` .
|
||||
|
||||
`int j = 0;
|
||||
int[] arrayOfInts = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
|
||||
int searchFor = 5;
|
||||
|
||||
for (int i : arrayOfInts)
|
||||
{
|
||||
if (arrayOfInts[j] == searchFor)
|
||||
{
|
||||
break;
|
||||
}
|
||||
j++;
|
||||
}
|
||||
|
||||
System.out.println("j = " + j);
|
||||
`
|
||||
```java
|
||||
int j = 0;
|
||||
int[] arrayOfInts = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
|
||||
int searchFor = 5;
|
||||
|
||||
for (int i : arrayOfInts)
|
||||
{
|
||||
if (arrayOfInts[j] == searchFor)
|
||||
{
|
||||
break;
|
||||
}
|
||||
j++;
|
||||
}
|
||||
|
||||
System.out.println("j = " + j);
|
||||
```
|
||||
|
||||
يمكن استخدام بيان الاستراحة أيضًا ضمن عبارة "بيان".
|
||||
|
||||
|
||||
@ -6,15 +6,16 @@ localeTitle: متابعة بيان التحكم
|
||||
|
||||
يؤدي العبارة `continue` إلى تخطي حلقة ما بعد السطور التالية بعد المتابعة والانتقال إلى بداية التكرار التالي. في `for` حلقة، يقفز التحكم إلى بيان التحديث، وفي `while` أو `do while` حلقة، يقفز التحكم إلى التعبير المنطقية / حالة.
|
||||
|
||||
`for (int j = 0; j < 10; j++)
|
||||
{
|
||||
if (j == 5)
|
||||
{
|
||||
continue;
|
||||
}
|
||||
System.out.print (j + " ");
|
||||
}
|
||||
`
|
||||
```java
|
||||
for (int j = 0; j < 10; j++)
|
||||
{
|
||||
if (j == 5)
|
||||
{
|
||||
continue;
|
||||
}
|
||||
System.out.print (j + " ");
|
||||
}
|
||||
```
|
||||
|
||||
ستتم طباعة قيمة `j` لكل تكرار ، ما عدا عندما تساوي `5` . سوف تحصل على تخطي العبارة الطباعة بسبب `continue` وسوف يكون الإخراج:
|
||||
|
||||
@ -23,26 +24,27 @@ localeTitle: متابعة بيان التحكم
|
||||
|
||||
لنفترض أنك تريد حساب عدد `i` s في كلمة `mississippi` . هنا يمكنك استخدام حلقة مع عبارة `continue` ، كما يلي:
|
||||
|
||||
`String searchWord = "mississippi";
|
||||
|
||||
// max stores the length of the string
|
||||
int max = searchWord.length();
|
||||
int numPs = 0;
|
||||
|
||||
for (int i = 0; i < max; i++)
|
||||
{
|
||||
// We only want to count i's - skip other letters
|
||||
if (searchWord.charAt(i) != 'i')
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
// Increase count_i for each i encountered
|
||||
numPs++;
|
||||
}
|
||||
|
||||
System.out.println("numPs = " + numPs);
|
||||
`
|
||||
```java
|
||||
String searchWord = "mississippi";
|
||||
|
||||
// max stores the length of the string
|
||||
int max = searchWord.length();
|
||||
int numPs = 0;
|
||||
|
||||
for (int i = 0; i < max; i++)
|
||||
{
|
||||
// We only want to count i's - skip other letters
|
||||
if (searchWord.charAt(i) != 'i')
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
// Increase count_i for each i encountered
|
||||
numPs++;
|
||||
}
|
||||
|
||||
System.out.println("numPs = " + numPs);
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CJZH/0)
|
||||
|
||||
|
||||
@ -13,15 +13,16 @@ localeTitle: بيانات القفز
|
||||
|
||||
تقسيم بيان التحكم "فاصل" خارج الحلقة عندما يتم استيفاء الشرط. هذا يعني أن بقية الحلقة لن تعمل. على سبيل المثال ، في الحلقة أدناه إذا وصلت إلى 5 ، فواصل الحلقة ، بحيث لا تستمر.
|
||||
|
||||
`for(int i=0;i<10;i++){
|
||||
|
||||
if(i == 5){ //if i is 5, break out of the loop.
|
||||
break;
|
||||
}
|
||||
|
||||
System.out.println(i);
|
||||
}
|
||||
`
|
||||
```java
|
||||
for(int i=0;i<10;i++){
|
||||
|
||||
if(i == 5){ //if i is 5, break out of the loop.
|
||||
break;
|
||||
}
|
||||
|
||||
System.out.println(i);
|
||||
}
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
@ -30,15 +31,16 @@ localeTitle: بيانات القفز
|
||||
|
||||
إن بيان التحكم 'continue' هو الإصدار الأقل كثافة من 'break'. إنه يخرج فقط من المثيل الحالي للحلقة ويستمر. في الحلقة أدناه ، إذا كان i هو 5 ، تستمر الحلقة ، لذا سوف تتخطى بيان الطباعة أدناه وتتحرك حتى تصل إلى 10 وتوقف الحلقة.
|
||||
|
||||
`for(int i=0;i<10;i++){
|
||||
|
||||
if(i == 5){ //if i is 5, break out of the current instance loop.
|
||||
continue;
|
||||
}
|
||||
|
||||
System.out.println(i);
|
||||
}
|
||||
`
|
||||
```java
|
||||
for(int i=0;i<10;i++){
|
||||
|
||||
if(i == 5){ //if i is 5, break out of the current instance loop.
|
||||
continue;
|
||||
}
|
||||
|
||||
System.out.println(i);
|
||||
}
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
|
||||
@ -6,26 +6,28 @@ localeTitle: هل ... في حين حلقة
|
||||
|
||||
يتشابه `do while` the `while` loop ، لكن مجموعة البيانات يتم ضمان تشغيلها مرة واحدة على الأقل قبل التحقق من شرط معين. من المهم ملاحظة أن حلقة "حين" هي حلقة تحكم خروج. بينما (لن يتم تنفيذه بالضرورة) ، 'do while' عبارة عن حلقة يتم التحكم في دخولها (سيتم تنفيذها مرة واحدة على الأقل ، حتى إذا كان الشرط غير صحيح).
|
||||
|
||||
`do
|
||||
{
|
||||
// Statements
|
||||
}
|
||||
while (condition);
|
||||
`
|
||||
```java
|
||||
do
|
||||
{
|
||||
// Statements
|
||||
}
|
||||
while (condition);
|
||||
```
|
||||
|
||||
## مثال
|
||||
|
||||
`int iter_DoWhile = 20;
|
||||
do
|
||||
{
|
||||
System.out.print (iter_DoWhile + " ");
|
||||
|
||||
// Increment the counter
|
||||
iter_DoWhile++;
|
||||
}
|
||||
while (iter_DoWhile < 10);
|
||||
System.out.println("iter_DoWhile Value: " + iter_DoWhile);
|
||||
`
|
||||
```java
|
||||
int iter_DoWhile = 20;
|
||||
do
|
||||
{
|
||||
System.out.print (iter_DoWhile + " ");
|
||||
|
||||
// Increment the counter
|
||||
iter_DoWhile++;
|
||||
}
|
||||
while (iter_DoWhile < 10);
|
||||
System.out.println("iter_DoWhile Value: " + iter_DoWhile);
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
@ -41,11 +43,12 @@ localeTitle: هل ... في حين حلقة
|
||||
|
||||
هل يمكنك تخمين ناتج مقتطف الشفرة التالي؟
|
||||
|
||||
`int i = 10;
|
||||
do
|
||||
{
|
||||
System.out.println("The value of i is " + i);
|
||||
i--;
|
||||
}
|
||||
while (i >= 10);
|
||||
`
|
||||
```java
|
||||
int i = 10;
|
||||
do
|
||||
{
|
||||
System.out.println("The value of i is " + i);
|
||||
i--;
|
||||
}
|
||||
while (i >= 10);
|
||||
```
|
||||
@ -6,22 +6,24 @@ localeTitle: لكل حلقة
|
||||
|
||||
كما دعا إلى تعزيز `for` حلقة، فإنه هو وسيلة مفيدة للغاية وبسيطة لتكرار عبر كل عنصر في مجموعة، مجموعة أو أي كائن التي تطبق `Iterable` اجهة.
|
||||
|
||||
`for (object : iterable)
|
||||
{
|
||||
// Statements
|
||||
}
|
||||
`
|
||||
```java
|
||||
for (object : iterable)
|
||||
{
|
||||
// Statements
|
||||
}
|
||||
```
|
||||
|
||||
تتم قراءة الحلقة كـ "لكل عنصر في `iterable` (يمكن أن يكون صفيفًا أو قابل للتحصيل وما إلى ذلك)". يجب أن يتطابق نوع `object` مع نوع عنصر `iterable` .
|
||||
|
||||
`int[] number_list = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
|
||||
|
||||
for (int numbers : number_list)
|
||||
{
|
||||
System.out.print(numbers + " ");
|
||||
// Iterated 10 times, numbers 0,1,2...9
|
||||
}
|
||||
`
|
||||
```java
|
||||
int[] number_list = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
|
||||
|
||||
for (int numbers : number_list)
|
||||
{
|
||||
System.out.print(numbers + " ");
|
||||
// Iterated 10 times, numbers 0,1,2...9
|
||||
}
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
@ -32,15 +34,16 @@ localeTitle: لكل حلقة
|
||||
|
||||
وبمقارنة هذا مع التقليدية `for` حلقات:
|
||||
|
||||
`int[] number_list = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
|
||||
|
||||
for(int i=0;i < number_list.length;i++)
|
||||
{
|
||||
System.out.print(number_list[i]+" ");
|
||||
// Iterated 10 times, numbers 0,1,2...9
|
||||
|
||||
}
|
||||
`
|
||||
```java
|
||||
int[] number_list = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};
|
||||
|
||||
for(int i=0;i < number_list.length;i++)
|
||||
{
|
||||
System.out.print(number_list[i]+" ");
|
||||
// Iterated 10 times, numbers 0,1,2...9
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
|
||||
@ -23,42 +23,46 @@ localeTitle: لحلقة
|
||||
|
||||
لاحظ أنك ستتحقق مما إذا كانت القيمة أقل من 10 ، وليس أقل من أو تساوي 10 ، حيث أنك تبدأ العدّاد الخاص بك عند 0.
|
||||
|
||||
`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.println("iter_For Value: " + 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.println("iter_For Value: " + iter_For);
|
||||
```
|
||||
|
||||
ملاحظة: من المقبول أيضًا الإعلان عن متغير داخل الحلقة for for single ككلمة.
|
||||
|
||||
`for (int iter_For = 0; iter_For < 10; iter_For++)
|
||||
{
|
||||
System.out.print (iter_For + " ");
|
||||
// Iterated 10 times, iter_For 0,1,2...9
|
||||
}
|
||||
`
|
||||
```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
|
||||
}
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
`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.
|
||||
|
||||
`int addUntil = 50;
|
||||
int sum 0;
|
||||
|
||||
for (int i = 1; i <= addUntil; i++)
|
||||
{
|
||||
sum+=i
|
||||
}
|
||||
|
||||
System.out.println("The sum of the first 50 numbers is: " + 50);
|
||||
`
|
||||
```java
|
||||
int addUntil = 50;
|
||||
int sum 0;
|
||||
|
||||
for (int i = 1; i <= addUntil; i++)
|
||||
{
|
||||
sum+=i
|
||||
}
|
||||
|
||||
System.out.println("The sum of the first 50 numbers is: " + 50);
|
||||
```
|
||||
|
||||
 [تشغيل الكود](https://repl.it/CJYr/0)
|
||||
|
||||
|
||||
@ -10,35 +10,37 @@ localeTitle: حلقات لا نهائية
|
||||
|
||||
أمثلة:
|
||||
|
||||
`// Infinite For Loop
|
||||
for ( ; ; )
|
||||
{
|
||||
// some code here
|
||||
}
|
||||
|
||||
// Infinite While Loop
|
||||
while (true)
|
||||
{
|
||||
// some code here
|
||||
}
|
||||
|
||||
// Infinite Do While Loop
|
||||
do
|
||||
{
|
||||
// some code here
|
||||
} while (true);
|
||||
`
|
||||
```java
|
||||
// Infinite For Loop
|
||||
for ( ; ; )
|
||||
{
|
||||
// some code here
|
||||
}
|
||||
|
||||
// Infinite While Loop
|
||||
while (true)
|
||||
{
|
||||
// some code here
|
||||
}
|
||||
|
||||
// Infinite Do While Loop
|
||||
do
|
||||
{
|
||||
// some code here
|
||||
} while (true);
|
||||
```
|
||||
|
||||
عادةً ، إذا كان يتم تشغيل الحلقة الخاصة بك بشكل لا نهائي ، فهذا خطأ لا ينبغي أن يحدث لأن حلقة لا نهائية لا تتوقف وتمنع بقية البرنامج من التشغيل.
|
||||
|
||||
`for(int i=0;i<100;i++){
|
||||
|
||||
if(i==49){
|
||||
i=0;
|
||||
}
|
||||
|
||||
}
|
||||
`
|
||||
```java
|
||||
for(int i=0;i<100;i++){
|
||||
|
||||
if(i==49){
|
||||
i=0;
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
يتم تشغيل الحلقة أعلاه بشكل لا نهائي لأن كل مرة أقترب فيها من 49 ، يتم تعيينها إلى 0. هذا يعني أني لم تصل إلى 100 لإنهاء الحلقة ، لذا فإن الحلقة هي حلقة لا نهائية.
|
||||
|
||||
|
||||
@ -6,11 +6,12 @@ localeTitle: حائط اللوب
|
||||
|
||||
في `while` حلقة تنفيذ مرارا وتكرارا على كتلة من البيانات حتى الشرط المحدد داخل الأقواس بتقييم ل `false` . على سبيل المثال:
|
||||
|
||||
`while (some_condition_is_true)
|
||||
{
|
||||
// do something
|
||||
}
|
||||
`
|
||||
```java
|
||||
while (some_condition_is_true)
|
||||
{
|
||||
// do something
|
||||
}
|
||||
```
|
||||
|
||||
يتم تنفيذ كل "التكرار" (من تنفيذ كتلة البيانات) من قبل تقييم الشرط المحدد داخل الأقواس - يتم تنفيذ البيانات فقط إذا تم تقييم الشرط إلى `true` . إذا تم تقييمه إلى " `false` ، يتم استئناف تنفيذ البرنامج من العبارة الموجودة مباشرةً بعد المربع " `while` .
|
||||
|
||||
@ -20,21 +21,23 @@ localeTitle: حائط اللوب
|
||||
|
||||
في المثال التالي ، يتم إعطاء `expression` بواسطة `iter_While < 10` . نحن زيادة `iter_While` بواسطة `1` كل مرة يتم تنفيذ الحلقة. حلقة `while` فواصل عندما تصل قيمة `iter_While` إلى `10` .
|
||||
|
||||
`int iter_While = 0;
|
||||
while (iter_While < 10)
|
||||
{
|
||||
System.out.print(iter_While + " ");
|
||||
// Increment the counter
|
||||
// Iterated 10 times, iter_While 0,1,2...9
|
||||
iter_While++;
|
||||
}
|
||||
System.out.println("iter_While Value: " + iter_While);
|
||||
`
|
||||
```java
|
||||
int iter_While = 0;
|
||||
while (iter_While < 10)
|
||||
{
|
||||
System.out.print(iter_While + " ");
|
||||
// Increment the counter
|
||||
// Iterated 10 times, iter_While 0,1,2...9
|
||||
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)
|
||||
@ -41,14 +41,15 @@ localeTitle: الأساليب 'Methods'
|
||||
|
||||
يمكن تمرير المعلمات في الأساليب. المعلمات معلنة فقط بعد اسم الأسلوب ، داخل الأقواس. بناء الجملة لإعلان المعلمة هو \[نوع البيانات\] \[الاسم\].
|
||||
|
||||
`public class Car {
|
||||
private String name;
|
||||
|
||||
public void changeName(String newName) {
|
||||
name = newName;
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class Car {
|
||||
private String name;
|
||||
|
||||
public void changeName(String newName) {
|
||||
name = newName;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
كما هو الحال مع أي لغة أخرى ، يتم استخدام الأساليب (أو الوظائف ، إذا كنت هنا من JS world) في كثير من الأحيان من حيث النمطية والقابلية لإعادة الاستخدام.
|
||||
|
||||
|
||||
@ -10,10 +10,11 @@ POJO لتقف على "كائن جافا قديم سهل". هذا يختلف عن
|
||||
|
||||
1. يجب ألا يتم توسيع فئات Java المحددة مسبقًا ؛
|
||||
|
||||
`public class Foo extends javax.servlet.http.HttpServlet {
|
||||
...// body ...
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class Foo extends javax.servlet.http.HttpServlet {
|
||||
...// body ...
|
||||
}
|
||||
```
|
||||
|
||||
2. يجب أن لا تنفذ واجهات prespecified ؛
|
||||
|
||||
|
||||
@ -12,25 +12,27 @@ localeTitle: ثابتة
|
||||
|
||||
**_مثال:_**
|
||||
|
||||
`public class Counter {
|
||||
public static int COUNT = 0;
|
||||
Counter() {
|
||||
COUNT++;
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class Counter {
|
||||
public static int COUNT = 0;
|
||||
Counter() {
|
||||
COUNT++;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
ستتم مشاركة المتغير `COUNT` بواسطة جميع كائنات تلك الفئة. عندما نقوم بإنشاء كائنات من صف مكافحة لدينا في الرئيسي ، والوصول إلى متغير ثابت.
|
||||
|
||||
`public class MyClass {
|
||||
public static void main(String[] args) {
|
||||
Counter c1 = new Counter();
|
||||
Counter c2 = new Counter();
|
||||
System.out.println(Counter.COUNT);
|
||||
}
|
||||
}
|
||||
// Outputs "2"
|
||||
`
|
||||
```java
|
||||
public class MyClass {
|
||||
public static void main(String[] args) {
|
||||
Counter c1 = new Counter();
|
||||
Counter c2 = new Counter();
|
||||
System.out.println(Counter.COUNT);
|
||||
}
|
||||
}
|
||||
// Outputs "2"
|
||||
```
|
||||
|
||||
Outout هو 2 ، لأن متغير `COUNT` ثابت ويتم زيادته بمقدار واحد في كل مرة يتم إنشاء كائن جديد لفئة Counter. يمكنك أيضًا الوصول إلى المتغير الثابت باستخدام أي كائن من هذه الفئة ، مثل `c1.COUNT` .
|
||||
|
||||
@ -43,29 +45,31 @@ Outout هو 2 ، لأن متغير `COUNT` ثابت ويتم زيادته بمق
|
||||
|
||||
**_مثال:_**
|
||||
|
||||
`public class Counter {
|
||||
public static int COUNT = 0;
|
||||
Counter() {
|
||||
COUNT++;
|
||||
}
|
||||
|
||||
public static void increment(){
|
||||
COUNT++;
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class Counter {
|
||||
public static int COUNT = 0;
|
||||
Counter() {
|
||||
COUNT++;
|
||||
}
|
||||
|
||||
public static void increment(){
|
||||
COUNT++;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
يمكن أيضًا استدعاء أساليب ثابتة من مثيل الطبقة.
|
||||
|
||||
`public class MyClass {
|
||||
public static void main(String[] args) {
|
||||
Counter.increment();
|
||||
Counter.increment();
|
||||
System.out.println(Counter.COUNT);
|
||||
}
|
||||
}
|
||||
// Outputs "2"
|
||||
`
|
||||
```java
|
||||
public class MyClass {
|
||||
public static void main(String[] args) {
|
||||
Counter.increment();
|
||||
Counter.increment();
|
||||
System.out.println(Counter.COUNT);
|
||||
}
|
||||
}
|
||||
// Outputs "2"
|
||||
```
|
||||
|
||||
هو 2 الإخراج لأنه يحصل زيادة بواسطة `increament()` الأسلوب `increament()` . على غرار المتغيرات الثابتة ، يمكن أيضًا الوصول إلى الطرق الثابتة باستخدام متغيرات الحالة.
|
||||
|
||||
@ -75,22 +79,24 @@ Outout هو 2 ، لأن متغير `COUNT` ثابت ويتم زيادته بمق
|
||||
|
||||
**_مثال:_**
|
||||
|
||||
`public class Saturn {
|
||||
public static final int MOON_COUNT;
|
||||
|
||||
static {
|
||||
MOON_COUNT = 62;
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class Saturn {
|
||||
public static final int MOON_COUNT;
|
||||
|
||||
`public class Main {
|
||||
public static void main(String[] args) {
|
||||
System.out.println(Saturn.MOON_COUNT);
|
||||
}
|
||||
}
|
||||
// Outputs "62"
|
||||
`
|
||||
static {
|
||||
MOON_COUNT = 62;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```java
|
||||
public class Main {
|
||||
public static void main(String[] args) {
|
||||
System.out.println(Saturn.MOON_COUNT);
|
||||
}
|
||||
}
|
||||
// Outputs "62"
|
||||
```
|
||||
|
||||
الإخراج هو 62 ، لأنه يتم تعيين متغير `MOON_COUNT` تلك القيمة في كتلة ثابتة.
|
||||
|
||||
@ -100,25 +106,27 @@ Outout هو 2 ، لأن متغير `COUNT` ثابت ويتم زيادته بمق
|
||||
|
||||
**_مثال:_**
|
||||
|
||||
`public class Outer {
|
||||
|
||||
public Outer() {
|
||||
}
|
||||
|
||||
public static class Inner {
|
||||
public Inner() {
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class Outer {
|
||||
|
||||
public Outer() {
|
||||
}
|
||||
|
||||
public static class Inner {
|
||||
public Inner() {
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
في المثال أعلاه ، يمكن الوصول إلى الطبقة `Inner` مباشرة كعضو ثابت في الفصل `Outer` .
|
||||
|
||||
`public class Main {
|
||||
public static void main(String[] args) {
|
||||
Outer.Inner inner = new Outer.Inner();
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class Main {
|
||||
public static void main(String[] args) {
|
||||
Outer.Inner inner = new Outer.Inner();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
واحدة من حالات الاستخدام للدروس المتداخلة الثابتة في [نموذج البناء](https://en.wikipedia.org/wiki/Builder_pattern#Java) المستخدمة بشكل شائع في جافا.
|
||||
@ -42,54 +42,57 @@ localeTitle: تيارات
|
||||
|
||||
## أمثلة
|
||||
|
||||
`// print the length of all Strings in a List
|
||||
for (String string : Arrays.asList("abc", "de", "f", "abc")) {
|
||||
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
|
||||
`
|
||||
```java
|
||||
// print the length of all Strings in a List
|
||||
for (String string : Arrays.asList("abc", "de", "f", "abc")) {
|
||||
int length = string.length();
|
||||
System.out.println(length);
|
||||
}
|
||||
|
||||
`// print all Strings in a List with a Length greater than 2
|
||||
for (String string : Arrays.asList("abc", "de", "f", "abc")) {
|
||||
if (string.length() > 2) {
|
||||
System.out.println(string);
|
||||
}
|
||||
}
|
||||
|
||||
Arrays.asList("abc", "de", "f", "abc")
|
||||
.stream()
|
||||
.filter(string -> string.length() > 2)
|
||||
.forEach(System.out::println);
|
||||
|
||||
// output: abc abc
|
||||
`
|
||||
Arrays.asList("abc", "de", "f", "abc")
|
||||
.stream()
|
||||
.map(String::length)
|
||||
.forEach(System.out::println);
|
||||
|
||||
`// 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
|
||||
`
|
||||
// output: 3 2 1 3
|
||||
```
|
||||
|
||||
```java
|
||||
// print all Strings in a List with a Length greater than 2
|
||||
for (String string : Arrays.asList("abc", "de", "f", "abc")) {
|
||||
if (string.length() > 2) {
|
||||
System.out.println(string);
|
||||
}
|
||||
}
|
||||
|
||||
Arrays.asList("abc", "de", "f", "abc")
|
||||
.stream()
|
||||
.filter(string -> string.length() > 2)
|
||||
.forEach(System.out::println);
|
||||
|
||||
// output: abc abc
|
||||
```
|
||||
|
||||
```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` عند التحقق من حرف واحد.
|
||||
|
||||
`String course = "FCC";
|
||||
System.out.println(course instanceof Object);
|
||||
`
|
||||
```java
|
||||
String course = "FCC";
|
||||
System.out.println(course instanceof Object);
|
||||
```
|
||||
|
||||
انتاج:
|
||||
|
||||
`true
|
||||
`
|
||||
```
|
||||
true
|
||||
```
|
||||
|
||||
يمكنك إنشاء كائن سلسلة بالطرق التالية:
|
||||
|
||||
@ -27,10 +29,11 @@ localeTitle: سلاسل
|
||||
|
||||
في مقتطف الشفرة هذا ، كم عدد كائنات السلسلة التي تم إنشاؤها؟
|
||||
|
||||
`String str = "This is a string";
|
||||
String str2 = "This is a string";
|
||||
String str3 = new String("This is a string");
|
||||
`
|
||||
```java
|
||||
String str = "This is a string";
|
||||
String str2 = "This is a string";
|
||||
String str3 = new String("This is a string");
|
||||
```
|
||||
|
||||
الإجابة هي: يتم إنشاء كائنات سلسلة 2. `str` و `str2` كلاهما يشيران إلى نفس الكائن. `str3` لديه نفس المحتوى ولكن باستخدام القسري `new` خلق كائن جديد ومتميز.
|
||||
|
||||
@ -38,10 +41,11 @@ localeTitle: سلاسل
|
||||
|
||||
يمكنك اختبار ذلك باستخدام swallow أو fast Object Compar `==` و `equals()` .
|
||||
|
||||
`System.out.println(str == str2); // This prints 'true'
|
||||
System.out.println(str == str3); // This prints 'false'
|
||||
System.out.println(str.equals(str3)); // This prints 'true'
|
||||
`
|
||||
```java
|
||||
System.out.println(str == str2); // This prints 'true'
|
||||
System.out.println(str == str3); // This prints 'false'
|
||||
System.out.println(str.equals(str3)); // This prints 'true'
|
||||
```
|
||||
|
||||
فيما يلي مثال آخر حول كيفية إنشاء سلسلة في Java باستخدام الطرق المختلفة:
|
||||
|
||||
@ -63,17 +67,19 @@ localeTitle: سلاسل
|
||||
|
||||
إذا كنت ترغب في مقارنة قيمة متغيرين للسلسلة ، فلا يمكنك استخدام ==. هذا يرجع إلى حقيقة أن هذا سوف يقارن إشارات المتغيرات وليس القيم المرتبطة بها. لمقارنة القيم المخزنة من السلاسل التي تستخدمها تساوي هذه الطريقة.
|
||||
|
||||
`boolean equals(Object obj)
|
||||
`
|
||||
```java
|
||||
boolean equals(Object obj)
|
||||
```
|
||||
|
||||
تقوم بإرجاع true إذا كان كائنان متساويان و false على خلاف ذلك.
|
||||
|
||||
`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
|
||||
`
|
||||
```java
|
||||
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
|
||||
```
|
||||
|
||||
المقارنة الأولى غير صحيحة لأن "==" ينظر إلى المراجع وهي ليست متماثلة.
|
||||
|
||||
@ -81,15 +87,16 @@ localeTitle: سلاسل
|
||||
|
||||
لدينا عدة طرق يحمل في ثناياه عوامل في سلسلة. فيما يلي مثال لطريقة طول السلسلة ().
|
||||
|
||||
`public class StringDemo {
|
||||
|
||||
public static void main(String args[]) {
|
||||
String palindrome = "Dot saw I was Tod";
|
||||
int len = palindrome.length();
|
||||
System.out.println( "String Length is : " + len );
|
||||
}
|
||||
}
|
||||
`
|
||||
```java
|
||||
public class StringDemo {
|
||||
|
||||
public static void main(String args[]) {
|
||||
String palindrome = "Dot saw I was Tod";
|
||||
int len = palindrome.length();
|
||||
System.out.println( "String Length is : " + len );
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
سيؤدي ذلك إلى - `String Length is : 17`
|
||||
|
||||
@ -105,25 +112,28 @@ localeTitle: سلاسل
|
||||
|
||||
"طول" السلسلة هو مجرد عدد الأحرف الموجودة فيه. حتى "hi" هي طول 2 و "Hello" هي length 5. ترجع طريقة length () على سلسلة طولها ، كما يلي:
|
||||
|
||||
`String a = "Hello";
|
||||
int len = a.length(); // len is 5
|
||||
`
|
||||
```java
|
||||
String a = "Hello";
|
||||
int len = a.length(); // len is 5
|
||||
```
|
||||
|
||||
#### طرق المقارنة الأخرى التي يمكن استخدامها أيضًا في السلسلة هي:
|
||||
|
||||
1. equalsIgnoreCase (): - يقارن السلسلة دون الأخذ بعين الاعتبار حساسية الحالة.
|
||||
|
||||
`String a = "HELLO";
|
||||
String b = "hello";
|
||||
System.out.println(a.equalsIgnoreCase(b)); // It will print true
|
||||
`
|
||||
```java
|
||||
String a = "HELLO";
|
||||
String b = "hello";
|
||||
System.out.println(a.equalsIgnoreCase(b)); // It will print true
|
||||
```
|
||||
|
||||
2. قارنTo: - يقارن قيمة lexicographically وإرجاع عدد صحيح.
|
||||
|
||||
`String a = "Sam";
|
||||
String b = "Sam";
|
||||
String c = "Ram";
|
||||
System.out.println(a.compareTo(b)); // 0
|
||||
System.out.prinltn(a.compareTo(c)); // 1 since (a>b)
|
||||
System.out.println(c.compareTo(a)); // -1 since (c<a)
|
||||
`
|
||||
```java
|
||||
String a = "Sam";
|
||||
String b = "Sam";
|
||||
String c = "Ram";
|
||||
System.out.println(a.compareTo(b)); // 0
|
||||
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_ >؛
|
||||
|
||||
`// Primitive Data Type
|
||||
int i;
|
||||
|
||||
// Reference Data Type
|
||||
Float myFloat;
|
||||
`
|
||||
```java
|
||||
// Primitive Data Type
|
||||
int i;
|
||||
|
||||
// Reference Data Type
|
||||
Float myFloat;
|
||||
```
|
||||
|
||||
يمكنك _تعيين_ قيمة للمتغير إما في نفس الوقت الذي تقوم فيه بالتصريح (الذي يسمى _التهيئة_ ) ، أو في أي مكان في الكود بعد أن تقوم بإعلانه. الرمز **\=** يستخدم لنفسه.
|
||||
|
||||
`// Initialise the variable of Primitive Data Type 'int' to store the value 10
|
||||
int i = 10;
|
||||
double amount = 10.0;
|
||||
boolean isOpen = false;
|
||||
char c = 'a'; // Note the single quotes
|
||||
|
||||
//Variables can also be declared in one statement, and assigned values later.
|
||||
int j;
|
||||
j = 10;
|
||||
|
||||
// initiates an Float object with value 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
|
||||
int byteValue = 0B101;
|
||||
byte anotherByte = (byte)0b00100001;
|
||||
`
|
||||
```java
|
||||
// Initialise the variable of Primitive Data Type 'int' to store the value 10
|
||||
int i = 10;
|
||||
double amount = 10.0;
|
||||
boolean isOpen = false;
|
||||
char c = 'a'; // Note the single quotes
|
||||
|
||||
//Variables can also be declared in one statement, and assigned values later.
|
||||
int j;
|
||||
j = 10;
|
||||
|
||||
// initiates an Float object with value 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
|
||||
int byteValue = 0B101;
|
||||
byte anotherByte = (byte)0b00100001;
|
||||
```
|
||||
|
||||
كما يتضح من المثال أعلاه ، فإن متغيرات النوع البدائي تتصرف بشكل مختلف قليلاً عن متغيرات النوع المرجعي (& التفاف) - بينما المتغيرات الأولية _تخزن_ القيمة الفعلية ، _تشير_ المتغيرات المرجعية _إلى_ "كائن" يحتوي على القيمة الفعلية. يمكنك معرفة المزيد في الأقسام المرتبطة أدناه.
|
||||
|
||||
|
||||
@ -45,11 +45,11 @@ Question: شرح ng-App directive. الإجابة: يبدأ توجيه ng-app ت
|
||||
|
||||
سؤال: اشرح توجيه ng-init الإجابة: يشرح توجيه ng-init بيانات تطبيق AngularJS. يتم استخدامه لوضع القيم للمتغيرات لاستخدامها في التطبيق. على سبيل المثال: في المثال أدناه ، قمنا بتهيئة مجموعة من البلدان ، باستخدام بنية JSON لتحديد مجموعة من البلدان.
|
||||
|
||||
`
|
||||
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
|
||||
...
|
||||
</div>
|
||||
`
|
||||
```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>
|
||||
```
|
||||
|
||||
سؤال: كيف تشارك البيانات بين وحدات التحكم؟ الإجابة: أنشئ خدمة AngularJS التي ستحتفظ بالبيانات وحقنها داخل وحدات التحكم. يعد استخدام الخدمة هو الطريقة الأنظف والأسرع والأسهل للاختبار. ومع ذلك ، هناك طريقتان آخرتان لتنفيذ مشاركة البيانات بين وحدات التحكم ، مثل: - استخدام الأحداث - استخدام $ parent ، nextSibling ، controllerAs ، وما إلى ذلك للوصول مباشرة إلى وحدات التحكم - استخدام $ rootScope لإضافة البيانات على (ليس ممارسة جيدة)
|
||||
|
||||
|
||||
@ -9,8 +9,9 @@ localeTitle: الحجج
|
||||
\`\` \`جافا سكريبت
|
||||
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'}
|
||||
|
||||
@ -25,8 +26,9 @@ function storeNames () {return arguments؛ }
|
||||
|
||||
// أو طريقة 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) ؛ عودة الارجاع }
|
||||
|
||||
@ -34,18 +36,19 @@ function storeNames () {return arguments؛ }
|
||||
|
||||
// يجب أن يكون الناتج: // // \[100 ، 75\] <- لماذا؟ لأنه بدأ من الفهرس 1 وتوقف عند الفهرس 3 // لذلك ، لم يؤخذ في الاعتبار المؤشر 3 (40). // // إذا أزلنا المعلمة "3" ، لن نتركها سوى (الحجج ، 1) // كل حجة من الفهرس 1: \[100 ، 75 ، 40 ، 89 ، 95\].
|
||||
|
||||
`### Optimization issues with Array.slice()
|
||||
|
||||
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.
|
||||
>
|
||||
> _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:
|
||||
`
|
||||
```
|
||||
### Optimization issues with Array.slice()
|
||||
|
||||
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.
|
||||
>
|
||||
> _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:
|
||||
```
|
||||
|
||||
جافا سكريبت var args = \[\]؛ // صفيف فارغ ، في البداية. لـ (var i = 0؛ i <arguments.length؛ i ++) { args.push (الحجج \[أنا\]) } // Now 'args' هي مصفوفة تحمل وسائطك. \`\` \`
|
||||
|
||||
|
||||
@ -64,18 +64,20 @@ RabbitMQ يحدث ليكون أسهل وسيط منصات منصة الوسيط
|
||||
|
||||
بعد استيراد `tortoise` `node-cron` ، لقد ذهبنا إلى الأمام وأضفت اتصالاً بـ RabbitMQ. بعد ذلك ، دعنا نكتب وظيفة سريعة وقذرة تنشر رسالة إلى أرنب:
|
||||
|
||||
`function scheduleMessage(){
|
||||
let payload = {url: 'https://randomuser.me/api'}
|
||||
tortoise
|
||||
.exchange('random-user-exchange', 'direct', { durable:false })
|
||||
.publish('random-user-key', payload)
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
function scheduleMessage(){
|
||||
let payload = {url: 'https://randomuser.me/api'}
|
||||
tortoise
|
||||
.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 ثانية.
|
||||
|
||||
`cron.schedule('60 * * * * *', scheduleMessage)
|
||||
`
|
||||
```javascript
|
||||
cron.schedule('60 * * * * *', scheduleMessage)
|
||||
```
|
||||
|
||||
وناشرنا جاهز! ولكن في الحقيقة ليس جيدًا بدون المستهلك أن يستهلك هذه الرسائل فعليًا! لكننا نحتاج أولاً إلى مكتبة يمكنها الاتصال بعنوان URL في هذه الرسائل. شخصيا ، أنا استخدم `superagent` : `npm install --save superagent` .
|
||||
|
||||
@ -97,20 +99,21 @@ RabbitMQ يحدث ليكون أسهل وسيط منصات منصة الوسيط
|
||||
|
||||
وقت كتابة التعليمات البرمجية لاستهلاك الرسائل فعليًا:
|
||||
|
||||
`tortoise
|
||||
.queue('random-user-queue', { durable: false })
|
||||
// Add as many bindings as needed
|
||||
.exchange('random-user-exchange', 'direct', 'random-user-key', { durable: false })
|
||||
.prefetch(1)
|
||||
.subscribe(function(msg, ack, nack) {
|
||||
// Handle
|
||||
let payload = JSON.parse(msg)
|
||||
getURL(payload['url']).then((response) => {
|
||||
console.log('Job result: ', response)
|
||||
})
|
||||
ack() // or nack()
|
||||
})
|
||||
`
|
||||
```javascript
|
||||
tortoise
|
||||
.queue('random-user-queue', { durable: false })
|
||||
// Add as many bindings as needed
|
||||
.exchange('random-user-exchange', 'direct', 'random-user-key', { durable: false })
|
||||
.prefetch(1)
|
||||
.subscribe(function(msg, ack, nack) {
|
||||
// Handle
|
||||
let payload = JSON.parse(msg)
|
||||
getURL(payload['url']).then((response) => {
|
||||
console.log('Job result: ', response)
|
||||
})
|
||||
ack() // or nack()
|
||||
})
|
||||
```
|
||||
|
||||
هنا ، أخبرنا `tortoise` أن نستمع إلى `random-user-queue` ، وهذا يرتبط `random-user-key` `random-user-exchange` . بمجرد استلام الرسالة ، يتم استرداد الحمولة من `msg` ، ويتم تمريرها إلى `getURL` ، والتي بدورها تقوم بإرجاع Promation مع استجابة JSON المطلوبة من RandomUser API.
|
||||
|
||||
|
||||
@ -8,11 +8,12 @@ Booleans هي نوع بيانات بدائي شائع الاستخدام في ل
|
||||
|
||||
في Javascript ، غالبًا ما يكون هناك نوع الإكراه الضمني للقيمة المنطقية. إذا كان لديك مثلاً عبارة if تتحقق من تعبير معين ، فسيتم فرض هذا التعبير على قيمة منطقية:
|
||||
|
||||
`var a = 'a string';
|
||||
if (a) {
|
||||
console.log(a); // logs 'a string'
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
var a = 'a string';
|
||||
if (a) {
|
||||
console.log(a); // logs 'a string'
|
||||
}
|
||||
```
|
||||
|
||||
هناك بعض القيم القليلة التي سيتم فرضها على false:
|
||||
|
||||
@ -27,24 +28,25 @@ Booleans هي نوع بيانات بدائي شائع الاستخدام في ل
|
||||
|
||||
إحدى الطرق التي يتم بها استخدام نوع الإكراه هي استخدام مشغلي (أو `||` ) و ( `&&` ):
|
||||
|
||||
`var a = 'word';
|
||||
var b = false;
|
||||
var c = true;
|
||||
var d = 0
|
||||
var e = 1
|
||||
var f = 2
|
||||
var g = null
|
||||
|
||||
console.log(a || b); // 'word'
|
||||
console.log(c || a); // true
|
||||
console.log(b || a); // 'word'
|
||||
console.log(e || f); // 1
|
||||
console.log(f || e); // 2
|
||||
console.log(d || g); // null
|
||||
console.log(g || d); // 0
|
||||
console.log(a && c); // true
|
||||
console.log(c && a); // 'word'
|
||||
`
|
||||
```javascript
|
||||
var a = 'word';
|
||||
var b = false;
|
||||
var c = true;
|
||||
var d = 0
|
||||
var e = 1
|
||||
var f = 2
|
||||
var g = null
|
||||
|
||||
console.log(a || b); // 'word'
|
||||
console.log(c || a); // true
|
||||
console.log(b || a); // 'word'
|
||||
console.log(e || f); // 1
|
||||
console.log(f || e); // 2
|
||||
console.log(d || g); // null
|
||||
console.log(g || d); // 0
|
||||
console.log(a && c); // true
|
||||
console.log(c && a); // 'word'
|
||||
```
|
||||
|
||||
كما ترى ، يفحص المشغل _أو_ العامل الأول. إذا كان هذا صحيحًا أو صريحًا ، فسيتم إرجاعه على الفور (وهذا هو سبب حصولنا على كلمة في الحالة الأولى وصحيح في الحالة الثانية). إذا لم يكن صحيحا أو صائبا ، فإنه يعيد المعامل الثاني (وهذا هو السبب في أننا نحصل على كلمة في الحالة الثالثة).
|
||||
|
||||
@ -60,33 +62,37 @@ Booleans هي نوع بيانات بدائي شائع الاستخدام في ل
|
||||
|
||||
يتم تقييم أي كائن لا تكون قيمته غير محددة أو خالية ، بما في ذلك كائن منطقي قيمته غير صحيح ، إلى true عند تمريره إلى بيان شرطي. إذا كان هذا صحيحًا ، فسيؤدي هذا إلى تنفيذ الوظيفة. على سبيل المثال ، يتم تقييم الشرط الموجود في العبارة if في الحالة التالية:
|
||||
|
||||
`var x = new Boolean(false);
|
||||
if (x) {
|
||||
// this code is executed
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
var x = new Boolean(false);
|
||||
if (x) {
|
||||
// this code is executed
|
||||
}
|
||||
```
|
||||
|
||||
لا ينطبق هذا السلوك على الأوليات البولية. على سبيل المثال ، يتم تقييم الشرط الموجود في العبارة if في حالة الخطأ:
|
||||
|
||||
`var x = false;
|
||||
if (x) {
|
||||
// this code is not executed
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
var x = false;
|
||||
if (x) {
|
||||
// this code is not executed
|
||||
}
|
||||
```
|
||||
|
||||
لا تستخدم كائنًا منطقيًا لتحويل قيمة غير منطقية إلى قيمة منطقية. بدلاً من ذلك ، استخدم Boolean كدالة لتنفيذ هذه المهمة:
|
||||
|
||||
`var x = Boolean(expression); // preferred
|
||||
var x = new Boolean(expression); // don't use
|
||||
`
|
||||
```javascript
|
||||
var x = Boolean(expression); // preferred
|
||||
var x = new Boolean(expression); // don't use
|
||||
```
|
||||
|
||||
إذا قمت بتحديد أي كائن ، بما في ذلك كائن منطقي قيمته غير كاذبة ، كالقيمة الأولية لكائن Boolean ، فإن الكائن المنطقي الجديد يحتوي على قيمة true.
|
||||
|
||||
`var myFalse = new Boolean(false); // initial value of false
|
||||
var g = new Boolean(myFalse); // initial value of true
|
||||
var myString = new String('Hello'); // string object
|
||||
var s = new Boolean(myString); // initial value of true
|
||||
`
|
||||
```javascript
|
||||
var myFalse = new Boolean(false); // initial value of false
|
||||
var g = new Boolean(myFalse); // 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){
|
||||
var myQuote = "Like I always say, " + quote;
|
||||
callback(myQuote); // 2
|
||||
}
|
||||
|
||||
function logQuote(quote){
|
||||
console.log(quote);
|
||||
}
|
||||
|
||||
createQuote("eat your vegetables!", logQuote); // 1
|
||||
|
||||
// Result in console:
|
||||
// Like I always say, eat your vegetables!
|
||||
`
|
||||
```javascript
|
||||
function createQuote(quote, callback){
|
||||
var myQuote = "Like I always say, " + quote;
|
||||
callback(myQuote); // 2
|
||||
}
|
||||
|
||||
function logQuote(quote){
|
||||
console.log(quote);
|
||||
}
|
||||
|
||||
createQuote("eat your vegetables!", logQuote); // 1
|
||||
|
||||
// Result in console:
|
||||
// Like I always say, eat your vegetables!
|
||||
```
|
||||
|
||||
في المثال أعلاه ، يعد `createQuote` هو دالة الترتيب الأعلى ، والتي تقبل الوسيطتين ، والثانية هي معاودة الاتصال. يتم استخدام وظيفة `logQuote` لتمرير في وظيفة رد الاتصال الخاصة بنا. عندما نقوم بتنفيذ وظيفة `createQuote` _(1)_ ، نلاحظ أننا _لا_ `logQuote` أقواس `logQuote` عندما `logQuote` كوسيطة. هذا لأننا لا نريد تنفيذ وظيفة معاودة الاتصال الخاصة بنا على الفور ، فنحن نريد ببساطة تمرير تعريف الدالة إلى الوظيفة ذات الترتيب الأعلى بحيث يمكن تنفيذه لاحقًا.
|
||||
|
||||
@ -35,18 +36,20 @@ localeTitle: وظائف رد الاتصال
|
||||
|
||||
بالإضافة إلى ذلك ، يمكن أن نمر في وظائف مجهولة مثل الاستدعاءات. سيكون للنداء أدناه إلى `createQuote` نفس النتيجة كما في المثال أعلاه:
|
||||
|
||||
`createQuote("eat your vegetables!", function(quote){
|
||||
console.log(quote);
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
createQuote("eat your vegetables!", function(quote){
|
||||
console.log(quote);
|
||||
});
|
||||
```
|
||||
|
||||
بالمناسبة ، لا _تحتاج_ إلى استخدام الكلمة "callback" كاسم لوسيطة الخاص بك ، تحتاج Javascript فقط إلى معرفة أنه اسم الوسيطة الصحيح. استناداً إلى المثال أعلاه ، ستتصرف الدالة أدناه بنفس الطريقة بالضبط.
|
||||
|
||||
`function createQuote(quote, functionToCall) {
|
||||
var myQuote = "Like I always say, " + quote;
|
||||
functionToCall(myQuote);
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
function createQuote(quote, functionToCall) {
|
||||
var myQuote = "Like I always say, " + quote;
|
||||
functionToCall(myQuote);
|
||||
}
|
||||
```
|
||||
|
||||
## لماذا استخدام Callbacks؟
|
||||
|
||||
@ -54,22 +57,23 @@ localeTitle: وظائف رد الاتصال
|
||||
|
||||
دعونا نلقي نظرة على مثال يحاكي طلب إلى الخادم:
|
||||
|
||||
`function serverRequest(query, callback){
|
||||
setTimeout(function(){
|
||||
var response = query + "full!";
|
||||
callback(response);
|
||||
},5000);
|
||||
}
|
||||
|
||||
function getResults(results){
|
||||
console.log("Response from the server: " + results);
|
||||
}
|
||||
|
||||
serverRequest("The glass is half ", getResults);
|
||||
|
||||
// Result in console after 5 second delay:
|
||||
// Response from the server: The glass is half full!
|
||||
`
|
||||
```javascript
|
||||
function serverRequest(query, callback){
|
||||
setTimeout(function(){
|
||||
var response = query + "full!";
|
||||
callback(response);
|
||||
},5000);
|
||||
}
|
||||
|
||||
function getResults(results){
|
||||
console.log("Response from the server: " + results);
|
||||
}
|
||||
|
||||
serverRequest("The glass is half ", getResults);
|
||||
|
||||
// Result in console after 5 second delay:
|
||||
// Response from the server: The glass is half full!
|
||||
```
|
||||
|
||||
في المثال أعلاه ، نجري طلبًا زائفًا على الخادم. بعد مرور 5 ثوانٍ يتم تعديل الاستجابة ثم يتم تنفيذ `getResults` وظيفة رد الاتصال الخاصة بنا. للاطلاع على هذا الإجراء ، يمكنك نسخ / لصق الشفرة الواردة أعلاه في أداة مطور المتصفح وتنفيذها.
|
||||
|
||||
|
||||
@ -25,27 +25,28 @@ localeTitle: الطبقات
|
||||
|
||||
هذا غير مدعوم في المتصفحات القديمة وتم تقديمه في ECMAScript 2015.
|
||||
|
||||
`class Person {
|
||||
constructor(firstName, lastName) {
|
||||
this._firstName = firstName;
|
||||
this._lastName = lastName;
|
||||
}
|
||||
|
||||
log() {
|
||||
console.log('I am', this._firstName, this._lastName);
|
||||
}
|
||||
|
||||
// setters
|
||||
set profession(val) {
|
||||
this._profession = val;
|
||||
}
|
||||
// getters
|
||||
get profession() {
|
||||
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
||||
}
|
||||
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
class Person {
|
||||
constructor(firstName, lastName) {
|
||||
this._firstName = firstName;
|
||||
this._lastName = lastName;
|
||||
}
|
||||
|
||||
log() {
|
||||
console.log('I am', this._firstName, this._lastName);
|
||||
}
|
||||
|
||||
// setters
|
||||
set profession(val) {
|
||||
this._profession = val;
|
||||
}
|
||||
// getters
|
||||
get profession() {
|
||||
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -58,111 +59,115 @@ localeTitle: الطبقات
|
||||
|
||||
هنا ، تتم إضافة جميع الأساليب إلى النموذج الأولي
|
||||
|
||||
`function Person(firstName, lastName) {
|
||||
this._firstName = firstName;
|
||||
this._lastName = 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
|
||||
Object.defineProperty(Person.prototype, 'profession', {
|
||||
set: function(val) {
|
||||
this._profession = val;
|
||||
},
|
||||
get: function() {
|
||||
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
||||
}
|
||||
})
|
||||
`
|
||||
```javascript
|
||||
function Person(firstName, lastName) {
|
||||
this._firstName = firstName;
|
||||
this._lastName = 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
|
||||
Object.defineProperty(Person.prototype, 'profession', {
|
||||
set: function(val) {
|
||||
this._profession = val;
|
||||
},
|
||||
get: function() {
|
||||
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
يمكنك أيضا كتابة أساليب النموذج الأولي على وظيفة `Person` النحو التالي
|
||||
|
||||
`Person.prototype = {
|
||||
log: function() {
|
||||
console.log('I am ', this._firstName, this._lastName);
|
||||
}
|
||||
set profession(val) {
|
||||
this._profession = val;
|
||||
}
|
||||
|
||||
get profession() {
|
||||
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
||||
}
|
||||
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
Person.prototype = {
|
||||
log: function() {
|
||||
console.log('I am ', this._firstName, this._lastName);
|
||||
}
|
||||
set profession(val) {
|
||||
this._profession = val;
|
||||
}
|
||||
|
||||
get profession() {
|
||||
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
### استخدام أساليب مضافة داخليا
|
||||
|
||||
هنا تضاف الأساليب داخليا بدلا من النموذج الأولي
|
||||
|
||||
`function Person(firstName, lastName) {
|
||||
this._firstName = firstName;
|
||||
this._lastName = lastName;
|
||||
|
||||
this.log = function() {
|
||||
console.log('I am ', this._firstName, this._lastName);
|
||||
}
|
||||
|
||||
Object.defineProperty(this, 'profession', {
|
||||
set: function(val) {
|
||||
this._profession = val;
|
||||
},
|
||||
get: function() {
|
||||
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
||||
}
|
||||
})
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
function Person(firstName, lastName) {
|
||||
this._firstName = firstName;
|
||||
this._lastName = lastName;
|
||||
|
||||
this.log = function() {
|
||||
console.log('I am ', this._firstName, this._lastName);
|
||||
}
|
||||
|
||||
Object.defineProperty(this, 'profession', {
|
||||
set: function(val) {
|
||||
this._profession = val;
|
||||
},
|
||||
get: function() {
|
||||
console.log(this._firstName, this._lastName, 'is a', this._profession);
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### إخفاء التفاصيل في فصول بالرموز
|
||||
|
||||
في أغلب الأحيان يجب إخفاء بعض الخصائص والأساليب لمنع الوصول من خارج الوظيفة. مع الفئات ، للحصول على هذه الوظيفة ، إحدى الطرق للقيام بذلك باستخدام الرموز. Symbol هو نوع جديد من جافا سكريبت المدمج ، والذي يمكن استدعاؤه لإعطاء قيمة رمزية جديدة. كل رمز فريد ويمكن استخدامه كمفتاح على الكائن. لذا ، فإن إحدى حالات استخدام الرموز هي أنه يمكنك إضافة شيء إلى كائن قد لا تمتلكه ، وقد لا ترغب في التصادم مع أي مفاتيح أخرى للعنصر ، لذلك ، فإن إنشاء كائن جديد وإضافة خاصية على هذا الكائن باستخدام الرمز هو الأكثر أمانًا . أيضا ، عندما يتم إضافة قيمة الرمز إلى كائن ؛ لا أحد آخر يعرف كيفية الحصول عليه.
|
||||
|
||||
`class Person {
|
||||
constructor(firstName, lastName) {
|
||||
this._firstName = firstName;
|
||||
this._lastName = lastName;
|
||||
}
|
||||
|
||||
log() {
|
||||
console.log('I am', this._firstName, this._lastName);
|
||||
}
|
||||
|
||||
// setters
|
||||
set profession(val) {
|
||||
this._profession = val;
|
||||
}
|
||||
// getters
|
||||
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.
|
||||
let s_firstname = new Symbol();
|
||||
|
||||
class Person {
|
||||
constructor(firstName, lastName) {
|
||||
this[s_firstName] = firstName;
|
||||
this._lastName = lastName;
|
||||
}
|
||||
|
||||
log() {
|
||||
console.log('I am', this._firstName, this._lastName);
|
||||
}
|
||||
|
||||
// setters
|
||||
set profession(val) {
|
||||
this._profession = val;
|
||||
}
|
||||
// getters
|
||||
get profession() {
|
||||
console.log(this[s_firstName], this._lastName, 'is a', this._profession);
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
class Person {
|
||||
constructor(firstName, lastName) {
|
||||
this._firstName = firstName;
|
||||
this._lastName = lastName;
|
||||
}
|
||||
|
||||
log() {
|
||||
console.log('I am', this._firstName, this._lastName);
|
||||
}
|
||||
|
||||
// setters
|
||||
set profession(val) {
|
||||
this._profession = val;
|
||||
}
|
||||
// getters
|
||||
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.
|
||||
let s_firstname = new Symbol();
|
||||
|
||||
class Person {
|
||||
constructor(firstName, lastName) {
|
||||
this[s_firstName] = firstName;
|
||||
this._lastName = lastName;
|
||||
}
|
||||
|
||||
log() {
|
||||
console.log('I am', this._firstName, this._lastName);
|
||||
}
|
||||
|
||||
// setters
|
||||
set profession(val) {
|
||||
this._profession = val;
|
||||
}
|
||||
// getters
|
||||
get profession() {
|
||||
console.log(this[s_firstName], this._lastName, 'is a', this._profession);
|
||||
}
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
@ -32,36 +32,38 @@ localeTitle: إغلاق
|
||||
|
||||
### مثال آخر
|
||||
|
||||
`function by(propName) {
|
||||
return function(a, b) {
|
||||
return a[propName] - b[propName];
|
||||
}
|
||||
}
|
||||
|
||||
const person1 = {name: 'joe', height: 72};
|
||||
const person2 = {name: 'rob', height: 70};
|
||||
const person3 = {name: 'nicholas', height: 66};
|
||||
|
||||
const arr_ = [person1, person2, person3];
|
||||
|
||||
const arr_sorted = arr_.sort(by('height')); // [ { name: 'nicholas', height: 66 }, { name: 'rob', height: 70 },{ name: 'joe', height: 72 } ]
|
||||
`
|
||||
```js
|
||||
function by(propName) {
|
||||
return function(a, b) {
|
||||
return a[propName] - b[propName];
|
||||
}
|
||||
}
|
||||
|
||||
const person1 = {name: 'joe', height: 72};
|
||||
const person2 = {name: 'rob', height: 70};
|
||||
const person3 = {name: 'nicholas', height: 66};
|
||||
|
||||
const arr_ = [person1, person2, person3];
|
||||
|
||||
const arr_sorted = arr_.sort(by('height')); // [ { name: 'nicholas', height: 66 }, { name: 'rob', height: 70 },{ name: 'joe', height: 72 } ]
|
||||
```
|
||||
|
||||
إغلاق "يتذكر" البيئة التي تم إنشاؤه فيها. تتكون هذه البيئة من أي متغيرات محلية كانت ضمن النطاق في الوقت الذي تم فيه إنشاء الإغلاق.
|
||||
|
||||
`function outside(num) {
|
||||
var rememberedVar = num; // In this example, rememberedVar is the lexical environment that the closure 'remembers'
|
||||
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'
|
||||
|
||||
remember1(); // This now executes the function 'inside' which console.logs(rememberedVar) => 7
|
||||
remember2(); // This now executes the function 'inside' which console.logs(rememberedVar) => 9
|
||||
`
|
||||
```js
|
||||
function outside(num) {
|
||||
var rememberedVar = num; // In this example, rememberedVar is the lexical environment that the closure 'remembers'
|
||||
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'
|
||||
|
||||
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) => {
|
||||
const balance = initialBalance;
|
||||
|
||||
return {
|
||||
getBalance: function() {
|
||||
return balance;
|
||||
},
|
||||
deposit: function(amount) {
|
||||
balance += amount;
|
||||
return balance;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const account = bankAccount(100);
|
||||
|
||||
account.getBalance(); // 100
|
||||
account.deposit(10); // 110
|
||||
`
|
||||
```javascript
|
||||
const bankAccount = (initialBalance) => {
|
||||
const balance = initialBalance;
|
||||
|
||||
return {
|
||||
getBalance: function() {
|
||||
return balance;
|
||||
},
|
||||
deposit: function(amount) {
|
||||
balance += amount;
|
||||
return balance;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const account = bankAccount(100);
|
||||
|
||||
account.getBalance(); // 100
|
||||
account.deposit(10); // 110
|
||||
```
|
||||
|
||||
في هذا المثال ، لن نتمكن من الوصول إلى `balance` من أي مكان خارج وظيفة `bankAccount` ، مما يعني أننا قمنا للتو بإنشاء متغير خاص. أين الإغلاق؟ حسنًا ، فكر في ما `bankAccount()` . إنها في الواقع ترجع كائنًا يحتوي على مجموعة من الوظائف داخله ، ومع ذلك عندما نطلق على `account.getBalance()` ، فإن الوظيفة قادرة على "تذكر" مرجعها الأولي إلى `balance` . هذه هي قوة الإغلاق ، حيث "تتذكر" الدالة نطاقها المعجمى (ترجمة النطاق الزمني) ، حتى عندما يتم تنفيذ الوظيفة خارج النطاق المعجمى.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user