script element at the top of your page. Be sure to close it on the following line.",
"Your browser will run any JavaScript inside a script element, including jQuery.",
"Inside your script element, add this code: $(document).ready(function() { to your script. Then close it on the following line (still inside your script element) with: });",
"We'll learn more about functions later. The important thing to know is that code you put inside this function will run as soon as your browser has loaded your page.",
"This is important because without your document ready function, your code may run before your HTML is rendered, which would cause bugs."
],
"tests": [
"assert(code.match(/<\\/script\\s*>/g) && code.match(/script element making sure it is valid and has a closing tag.');",
"assert(code.match(/\\$\\s*?\\(\\s*?document\\)\\.ready\\s*?\\(\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/g), 'message: You should add $(document).ready(function() { to the beginning of your script element.');",
"assert(code.match(/\\n*?\\s*?\\}\\s*?\\);/g), 'message: Close your $(document).ready(function() { function with });');"
],
"challengeSeed": [
"",
"",
"",
"",
"script en la parte superior de la página. Asegúrate de cerrarlo en la línea siguiente. ",
"Tu navegador ejecutará todo JavaScript dentro de un elemento script, incluyendo jQuery.",
"Dentro de tu elemento script, agrega este código: $(document).ready(function () { A continuación, ciérralo en la línea siguiente (aún dentro de tu elemento script) con: })",
"Más adelante aprenderemos más acerca de funciones. Lo importante es saber que el código que pongas dentro de esta función (function) se ejecutará tan pronto como tu navegador haya cargado la página.",
"Esto es importante porque sin su función de documento listo, su código puede ejecutarse antes de que se haya presentado el HTML, lo que podría causar errores."
]
},
{
"id": "bad87fee1348bd9bedc08826",
"title": "Target HTML Elements with Selectors Using jQuery",
"description": [
"Now we have a document ready function.",
"Now let's write our first jQuery statement. All jQuery functions start with a $, usually referred to as a dollar sign operator, or simply as bling.",
"jQuery often selects an HTML element with a selector, then does something to that element.",
"For example, let's make all of your button elements bounce. Just add this code inside your document ready function:",
"$(\"button\").addClass(\"animated bounce\")",
"Note that we've already included both the jQuery library and the Animate.css library in the background so that you can use them in the editor. So you are using jQuery to apply the Animate.css bounce class to your button elements."
],
"tests": [
"assert($(\"button\").hasClass(\"animated\") && $(\"button\").hasClass(\"bounce\"), 'message: Use the jQuery addClass() function to give the classes animated and bounce to your button elements.');",
"assert(!code.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.');"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"",
"",
"",
"función de documento listo.",
"Ahora vamos a escribir nuestra primera instrucción jQuery. Todas las funciones de jQuery comienzan con un $, al que suele referirse como operador de signo de dólar, o simplemente como bling. ",
"jQuery a menudo selecciona un elemento HTML con un selector, y luego hace algo a ese elemento.",
"Por ejemplo, hagamos que todos tus elementos button reboten. Sólo tienes que añadir este código dentro de la función de documento listo: ",
"$(\"button\").addClass(\"animated bounce\")",
"Ten en cuenta que ya hemos incluido tanto la biblioteca jQuery como la biblioteca Animate.css en segundo plano para que pueda utilizarlos en el editor. Así que estás usando jQuery para aplicar la clase bounce de Animate.css a sus elementos button."
]
},
{
"id": "bad87fee1348bd9aedc08826",
"title": "Target Elements by Class Using jQuery",
"description": [
"You see how we made all of your button elements bounce? We selected them with $(\"button\"), then we added some CSS classes to them with .addClass(\"animated bounce\");.",
"You just used jQuery's .addClass() function, which allows you to add classes to elements.",
"First, let's target your div elements with the class well by using the $(\".well\") selector.",
"Note that, just like with CSS declarations, you type a . before the class's name.",
"Then use jQuery's .addClass() function to add the classes animated and shake.",
"For example, you could make all the elements with the class text-primary shake by adding the following to your document ready function:",
"$(\".text-primary\").addClass(\"animated shake\");"
],
"tests": [
"assert($(\".well\").hasClass(\"animated\") && $(\".well\").hasClass(\"shake\"), 'message: Use the jQuery addClass() function to give the classes animated and shake to all your elements with the class well.');",
"assert(!code.match(/class\\.\\*animated/g), 'message: Only use jQuery to add these classes to the element.');"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" });",
"fcces",
"",
"",
"",
"button? Los seleccionamos con $(\"button\"), y luego les añadimos algunas clases CSS con .addClass(\"animated bounce\");. ",
"Acabas de usar la función addClass() de jQuery, que te permite añadir clases a los elementos.",
"En primer lugar, apuntemos a tus elementos div que tengan la clase well usando el selector $(\".well\").",
"Ten en cuenta que, al igual que con las declaraciones CSS, escribes un . antes del nombre de la clase.",
"A continuación, utiliza la función .addClass() de jQuery para agregar las clases animated y shake.",
"Por ejemplo, podrías hacer que todos los elementos con la clase text-primary se sacudieran añadiendo lo siguiente a tu función de documento listo:",
"$(\".text-primary\").addClass(\"animated shake\");"
]
},
{
"id": "bad87fee1348bd9aeda08826",
"title": "Target Elements by ID Using jQuery",
"description": [
"You can also target elements by their id attributes.",
"First target your button element with the id target3 by using the $(\"#target3\") selector.",
"Note that, just like with CSS declarations, you type a # before the id's name.",
"Then use jQuery's .addClass() function to add the classes animated and fadeOut.",
"Here's how you'd make the button element with the id target6 fade out:",
"$(\"#target6\").addClass(\"animated fadeOut\")."
],
"tests": [
"assert($(\"#target3\").hasClass(\"animated\"), 'message: Select the button element with the id of target3 and use the jQuery addClass() function to give it the class of animated.');",
"assert(($(\"#target3\").hasClass(\"fadeOut\") || $(\"#target3\").hasClass(\"fadeout\")) && code.match(/\\$\\(.#target3.\\)/g), 'message: Target the element with the id target3 and use the jQuery addClass() function to give it the class fadeOut.');",
"assert(!code.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.');"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" $(\".well\").addClass(\"animated shake\");",
"",
" });",
"fcces",
"",
"",
"",
"button con el id target3 mediante el uso del selector $(\"#target3\").",
"Ten en cuenta que, al igual que con las declaraciones CSS, debes escribir un # antes de la identificación.",
"A continuación, utiliza la función .addClass() de jQuery para agregar las clases animated y fadeOut.",
"He aquí cómo haces que desaparezca el elemento button con la identificación target6:",
"$(\"#target6\").addClass(\"animated fadeOut\")."
]
},
{
"id": "bad87fee1348bd9aeda08726",
"title": "Delete your jQuery Functions",
"description": [
"These animations were cool at first, but now they're getting kind of distracting.",
"Delete all three of these jQuery functions from your document ready function, but leave your document ready function itself intact."
],
"tests": [
"assert(!code.match(/e\"\\);/g) && !code.match(/t\"\\);/g), 'message: Delete all three of your jQuery functions from your document ready function.');",
"assert(code.match(/