494 lines
28 KiB
JSON
494 lines
28 KiB
JSON
{
|
||
"name": "JSON APIs and Ajax",
|
||
"order": 10,
|
||
"time": "2 hours",
|
||
"helpRoom": "Help",
|
||
"challenges": [
|
||
{
|
||
"id": "56bbb991ad1ed5201cd392d4",
|
||
"title": "Trigger Click Events with jQuery",
|
||
"description": [
|
||
"In this section, we'll learn how to get data from APIs. APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
|
||
"We'll also learn how to update HTML with the data we get from these APIs using a technology called Ajax.",
|
||
"First, let's review what the <code>$(document).ready()</code> function does. This function makes it so all code inside of it only runs once our page loads.",
|
||
"Let's make our \"Get Message\" button change the text of the element with the class <code>message</code>.",
|
||
"Before we can do this, we need to implement a <code>click event</code> inside of our <code>$(document).ready()</code> function by adding this code:",
|
||
"<blockquote>$(\"#getMessage\").on(\"click\", function(){</br></br>});</blockquote>"
|
||
],
|
||
"challengeSeed": [
|
||
"fccss",
|
||
" $(document).ready(function() {",
|
||
" // Only change code below this line.",
|
||
" ",
|
||
" // Only change code above this line.",
|
||
" });",
|
||
"fcces",
|
||
"",
|
||
"",
|
||
"<div class=\"container-fluid\">",
|
||
" <div class = \"row text-center\">",
|
||
" <h2>Cat Photo Finder</h2>",
|
||
" </div>",
|
||
" <div class = \"row text-center\">",
|
||
" <div class = \"col-xs-12 well message\">",
|
||
" The message will go here",
|
||
" </div>",
|
||
" </div>",
|
||
" <div class = \"row text-center\">",
|
||
" <div class = \"col-xs-12\">",
|
||
" <button id = \"getMessage\" class = \"btn btn-primary\">",
|
||
" Get Message",
|
||
" </button>",
|
||
" </div>",
|
||
" </div>",
|
||
"</div>"
|
||
],
|
||
"tests": [
|
||
"assert(code.match(/\\$\\s*?\\(\\s*?(?:'|\")\\#getMessage(?:'|\")\\s*?\\)\\s*?\\.on\\s*?\\(\\s*?(?:'|\")click(?:'|\")\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'message: Bind the click event to the button with the ID of <code>getMessage</code>');",
|
||
"assert(code.match(/\\n*?\\s*?\\}\\n*?\\s*?\\);/gi) && code.match(/\\n*?\\s*?\\}\\);/gi).length >= 2, 'message: Be sure to close your functions with <code>});</code>');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Activa eventos de pulsación con jQuery",
|
||
"descriptionEs": [
|
||
"En esta sección, vamos a aprender cómo obtener datos de las APIs. Las APIs - o interfaces de programación de aplicaciones - son herramientas que utilizan los computadores para comunicarse entre sí.",
|
||
"También aprenderemos cómo actualizar HTML con los datos que obtenemos de estas API usando una tecnología llamada Ajax.",
|
||
"En primer lugar, vamos a revisar lo que hace la función <code>$(document).ready()</code>. Esta función hace que todo el código dentro de ella se ejecute sólo hasta que nuestra página ha sido cargada.",
|
||
"Hagamos que nuestro botón \"Get message\" cambie el texto del elemento con clase <code>message</code>.",
|
||
"Antes de poder hacer esto, tenemos que implementar un <code>evento de pulsación</code> dentro de nuestra función <code>$(document).ready()</code>, añadiendo este código:",
|
||
"<blockquote>$(\"#getMessage\").on(\"click\", function(){</br></br>});</blockquote>"
|
||
],
|
||
"titlePt": "Ativando eventos de clique com jQuery",
|
||
"descriptionPt": [
|
||
"Nesta sessão, vamos aprender como obter dados de uma API. As APIS - Interface de Programação de Aplicativos - são ferramentas usadas pelos computadores para se comunicarem entre si.",
|
||
"Também aprenderemos como utilizar o HTML com os dados obtidos de uma API usando uma tecnologia chamada Ajax",
|
||
"Em primeiro lugar, vamos revir o que faz a função <code>$(document).ready()</code>. Esta função faz com que todo o codigo que esteja dentro de seu escopo execute somente quando a nossa página tenha sido carregada.",
|
||
"Vamos fazer nosso butão \"Get message\" mudar o texto do elemento com a classe <code>message</code>.",
|
||
"Antes de poder fazer isso, temos que implementar um <code>evento de clique</code> dentro da nossa função <code>$(document).ready()</code>, adicionando este código:",
|
||
"<blockquote>$(\"#getMessage\").on(\"click\", function(){</br></br>});</blockquote>"
|
||
]
|
||
},
|
||
{
|
||
"id": "56bbb991ad1ed5201cd392d5",
|
||
"title": "Change Text with Click Events",
|
||
"description": [
|
||
"When our click event happens, we can use jQuery to update an HTML element.",
|
||
"Let's make it so that when a user clicks the \"Get Message\" button, we change the text of the element with the class <code>message</code> to say \"Here is the message\".",
|
||
"We can do this by adding the following code within our click event:",
|
||
"<code>$(\".message\").html(\"Here is the message\");</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"fccss",
|
||
" $(document).ready(function() {",
|
||
" $(\"#getMessage\").on(\"click\", function(){",
|
||
" // Only change code below this line.",
|
||
" ",
|
||
" // Only change code above this line.",
|
||
" });",
|
||
" });",
|
||
"fcces",
|
||
"",
|
||
"",
|
||
"<div class=\"container-fluid\">",
|
||
" <div class = \"row text-center\">",
|
||
" <h2>Cat Photo Finder</h2>",
|
||
" </div>",
|
||
" <div class = \"row text-center\">",
|
||
" <div class = \"col-xs-12 well message\">",
|
||
" The message will go here",
|
||
" </div>",
|
||
" </div>",
|
||
" <div class = \"row text-center\">",
|
||
" <div class = \"col-xs-12\">",
|
||
" <button id = \"getMessage\" class = \"btn btn-primary\">",
|
||
" Get Message",
|
||
" </button>",
|
||
" </div>",
|
||
" </div>",
|
||
"</div>"
|
||
],
|
||
"tests": [
|
||
"assert(code.match(/\\$\\s*?\\(\\s*?(?:'|\")\\.message(?:'|\")\\s*?\\)\\s*?(\\.html|\\.text)\\s*?\\(\\s*?(?:'|\")Here\\sis\\sthe\\smessage(?:'|\")\\s*?\\);/gi), 'message: Clicking the \"Get Message\" button should give the element with the class <code>message</code> the text \"Here is the message\".');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Cambia texto con eventos de pulsación",
|
||
"descriptionEs": [
|
||
"Cuando nuestro evento de pulsación ocurre, podemos utilizar jQuery para actualizar un elemento HTML.",
|
||
"Hagamos que cuando un usuario pulse el botón \"Get Message\", el texto del elemento con la clase <code>message</code> cambie para decir \"Here is the message\".",
|
||
"Podemos hacerlo añadiendo el siguiente código dentro de nuestro evento de pulsación:",
|
||
"<code>$(\".message\").html(\"Here is the message\");</code>"
|
||
],
|
||
"titlePt": "Mundando texto com eventos de clique",
|
||
"descriptionPt": [
|
||
"Quando nosso evento de clique ocorre, podemos utilizar o jQuery para atualixar um elemento HTML",
|
||
"Vamos fazer que quando um usuário clicar no botão \"Get Message\", o texto do elemento com a classe <code>message</code> passe a dizer \"Here is the message\".",
|
||
"Podemos fazer isso adicionando o seguinte código dentro do nosso evento de clique:",
|
||
"<code>$(\".message\").html(\"Here is the message\");</code>"
|
||
]
|
||
},
|
||
{
|
||
"id": "56bbb991ad1ed5201cd392d6",
|
||
"title": "Get JSON with the jQuery getJSON Method",
|
||
"description": [
|
||
"You can also request data from an external source. This is where APIs come into play.",
|
||
"Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
|
||
"Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.",
|
||
"You've already been using JSON whenever you create a JavaScript object. JSON is nothing more than object properties and their current values, sandwiched between a <code>{</code> and a <code>}</code>.",
|
||
"These properties and their values are often referred to as \"key-value pairs\".",
|
||
"Let's get the JSON from Free Code Camp's Cat Photo API.",
|
||
"Here's the code you can put in your click event to do this:",
|
||
"<blockquote>$.getJSON(\"/json/cats.json\", function(json) {<br> $(\".message\").html(JSON.stringify(json));<br>});</blockquote>",
|
||
"Once you've added this, click the \"Get Message\" button. Your Ajax function will replace the \"The message will go here\" text with the raw JSON output from the Free Code Camp Cat Photo API."
|
||
],
|
||
"challengeSeed": [
|
||
"fccss",
|
||
" $(document).ready(function() {",
|
||
"",
|
||
" $(\"#getMessage\").on(\"click\", function(){",
|
||
" // Only change code below this line.",
|
||
" ",
|
||
" ",
|
||
" ",
|
||
" // Only change code above this line.",
|
||
" });",
|
||
"",
|
||
" });",
|
||
"fcces",
|
||
"",
|
||
"<div class=\"container-fluid\">",
|
||
" <div class = \"row text-center\">",
|
||
" <h2>Cat Photo Finder</h2>",
|
||
" </div>",
|
||
" <div class = \"row text-center\">",
|
||
" <div class = \"col-xs-12 well message\">",
|
||
" The message will go here",
|
||
" </div>",
|
||
" </div>",
|
||
" <div class = \"row text-center\">",
|
||
" <div class = \"col-xs-12\">",
|
||
" <button id = \"getMessage\" class = \"btn btn-primary\">",
|
||
" Get Message",
|
||
" </button>",
|
||
" </div>",
|
||
" </div>",
|
||
"</div>"
|
||
],
|
||
"tests": [
|
||
"assert(code.match(/\\$\\s*?\\(\\s*?(\\\"|\\')\\#getMessage(\\\"|\\')\\s*?\\)\\s*?\\.\\s*?on\\s*?\\(\\s*?(\\\"|\\')click(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'message: You should have a click handler on the <code>getMessage</code> button to trigger the AJAX request.');",
|
||
"assert(code.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi), 'message: You should have at least one closing set of brackets and parenthesis.');",
|
||
"assert(code.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi) && code.match(/\\,\\s*?function\\s*?\\(\\s*?\\w*?\\s*?\\)\\s*?\\{/gi) && code.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi).length === code.match(/\\s*?function\\s*?\\(\\s*?\\w*?\\s*?\\)\\s*?\\{/gi).length, 'message: Each callback function should have a closing set of brackets and parenthesis.');",
|
||
"assert(code.match(/\\$\\s*?\\.\\s*?getJSON\\s*?\\(\\s*?(\\\"|\\')\\/json\\/cats\\.json(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?json\\s*?\\)\\s*?\\{/gi), 'message: You should be making use of the <code>getJSON</code> method given in the description to load data from the JSON file.');",
|
||
"assert(code.match(/\\$\\s*?\\(\\s*?(\\\"|\\')\\.message(\\\"|\\')\\s*?\\)\\s*?\\.\\s*?html\\s*?\\(\\s*?JSON\\s*?\\.\\s*?stringify\\s*?\\(\\s*?json\\s*?\\)\\s*?\\)/gi), 'message: Don't forget to make the <code>.html</code> change the contents of the message box so that it contains the result of the <code>getJSON</code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Obtén JSON con el método getJSON de jQuery",
|
||
"descriptionEs": [
|
||
"También puedes solicitar los datos de una fuente externa. Aquí es donde entran en juego las API. ",
|
||
"Recuerda que las API - o interfaces de programación de aplicaciones - son herramientas que utilizan los ordenadores para comunicarse entre sí.",
|
||
"La mayoría de las API para el web transfieren datos en un formato llamado JSON. JSON significa notación de objeto JavaScript (<em>JavaScript Object Notation</em>).",
|
||
"Tú ya has usado JSON al crear objetos en JavaScript. JSON no es más que las propiedades del objeto y sus valores actuales, intercalados entre un <code>{</code> y un <code>}</code>. ",
|
||
"Estas propiedades y sus valores a menudo se denominan \" pares llave-valor\".",
|
||
"Vamos a obtener el JSON de la API de fotos de gato de Free Code Camp.",
|
||
"Aquí está el código que puedes poner en tu evento de pulsación para lograrlo:",
|
||
"<blockquote>$.getJSON(\"/json/cats.json\", function(json) {<br> $(\".message\").html(JSON.stringify(json));<br>});</blockquote>",
|
||
"Una vez lo añadas, pulsa el botón \"Get Message\". Tu función Ajax sustituirá el texto \"The message will go here\" con la salida JSON en bruto de la API de fotos de gato de Free Code Camp."
|
||
],
|
||
"titlePt": "Obter um JSON com o método getJSON do jQuery",
|
||
"descriptionPt": [
|
||
"Também é possivel solicitar os dados de uma fonte externa. É aqui onde as API's entram em jogo.",
|
||
"Lembre que as API's - Interface de Programação de Aplicativos - são ferramentas que os computadores usam para se comunicar entre si.",
|
||
"A maioria das API's transferem de dados para web em um formato chamado JSON. JSON significa notação de objeto JavaScript (<em>JavaScript Object Notation</em>).",
|
||
"Você já usou JSON para criar objetos em JavaScript. O JSON não é mais que as propriedades de um objeto e seus valores atuais, separados entre <code>{</code> e um <code>}</code>.",
|
||
"Estas propriedades e seus valores são muitas vezes denominados de \" pares chave-valor\".",
|
||
"Vamos obter o JSON da API de fotos de gatos do Free Code Camp.",
|
||
"Aqui esta o código que você pode por no nosso evento de clique para fazer isso:",
|
||
"<blockquote>$.getJSON(\"/json/cats.json\", function(json) {<br> $(\".message\").html(JSON.stringify(json));<br>});</blockquote>",
|
||
"Uma vez adicionadas, aperte o botão \"Get Message\". Sua função Ajax substituirá o texto \"The message will go here\" com a saída bruta do JSON da API de gatos do Free Code Camp."
|
||
]
|
||
},
|
||
{
|
||
"id": "56bbb991ad1ed5201cd392d7",
|
||
"title": "Convert JSON Data to HTML",
|
||
"description": [
|
||
"Now that we're getting data from a JSON API, let's display it in our HTML.",
|
||
"We can use the <code>.forEach()</code> method to loop through our data and modify our HTML elements.",
|
||
"First, let's declare an html variable with <code>var html = \"\";</code>.",
|
||
"Then, let's loop through our JSON, adding more HTML to that variable. When the loop is finished, we'll 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 += \"<b>\" + key + \"</b>: \" + val[key] + \"<br>\";</br> });</br> html += \"</div><br>\";</br>});</blockquote>"
|
||
],
|
||
"challengeSeed": [
|
||
"fccss",
|
||
" $(document).ready(function() {",
|
||
"",
|
||
" $(\"#getMessage\").on(\"click\", function() {",
|
||
" $.getJSON(\"/json/cats.json\", function(json) {",
|
||
"",
|
||
" var html = \"\";",
|
||
" // Only change code below this line.",
|
||
" ",
|
||
" ",
|
||
" ",
|
||
" // Only change code above this line.",
|
||
"",
|
||
" $(\".message\").html(html);",
|
||
"",
|
||
" });",
|
||
" });",
|
||
" });",
|
||
"fcces",
|
||
"",
|
||
"<div class=\"container-fluid\">",
|
||
" <div class = \"row text-center\">",
|
||
" <h2>Cat Photo Finder</h2>",
|
||
" </div>",
|
||
" <div class = \"row text-center\">",
|
||
" <div class = \"col-xs-12 well message\">",
|
||
" The message will go here",
|
||
" </div>",
|
||
" </div>",
|
||
" <div class = \"row text-center\">",
|
||
" <div class = \"col-xs-12\">",
|
||
" <button id = \"getMessage\" class = \"btn btn-primary\">",
|
||
" Get Message",
|
||
" </button>",
|
||
" </div>",
|
||
" </div>",
|
||
"</div>"
|
||
],
|
||
"tests": [
|
||
"assert(code.match(/json\\.forEach/gi), 'message: The message box should have something in it.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Convierte datos JSON a datos HTML",
|
||
"descriptionEs": [
|
||
"Ahora que estamos obteniendo datos de una API JSON, mostremóslos en nuestro HTML.",
|
||
"Podemos usar el método <code>.forEach()</code> para recorrer nuestros datos y modificar nuestros elementos HTML.",
|
||
"En primer lugar, vamos a declarar una variable llamada <code>html</code> con <code>var html = \"\";</code>.",
|
||
"Después, iteremos a traveś de nuestro JSON, añadiendo más HTML a esa variable. Cuando se termina el ciclo, vamos a presentarla. ",
|
||
"Aquí está el código que hace esto:",
|
||
"<blockquote>json.forEach(function(val) {</br> var keys = Object.keys(val);</br> html += \"<div class = 'cat'>\";</br> keys.forEach(function(key) {</br> html += \"<b>\" + key + \"</b>: \" + val[key] + \"<br>\";</br> });</br> html += \"</div><br>\";</br>});</blockquote>"
|
||
],
|
||
"titlePt": "Converter dados JSON para HTML",
|
||
"descriptionPt": [
|
||
"Agora que estamos obtendo os dados de uma API JSON, vamos mostra-los em nosso HTML",
|
||
"Podemos usar o método <code>.forEach()</code> para percorrer os nossos dados e modificar o elementos HTML.",
|
||
"Em primeiro lugar, vamos declarar uma variável chamada <code>html</code> com <code>var html = \"\";</code>.",
|
||
"Depois, vamos percorrer através do nosso JSON, adicionando mais HTML para a nossa variável. Quando essa iteração terminar, vamos apresentar o resultado.",
|
||
"Aqui está o código que faz isso:",
|
||
"<blockquote>json.forEach(function(val) {</br> var keys = Object.keys(val);</br> html += \"<div class = 'cat'>\";</br> keys.forEach(function(key) {</br> html += \"<b>\" + key + \"</b>: \" + val[key] + \"<br>\";</br> });</br> html += \"</div><br>\";</br>});</blockquote>"
|
||
]
|
||
},
|
||
{
|
||
"id": "56bbb991ad1ed5201cd392d8",
|
||
"title": "Render Images from Data Sources",
|
||
"description": [
|
||
"We've seen from the last two lessons that each object in our JSON array contains an <code>imageLink</code> key with a value that is the url of a cat's image.",
|
||
"When we're looping through these objects, let's use this <code>imageLink</code> property to display this image in an <code>img</code> element.",
|
||
"Here's the code that does this:",
|
||
"<code>html += \"<img src = '\" + val.imageLink + \"'>\";</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"fccss",
|
||
" $(document).ready(function() {",
|
||
"",
|
||
" $(\"#getMessage\").on(\"click\", function() {",
|
||
" $.getJSON(\"/json/cats.json\", function(json) {",
|
||
"",
|
||
" var html = \"\";",
|
||
"",
|
||
" json.forEach(function(val) {",
|
||
"",
|
||
" html += \"<div class = 'cat'>\";",
|
||
"",
|
||
" // Only change code below this line.",
|
||
" ",
|
||
" ",
|
||
" ",
|
||
" // Only change code above this line.",
|
||
"",
|
||
" html += \"</div>\";",
|
||
"",
|
||
" });",
|
||
"",
|
||
" $(\".message\").html(html);",
|
||
"",
|
||
" });",
|
||
" });",
|
||
" });",
|
||
"fcces",
|
||
"",
|
||
"<div class=\"container-fluid\">",
|
||
" <div class = \"row text-center\">",
|
||
" <h2>Cat Photo Finder</h2>",
|
||
" </div>",
|
||
" <div class = \"row text-center\">",
|
||
" <div class = \"col-xs-12 well message\">",
|
||
" The message will go here",
|
||
" </div>",
|
||
" </div>",
|
||
" <div class = \"row text-center\">",
|
||
" <div class = \"col-xs-12\">",
|
||
" <button id = \"getMessage\" class = \"btn btn-primary\">",
|
||
" Get Message",
|
||
" </button>",
|
||
" </div>",
|
||
" </div>",
|
||
"</div>"
|
||
],
|
||
"tests": [
|
||
"assert(code.match(/val.imageLink/gi), 'message: You should have used the <code>imageLink</code> property to display the images.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Presenta imágenes de fuentes de datos",
|
||
"descriptionEs": [
|
||
"Hemos visto en las dos últimas lecciones que cada objeto en nuestro vector JSON contiene una llave <code>imageLink</code> con un valor que corresponde a la url de la imagen de un gato.",
|
||
"Cuando estamos recorriendo estos objetos, usemos esta propiedad <code>imageLink</code> para visualizar la imagen en un elemento <code>img</code>.",
|
||
"Aquí está el código que hace esto:",
|
||
"<code>html += \"<img src = '\" + val.imageLink + \"'>\";</code>"
|
||
],
|
||
"titlePt": "Apresentar as imagens da fonte de dados",
|
||
"descriptionPt": [
|
||
"Como temos visto nas ultimas lições, cada objeto em nosso array JSON contém a chave <code>imageLink</code> com um valor que corresponde a url da imagem de um gato.",
|
||
"Quando estamos percorrendo por estes objetos, usamos a propriedade <code>imageLink</code> para visualizar a imagem em um elemento <code>img</code>.",
|
||
"Aqui está o código para fazer isso:",
|
||
"<code>html += \"<img src = '\" + val.imageLink + \"'>\";</code>"
|
||
]
|
||
},
|
||
{
|
||
"id": "56bbb991ad1ed5201cd392d9",
|
||
"title": "Prefilter JSON",
|
||
"description": [
|
||
"If we don't want to render every cat photo we get from our Free Code Camp's Cat Photo JSON API, we can pre-filter the json before we loop through it.",
|
||
"Let's 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>"
|
||
],
|
||
"challengeSeed": [
|
||
"fccss",
|
||
" $(document).ready(function() {",
|
||
"",
|
||
" $(\"#getMessage\").on(\"click\", function() {",
|
||
" $.getJSON(\"/json/cats.json\", function(json) {",
|
||
"",
|
||
" var html = \"\";",
|
||
"",
|
||
" // Only change code below this line.",
|
||
" ",
|
||
" ",
|
||
" ",
|
||
" // Only change code above this line.",
|
||
"",
|
||
" json.forEach(function(val) {",
|
||
"",
|
||
" html += \"<div class = 'cat'>\"",
|
||
"",
|
||
" html += \"<img src = '\" + val.imageLink + \"'>\"",
|
||
"",
|
||
" html += \"</div>\"",
|
||
"",
|
||
" });",
|
||
"",
|
||
" $(\".message\").html(html);",
|
||
"",
|
||
" });",
|
||
" });",
|
||
" });",
|
||
"fcces",
|
||
"",
|
||
"<div class=\"container-fluid\">",
|
||
" <div class = \"row text-center\">",
|
||
" <h2>Cat Photo Finder</h2>",
|
||
" </div>",
|
||
" <div class = \"row text-center\">",
|
||
" <div class = \"col-xs-12 well message\">",
|
||
" The message will go here",
|
||
" </div>",
|
||
" </div>",
|
||
" <div class = \"row text-center\">",
|
||
" <div class = \"col-xs-12\">",
|
||
" <button id = \"getMessage\" class = \"btn btn-primary\">",
|
||
" Get Message",
|
||
" </button>",
|
||
" </div>",
|
||
" </div>",
|
||
"</div>"
|
||
],
|
||
"tests": [
|
||
"assert(code.match(/filter/gi), 'message: You should be making use of the .filter method.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Pre-filtra JSON",
|
||
"descriptionEs": [
|
||
"Si no queremos presentar cada foto de gato que obtengamos de la API JSON de fotos de gato de Free Code Camp, podemos pre-filtrar el json antes de iterar a través de este.",
|
||
"Vamos a filtrar el gato cuya llave \"id\" tiene un valor de 1.",
|
||
"Aquí está el código para hacer esto:",
|
||
"<blockquote>json = json.filter(function(val) {</br> return (val.id !== 1);</br>});</blockquote>"
|
||
],
|
||
"titlePt": "Pré-filtro JSON",
|
||
"descriptionPt": [
|
||
"Se não queremos apresentar cada foto de gato que obtemos da API JSON de fotos de gatos do Free Code Camp, podemos realizar um pré-filtro o JSON antes de iterar através dele.",
|
||
"Vamos filtrar o gato cuja a chave \"id\" tenha o valor 1.",
|
||
"Aqui está o código para fazer isso:",
|
||
"<blockquote>json = json.filter(function(val) {</br> return (val.id !== 1);</br>});</blockquote>"
|
||
]
|
||
},
|
||
{
|
||
"id": "56bbb991ad1ed5201cd392da",
|
||
"title": "Get Geo-location Data",
|
||
"description": [
|
||
"Another cool thing we can do is access our user's current location. Every browser has a built in navigator that can give us this information.",
|
||
"The navigator will get our user's current longitude and latitude.",
|
||
"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 some code that does this:",
|
||
"<blockquote>if (navigator.geolocation) {<br> navigator.geolocation.getCurrentPosition(function(position) {<br> $(\"#data\").html(\"latitude: \" + position.coords.latitude + \"<br>longitude: \" + position.coords.longitude);<br> });<br>}</blockquote>"
|
||
],
|
||
"challengeSeed": [
|
||
"fccss",
|
||
" // Only change code below this line.",
|
||
" ",
|
||
" ",
|
||
" ",
|
||
" // Only change code above this line.",
|
||
"fcces",
|
||
"<div id = \"data\">",
|
||
" <h4>You are here:</h4>",
|
||
" ",
|
||
"</div>"
|
||
],
|
||
"tests": [
|
||
"assert(code.match(/navigator\\.geolocation\\.getCurrentPosition/gi), 'message: You should make use of <code>navigator.geolocation</code> to access the users current location.');",
|
||
"assert(code.match(/position\\.coords\\.latitude/gi), 'message: You should make use of <code>position.coords.latitude</code> to display the users' latitudinal location.');",
|
||
"assert(code.match(/position\\.coords\\.longitude/gi), 'message: You should make use of <code>position.coords.longitude</code> to display the users' longitudinal location.');",
|
||
"assert(code.match(/\\$\\(\\s*\"#data\"\\s*\\)\\s*\\.html\\([.\\w\\W]*?\\);/gi), 'message: You should display the users' position within the <code>data</code> div element');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Recibir datos de Geo-localización",
|
||
"descriptionEs": [
|
||
"Otra cosa interesante que podemos hacer es acceder a la ubicación actual de nuestros usuarios. Todos los navegadores han incorporado un geo-localizador que nos puede dar esta información. ",
|
||
"El navegador puede obtener la longitud y latitud actual de nuestros usuarios.",
|
||
"Como usuario verás un mensaje para permitir o evitar que el sitio conozca tu ubicación actual. El desafío se puede completar de cualquier manera, siempre y cuando el código sea correcto. ",
|
||
"Si lo permites, verás que el texto en el teléfono de la derecha cambiará con tu latitud y longitud",
|
||
"Aquí hay un código que hace esto:",
|
||
"<blockquote>if (navigator.geolocation) {</br> navigator.geolocation.getCurrentPosition(function(position) {</br> $(\"#data\").html(\"latitude: \" + position.coords.latitude + \"<br>longitude: \" + position.coords.longitude);</br> });</br>}</blockquote>"
|
||
],
|
||
"titlePt": "Receber dados de Geo-localização",
|
||
"descriptionPt": [
|
||
"Outra coisa interessante que podemos fazer é acessar a atual localização do nosso usuário. Todos os navegadores tem implementado um geo-localizador que pode nos fornecer essa informação.",
|
||
"O navegador pode obter a longitude e latitude atual de nossos usuários",
|
||
"Você irá ver uma janela para bloquear ou permitir que o site possa conhecer a nossa localização atual. O desafio será completado de qualquer maneira, sempre que o código estará correto.",
|
||
"Se você permitir, irá ver o texto de saída do telefone mudar para sua latitude e longitude.",
|
||
"Aqui está o código para fazer isso:",
|
||
"<blockquote>if (navigator.geolocation) {</br> navigator.geolocation.getCurrentPosition(function(position) {</br> $(\"#data\").html(\"latitude: \" + position.coords.latitude + \"<br>longitude: \" + position.coords.longitude);</br> });</br>}</blockquote>"
|
||
]
|
||
}
|
||
]
|
||
}
|