fix: blockquote-formatting-in-challenges (#17590)
This commit is contained in:
Tom
committed by
Kristofer Koishigawa
Kristofer Koishigawa
parent
ff788f86ff
commit
412980c403
@ -477,7 +477,7 @@
|
||||
"HTML5's <code>audio</code> element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to the deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.",
|
||||
"The <code>audio</code> tag supports the <code>controls</code> attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, its presence on the tag turns the setting on.",
|
||||
"Here's an example:",
|
||||
"<blockquote><audio id="meowClip" controls><br> <source src="audio/meow.mp3" type="audio/mpeg" /><br> <source src="audio/meow.ogg" type="audio/ogg" /><br></audio><br></blockquote>",
|
||||
"<blockquote><audio id="meowClip" controls><br> <source src="audio/meow.mp3" type="audio/mpeg" /><br> <source src="audio/meow.ogg" type="audio/ogg" /><br></audio><br></blockquote>",
|
||||
"<strong>Note</strong><br>Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them.",
|
||||
"<hr>",
|
||||
"Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an <code>audio</code> element after the <code>p</code>. Include the <code>controls</code> attribute. Then place a <code>source</code> tag inside the <code>audio</code> tags with the <code>src</code> attribute set to \"https://s3.amazonaws.com/freecodecamp/screen-reader.mp3\" and <code>type</code> attribute set to \"audio/mpeg\".",
|
||||
@ -548,7 +548,7 @@
|
||||
"HTML5 introduced the <code>figure</code> element, along with the related <code>figcaption</code>. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the <code>figure</code>.",
|
||||
"For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.",
|
||||
"Here's an example - note that the <code>figcaption</code> goes inside the <code>figure</code> tags and can be combined with other elements:",
|
||||
"<blockquote><figure><br> <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick"><br> <br><br> <figcaption><br> Master Camper Cat demonstrates proper form of a roundhouse kick.<br> </figcaption><br></figure><br></blockquote>",
|
||||
"<blockquote><figure><br> <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick"><br> <br><br> <figcaption><br> Master Camper Cat demonstrates proper form of a roundhouse kick.<br> </figcaption><br></figure><br></blockquote>",
|
||||
"<hr>",
|
||||
"Camper Cat is hard at work creating a stacked bar chart showing the amount of time per week to spend training in stealth, combat, and weapons. Help him structure his page better by changing the <code>div</code> tag he used to a <code>figure</code> tag, and the <code>p</code> tag that surrounds the caption to a <code>figcaption</code> tag."
|
||||
],
|
||||
@ -644,7 +644,7 @@
|
||||
"The <code>label</code> tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The <code>for</code> attribute on a <code>label</code> tag explicitly associates that <code>label</code> with the form control and is used by screen readers.",
|
||||
"You learned about radio buttons and their labels in a lesson in the Basic HTML section. In that lesson, we wrapped the radio button input element inside a <code>label</code> element along with the label text in order to make the text clickable. Another way to achieve this is by using the <code>for</code> attribute as explained in this lesson.",
|
||||
"The value of the <code>for</code> attribute must be the same as the value of the <code>id</code> attribute of the form control. Here's an example:",
|
||||
"<blockquote><form><br> <label for="name">Name:</label><br> <input type="text" id="name" name="name"><br></form><br></blockquote>",
|
||||
"<blockquote><form><br> <label for="name">Name:</label><br> <input type="text" id="name" name="name"><br></form><br></blockquote>",
|
||||
"<hr>",
|
||||
"Camper Cat expects a lot of interest in his thoughtful blog posts, and wants to include an email sign up form. Add a <code>for</code> attribute on the email <code>label</code> that matches the <code>id</code> on its <code>input</code> field."
|
||||
],
|
||||
@ -715,7 +715,7 @@
|
||||
"The <code>fieldset</code> tag surrounds the entire grouping of radio buttons to achieve this. It often uses a <code>legend</code> tag to provide a description for the grouping, which is read by screen readers for each choice in the <code>fieldset</code> element.",
|
||||
"The <code>fieldset</code> wrapper and <code>legend</code> tag are not necessary when the choices are self-explanatory, like a gender selection. Using a <code>label</code> with the <code>for</code> attribute for each radio button is sufficient.",
|
||||
"Here's an example:",
|
||||
"<blockquote><form><br> <fieldset><br> <legend>Choose one of these three items:</legend><br> <input id="one" type="radio" name="items" value="one"><br> <label for="one">Choice One</label><br><br> <input id="two" type="radio" name="items" value="two"><br> <label for="two">Choice Two</label><br><br> <input id="three" type="radio" name="items" value="three"><br> <label for="three">Choice Three</label><br> </fieldset><br></form><br></blockquote>",
|
||||
"<blockquote><form><br> <fieldset><br> <legend>Choose one of these three items:</legend><br> <input id="one" type="radio" name="items" value="one"><br> <label for="one">Choice One</label><br><br> <input id="two" type="radio" name="items" value="two"><br> <label for="two">Choice Two</label><br><br> <input id="three" type="radio" name="items" value="three"><br> <label for="three">Choice Three</label><br> </fieldset><br></form><br></blockquote>",
|
||||
"<hr>",
|
||||
"Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons, and learned from our last lesson to use label tags with <code>for</code> attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the div tag surrounding the radio buttons to a fieldset tag, and change the p tag inside it to a legend."
|
||||
],
|
||||
@ -954,7 +954,7 @@
|
||||
"Have you noticed that all of the applied accessibility challenges so far haven't used any CSS? This is to show the importance of a logical document outline, and using semantically meaningful tags around your content before introducing the visual design aspect.",
|
||||
"However, CSS's magic can also improve accessibility on your page when you want to visually hide content meant only for screen readers. This happens when information is in a visual format (like a chart), but screen reader users need an alternative presentation (like a table) to access the data. CSS is used to position the screen reader-only elements off the visual area of the browser window.",
|
||||
"Here's an example of the CSS rules that accomplish this:",
|
||||
"<blockquote>.sr-only {<br> position: absolute;<br> left: -10000px;<br> width: 1px;<br> height: 1px;<br> top: auto;<br> overflow: hidden;<br>}</blockquote>",
|
||||
"<blockquote>.sr-only {<br> position: absolute;<br> left: -10000px;<br> width: 1px;<br> height: 1px;<br> top: auto;<br> overflow: hidden;<br>}</blockquote>",
|
||||
"<strong>Note</strong><br>The following CSS approaches will NOT do the same thing:",
|
||||
"<ul>",
|
||||
"<li><code>display: none;</code> or <code>visibility: hidden;</code> hides content for everyone, including screen reader users</li>",
|
||||
|
||||
@ -82,7 +82,7 @@
|
||||
"title": "Adjust the Width of an Element Using the width Property",
|
||||
"description": [
|
||||
"You can specify the width of an element using the <code>width</code> property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:",
|
||||
"<blockquote>img {<br> width: 220px;<br>}</blockquote>",
|
||||
"<blockquote>img {<br> width: 220px;<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Add a <code>width</code> property to the entire card and set it to an absolute value of 245px. Use the <code>fullCard</code> class to select the element."
|
||||
],
|
||||
@ -148,7 +148,7 @@
|
||||
"title": "Adjust the Height of an Element Using the height Property",
|
||||
"description": [
|
||||
"You can specify the height of an element using the <code>height</code> property in CSS, similar to the <code>width</code> property. Here's an example that changes the height of an image to 20px:",
|
||||
"<blockquote>img {<br> height: 20px;<br>}</blockquote>",
|
||||
"<blockquote>img {<br> height: 20px;<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Add a <code>height</code> property to the <code>h4</code> tag and set it to 25px."
|
||||
],
|
||||
@ -595,7 +595,7 @@
|
||||
"title": "Adjust the background-color Property of Text",
|
||||
"description": [
|
||||
"Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a <code>background-color</code> to the element holding the text you want to emphasize. This challenge uses <code>rgba()</code> instead of <code>hex</code> codes or normal <code>rgb()</code>.",
|
||||
"<blockquote>rgba stands for:<br> r = red<br> g = green<br> b = blue<br> a = alpha/level of opacity</blockquote>",
|
||||
"<blockquote>rgba stands for:<br> r = red<br> g = green<br> b = blue<br> a = alpha/level of opacity</blockquote>",
|
||||
"The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. <code>rgba()</code> is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.",
|
||||
"You'll use <code>background-color: rgba(45, 45, 45, 0.1)</code> for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.",
|
||||
"<hr>",
|
||||
@ -1223,7 +1223,7 @@
|
||||
"description": [
|
||||
"This challenge will touch on the usage of pseudo-classes. A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element.",
|
||||
"For example, the styling of an anchor tag can be changed for its hover state using the <code>:hover</code> pseudo-class selector. Here's the CSS to change the <code>color</code> of the anchor tag to red during its hover state:",
|
||||
"<blockquote>a:hover {<br> color: red;<br>}</blockquote>",
|
||||
"<blockquote>a:hover {<br> color: red;<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"The code editor has a CSS rule to style all <code>a</code> tags black. Add a rule so that when the user hovers over the <code>a</code> tag, the <code>color</code> is blue."
|
||||
],
|
||||
@ -1269,7 +1269,7 @@
|
||||
"description": [
|
||||
"CSS treats each HTML element as its own box, which is usually referred to as the <code>CSS Box Model</code>. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the <code>normal flow</code> of a document, but CSS offers the position property to override it.",
|
||||
"When the position of an element is set to <code>relative</code>, it allows you to specify how CSS should move it <i>relative</i> to its current position in the normal flow of the page. It pairs with the CSS offset properties of <code>left</code> or <code>right</code>, and <code>top</code> or <code>bottom</code>. These say how many pixels, percentages, or ems to move the item <i>away</i> from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:",
|
||||
"<blockquote>p {<br> position: relative;<br> bottom: 10px;<br>}</blockquote>",
|
||||
"<blockquote>p {<br> position: relative;<br> bottom: 10px;<br>}</blockquote>",
|
||||
"Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.",
|
||||
"<strong>Note</strong><br>Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.",
|
||||
"<hr>",
|
||||
@ -2185,7 +2185,7 @@
|
||||
"title": "Use the CSS Transform scale Property to Change the Size of an Element",
|
||||
"description": [
|
||||
"To change the scale of an element, CSS has the <code>transform</code> property, along with its <code>scale()</code> function. The following code example doubles the size of all the paragraph elements on the page:",
|
||||
"<blockquote>p {<br> transform:scale(2);<br>}</blockquote>",
|
||||
"<blockquote>p {<br> transform:scale(2);<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Increase the size of the element with the id of <code>ball2</code> to 1.5 times its original size."
|
||||
],
|
||||
@ -2244,7 +2244,7 @@
|
||||
"description": [
|
||||
"The <code>transform</code> property has a variety of functions that lets you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as <code>:hover</code> that specify a certain state of an element, the <code>transform</code> property can easily add interactivity to your elements.",
|
||||
"Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:",
|
||||
"<blockquote>p:hover {<br> transform: scale(2.1);<br>}</blockquote>",
|
||||
"<blockquote>p:hover {<br> transform: scale(2.1);<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Add a CSS rule for the <code>hover</code> state of the <code>div</code> and use the <code>transform</code> property to scale the <code>div</code> element to 1.1 times its original size when a user hovers over it."
|
||||
],
|
||||
@ -2296,7 +2296,7 @@
|
||||
"description": [
|
||||
"The next function of the <code>transform</code> property is <code>skewX()</code>, which skews the selected element along its X (horizontal) axis by a given degree.",
|
||||
"The following code skews the paragraph element by -32 degrees along the X-axis.",
|
||||
"<blockquote>p {<br> transform: skewX(-32deg);<br>}</blockquote>",
|
||||
"<blockquote>p {<br> transform: skewX(-32deg);<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Skew the element with the id of <code>bottom</code> by 24 degrees along the X-axis by using the <code>transform</code> property."
|
||||
],
|
||||
@ -2457,7 +2457,7 @@
|
||||
"title": "Create a More Complex Shape Using CSS and HTML",
|
||||
"description": [
|
||||
"One of the most popular shapes in the world is the heart shape, and this challenge creates it with raw CSS. But first, you need to understand the <code>:before</code> and <code>:after</code> selectors. These selectors are used to add something before or after a selected element. In the following example, a <code>:before</code> selector is used to add a rectangle to an element with the class <code>heart</code>:",
|
||||
"<blockquote>.heart:before {<br> content: \"\";<br> background-color: yellow;<br> border-radius: 25%;<br> position: absolute;<br> height: 50px;<br> width: 70px;<br> top: -50px;<br> left: 5px;<br>}</blockquote>",
|
||||
"<blockquote>.heart:before {<br> content: \"\";<br> background-color: yellow;<br> border-radius: 25%;<br> position: absolute;<br> height: 50px;<br> width: 70px;<br> top: -50px;<br> left: 5px;<br>}</blockquote>",
|
||||
"For the <code>:before</code> and <code>:after</code> selectors to function properly, they must have a defined <code>content</code> property. It usually has content such as a photo or text. When the <code>:before</code> and <code>:after</code> selectors add shapes, the <code>content</code> property is still required, but it's set to an empty string.",
|
||||
"In the above example, the element with the class of <code>heart</code> has a <code>:before</code> selector that produces a yellow rectangle with <code>height</code> and <code>width</code> of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the <code>left</code> and 50px above the <code>top</code> of the element.",
|
||||
"<hr>",
|
||||
@ -2543,7 +2543,7 @@
|
||||
"<code>animation-name</code> sets the name of the animation, which is later used by <code>@keyframes</code> to tell CSS which rules go with which animations.",
|
||||
"<code>animation-duration</code> sets the length of time for the animation.",
|
||||
"<code>@keyframes</code> is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific \"frames\" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of <code>@keyframes</code> and the animation properties:",
|
||||
"<blockquote>#anim {<br> animation-name: colorful;<br> animation-duration: 3s;<br>}<br>@keyframes colorful {<br> 0% {<br> background-color: blue;<br> }<br> 100% {<br> background-color: yellow;<br> }<br>}</blockquote>",
|
||||
"<blockquote>#anim {<br> animation-name: colorful;<br> animation-duration: 3s;<br>}<br>@keyframes colorful {<br> 0% {<br> background-color: blue;<br> }<br> 100% {<br> background-color: yellow;<br> }<br>}</blockquote>",
|
||||
"For the element with the <code>anim</code> id, the code snippet above sets the <code>animation-name</code> to <code>colorful</code> and sets the <code>animation-duration</code> to 3 seconds. Then the <code>@keyframes</code> rule links to the animation properties with the name <code>colorful</code>. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.",
|
||||
"<hr>",
|
||||
"Create an animation for the element with the id <code>rect</code>, by setting the <code>animation-name</code> to rainbow and the <code>animation-duration</code> to 4 seconds. Next, declare a <code>@keyframes</code> rule, and set the <code>background-color</code> at the beginning of the animation (<code>0%</code>) to blue, the middle of the animation (<code>50%</code>) to green, and the end of the animation (<code>100%</code>) to yellow."
|
||||
@ -2618,7 +2618,7 @@
|
||||
"description": [
|
||||
"You can use CSS <code>@keyframes</code> to change the color of a button in its hover state.",
|
||||
"Here's an example of changing the width of an image on hover:",
|
||||
"<blockquote><style><br> img:hover {<br> animation-name: width;<br> animation-duration: 500ms;<br> }<br><br> @keyframes width {<br> 100% {<br> width: 40px;<br> }<br> }<br></style><br><br><img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" /></blockquote>",
|
||||
"<blockquote><style><br> img:hover {<br> animation-name: width;<br> animation-duration: 500ms;<br> }<br><br> @keyframes width {<br> 100% {<br> width: 40px;<br> }<br> }<br></style><br><br><img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" /></blockquote>",
|
||||
"<hr>",
|
||||
"Note that <code>ms</code> stands for milliseconds, where 1000ms is equal to 1s.",
|
||||
"Use CSS <code>@keyframes</code> to change the <code>background-color</code> of the <code>button</code> element so it becomes <code>#4791d0</code> when a user hovers over it. The <code>@keyframes</code> rule should only have an entry for <code>100%</code>."
|
||||
@ -2726,7 +2726,7 @@
|
||||
"description": [
|
||||
"When elements have a specified <code>position</code>, such as <code>fixed</code> or <code>relative</code>, the CSS offset properties <code>right</code>, <code>left</code>, <code>top</code>, and <code>bottom</code> can be used in animation rules to create movement.",
|
||||
"As shown in the example below, you can push the item downwards then upwards by setting the <code>top</code> property of the <code>50%</code> keyframe to 50px, but having it set to 0px for the first (<code>0%</code>) and the last (<code>100%</code>) keyframe.",
|
||||
"<blockquote>@keyframes rainbow {<br> 0% {<br> background-color: blue;<br> top: 0px;<br> }<br> 50% {<br> background-color: green;<br> top: 50px;<br> }<br> 100% {<br> background-color: yellow;<br> top: 0px;<br> }<br>}</blockquote>",
|
||||
"<blockquote>@keyframes rainbow {<br> 0% {<br> background-color: blue;<br> top: 0px;<br> }<br> 50% {<br> background-color: green;<br> top: 50px;<br> }<br> 100% {<br> background-color: yellow;<br> top: 0px;<br> }<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Add a horizontal motion to the <code>div</code> animation. Using the <code>left</code> offset property, add to the <code>@keyframes</code> rule so rainbow starts at 0 pixels at <code>0%</code>, moves to 25 pixels at <code>50%</code>, and ends at -25 pixels at <code>100%</code>. Don't replace the <code>top</code> property in the editor - the animation should have both vertical and horizontal motion."
|
||||
],
|
||||
|
||||
@ -2822,7 +2822,7 @@
|
||||
"You have been giving <code>id</code> or <code>class</code> attributes to elements that you wish to specifically style. These are known as ID and class selectors. There are other CSS Selectors you can use to select custom groups of elements to style.",
|
||||
"Let's bring out CatPhotoApp again to practice using CSS Selectors.",
|
||||
"For this challenge, you will use the <code>[attr=value]</code> attribute selector to style the checkboxes in CatPhotoApp. This selector matches and styles elements with a specific attribute value. For example, the below code changes the margins of all elements with the attribute <code>type</code> and a corresponding value of <code>radio</code>:",
|
||||
"<blockquote>[type='radio'] {<br> margin: 20px 0px 20px 0px;<br>}</blockquote>",
|
||||
"<blockquote>[type='radio'] {<br> margin: 20px 0px 20px 0px;<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Using the <code>type</code> attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px."
|
||||
],
|
||||
@ -3759,7 +3759,7 @@
|
||||
"Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or <code>hex code</code> for short.",
|
||||
"We usually use <code>decimals</code>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <code>Hexadecimals</code> (or <code>hex</code>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in <code>hexadecimal</code>, giving us 16 total possible values. You can find more information about <a target='_blank' href='https://en.wikipedia.org/wiki/Hexadecimal'>hexadecimal numbers here</a>.",
|
||||
"In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, <code>#000000</code> is black and is also the lowest possible value. You can find more information about the <a target='_blank' href='https://en.wikipedia.org/wiki/RGB_color_model'>RGB color system here</a>.",
|
||||
"<blockquote>body {<br> color: #000000;<br>}</blockquote>",
|
||||
"<blockquote>body {<br> color: #000000;<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Replace the word <code>black</code> in our <code>body</code> element's background-color with its <code>hex code</code> representation, <code>#000000</code>."
|
||||
],
|
||||
@ -4087,7 +4087,7 @@
|
||||
"Instead of using six hexadecimal digits like you do with hex code, with <code>RGB</code> you specify the brightness of each color with a number between 0 and 255.",
|
||||
"If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values. So <code>RGB</code>, which starts counting from zero, has the exact same number of possible values as hex code.",
|
||||
"Here's an example of how you'd change the body background to orange using its RGB code.",
|
||||
"<blockquote>body {<br> background-color: rgb(255, 165, 0);<br>}</blockquote>",
|
||||
"<blockquote>body {<br> background-color: rgb(255, 165, 0);<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Let's replace the hex code in our <code>body</code> element's background color with the RGB value for black: <code>rgb(0, 0, 0)</code>"
|
||||
],
|
||||
|
||||
@ -2013,9 +2013,9 @@
|
||||
"Each of your radio buttons can be nested within its own <code>label</code> element. By wrapping an <code>input</code> element inside of a <code>label</code> element it will autoatically associate the radio button input with the label element surrounding it.",
|
||||
"All related radio buttons should have the same <code>name</code> attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.",
|
||||
"Here's an example of a radio button:",
|
||||
"<blockquote><label> <br> <input type=\"radio\" name=\"indoor-outdoor\">Indoor <br></label></blockquote>",
|
||||
"<blockquote><label> <br> <input type=\"radio\" name=\"indoor-outdoor\">Indoor <br></label></blockquote>",
|
||||
"It is considered best practice to set a <code>for</code> attribute on the <code>label</code> element, with a value that matches the value of the <code>id</code> attribute of the <code>input</code> element. This allows assistive technologies to create a linked relationship between the label and the child <code>input</code> element. For example:",
|
||||
"<blockquote><label for=\"indoor\"> <br> <input id=\"indoor\" type=\"radio\" name=\"indoor-outdoor\">Indoor <br></label></blockquote>",
|
||||
"<blockquote><label for=\"indoor\"> <br> <input id=\"indoor\" type=\"radio\" name=\"indoor-outdoor\">Indoor <br></label></blockquote>",
|
||||
"<hr>",
|
||||
"Add a pair of radio buttons to your form, each nested in its own label element. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>. Both should share the <code>name</code> attribute of <code>indoor-outdoor</code> to create a radio group."
|
||||
],
|
||||
@ -2493,7 +2493,7 @@
|
||||
"The <code>!</code> and uppercase <code>DOCTYPE</code> is important, especially for older browsers. The <code>html</code> is not case sensitive.",
|
||||
"Next, the rest of your HTML code needs to be wrapped in <code>html</code> tags. The opening <code><html></code> goes directly below the <code><!DOCTYPE html></code> line, and the closing <code></html></code> goes at the end of the page.",
|
||||
"Here's an example of the page structure:",
|
||||
"<blockquote><!DOCTYPE html><br><html><br> <!-- Your HTML code goes here --><br></html></blockquote>",
|
||||
"<blockquote><!DOCTYPE html><br><html><br> <!-- Your HTML code goes here --><br></html></blockquote>",
|
||||
"<hr>",
|
||||
"Add a <code>DOCTYPE</code> tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing <code>html</code> tags, which wrap around an <code>h1</code> element. The heading can include any text."
|
||||
],
|
||||
@ -2522,7 +2522,7 @@
|
||||
"O <code>!</code> e o <code>DOCTYPE</code> todo em maiúsculas são importantes, especialmente para navegadores mais velhos. O <code>html</code> não é sensível a maiúsculas e minúsculas.",
|
||||
"Em seguida, o resto do seu código HTML deve estar delimitado por tags <code>html</code>. A tag <code><html></code> vai diretamente abaixo da linha <code><!DOCTYPE html></code>, e a tag <code></html></code> vai no final da página.",
|
||||
"Aqui está um exemplo da estrutura de uma página:",
|
||||
"<blockquote><!DOCTYPE html><br><html><br> <!-- Seu código HTML vai aqui --><br></html></blockquote>",
|
||||
"<blockquote><!DOCTYPE html><br><html><br> <!-- Seu código HTML vai aqui --><br></html></blockquote>",
|
||||
"<hr>",
|
||||
"Adicione uma tag <code>DOCTYPE</code> para HTML5 no topo do documento HTML em branco no editor de texto. Abaixo dela, adicione tags <code>html</code> de abertura e fechamento, ao redor de um elemento <code>h1</code>. O texto do <code>h1</code> pode ser qualquer um."
|
||||
]
|
||||
@ -2546,7 +2546,7 @@
|
||||
"You can add another level of organization in your HTML document within the <code>html</code> tags with the <code>head</code> and <code>body</code> elements. Any markup with information about your page would go into the <code>head</code> tag. Then any markup with the content of the page (what displays for a user) would go into the <code>body</code> tag.",
|
||||
"Metadata elements, such as <code>link</code>, <code>meta</code>, <code>title</code>, and <code>style</code>, typically go inside the <code>head</code> element.",
|
||||
"Here's an example of a page's layout:",
|
||||
"<blockquote><!DOCTYPE html><br><html><br> <head><br> <!-- metadata elements --><br> </head><br> <body><br> <!-- page contents --><br> </body><br></html></blockquote>",
|
||||
"<blockquote><!DOCTYPE html><br><html><br> <head><br> <!-- metadata elements --><br> </head><br> <body><br> <!-- page contents --><br> </body><br></html></blockquote>",
|
||||
"<hr>",
|
||||
"Edit the markup so there's a <code>head</code> and a <code>body</code>. The <code>head</code> element should only include the <code>title</code>, and the <code>body</code> element should only include the <code>h1</code> and <code>p</code>."
|
||||
],
|
||||
@ -2584,7 +2584,7 @@
|
||||
"Você pode adicionar mais um nível de organização ao seu documento HTML dentro da tag <code>html</code> com os elementos <code>head</code> (cabeça) e <code>body</code> (corpo). Qualquer código com informações sobre a sua página deve estar dentro da tag <code>head</code>. Assim, qualquer código com o conteúdo da sua página (o que aparece para o usuário) deve estar dentro da tag <code>body</code>.",
|
||||
"Elementos de metadados, como <code>link</code>, <code>meta</code>, <code>title</code> e <code>style</code>, tipicamente aparecem dentro do elemento <code>head</code>.",
|
||||
"Aqui está um exemplo da estrutura de uma página:",
|
||||
"<blockquote><!DOCTYPE html><br><html><br> <head><br> <!-- elementos de metadados --><br> </head><br> <body><br> <!-- conteúdo da página --><br> </body><br></html></blockquote>",
|
||||
"<blockquote><!DOCTYPE html><br><html><br> <head><br> <!-- elementos de metadados --><br> </head><br> <body><br> <!-- conteúdo da página --><br> </body><br></html></blockquote>",
|
||||
"<hr>",
|
||||
"Edite o código para que tenha uma <code>head</code> e um <code>body</code>. O elemento <code>head</code> deve incluir apenas o <code>title</code>, e o elemento <code>body</code> deve conter apenas o <code>h1</code> e o <code>p</code>."
|
||||
]
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
"title": "Add Columns with grid-template-columns",
|
||||
"description": [
|
||||
"Simply creating a grid element doesn't get you very far. You need to define the structure of the grid as well. To add some columns to the grid, use the <code>grid-template-columns</code> property on a grid container as demonstrated below:",
|
||||
"<blockquote>.container {<br>display: grid;<br>grid-template-columns: 50px 50px;<br>}</blockquote>",
|
||||
"<blockquote>.container {<br> display: grid;<br> grid-template-columns: 50px 50px;<br>}</blockquote>",
|
||||
"This will give your grid two columns that are 50px wide each.",
|
||||
"The number of parameters given to the <code>grid-template-columns</code> property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.",
|
||||
"<hr>",
|
||||
@ -821,7 +821,7 @@
|
||||
"title": "Divide the Grid Into an Area Template",
|
||||
"description": [
|
||||
"You can group cells of your grid together into an <dfn>area</dfn> and give the area a custom name. Do this by using <code>grid-template-areas</code> on the container like this:",
|
||||
"<blockquote>grid-template-areas:<br>\"header header header\"<br>\"advert content content\"<br>\"footer footer footer\";</blockquote>",
|
||||
"<blockquote>grid-template-areas:<br> \"header header header\"<br> \"advert content content\"<br> \"footer footer footer\";</blockquote>",
|
||||
"The code above merges the top three cells together into an area named <code>header</code>, the bottom three cells into a <code>footer</code> area, and it makes two areas in the middle row; <code>advert</code> and <code>content</code>.",
|
||||
"<strong>Note</strong><br>Every word in the code represents a cell and every pair of quotation marks represent a row.",
|
||||
"In addition to custom labels, you can use a period (<code>.</code>) to designate an empty cell in the grid.",
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
"Making images responsive with CSS is actually very simple. Instead of applying an absolute width to an element:",
|
||||
"<code>img { width: 720px; }</code>",
|
||||
"You can use:",
|
||||
"<blockquote>img {<br> max-width: 100%;<br> display: block;<br> height: auto;<br>}</blockquote>",
|
||||
"<blockquote>img {<br> max-width: 100%;<br> display: block;<br> height: auto;<br>}</blockquote>",
|
||||
"The <code>max-width</code> property of 100% scales the image to fit the width of its container, but the image won't stretch wider than its original width. Setting the <code>display</code> property to block changes the image from an inline element (its default), to a block element on its own line. The <code>height</code> property of auto keeps the original aspect ratio of the image.",
|
||||
"<hr>",
|
||||
"Add style rules for the <code>img</code> tag to make it responsive to the size of its container. It should display as a block-level element, it should fit the full width of its container without stretching, and it should keep its original aspect ratio."
|
||||
@ -105,7 +105,7 @@
|
||||
"Fazer com que imagens sejam responsivas é muito simples com CSS. Ao invés de aplicar uma largura absoluta a um elemento:",
|
||||
"<code>img { width: 720px; }</code>",
|
||||
"Você pode usar:",
|
||||
"<blockquote>img {<br> max-width: 100%;<br> display: block;<br> height: auto;<br>}</blockquote>",
|
||||
"<blockquote>img {<br> max-width: 100%;<br> display: block;<br> height: auto;<br>}</blockquote>",
|
||||
"A propriedade <code>max-width</code> em 100% ajusta o tamanho da imagem para preencher a largura de seu container, mas a imagem não irá esticar mais que sua largura original. Ajustando a propriedade <code>display</code> como block muda imagem de elemento inline (o padrão) para um elemento block com uma linha própria. A propriedade <code>height</code> na configuração auto mantem a proporção original da imagem.",
|
||||
"<hr>",
|
||||
"Adicione regras de estilo para a tag <code>img</code> para torná-la responsiva com relação ao tamanho do seu container. Ela deve ser exibida como um elemento de nível block, e deve preencher toda a largura de seu container sem esticar, mantendo as proporções originais."
|
||||
@ -135,7 +135,7 @@
|
||||
"description": [
|
||||
"The simplest way to make your images appear \"retina\" (and optimize them for retina displays) is to define their <code>width</code> and <code>height</code> values as only half of what the original file is.",
|
||||
"Here is an example of an image that is only using half of the original height and width:",
|
||||
"<blockquote><style><br> img { height: 250px; width: 250px; }<br></style><br><img src="coolPic500x500" alt="A most excellent picture"></blockquote>",
|
||||
"<blockquote><style><br> img { height: 250px; width: 250px; }<br></style><br><img src="coolPic500x500" alt="A most excellent picture"></blockquote>",
|
||||
"<hr>",
|
||||
"Set the <code>width</code> and <code>height</code> of the <code>img</code> tag to half of their original values. In this case, both the original <code>height</code> and the original <code>width</code> are 200px."
|
||||
],
|
||||
@ -159,7 +159,7 @@
|
||||
"description": [
|
||||
"A maneira mais simples de fazer com que suas imagens tenham uma aparência \"retina\" (e otimizadas para telas retina) é definindo seus valores de <code>width</code> e <code>height</code> como somente metade do tamanho original dos arquivos.",
|
||||
"Segue um exemplo de imagem que possui somente metade dos valores originais de altura e largura:",
|
||||
"<blockquote><style><br> img { height: 250px; width: 250px; }<br></style><br><img src="coolPic500x500" alt="A most excellent picture"></blockquote>",
|
||||
"<blockquote><style><br> img { height: 250px; width: 250px; }<br></style><br><img src="coolPic500x500" alt="A most excellent picture"></blockquote>",
|
||||
"<hr>",
|
||||
"Configure os valores de <code>width</code> e <code>height</code> da tag <code>img</code> como metade do seu tamanho original. Nesse caso, o valor original de <code>height</code> e o valor original de <code>width</code> são de 200px."
|
||||
]
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
"<blockquote>let simpleArray = ['one', 2, 'three’, true, false, undefined, null];<br>console.log(simpleArray.length);<br>// logs 7</blockquote>",
|
||||
"All array's have a length property, which as shown above, can be very easily accessed with the syntax <code>Array.length</code>.",
|
||||
"A more complex implementation of an array can be seen below. This is known as a <dfn>multi-dimensional array</dfn>, or an array that contains other arrays. Notice that this array also contains JavaScript <dfn>objects</dfn>, which we will examine very closely in our next section, but for now, all you need to know is that arrays are also capable of storing complex objects.",
|
||||
"<blockquote>let complexArray = [<br> [<br> {<br> one: 1,<br> two: 2<br> },<br> {<br> three: 3,<br> four: 4<br> }<br> ],<br> [<br> {<br> a: \"a\",<br> b: \"b\"<br> },<br> {<br> c: \"c\",<br> d: “d”<br> }<br> ]<br>];</blockquote>",
|
||||
"<blockquote>let complexArray = [<br> [<br> {<br> one: 1,<br> two: 2<br> },<br> {<br> three: 3,<br> four: 4<br> }<br> ],<br> [<br> {<br> a: \"a\",<br> b: \"b\"<br> },<br> {<br> c: \"c\",<br> d: “d”<br> }<br> ]<br>];</blockquote>",
|
||||
"<hr>",
|
||||
"We have defined a variable called <code>yourArray</code>. Complete the statement by assigning an array of at least 5 elements in length to the <code>yourArray</code> variable. Your array should contain at least one <dfn>string</dfn>, one <dfn>number</dfn>, and one <dfn>boolean</dfn>."
|
||||
],
|
||||
@ -641,7 +641,7 @@
|
||||
"title": "Add Key-Value Pairs to JavaScript Objects",
|
||||
"description": [
|
||||
"At their most basic, objects are just collections of <dfn>key-value pairs</dfn>, or in other words, pieces of data mapped to unique identifiers that we call <dfn>properties</dfn> or <dfn>keys</dfn>. Let's take a look at a very simple example:",
|
||||
"<blockquote>let FCC_User = {<br> username: 'awesome_coder',<br> followers: 572,<br> points: 1741,<br> completedProjects: 15<br>};</blockquote>",
|
||||
"<blockquote>let FCC_User = {<br> username: 'awesome_coder',<br> followers: 572,<br> points: 1741,<br> completedProjects: 15<br>};</blockquote>",
|
||||
"The above code defines an object called <code>FCC_User</code> that has four <dfn>properties</dfn>, each of which map to a specific value. If we wanted to know the number of <code>followers</code> <code>FCC_User</code> has, we can access that property by writing:",
|
||||
"<blockquote>let userData = FCC_User.followers;<br>// userData equals 572</blockquote>",
|
||||
"This is called <dfn>dot notation</dfn>. Alternatively, we can also access the property with brackets, like so:",
|
||||
@ -704,7 +704,7 @@
|
||||
"title": "Modify an Object Nested Within an Object",
|
||||
"description": [
|
||||
"Now let's take a look at a slightly more complex object. Object properties can be nested to an arbitrary depth, and their values can be any type of data supported by JavaScript, including arrays and even other objects. Consider the following:",
|
||||
"<blockquote>let nestedObject = {<br> id: 28802695164,<br> date: 'December 31, 2016',<br> data: {<br> totalUsers: 99,<br> online: 80,<br> onlineStatus: {<br> active: 67,<br> away: 13<br> }<br> }<br>};</blockquote>",
|
||||
"<blockquote>let nestedObject = {<br> id: 28802695164,<br> date: 'December 31, 2016',<br> data: {<br> totalUsers: 99,<br> online: 80,<br> onlineStatus: {<br> active: 67,<br> away: 13<br> }<br> }<br>};</blockquote>",
|
||||
"<code>nestedObject</code> has three unique keys: <code>id</code>, whose value is a number, <code>date</code> whose value is a string, and <code>data</code>, whose value is an object which has yet another object nested within it. While structures can quickly become complex, we can still use the same notations to access the information we need.",
|
||||
"<hr>",
|
||||
"Here we've defined an object, <code>userActivity</code>, which includes another object nested within it. You can modify properties on this nested object in the same way you modified properties in the last challenge. Set the value of the <code>online</code> key to <code>45</code>."
|
||||
@ -943,7 +943,7 @@
|
||||
"title": " Iterate Through the Keys of an Object with a for...in Statement",
|
||||
"description": [
|
||||
"Sometimes you may need to iterate through all the keys within an object. This requires a specific syntax in JavaScript called a <dfn>for...in</dfn> statement. For our <code>users</code> object, this could look like:",
|
||||
"<blockquote>for (let user in users) {<br> console.log(user);<br>};<br><br>// logs:<br>Alan<br>Jeff<br>Sarah<br>Ryan</blockquote>",
|
||||
"<blockquote>for (let user in users) {<br> console.log(user);<br>};<br><br>// logs:<br>Alan<br>Jeff<br>Sarah<br>Ryan</blockquote>",
|
||||
"In this statement, we defined a variable <code>user</code>, and as you can see, this variable was reset during each iteration to each of the object's keys as the statement looped through the object, resulting in each user's name being printed to the console.",
|
||||
"<strong>NOTE:</strong><br>Objects do not maintain an ordering to stored keys like arrays do; thus a keys position on an object, or the relative order in which it appears, is irrelevant when referencing or accessing that key.",
|
||||
"<hr>",
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
"Using <code>//</code> will tell JavaScript to ignore the remainder of the text on the current line:",
|
||||
"<blockquote>// This is an in-line comment.</blockquote>",
|
||||
"You can make a multi-line comment beginning with <code>/*</code> and ending with <code>*/</code>:",
|
||||
"<blockquote>/* This is a <br> multi-line comment */</blockquote>",
|
||||
"<blockquote>/* This is a<br>multi-line comment */</blockquote>",
|
||||
"<strong>Best Practice</strong><br>As you write code, you should regularly add comments to clarify the function of parts of your code. Good commenting can help communicate the intent of your code—both for others <em>and</em> for your future self.",
|
||||
"<hr>",
|
||||
"Try creating one of each type of comment."
|
||||
@ -2518,7 +2518,7 @@
|
||||
"description": [
|
||||
"One way to think of a <dfn>multi-dimensional</dfn> array, is as an <em>array of arrays</em>. When you use brackets to access your array, the first set of brackets refers to the entries in the outer-most (the first level) array, and each additional pair of brackets refers to the next level of entries inside.",
|
||||
"<strong>Example</strong>",
|
||||
"<blockquote>var arr = [<br> [1,2,3],<br> [4,5,6],<br> [7,8,9],<br> [[10,11,12], 13, 14]<br>];<br>arr[3]; // equals [[10,11,12], 13, 14]<br>arr[3][0]; // equals [10,11,12]<br>arr[3][0][1]; // equals 11</blockquote>",
|
||||
"<blockquote>var arr = [<br> [1,2,3],<br> [4,5,6],<br> [7,8,9],<br> [[10,11,12], 13, 14]<br>];<br>arr[3]; // equals [[10,11,12], 13, 14]<br>arr[3][0]; // equals [10,11,12]<br>arr[3][0][1]; // equals 11</blockquote>",
|
||||
"<strong>Note</strong><br>There shouldn't be any spaces between the array name and the square brackets, like <code>array [0][0]</code> and even this <code>array [0] [0]</code> is not allowed. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.",
|
||||
"<hr>",
|
||||
"Using bracket notation select an element from <code>myArray</code> such that <code>myData</code> is equal to <code>8</code>."
|
||||
@ -2544,7 +2544,7 @@
|
||||
"description": [
|
||||
"Una manera de pensar un vector <dfn>multi-dimensional</dfn>, es como un <em>vector de vectores</em>. Cuando usas corchetes para acceder a tu vector, el primer conjunto de brackets se refiere a las entradas en el vector más externo y cada nivel subsecuente de brackets se refiere al siguiente nivel de vectores internos.",
|
||||
"<strong>Ejemplo</strong>",
|
||||
"<blockquote>var vec = [<br> [1,2,3],<br> [4,5,6],<br> [7,8,9],<br> [[10,11,12], 13, 14]<br>];<br>vec[0]; // es igual [1,2,3]<br>vec[1][2]; // es igual 6<br>vec[3][0][1]; // es igual 11</blockquote>",
|
||||
"<blockquote>var vec = [<br> [1,2,3],<br> [4,5,6],<br> [7,8,9],<br> [[10,11,12], 13, 14]<br>];<br>vec[0]; // es igual [1,2,3]<br>vec[1][2]; // es igual 6<br>vec[3][0][1]; // es igual 11</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Lee de <code>myArray</code> usando la notación corchete de modo que myData sea igual a <code>8</code>"
|
||||
]
|
||||
@ -2901,7 +2901,7 @@
|
||||
"description": [
|
||||
"In JavaScript, we can divide up our code into reusable parts called <dfn>functions</dfn>.",
|
||||
"Here's an example of a function:",
|
||||
"<blockquote>function functionName() {<br> console.log(\"Hello World\");<br>}</blockquote>",
|
||||
"<blockquote>function functionName() {<br> console.log(\"Hello World\");<br>}</blockquote>",
|
||||
"You can call or <dfn>invoke</dfn> this function by using its name followed by parentheses, like this:",
|
||||
"<code>functionName();</code>",
|
||||
"Each time the function is called it will print out the message <code>\"Hello World\"</code> on the dev console. All of the code between the curly braces will be executed every time the function is called.",
|
||||
@ -2998,7 +2998,7 @@
|
||||
"description": [
|
||||
"<dfn>Parameters</dfn> are variables that act as placeholders for the values that are to be input to a function when it is called. When a function is defined, it is typically defined along with one or more parameters. The actual values that are input (or <dfn>\"passed\"</dfn>) into a function when it is called are known as <dfn>arguments</dfn>.",
|
||||
"Here is a function with two parameters, <code>param1</code> and <code>param2</code>:",
|
||||
"<blockquote>function testFun(param1, param2) {<br> console.log(param1, param2);<br>}</blockquote>",
|
||||
"<blockquote>function testFun(param1, param2) {<br> console.log(param1, param2);<br>}</blockquote>",
|
||||
"Then we can call <code>testFun</code>:",
|
||||
"<code>testFun(\"Hello\", \"World\");</code>",
|
||||
"We have passed two arguments, <code>\"Hello\"</code> and <code>\"World\"</code>. Inside the function, <code>param1</code> will equal \"Hello\" and <code>param2</code> will equal \"World\". Note that you could call <code>testFun</code> again with different arguments and the parameters would take on the value of the new arguments.",
|
||||
@ -3034,7 +3034,7 @@
|
||||
"description": [
|
||||
"Los <dfn>parámetros</dfn> son variables que actúan como marcadores de lugar para los valores que han de ser entrada para una función cuando esta es llamada. Cuando una función es definida, es típicamente definida con uno o más parámetros. Los valores actuales que son entrada (or <dfn>\"pasados\"</dfn>) dentro de una función cuando esta es llamada son concidos como <dfn>argumentos</dfn>.",
|
||||
"Aquí hay una función con dos parámetros, <code>param1</code> y <code>param2</code>:",
|
||||
"<blockquote>function testFun(param1, param2) {<br> console.log(param1, param2);<br>}</blockquote>",
|
||||
"<blockquote>function testFun(param1, param2) {<br> console.log(param1, param2);<br>}</blockquote>",
|
||||
"Entonces nosotros podemos llamar <code>testFun</code>:",
|
||||
"<code>testFun(\"Hello\", \"World\");</code>",
|
||||
"Nosotros hemos pasado dos argumentos, <code>\"Hello\"</code> y <code>\"World\"</code>. Dentro de la función, <code>param1</code> será igual a \"Hello\" y <code>param2</code> será igual a \"World\". Nota que puedes llamar <code>testFun</code> otra vez con argumentos diferentes y los parámetros asumirían el valor de los nuevos argumentos.",
|
||||
@ -3201,7 +3201,7 @@
|
||||
"description": [
|
||||
"Variables which are declared within a function, as well as the function parameters have <dfn>local</dfn> scope. That means, they are only visible within that function.",
|
||||
"Here is a function <code>myTest</code> with a local variable called <code>loc</code>.",
|
||||
"<blockquote>function myTest() {<br> var loc = \"foo\";<br> console.log(loc);<br>}<br>myTest(); // logs \"foo\"<br>console.log(loc); // loc is not defined</blockquote>",
|
||||
"<blockquote>function myTest() {<br> var loc = \"foo\";<br> console.log(loc);<br>}<br>myTest(); // logs \"foo\"<br>console.log(loc); // loc is not defined</blockquote>",
|
||||
"<code>loc</code> is not defined outside of the function.",
|
||||
"<hr>",
|
||||
"Declare a local variable <code>myVar</code> inside <code>myLocalScope</code>. Run the tests and then follow the instructions commented out in the editor.",
|
||||
@ -3228,7 +3228,7 @@
|
||||
"description": [
|
||||
"Las variables que son declaradas dentro de una función, así como los parámetros de la función tienen alcance <dfn>local</dfn>. Eso significa que solo son visibles dentro de esa función.",
|
||||
"Aquí está una función <code>myTest</code> con una variable local llamada <code>loc</code>.",
|
||||
"<blockquote>function myTest() {<br> var loc = \"foo\";<br> console.log(loc);<br>}<br>myTest(); // \"foo\"<br>console.log(loc); // \"undefined\"</blockquote>",
|
||||
"<blockquote>function myTest() {<br> var loc = \"foo\";<br> console.log(loc);<br>}<br>myTest(); // \"foo\"<br>console.log(loc); // \"undefined\"</blockquote>",
|
||||
"<code>loc</code> no está definida fuera de la función.",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Declara una variable local <code>myVar</code> dentro de <code>myLocalScope</code>"
|
||||
@ -3289,7 +3289,7 @@
|
||||
"description": [
|
||||
"It is possible to have both <dfn>local</dfn> and <dfn>global</dfn> variables with the same name. When you do this, the <code>local</code> variable takes precedence over the <code>global</code> variable.",
|
||||
"In this example:",
|
||||
"<blockquote>var someVar = \"Hat\";<br>function myFun() {<br> var someVar = \"Head\";<br> return someVar;<br>}</blockquote>",
|
||||
"<blockquote>var someVar = \"Hat\";<br>function myFun() {<br> var someVar = \"Head\";<br> return someVar;<br>}</blockquote>",
|
||||
"The function <code>myFun</code> will return <code>\"Head\"</code> because the <code>local</code> version of the variable is present.",
|
||||
"<hr>",
|
||||
"Add a local variable to <code>myOutfit</code> function to override the value of <code>outerWear</code> with <code>\"sweater\"</code>."
|
||||
@ -3319,7 +3319,7 @@
|
||||
"description": [
|
||||
"Es posible tener variables <dfn>locales</dfn> y <dfn>globales</dfn> con el mismo nombre. Cuando tu haces esto, la variable <code>local</code> toma precedencia sobre la variable <code>global</code>.",
|
||||
"En este ejemplo:",
|
||||
"<blockquote>var algunaVar = \"Sombrero\";<br>function miFun() {<br> var algunaVar = \"Cabeza\";<br> return algunaVar;<br>}</blockquote>",
|
||||
"<blockquote>var algunaVar = \"Sombrero\";<br>function miFun() {<br> var algunaVar = \"Cabeza\";<br> return algunaVar;<br>}</blockquote>",
|
||||
"La función <code>miFun</code> regresará <code>\"Cabeza\"</code> porque la versión <code>local</code> de la variable tiene precedencia.",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Agrega una variable local a <code>myOutfit</code> para sobreescribir el valor de <code>outerWear</code> con <code>\"sweater\"</code>."
|
||||
@ -3357,7 +3357,7 @@
|
||||
"description": [
|
||||
"We can pass values into a function with <dfn>arguments</dfn>. You can use a <code>return</code> statement to send a value back out of a function.",
|
||||
"<strong>Example</strong>",
|
||||
"<blockquote>function plusThree(num) {<br> return num + 3;<br>}<br>var answer = plusThree(5); // 8</blockquote>",
|
||||
"<blockquote>function plusThree(num) {<br> return num + 3;<br>}<br>var answer = plusThree(5); // 8</blockquote>",
|
||||
"<code>plusThree</code> takes an <dfn>argument</dfn> for <code>num</code> and returns a value equal to <code>num + 3</code>.",
|
||||
"<hr>",
|
||||
"Create a function <code>timesFive</code> that accepts one argument, multiplies it by <code>5</code>, and returns the new value. See the last line in the editor for an example of how you can test your <code>timesFive</code> function."
|
||||
@ -3395,7 +3395,7 @@
|
||||
"description": [
|
||||
"Podemos pasar valores a una función mediante los <dfn>argumentos</dfn>. Puedes usar una sentencia <code>return</code> para enviar un valor de vuelta de una función.",
|
||||
"<strong>Ejemplo</strong>",
|
||||
"<blockquote>function masTres(num) {<br> return num + 3;<br>}<br>var respuesta = masTres(5); // 8</blockquote>",
|
||||
"<blockquote>function masTres(num) {<br> return num + 3;<br>}<br>var respuesta = masTres(5); // 8</blockquote>",
|
||||
"<code>masTres</code> toma un <dfn>argumento</dfn> que es <code>num</code> y retorna un valor igual a <code>num + 3</code>.",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Crea una función <code>timesFive</code> que acepte un argumento, lo multiplique por <code>5</code> y retorne el nuevo valor."
|
||||
@ -3430,7 +3430,7 @@
|
||||
"description": [
|
||||
"A function can include the <code>return</code> statement but it does not have to. In the case that the function doesn't have a <code>return</code> statement, when you call it, the function processes the inner code but the returned value is <code>undefined</code>.",
|
||||
"<strong>Example</strong>",
|
||||
"<blockquote>var sum = 0;<br>function addSum(num) {<br> sum = sum + num;<br>}<br>var returnedValue = addSum(3); // sum will be modified but returned value is undefined</blockquote>",
|
||||
"<blockquote>var sum = 0;<br>function addSum(num) {<br> sum = sum + num;<br>}<br>var returnedValue = addSum(3); // sum will be modified but returned value is undefined</blockquote>",
|
||||
"<code>addSum</code> is a function without a <code>return</code> statement. The function will change the global <code>sum</code> variable but the returned value of the function is <code>undefined</code>",
|
||||
"<hr>",
|
||||
"Create a function <code>addFive</code> without any arguments. This function adds 5 to the <code>sum</code> variable, but its returned value is <code>undefined</code>."
|
||||
@ -3719,9 +3719,9 @@
|
||||
"<code>If</code> statements are used to make decisions in code. The keyword <code>if</code> tells JavaScript to execute the code in the curly braces under certain conditions, defined in the parentheses. These conditions are known as <code>Boolean</code> conditions and they may only be <code>true</code> or <code>false</code>.",
|
||||
"When the condition evaluates to <code>true</code>, the program executes the statement inside the curly braces. When the Boolean condition evaluates to <code>false</code>, the statement inside the curly braces will not execute.",
|
||||
"<strong>Pseudocode</strong>",
|
||||
"<blockquote>if (<i>condition is true</i>) {<br> <i>statement is executed</i><br>}</blockquote>",
|
||||
"<blockquote>if (<i>condition is true</i>) {<br> <i>statement is executed</i><br>}</blockquote>",
|
||||
"<strong>Example</strong>",
|
||||
"<blockquote>function test (myCondition) {<br> if (myCondition) {<br> return \"It was true\";<br> }<br> return \"It was false\";<br>}<br>test(true); // returns \"It was true\"<br>test(false); // returns \"It was false\"</blockquote>",
|
||||
"<blockquote>function test (myCondition) {<br> if (myCondition) {<br> return \"It was true\";<br> }<br> return \"It was false\";<br>}<br>test(true); // returns \"It was true\"<br>test(false); // returns \"It was false\"</blockquote>",
|
||||
"When <code>test</code> is called with a value of <code>true</code>, the <code>if</code> statement evaluates <code>myCondition</code> to see if it is <code>true</code> or not. Since it is <code>true</code>, the function returns <code>\"It was true\"</code>. When we call <code>test</code> with a value of <code>false</code>, <code>myCondition</code> is <em>not</em> <code>true</code> and the statement in the curly braces is not executed and the function returns <code>\"It was false\"</code>.",
|
||||
"<hr>",
|
||||
"Create an <code>if</code> statement inside the function to return <code>\"Yes, that was true\"</code> if the parameter <code>wasThatTrue</code> is <code>true</code> and return <code>\"No, that was false\"</code> otherwise."
|
||||
@ -3809,10 +3809,10 @@
|
||||
"description": [
|
||||
"There are many <dfn>Comparison Operators</dfn> in JavaScript. All of these operators return a boolean <code>true</code> or <code>false</code> value.",
|
||||
"The most basic operator is the equality operator <code>==</code>. The equality operator compares two values and returns <code>true</code> if they're equivalent or <code>false</code> if they are not. Note that equality is different from assignment (<code>=</code>), which assigns the value at the right of the operator to a variable in the left.",
|
||||
"<blockquote>function equalityTest(myVal) {<br> if (myVal == 10) {<br> return \"Equal\";<br> }<br> return \"Not Equal\";<br>}</blockquote>",
|
||||
"<blockquote>function equalityTest(myVal) {<br> if (myVal == 10) {<br> return \"Equal\";<br> }<br> return \"Not Equal\";<br>}</blockquote>",
|
||||
"If <code>myVal</code> is equal to <code>10</code>, the equality operator returns <code>true</code>, so the code in the curly braces will execute, and the function will return <code>\"Equal\"</code>. Otherwise, the function will return <code>\"Not Equal\"</code>.",
|
||||
"In order for JavaScript to compare two different <code>data types</code> (for example, <code>numbers</code> and <code>strings</code>), it must convert one type to another. This is known as \"Type Coercion\". Once it does, however, it can compare terms as follows:",
|
||||
"<blockquote> 1 == 1 // true<br> 1 == 2 // false<br> 1 == '1' // true<br> \"3\" == 3 // true</blockquote>",
|
||||
"<blockquote>1 == 1 // true<br>1 == 2 // false<br>1 == '1' // true<br>\"3\" == 3 // true</blockquote>",
|
||||
"<hr>",
|
||||
"Add the <code>equality operator</code> to the indicated line so that the function will return \"Equal\" when <code>val</code> is equivalent to <code>12</code>"
|
||||
],
|
||||
@ -3845,10 +3845,10 @@
|
||||
"description": [
|
||||
"Hay muchos <dfn>Operadores de Comparación</dfn> en JavaScript. Todos estos operadores retornan un valor booleano <code>true</code>(verdadero) o <code>false</code>(falso).",
|
||||
"El operador más básico es el operador de igualdad <code>==</code>. El operador de igualdad compara dos valores y retorna <code>true</code> si son equivalentes o <code>false</code> si no lo son. Nota que la igualdad es diferente de la asignación (<code>=</code>), la cual asigna el valor a la derecha del operador a la variable en la izquierda.",
|
||||
"<blockquote>function pruebaIgualdad(miVal) {<br> if (miVal == 10) {<br> return \"Igual\";<br> }<br> return \"No Es Igual\";<br>}</blockquote>",
|
||||
"<blockquote>function pruebaIgualdad(miVal) {<br> if (miVal == 10) {<br> return \"Igual\";<br> }<br> return \"No Es Igual\";<br>}</blockquote>",
|
||||
"Si <code>miVal</code> es igual a <code>10</code>, el operador de igualdad retornará <code>true</code>(verdadero), así el código entre llaves será ejecutado y la función retornará <code>\"Equal\"</code>. De otra manera, la función retornará <code>\"Not Equal\"</code>.",
|
||||
"Para que JavaScript pueda comparar dos <code>tipos de datos</code> diferentes (por ejemplo, <code>números</code> y <code>cadenas de texto</code>), debe convertir un tipo a otro. Una vez que lo hace, sin embargo, puede comparar términos de la siguiente manera:",
|
||||
"<blockquote> 1 == 1 // true<br> 1 == 2 // false<br> 1 == '1' // true<br> \"3\" == 3 // true</blockquote>",
|
||||
"<blockquote>1 == 1 // true<br>1 == 2 // false<br>1 == '1' // true<br>\"3\" == 3 // true</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Agrega el <code>operador de igualdad</code> a la línea indicada de manera que la función retornará \"Equal\" cuando <code>val</code> sea equivalente a <code>12</code>"
|
||||
]
|
||||
@ -4339,7 +4339,7 @@
|
||||
"description": [
|
||||
"The <dfn>less than</dfn> operator (<code><</code>) compares the values of two numbers. If the number to the left is less than the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>. Like the equality operator, <dfn>less than</dfn> operator converts data types while comparing.",
|
||||
"<strong>Examples</strong>",
|
||||
"<blockquote> 2 < 5 // true<br>'3' < 7 // true<br> 5 < 5 // false<br> 3 < 2 // false<br>'8' < 4 // false</blockquote>",
|
||||
"<blockquote>2 < 5 // true<br>'3' < 7 // true<br>5 < 5 // false<br>3 < 2 // false<br>'8' < 4 // false</blockquote>",
|
||||
"<hr>",
|
||||
"Add the <code>less than</code> operator to the indicated lines so that the return statements make sense."
|
||||
],
|
||||
@ -4384,7 +4384,7 @@
|
||||
"description": [
|
||||
"El operador <dfn>menor que</dfn> (<code><</code>) compara los valores de dos números. Si el número a la izquierda es menor que el número de la derecha, este retorna <code>true</code>(verdadero). De otra manera, este retorna <code>false</code>(falso). Como el operador de igualdad, el operador <dfn>menor que</dfn> convierte tipos de datos mientra compara.",
|
||||
"<strong>Ejemplos</strong>",
|
||||
"<blockquote> 2 < 5 // true<br>'3' < 7 // true<br> 5 < 5 // false<br> 3 < 2 // false<br>'8' < 4 // false</blockquote>",
|
||||
"<blockquote>2 < 5 // true<br>'3' < 7 // true<br>5 < 5 // false<br>3 < 2 // false<br>'8' < 4 // false</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Agregar el operador <code>menor que</code> a las líneas indicadas de modo que las sentencias de retorno tengan sentido."
|
||||
]
|
||||
@ -4422,7 +4422,7 @@
|
||||
"description": [
|
||||
"The <code>less than or equal to</code> operator (<code><=</code>) compares the values of two numbers. If the number to the left is less than or equal to the number to the right, it returns <code>true</code>. If the number on the left is greater than the number on the right, it returns <code>false</code>. Like the equality operator, <code>less than or equal to</code> converts data types.",
|
||||
"<strong>Examples</strong>",
|
||||
"<blockquote> 4 <= 5 // true<br>'7' <= 7 // true<br> 5 <= 5 // true<br> 3 <= 2 // false<br>'8' <= 4 // false</blockquote>",
|
||||
"<blockquote>4 <= 5 // true<br>'7' <= 7 // true<br>5 <= 5 // true<br>3 <= 2 // false<br>'8' <= 4 // false</blockquote>",
|
||||
"<hr>",
|
||||
"Add the <code>less than or equal to</code> operator to the indicated lines so that the return statements make sense."
|
||||
],
|
||||
@ -4471,7 +4471,7 @@
|
||||
"description": [
|
||||
"El operador <code>menor o igual</code> (<code><=</code>) compara los valores de dos números. Si el número a la izquierda es menor o igual que el número de la derecha, este retorna <code>true</code>(verdadero). Si el número a la izquierda es mayor que el número de la derecha, este retorna <code>false</code>(falso). Al igual que el operador de igualdad, <code>menor o igual</code> convierte tipos de datos.",
|
||||
"<strong>Ejemplos</strong>",
|
||||
"<blockquote> 4 <= 5 // true<br>'7' <= 7 // true<br> 5 <= 5 // true<br> 3 <= 2 // false<br>'8' <= 4 // false</blockquote>",
|
||||
"<blockquote> 4 <= 5 // true<br>'7' <= 7 // true<br> 5 <= 5 // true<br> 3 <= 2 // false<br>'8' <= 4 // false</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Agrega el operador <code>menor o igual</code> a las líneas indicadas de modo que las sentencias de retorno tengan sentido."
|
||||
]
|
||||
@ -4510,9 +4510,9 @@
|
||||
"description": [
|
||||
"Sometimes you will need to test more than one thing at a time. The <dfn>logical and</dfn> operator (<code>&&</code>) returns <code>true</code> if and only if the <dfn>operands</dfn> to the left and right of it are true.",
|
||||
"The same effect could be achieved by nesting an if statement inside another if:",
|
||||
"<blockquote>if (num > 5) {<br> if (num < 10) {<br> return \"Yes\";<br> }<br>}<br>return \"No\";</blockquote>",
|
||||
"<blockquote>if (num > 5) {<br> if (num < 10) {<br> return \"Yes\";<br> }<br>}<br>return \"No\";</blockquote>",
|
||||
"will only return \"Yes\" if <code>num</code> is greater than <code>5</code> and less than <code>10</code>. The same logic can be written as:",
|
||||
"<blockquote>if (num > 5 && num < 10) {<br> return \"Yes\";<br>}<br>return \"No\";</blockquote>",
|
||||
"<blockquote>if (num > 5 && num < 10) {<br> return \"Yes\";<br>}<br>return \"No\";</blockquote>",
|
||||
"<hr>",
|
||||
"Combine the two if statements into one statement which will return <code>\"Yes\"</code> if <code>val</code> is less than or equal to <code>50</code> and greater than or equal to <code>25</code>. Otherwise, will return <code>\"No\"</code>."
|
||||
],
|
||||
@ -4569,9 +4569,9 @@
|
||||
"description": [
|
||||
"A veces necesitarás probar más de una cosa a la vez. El operador <dfn>lógico y</dfn> (<code>&&</code>) retorna <code>true</code>(verdadero) si y solo si los <dfn>operandos</dfn> a la izquierda y derecha de este son verdaderos.",
|
||||
"El mismo efecto podría lograrse anidando una sentencia if dentro de otro if:",
|
||||
"<blockquote>if (num > 5) {<br> if (num < 10) {<br> return \"Yes\";<br> }<br>}<br>return \"No\";</blockquote>",
|
||||
"<blockquote>if (num > 5) {<br> if (num < 10) {<br> return \"Yes\";<br> }<br>}<br>return \"No\";</blockquote>",
|
||||
"solo retornará \"Yes\" si <code>num</code> está entre <code>6</code> y <code>9</code> (6 y 9 incluidos). La misma lógica puede ser escrita como:",
|
||||
"<blockquote>if (num > 5 && num < 10) {<br> return \"Yes\";<br>}<br>return \"No\";</blockquote>",
|
||||
"<blockquote>if (num > 5 && num < 10) {<br> return \"Yes\";<br>}<br>return \"No\";</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Combina las dos sentencias if dentro de una sentencia la cual retornará <code>\"Yes\"</code> si <code>val</code> es menor o igual a <code>50</code> y mayor o igual a <code>25</code>. De otra manera, retornará <code>\"No\"</code>."
|
||||
]
|
||||
@ -4611,9 +4611,9 @@
|
||||
"The <dfn>logical or</dfn> operator (<code>||</code>) returns <code>true</code> if either of the <dfn>operands</dfn> is <code>true</code>. Otherwise, it returns <code>false</code>.",
|
||||
"The <dfn>logical or</dfn> operator is composed of two pipe symbols (<code>|</code>). This can typically be found between your Backspace and Enter keys.",
|
||||
"The pattern below should look familiar from prior waypoints:",
|
||||
"<blockquote>if (num > 10) {<br> return \"No\";<br>}<br>if (num < 5) {<br> return \"No\";<br>}<br>return \"Yes\";</blockquote>",
|
||||
"<blockquote>if (num > 10) {<br> return \"No\";<br>}<br>if (num < 5) {<br> return \"No\";<br>}<br>return \"Yes\";</blockquote>",
|
||||
"will return \"Yes\" only if <code>num</code> is between <code>5</code> and <code>10</code> (5 and 10 included). The same logic can be written as:",
|
||||
"<blockquote>if (num > 10 || num < 5) {<br> return \"No\";<br>}<br>return \"Yes\";</blockquote>",
|
||||
"<blockquote>if (num > 10 || num < 5) {<br> return \"No\";<br>}<br>return \"Yes\";</blockquote>",
|
||||
"<hr>",
|
||||
"Combine the two <code>if</code> statements into one statement which returns <code>\"Outside\"</code> if <code>val</code> is not between <code>10</code> and <code>20</code>, inclusive. Otherwise, return <code>\"Inside\"</code>."
|
||||
],
|
||||
@ -4670,9 +4670,9 @@
|
||||
"description": [
|
||||
"El operador <dfn>lógico o</dfn> (<code>||</code>) retorna <code>true</code>(verdadero) si cualquiera de los <dfn>operandos</dfn> es <code>true</code>(verdadero). De otra manera, este retorna <code>false</code>(falso).",
|
||||
"El patrón de abajo debería ser familiar de los puntos de referencia anteriores:",
|
||||
"<blockquote>if (num > 10) {<br> return \"No\";<br>}<br>if (num < 5) {<br> return \"No\";<br>}<br>return \"Yes\";</blockquote>",
|
||||
"<blockquote>if (num > 10) {<br> return \"No\";<br>}<br>if (num < 5) {<br> return \"No\";<br>}<br>return \"Yes\";</blockquote>",
|
||||
"retornará \"Yes\" solo si <code>num</code> está entre <code>5</code> y <code>10</code> (5 y 10 incluidos). La misma lógica puede ser escrita como:",
|
||||
"<blockquote>if (num > 10 || num < 5) {<br> return \"No\";<br>}<br>return \"Yes\";</blockquote>",
|
||||
"<blockquote>if (num > 10 || num < 5) {<br> return \"No\";<br>}<br>return \"Yes\";</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Combina las dos sentencias <code>if</code> dentro de una sentencia la cual retorne <code>\"Outside\"</code> si <code>val</code> no está entre <code>10</code> y <code>20</code>, inclusive. De otra manera, retorna <code>\"Inside\"</code>."
|
||||
]
|
||||
@ -4712,7 +4712,7 @@
|
||||
"title": "Introducing Else Statements",
|
||||
"description": [
|
||||
"When a condition for an <code>if</code> statement is true, the block of code following it is executed. What about when that condition is false? Normally nothing would happen. With an <code>else</code> statement, an alternate block of code can be executed.",
|
||||
"<blockquote>if (num > 10) {<br> return \"Bigger than 10\";<br>} else {<br> return \"10 or Less\";<br>}</blockquote>",
|
||||
"<blockquote>if (num > 10) {<br> return \"Bigger than 10\";<br>} else {<br> return \"10 or Less\";<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Combine the <code>if</code> statements into a single <code>if/else</code> statement."
|
||||
],
|
||||
@ -4756,7 +4756,7 @@
|
||||
"title": "Introducción de las sentencias else",
|
||||
"description": [
|
||||
"Cuando una condición de una sentencia <code>if</code> es verdadera, el siguiente bloque de código es ejecutado. ¿Y cuando esa condición es falsa? Normalmente nada pasaría. Con una sentencia <code>else</code>(además), un bloque alternativo de código puede ser ejecutado.",
|
||||
"<blockquote>if (num > 10) {<br> return \"Más grande que 10\";<br>} else {<br> return \"10 o Menos\";<br>}</blockquote>",
|
||||
"<blockquote>if (num > 10) {<br> return \"Más grande que 10\";<br>} else {<br> return \"10 o Menos\";<br>}</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Combina las sentencias <code>if</code> dentro de una sola sentencia <code>if/else</code>."
|
||||
]
|
||||
@ -4798,7 +4798,7 @@
|
||||
"title": "Introducing Else If Statements",
|
||||
"description": [
|
||||
"If you have multiple conditions that need to be addressed, you can chain <code>if</code> statements together with <code>else if</code> statements.",
|
||||
"<blockquote>if (num > 15) {<br> return \"Bigger than 15\";<br>} else if (num < 5) {<br> return \"Smaller than 5\";<br>} else {<br> return \"Between 5 and 15\";<br>}</blockquote>",
|
||||
"<blockquote>if (num > 15) {<br> return \"Bigger than 15\";<br>} else if (num < 5) {<br> return \"Smaller than 5\";<br>} else {<br> return \"Between 5 and 15\";<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Convert the logic to use <code>else if</code> statements."
|
||||
],
|
||||
@ -4842,7 +4842,7 @@
|
||||
"title": "Introducción de las sentencias else if",
|
||||
"description": [
|
||||
"Si tienes múltiples condiciones que deben abordarse, puedes encadenar sentencias <code>if</code> juntas con sentencias <code>else if</code>.",
|
||||
"<blockquote>if (num > 15) {<br> return \"Más grande que 15\";<br>} else if (num < 5) {<br> return \"Más pequeño que 5\";<br>} else {<br> return \"Entre 5 y 15\";<br>}</blockquote>",
|
||||
"<blockquote>if (num > 15) {<br> return \"Más grande que 15\";<br>} else if (num < 5) {<br> return \"Más pequeño que 5\";<br>} else {<br> return \"Entre 5 y 15\";<br>}</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Convierte la lógica para usar sentencias <code>else if</code>."
|
||||
]
|
||||
@ -4883,9 +4883,9 @@
|
||||
"The function is executed from top to bottom so you will want to be careful of what statement comes first.",
|
||||
"Take these two functions as an example.",
|
||||
"Here's the first:",
|
||||
"<blockquote>function foo(x) {<br> if (x < 1) {<br> return \"Less than one\";<br> } else if (x < 2) {<br> return \"Less than two\";<br> } else {<br> return \"Greater than or equal to two\";<br> }<br>}</blockquote>",
|
||||
"<blockquote>function foo(x) {<br> if (x < 1) {<br> return \"Less than one\";<br> } else if (x < 2) {<br> return \"Less than two\";<br> } else {<br> return \"Greater than or equal to two\";<br> }<br>}</blockquote>",
|
||||
"And the second just switches the order of the statements:",
|
||||
"<blockquote>function bar(x) {<br> if (x < 2) {<br> return \"Less than two\";<br> } else if (x < 1) {<br> return \"Less than one\";<br> } else {<br> return \"Greater than or equal to two\";<br> }<br>}</blockquote>",
|
||||
"<blockquote>function bar(x) {<br> if (x < 2) {<br> return \"Less than two\";<br> } else if (x < 1) {<br> return \"Less than one\";<br> } else {<br> return \"Greater than or equal to two\";<br> }<br>}</blockquote>",
|
||||
"While these two functions look nearly identical if we pass a number to both we get different outputs.",
|
||||
"<blockquote>foo(0) // \"Less than one\"<br>bar(0) // \"Less than two\"</blockquote>",
|
||||
"<hr>",
|
||||
@ -4917,9 +4917,9 @@
|
||||
"El ciclo es ejecutado de arriba hacia abajo por lo que tendrás que ser cuidadoso de cual sentencia va primero.",
|
||||
"Toma estas dos funciones como ejemplo.",
|
||||
"Aquí está la primera:",
|
||||
"<blockquote>function foo(x) {<br> if (x < 1) {<br> return \"Menor que uno\";<br> } else if (x < 2) {<br> return \"Menor que dos\";<br> } else {<br> return \"Mayor o igual a dos\";<br> }<br>}</blockquote>",
|
||||
"<blockquote>function foo(x) {<br> if (x < 1) {<br> return \"Menor que uno\";<br> } else if (x < 2) {<br> return \"Menor que dos\";<br> } else {<br> return \"Mayor o igual a dos\";<br> }<br>}</blockquote>",
|
||||
"Y el segundo solo cambia el orden de las sentencias:",
|
||||
"<blockquote>function bar(x) {<br> if (x < 2) {<br> return \"Menor que dos\";<br> } else if (x < 1) {<br> return \"Menor que uno\";<br> } else {<br> return \"Mayor o igual a dos\";<br> }<br>}</blockquote>",
|
||||
"<blockquote>function bar(x) {<br> if (x < 2) {<br> return \"Menor que dos\";<br> } else if (x < 1) {<br> return \"Menor que uno\";<br> } else {<br> return \"Mayor o igual a dos\";<br> }<br>}</blockquote>",
|
||||
"Mientras esas dos funciones parecen casi idénticas, si nosotros pasamos un número a ambas obtendremos diferentes salidas.",
|
||||
"<blockquote>foo(0) // \"Menor que uno\"<br>bar(0) // \"Menor que dos\"</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
@ -4956,7 +4956,7 @@
|
||||
"title": "Chaining If Else Statements",
|
||||
"description": [
|
||||
"<code>if/else</code> statements can be chained together for complex logic. Here is <dfn>pseudocode</dfn> of multiple chained <code>if</code> / <code>else if</code> statements:",
|
||||
"<blockquote>if (<em>condition1</em>) {<br> <em>statement1</em><br>} else if (<em>condition2</em>) {<br> <em>statement2</em><br>} else if (<em>condition3</em>) {<br> <em>statement3</em><br>. . .<br>} else {<br> <em>statementN</em><br>}</blockquote>",
|
||||
"<blockquote>if (<em>condition1</em>) {<br> <em>statement1</em><br>} else if (<em>condition2</em>) {<br> <em>statement2</em><br>} else if (<em>condition3</em>) {<br> <em>statement3</em><br>. . .<br>} else {<br> <em>statementN</em><br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Write chained <code>if</code>/<code>else if</code> statements to fulfill the following conditions:",
|
||||
"<code>num < 5</code> - return \"Tiny\"<br><code>num < 10</code> - return \"Small\"<br><code>num < 15</code> - return \"Medium\"<br><code>num < 20</code> - return \"Large\"<br><code>num >= 20</code> - return \"Huge\""
|
||||
@ -5025,7 +5025,7 @@
|
||||
"title": "Encadenamiento de sentencias else if",
|
||||
"description": [
|
||||
"Las sentencias <code>if/else</code>(si/de lo contrario) pueden ser encadenadas juntas por una lógica compleja. Aquí está el <dfn>pseudocódigo</dfn> de múltiples sentencias <code>if</code> / <code>else if</code> encadenadas:",
|
||||
"<blockquote>if (<em>condicion1</em>) {<br> <em>sentencias1</em><br>} else if (<em>condicion2</em>) {<br> <em>sentencias2</em><br>} else if (<em>condicion3</em>) {<br> <em>sentencias3</em><br>. . .<br>} else {<br> <em>sentenciasN</em><br>}</blockquote>",
|
||||
"<blockquote>if (<em>condicion1</em>) {<br> <em>sentencias1</em><br>} else if (<em>condicion2</em>) {<br> <em>sentencias2</em><br>} else if (<em>condicion3</em>) {<br> <em>sentencias3</em><br>. . .<br>} else {<br> <em>sentenciasN</em><br>}</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Escribe sentencias <code>if</code>/<code>else if</code> encadenadas para cumplir las siguientes condiciones:",
|
||||
"<code>num < 5</code> - retorna \"Tiny\"<br><code>num < 10</code> - retorna \"Small\"<br><code>num < 15</code> - retorna \"Medium\"<br><code>num < 20</code> - retorna \"Large\"<br><code>num >= 20</code> - retorna \"Huge\""
|
||||
@ -5154,7 +5154,7 @@
|
||||
"description": [
|
||||
"If you have many options to choose from, use a <code>switch</code> statement. A <code>switch</code> statement tests a value and can have many <code>case</code> statements which define various possible values. Statements are executed from the first matched <code>case</code> value until a <code>break</code> is encountered.",
|
||||
"Here is a <dfn>pseudocode</dfn> example:",
|
||||
"<blockquote>switch(num) {<br> case value1:<br> statement1;<br> break;<br> case value2:<br> statement2;<br> break;<br>...<br> case valueN:<br> statementN;<br> break;<br>}</blockquote>",
|
||||
"<blockquote>switch(num) {<br> case value1:<br> statement1;<br> break;<br> case value2:<br> statement2;<br> break;<br>...<br> case valueN:<br> statementN;<br> break;<br>}</blockquote>",
|
||||
"<code>case</code> values are tested with strict equality (<code>===</code>). The <code>break</code> tells JavaScript to stop executing statements. If the <code>break</code> is omitted, the next statement will be executed.",
|
||||
"<hr>",
|
||||
"Write a switch statement which tests <code>val</code> and sets <code>answer</code> for the following conditions:<br><code>1</code> - \"alpha\"<br><code>2</code> - \"beta\"<br><code>3</code> - \"gamma\"<br><code>4</code> - \"delta\""
|
||||
@ -5199,7 +5199,7 @@
|
||||
"description": [
|
||||
"Si tienes varias opciones para elegir, usa una sentencia <code>switch</code>. Una sentencia <code>switch</code> prueba un valor y puede tener varias sentencias <code>case</code> las cuales definen varios posibles valores. Las sentencias son ejecutadas desde el primer valor <code>case</code> igualado hasta que se encuentr un <code>break</code>.",
|
||||
"Aquí hay un <dfn>pseudocódigo</dfn> de ejemplo:",
|
||||
"<blockquote>switch(num) {<br> case valor1:<br> sentencia1;<br> break;<br> case valor2:<br> sentencia2;<br> break;<br>...<br> case valorN:<br> sentenciaN;<br> break;<br>}</blockquote>",
|
||||
"<blockquote>switch(num) {<br> case valor1:<br> sentencia1;<br> break;<br> case valor2:<br> sentencia2;<br> break;<br>...<br> case valorN:<br> sentenciaN;<br> break;<br>}</blockquote>",
|
||||
"Los valores <code>case</code> son probados con estricta igualdad (<code>===</code>). El <code>break</code> le dice a JavaScript que pare la ejecución del bloque de sentencias en el que está. Si se omite <code>break</code>, se ejecutará la siguiente sentencia.",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Escribe una sentencia <code>switch</code> que pruebe <code>val</code> y establezca <code>answer</code> para las siguientes condiciones:<br><code>1</code> - \"alpha\"<br><code>2</code> - \"beta\"<br><code>3</code> - \"gamma\"<br><code>4</code> - \"delta\""
|
||||
@ -5237,7 +5237,7 @@
|
||||
"description": [
|
||||
"In a <code>switch</code> statement you may not be able to specify all possible values as <code>case</code> statements. Instead, you can add the <code>default</code> statement which will be executed if no matching <code>case</code> statements are found. Think of it like the final <code>else</code> statement in an <code>if/else</code> chain.",
|
||||
"A <code>default</code> statement should be the last case.",
|
||||
"<blockquote>switch (num) {<br> case value1:<br> statement1;<br> break;<br> case value2:<br> statement2;<br> break;<br>...<br> default:<br> defaultStatement;<br> break;<br>}</blockquote>",
|
||||
"<blockquote>switch (num) {<br> case value1:<br> statement1;<br> break;<br> case value2:<br> statement2;<br> break;<br>...<br> default:<br> defaultStatement;<br> break;<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Write a switch statement to set <code>answer</code> for the following conditions:<br><code>\"a\"</code> - \"apple\"<br><code>\"b\"</code> - \"bird\"<br><code>\"c\"</code> - \"cat\"<br><code>default</code> - \"stuff\""
|
||||
],
|
||||
@ -5286,7 +5286,7 @@
|
||||
"description": [
|
||||
"En una sentencia <code>switch</code> puede que no seas capaz de especificar todos los posibles valores en las sentencias <code>case</code>. En su lugar, puedes agregar la sentencia <code>default</code> la cual será ejecutada si no es encontrada ninguna coincidencia con alguna sentencia <code>case</code>. Piensa en esto como la última sentencia <code>else</code> en una cadena <code>if/else</code>.",
|
||||
"Una sentencia <code>default</code> debería ser el último caso.",
|
||||
"<blockquote>switch(num) {<br> case valor1:<br> sentencia1;<br> break;<br> case valor2:<br> sentencia2;<br> break;<br>...<br> default:<br> sentenciaDefault;<br>}</blockquote>",
|
||||
"<blockquote>switch(num) {<br> case valor1:<br> sentencia1;<br> break;<br> case valor2:<br> sentencia2;<br> break;<br>...<br> default:<br> sentenciaDefault;<br>}</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Escribe una sentencia switch para establecer <code>answer</code> para las siguientes condiciones:<br><code>\"a\"</code> - \"apple\"<br><code>\"b\"</code> - \"bird\"<br><code>\"c\"</code> - \"cat\"<br><code>default</code> - \"stuff\""
|
||||
]
|
||||
@ -5323,7 +5323,7 @@
|
||||
"title": "Multiple Identical Options in Switch Statements",
|
||||
"description": [
|
||||
"If the <code>break</code> statement is omitted from a <code>switch</code> statement's <code>case</code>, the following <code>case</code> statement(s) are executed until a <code>break</code> is encountered. If you have multiple inputs with the same output, you can represent them in a <code>switch</code> statement like this:",
|
||||
"<blockquote>switch(val) {<br> case 1:<br> case 2:<br> case 3:<br> result = \"1, 2, or 3\";<br> break;<br> case 4:<br> result = \"4 alone\";<br>}</blockquote>",
|
||||
"<blockquote>switch(val) {<br> case 1:<br> case 2:<br> case 3:<br> result = \"1, 2, or 3\";<br> break;<br> case 4:<br> result = \"4 alone\";<br>}</blockquote>",
|
||||
"Cases for 1, 2, and 3 will all produce the same result.",
|
||||
"<hr>",
|
||||
"Write a switch statement to set <code>answer</code> for the following ranges:<br><code>1-3</code> - \"Low\"<br><code>4-6</code> - \"Mid\"<br><code>7-9</code> - \"High\"",
|
||||
@ -5385,7 +5385,7 @@
|
||||
"title": "Múltiples opciones idénticas en una sentencias switch",
|
||||
"description": [
|
||||
"Si la sentencia <code>break</code> es omitida de una sentencia <code>case</code> de un <code>switch</code>, las siguientes sentencias <code>case</code> son ejecutadas hasta que sea encontrado un <code>break</code>. Si tienes multiples entradas con la misma salida, puede representarlas en una sentencia <code>switch</code> así:",
|
||||
"<blockquote>switch(val) {<br> case 1:<br> case 2:<br> case 3:<br> result = \"1, 2, or 3\";<br> break;<br> case 4:<br> result = \"4 alone\";<br>}</blockquote>",
|
||||
"<blockquote>switch(val) {<br> case 1:<br> case 2:<br> case 3:<br> result = \"1, 2, or 3\";<br> break;<br> case 4:<br> result = \"4 alone\";<br>}</blockquote>",
|
||||
"Los casos 1, 2, y 3 producirán el mismo resultado.",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Escribe una sentencia <code>switch</code> para establecer <code>answer</code> para los siguientes rangos:<br><code>1-3</code> - \"Low\"<br><code>4-6</code> - \"Mid\"<br><code>7-9</code> - \"High\"",
|
||||
@ -5423,9 +5423,9 @@
|
||||
"title": "Replacing If Else Chains with Switch",
|
||||
"description": [
|
||||
"If you have many options to choose from, a <code>switch</code> statement can be easier to write than many chained <code>if</code>/<code>else if</code> statements. The following:",
|
||||
"<blockquote>if (val === 1) {<br> answer = \"a\";<br>} else if (val === 2) {<br> answer = \"b\";<br>} else {<br> answer = \"c\";<br>}</blockquote>",
|
||||
"<blockquote>if (val === 1) {<br> answer = \"a\";<br>} else if (val === 2) {<br> answer = \"b\";<br>} else {<br> answer = \"c\";<br>}</blockquote>",
|
||||
"can be replaced with:",
|
||||
"<blockquote>switch(val) {<br> case 1:<br> answer = \"a\";<br> break;<br> case 2:<br> answer = \"b\";<br> break;<br> default:<br> answer = \"c\";<br>}</blockquote>",
|
||||
"<blockquote>switch(val) {<br> case 1:<br> answer = \"a\";<br> break;<br> case 2:<br> answer = \"b\";<br> break;<br> default:<br> answer = \"c\";<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Change the chained <code>if</code>/<code>else if</code> statements into a <code>switch</code> statement."
|
||||
],
|
||||
@ -5481,9 +5481,9 @@
|
||||
"title": "Reemplazar cadenas if else con switch",
|
||||
"description": [
|
||||
"Si tienes varias opciones para elegir, una sentencia <code>switch</code> puede ser más fácil de escribir que varias sentencias <code>if</code>/<code>if else</code> anidadas. Lo siguiente:",
|
||||
"<blockquote>if (val === 1) {<br> respuesta = \"a\";<br>} else if (val === 2) {<br> respuesta = \"b\";<br>} else {<br> respuesta = \"c\";<br>}</blockquote>",
|
||||
"<blockquote>if (val === 1) {<br> respuesta = \"a\";<br>} else if (val === 2) {<br> respuesta = \"b\";<br>} else {<br> respuesta = \"c\";<br>}</blockquote>",
|
||||
"puede ser reemplazado con:",
|
||||
"<blockquote>switch(val) {<br> case 1:<br> respuesta = \"a\";<br> break;<br> case 2:<br> respuesta = \"b\";<br> break;<br> default:<br> respuesta = \"c\";<br>}</blockquote>",
|
||||
"<blockquote>switch(val) {<br> case 1:<br> respuesta = \"a\";<br> break;<br> case 2:<br> respuesta = \"b\";<br> break;<br> default:<br> respuesta = \"c\";<br>}</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Cambia las sentencias <code>if</code>/<code>if else</code> anidadas dentro de una sentencia <code>switch</code>."
|
||||
]
|
||||
@ -5530,9 +5530,9 @@
|
||||
"description": [
|
||||
"You may recall from <a href=\"waypoint-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:",
|
||||
"<blockquote>function isEqual(a,b) {<br> if (a === b) {<br> return true;<br> } else {<br> return false;<br> }<br>}</blockquote>",
|
||||
"<blockquote>function isEqual(a,b) {<br> if (a === b) {<br> return true;<br> } else {<br> return false;<br> }<br>}</blockquote>",
|
||||
"But there's a better way to do this. Since <code>===</code> returns <code>true</code> or <code>false</code>, we can return the result of the comparison:",
|
||||
"<blockquote>function isEqual(a,b) {<br> return a === b;<br>}</blockquote>",
|
||||
"<blockquote>function isEqual(a,b) {<br> return a === b;<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Fix the function <code>isLess</code> to remove the <code>if/else</code> statements."
|
||||
],
|
||||
@ -5561,9 +5561,9 @@
|
||||
"description": [
|
||||
"Tal vez recuerdes de <a href=\"waypoint-comparison-with-the-equality-operator\" target=\"_blank\">La comparación con el operador de igualdad</a> que todos los operadores de comparación retornan un valor booleano <code>true</code> (verdadero) o <code>false</code> (falso).",
|
||||
"Un <dfn>anti-patrón</dfn> común es usar una sentencia <code>if/else</code> para hacer una comparación y entonces retornar <code>true</code> o <code>false</code>:",
|
||||
"<blockquote>function sonIguales(a,b) {<br> if (a === b) {<br> return true;<br> } else {<br> return false;<br> }<br>}</blockquote>",
|
||||
"<blockquote>function sonIguales(a,b) {<br> if (a === b) {<br> return true;<br> } else {<br> return false;<br> }<br>}</blockquote>",
|
||||
"Ya que <code>===</code> returna <code>true</code> (verdadero) o <code>false</code> (falso), podemos simplemente retornar el resultado de la comparación:",
|
||||
"<blockquote>function sonIguales(a,b) {<br> return a === b;<br>}</blockquote>",
|
||||
"<blockquote>function sonIguales(a,b) {<br> return a === b;<br>}</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Arregla la función <code>isLess</code> para remover las sentencias <code>if/else</code>."
|
||||
]
|
||||
@ -5598,7 +5598,7 @@
|
||||
"description": [
|
||||
"When a <code>return</code> statement is reached, the execution of the current function stops and control returns to the calling location.",
|
||||
"<strong>Example</strong>",
|
||||
"<blockquote>function myFun() {<br> console.log(\"Hello\");<br> return \"World\";<br> console.log(\"byebye\")<br>}<br>myFun();</blockquote>",
|
||||
"<blockquote>function myFun() {<br> console.log(\"Hello\");<br> return \"World\";<br> console.log(\"byebye\")<br>}<br>myFun();</blockquote>",
|
||||
"The above outputs \"Hello\" to the console, returns \"World\", but <code>\"byebye\"</code> is never output, because the function exits at the <code>return</code> statement.",
|
||||
"<hr>",
|
||||
"Modify the function <code>abTest</code> so that if <code>a</code> or <code>b</code> are less than <code>0</code> the function will immediately exit with a value of <code>undefined</code>.",
|
||||
@ -5641,7 +5641,7 @@
|
||||
"description": [
|
||||
"Cuando se alcanza una sentencia <code>return</code>, la ejecución de la presente función se detiene y el control la retorna a la ubicación de la llamada.",
|
||||
"<strong>Ejemplo</strong>",
|
||||
"<blockquote>function miFuncion() {<br> console.log(\"Hola\");<br> return \"Mundo\";<br> console.log(\"chaochao\")<br>}<br>miFuncion();</blockquote>",
|
||||
"<blockquote>function miFuncion() {<br> console.log(\"Hola\");<br> return \"Mundo\";<br> console.log(\"chaochao\")<br>}<br>miFuncion();</blockquote>",
|
||||
"Esta presenta en consola \"Hola\", retorna \"Mundo\", pero <code>\"chaochao\"</code> nunca se presenta, porque la función sale con la sentencia <code>return</code>.",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Modifica la función <code>abTest</code> de manera que si <code>a</code> o <code>b</code> son menores que <code>0</code> la función saldrá inmediatamente con un valor <code>undefined</code>.",
|
||||
@ -5765,9 +5765,9 @@
|
||||
"Objects are similar to <code>arrays</code>, except that instead of using indexes to access and modify their data, you access the data in objects through what are called <code>properties</code>.",
|
||||
"Objects are useful for storing data in a structured way, and can represent real world objects, like a cat.",
|
||||
"Here's a sample cat object:",
|
||||
"<blockquote>var cat = {<br> \"name\": \"Whiskers\",<br> \"legs\": 4,<br> \"tails\": 1,<br> \"enemies\": [\"Water\", \"Dogs\"]<br>};</blockquote>",
|
||||
"<blockquote>var cat = {<br> \"name\": \"Whiskers\",<br> \"legs\": 4,<br> \"tails\": 1,<br> \"enemies\": [\"Water\", \"Dogs\"]<br>};</blockquote>",
|
||||
"In this example, all the properties are stored as strings, such as - <code>\"name\"</code>, <code>\"legs\"</code>, and <code>\"tails\"</code>. However, you can also use numbers as properties. You can even omit the quotes for single-word string properties, as follows:",
|
||||
"<blockquote>var anotherObject = {<br> make: \"Ford\",<br> 5: \"five\",<br> \"model\": \"focus\"<br>};</blockquote>",
|
||||
"<blockquote>var anotherObject = {<br> make: \"Ford\",<br> 5: \"five\",<br> \"model\": \"focus\"<br>};</blockquote>",
|
||||
"However, if your object has any non-string properties, JavaScript will automatically typecast them as strings.",
|
||||
"<hr>",
|
||||
"Make an object that represents a dog called <code>myDog</code> which contains the properties <code>\"name\"</code> (a string), <code>\"legs\"</code>, <code>\"tails\"</code> and <code>\"friends\"</code>.",
|
||||
@ -5855,7 +5855,7 @@
|
||||
"There are two ways to access the properties of an object: dot notation (<code>.</code>) and bracket notation (<code>[]</code>), similar to an array.",
|
||||
"Dot notation is what you use when you know the name of the property you're trying to access ahead of time.",
|
||||
"Here is a sample of using dot notation (<code>.</code>) to read an object's property:",
|
||||
"<blockquote>var myObj = {<br> prop1: \"val1\",<br> prop2: \"val2\"<br>};<br>var prop1val = myObj.prop1; // val1<br>var prop2val = myObj.prop2; // val2</blockquote>",
|
||||
"<blockquote>var myObj = {<br> prop1: \"val1\",<br> prop2: \"val2\"<br>};<br>var prop1val = myObj.prop1; // val1<br>var prop2val = myObj.prop2; // val2</blockquote>",
|
||||
"<hr>",
|
||||
"Read in the property values of <code>testObj</code> using dot notation. Set the variable <code>hatValue</code> equal to the object's property <code>hat</code> and set the variable <code>shirtValue</code> equal to the object's property <code>shirt</code>."
|
||||
],
|
||||
@ -5893,7 +5893,7 @@
|
||||
"Hay dos maneras de acceder a las propiedades de un objeto: con el operador punto (<code>.</code>) y con la notación corchete (<code>[]</code>), similar al caso de un vector.",
|
||||
"El operador punto es el que usas cuando de antemano sabes el nombre de la propiedad que estás intentando acceder.",
|
||||
"Aquí está un ejemplo del uso del operador punto (<code>.</code>) para leer una propiedad de un objeto:",
|
||||
"<blockquote>var miObj = {<br> prop1: \"val1\",<br> prop2: \"val2\"<br>};<br>var prop1val = miObj.prop1; // val1<br>var prop2val = miObj.prop2; // val2</blockquote>",
|
||||
"<blockquote>var miObj = {<br> prop1: \"val1\",<br> prop2: \"val2\"<br>};<br>var prop1val = miObj.prop1; // val1<br>var prop2val = miObj.prop2; // val2</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Lee los valores de propiedades de <code>testObj</code> usando notación punto. Asigna la variable <code>hatValue</code> igual a la propiedad objeto <code>hat</code> y asigna la variable <code>shirtValue</code> igual a la propiedad objeto <code>shirt</code>."
|
||||
]
|
||||
@ -5931,7 +5931,7 @@
|
||||
"The second way to access the properties of an object is bracket notation (<code>[]</code>). If the property of the object you are trying to access has a space in its name, you will need to use bracket notation.",
|
||||
"However, you can still use bracket notation on object properties without spaces.",
|
||||
"Here is a sample of using bracket notation to read an object's property:",
|
||||
"<blockquote>var myObj = {<br> \"Space Name\": \"Kirk\",<br> \"More Space\": \"Spock\",<br> \"NoSpace\": \"USS Enterprise\"<br>};<br>myObj[\"Space Name\"]; // Kirk<br>myObj['More Space']; // Spock<br>myObj[\"NoSpace\"]; // USS Enterprise</blockquote>",
|
||||
"<blockquote>var myObj = {<br> \"Space Name\": \"Kirk\",<br> \"More Space\": \"Spock\",<br> \"NoSpace\": \"USS Enterprise\"<br>};<br>myObj[\"Space Name\"]; // Kirk<br>myObj['More Space']; // Spock<br>myObj[\"NoSpace\"]; // USS Enterprise</blockquote>",
|
||||
"Note that property names with spaces in them must be in quotes (single or double).",
|
||||
"<hr>",
|
||||
"Read the values of the properties <code>\"an entree\"</code> and <code>\"the drink\"</code> of <code>testObj</code> using bracket notation and assign them to <code>entreeValue</code> and <code>drinkValue</code> respectively."
|
||||
@ -5969,7 +5969,7 @@
|
||||
"description": [
|
||||
"La segunda manera de acceder a las propiedades de un objeto es con la notación corchete (<code>[]</code>). Si el nombre de la propiedad del objeto que estás intentando acceder tiene un espacio, necesitarás usar la notación corchete.",
|
||||
"Aquí está un ejemplo del uso de la notación corchete para leer una propiedad de un objeto:",
|
||||
"<blockquote>var miObj = {<br> \"Nombre con espacio\": \"Kirk\",<br> \"Mas espacio\": \"Spock\"<br>};<br>miObj[\"Nombre con espacio\"]; // Kirk<br>miObj['Mas espacio']; // Spock</blockquote>",
|
||||
"<blockquote>var miObj = {<br> \"Nombre con espacio\": \"Kirk\",<br> \"Mas espacio\": \"Spock\"<br>};<br>miObj[\"Nombre con espacio\"]; // Kirk<br>miObj['Mas espacio']; // Spock</blockquote>",
|
||||
"Nota que los nombres de propiedades con espacios tienen que estar entre comillas (apóstrofes o comillas).",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Lee los valores de las propiedades <code>\"an entree\"</code> y <code>\"the drink\"</code> de <code>testObj</code> usando la notación corchete."
|
||||
@ -6008,9 +6008,9 @@
|
||||
"description": [
|
||||
"Another use of bracket notation on objects is to access a property which is stored as the value of a variable. This can be very useful for iterating through an object's properties or when accessing a lookup table.",
|
||||
"Here is an example of using a variable to access a property:",
|
||||
"<blockquote>var dogs = {<br> Fido: \"Mutt\",\n Hunter: \"Doberman\",\n Snoopie: \"Beagle\"<br>};<br>var myDog = \"Hunter\";<br>var myBreed = dogs[myDog];<br>console.log(myBreed); // \"Doberman\"</blockquote>",
|
||||
"<blockquote>var dogs = {<br> Fido: \"Mutt\",\n Hunter: \"Doberman\",\n Snoopie: \"Beagle\"<br>};<br>var myDog = \"Hunter\";<br>var myBreed = dogs[myDog];<br>console.log(myBreed); // \"Doberman\"</blockquote>",
|
||||
"Another way you can use this concept is when the property's name is collected dynamically during the program execution, as follows:",
|
||||
"<blockquote>var someObj = {<br> propName: \"John\"<br>};<br>function propPrefix(str) {<br> var s = \"prop\";<br> return s + str;<br>}<br>var someProp = propPrefix(\"Name\"); // someProp now holds the value 'propName'<br>console.log(someObj[someProp]); // \"John\"</blockquote>",
|
||||
"<blockquote>var someObj = {<br> propName: \"John\"<br>};<br>function propPrefix(str) {<br> var s = \"prop\";<br> return s + str;<br>}<br>var someProp = propPrefix(\"Name\"); // someProp now holds the value 'propName'<br>console.log(someObj[someProp]); // \"John\"</blockquote>",
|
||||
"Note that we do <em>not</em> use quotes around the variable name when using it to access the property because we are using the <em>value</em> of the variable, not the <em>name</em>.",
|
||||
"<hr>",
|
||||
"Use the <code>playerNumber</code> variable to look up player <code>16</code> in <code>testObj</code> using bracket notation. Then assign that name to the <code>player</code> variable."
|
||||
@ -6052,9 +6052,9 @@
|
||||
"description": [
|
||||
"Otro uso de la notación corchete sobre objetos es usar una variable para acceder a una propiedad. Esto puede ser muy útil en iteraciones sobre la lista de propiedades de un objetos o para hacer operaciones de búsqueda.",
|
||||
"Aquí está un ejemplo del uso de una variable para acceder a una propiedad:",
|
||||
"<blockquote>var algunaProp = \"propNombre\";<br>var miObj = {<br> propNombre: \"Algún valor\"<br >}<br>miObj[algunaProp]; // \"Algún valor\"</blockquote>",
|
||||
"<blockquote>var algunaProp = \"propNombre\";<br>var miObj = {<br> propNombre: \"Algún valor\"<br >}<br>miObj[algunaProp]; // \"Algún valor\"</blockquote>",
|
||||
"Aquí hay uno más:",
|
||||
"<blockquote>var miPerro = \"Cazador\";<br>var perros = {<br> Fido: \"Mutt\",\n Cazador: \"Doberman\",\n Snoopie: \"Beagle\"<br >}<br>var raza = perros[miPerro]; // \"Cazador\"<br>console.log(raza)// \"Doberman\"</blockquote>",
|
||||
"<blockquote>var miPerro = \"Cazador\";<br>var perros = {<br> Fido: \"Mutt\",\n Cazador: \"Doberman\",\n Snoopie: \"Beagle\"<br >}<br>var raza = perros[miPerro]; // \"Cazador\"<br>console.log(raza)// \"Doberman\"</blockquote>",
|
||||
"Nota que <em>no</em> usamos comillas alrededor del nombre de la variable (<code>miPerro</code>) cuando la usamos para acceder a la propiedad (<code>perros[miPerro]</code> porque estamos usando el <em>valor</em> de la variable y no su <em>nombre</em>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Usa la variable <code>playerNumber</code> para buscar y asignar a <code>player</code> el jugador <code>16</code> de <code>testObj</code>, usa la notación corchete."
|
||||
@ -6093,7 +6093,7 @@
|
||||
"description": [
|
||||
"After you've created a JavaScript object, you can update its properties at any time just like you would update any other variable. You can use either dot or bracket notation to update.",
|
||||
"For example, let's look at <code>ourDog</code>:",
|
||||
"<blockquote>var ourDog = {<br> \"name\": \"Camper\",<br> \"legs\": 4,<br> \"tails\": 1,<br> \"friends\": [\"everything!\"]<br>};</blockquote>",
|
||||
"<blockquote>var ourDog = {<br> \"name\": \"Camper\",<br> \"legs\": 4,<br> \"tails\": 1,<br> \"friends\": [\"everything!\"]<br>};</blockquote>",
|
||||
"Since he's a particularly happy dog, let's change his name to \"Happy Camper\". Here's how we update his object's name property:",
|
||||
"<code>ourDog.name = \"Happy Camper\";</code> or",
|
||||
"<code>ourDog[\"name\"] = \"Happy Camper\";</code>",
|
||||
@ -6321,7 +6321,7 @@
|
||||
"description": [
|
||||
"Objects can be thought of as a key/value storage, like a dictionary. If you have tabular data, you can use an object to \"lookup\" values rather than a <code>switch</code> statement or an <code>if/else</code> chain. This is most useful when you know that your input data is limited to a certain range.",
|
||||
"Here is an example of a simple reverse alphabet lookup:",
|
||||
"<blockquote>var alpha = {<br> 1:\"Z\",<br> 2:\"Y\",<br> 3:\"X\",<br> 4:\"W\",<br> ...<br> 24:\"C\",<br> 25:\"B\",<br> 26:\"A\"<br>};<br>alpha[2]; // \"Y\"<br>alpha[24]; // \"C\"<br><br>var value = 2;<br>alpha[value]; // \"Y\"</blockquote>",
|
||||
"<blockquote>var alpha = {<br> 1:\"Z\",<br> 2:\"Y\",<br> 3:\"X\",<br> 4:\"W\",<br> ...<br> 24:\"C\",<br> 25:\"B\",<br> 26:\"A\"<br>};<br>alpha[2]; // \"Y\"<br>alpha[24]; // \"C\"<br><br>var value = 2;<br>alpha[value]; // \"Y\"</blockquote>",
|
||||
"<hr>",
|
||||
"Convert the switch statement into an object called <code>lookup</code>. Use it to look up <code>val</code> and assign the associated string to the <code>result</code> variable."
|
||||
],
|
||||
@ -6374,7 +6374,7 @@
|
||||
"description": [
|
||||
"Los objetos pueden ser considerados como un almacenamiento llave/valor, como un diccionario. Si tienes datos tabulados, puedes almacenarlos en un objeto para después \"buscar\" valores, en lugar de emplear una sentencia <code>switch</code> o una secuencia de <code>if/else</code>. Esto es más útil cuando sabes que tus datos de entrada son limitados a un cierto rango.",
|
||||
"Aquí está un ejemplo de una simple búsqueda inversa de alfabeto:",
|
||||
"<blockquote>var alfa = {<br> 1:\"Z\",<br> 2:\"Y\",<br> 3:\"X\",<br> 4:\"W\",<br> ...<br> 24:\"C\",<br> 25:\"B\",<br> 26:\"A\"<br>};<br>alfa[2]; // \"Y\"<br>alfa[24]; // \"C\"<br><br>var valor = 2;<br>alfa[valor]; // \"Y\"</blockquote>",
|
||||
"<blockquote>var alfa = {<br> 1:\"Z\",<br> 2:\"Y\",<br> 3:\"X\",<br> 4:\"W\",<br> ...<br> 24:\"C\",<br> 25:\"B\",<br> 26:\"A\"<br>};<br>alfa[2]; // \"Y\"<br>alfa[24]; // \"C\"<br><br>var valor = 2;<br>alfa[valor]; // \"Y\"</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Convierte la sentencia switch en una tabla de búsqueda llamada <code>lookup</code>. Usala para buscar <code>val</code> y asigna la cadena asociada a la variable <code>result</code>."
|
||||
]
|
||||
@ -6429,7 +6429,7 @@
|
||||
"description": [
|
||||
"Sometimes it is useful to check if the property of a given object exists or not. We can use the <code>.hasOwnProperty(propname)</code> method of objects to determine if that object has the given property name. <code>.hasOwnProperty()</code> returns <code>true</code> or <code>false</code> if the property is found or not.",
|
||||
"<strong>Example</strong>",
|
||||
"<blockquote>var myObj = {<br> top: \"hat\",<br> bottom: \"pants\"<br>};<br>myObj.hasOwnProperty(\"top\"); // true<br>myObj.hasOwnProperty(\"middle\"); // false</blockquote>",
|
||||
"<blockquote>var myObj = {<br> top: \"hat\",<br> bottom: \"pants\"<br>};<br>myObj.hasOwnProperty(\"top\"); // true<br>myObj.hasOwnProperty(\"middle\"); // false</blockquote>",
|
||||
"<hr>",
|
||||
"Modify the function <code>checkObj</code> to test <code>myObj</code> for <code>checkProp</code>. If the property is found, return that property's value. If not, return <code>\"Not Found\"</code>."
|
||||
],
|
||||
@ -6458,7 +6458,7 @@
|
||||
"description": [
|
||||
"A veces es útil revisar si cierta propiedad existe o no en un objeto dado. Podemos usar el método de objetos <code>.hasOwnProperty(nomprop)</code> para determinar si un objeto tiene la propiedad <code>nomprop</code>. <code>.hasOwnProperty()</code> retorna <code>true</code> o <code>false</code> si la propiedad es encontrada o no.",
|
||||
"<strong>Ejemplo</strong>",
|
||||
"<blockquote>var miObj = {<br> arriba: \"sombrero\",<br> abajo: \"pantalones\"<br>};<br>miObj.hasOwnProperty(\"arriba\"); // true<br>miObj.hasOwnProperty(\"medio\"); // false</blockquote>",
|
||||
"<blockquote>var miObj = {<br> arriba: \"sombrero\",<br> abajo: \"pantalones\"<br>};<br>miObj.hasOwnProperty(\"arriba\"); // true<br>miObj.hasOwnProperty(\"medio\"); // false</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Modifica la función <code>checkObj</code> que prueba si <code>myObj</code> tiene la propiedad <code>checkProp</code>. Si la propiedad es encontrada, retorna el valor de esa propiedad. Si no, retorna <code>\"Not Found\"</code>."
|
||||
]
|
||||
@ -6497,11 +6497,11 @@
|
||||
"description": [
|
||||
"Sometimes you may want to store data in a flexible <dfn>Data Structure</dfn>. A JavaScript object is one way to handle flexible data. They allow for arbitrary combinations of <dfn>strings</dfn>, <dfn>numbers</dfn>, <dfn>booleans</dfn>, <dfn>arrays</dfn>, <dfn>functions</dfn>, and <dfn>objects</dfn>.",
|
||||
"Here's an example of a complex data structure:",
|
||||
"<blockquote>var ourMusic = [<br> {<br> \"artist\": \"Daft Punk\",<br> \"title\": \"Homework\",<br> \"release_year\": 1997,<br> \"formats\": [ <br> \"CD\", <br> \"Cassette\", <br> \"LP\"<br> ],<br> \"gold\": true<br> }<br>];</blockquote>",
|
||||
"<blockquote>var ourMusic = [<br> {<br> \"artist\": \"Daft Punk\",<br> \"title\": \"Homework\",<br> \"release_year\": 1997,<br> \"formats\": [ <br> \"CD\", <br> \"Cassette\", <br> \"LP\"<br> ],<br> \"gold\": true<br> }<br>];</blockquote>",
|
||||
"This is an array which contains one object inside. The object has various pieces of <dfn>metadata</dfn> about an album. It also has a nested <code>\"formats\"</code> array. If you want to add more album records, you can do this by adding records to the top level array.",
|
||||
"Objects hold data in a property, which has a key-value format. In the example above, <code>\"artist\": \"Daft Punk\"</code> is a property that has a key of <code>\"artist\"</code> and a value of <code>\"Daft Punk\"</code>.",
|
||||
"<a href='http://www.json.org/' target=_blank>JavaScript Object Notation</a> or <code>JSON</code> is a related data interchange format used to store data.",
|
||||
"<blockquote>{<br> \"artist\": \"Daft Punk\",<br> \"title\": \"Homework\",<br> \"release_year\": 1997,<br> \"formats\": [ <br> \"CD\",<br> \"Cassette\",<br> \"LP\"<br> ],<br> \"gold\": true<br>}</blockquote>",
|
||||
"<blockquote>{<br> \"artist\": \"Daft Punk\",<br> \"title\": \"Homework\",<br> \"release_year\": 1997,<br> \"formats\": [ <br> \"CD\",<br> \"Cassette\",<br> \"LP\"<br> ],<br> \"gold\": true<br>}</blockquote>",
|
||||
"<strong>Note</strong><br>You will need to place a comma after every object in the array, unless it is the last object in the array.",
|
||||
"<hr>",
|
||||
"Add a new album to the <code>myMusic</code> array. Add <code>artist</code> and <code>title</code> strings, <code>release_year</code> number, and a <code>formats</code> array of strings."
|
||||
@ -6555,7 +6555,7 @@
|
||||
"description": [
|
||||
"Los objetos JavaScript son flexibles porque permiten <dfn>Estructuras de Datos</dfn> con combinaciones arbitrarias de <dfn>cadenas</dfn>, <dfn>números</dfn>, <dfn>booleanos</dfn>, <dfn>vectores</dfn>, <dfn>funciones</dfn>, y <dfn>objetos</dfn>.",
|
||||
"Aquí está un ejemplo de un objeto complicado:",
|
||||
"<blockquote>var nuestraMusica = [<br> {<br> \"artista\": \"Daft Punk\",<br> \"titulo\": \"Homework\",<br> \"año_publicacion\": 1997,<br> \"formatos\": [ <br> \"CD\", <br> \"Cassette\", <br> \"LP\" ],<br> \"oro\": true<br> }<br>];</blockquote>",
|
||||
"<blockquote>var nuestraMusica = [<br> {<br> \"artista\": \"Daft Punk\",<br> \"titulo\": \"Homework\",<br> \"año_publicacion\": 1997,<br> \"formatos\": [ <br> \"CD\", <br> \"Cassette\", <br> \"LP\" ],<br> \"oro\": true<br> }<br>];</blockquote>",
|
||||
"Este es un vector de objetos con diversos <dfn>metadatos</dfn> acerca de un álbum musical. Además tiene anidado un vector <code>formatos</code>. En el vector de nivel superior, pueden añadirse otros registros del álbum.",
|
||||
"<strong>Nota</strong><br>En vectores que tengan más de un objeto, necesitarás separar un objeto de otro mediante comas.",
|
||||
"<h4>Instrucciones</h4>",
|
||||
@ -6598,7 +6598,7 @@
|
||||
"description": [
|
||||
"The sub-properties of objects can be accessed by chaining together the dot or bracket notation.",
|
||||
"Here is a nested object:",
|
||||
"<blockquote>var ourStorage = {<br> \"desk\": {<br> \"drawer\": \"stapler\"<br> },<br> \"cabinet\": {<br> \"top drawer\": { <br> \"folder1\": \"a file\",<br> \"folder2\": \"secrets\"<br> },<br> \"bottom drawer\": \"soda\"<br> }<br>};<br>ourStorage.cabinet[\"top drawer\"].folder2; // \"secrets\"<br>ourStorage.desk.drawer; // \"stapler\"</blockquote>",
|
||||
"<blockquote>var ourStorage = {<br> \"desk\": {<br> \"drawer\": \"stapler\"<br> },<br> \"cabinet\": {<br> \"top drawer\": { <br> \"folder1\": \"a file\",<br> \"folder2\": \"secrets\"<br> },<br> \"bottom drawer\": \"soda\"<br> }<br>};<br>ourStorage.cabinet[\"top drawer\"].folder2; // \"secrets\"<br>ourStorage.desk.drawer; // \"stapler\"</blockquote>",
|
||||
"<hr>",
|
||||
"Access the <code>myStorage</code> object and assign the contents of the <code>glove box</code> property to the <code>gloveBoxContents</code> variable. Use bracket notation for properties with a space in their name."
|
||||
],
|
||||
@ -6623,7 +6623,7 @@
|
||||
"description": [
|
||||
"Las sub-propiedades de los objetos pueden ser accesadas mediante encadenamiento de la notación punto o corchete.",
|
||||
"Aquí está un objeto anidado:",
|
||||
"<blockquote>var nuestroAlmacen = {<br> \"escritorio\": {<br> \"cajon\": \"grapadora\"<br> },<br> \"armario\": {<br> \"cajón superior\": { <br> \"legajador1\": \"un archivo\",<br> \"legajador2\": \"secretos\"<br> },<br> \"cajón inferior\": \"gaseosa\"<br> }<br>}<br>nuestroAlmacen.armario[\"cajón superior\"].legajador2; // \"secretos\"<br>nuestroAlmacen.escritorio.cajon; // \"grapadora\"</blockquote>",
|
||||
"<blockquote>var nuestroAlmacen = {<br> \"escritorio\": {<br> \"cajon\": \"grapadora\"<br> },<br> \"armario\": {<br> \"cajón superior\": { <br> \"legajador1\": \"un archivo\",<br> \"legajador2\": \"secretos\"<br> },<br> \"cajón inferior\": \"gaseosa\"<br> }<br>}<br>nuestroAlmacen.armario[\"cajón superior\"].legajador2; // \"secretos\"<br>nuestroAlmacen.escritorio.cajon; // \"grapadora\"</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Accede al objeto <code>myStorage</code> para recuperar el contenido de <code>glove box</code>. Usa notación corchete para las propiedades con un espacio en su nombre."
|
||||
]
|
||||
@ -6670,7 +6670,7 @@
|
||||
"description": [
|
||||
"As we have seen in earlier examples, objects can contain both nested objects and nested arrays. Similar to accessing nested objects, Array bracket notation can be chained to access nested arrays.",
|
||||
"Here is an example of how to access a nested array:",
|
||||
"<blockquote>var ourPets = [<br> {<br> animalType: \"cat\",<br> names: [<br> \"Meowzer\",<br> \"Fluffy\",<br> \"Kit-Cat\"<br> ]<br> },<br> {<br> animalType: \"dog\",<br> names: [<br> \"Spot\",<br> \"Bowser\",<br> \"Frankie\"<br> ]<br> }<br>];<br>ourPets[0].names[1]; // \"Fluffy\"<br>ourPets[1].names[0]; // \"Spot\"</blockquote>",
|
||||
"<blockquote>var ourPets = [<br> {<br> animalType: \"cat\",<br> names: [<br> \"Meowzer\",<br> \"Fluffy\",<br> \"Kit-Cat\"<br> ]<br> },<br> {<br> animalType: \"dog\",<br> names: [<br> \"Spot\",<br> \"Bowser\",<br> \"Frankie\"<br> ]<br> }<br>];<br>ourPets[0].names[1]; // \"Fluffy\"<br>ourPets[1].names[0]; // \"Spot\"</blockquote>",
|
||||
"<hr>",
|
||||
"Retrieve the second tree from the variable <code>myPlants</code> using object dot and array bracket notation."
|
||||
],
|
||||
@ -6695,7 +6695,7 @@
|
||||
"description": [
|
||||
"Como hemos visto en ejemplos anteriores, los objetos pueden contener objetos anidados y vectores anidados. De forma similar a acceder a objetos anidados, la notación corchete en vectores puede ser encadenada para acceder a vectores anidados.",
|
||||
"Aquí está un ejemplo de como acceder a un vector anidado:",
|
||||
"<blockquote>var nuestrasMascotas = { <br> \"gatos\": [<br> \"Maullador\",<br> \"Blandito\",<br> \"Kit-Cat\"<br> ],<br> \"perros\": [<br> \"Mancha\",<br> \"Bowser\",<br> \"Frankie\"<br> ]<br>};<br>nuestrasMascotas.cats[1]; // \"Blandito\"<br>nuestrasMascotas.dogs[0]; // \"Mancha\"</blockquote>",
|
||||
"<blockquote>var nuestrasMascotas = { <br> \"gatos\": [<br> \"Maullador\",<br> \"Blandito\",<br> \"Kit-Cat\"<br> ],<br> \"perros\": [<br> \"Mancha\",<br> \"Bowser\",<br> \"Frankie\"<br> ]<br>};<br>nuestrasMascotas.cats[1]; // \"Blandito\"<br>nuestrasMascotas.dogs[0]; // \"Mancha\"</blockquote>",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Recupera el segundo arbol de la variable <code>myPlants</code> usando notación punto para objetos y notación corchete para vectores."
|
||||
]
|
||||
@ -6870,7 +6870,7 @@
|
||||
"description": [
|
||||
"You can run the same code multiple times by using a loop.",
|
||||
"The first type of loop we will learn is called a \"<code>while</code>\" loop because it runs \"while\" a specified condition is true and stops once that condition is no longer true.",
|
||||
"<blockquote>var ourArray = [];<br>var i = 0;<br>while(i < 5) {<br> ourArray.push(i);<br> i++;<br>}</blockquote>",
|
||||
"<blockquote>var ourArray = [];<br>var i = 0;<br>while(i < 5) {<br> ourArray.push(i);<br> i++;<br>}</blockquote>",
|
||||
"Let's try getting a while loop to work by pushing values to an array.",
|
||||
"<hr>",
|
||||
"Push the numbers 0 through 4 to <code>myArray</code> using a <code>while</code> loop."
|
||||
@ -6939,7 +6939,7 @@
|
||||
"The <code>condition</code> statement is evaluated at the beginning of every loop iteration and will continue as long as it evaluates to <code>true</code>. When <code>condition</code> is <code>false</code> at the start of the iteration, the loop will stop executing. This means if <code>condition</code> starts as <code>false</code>, your loop will never execute.",
|
||||
"The <code>final-expression</code> is executed at the end of each loop iteration, prior to the next <code>condition</code> check and is usually used to increment or decrement your loop counter.",
|
||||
"In the following example we initialize with <code>i = 0</code> and iterate while our condition <code>i < 5</code> is true. We'll increment <code>i</code> by <code>1</code> in each loop iteration with <code>i++</code> as our <code>final-expression</code>.",
|
||||
"<blockquote>var ourArray = [];<br>for (var i = 0; i < 5; i++) {<br> ourArray.push(i);<br>}</blockquote>",
|
||||
"<blockquote>var ourArray = [];<br>for (var i = 0; i < 5; i++) {<br> ourArray.push(i);<br>}</blockquote>",
|
||||
"<code>ourArray</code> will now contain <code>[0,1,2,3,4]</code>.",
|
||||
"<hr>",
|
||||
"Use a <code>for</code> loop to work to push the values 1 through 5 onto <code>myArray</code>."
|
||||
@ -7013,7 +7013,7 @@
|
||||
"description": [
|
||||
"For loops don't have to iterate one at a time. By changing our <code>final-expression</code>, we can count by even numbers.",
|
||||
"We'll start at <code>i = 0</code> and loop while <code>i < 10</code>. We'll increment <code>i</code> by 2 each loop with <code>i += 2</code>.",
|
||||
"<blockquote>var ourArray = [];<br>for (var i = 0; i < 10; i += 2) {<br> ourArray.push(i);<br>}</blockquote>",
|
||||
"<blockquote>var ourArray = [];<br>for (var i = 0; i < 10; i += 2) {<br> ourArray.push(i);<br>}</blockquote>",
|
||||
"<code>ourArray</code> will now contain <code>[0,2,4,6,8]</code>.",
|
||||
"Let's change our <code>initialization</code> so we can count by odd numbers.",
|
||||
"<hr>",
|
||||
@ -7084,7 +7084,7 @@
|
||||
"A for loop can also count backwards, so long as we can define the right conditions.",
|
||||
"In order to count backwards by twos, we'll need to change our <code>initialization</code>, <code>condition</code>, and <code>final-expression</code>.",
|
||||
"We'll start at <code>i = 10</code> and loop while <code>i > 0</code>. We'll decrement <code>i</code> by 2 each loop with <code>i -= 2</code>.",
|
||||
"<blockquote>var ourArray = [];<br>for (var i=10; i > 0; i-=2) {<br> ourArray.push(i);<br>}</blockquote>",
|
||||
"<blockquote>var ourArray = [];<br>for (var i=10; i > 0; i-=2) {<br> ourArray.push(i);<br>}</blockquote>",
|
||||
"<code>ourArray</code> will now contain <code>[10,8,6,4,2]</code>.",
|
||||
"Let's change our <code>initialization</code> and <code>final-expression</code> so we can count backward by twos by odd numbers.",
|
||||
"<hr>",
|
||||
@ -7158,7 +7158,7 @@
|
||||
"title": "Iterate Through an Array with a For Loop",
|
||||
"description": [
|
||||
"A common task in JavaScript is to iterate through the contents of an array. One way to do that is with a <code>for</code> loop. This code will output each element of the array <code>arr</code> to the console:",
|
||||
"<blockquote>var arr = [10,9,8,7,6];<br>for (var i = 0; i < arr.length; i++) {<br> console.log(arr[i]);<br>}</blockquote>",
|
||||
"<blockquote>var arr = [10,9,8,7,6];<br>for (var i = 0; i < arr.length; i++) {<br> console.log(arr[i]);<br>}</blockquote>",
|
||||
"Remember that Arrays have zero-based numbering, which means the last index of the array is length - 1. Our <dfn>condition</dfn> for this loop is <code>i < arr.length</code>, which stops when <code>i</code> is at length - 1.",
|
||||
"<hr>",
|
||||
"Declare and initialize a variable <code>total</code> to <code>0</code>. Use a <code>for</code> loop to add the value of each element of the <code>myArr</code> array to <code>total</code>."
|
||||
@ -7191,7 +7191,7 @@
|
||||
"title": "Iterar a través de un vector con un ciclo for",
|
||||
"description": [
|
||||
"Una tarea común en JavaScript es iterar a traves del contenido de un vector. Una manera de hacerlo es con un ciclo <code>for</code>. Este código imprimirá cada elemento del vector <code>arr</code> en la consola:",
|
||||
"<blockquote>var arr = [10,9,8,7,6];<br>for (var i=0; i < arr.length; i++) {<br> console.log(arr[i]);<br>}</blockquote>",
|
||||
"<blockquote>var arr = [10,9,8,7,6];<br>for (var i=0; i < arr.length; i++) {<br> console.log(arr[i]);<br>}</blockquote>",
|
||||
"Recuerda que los vectores tienen numeración que comienza en cero, la cual significa que el último índice del vector es su longitud - 1. Nuestra <dfn>condición</dfn> para este ciclo es <code>i < arr.length</code>, que lo detendrá cuando <code>i</code> sea la longitud - 1.",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Declara e inicializa una variable <code>total</code> en <code>0</code>. Usa un ciclo <code>for</code> para añadir el valor de cada elemento del vector <code>myArr</code> a <code>total</code>."
|
||||
@ -7231,7 +7231,7 @@
|
||||
"title": "Nesting For Loops",
|
||||
"description": [
|
||||
"If you have a multi-dimensional array, you can use the same logic as the prior waypoint to loop through both the array and any sub-arrays. Here is an example:",
|
||||
"<blockquote>var arr = [<br> [1,2], [3,4], [5,6]<br>];<br>for (var i=0; i < arr.length; i++) {<br> for (var j=0; j < arr[i].length; j++) {<br> console.log(arr[i][j]);<br> }<br>}</blockquote>",
|
||||
"<blockquote>var arr = [<br> [1,2], [3,4], [5,6]<br>];<br>for (var i=0; i < arr.length; i++) {<br> for (var j=0; j < arr[i].length; j++) {<br> console.log(arr[i][j]);<br> }<br>}</blockquote>",
|
||||
"This outputs each sub-element in <code>arr</code> one at a time. Note that for the inner loop, we are checking the <code>.length</code> of <code>arr[i]</code>, since <code>arr[i]</code> is itself an array.",
|
||||
"<hr>",
|
||||
"Modify function <code>multiplyAll</code> so that it multiplies the <code>product</code> variable by each number in the sub-arrays of <code>arr</code>"
|
||||
@ -7260,7 +7260,7 @@
|
||||
"title": "Anidar ciclos for",
|
||||
"description": [
|
||||
"Si tienes una matriz multi-dimensional, puedes usar la misma lógica del punto anterior para iterar a través de un vector y cualquier sub-vector. Aquí está un ejemplo:",
|
||||
"<blockquote>var arr = [<br> [1,2], [3,4], [5,6]<br>];<br>for (var i=0; i < arr.length; i++) {<br> for (var j=0; j < arr[i].length; j++) {<br> console.log(arr[i][j]);<br> }<br>}</blockquote>",
|
||||
"<blockquote>var arr = [<br> [1,2], [3,4], [5,6]<br>];<br>for (var i=0; i < arr.length; i++) {<br> for (var j=0; j < arr[i].length; j++) {<br> console.log(arr[i][j]);<br> }<br>}</blockquote>",
|
||||
"Esto imprime cada sub-elemento en <code>arr</code> uno a la vez. Nota que en el ciclo interior, estamos comprobando la longitud <code>.length</code> de <code>arr[i]</code>, ya que <code>arr[i]</code> es por si mismo un vector.",
|
||||
"<h4>Instrucciones</h4>",
|
||||
"Modifica la función <code>multiplyAll</code> de manera que esta multiplique la variable <code>product</code> por cada número en los sub-vectores de <code>arr</code>"
|
||||
@ -7296,13 +7296,13 @@
|
||||
"description": [
|
||||
"You can run the same code multiple times by using a loop.",
|
||||
"The next type of loop you will learn is called a \"<code>do...while</code>\" loop because it first will \"<code>do</code>\" one pass of the code inside the loop no matter what, and then it runs \"<code>while</code>\" a specified condition is true and stops once that condition is no longer true. Let's look at an example.",
|
||||
"<blockquote>var ourArray = [];<br>var i = 0;<br>do {<br> ourArray.push(i);<br> i++;<br>} while (i < 5);</blockquote>",
|
||||
"<blockquote>var ourArray = [];<br>var i = 0;<br>do {<br> ourArray.push(i);<br> i++;<br>} while (i < 5);</blockquote>",
|
||||
"This behaves just as you would expect with any other type of loop, and the resulting array will look like <code>[0, 1, 2, 3, 4]</code>. However, what makes the <code>do...while</code> different from other loops is how it behaves when the condition fails on the first check. Let's see this in action.",
|
||||
"Here is a regular while loop that will run the code in the loop as long as <code>i < 5</code>.",
|
||||
"<blockquote>var ourArray = []; <br>var i = 5;<br>while (i < 5) {<br> ourArray.push(i);<br> i++;<br>}</blockquote>",
|
||||
"<blockquote>var ourArray = []; <br>var i = 5;<br>while (i < 5) {<br> ourArray.push(i);<br> i++;<br>}</blockquote>",
|
||||
"Notice that we initialize the value of <code>i</code> to be 5. When we execute the next line, we notice that <code>i</code> is not less than 5. So we do not execute the code inside the loop. The result is that <code>ourArray</code> will end up with nothing added to it, so it will still look like this <code>[]</code> when all the code in the example above finishes running.",
|
||||
"Now, take a look at a <code>do...while</code> loop.",
|
||||
"<blockquote>var ourArray = []; <br>var i = 5;<br>do {<br> ourArray.push(i);<br> i++;<br>} while (i < 5);</blockquote>",
|
||||
"<blockquote>var ourArray = []; <br>var i = 5;<br>do {<br> ourArray.push(i);<br> i++;<br>} while (i < 5);</blockquote>",
|
||||
"In this case, we initialize the value of <code>i</code> as 5, just like we did with the while loop. When we get to the next line, there is no check for the value of <code>i</code>, so we go to the code inside the curly braces and execute it. We will add one element to the array and increment <code>i</code> before we get to the condition check. Then, when we get to checking if <code>i < 5</code> see that <code>i</code> is now 6, which fails the conditional check. So we exit the loop and are done. At the end of the above example, the value of <code>ourArray</code> is <code>[5]</code>.",
|
||||
"Essentially, a <code>do...while</code> loop ensures that the code inside the loop will run at least once.",
|
||||
"Let's try getting a <code>do...while</code> loop to work by pushing values to an array.",
|
||||
@ -7804,9 +7804,9 @@
|
||||
"The syntax is:",
|
||||
"<code>condition ? statement-if-true : statement-if-false;</code>",
|
||||
"The following function uses an if-else statement to check a condition:",
|
||||
"<blockquote>function findGreater(a, b) {<br> if(a > b) {<br> return \"a is greater\";<br> }<br> else {<br> return \"b is greater\";<br> }<br>}</blockquote>",
|
||||
"<blockquote>function findGreater(a, b) {<br> if(a > b) {<br> return \"a is greater\";<br> }<br> else {<br> return \"b is greater\";<br> }<br>}</blockquote>",
|
||||
"This can be re-written using the <code>conditional operator</code>:",
|
||||
"<blockquote>function findGreater(a, b) {<br> return a > b ? \"a is greater\" : \"b is greater\";<br>}</blockquote>",
|
||||
"<blockquote>function findGreater(a, b) {<br> return a > b ? \"a is greater\" : \"b is greater\";<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Use the <code>conditional operator</code> in the <code>checkEqual</code> function to check if two numbers are equal or not. The function should return either true or false."
|
||||
],
|
||||
@ -7855,9 +7855,9 @@
|
||||
"description": [
|
||||
"In the previous challenge, you used a single <code>conditional operator</code>. You can also chain them together to check for multiple conditions.",
|
||||
"The following function uses if, else if, and else statements to check multiple conditions:",
|
||||
"<blockquote>function findGreaterOrEqual(a, b) {<br> if(a === b) {<br> return \"a and b are equal\";<br> }<br> else if(a > b) {<br> return \"a is greater\";<br> }<br> else {<br> return \"b is greater\";<br> }<br>}</blockquote>",
|
||||
"<blockquote>function findGreaterOrEqual(a, b) {<br> if(a === b) {<br> return \"a and b are equal\";<br> }<br> else if(a > b) {<br> return \"a is greater\";<br> }<br> else {<br> return \"b is greater\";<br> }<br>}</blockquote>",
|
||||
"The above function can be re-written using multiple <code>conditional operators</code>:",
|
||||
"<blockquote>function findGreaterOrEqual(a, b) {<br> return (a === b) ? \"a and b are equal\" : (a > b) ? \"a is greater\" : \"b is greater\";<br>}</blockquote>",
|
||||
"<blockquote>function findGreaterOrEqual(a, b) {<br> return (a === b) ? \"a and b are equal\" : (a > b) ? \"a is greater\" : \"b is greater\";<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"Use multiple <code>conditional operators</code> in the <code>checkSign</code> function to check if a number is positive, negative or zero."
|
||||
],
|
||||
|
||||
@ -69,13 +69,13 @@
|
||||
"When you declare a variable with the <code>var</code> keyword, it is declared globally, or locally if declared inside a function.",
|
||||
"The <code>let</code> keyword behaves similarly, but with some extra features. When you declare a variable with the <code>let</code> keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression.",
|
||||
"For example:",
|
||||
"<blockquote>var numArray = [];<br>for (var i = 0; i < 3; i++) {<br> numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>",
|
||||
"<blockquote>var numArray = [];<br>for (var i = 0; i < 3; i++) {<br> numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>",
|
||||
"With the <code>var</code> keyword, <code>i</code> is declared globally. So when <code>i++</code> is executed, it updates the global variable. This code is similar to the following:",
|
||||
"<blockquote>var numArray = [];<br>var i;<br>for (i = 0; i < 3; i++) {<br> numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>",
|
||||
"<blockquote>var numArray = [];<br>var i;<br>for (i = 0; i < 3; i++) {<br> numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>",
|
||||
"This behavior will cause problems if you were to create a function and store it for later use inside a for loop that uses the <code>i</code> variable. This is because the stored function will always refer to the value of the updated global <code>i</code> variable.",
|
||||
"<blockquote>var printNumTwo;<br>for (var i = 0; i < 3; i++) {<br> if(i === 2){<br> printNumTwo = function() {<br> return i;<br> };<br> }<br>}<br>console.log(printNumTwo());<br>// returns 3</blockquote>",
|
||||
"<blockquote>var printNumTwo;<br>for (var i = 0; i < 3; i++) {<br> if(i === 2){<br> printNumTwo = function() {<br> return i;<br> };<br> }<br>}<br>console.log(printNumTwo());<br>// returns 3</blockquote>",
|
||||
"As you can see, <code>printNumTwo()</code> prints 3 and not 2. This is because the value assigned to <code>i</code> was updated and the <code>printNumTwo()</code> returns the global <code>i</code> and not the value <code>i</code> had when the function was created in the for loop. The <code>let</code> keyword does not follow this behavior:",
|
||||
"<blockquote>'use strict';<br>let printNumTwo;<br>for (let i = 0; i < 3; i++) {<br> if (i === 2) {<br> printNumTwo = function() {<br> return i;<br> };<br> }<br>}<br>console.log(printNumTwo());<br>// returns 2<br>console.log(i);<br>// returns \"i is not defined\"</blockquote>",
|
||||
"<blockquote>'use strict';<br>let printNumTwo;<br>for (let i = 0; i < 3; i++) {<br> if (i === 2) {<br> printNumTwo = function() {<br> return i;<br> };<br> }<br>}<br>console.log(printNumTwo());<br>// returns 2<br>console.log(i);<br>// returns \"i is not defined\"</blockquote>",
|
||||
"<code>i</code> is not defined because it was not declared in the global scope. It is only declared within the for loop statement. <code>printNumTwo()</code> returned the correct value because three different <code>i</code> variables with unique values (0, 1, and 2) were created by the <code>let</code> keyword within the loop statement.",
|
||||
"<hr>",
|
||||
"Fix the code so that <code>i</code> declared in the if statement is a separate variable than <code>i</code> declared in the first line of the function. Be certain not to use the <code>var</code> keyword anywhere in your code.",
|
||||
@ -239,7 +239,7 @@
|
||||
"description": [
|
||||
"As seen in the previous challenge, <code>const</code> declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function <code>Object.freeze</code> to prevent data mutation.",
|
||||
"Once the object is frozen, you can no longer add, update, or delete properties from it. Any attempt at changing the object will be rejected without an error.",
|
||||
"<blockquote><br>let obj = {<br> name:\"FreeCodeCamp\"<br> review:\"Awesome\"<br>};<br>Object.freeze(obj);<br>obj.review = \"bad\"; //will be ignored. Mutation not allowed<br>obj.newProp = \"Test\"; // will be ignored. Mutation not allowed<br>console.log(obj); <br>// { name: \"FreeCodeCamp\", review:\"Awesome\"}<br></blockquote>",
|
||||
"<blockquote><br>let obj = {<br> name:\"FreeCodeCamp\"<br> review:\"Awesome\"<br>};<br>Object.freeze(obj);<br>obj.review = \"bad\"; //will be ignored. Mutation not allowed<br>obj.newProp = \"Test\"; // will be ignored. Mutation not allowed<br>console.log(obj); <br>// { name: \"FreeCodeCamp\", review:\"Awesome\"}<br></blockquote>",
|
||||
"<hr>",
|
||||
"In this challenge you are going to use <code>Object.freeze</code> to prevent mathematical constants from changing. You need to freeze the <code>MATH_CONSTANTS</code> object so that no one is able alter the value of <code>PI</code>, add, or delete properties ."
|
||||
],
|
||||
@ -299,9 +299,9 @@
|
||||
"description": [
|
||||
"In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else.",
|
||||
"To achieve this, we often use the following syntax:",
|
||||
"<blockquote>const myFunc = function() {<br> const myVar = \"value\";<br> return myVar;<br>}</blockquote>",
|
||||
"<blockquote>const myFunc = function() {<br> const myVar = \"value\";<br> return myVar;<br>}</blockquote>",
|
||||
"ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. Instead, you can use <strong>arrow function syntax</strong>:",
|
||||
"<blockquote>const myFunc = () => {<br> const myVar = \"value\";<br> return myVar;<br>}</blockquote>",
|
||||
"<blockquote>const myFunc = () => {<br> const myVar = \"value\";<br> return myVar;<br>}</blockquote>",
|
||||
"When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword <code>return</code> as well as the brackets surrounding the code. This helps simplify smaller functions into one-line statements:",
|
||||
"<blockquote>const myFunc= () => \"value\"</blockquote>",
|
||||
"This code will still return <code>value</code> by default.",
|
||||
@ -409,7 +409,7 @@
|
||||
"It's time we see how powerful arrow functions are when processing data.",
|
||||
"Arrow functions work really well with higher order functions, such as <code>map()</code>, <code>filter()</code>, and <code>reduce()</code>, that take other functions as arguments for processing collections of data.",
|
||||
"Read the following code:",
|
||||
"<blockquote>FBPosts.filter(function(post) {<br> return post.thumbnail !== null && post.shares > 100 && post.likes > 500;<br>})</blockquote>",
|
||||
"<blockquote>FBPosts.filter(function(post) {<br> return post.thumbnail !== null && post.shares > 100 && post.likes > 500;<br>})</blockquote>",
|
||||
"We have written this with <code>filter()</code> to at least make it somewhat readable. Now compare it to the following code which uses arrow function syntax instead:",
|
||||
"<blockquote>FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)</blockquote>",
|
||||
"This code is more succinct and accomplishes the same task with fewer lines of code.",
|
||||
@ -478,7 +478,7 @@
|
||||
"description": [
|
||||
"In order to help us create more flexible functions, ES6 introduces <dfn>default parameters</dfn> for functions.",
|
||||
"Check out this code:",
|
||||
"<blockquote>function greeting(name = \"Anonymous\") {<br> return \"Hello \" + name;<br>}<br>console.log(greeting(\"John\")); // Hello John<br>console.log(greeting()); // Hello Anonymous</blockquote>",
|
||||
"<blockquote>function greeting(name = \"Anonymous\") {<br> return \"Hello \" + name;<br>}<br>console.log(greeting(\"John\")); // Hello John<br>console.log(greeting()); // Hello Anonymous</blockquote>",
|
||||
"The default parameter kicks in when the argument is not specified (it is undefined). As you can see in the example above, the parameter <code>name</code> will receive its default value <code>\"Anonymous\"</code> when you do not provide a value for the parameter. You can add default values for as many parameters as you want.",
|
||||
"<hr>",
|
||||
"Modify the function <code>increment</code> by adding default parameters so that it will add 1 to <code>number</code> if <code>value</code> is not specified."
|
||||
@ -526,7 +526,7 @@
|
||||
"description": [
|
||||
"In order to help us create more flexible functions, ES6 introduces the <dfn>rest operator</dfn> for function parameters. With the rest operator, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.",
|
||||
"Check out this code:",
|
||||
"<blockquote>function howMany(...args) {<br> return \"You have passed \" + args.length + \" arguments.\";<br>}<br>console.log(howMany(0, 1, 2)); // You have passed 3 arguments<br>console.log(howMany(\"string\", null, [1, 2, 3], { })); // You have passed 4 arguments.</blockquote>",
|
||||
"<blockquote>function howMany(...args) {<br> return \"You have passed \" + args.length + \" arguments.\";<br>}<br>console.log(howMany(0, 1, 2)); // You have passed 3 arguments<br>console.log(howMany(\"string\", null, [1, 2, 3], { })); // You have passed 4 arguments.</blockquote>",
|
||||
"The rest operator eliminates the need to check the <code>args</code> array and allows us to apply <code>map()</code>, <code>filter()</code> and <code>reduce()</code> on the parameters array.",
|
||||
"<hr>",
|
||||
"Modify the function <code>sum</code> so that it uses the rest operator and it works in the same way with any number of parameters."
|
||||
@ -691,7 +691,7 @@
|
||||
"description": [
|
||||
"We can similarly destructure <em>nested</em> objects into variables.",
|
||||
"Consider the following code:",
|
||||
"<blockquote>const a = {<br> start: { x: 5, y: 6},<br> end: { x: 6, y: -9 }<br>};<br>const { start : { x: startX, y: startY }} = a;<br>console.log(startX, startY); // 5, 6</blockquote>",
|
||||
"<blockquote>const a = {<br> start: { x: 5, y: 6},<br> end: { x: 6, y: -9 }<br>};<br>const { start : { x: startX, y: startY }} = a;<br>console.log(startX, startY); // 5, 6</blockquote>",
|
||||
"In the example above, the variable <code>start</code> is assigned the value of <code>a.start</code>, which is also an object.",
|
||||
"<hr>",
|
||||
"Use destructuring assignment to obtain <code>max</code> of <code>forecast.tomorrow</code> and assign it to <code>maxOfTomorrow</code>."
|
||||
@ -845,9 +845,9 @@
|
||||
"description": [
|
||||
"In some cases, you can destructure the object in a function argument itself.",
|
||||
"Consider the code below:",
|
||||
"<blockquote>const profileUpdate = (profileData) => {<br> const { name, age, nationality, location } = profileData;<br> // do something with these variables<br>}</blockquote>",
|
||||
"<blockquote>const profileUpdate = (profileData) => {<br> const { name, age, nationality, location } = profileData;<br> // do something with these variables<br>}</blockquote>",
|
||||
"This effectively destructures the object sent into the function. This can also be done in-place:",
|
||||
"<blockquote>const profileUpdate = ({ name, age, nationality, location }) => {<br> /* do something with these fields */<br>}</blockquote>",
|
||||
"<blockquote>const profileUpdate = ({ name, age, nationality, location }) => {<br> /* do something with these fields */<br>}</blockquote>",
|
||||
"This removes some extra lines and makes our code look neat.",
|
||||
"This has the added benefit of not having to manipulate an entire object in a function; only the fields that are needed are copied inside the function.",
|
||||
"<hr>",
|
||||
@ -909,7 +909,7 @@
|
||||
"description": [
|
||||
"A new feature of ES6 is the <dfn>template literal</dfn>. This is a special type of string that allows you to use string interpolation features to create strings.",
|
||||
"Consider the code below:",
|
||||
"<blockquote>const person = {<br> name: \"Zodiac Hasbro\",<br> age: 56<br>};<br><br>// string interpolation<br>const greeting = `Hello, my name is ${person.name}!<br>I am ${person.age} years old.`;<br><br>console.log(greeting); // prints<br>// Hello, my name is Zodiac Hasbro!<br>// I am 56 years old.<br></blockquote>",
|
||||
"<blockquote>const person = {<br> name: \"Zodiac Hasbro\",<br> age: 56<br>};<br><br>// string interpolation<br>const greeting = `Hello, my name is ${person.name}!<br>I am ${person.age} years old.`;<br><br>console.log(greeting); // prints<br>// Hello, my name is Zodiac Hasbro!<br>// I am 56 years old.<br></blockquote>",
|
||||
"A lot of things happened there.",
|
||||
"Firstly, the <code>${variable}</code> syntax used above is a place holder. Basically, you won't have to use concatenation with the <code>+</code> operator anymore. To add variables to strings, you just drop the variable in a template string and wrap it with <code>${</code> and <code>}</code>.",
|
||||
"Secondly, the example uses backticks (<code>`</code>), not quotes (<code>'</code> or <code>\"</code>), to wrap the string. Notice that the string is multi-line.",
|
||||
@ -973,7 +973,7 @@
|
||||
"description": [
|
||||
"ES6 adds some nice support for easily defining object literals.",
|
||||
"Consider the following code:",
|
||||
"<blockquote>const getMousePosition = (x, y) => ({<br> x: x,<br> y: y<br>});</blockquote>",
|
||||
"<blockquote>const getMousePosition = (x, y) => ({<br> x: x,<br> y: y<br>});</blockquote>",
|
||||
"<code>getMousePosition</code> is a simple function that returns an object containing two fields.",
|
||||
"ES6 provides the syntactic sugar to eliminate the redundancy of having to write <code>x: x</code>. You can simply write <code>x</code> once, and it will be converted to<code>x: x</code> (or something equivalent) under the hood.",
|
||||
"Here is the same function from above rewritten to use this new syntax:",
|
||||
@ -1022,9 +1022,9 @@
|
||||
"title": "Write Concise Declarative Functions with ES6",
|
||||
"description": [
|
||||
"When defining functions within objects in ES5, we have to use the keyword <code>function</code> as follows:",
|
||||
"<blockquote>const person = {<br> name: \"Taylor\",<br> sayHello: function() {<br> return `Hello! My name is ${this.name}.`;<br> }<br>};</blockquote>",
|
||||
"<blockquote>const person = {<br> name: \"Taylor\",<br> sayHello: function() {<br> return `Hello! My name is ${this.name}.`;<br> }<br>};</blockquote>",
|
||||
"With ES6, You can remove the <code>function</code> keyword and colon altogether when defining functions in objects. Here's an example of this syntax:",
|
||||
"<blockquote>const person = {<br> name: \"Taylor\",<br> sayHello() {<br> return `Hello! My name is ${this.name}.`;<br> }<br>};</blockquote>",
|
||||
"<blockquote>const person = {<br> name: \"Taylor\",<br> sayHello() {<br> return `Hello! My name is ${this.name}.`;<br> }<br>};</blockquote>",
|
||||
"<hr>",
|
||||
"Refactor the function <code>setGear</code> inside the object <code>bicycle</code> to use the shorthand syntax described above."
|
||||
],
|
||||
@ -1071,9 +1071,9 @@
|
||||
"ES6 provides a new syntax to help create objects, using the keyword <dfn>class</dfn>.",
|
||||
"This is to be noted, that the <code>class</code> syntax is just a syntax, and not a full-fledged class based implementation of object oriented paradigm, unlike in languages like Java, or Python, or Ruby etc.",
|
||||
"In ES5, we usually define a constructor function, and use the <code>new</code> keyword to instantiate an object.",
|
||||
"<blockquote>var SpaceShuttle = function(targetPlanet){<br> this.targetPlanet = targetPlanet;<br>}<br>var zeus = new SpaceShuttle('Jupiter');</blockquote>",
|
||||
"<blockquote>var SpaceShuttle = function(targetPlanet){<br> this.targetPlanet = targetPlanet;<br>}<br>var zeus = new SpaceShuttle('Jupiter');</blockquote>",
|
||||
"The class syntax simply replaces the constructor function creation:",
|
||||
"<blockquote>class SpaceShuttle {<br> constructor(targetPlanet){<br> this.targetPlanet = targetPlanet;<br> }<br>}<br>const zeus = new SpaceShuttle('Jupiter');</blockquote>",
|
||||
"<blockquote>class SpaceShuttle {<br> constructor(targetPlanet){<br> this.targetPlanet = targetPlanet;<br> }<br>}<br>const zeus = new SpaceShuttle('Jupiter');</blockquote>",
|
||||
"Notice that the <code>class</code> keyword declares a new function, and a constructor was added, which would be invoked when <code>new</code> is called - to create a new object.",
|
||||
"<hr>",
|
||||
"Use <code>class</code> keyword and write a proper constructor to create the <code>Vegetable</code> class.",
|
||||
@ -1126,7 +1126,7 @@
|
||||
"These are classically called <dfn>getters</dfn> and <dfn>setters</dfn>.",
|
||||
"Getter functions are meant to simply return (get) the value of an object's private variable to the user without the user directly accessing the private variable.",
|
||||
"Setter functions are meant to modify (set) the value of an object's private variable based on the value passed into the setter function. This change could involve calculations, or even overwriting the previous value completely.",
|
||||
"<blockquote>class Book {<br> constructor(author) {<br> this._author = author;<br> }<br> // getter<br> get writer(){<br> return this._author;<br> }<br> // setter<br> set writer(updatedAuthor){<br> this._author = updatedAuthor;<br> }<br>}<br>const lol = new Book('anonymous');<br>console.log(lol.writer);<br>lol.writer = 'wut';<br>console.log(lol.writer);</blockquote>",
|
||||
"<blockquote>class Book {<br> constructor(author) {<br> this._author = author;<br> }<br> // getter<br> get writer(){<br> return this._author;<br> }<br> // setter<br> set writer(updatedAuthor){<br> this._author = updatedAuthor;<br> }<br>}<br>const lol = new Book('anonymous');<br>console.log(lol.writer);<br>lol.writer = 'wut';<br>console.log(lol.writer);</blockquote>",
|
||||
"Notice the syntax we are using to invoke the getter and setter - as if they are not even functions.",
|
||||
"Getters and setters are important, because they hide internal implementation details.",
|
||||
"<hr>",
|
||||
@ -1231,9 +1231,9 @@
|
||||
"description": [
|
||||
"In the previous challenge, you learned about <code>import</code> and how it can be leveraged to import small amounts of code from large files. In order for this to work, though, we must utilize one of the statements that goes with <code>import</code>, known as <dfn>export</dfn>. When we want some code - a function, or a variable - to be usable in another file, we must export it in order to import it into another file. Like <code>import</code>, <code>export</code> is a non-browser feature.",
|
||||
"The following is what we refer to as a <dfn>named export</dfn>. With this, we can import any code we export into another file with the <code>import</code> syntax you learned in the last lesson. Here's an example:",
|
||||
"<blockquote>const capitalizeString = (string) => {<br> return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>export { capitalizeString } //How to export functions.<br>export const foo = \"bar\"; //How to export variables.</blockquote>",
|
||||
"<blockquote>const capitalizeString = (string) => {<br> return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>export { capitalizeString } //How to export functions.<br>export const foo = \"bar\"; //How to export variables.</blockquote>",
|
||||
"Alternatively, if you would like to compact all your <code>export</code> statements into one line, you can take this approach:",
|
||||
"<blockquote>const capitalizeString = (string) => {<br> return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>const foo = \"bar\";<br>export { capitalizeString, foo }</blockquote>",
|
||||
"<blockquote>const capitalizeString = (string) => {<br> return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>const foo = \"bar\";<br>export { capitalizeString, foo }</blockquote>",
|
||||
"Either approach is perfectly acceptable.",
|
||||
"<hr>",
|
||||
"Below are two variables that I want to make available for other files to use. Utilizing the first way I demonstrated <code>export</code>, export the two variables."
|
||||
@ -1317,7 +1317,7 @@
|
||||
"In the <code>export</code> lesson, you learned about the syntax referred to as a <dfn>named export</dfn>. This allowed you to make multiple functions and variables available for use in other files.",
|
||||
"There is another <code>export</code> syntax you need to know, known as <dfn>export default</dfn>. Usually you will use this syntax if only one value is being exported from a file. It is also used to create a fallback value for a file or module.",
|
||||
"Here is a quick example of <code>export default</code>:",
|
||||
"<blockquote>export default function add(x,y) {<br> return x + y;<br>}</blockquote>",
|
||||
"<blockquote>export default function add(x,y) {<br> return x + y;<br>}</blockquote>",
|
||||
"Note: Since <code>export default</code> is used to declare a fallback value for a module or file, you can only have one value be a default export in each module or file. Additionally, you cannot use <code>export default</code> with <code>var</code>, <code>let</code>, or <code>const</code>",
|
||||
"<hr>",
|
||||
"The following function should be the fallback value for the module. Please add the necessary code to do so."
|
||||
|
||||
@ -216,7 +216,7 @@
|
||||
"description": [
|
||||
"In the last challenge, you created a Redux store to handle the messages array and created an action for adding new messages. The next step is to provide React access to the Redux store and the actions it needs to dispatch updates. React Redux provides its <code>react-redux</code> package to help accomplish these tasks.",
|
||||
"React Redux provides a small API with two key features: <code>Provider</code> and <code>connect</code>. Another challenge covers <code>connect</code>. The <code>Provider</code> is a wrapper component from React Redux that wraps your React app. This wrapper then allows you to access the Redux <code>store</code> and <code>dispatch</code> functions throughout your component tree. <code>Provider</code> takes two props, the Redux store and the child components of your app. Defining the <code>Provider</code> for an App component might look like this:",
|
||||
"<blockquote><Provider store={store}><br> <App/><br></Provider></blockquote>",
|
||||
"<blockquote><Provider store={store}><br> <App/><br></Provider></blockquote>",
|
||||
"<hr>",
|
||||
"The code editor now shows all your Redux and React code from the past several challenges. It includes the Redux store, actions, and the <code>DisplayMessages</code> component. The only new piece is the <code>AppWrapper</code> component at the bottom. Use this top level component to render the <code>Provider</code> from <code>ReactRedux</code>, and pass the Redux store as a prop. Then render the <code>DisplayMessages</code> component as a child. Once you are finished, you should see your React component rendered to the page.",
|
||||
"<strong>Note:</strong> React Redux is available as a global variable here, so you can access the Provider with dot notation. The code in the editor takes advantage of this and sets it to a constant <code>Provider</code> for you to use in the <code>AppWrapper</code> render method."
|
||||
@ -397,7 +397,7 @@
|
||||
"description": [
|
||||
"The <code>mapDispatchToProps()</code> function is used to provide specific action creators to your React components so they can dispatch actions against the Redux store. It's similar in structure to the <code>mapStateToProps()</code> function you wrote in the last challenge. It returns an object that maps dispatch actions to property names, which become component <code>props</code>. However, instead of returning a piece of <code>state</code>, each property returns a function that calls <code>dispatch</code> with an action creator and any relevant action data. You have access to this <code>dispatch</code> because it's passed in to <code>mapDispatchToProps()</code> as a parameter when you define the function, just like you passed <code>state</code> to <code>mapStateToProps()</code>. Behind the scenes, React Redux is using Redux's <code>store.dispatch()</code> to conduct these dispatches with <code>mapDispatchToProps()</code>. This is similar to how it uses <code>store.subscribe()</code> for components that are mapped to <code>state</code>.",
|
||||
"For example, you have a <code>loginUser()</code> action creator that takes a <code>username</code> as an action payload. The object returned from <code>mapDispatchToProps()</code> for this action creator would look something like:",
|
||||
"<blockquote>{<br> submitLoginUser: function(username) {<br> dispatch(loginUser(username));<br> }<br>}</blockquote>",
|
||||
"<blockquote>{<br> submitLoginUser: function(username) {<br> dispatch(loginUser(username));<br> }<br>}</blockquote>",
|
||||
"<hr>",
|
||||
"The code editor provides an action creator called <code>addMessage()</code>. Write the function <code>mapDispatchToProps()</code> that takes <code>dispatch</code> as an argument, then returns an object. The object should have a property <code>submitNewMessage</code> set to the dispatch function, which takes a parameter for the new message to add when it dispatches <code>addMessage()</code>."
|
||||
],
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
"For instance, several JSX elements written as siblings with no parent wrapper element will not transpile.",
|
||||
"Here's an example:",
|
||||
"<b>Valid JSX:</b>",
|
||||
"<blockquote><div><br> <p>Paragraph One</p><br> <p>Paragraph Two</p><br> <p>Paragraph Three</p><br></div></blockquote>",
|
||||
"<blockquote><div><br> <p>Paragraph One</p><br> <p>Paragraph Two</p><br> <p>Paragraph Three</p><br></div></blockquote>",
|
||||
"<b>Invalid JSX:</b>",
|
||||
"<blockquote><p>Paragraph One</p><br><p>Paragraph Two</p><br><p>Paragraph Three</p><br></blockquote>",
|
||||
"<hr>",
|
||||
@ -349,7 +349,7 @@
|
||||
"Components are the core of React. Everything in React is a component and here you will learn how to create one.",
|
||||
"There are two ways to create a React component. The first way is to use a JavaScript function. Defining a component in this way creates a <em>stateless functional component</em>. The concept of state in an application will be covered in later challenges. For now, think of a stateless component as one that can receive data and render it, but does not manage or track changes to that data. (We'll cover the second way to create a React component in the next challenge.)",
|
||||
"To create a component with a function, you simply write a JavaScript function that returns either JSX or <code>null</code>. One important thing to note is that React requires your function name to begin with a capital letter. Here's an example of a stateless functional component that assigns an HTML class in JSX:",
|
||||
"<blockquote>// After being transpiled, the <div> will have a CSS class of 'customClass'<br>const DemoComponent = function() {<br> return (<br> <div className='customClass' /><br> );<br>};</blockquote>",
|
||||
"<blockquote>// After being transpiled, the <div> will have a CSS class of 'customClass'<br>const DemoComponent = function() {<br> return (<br> <div className='customClass' /><br> );<br>};</blockquote>",
|
||||
"Because a JSX component represents HTML, you could put several components together to create a more complex HTML page. This is one of the key advantages of the component architecture React provides. It allows you to compose your UI from many separate, isolated components. This makes it easier to build and maintain complex user interfaces.",
|
||||
"<hr>",
|
||||
"The code editor has a function called <code>MyComponent</code>. Complete this function so it returns a single <code>div</code> element which contains some string of text.",
|
||||
@ -403,7 +403,7 @@
|
||||
"releasedOn": "December 25, 2017",
|
||||
"description": [
|
||||
"The other way to define a React component is with the ES6 <code>class</code> syntax. In the following example, <code>Kitten</code> extends <code>React.Component</code>:",
|
||||
"<blockquote>class Kitten extends React.Component {<br> constructor(props) {<br> super(props);<br> }<br><br> render() {<br> return (<br> <h1>Hi</h1><br> );<br> }<br>}</blockquote>",
|
||||
"<blockquote>class Kitten extends React.Component {<br> constructor(props) {<br> super(props);<br> }<br><br> render() {<br> return (<br> <h1>Hi</h1><br> );<br> }<br>}</blockquote>",
|
||||
"This creates an ES6 class <code>Kitten</code> which extends the <code>React.Component</code> class. So the <code>Kitten</code> class now has access to many useful React features, such as local state and lifecycle hooks. Don't worry if you aren't familiar with these terms yet, they will be covered in greater detail in later challenges.",
|
||||
"Also notice the <code>Kitten</code> class has a <code>constructor</code> defined within it that calls <code>super()</code>. It uses <code>super()</code> to call the constructor of the parent class, in this case <code>React.Component</code>. The constructor is a special method used during the initialization of objects that are created with the <code>class</code> keyword. It is best practice to call a component's <code>constructor</code> with <code>super</code>, and pass <code>props</code> to both. This makes sure the component is initialized properly. For now, know that it is standard for this code to be included. Soon you will see other uses for the constructor as well as <code>props</code>.",
|
||||
"<hr>",
|
||||
@ -464,7 +464,7 @@
|
||||
"description": [
|
||||
"Now we will look at how we can compose multiple React components together. Imagine you are building an App and have created three components, a <code>Navbar</code>, <code>Dashboard</code>, and <code>Footer</code>.",
|
||||
"To compose these components together, you could create an <code>App</code> <i>parent</i> component which renders each of these three components as <i>children</i>. To render a component as a child in a React component, you include the component name written as a custom HTML tag in the JSX. For example, in the <code>render</code> method you could write:",
|
||||
"<blockquote>return (<br> <App><br> <Navbar /><br> <Dashboard /><br> <Footer /><br> </App><br>)</blockquote>",
|
||||
"<blockquote>return (<br> <App><br> <Navbar /><br> <Dashboard /><br> <Footer /><br> </App><br>)</blockquote>",
|
||||
"When React encounters a custom HTML tag that references another component (a component name wrapped in <code>< /></code> like in this example), it renders the markup for that component in the location of the tag. This should illustrate the parent/child relationship between the <code>App</code> component and the <code>Navbar</code>, <code>Dashboard</code>, and <code>Footer</code>.",
|
||||
"<hr>",
|
||||
"In the code editor, there is a simple functional component called <code>ChildComponent</code> and a React component called <code>ParentComponent</code>. Compose the two together by rendering the <code>ChildComponent</code> within the <code>ParentComponent</code>. Make sure to close the <code>ChildComponent</code> tag with a forward slash.",
|
||||
@ -898,7 +898,7 @@
|
||||
"releasedOn": "December 25, 2017",
|
||||
"description": [
|
||||
"The previous challenges covered a lot about creating and composing JSX elements, functional components, and ES6 style class components in React. With this foundation, it's time to look at another feature very common in React: <b>props</b>. In React, you can pass props, or properties, to child components. Say you have an <code>App</code> component which renders a child component called <code>Welcome</code> that is a stateless functional component. You can pass <code>Welcome</code> a <code>user</code> property by writing:",
|
||||
"<blockquote><App><br> <Welcome user='Mark' /><br></App></blockquote>",
|
||||
"<blockquote><App><br> <Welcome user='Mark' /><br></App></blockquote>",
|
||||
"You use <strong>custom HTML attributes</strong> that React provides support for to pass the property <code>user</code> to the component <code>Welcome</code>. Since <code>Welcome</code> is a stateless functional component, it has access to this value like so:",
|
||||
"<blockquote>const Welcome = (props) => <h1>Hello, {props.user}!</h1></blockquote>",
|
||||
"It is standard to call this value <code>props</code> and when dealing with stateless functional components, you basically consider it as an argument to a function which returns JSX. You can access the value of the argument in the function body. With class components, you will see this is a little different.",
|
||||
@ -980,7 +980,7 @@
|
||||
"releasedOn": "December 25, 2017",
|
||||
"description": [
|
||||
"The last challenge demonstrated how to pass information from a parent component to a child component as <code>props</code> or properties. This challenge looks at how arrays can be passed as <code>props</code>. To pass an array to a JSX element, it must be treated as JavaScript and wrapped in curly braces.",
|
||||
"<blockquote><ParentComponent><br> <ChildComponent colors={[\"green\", \"blue\", \"red\"]} /><br></ParentComponent></blockquote>",
|
||||
"<blockquote><ParentComponent><br> <ChildComponent colors={[\"green\", \"blue\", \"red\"]} /><br></ParentComponent></blockquote>",
|
||||
"The child component then has access to the array property <code>colors</code>. Array methods such as <code>join()</code> can be used when accessing the property.",
|
||||
"<code>const ChildComponent = (props) => <p>{props.colors.join(', ')}</p></code>",
|
||||
"This will join all <code>colors</code> array items into a comma separated string and produce:",
|
||||
@ -1416,7 +1416,7 @@
|
||||
"description": [
|
||||
"One of the most important topics in React is <code>state</code>. State consists of any data your application needs to know about, that can change over time. You want your apps to respond to state changes and present an updated UI when necessary. React offers a nice solution for the state management of modern web applications.",
|
||||
"You create state in a React component by declaring a <code>state</code> property on the component class in its <code>constructor</code>. This initializes the component with <code>state</code> when it is created. The <code>state</code> property must be set to a JavaScript <code>object</code>. Declaring it looks like this:",
|
||||
"<blockquote>this.state = {<br> // describe your state here<br>}</code>",
|
||||
"<blockquote>this.state = {<br> // describe your state here<br>}</code>",
|
||||
"You have access to the <code>state</code> object throughout the life of your component. You can update it, render it in your UI, and pass it as props to child components. The <code>state</code> object can be as complex or as simple as you need it to be. Note that you must create a class component by extending <code>React.Component</code> in order to create <code>state</code> like this.",
|
||||
"<hr>",
|
||||
"There is a component in the code editor that is trying to render a <code>name</code> property from its <code>state</code>. However, there is no <code>state</code> defined. Initialize the component with <code>state</code> in the <code>constructor</code> and assign your name to a property of <code>name</code>."
|
||||
@ -1615,7 +1615,7 @@
|
||||
"releasedOn": "December 25, 2017",
|
||||
"description": [
|
||||
"The previous challenges covered component <code>state</code> and how to initialize state in the <code>constructor</code>. There is also a way to change the component's <code>state</code>. React provides a method for updating component <code>state</code> called <code>setState</code>. You call the <code>setState</code> method within your component class like so: <code>this.setState()</code>, passing in an object with key-value pairs. The keys are your state properties and the values are the updated state data. For instance, if we were storing a <code>username</code> in state and wanted to update it, it would look like this:",
|
||||
"<blockquote>this.setState({<br> username: 'Lewis'<br>});</blockquote>",
|
||||
"<blockquote>this.setState({<br> username: 'Lewis'<br>});</blockquote>",
|
||||
"React expects you to never modify <code>state</code> directly, instead always use <code>this.setState()</code> when state changes occur. Also, you should note that React may batch multiple state updates in order to improve performance. What this means is that state updates through the <code>setState</code> method can be asynchronous. There is an alternative syntax for the <code>setState</code> method which provides a way around this problem. This is rarely needed but it's good to keep it in mind! Please consult the <a target=\"_blank\" href=\"https://facebook.github.io/react/docs/state-and-lifecycle.html\">React documentation</a> for further details.",
|
||||
"<hr>",
|
||||
"There is a <code>button</code> element in the code editor which has an <code>onClick()</code> handler. This handler is triggered when the <code>button</code> receives a click event in the browser, and runs the <code>handleClick</code> method defined on <code>MyComponent</code>. Within the <code>handleClick</code> method, update the component <code>state</code> using <code>this.setState()</code>. Set the <code>name</code> property in <code>state</code> to equal the string <code>React Rocks!</code>.",
|
||||
|
||||
@ -576,7 +576,7 @@
|
||||
"When the state of your app begins to grow more complex, it may be tempting to divide state into multiple pieces. Instead, remember the first principle of Redux: all app state is held in a single state object in the store. Therefore, Redux provides reducer composition as a solution for a complex state model. You define multiple reducers to handle different pieces of your application's state, then compose these reducers together into one root reducer. The root reducer is then passed into the Redux <code>createStore()</code> method.",
|
||||
"In order to let us combine multiple reducers together, Redux provides the <code>combineReducers()</code> method. This method accepts an object as an argument in which you define properties which associate keys to specific reducer functions. The name you give to the keys will be used by Redux as the name for the associated piece of state.",
|
||||
"Typically, it is a good practice to create a reducer for each piece of application state when they are distinct or unique in some way. For example, in a note-taking app with user authentication, one reducer could handle authentication while another handles the text and notes that the user is submitting. For such an application, we might write the <code>combineReducers()</code> method like this:",
|
||||
"<blockquote>const rootReducer = Redux.combineReducers({<br> auth: authenticationReducer,<br> notes: notesReducer<br>});</blockquote>",
|
||||
"<blockquote>const rootReducer = Redux.combineReducers({<br> auth: authenticationReducer,<br> notes: notesReducer<br>});</blockquote>",
|
||||
"Now, the key <code>notes</code> will contain all of the state associated with our notes and handled by our <code>notesReducer</code>. This is how multiple reducers can be composed to manage more complex application state. In this example, the state held in the Redux store would then be a single object containing <code>auth</code> and <code>notes</code> properties.",
|
||||
"<hr>",
|
||||
"There are <code>counterReducer()</code> and <code>authReducer()</code> functions provided in the code editor, along with a Redux store. Finish writing the <code>rootReducer()</code> function using the <code>Redux.combineReducers()</code> method. Assign <code>counterReducer</code> to a key called <code>count</code> and <code>authReducer</code> to a key called <code>auth</code>."
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
"The <code>append()</code> method takes an argument for the element you want to add to the document. It appends an HTML node to a selected item, and returns a handle to that node.",
|
||||
"The <code>text()</code> method either sets the text of the selected node, or gets the current text. To set the value, you pass a string as an argument inside the parentheses of the method.",
|
||||
"Here's an example that selects an unordered list, appends a list item, and adds text:",
|
||||
"<blockquote>d3.select(\"ul\")<br> .append(\"li\")<br> .text(\"Very important item\");</blockquote>",
|
||||
"<blockquote>d3.select(\"ul\")<br> .append(\"li\")<br> .text(\"Very important item\");</blockquote>",
|
||||
"D3 allows you to chain several methods together with periods to perform a number of actions in a row.",
|
||||
"<hr>",
|
||||
"Use the <code>select</code> method to select the <code>body</code> tag in the document. Then <code>append</code> an <code>h1</code> tag to it, and add the text \"Learning D3\" into the <code>h1</code> element."
|
||||
@ -152,7 +152,7 @@
|
||||
"A common workflow pattern is to create a new element in the document for each piece of data in the set. D3 has the <code>enter()</code> method for this purpose.",
|
||||
"When <code>enter()</code> is combined with the <code>data()</code> method, it looks at the selected elements from the page and compares them to the number of data items in the set. If there are fewer elements than data items, it creates the missing elements.",
|
||||
"Here is an example that selects a <code>ul</code> element and creates a new list item based on the number of entries in the array:",
|
||||
"<blockquote><body><br> <ul></ul><br> <script><br> const dataset = [\"a\", \"b\", \"c\"];<br> d3.select(\"ul\").selectAll(\"li\")<br> .data(dataset)<br> .enter()<br> .append(\"li\")<br> .text(\"New item\");<br> </script><br></body></blockquote>",
|
||||
"<blockquote><body><br> <ul></ul><br> <script><br> const dataset = [\"a\", \"b\", \"c\"];<br> d3.select(\"ul\").selectAll(\"li\")<br> .data(dataset)<br> .enter()<br> .append(\"li\")<br> .text(\"New item\");<br> </script><br></body></blockquote>",
|
||||
"It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the <code>ul</code> on the page. Next, select all list items, which returns an empty selection. Then the <code>data()</code> method reviews the dataset and runs the following code three times, once for each item in the array. The <code>enter()</code> method sees there are no <code>li</code> elements on the page, but it needs 3 (one for each piece of data in <code>dataset</code>). New <code>li</code> elements are appended to the <code>ul</code> and have the text \"New item\".",
|
||||
"<hr>",
|
||||
"Select the <code>body</code> node, then select all <code>h2</code> elements. Have D3 create and append an <code>h2</code> tag for each item in the <code>dataset</code> array. The text in the <code>h2</code> should say \"New Title\". Your code should use the <code>data()</code> and <code>enter()</code> methods."
|
||||
@ -360,7 +360,7 @@
|
||||
"description": [
|
||||
"D3 is about visualization and presentation of data. It's likely you'll want to change the styling of elements based on the data. You can use a callback function in the <code>style()</code> method to change the styling for different elements.",
|
||||
"For example, you may want to color a data point blue if has a value less than 20, and red otherwise. You can use a callback function in the <code>style()</code> method and include the conditional logic. The callback function uses the <code>d</code> parameter to represent the data point:",
|
||||
"<blockquote>selection.style(\"color\", (d) => {<br> /* Logic that returns the color based on a condition */<br>});</blockquote>",
|
||||
"<blockquote>selection.style(\"color\", (d) => {<br> /* Logic that returns the color based on a condition */<br>});</blockquote>",
|
||||
"The <code>style()</code> method is not limited to setting the <code>color</code> - it can be used with other CSS properties as well.",
|
||||
"<hr>",
|
||||
"Add the <code>style()</code> method to the code in the editor to set the <code>color</code> of the <code>h2</code> elements conditionally. Write the callback function so if the data value is less than 20, it returns \"red\", otherwise it returns \"green\".",
|
||||
@ -848,7 +848,7 @@
|
||||
"description": [
|
||||
"The last challenge added only one rectangle to the <code>svg</code> element to represent a bar. Here, you'll combine what you've learned so far about <code>data()</code>, <code>enter()</code>, and SVG shapes to create and append a rectangle for each data point in <code>dataset</code>.",
|
||||
"A previous challenge showed the format for how to create and append a <code>div</code> for each item in <code>dataset</code>:",
|
||||
"<blockquote>d3.select(\"body\").selectAll(\"div\")<br> .data(dataset)<br> .enter()<br> .append(\"div\")</blockquote>",
|
||||
"<blockquote>d3.select(\"body\").selectAll(\"div\")<br> .data(dataset)<br> .enter()<br> .append(\"div\")</blockquote>",
|
||||
"There are a few differences working with <code>rect</code> elements instead of <code>divs</code>. The <code>rects</code> must be appended to an <code>svg</code> element, not directly to the <code>body</code>. Also, you need to tell D3 where to place each <code>rect</code> within the <code>svg</code> area. The bar placement will be covered in the next challenge.",
|
||||
"<hr>",
|
||||
"Use the <code>data()</code>, <code>enter()</code>, and <code>append()</code> methods to create and append a <code>rect</code> for each item in <code>dataset</code>. The bars should display all on top of each other, this will be fixed in the next challenge."
|
||||
@ -925,7 +925,7 @@
|
||||
"The placement of a rectangle is handled by the <code>x</code> and <code>y</code> attributes. They tell D3 where to start drawing the shape in the <code>svg</code> area. The last challenge set them each to 0, so every bar was placed in the upper-left corner.",
|
||||
"For a bar chart, all of the bars should sit on the same vertical level, which means the <code>y</code> value stays the same (at 0) for all bars. The <code>x</code> value, however, needs to change as you add new bars. Remember that larger <code>x</code> values push items farther to the right. As you go through the array elements in <code>dataset</code>, the x value should increase.",
|
||||
"The <code>attr()</code> method in D3 accepts a callback function to dynamically set that attribute. The callback function takes two arguments, one for the data point itself (usually <code>d</code>) and one for the index of the data point in the array. The second argument for the index is optional. Here's the format:",
|
||||
"<blockquote>selection.attr(\"property\", (d, i) => {<br> /* <br> * d is the data point value<br> * i is the index of the data point in the array<br> */<br>})</blockquote>",
|
||||
"<blockquote>selection.attr(\"property\", (d, i) => {<br> /* <br> * d is the data point value<br> * i is the index of the data point in the array<br> */<br>})</blockquote>",
|
||||
"It's important to note that you do NOT need to write a <code>for</code> loop or use <code>forEach()</code> to iterate over the items in the data set. Recall that the <code>data()</code> method parses the data set, and any method that's chained after <code>data()</code> is run once for each item in the data set.",
|
||||
"<hr>",
|
||||
"Change the <code>x</code> attribute callback function so it returns the index times 30.",
|
||||
@ -1024,7 +1024,7 @@
|
||||
],
|
||||
"description": [
|
||||
"The height of each bar can be set to the value of the data point in the array, similar to how the <code>x</code> value was set dynamically.",
|
||||
"<blockquote>selection.attr(\"property\", (d, i) => {<br> /* <br> * d is the data point value<br> * i is the index of the data point in the array<br> */<br>})</blockquote>",
|
||||
"<blockquote>selection.attr(\"property\", (d, i) => {<br> /* <br> * d is the data point value<br> * i is the index of the data point in the array<br> */<br>})</blockquote>",
|
||||
"<hr>",
|
||||
"Change the callback function for the <code>height</code> attribute to return the data value times 3.",
|
||||
"<strong>Note</strong><br>Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example."
|
||||
@ -2172,7 +2172,7 @@
|
||||
"Given a complex data set, one priority is to set the scale so the visualization fits the SVG container's width and height. You want all the data plotted inside the SVG canvas so it's visible on the web page.",
|
||||
"The example below sets the x-axis scale for scatter plot data. The <code>domain()</code> method passes information to the scale about the raw data values for the plot. The <code>range()</code> method gives it information about the actual space on the web page for the visualization.",
|
||||
"In the example, the domain goes from 0 to the maximum in the set. It uses the <code>max()</code> method with a callback function based on the x values in the arrays. The range uses the SVG canvas' width (<code>w</code>), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG canvas.",
|
||||
"<blockquote>const dataset = [<br> [ 34, 78 ],<br> [ 109, 280 ],<br> [ 310, 120 ],<br> [ 79, 411 ],<br> [ 420, 220 ],<br> [ 233, 145 ],<br> [ 333, 96 ],<br> [ 222, 333 ],<br> [ 78, 320 ],<br> [ 21, 123 ]<br> ];<br>const w = 500;<br>const h = 500;<br><br>// Padding between the SVG canvas boundary and the plot<br>const padding = 30;<br>const xScale = d3.scaleLinear()<br> .domain([0, d3.max(dataset, (d) => d[0])])<br> .range([padding, w - padding]);</blockquote>",
|
||||
"<blockquote>const dataset = [<br> [ 34, 78 ],<br> [ 109, 280 ],<br> [ 310, 120 ],<br> [ 79, 411 ],<br> [ 420, 220 ],<br> [ 233, 145 ],<br> [ 333, 96 ],<br> [ 222, 333 ],<br> [ 78, 320 ],<br> [ 21, 123 ]<br>];<br>const w = 500;<br>const h = 500;<br><br>// Padding between the SVG canvas boundary and the plot<br>const padding = 30;<br>const xScale = d3.scaleLinear()<br> .domain([0, d3.max(dataset, (d) => d[0])])<br> .range([padding, w - padding]);</blockquote>",
|
||||
"The padding may be confusing at first. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG canvas). Including the padding in the <code>range()</code> method forces the plot to start at 30 along that line (instead of 0), and end at 470 (instead of 500).",
|
||||
"<hr>",
|
||||
"Use the <code>yScale</code> variable to create a linear y-axis scale. The domain should start at zero and go to the maximum y value in the set. The range should use the SVG height (<code>h</code>) and include padding.",
|
||||
@ -2260,7 +2260,7 @@
|
||||
"description": [
|
||||
"With the scales set up, it's time to map the scatter plot again. The scales are like processing functions that turn the x and y raw data into values that fit and render correctly on the SVG canvas. They keep the data within the screen's plotting area.",
|
||||
"You set the coordinate attribute values for an SVG shape with the scaling function. This includes <code>x</code> and <code>y</code> attributes for <code>rect</code> or <code>text</code> elements, or <code>cx</code> and <code>cy</code> for <code>circles</code>. Here's an example:",
|
||||
"<blockquote>shape<br> .attr(\"x\", (d) => xScale(d[0]))</blockquote>",
|
||||
"<blockquote>shape<br> .attr(\"x\", (d) => xScale(d[0]))</blockquote>",
|
||||
"Scales set shape coordinate attributes to place the data points onto the SVG canvas. You don't need to apply scales when you display the actual data value, for example, in the <code>text()</code> method for a tooltip or label.",
|
||||
"<hr>",
|
||||
"Use <code>xScale</code> and <code>yScale</code> to position both the <code>circle</code> and <code>text</code> shapes onto the SVG canvas. For the <code>circles</code>, apply the scales to set the <code>cx</code> and <code>cy</code> attributes. Give them a radius of 5 units, too.",
|
||||
@ -2444,7 +2444,7 @@
|
||||
"Unlike <code>rect</code>, <code>circle</code>, and <code>text</code>, an axis is just a straight line when it's rendered. Because it is a simple shape, using <code>g</code> works.",
|
||||
"The last step is to apply a <code>transform</code> attribute to position the axis on the SVG canvas in the right place. Otherwise, the line would render along the border of SVG canvas and wouldn't be visible.",
|
||||
"SVG supports different types of <code>transforms</code>, but positioning an axis needs <code>translate</code>. When it's applied to the <code>g</code> element, it moves the whole group over and down by the given amounts. Here's an example:",
|
||||
"<blockquote>const xAxis = d3.axisBottom(xScale);<br><br>svg.append(\"g\")<br> .attr(\"transform\", \"translate(0, \" + (h - padding) + \")\")<br> .call(xAxis);</blockquote>",
|
||||
"<blockquote>const xAxis = d3.axisBottom(xScale);<br><br>svg.append(\"g\")<br> .attr(\"transform\", \"translate(0, \" + (h - padding) + \")\")<br> .call(xAxis);</blockquote>",
|
||||
"The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the <code>call()</code> method.",
|
||||
"The y-axis works is the same way, except the <code>translate</code> argument is in the form (x, 0). Because <code>translate</code> is a string in the <code>attr()</code> method above, you can use concatenation to include variable values for its arguments.",
|
||||
"<hr>",
|
||||
|
||||
@ -180,7 +180,7 @@
|
||||
"These properties and their values are often referred to as \"key-value pairs\".",
|
||||
"However, JSON transmitted by APIs are sent as <code>bytes</code>, and your application receives it as a <code>string</code>. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The <code>JSON.parse</code> method parses the string and constructs the JavaScript object described by it.",
|
||||
"You can request the JSON from freeCodeCamp's Cat Photo API. Here's the code you can put in your click event to do this:",
|
||||
"<blockquote>req=new XMLHttpRequest();<br>req.open(\"GET\",'/json/cats.json',true);<br>req.send();<br>req.onload=function(){<br> json=JSON.parse(req.responseText);<br> document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);<br>};</blockquote>",
|
||||
"<blockquote>req=new XMLHttpRequest();<br>req.open(\"GET\",'/json/cats.json',true);<br>req.send();<br>req.onload=function(){<br> json=JSON.parse(req.responseText);<br> document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);<br>};</blockquote>",
|
||||
"Here's a review of what each piece is doing. The JavaScript <code>XMLHttpRequest</code> object has a number of properties and methods that are used to transfer data. First, an instance of the <code>XMLHttpRequest</code> object is created and saved in the <code>req</code> variable.",
|
||||
"Next, the <code>open</code> method initializes a request - this example is requesting data from an API, therefore is a \"GET\" request. The second argument for <code>open</code> is the URL of the API you are requesting data from. The third argument is a Boolean value where <code>true</code> makes it an asynchronous request.",
|
||||
"The <code>send</code> method sends the request. Finally, the <code>onload</code> event handler parses the returned data and applies the <code>JSON.stringify</code> method to convert the JavaScript object into a string. This string is then inserted as the message text.",
|
||||
@ -376,11 +376,11 @@
|
||||
"First, declare an html variable with <code>var html = \"\";</code>.",
|
||||
"Then, loop through the JSON, adding HTML to the variable that wraps the key names in <code>strong</code> tags, followed by the value. When the loop is finished, you render it.",
|
||||
"Here's the code that does this:",
|
||||
"<blockquote>json.forEach(function(val) {</br> var keys = Object.keys(val);</br> html += \"<div class = 'cat'>\";</br> keys.forEach(function(key) {</br> html += \"<strong>\" + key + \"</strong>: \" + val[key] + \"<br>\";</br> });</br> html += \"</div><br>\";</br>});</blockquote>",
|
||||
"<blockquote>json.forEach(function(val) {</br> var keys = Object.keys(val);</br> html += \"<div class = 'cat'>\";</br> keys.forEach(function(key) {</br> html += \"<strong>\" + key + \"</strong>: \" + val[key] + \"<br>\";</br> });</br> html += \"</div><br>\";</br>});</blockquote>",
|
||||
"<hr>",
|
||||
"Add a <code>forEach</code> method to loop over the JSON data and create the HTML elements to display it.",
|
||||
"Here is some example JSON",
|
||||
"<blockquote>[</br> {</br> \"id\":0,</br> \"imageLink\":\"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg\",</br> \"altText\":\"A white cat wearing a green helmet shaped melon on its head. \",</br> \"codeNames\":[</br> \"Juggernaut\",</br> \"Mrs. Wallace\",</br> \"Buttercup\"</br> ]</br> }</br>]</blockquote>"
|
||||
"<blockquote>[</br> {</br> \"id\":0,</br> \"imageLink\":\"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg\",</br> \"altText\":\"A white cat wearing a green helmet shaped melon on its head. \",</br> \"codeNames\":[ \"Juggernaut\", \"Mrs. Wallace\", \"Buttercup\"</br> ]</br> }</br>]</blockquote>"
|
||||
],
|
||||
"tests": [
|
||||
{
|
||||
@ -565,7 +565,7 @@
|
||||
"If you don't want to render every cat photo you get from the freeCodeCamp Cat Photo API, you can pre-filter the JSON before looping through it.",
|
||||
"Given that the JSON data is stored in an array, you can use the <code>filter</code> method to filter out the cat whose \"id\" key has a value of 1.",
|
||||
"Here's the code to do this:",
|
||||
"<blockquote>json = json.filter(function(val) {<br> return (val.id !== 1);<br>});</blockquote>",
|
||||
"<blockquote>json = json.filter(function(val) {<br> return (val.id !== 1);<br>});</blockquote>",
|
||||
"<hr>",
|
||||
"Add code to <code>filter</code> the json data to remove the cat with the \"id\" value of 1."
|
||||
],
|
||||
@ -661,7 +661,7 @@
|
||||
"You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.",
|
||||
"By selecting allow, you will see the text on the output phone change to your latitude and longitude.",
|
||||
"Here's code that does this:",
|
||||
"<blockquote>if (navigator.geolocation){<br> navigator.geolocation.getCurrentPosition(function(position) {<br> document.getElementById('data').innerHTML=\"latitude: \"+ position.coords.latitude + \"<br>longitude: \" + position.coords.longitude;<br> });<br>}</blockquote>",
|
||||
"<blockquote>if (navigator.geolocation){<br> navigator.geolocation.getCurrentPosition(function(position) {<br> document.getElementById('data').innerHTML=\"latitude: \"+ position.coords.latitude + \"<br>longitude: \" + position.coords.longitude;<br> });<br>}</blockquote>",
|
||||
"First, it checks if the <code>navigator.geolocation</code> object exists. If it does, the <code>getCurrentPosition</code> method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the <code>position</code> object's values for latitude and longitude using dot notation and updates the HTML.",
|
||||
"<hr>",
|
||||
"Add the example code inside the <code>script</code> tags to check a user's current location and insert it into the HTML."
|
||||
@ -717,7 +717,7 @@
|
||||
"description": [
|
||||
"In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL.",
|
||||
"JavaScript's <code>XMLHttpRequest</code> method is also used to post data to a server. Here's an example:",
|
||||
"<blockquote>req=new XMLHttpRequest();<br>req.open(\"POST\",url,true);<br>req.setRequestHeader('Content-Type','text/plain');<br>req.onreadystatechange=function(){<br> if(req.readyState==4 && req.status==200){<br> document.getElementsByClassName('message')[0].innerHTML=req.responseText;<br> }<br>};<br>req.send(userName);</blockquote>",
|
||||
"<blockquote>req=new XMLHttpRequest();<br>req.open(\"POST\",url,true);<br>req.setRequestHeader('Content-Type','text/plain');<br>req.onreadystatechange=function(){<br> if(req.readyState==4 && req.status==200){<br> document.getElementsByClassName('message')[0].innerHTML=req.responseText;<br> }<br>};<br>req.send(userName);</blockquote>",
|
||||
"You've seen several of these methods before. Here the <code>open</code> method initializes the request as a \"POST\" to the given URL of the external resource, and uses the <code>true</code> Boolean to make it asynchronous.",
|
||||
"The <code>setRequestHeader</code> method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the <code>open</code> method, but before the <code>send</code> method. The two parameters are the name of the header and the value to set as the body of that header.",
|
||||
"Next, the <code>onreadystatechange</code> event listener handles a change in the state of the request. A <code>readyState</code> of 4 means the operation is complete, and a <code>status</code> of 200 means it was a successful request. The document's HTML can be updated.",
|
||||
|
||||
Reference in New Issue
Block a user