fix: Correct paths in English exercises by prefixing "/" before "learn" (#38099)
* fix: Correct paths in English exercises by prefixing "/" before "learn" * fix(lang): Correct paths to exercises by prefixing "/" before "learn" in remaining languages
This commit is contained in:
Ashraf Nazar
committed by
Randell Dawson
Randell Dawson
parent
66631812fa
commit
fda7fb174e
@ -7,7 +7,7 @@ localeTitle: التنازل مع القيمة المرتجعة
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> إذا كنت ستتذكر من مناقشتنا لـ <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">Storing Values مع Assignment Operator</a> ، يتم حل كل شيء على يمين علامة المساواة قبل تعيين القيمة. هذا يعني أنه يمكننا أخذ قيمة الإرجاع للدالة وتعيينها لمتغير. افترض أننا حددنا مسبقا <code>sum</code> وظيفة يضيف رقمين معا ، ثم: <code>ourSum = sum(5, 12);</code> سوف تستدعي دالة <code>sum</code> ، والتي تُرجع قيمة <code>17</code> <code>ourSum</code> المتغير. </section>
|
||||
<section id="description"> إذا كنت ستتذكر من مناقشتنا لـ <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">Storing Values مع Assignment Operator</a> ، يتم حل كل شيء على يمين علامة المساواة قبل تعيين القيمة. هذا يعني أنه يمكننا أخذ قيمة الإرجاع للدالة وتعيينها لمتغير. افترض أننا حددنا مسبقا <code>sum</code> وظيفة يضيف رقمين معا ، ثم: <code>ourSum = sum(5, 12);</code> سوف تستدعي دالة <code>sum</code> ، والتي تُرجع قيمة <code>17</code> <code>ourSum</code> المتغير. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> استدعاء الدالة <code>processArg</code> مع وسيطة من <code>7</code> وتعيين قيمته الإرجاع إلى المتغير <code>processed</code> . </section>
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: توليد الكسور العشوائية مع جافا سكريب
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> الأرقام العشوائية مفيدة لإنشاء سلوك عشوائي. يحتوي JavaScript على دالة <code>Math.random()</code> التي تنشئ رقمًا عشريًا عشوائيًا بين <code>0</code> (شامل) وليس تمامًا <code>1</code> (خاص). وبالتالي ، يمكن أن يقوم <code>Math.random()</code> بإرجاع <code>0</code> ولكن لا يُرجع أبدًا <strong>ملاحظة</strong> <code>1</code> <br> مثل <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">تخزين القيم مع عامل التشغيل المتساوي</a> ، سيتم حل جميع استدعاءات الدوال قبل تنفيذ عملية <code>return</code> ، حتى نتمكن من <code>return</code> قيمة الدالة <code>Math.random()</code> . </section>
|
||||
<section id="description"> الأرقام العشوائية مفيدة لإنشاء سلوك عشوائي. يحتوي JavaScript على دالة <code>Math.random()</code> التي تنشئ رقمًا عشريًا عشوائيًا بين <code>0</code> (شامل) وليس تمامًا <code>1</code> (خاص). وبالتالي ، يمكن أن يقوم <code>Math.random()</code> بإرجاع <code>0</code> ولكن لا يُرجع أبدًا <strong>ملاحظة</strong> <code>1</code> <br> مثل <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">تخزين القيم مع عامل التشغيل المتساوي</a> ، سيتم حل جميع استدعاءات الدوال قبل تنفيذ عملية <code>return</code> ، حتى نتمكن من <code>return</code> قيمة الدالة <code>Math.random()</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> قم بتغيير <code>randomFraction</code> لإرجاع رقم عشوائي بدلاً من إرجاع <code>0</code> . </section>
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> هناك مفاهيم معقدة أخرى تضيف إمكانات قوية لرمز React الخاص بك. ولكن قد تتساءل عن المشكلة الأكثر بساطة حول كيفية تصميم عناصر JSX التي تقوم بإنشائها في React. من المحتمل أنك تعلم أنه لن يكون بالضبط نفس العمل مع HTML بسبب <a target="_blank" href="learn/front-end-libraries/react/define-an-html-class-in-jsx">طريقة تطبيق الطبقات على عناصر JSX</a> . إذا قمت باستيراد أنماط من ورقة أنماط ، فإنها لا تختلف كثيرًا على الإطلاق. يمكنك تطبيق فئة على عنصر JSX باستخدام السمة <code>className</code> ، وتطبيق الأنماط على الفصل الدراسي في ورقة الأنماط. خيار آخر هو تطبيق الأنماط <strong><em>المضمنة</em></strong> ، والتي تكون شائعة جدًا في تطوير ReactJS. يمكنك تطبيق أنماط مضمنة على عناصر JSX مشابهة لطريقة عمل ذلك في HTML ، ولكن مع بعض الاختلافات في JSX. في ما يلي مثال لنمط مضمَّن في HTML: <code><div style="color: yellow; font-size: 16px">Mellow Yellow</div></code> تستخدم عناصر JSX سمة <code>style</code> ، ولكن نظرًا لطريقة تشفير JSX ، يمكنك قم بتعيين القيمة إلى <code>string</code> . بدلاً من ذلك ، يمكنك تعيينه يساوي <code>object</code> JavaScript. إليك مثال على ذلك: <code><div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div></code> لاحظ كيف نحصل على خاصية "fontSize"؟ وذلك لأن React لن يقبل مفاتيح حالة الكباب في كائن النمط. سيطبق React اسم الخاصية الصحيح لنا في HTML. </section>
|
||||
<section id="description"> هناك مفاهيم معقدة أخرى تضيف إمكانات قوية لرمز React الخاص بك. ولكن قد تتساءل عن المشكلة الأكثر بساطة حول كيفية تصميم عناصر JSX التي تقوم بإنشائها في React. من المحتمل أنك تعلم أنه لن يكون بالضبط نفس العمل مع HTML بسبب <a target="_blank" href="/learn/front-end-libraries/react/define-an-html-class-in-jsx">طريقة تطبيق الطبقات على عناصر JSX</a> . إذا قمت باستيراد أنماط من ورقة أنماط ، فإنها لا تختلف كثيرًا على الإطلاق. يمكنك تطبيق فئة على عنصر JSX باستخدام السمة <code>className</code> ، وتطبيق الأنماط على الفصل الدراسي في ورقة الأنماط. خيار آخر هو تطبيق الأنماط <strong><em>المضمنة</em></strong> ، والتي تكون شائعة جدًا في تطوير ReactJS. يمكنك تطبيق أنماط مضمنة على عناصر JSX مشابهة لطريقة عمل ذلك في HTML ، ولكن مع بعض الاختلافات في JSX. في ما يلي مثال لنمط مضمَّن في HTML: <code><div style="color: yellow; font-size: 16px">Mellow Yellow</div></code> تستخدم عناصر JSX سمة <code>style</code> ، ولكن نظرًا لطريقة تشفير JSX ، يمكنك قم بتعيين القيمة إلى <code>string</code> . بدلاً من ذلك ، يمكنك تعيينه يساوي <code>object</code> JavaScript. إليك مثال على ذلك: <code><div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div></code> لاحظ كيف نحصل على خاصية "fontSize"؟ وذلك لأن React لن يقبل مفاتيح حالة الكباب في كائن النمط. سيطبق React اسم الخاصية الصحيح لنا في HTML. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> أضف سمة <code>style</code> إلى <code>div</code> في محرر الشفرة لإعطاء النص لونًا أحمر وحجم خط يبلغ 72 بكسل. لاحظ أنه يمكنك تعيين حجم الخط بشكل اختياري ليكون رقمًا ، أو حذف الوحدات "px" ، أو كتابتها كـ "72px". </section>
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: 具有返回值的分配
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">如果您从我们对<a href="learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">使用赋值运算符存储值</a>的讨论中回忆起来<a href="learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">，则在分配</a>值之前，将解决等号右侧的所有内容。这意味着我们可以获取函数的返回值并将其赋值给变量。假设我们预先定义了一个函数<code>sum</code> ，它将两个数字相加，然后： <code>ourSum = sum(5, 12);</code>将调用<code>sum</code>函数，它返回值<code>17</code>并将其分配给<code>ourSum</code>变量。 </section>
|
||||
<section id="description">如果您从我们对<a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">使用赋值运算符存储值</a>的讨论中回忆起来<a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">，则在分配</a>值之前，将解决等号右侧的所有内容。这意味着我们可以获取函数的返回值并将其赋值给变量。假设我们预先定义了一个函数<code>sum</code> ，它将两个数字相加，然后： <code>ourSum = sum(5, 12);</code>将调用<code>sum</code>函数，它返回值<code>17</code>并将其分配给<code>ourSum</code>变量。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用参数<code>7</code>调用<code>processArg</code>函数，并将其返回值分配给已<code>processed</code>的变量。 </section>
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: 使用JavaScript生成随机分数
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">随机数对于创建随机行为很有用。 JavaScript有一个<code>Math.random()</code>函数，它生成一个介于<code>0</code> （含）和不高达<code>1</code> （独占）之间的随机十进制数。因此<code>Math.random()</code>可以返回<code>0</code>但永远不会返回<code>1</code> <strong>Note</strong> <br> <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">与使用Equal运算符存储值</a>一样，所有函数调用将在<code>return</code>执行之前解析，因此我们可以<code>return</code> <code>Math.random()</code>函数的值。 </section>
|
||||
<section id="description">随机数对于创建随机行为很有用。 JavaScript有一个<code>Math.random()</code>函数，它生成一个介于<code>0</code> （含）和不高达<code>1</code> （独占）之间的随机十进制数。因此<code>Math.random()</code>可以返回<code>0</code>但永远不会返回<code>1</code> <strong>Note</strong> <br> <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">与使用Equal运算符存储值</a>一样，所有函数调用将在<code>return</code>执行之前解析，因此我们可以<code>return</code> <code>Math.random()</code>函数的值。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">更改<code>randomFraction</code>以返回随机数而不是返回<code>0</code> 。 </section>
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: 记录收集
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您将获得一个JSON对象，表示您的音乐专辑集合的一部分。每张专辑都有几个属性和一个唯一的ID号作为其关键。并非所有相册都有完整的信息。写一个功能，它取一个专辑的<code>id</code> （如<code>2548</code> ），一个属性<code>prop</code> （如<code>"artist"</code>或<code>"tracks"</code> ），以及一个<code>value</code> （如<code>"Addicted to Love"</code> ）来修改此集合中的数据。如果<code>prop</code>不是<code>"tracks"</code>且<code>value</code>不为空（ <code>""</code> ），则更新或设置该记录专辑属性的<code>value</code> 。您的函数必须始终返回整个集合对象。处理不完整数据有几个规则：如果<code>prop</code>是<code>"tracks"</code>但是相册没有<code>"tracks"</code>属性，则在将新值添加到相册的相应属性之前创建一个空数组。如果<code>prop</code>是<code>"tracks"</code>且<code>value</code>不为空（ <code>""</code> ），则将<code>value</code>推到专辑现有<code>tracks</code>数组的末尾。如果<code>value</code>为空（ <code>""</code> ），则从相册中删除给定的<code>prop</code>属性。 <strong>提示</strong> <br>使用<a href="learn/javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables" target="_blank">变量访问对象属性</a>时使用<code>bracket notation</code> 。 Push是一种可以在<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" target="_blank">Mozilla Developer Network</a>上阅读的数组方法。您可以参考<a href="learn/javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">操作复杂对象</a>介绍JavaScript对象表示法（JSON）进行复习。 </section>
|
||||
<section id="description">您将获得一个JSON对象，表示您的音乐专辑集合的一部分。每张专辑都有几个属性和一个唯一的ID号作为其关键。并非所有相册都有完整的信息。写一个功能，它取一个专辑的<code>id</code> （如<code>2548</code> ），一个属性<code>prop</code> （如<code>"artist"</code>或<code>"tracks"</code> ），以及一个<code>value</code> （如<code>"Addicted to Love"</code> ）来修改此集合中的数据。如果<code>prop</code>不是<code>"tracks"</code>且<code>value</code>不为空（ <code>""</code> ），则更新或设置该记录专辑属性的<code>value</code> 。您的函数必须始终返回整个集合对象。处理不完整数据有几个规则：如果<code>prop</code>是<code>"tracks"</code>但是相册没有<code>"tracks"</code>属性，则在将新值添加到相册的相应属性之前创建一个空数组。如果<code>prop</code>是<code>"tracks"</code>且<code>value</code>不为空（ <code>""</code> ），则将<code>value</code>推到专辑现有<code>tracks</code>数组的末尾。如果<code>value</code>为空（ <code>""</code> ），则从相册中删除给定的<code>prop</code>属性。 <strong>提示</strong> <br>使用<a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables" target="_blank">变量访问对象属性</a>时使用<code>bracket notation</code> 。 Push是一种可以在<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" target="_blank">Mozilla Developer Network</a>上阅读的数组方法。您可以参考<a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">操作复杂对象</a>介绍JavaScript对象表示法（JSON）进行复习。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: 从函数返回布尔值
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以从<a href="learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">与Equality运算符的比较中</a>回忆一下，所有比较运算符都返回布尔值<code>true</code>或<code>false</code>值。有时人们使用if / else语句进行比较，如下所示： <blockquote> function isEqual（a，b）{ <br> if（a === b）{ <br>返回true; <br> } else { <br>返回虚假; <br> } <br> } </blockquote>但是有一种更好的方法可以做到这一点。由于<code>===</code>返回<code>true</code>或<code>false</code> ，我们可以返回比较结果： <blockquote> function isEqual（a，b）{ <br>返回a === b; <br> } </blockquote></section>
|
||||
<section id="description">您可以从<a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">与Equality运算符的比较中</a>回忆一下，所有比较运算符都返回布尔值<code>true</code>或<code>false</code>值。有时人们使用if / else语句进行比较，如下所示： <blockquote> function isEqual（a，b）{ <br> if（a === b）{ <br>返回true; <br> } else { <br>返回虚假; <br> } <br> } </blockquote>但是有一种更好的方法可以做到这一点。由于<code>===</code>返回<code>true</code>或<code>false</code> ，我们可以返回比较结果： <blockquote> function isEqual（a，b）{ <br>返回a === b; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">修复函数<code>isLess</code>以删除<code>if/else</code>语句。 </section>
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: 介绍内联样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">还有其他复杂的概念可以为您的React代码添加强大的功能。但是你可能想知道如何设置你在React中创建的那些JSX元素的更简单的问题。您可能知道它与使用HTML完全不同，因为<a target="_blank" href="learn/front-end-libraries/react/define-an-html-class-in-jsx">您将类应用于JSX元素的方式</a> 。如果从样式表导入样式，它就没有太大的不同。使用<code>className</code>属性将类应用于JSX元素，并将样式应用于样式表中的类。另一种选择是应用<strong><em>内联</em></strong>样式，这在ReactJS开发中非常常见。您将内联样式应用于JSX元素，类似于您在HTML中的操作方式，但有一些JSX差异。以下是HTML中内联样式的示例： <code><div style="color: yellow; font-size: 16px">Mellow Yellow</div></code> JSX元素使用<code>style</code>属性，但由于JSX的转换方式，您可以不要将值设置为<code>string</code> 。相反，您将其设置为等于JavaScript <code>object</code> 。这是一个例子： <code><div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div></code>注意我们如何使用“fontSize”属性？这是因为React不接受样式对象中的kebab-case键。 React将在HTML中为我们应用正确的属性名称。 </section>
|
||||
<section id="description">还有其他复杂的概念可以为您的React代码添加强大的功能。但是你可能想知道如何设置你在React中创建的那些JSX元素的更简单的问题。您可能知道它与使用HTML完全不同，因为<a target="_blank" href="/learn/front-end-libraries/react/define-an-html-class-in-jsx">您将类应用于JSX元素的方式</a> 。如果从样式表导入样式，它就没有太大的不同。使用<code>className</code>属性将类应用于JSX元素，并将样式应用于样式表中的类。另一种选择是应用<strong><em>内联</em></strong>样式，这在ReactJS开发中非常常见。您将内联样式应用于JSX元素，类似于您在HTML中的操作方式，但有一些JSX差异。以下是HTML中内联样式的示例： <code><div style="color: yellow; font-size: 16px">Mellow Yellow</div></code> JSX元素使用<code>style</code>属性，但由于JSX的转换方式，您可以不要将值设置为<code>string</code> 。相反，您将其设置为等于JavaScript <code>object</code> 。这是一个例子： <code><div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div></code>注意我们如何使用“fontSize”属性？这是因为React不接受样式对象中的kebab-case键。 React将在HTML中为我们应用正确的属性名称。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在代码编辑器中为<code>div</code>添加<code>style</code>属性，为文本提供红色和字体大小为72px的颜色。请注意，您可以选择将字体大小设置为数字，省略单位“px”，或将其写为“72px”。 </section>
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16658
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
If you'll recall from our discussion of <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">Storing Values with the Assignment Operator</a>, everything to the right of the equal sign is resolved before the value is assigned. This means we can take the return value of a function and assign it to a variable.
|
||||
If you'll recall from our discussion of <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">Storing Values with the Assignment Operator</a>, everything to the right of the equal sign is resolved before the value is assigned. This means we can take the return value of a function and assign it to a variable.
|
||||
Assume we have pre-defined a function <code>sum</code> which adds two numbers together, then:
|
||||
<code>ourSum = sum(5, 12);</code>
|
||||
will call <code>sum</code> function, which returns a value of <code>17</code> and assigns it to <code>ourSum</code> variable.
|
||||
|
||||
@ -10,7 +10,7 @@ forumTopicId: 18185
|
||||
<section id='description'>
|
||||
Random numbers are useful for creating random behavior.
|
||||
JavaScript has a <code>Math.random()</code> function that generates a random decimal number between <code>0</code> (inclusive) and not quite up to <code>1</code> (exclusive). Thus <code>Math.random()</code> can return a <code>0</code> but never quite return a <code>1</code>
|
||||
<strong>Note</strong><br>Like <a href='learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator' target='_blank'>Storing Values with the Equal Operator</a>, all function calls will be resolved before the <code>return</code> executes, so we can <code>return</code> the value of the <code>Math.random()</code> function.
|
||||
<strong>Note</strong><br>Like <a href='/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator' target='_blank'>Storing Values with the Equal Operator</a>, all function calls will be resolved before the <code>return</code> executes, so we can <code>return</code> the value of the <code>Math.random()</code> function.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -16,9 +16,9 @@ There are several rules for handling incomplete data:
|
||||
If <code>prop</code> is <code>"tracks"</code> but the album doesn't have a <code>"tracks"</code> property, create an empty array before adding the new value to the album's corresponding property.
|
||||
If <code>prop</code> is <code>"tracks"</code> and <code>value</code> isn't empty (<code>""</code>), push the <code>value</code> onto the end of the album's existing <code>tracks</code> array.
|
||||
If <code>value</code> is empty (<code>""</code>), delete the given <code>prop</code> property from the album.
|
||||
<strong>Hints</strong><br>Use <code>bracket notation</code> when <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables" target="_blank">accessing object properties with variables</a>.
|
||||
<strong>Hints</strong><br>Use <code>bracket notation</code> when <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables" target="_blank">accessing object properties with variables</a>.
|
||||
Push is an array method you can read about on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" target="_blank">Mozilla Developer Network</a>.
|
||||
You may refer back to <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">Manipulating Complex Objects</a> Introducing JavaScript Object Notation (JSON) for a refresher.
|
||||
You may refer back to <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">Manipulating Complex Objects</a> Introducing JavaScript Object Notation (JSON) for a refresher.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 18273
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You may recall from <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator" target="_blank">Comparison with the Equality Operator</a> that all comparison operators return a boolean <code>true</code> or <code>false</code> value.
|
||||
You may recall from <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator" target="_blank">Comparison with the Equality Operator</a> that all comparison operators return a boolean <code>true</code> or <code>false</code> value.
|
||||
Sometimes people use an if/else statement to do a comparison, like this:
|
||||
|
||||
```js
|
||||
|
||||
@ -10,7 +10,7 @@ forumTopicId: 301711
|
||||
Before we move on to another data structure, let's get a couple of last bits of practice with linked lists.
|
||||
Let's write a <code>removeAt</code> method that removes the <code>element</code> at a given <code>index</code>. The method should be called <code>removeAt(index)</code>. To remove an <code>element</code> at a certain <code>index</code>, we'll need to keep a running count of each node as we move along the linked list.
|
||||
A common technique used to iterate through the elements of a linked list involves a <dfn>'runner'</dfn>, or sentinel, that 'points' at the nodes that your code is comparing. In our case, starting at the <code>head</code> of our list, we start with a <code>currentIndex</code> variable that starts at <code>0</code>. The <code>currentIndex</code> should increment by one for each node we pass.
|
||||
Just like our <code>remove(element)</code> method, which <a href="learn/coding-interview-prep/data-structures/remove-elements-from-a-linked-list" target="_blank">we covered in a previous lesson</a>, we need to be careful not to orphan the rest of our list when we remove the node in our <code>removeAt(index)</code> method. We keep our nodes contiguous by making sure that the node that has reference to the removed node has a reference to the next node.
|
||||
Just like our <code>remove(element)</code> method, which <a href="/learn/coding-interview-prep/data-structures/remove-elements-from-a-linked-list" target="_blank">we covered in a previous lesson</a>, we need to be careful not to orphan the rest of our list when we remove the node in our <code>removeAt(index)</code> method. We keep our nodes contiguous by making sure that the node that has reference to the removed node has a reference to the next node.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Atribuição com um valor retornado
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Se você se lembrar de nossa discussão sobre <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">Armazenando Valores com o Operador de Atribuição</a> , tudo à direita do sinal de igual será resolvido antes de o valor ser atribuído. Isso significa que podemos pegar o valor de retorno de uma função e atribuí-la a uma variável. Suponha que tenhamos pré-definido uma <code>sum</code> funções que adiciona dois números juntos, então: <code>ourSum = sum(5, 12);</code> chamará a função <code>sum</code> , que retorna um valor de <code>17</code> e atribui à variável <code>ourSum</code> . </section>
|
||||
<section id="description"> Se você se lembrar de nossa discussão sobre <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">Armazenando Valores com o Operador de Atribuição</a> , tudo à direita do sinal de igual será resolvido antes de o valor ser atribuído. Isso significa que podemos pegar o valor de retorno de uma função e atribuí-la a uma variável. Suponha que tenhamos pré-definido uma <code>sum</code> funções que adiciona dois números juntos, então: <code>ourSum = sum(5, 12);</code> chamará a função <code>sum</code> , que retorna um valor de <code>17</code> e atribui à variável <code>ourSum</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Chame a função <code>processArg</code> com um argumento de <code>7</code> e atribua seu valor de retorno à variável <code>processed</code> . </section>
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Gerar frações aleatórias com JavaScript
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Números aleatórios são úteis para criar um comportamento aleatório. JavaScript tem uma função <code>Math.random()</code> que gera um número decimal aleatório entre <code>0</code> (inclusive) e não chega a <code>1</code> (exclusivo). Assim <code>Math.random()</code> pode retornar um <code>0</code> mas nunca retorna um <code>1</code> <strong>Nota</strong> <br> Assim como <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">Armazenando Valores com o Operador Igual</a> , todas as chamadas de função serão resolvidas antes que o <code>return</code> executado, para que possamos <code>return</code> o valor da função <code>Math.random()</code> . </section>
|
||||
<section id="description"> Números aleatórios são úteis para criar um comportamento aleatório. JavaScript tem uma função <code>Math.random()</code> que gera um número decimal aleatório entre <code>0</code> (inclusive) e não chega a <code>1</code> (exclusivo). Assim <code>Math.random()</code> pode retornar um <code>0</code> mas nunca retorna um <code>1</code> <strong>Nota</strong> <br> Assim como <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">Armazenando Valores com o Operador Igual</a> , todas as chamadas de função serão resolvidas antes que o <code>return</code> executado, para que possamos <code>return</code> o valor da função <code>Math.random()</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Altere <code>randomFraction</code> para retornar um número aleatório em vez de retornar <code>0</code> . </section>
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Colecção de registos
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você recebe um objeto JSON representando uma parte de sua coleção de álbuns musicais. Cada álbum tem várias propriedades e um número de identificação exclusivo como sua chave. Nem todos os álbuns possuem informações completas. Escreva uma função que tenha um <code>id</code> de álbum (como <code>2548</code> ), um <code>prop</code> propriedade (como <code>"artist"</code> ou <code>"tracks"</code> ) e um <code>value</code> (como <code>"Addicted to Love"</code> ) para modificar os dados nessa coleção. Se <code>prop</code> não for <code>"tracks"</code> e o <code>value</code> não estiver vazio ( <code>""</code> ), atualize ou defina o <code>value</code> para a propriedade desse álbum de registros. Sua função deve sempre retornar todo o objeto da coleção. Existem várias regras para lidar com dados incompletos: se <code>prop</code> é <code>"tracks"</code> mas o álbum não tem uma propriedade <code>"tracks"</code> , crie um array vazio antes de adicionar o novo valor à propriedade correspondente do álbum. Se <code>prop</code> for <code>"tracks"</code> e o <code>value</code> não estiver vazio ( <code>""</code> ), insira o <code>value</code> no final da matriz de <code>tracks</code> existente no álbum. Se o <code>value</code> estiver vazio ( <code>""</code> ), exclua a propriedade <code>prop</code> fornecida do álbum. <strong>Dicas</strong> <br> Use a <code>bracket notation</code> ao <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables" target="_blank">acessar as propriedades do objeto com variáveis</a> . Push é um método de matriz que você pode ler sobre o <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" target="_blank">Mozilla Developer Network</a> . Você pode consultar a <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">seção Manipulando Objetos Complexos</a> Introduzindo o JavaScript Object Notation (JSON) para uma atualização. </section>
|
||||
<section id="description"> Você recebe um objeto JSON representando uma parte de sua coleção de álbuns musicais. Cada álbum tem várias propriedades e um número de identificação exclusivo como sua chave. Nem todos os álbuns possuem informações completas. Escreva uma função que tenha um <code>id</code> de álbum (como <code>2548</code> ), um <code>prop</code> propriedade (como <code>"artist"</code> ou <code>"tracks"</code> ) e um <code>value</code> (como <code>"Addicted to Love"</code> ) para modificar os dados nessa coleção. Se <code>prop</code> não for <code>"tracks"</code> e o <code>value</code> não estiver vazio ( <code>""</code> ), atualize ou defina o <code>value</code> para a propriedade desse álbum de registros. Sua função deve sempre retornar todo o objeto da coleção. Existem várias regras para lidar com dados incompletos: se <code>prop</code> é <code>"tracks"</code> mas o álbum não tem uma propriedade <code>"tracks"</code> , crie um array vazio antes de adicionar o novo valor à propriedade correspondente do álbum. Se <code>prop</code> for <code>"tracks"</code> e o <code>value</code> não estiver vazio ( <code>""</code> ), insira o <code>value</code> no final da matriz de <code>tracks</code> existente no álbum. Se o <code>value</code> estiver vazio ( <code>""</code> ), exclua a propriedade <code>prop</code> fornecida do álbum. <strong>Dicas</strong> <br> Use a <code>bracket notation</code> ao <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables" target="_blank">acessar as propriedades do objeto com variáveis</a> . Push é um método de matriz que você pode ler sobre o <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" target="_blank">Mozilla Developer Network</a> . Você pode consultar a <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">seção Manipulando Objetos Complexos</a> Introduzindo o JavaScript Object Notation (JSON) para uma atualização. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Retornando valores booleanos de funções
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode se lembrar de <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator" target="_blank">Comparação com o Operador de Igualdade</a> que todos os operadores de comparação retornam um valor booleano <code>true</code> ou <code>false</code> . Às vezes as pessoas usam uma instrução if / else para fazer uma comparação, como esta: <blockquote> função isEqual (a, b) { <br> if (a === b) { <br> retorno verdadeiro; <br> } outro { <br> retorna falso; <br> } <br> } </blockquote> Mas há uma maneira melhor de fazer isso. Como <code>===</code> retorna <code>true</code> ou <code>false</code> , podemos retornar o resultado da comparação: <blockquote> função isEqual (a, b) { <br> return a === b; <br> } </blockquote></section>
|
||||
<section id="description"> Você pode se lembrar de <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator" target="_blank">Comparação com o Operador de Igualdade</a> que todos os operadores de comparação retornam um valor booleano <code>true</code> ou <code>false</code> . Às vezes as pessoas usam uma instrução if / else para fazer uma comparação, como esta: <blockquote> função isEqual (a, b) { <br> if (a === b) { <br> retorno verdadeiro; <br> } outro { <br> retorna falso; <br> } <br> } </blockquote> Mas há uma maneira melhor de fazer isso. Como <code>===</code> retorna <code>true</code> ou <code>false</code> , podemos retornar o resultado da comparação: <blockquote> função isEqual (a, b) { <br> return a === b; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Corrigir a função <code>isLess</code> para remover as instruções <code>if/else</code> . </section>
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Apresentando Estilos Inline
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Existem outros conceitos complexos que adicionam recursos poderosos ao seu código React. Mas você pode estar se perguntando sobre o problema mais simples de como estilizar os elementos JSX que você cria no React. Você provavelmente sabe que não será exatamente o mesmo que trabalhar com HTML devido <a target="_blank" href="learn/front-end-libraries/react/define-an-html-class-in-jsx">à maneira como você aplica classes a elementos JSX</a> . Se você importar estilos de uma folha de estilo, não será muito diferente. Você aplica uma classe ao seu elemento JSX usando o atributo <code>className</code> e aplica estilos à classe em sua folha de estilo. Outra opção é aplicar estilos <strong><em>inline</em></strong> , que são muito comuns no desenvolvimento do ReactJS. Você aplica estilos embutidos a elementos JSX semelhantes a como você faz isso em HTML, mas com algumas diferenças de JSX. Aqui está um exemplo de um estilo in-line em HTML: <code><div style="color: yellow; font-size: 16px">Mellow Yellow</div></code> Elementos JSX usam o atributo <code>style</code> , mas devido à maneira como o JSX é transpilado, você pode é possível definir o valor para uma <code>string</code> . Em vez disso, você define isso como um <code>object</code> JavaScript. Aqui está um exemplo: <code><div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div></code> Observe como camelCase a propriedade "fontSize"? Isso ocorre porque o React não aceitará as chaves do caso do kebab no objeto de estilo. Reagir aplicará o nome da propriedade correta para nós no HTML. </section>
|
||||
<section id="description"> Existem outros conceitos complexos que adicionam recursos poderosos ao seu código React. Mas você pode estar se perguntando sobre o problema mais simples de como estilizar os elementos JSX que você cria no React. Você provavelmente sabe que não será exatamente o mesmo que trabalhar com HTML devido <a target="_blank" href="/learn/front-end-libraries/react/define-an-html-class-in-jsx">à maneira como você aplica classes a elementos JSX</a> . Se você importar estilos de uma folha de estilo, não será muito diferente. Você aplica uma classe ao seu elemento JSX usando o atributo <code>className</code> e aplica estilos à classe em sua folha de estilo. Outra opção é aplicar estilos <strong><em>inline</em></strong> , que são muito comuns no desenvolvimento do ReactJS. Você aplica estilos embutidos a elementos JSX semelhantes a como você faz isso em HTML, mas com algumas diferenças de JSX. Aqui está um exemplo de um estilo in-line em HTML: <code><div style="color: yellow; font-size: 16px">Mellow Yellow</div></code> Elementos JSX usam o atributo <code>style</code> , mas devido à maneira como o JSX é transpilado, você pode é possível definir o valor para uma <code>string</code> . Em vez disso, você define isso como um <code>object</code> JavaScript. Aqui está um exemplo: <code><div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div></code> Observe como camelCase a propriedade "fontSize"? Isso ocorre porque o React não aceitará as chaves do caso do kebab no objeto de estilo. Reagir aplicará o nome da propriedade correta para nós no HTML. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione um atributo <code>style</code> ao <code>div</code> no editor de código para dar ao texto uma cor vermelha e um tamanho de fonte de 72px. Observe que você pode, opcionalmente, definir o tamanho da fonte como um número, omitindo as unidades "px" ou gravá-lo como "72px". </section>
|
||||
|
||||
@ -9,7 +9,7 @@ localeTitle: Назначение с возвращенной стоимость
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Если вы вспомните из нашего обсуждения « <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">Сохранение значений с помощью оператора назначения»</a> , все, что находится справа от знака равенства, будет разрешено до присвоения значения. Это означает, что мы можем взять возвращаемое значение функции и присвоить ее переменной. Предположим, что мы предварительно определили <code>sum</code> функций, которая объединяет два числа, а затем: <code>ourSum = sum(5, 12);</code> вызовет функцию <code>sum</code> , которая возвращает значение <code>17</code> и присваивает ее переменной <code>ourSum</code> .
|
||||
Если вы вспомните из нашего обсуждения « <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">Сохранение значений с помощью оператора назначения»</a> , все, что находится справа от знака равенства, будет разрешено до присвоения значения. Это означает, что мы можем взять возвращаемое значение функции и присвоить ее переменной. Предположим, что мы предварительно определили <code>sum</code> функций, которая объединяет два числа, а затем: <code>ourSum = sum(5, 12);</code> вызовет функцию <code>sum</code> , которая возвращает значение <code>17</code> и присваивает ее переменной <code>ourSum</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,7 @@ localeTitle: Генерировать случайные дроби с помо
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Случайные числа полезны для создания случайного поведения. JavaScript имеет функцию <code>Math.random()</code> которая генерирует случайное десятичное число между <code>0</code> (включительно) и не совсем до <code>1</code> (исключая). Таким образом, <code>Math.random()</code> может возвращать <code>0</code> но никогда не возвращать <code>1</code> <strong>Примечание</strong> <br> Подобно <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">сохранению значений с помощью Equal Operator</a> , все вызовы функций будут разрешены до выполнения <code>return</code> , поэтому мы можем <code>return</code> значение функции <code>Math.random()</code> .
|
||||
Случайные числа полезны для создания случайного поведения. JavaScript имеет функцию <code>Math.random()</code> которая генерирует случайное десятичное число между <code>0</code> (включительно) и не совсем до <code>1</code> (исключая). Таким образом, <code>Math.random()</code> может возвращать <code>0</code> но никогда не возвращать <code>1</code> <strong>Примечание</strong> <br> Подобно <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">сохранению значений с помощью Equal Operator</a> , все вызовы функций будут разрешены до выполнения <code>return</code> , поэтому мы можем <code>return</code> значение функции <code>Math.random()</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,7 @@ localeTitle: Коллекция записей
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Вам предоставляется объект JSON, представляющий часть вашей коллекции музыкальных альбомов. Каждый альбом имеет несколько свойств и уникальный идентификационный номер в качестве ключа. Не все альбомы имеют полную информацию. Напишите функцию, которая принимает <code>id</code> альбома (например, <code>2548</code> ), свойство <code>prop</code> (например, <code>"artist"</code> или <code>"tracks"</code> ) и <code>value</code> (например, <code>"Addicted to Love"</code> ) для изменения данных в этой коллекции. Если <code>prop</code> не является <code>"tracks"</code> а <code>value</code> не пусто ( <code>""</code> ), обновите или установите <code>value</code> для свойства этого альбома записи. Ваша функция всегда должна возвращать весь объект коллекции. Существует несколько правил обработки неполных данных: если <code>prop</code> является <code>"tracks"</code> но альбом не имеет свойства <code>"tracks"</code> , создайте пустой массив перед добавлением нового значения в соответствующее свойство альбома. Если <code>prop</code> - это <code>"tracks"</code> а <code>value</code> не пусто ( <code>""</code> ), нажмите <code>value</code> в конец существующего массива <code>tracks</code> . Если <code>value</code> пусто ( <code>""</code> ), удалите данное свойство <code>prop</code> из альбома. <strong>Советы</strong> <br> Используйте <code>bracket notation</code> при <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables" target="_blank">доступе к свойствам объекта с переменными</a> . Push - метод массива, который вы можете прочитать в <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" target="_blank">Mozilla Developer Network</a> . Вы можете обратиться к <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">Манипулированию сложными объектами,</a> представляющими Обозначение <a href="javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">объектов</a> JavaScript (JSON) для обновления.
|
||||
Вам предоставляется объект JSON, представляющий часть вашей коллекции музыкальных альбомов. Каждый альбом имеет несколько свойств и уникальный идентификационный номер в качестве ключа. Не все альбомы имеют полную информацию. Напишите функцию, которая принимает <code>id</code> альбома (например, <code>2548</code> ), свойство <code>prop</code> (например, <code>"artist"</code> или <code>"tracks"</code> ) и <code>value</code> (например, <code>"Addicted to Love"</code> ) для изменения данных в этой коллекции. Если <code>prop</code> не является <code>"tracks"</code> а <code>value</code> не пусто ( <code>""</code> ), обновите или установите <code>value</code> для свойства этого альбома записи. Ваша функция всегда должна возвращать весь объект коллекции. Существует несколько правил обработки неполных данных: если <code>prop</code> является <code>"tracks"</code> но альбом не имеет свойства <code>"tracks"</code> , создайте пустой массив перед добавлением нового значения в соответствующее свойство альбома. Если <code>prop</code> - это <code>"tracks"</code> а <code>value</code> не пусто ( <code>""</code> ), нажмите <code>value</code> в конец существующего массива <code>tracks</code> . Если <code>value</code> пусто ( <code>""</code> ), удалите данное свойство <code>prop</code> из альбома. <strong>Советы</strong> <br> Используйте <code>bracket notation</code> при <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables" target="_blank">доступе к свойствам объекта с переменными</a> . Push - метод массива, который вы можете прочитать в <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" target="_blank">Mozilla Developer Network</a> . Вы можете обратиться к <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">Манипулированию сложными объектами,</a> представляющими Обозначение <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">объектов</a> JavaScript (JSON) для обновления.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,7 @@ localeTitle: Возврат булевых значений из функций
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Вы можете вспомнить из <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator" target="_blank">сравнения с Оператором равенства,</a> что все операторы сравнения возвращают логическое <code>true</code> или <code>false</code> значение. Иногда люди используют оператор if / else для сравнения, например: <blockquote> функция isEqual (a, b) { <br> if (a === b) { <br> return true; <br> } else { <br> return false; <br> } <br> } </blockquote> Но есть лучший способ сделать это. Поскольку <code>===</code> возвращает <code>true</code> или <code>false</code> , мы можем вернуть результат сравнения: <blockquote> функция isEqual (a, b) { <br> return a === b; <br> } </blockquote>
|
||||
Вы можете вспомнить из <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator" target="_blank">сравнения с Оператором равенства,</a> что все операторы сравнения возвращают логическое <code>true</code> или <code>false</code> значение. Иногда люди используют оператор if / else для сравнения, например: <blockquote> функция isEqual (a, b) { <br> if (a === b) { <br> return true; <br> } else { <br> return false; <br> } <br> } </blockquote> Но есть лучший способ сделать это. Поскольку <code>===</code> возвращает <code>true</code> или <code>false</code> , мы можем вернуть результат сравнения: <blockquote> функция isEqual (a, b) { <br> return a === b; <br> } </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,7 @@ localeTitle: Представление встроенных стилей
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Существуют и другие сложные концепции, которые добавляют мощные возможности для вашего кода React. Но вам может быть интересно узнать о более простой проблеме того, как стилизовать те элементы JSX, которые вы создаете в React. Вероятно, вы знаете, что это будет не то же самое, что работать с HTML из-за <a target="_blank" href="learn/front-end-libraries/react/define-an-html-class-in-jsx">того, как вы применяете классы к элементам JSX</a> . Если вы импортируете стили из таблицы стилей, это совсем не так. Вы применяете класс к своему элементу JSX, используя атрибут <code>className</code> , и применяете стили к классу в таблице стилей. Другой вариант - применить <strong><em>встроенные</em></strong> стили, которые очень распространены в разработке ReactJS. Вы применяете встроенные стили к элементам JSX, подобным тому, как это делается в HTML, но с несколькими отличиями JSX. Ниже приведен пример встроенного стиля в HTML: <code><div style="color: yellow; font-size: 16px">Mellow Yellow</div></code> Элементы JSX используют атрибут <code>style</code> , но из-за того, что JSX переполнен, вы можете 't установить значение в <code>string</code> . Вместо этого вы устанавливаете его равным <code>object</code> JavaScript. Вот пример: <code><div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div></code> Обратите внимание, как мы camelCase свойство fontSize? Это связано с тем, что React не будет принимать ключи кебаба в объекте стиля. React применит правильное имя свойства для нас в HTML.
|
||||
Существуют и другие сложные концепции, которые добавляют мощные возможности для вашего кода React. Но вам может быть интересно узнать о более простой проблеме того, как стилизовать те элементы JSX, которые вы создаете в React. Вероятно, вы знаете, что это будет не то же самое, что работать с HTML из-за <a target="_blank" href="/learn/front-end-libraries/react/define-an-html-class-in-jsx">того, как вы применяете классы к элементам JSX</a> . Если вы импортируете стили из таблицы стилей, это совсем не так. Вы применяете класс к своему элементу JSX, используя атрибут <code>className</code> , и применяете стили к классу в таблице стилей. Другой вариант - применить <strong><em>встроенные</em></strong> стили, которые очень распространены в разработке ReactJS. Вы применяете встроенные стили к элементам JSX, подобным тому, как это делается в HTML, но с несколькими отличиями JSX. Ниже приведен пример встроенного стиля в HTML: <code><div style="color: yellow; font-size: 16px">Mellow Yellow</div></code> Элементы JSX используют атрибут <code>style</code> , но из-за того, что JSX переполнен, вы можете 't установить значение в <code>string</code> . Вместо этого вы устанавливаете его равным <code>object</code> JavaScript. Вот пример: <code><div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div></code> Обратите внимание, как мы camelCase свойство fontSize? Это связано с тем, что React не будет принимать ключи кебаба в объекте стиля. React применит правильное имя свойства для нас в HTML.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Asignación con un valor devuelto
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Si recuerda de nuestra discusión sobre el <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">almacenamiento de valores con el operador de asignación</a> , todo a la derecha del signo igual se resuelve antes de que se asigne el valor. Esto significa que podemos tomar el valor de retorno de una función y asignarlo a una variable. Supongamos que hemos predefinido una <code>sum</code> función que suma dos números, entonces: <code>ourSum = sum(5, 12);</code> <code>ourSum</code> a la función <code>sum</code> , que devuelve un valor de <code>17</code> y lo asigna a <code>ourSum</code> variable <code>ourSum</code> </section>
|
||||
<section id="description"> Si recuerda de nuestra discusión sobre el <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">almacenamiento de valores con el operador de asignación</a> , todo a la derecha del signo igual se resuelve antes de que se asigne el valor. Esto significa que podemos tomar el valor de retorno de una función y asignarlo a una variable. Supongamos que hemos predefinido una <code>sum</code> función que suma dos números, entonces: <code>ourSum = sum(5, 12);</code> <code>ourSum</code> a la función <code>sum</code> , que devuelve un valor de <code>17</code> y lo asigna a <code>ourSum</code> variable <code>ourSum</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Llame a la función <code>processArg</code> con un argumento de <code>7</code> y asigne su valor de retorno a la variable <code>processed</code> . </section>
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Generar fracciones aleatorias con JavaScript
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Los números aleatorios son útiles para crear un comportamiento aleatorio. JavaScript tiene una función <code>Math.random()</code> que genera un número decimal aleatorio entre <code>0</code> (incluido) y no hasta <code>1</code> (exclusivo). Por <code>Math.random()</code> tanto, <code>Math.random()</code> puede devolver un <code>0</code> pero nunca devolver una <code>1</code> <strong>Nota</strong> <br> Al igual que el <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">almacenamiento de valores con el operador igual</a> , todas las llamadas de función se resolverán antes de que se ejecute la <code>return</code> , por lo que podemos <code>return</code> el valor de la función <code>Math.random()</code> . </section>
|
||||
<section id="description"> Los números aleatorios son útiles para crear un comportamiento aleatorio. JavaScript tiene una función <code>Math.random()</code> que genera un número decimal aleatorio entre <code>0</code> (incluido) y no hasta <code>1</code> (exclusivo). Por <code>Math.random()</code> tanto, <code>Math.random()</code> puede devolver un <code>0</code> pero nunca devolver una <code>1</code> <strong>Nota</strong> <br> Al igual que el <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">almacenamiento de valores con el operador igual</a> , todas las llamadas de función se resolverán antes de que se ejecute la <code>return</code> , por lo que podemos <code>return</code> el valor de la función <code>Math.random()</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Cambie <code>randomFraction</code> para devolver un número aleatorio en lugar de devolver <code>0</code> . </section>
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Colección de discos
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Te dan un objeto JSON que representa una parte de tu colección de álbumes musicales. Cada álbum tiene varias propiedades y un número de identificación único como clave. No todos los álbumes tienen información completa. Escriba una función que tome la <code>id</code> un álbum (como <code>2548</code> ), una propiedad <code>prop</code> (como <code>"artist"</code> o <code>"tracks"</code> ) y un <code>value</code> (como <code>"Addicted to Love"</code> ) para modificar los datos de esta colección. Si <code>prop</code> no es <code>"tracks"</code> y el <code>value</code> no está vacío ( <code>""</code> ), actualice o establezca el <code>value</code> para la propiedad del álbum de grabación. Su función debe devolver siempre el objeto de colección completo. Existen varias reglas para manejar datos incompletos: si <code>prop</code> es <code>"tracks"</code> pero el álbum no tiene una propiedad de <code>"tracks"</code> , cree una matriz vacía antes de agregar el nuevo valor a la propiedad correspondiente del álbum. Si <code>prop</code> es <code>"tracks"</code> y el <code>value</code> no está vacío ( <code>""</code> ), presione el <code>value</code> en el extremo de la matriz de <code>tracks</code> existente del <code>tracks</code> . Si el <code>value</code> está vacío ( <code>""</code> ), elimine la propiedad de <code>prop</code> determinada del álbum. <strong>Consejos</strong> <br> Utilice la <code>bracket notation</code> cuando <a href="javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables" target="_blank">acceda a las propiedades de objetos con variables</a> . Push es un método de matriz que puede leer sobre <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" target="_blank">Mozilla Developer Network</a> . Puede volver a consultar <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">Manipular objetos complejos</a> presentando la notación de objetos de JavaScript (JSON) para obtener una actualización. </section>
|
||||
<section id="description"> Te dan un objeto JSON que representa una parte de tu colección de álbumes musicales. Cada álbum tiene varias propiedades y un número de identificación único como clave. No todos los álbumes tienen información completa. Escriba una función que tome la <code>id</code> un álbum (como <code>2548</code> ), una propiedad <code>prop</code> (como <code>"artist"</code> o <code>"tracks"</code> ) y un <code>value</code> (como <code>"Addicted to Love"</code> ) para modificar los datos de esta colección. Si <code>prop</code> no es <code>"tracks"</code> y el <code>value</code> no está vacío ( <code>""</code> ), actualice o establezca el <code>value</code> para la propiedad del álbum de grabación. Su función debe devolver siempre el objeto de colección completo. Existen varias reglas para manejar datos incompletos: si <code>prop</code> es <code>"tracks"</code> pero el álbum no tiene una propiedad de <code>"tracks"</code> , cree una matriz vacía antes de agregar el nuevo valor a la propiedad correspondiente del álbum. Si <code>prop</code> es <code>"tracks"</code> y el <code>value</code> no está vacío ( <code>""</code> ), presione el <code>value</code> en el extremo de la matriz de <code>tracks</code> existente del <code>tracks</code> . Si el <code>value</code> está vacío ( <code>""</code> ), elimine la propiedad de <code>prop</code> determinada del álbum. <strong>Consejos</strong> <br> Utilice la <code>bracket notation</code> cuando <a href="javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables" target="_blank">acceda a las propiedades de objetos con variables</a> . Push es un método de matriz que puede leer sobre <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push" target="_blank">Mozilla Developer Network</a> . Puede volver a consultar <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects" target="_blank">Manipular objetos complejos</a> presentando la notación de objetos de JavaScript (JSON) para obtener una actualización. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
|
||||
@ -7,7 +7,7 @@ localeTitle: Devolviendo valores booleanos desde funciones
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> De la <a href="learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">comparación con el operador de igualdad</a> puede recordar que todos los operadores de comparación devuelven un valor booleano <code>true</code> o <code>false</code> . A veces las personas usan una declaración if / else para hacer una comparación, como esta: <blockquote> función isEqual (a, b) { <br> si (a === b) { <br> devuelve verdadero <br> } else { <br> falso retorno; <br> } <br> } </blockquote> Pero hay una mejor manera de hacer esto. Como <code>===</code> devuelve <code>true</code> o <code>false</code> , podemos devolver el resultado de la comparación: <blockquote> función isEqual (a, b) { <br> devuelve a === b; <br> } </blockquote></section>
|
||||
<section id="description"> De la <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank">comparación con el operador de igualdad</a> puede recordar que todos los operadores de comparación devuelven un valor booleano <code>true</code> o <code>false</code> . A veces las personas usan una declaración if / else para hacer una comparación, como esta: <blockquote> función isEqual (a, b) { <br> si (a === b) { <br> devuelve verdadero <br> } else { <br> falso retorno; <br> } <br> } </blockquote> Pero hay una mejor manera de hacer esto. Como <code>===</code> devuelve <code>true</code> o <code>false</code> , podemos devolver el resultado de la comparación: <blockquote> función isEqual (a, b) { <br> devuelve a === b; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Arreglar la función <code>isLess</code> permite eliminar las sentencias <code>if/else</code> . </section>
|
||||
|
||||
@ -8,7 +8,7 @@ localeTitle: Introducción a los estilos en línea
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Hay otros conceptos complejos que agregan capacidades poderosas a su código React. Pero puede que se esté preguntando sobre el problema más simple de cómo diseñar los elementos JSX que crea en React. Probablemente sepa que no será exactamente lo mismo que trabajar con HTML debido a <a target="_blank" href="learn/front-end-libraries/react/define-an-html-class-in-jsx">la forma en que aplica las clases a los elementos JSX</a> . Si importa estilos de una hoja de estilo, no es muy diferente en absoluto. Aplicas una clase a tu elemento JSX usando el atributo <code>className</code> y aplicas estilos a la clase en tu hoja de estilo. Otra opción es aplicar estilos en <strong><em>línea</em></strong> , que son muy comunes en el desarrollo de ReactJS. Usted aplica estilos en línea a elementos JSX similares a cómo lo hace en HTML, pero con algunas diferencias JSX. Aquí hay un ejemplo de un estilo en línea en HTML: <code><div style="color: yellow; font-size: 16px">Mellow Yellow</div></code> elementos JSX usan el atributo de <code>style</code> , pero debido a la forma en que se transpila JSX, puede 't establecer el valor a una <code>string</code> . En su lugar, lo establece igual a un <code>object</code> JavaScript. Aquí hay un ejemplo: <code><div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div></code> ¿Observa cómo la propiedad "fontSize" está en <a target="_blank" href="https://es.wikipedia.org/wiki/CamelCase">camelCase</a>? Esto se debe a que React no aceptará claves de kebab en el objeto de estilo. React aplicará el nombre de propiedad correcto para nosotros en el HTML. </section>
|
||||
<section id="description"> Hay otros conceptos complejos que agregan capacidades poderosas a su código React. Pero puede que se esté preguntando sobre el problema más simple de cómo diseñar los elementos JSX que crea en React. Probablemente sepa que no será exactamente lo mismo que trabajar con HTML debido a <a target="_blank" href="/learn/front-end-libraries/react/define-an-html-class-in-jsx">la forma en que aplica las clases a los elementos JSX</a> . Si importa estilos de una hoja de estilo, no es muy diferente en absoluto. Aplicas una clase a tu elemento JSX usando el atributo <code>className</code> y aplicas estilos a la clase en tu hoja de estilo. Otra opción es aplicar estilos en <strong><em>línea</em></strong> , que son muy comunes en el desarrollo de ReactJS. Usted aplica estilos en línea a elementos JSX similares a cómo lo hace en HTML, pero con algunas diferencias JSX. Aquí hay un ejemplo de un estilo en línea en HTML: <code><div style="color: yellow; font-size: 16px">Mellow Yellow</div></code> elementos JSX usan el atributo de <code>style</code> , pero debido a la forma en que se transpila JSX, puede 't establecer el valor a una <code>string</code> . En su lugar, lo establece igual a un <code>object</code> JavaScript. Aquí hay un ejemplo: <code><div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div></code> ¿Observa cómo la propiedad "fontSize" está en <a target="_blank" href="https://es.wikipedia.org/wiki/CamelCase">camelCase</a>? Esto se debe a que React no aceptará claves de kebab en el objeto de estilo. React aplicará el nombre de propiedad correcto para nosotros en el HTML. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Agregue un atributo de <code>style</code> al <code>div</code> en el editor de código para darle al texto un color rojo y un tamaño de fuente de 72px. Tenga en cuenta que, opcionalmente, puede configurar el tamaño de fuente como un número, omitiendo las unidades "px", o escribirlo como "72px". </section>
|
||||
|
||||
Reference in New Issue
Block a user