diff options
Diffstat (limited to 'files/ar/learn/javascript/first_steps/useful_string_methods/index.html')
| -rw-r--r-- | files/ar/learn/javascript/first_steps/useful_string_methods/index.html | 684 |
1 files changed, 684 insertions, 0 deletions
diff --git a/files/ar/learn/javascript/first_steps/useful_string_methods/index.html b/files/ar/learn/javascript/first_steps/useful_string_methods/index.html new file mode 100644 index 0000000000..fac2541302 --- /dev/null +++ b/files/ar/learn/javascript/first_steps/useful_string_methods/index.html @@ -0,0 +1,684 @@ +--- +title: بعض الخصائص المفيدة للسلاسل الحرفية +slug: Learn/JavaScript/First_steps/Useful_string_methods +tags: + - استبدال + - تعلم + - تقطيع + - جافا سكربت + - حالة + - حرف صغير + - حرف كبير + - سلسلة حرفية + - مبتديء + - مقال +translation_of: Learn/JavaScript/First_steps/Useful_string_methods +--- +<div dir="rtl">{{LearnSidebar}}</div> + +<div dir="rtl">{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary" dir="rtl">الآن بعدما تعلمنا أساسيات السلاسل، دعنا نبدأ في التفكير وتجربة العمليات التي يمكننا القيام بها على هذه السلاسل، مثل إيجاد طول السلسلة، ربط السلاسل وأيضًا طريقة تقسيمها إلى أجزاء، ومعرفة كيفية استبدال حرف بآخر، وأشياء أخرى.</p> + +<table class="learn-box standard-table" dir="rtl"> + <tbody> + <tr> + <th scope="row">المتطلبات اﻷساسية:</th> + <td>أساسيات استخدام الحاسوب ، فهم أساسيات HTML و CSS ، وفهم ماهية الجافاسكربت.</td> + </tr> + <tr> + <th scope="row">الهدف:</th> + <td>فهم أن سلاسل الحروف strings هو عبارة عن كائنات ، وتعلم كيفية استخدام الطرق المتاحة لهذه الكائنات لمعالجة سلاسل الحروف strings .</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="السلاسل_ككائنات">السلاسل ككائنات</h2> + +<p dir="rtl" id="Useful_string_methods">معظم اﻷشياء في الجافا سكريبت هي كائنات. فعند إنشاء سلسلة، على سبيل المثال بإستخدام :</p> + +<pre class="brush: js notranslate" dir="rtl">let string = 'This is my string';</pre> + +<p dir="rtl">يصبح المتغير الخاص بك مثل كائن سلسلة، وبناءًا على ذلك يصبح لديه العديد من الخصائص والأساليب المتاحة له والتي يمكن تنفيذها عليه. يمكنك رؤية ذلك إذا انتقلت إلى صفحة الكائن {{jsxref("String")}} وألقيت نظرة على القائمة الموجودة في هذه الصفحة بالأسفل.</p> + +<p dir="rtl"><strong>اﻵن وقبل أن يبدأ عقلك في التوهان أو التشتيت، لا تقلق!</strong> أنت لست بحاجة لمعرفة هذه اﻷشياء في وقت مبكر من رحلة تعلمك للجافا سكريبت. وهناك عدد قليل من الاحتمالات لإستخدامك هذا كثيرًا والذي سننظر إليه هنا في هذا المقال.</p> + +<p dir="rtl">دعنا نجرب بعض اﻷمثلة داخل <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">الكونسول الخاص بالمتصفح</a>.</p> + +<h3 dir="rtl" id="إيجاد_طول_السلسلة">إيجاد طول السلسلة</h3> + +<p dir="rtl">هذا سهل للغاية — أنت ببساطة تستخدم هذه الخاصية لإيجاد طول السلسلة {{jsxref("String.prototype.length", "length")}} حاول إتباع الأسطر التالية :</p> + +<pre class="brush: js notranslate" dir="rtl">// هنا نقوم بإنشاء متغير يحتوي على سلسلة نصية +let browserType = 'العربية'; + +// هنا نقوم بكتابة اسم المتغير متبوعًا بالخاصية لمعرفة طول القيمة الموجودة داخل المتغير +browserType.length;</pre> + +<p dir="rtl">النتيجة ستكون 7, ﻷن كلمة "العربية" تحتوي على 7 أحرف. وهذه الخاصية مفيدة لعدة أسباب؛ على سبيل المثال، قد ترغب في العثور على أطول سلسلة نصية من اﻷسماء حتى تتمكن من عرضها بترتيب الطول، أو إخبار المستخدم أن اسم المستخدم الذي قام بإدخاله في حقل النموذج (حقل الإدخال) هو طويل جدًا. (في حالة تجاوز الاسم طول معين.)</p> + +<h3 dir="rtl" id="استرجاع_استدعاء_حرف_سلسلة_معين">استرجاع (استدعاء) حرف سلسلة معين</h3> + +<p dir="rtl">في ملاحظة ذات صلة، يمكن إرجاع أي حرف داخل السلسلة باستخدام <strong>الاقواس المربعة</strong> — هذا يعني إدراج أو تضمين اﻷقواس المربعة (<code>[]</code>) في نهاية اسم المتغيرالخاص بك. وفي داخل اﻷقواس ستقوم بكتابة رقم الحرف الذي تريد إرجاعه، لذا على سبيل المثال إذا كنت تريد إرجاع الحرف اﻷول فستقوم بإتباع الكود التالي:</p> + +<pre class="brush: js notranslate" dir="rtl">browserType[0];</pre> + +<p dir="rtl">تذكر: الكمبيوتر يبدأ العد من 0 وليس1! ويمكنك استخدام هذا على سبيل المثال للعثور على الحرف اﻷول من السلسلة وترتيبها أبجديًا.</p> + +<p dir="rtl">لكي نستدعي الحرف اﻷخير ﻷي سلسلة حروف ، سوف نستخدم السطر التالي , باﻹضافة إلى استخدام خاصية <code>length</code> التي ذكرناها في اﻷعلى:</p> + +<pre class="brush: js notranslate" dir="rtl">browserType[browserType.length-1];</pre> + +<p dir="rtl">إن طول "mozilla" هو 7 حروف , ولكن ﻷن العد يبدأ من 0 , فإن موقع الحرف هو 6; باستخدام <code>length-1</code> يعطينا الحرف اﻷخير.</p> + +<h3 dir="rtl" id="إيجاد_سلسلة_حروف_فرعية_داخل_السلسلة_الرئيسية_واستخراجها">إيجاد سلسلة حروف فرعية داخل السلسلة الرئيسية واستخراجها</h3> + +<p dir="rtl">أحيانًا تريد أن تسدعي بعض الحروف الموجودة داخل السلسلة الكبيرة (<em>نقول بشكل عام إذا كانت سلسلة فرعية موجودة داخل السلسلة اﻷم </em>). نستطيع فعل هذا بواسطة استخدام طريقة {{jsxref("String.prototype.indexOf()", "indexOf()")}} , والتي تحتوي عامل {{glossary("parameter")}} — السلسلة الفرعية التي نريد أن نستدعيها.</p> + +<ol dir="rtl"> + <li>جرب هذا: + <pre class="brush: js notranslate">browserType.indexOf('zilla');</pre> + والنتيجة هي 2 , ﻷن سلسلة الحروف الفرعية "zilla" تبدأ من الموقع 2 (0, 1, 2 — أي 3 حروف) بداخل "mozilla". مثل هذا الكود من الممكن أن يستخدم لفلترة السلاسل الحرفية. على سبيل المثال , لدينا قائمة بالعديد من عنواين الويب ونريد أن نستدعي فقط العنوان الذي يحتوي كلمة "mozilla" .</li> +</ol> + +<ol dir="rtl" start="2"> + <li>هناك طريقة أخري لذلك , التي من الممكن أن تكون فعالة . جرب المثال التالي: + <pre class="brush: js notranslate">browserType.indexOf('vanilla');</pre> + يجب أن تكون النتيجة هي <code>-1</code> — هذا ﻷن سلسلة الحروف التي نبحث عنها في هذه الحالة , 'vanilla', غير موجودة في السلسلة الرئيسية.<br> + <br> + يمكن استخدام هذا ﻹيجاد كل حالات السلسلة حيث ﻻ تحتوي السلسلة الفرعية 'mozilla',( أو فعل ذلك باستخدام عامل النفي ، <code>!==</code>) : + + <pre class="brush: js notranslate">if(browserType.indexOf('mozilla') === -1) { + // do stuff with the string if the 'mozilla' + // substring is NOT contained within it +} + +if(browserType.indexOf('mozilla') !== -1) { + // do stuff with the string if the 'mozilla' + // substring IS contained within it +}</pre> + </li> + <li>إذا علمت أين تبدأ السلسلة الفرعية داخل السلسلة الرئيسية , وتعلم الحرف اﻷخير الذي تريده ,فإن {{jsxref("String.prototype.slice()", "slice()")}} تستخدم لاستدعاءه . جرب المثال التالي: + <pre class="brush: js notranslate">browserType.slice(0,3);</pre> + النتيجة هي "moz" — البرامتر اﻷولparameter يشير إلى موقع الحرف الذي نريد أن نبدأ البحث من عنده , البرامتر الثاني parameterيشير إلى موقع الحرف الذي يوجد بعد آخر حرف تم استدعاءه. لذلك التقطيع slice يحدث بداية من الحرف اﻷول حتى الحرف اﻷخير لكنه ﻻ يشمل الحرف اﻷخير . في هذا المثال , من البداية 0 ، فإن البرامتر الثاني يساوي طول السلسلة التي نريد استدعائها.</li> + <li>أيضًا ، إذا أردت استدعاء كل الحروف المتبقية بعد حرف معين , فإننا ﻻ نحتاج البرامتر الثاني! بدلًا من ذلك نحتاج فقط موقع الحرف الذي نريد أن نستدعي الحروف المتبقية بعده. جرب المثال التالي: + <pre class="brush: js notranslate">browserType.slice(2);</pre> + والنتيجة هي "zilla" — وهذا ﻷن الحرف الذي رقمه 2 هو الحرف z ، وﻷننا لم نكتب البرامتر الثاني ، فإن النتيجة هي طباعة كل الحروف بعد هذا الحرف . </li> +</ol> + +<div class="note" dir="rtl"> +<p><strong>ملاحظة </strong>: البرامتر الثاني parameter للــ <code>slice()</code> هو اختياري : إذا لم نكتبه ، فإن النتيجة تكون حتى نهاية السلسلة الرئيسية. أيضًا هناك خيار آخر ، راجع صفحة ; {{jsxref("String.prototype.slice()", "slice()")}} للاطلاع على المزيد حول slice.</p> +</div> + +<h3 dir="rtl" id="تغيير_حالة_الحروف">تغيير حالة الحروف</h3> + +<p dir="rtl">خاصية {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} و {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} تستخدم لتحويل الحروف لحروف صغيرة أو حروف كبيرة, على التوالي. وهذا مفيد حيث على سبيل المثال إذا أردنا تهيئة البيانات التي أدخلها المستخدم قبل حفظها في قاعدة البيانات . </p> + +<p dir="rtl">دعونا نجرب المثال التالي ونرى ما سيحدث:</p> + +<pre class="brush: js notranslate" dir="rtl">let radData = 'My NaMe Is HeSHam'; +radData.toLowerCase(); +radData.toUpperCase();</pre> + +<h3 dir="rtl" id="تحديث_أجزاء_من_السلسلة">تحديث أجزاء من السلسلة</h3> + +<p dir="rtl">نستطيع استبدال سلسلة حروف بأخرى داخل السلسلة الرئيسية باستخدام خاصية .{{jsxref("String.prototype.replace()", "replace()")}} إنها خاصية بسيطة جدًا ، ولكنها تملك خيارات متقدمة سوف نستخدمها ولكن ليس اﻵن .</p> + +<p dir="rtl">هذه الخاصية لها 2 بارامتر ( الحروف الذي تريد استبدالها, والحروف الجديدة). جرب هذا المثال:</p> + +<pre class="brush: js notranslate" dir="rtl">browserType.replace('moz','van');</pre> + +<p dir="rtl">والنتيجة هي طباعة كلمة "vanilla" في الكونسول. ولكن إذا تفحصنا قيمة . <code>browserType</code>,فإنها ما تزال "mozilla" . لتحديث قيمة المتغير <code>browserType</code> حقيقة, سوف نحتاج إلى تحديد قيمة المتغير للقيمة التي نتجت لدينا ؛ حيث أن قيمة المتغير ﻻ تتحدث تلقائيًا . لذلك نحن بحاجة لكتابة هذا الكود: </p> + +<pre class="brush: js notranslate">browserType = browserType.replace('moz','van');</pre> + +<h2 dir="rtl" id="أمثلة_عملية_للتعلم">أمثلة عملية للتعلم</h2> + +<p dir="rtl">في هذا القسم سوف نتعلم كتابة كود لمعالجة السلاسل الحرفية. في كل مثال باﻷسفل , لدينا مصفوفة من العبارات ، و حلقات تكرارية لتنفيذ القيم في المصفوفة وعرضها في قائمة نقطية. ﻻ تحتاج إلى معرفة المصفوفات والحلقات التكرارية اﻵن ( سوف تُشرح في مقالات مستقبلية). كل ما تحتاجه في كل مثال هو كتابة الكود الذي سوف يعرض العبارات في الهيئة التي نريدها.</p> + +<p dir="rtl">كل مثال يحتوي على زر "reset" حيث يمكن إرجاع الكود إلى حالته اﻷصلية في حالة الخطأ أو أن الحل لم يعمل جيدًا ، وهناك زر "Show solution" يمكن الضغط عليه لترى اﻹجابة المحتملة إذا واجهتك مشكلة بالفعل.</p> + +<h3 dir="rtl" id="معالجة_رسائل_التهنئة">معالجة رسائل التهنئة</h3> + +<p dir="rtl">في أول تمرين سوف نبدأ بشيء بسيط — حيث لدينا مصفوفة من رسائل التهنئة ، ولكننا نريد أن نرتبها في قائمة مثل رسائل العيد. سوف نستخدم الحاﻻت الشرطية <code>if( ... )</code> ، لطباعة الجمل في قائمة إذا كانت رسائل تهنئة.</p> + +<ol dir="rtl"> + <li>نفكر أوﻻً حول كيفية معرفة رسائل التهنئة في كل عبارة. هل هذه العبارة موجودة في الرسائل ، وما هي الطريقة التي نستخدمها لمعرفة ذلك ؟</li> + <li>سوف نحتاج إلى كتابة حالة شرطية .</li> + <li>تلميح: في هذا المثال من الفيد اختبار الطريقة لمعرفة النتيجة الصحيحة.</li> +</ol> + +<div class="hidden" dir="rtl"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="height: 290px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let greetings = ['Happy Birthday!', + 'Happy eid Day', + 'A happy Eid to all the family', + 'You\'re all I want for Eid', + 'Get well soon']; + +for (let i = 0; i < greetings.length; i++) { + let input = greetings[i]; + // Your conditional test needs to go inside the parentheses + // in the line below, replacing what's currently there + if (greetings[i]) { + let listItem = document.createElement('li'); + listItem.textContent = input; + list.appendChild(listItem); + } +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet greetings = [\'Happy Birthday!\',' + +'\n \'Happy Eid Day\',' + +'\n \'A happy Eid to all the family\',' + +'\n \'You\\\'re all I want for Eid\',' + +'\n \'Get well soon\'];' + +'\n' + +'\nfor (let i = 0; i < greetings.length; i++) {' + +'\n let input = greetings[i];' + +'\n if (greetings[i].indexOf(\'Christmas\') !== -1) {' + +'\n let result = input;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n }' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p dir="rtl">{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 dir="rtl" id="إصلاح_الحروف_الكبيرة">إصلاح الحروف الكبيرة</h3> + +<p dir="rtl">في هذا التمرين لدينا أسماء المدن في المملكة المتحدة، ولكن الحروف الكبيرة مكتوبة بشكل عبثي . نريد منك تغييرها للحروف الصغيرة، ماعدا الحرف اﻷول يكون كبير . وأفضل طريق لعمل ذلك هو :</p> + +<ol dir="rtl"> + <li>حول كل كلمة في متغير <code>input</code> للحروف الصغيرة وخزنها في متغير جديد.</li> + <li>اقتنص الحرف اﻷول من كل كلمة في هذا المتغير الجديد وخزنه في متغير آخر.</li> + <li>استخدم المتغير اﻷخير لاستبدال الحرف اﻷول من الكلمة بحرف كبير. وخزن نتيجة عملية الاستبدال لمتغير جديد آخر.</li> + <li>غيِّر قيمة متغير <code>result</code> لتساوي النتيجة النهائية.</li> +</ol> + +<div class="note" dir="rtl"> +<p><strong>ملحوظة: </strong>البرامتر الخاص بالطريقة المستخدمة ليس فقط الحروف ، بل يمكن أن يكون متغير أيضًا .</p> +</div> + +<div class="hidden" dir="rtl"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="height: 250px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL']; + +for (let i = 0; i < cities.length; i++) { + let input = cities[i]; + // write your code just below here + + let result = input; + let listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' + +'\n' + +'\nfor (let i = 0; i < cities.length; i++) {' + +'\n let input = cities[i];' + +'\n let lower = input.toLowerCase();' + +'\n let firstLetter = lower.slice(0,1);' + +'\n let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' + +'\n let result = capitalized;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p dir="rtl">{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 dir="rtl" id="عمل_عبارة_جديدة_من_العبارة_اﻷصلية">عمل عبارة جديدة من العبارة اﻷصلية</h3> + +<p dir="rtl">في هذا التمرين اﻷخير ، المصفوفة تحتوي على مجموعة من العبارات التي تحتوي معلومات عن محطات القطار في شمال انجلترا. هذه الكلمات تحتوي على ثلاثة حروف لكود المحطة ، متبوعًا بكود القطار، متبوعًا بالفاصلة المنقوطة، متبوعًا اسم المحطة. على سبيل المثال:</p> + +<pre dir="rtl">MAN675847583748sjt567654;Manchester Piccadilly</pre> + +<p dir="rtl">نريد استخراج كود المحطة والاسم ، ووضعهم جميعًا في عبارة واحدة بالهيئة التالية:</p> + +<pre dir="rtl">MAN: Manchester Piccadilly</pre> + +<p dir="rtl">نقترح أن تتبع هذه الخطوات:</p> + +<ol dir="rtl"> + <li>استخرج الثلاثة أحرف لكود المحطة وخزنه في متغير جديد.</li> + <li>أوجد رقم موقع حرف الفاصلة المنقوطة ; .</li> + <li>استخرج اسم المحطة باستخدام رقم موقع الفاصلة المنقوطة كنقطة مرجعية ، وخزنه في متغير جديد .</li> + <li>اربط المتغيرين الجديدين مع العبارة لعمل عبارة جديدة .</li> + <li>غيِّر قيمة المتغير <code>result</code> لتساوي العبارة النهائية، وليست العبارة الأصلية <code>input</code>.</li> +</ol> + +<div class="hidden" dir="rtl"> +<h6 id="Playable_code_3">Playable code 3</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="height: 285px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let stations = ['MAN675847583748sjt567654;Manchester Piccadilly', + 'GNF576746573fhdg4737dh4;Greenfield', + 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street', + 'SYB4f65hf75f736463;Stalybridge', + 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield']; + +for (let i = 0; i < stations.length; i++) { + let input = stations[i]; + // write your code just below here + + let result = input; + let listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' + +'\n \'GNF576746573fhdg4737dh4;Greenfield\',' + +'\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' + +'\n \'SYB4f65hf75f736463;Stalybridge\',' + +'\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' + +'\n' + +'\nfor (let i = 0; i < stations.length; i++) {' + +'\n let input = stations[i];' + +'\n let code = input.slice(0,3);' + +'\n let semiC = input.indexOf(\';\');' + +'\n let name = input.slice(semiC + 1);' + +'\n let result = code + \': \' + name;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p dir="rtl">{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 dir="rtl" id="اختبر_مهاراتك!">اختبر مهاراتك!</h2> + +<p dir="rtl">لقد وصلنا لنهاية هذا المقال. ولكن هل تستطيع أن تتذكر المعلومات المهمة؟ تستطيع أن تجد بعض الاختبارات لتثبت هذه المعلومات في الذاكرة قبل أن تذهب __ <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">اختبر مهاراتك : السلاسل الحرفية</a>.</p> + +<h2 dir="rtl" id="الخاتمة">الخاتمة</h2> + +<p dir="rtl">ﻻ نستطيع الهروب من الحقيقة بأنه القدرة على معالجة الكلمات والجُمَل في البرمجة هو في غاية اﻷهمية __ بخاصة في الجافا سكربت، مثل مواقع التواصل مع الناس. هذا المقال يعطيك اﻷساسيات التي تحتاج معرفتها حول معالجة سلاسل الحروف (العبارات). هذا يجب أن يفيدك جيدًا عند قراءة مواضيع معقدة في المستقبل. اﻵن لنذهب للنظر في النوع الرئيسي من البيانات التي نحتاج للتركيز عليها __ المصفوفات arrays .</p> + +<p dir="rtl">تمت بحمد الله.</p> + +<p dir="rtl">{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> + +<h2 dir="rtl" id="في_هذه_الوحدة">في هذه الوحدة</h2> + +<ul> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">بعض الخصائص المفيدة للسلاسل الحرفية</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> |