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."
],
"challengeSeed": [
"",
"",
"",
"",
"script element making sure it is valid and has a closing tag.');",
"assert(code.match(/\\$\\s*?\\(\\s*?document\\s*?\\)\\.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 });');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Lerne, wie Script Tags und Document Ready funktionieren",
"description": [
"Jetzt sind wir bereit jQuery zu lernen, das populärste JavaScript-Tool aller Zeiten. Mach dir über JavaScript keine Sorgen - über dieses werden wir bald sprechen.",
"Bevor wir jQuery nutzen können, müssen wir erst ein paar Dinge zu unserem HTML hinzufügen.",
"Füge als erstes ein script Element am Beginn deiner Seite ein. Vergewissere dich, dass du das Element in der nächsten Zeile geschlossen hast.",
"Dein Browser wird jegliches JavaScript, jQuery eingeschlossen, innerhalb eines script Elements ausführen.",
"Füge innerhalb deines script Elements folgenden Code hinzu: $(document).ready(function() {. Schließe ihn danach in der nächsten Zeile (noch immer innerhalb deines script Elements) mit: });",
"Wir werden später noch mehr über Funktionen lernen. Wichtig zu wissen ist, dass der Code innerhalb der Funktion ausgeführt wird, sobald der Browser die Seite geladen hat.",
"Das ist wichtig, denn ohne deine Document Ready Funktion könnte dein Code ausgeführt werden, bevor das HTML gerendert wurde - was zu Fehlern führen kann."
]
},
"es": {
"title": "Aprende cómo funcionan las etiquetas de programa y la función de documento listo.",
"description": [
"Ahora estamos listos para aprender jQuery, la herramienta de JavaScript más popular de todos los tiempos. No te preocupes por JavaScript en si --lo cubriremos pronto.",
"Antes de que podamos comenzar a usar jQuery, tenemos que añadir algunas cosas a nuestro HTML.",
"En primer lugar, añade un elemento de programa 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 tu función de documento listo, tu código puede ejecutarse antes de que se haya presentado el HTML, lo que podría causar errores."
]
},
"fr": {
"title": "Apprendre comment fonctionnent les balises Script et Document Ready",
"description": [
"Nous sommes maintenant prêt à apprendre jQuery, l'outil Javascript le plus populaire de tout les temps. Ne vous inquiétez pas à propos de JavaScript lui-même, nous y viendrons bientôt.",
"Avant de pouvoir utiliser jQuery, nous avons besoin d'ajouter certaines choses à notre HTML.",
"Premièrement, ajoutez un élément script en haut de votre page. Assurez-vous de le fermer à la ligne suivante.",
"Votre navigateur exécutera JavaScript à l'intérieur de l'élement script, y compris jQuery.",
"Á l'intérieur de votre élement script, ajoutez ce code : $(document).ready(function() { à votre script. Puis fermez-le à la ligne suivante (toujours à l'intérieur de votre élement script avec: });",
"Nous en apprendrons plus sur les functions plus tard. Le plus important à savoir est que le code à l'intérieur de cette function sera exécuté dès que le navigateur aura chargé votre page.",
"Ceci est important car sans votre document ready function, votre code pourrait être exécuté avant que votre HTML soit affiché, ce qui pourrait causer des problèmes."
]
}
}
},
{
"id": "bad87fee1348bd9bedc08826",
"title": "Target HTML Elements with Selectors Using jQuery",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css"
}
],
"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 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."
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"",
"",
"",
"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 colors to the element.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "HTML-Elemente mit Selektoren durch jQuery auswählen",
"description": [
"Jetzt haben wir eine Document Ready Funktion.",
"Lass uns unser erstes jQuery Statement schreiben. Alle jQuery Funktionen starten mit einem $, für gewöhnlich als Dollar-Zeichen Operator bezeichnet.",
"jQuery wählt oft HTML-Elemente mit einem Selektor aus, um dann mit diesen Elementen etwas zu machen.",
"Zum Beispiel, lasse alle deine Button Elemente hüpfen. Dazu musst du nur folgenden Code in deine Document Ready Funktion hinzufügen:",
"$(\"button\").addClass(\"animated bounce\");",
"Beachte, dass wir bereits jQuery und Animate.css im Hintergrund hinzugefügt haben, damit du diese im Editor nutzen kannst. Du nutzt also jQuery um die bounce Klasse von Animate.css zu deinen Button Elementen hinzuzufügen."
]
},
"es": {
"title": "Elige elementos HTML usando selectores y jQuery",
"description": [
"Ya tenemos una 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 dólar, o simplemente como bling. ",
"jQuery a menudo selecciona un elemento HTML con un selector, y luego le 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 tus elementos button."
]
},
"fr": {
"title": "Cibler des élements HTML par sélecteurs avec jQuery",
"description": [
"Nous avons maintenant un document ready function.",
"Nous allons à présent écrire notre première expression jQuery. Chaque fonction jQuery commence avec un $, habituellement nommé opérateur dollar, ou bling.",
"jQuery sélectionne souvent un élément HTML à l'aide d'un selector, puis fait quelque chose à cet élement.",
"Par exemple, faisons en sorte que tous nos button rebondissent. Ajoutez juste ce code à l'intérieur de votre $(document).ready(function(){:",
"$(\"button\").addClass(\"animated bounce\");",
"Notez que nous avons déjà inclus à la fois la librairie jQuery et la librairie Animate.css en amont donc nous pouvons les utiliser dans l'éditeur. Donc, vous utilisez jQuery pour appliquer la classe bounce d'Animate.css à vos éléments button.",
"De plus, assurez-vous d'utiliser $(\"button\").addClass(\"animated bounce\"); et non $('button').addClass(\"animated bounce\"); car les apostrophes ne passeront pas nos tests."
]
}
}
},
{
"id": "bad87fee1348bd9aedc08826",
"title": "Target Elements by Class Using jQuery",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css"
}
],
"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\");"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" });",
"fcces",
"",
"",
"",
"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.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Elemente anhand von Klassen mit jQuery auswählen",
"description": [
"Siehst du, wie wir alle deine Button Elemente hüpfen haben lassen? Wir haben sie mit $(\"button\") ausgewählt, dann CSS-Klassen mit .addClass(\"animated bounce\"); hinzugefügt.",
"Du hast gerade jQuery's .addClass() Funktion genutzt, die dir erlaubt, Klassen zu Elemente hinzuzufügen.",
"Wähle als erstes deine div Elemente mit der Klasse well, indem du den $(\".well\") Selektor nutzt.",
"Bedenke, dass du - genauso wie bei CSS-Deklarationen - einen . vor den Namen der Klasse setzen musst.",
"Dann nutze die jQuery Funktion .addClass() um die Klassen animated und shake hinzuzufügen.",
"Zum Beispiel könntest du alle Elemente mit der Klasse text-primary schütteln lassen, indem du folgendes zu deiner Document Ready Funktion hinzufügst:",
"$(\".text-primary\").addClass(\"animated shake\");"
]
},
"es": {
"title": "Elige elementos por su clase usando jQuery",
"description": [
"¿Viste como hicimos rebotar todos tus elementos 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\");"
]
},
"fr": {
"title": "Cibler les élements par Classe avec jQuery",
"description": [
"Voyez comment nous avons fait rebondir tous nos éléments button? Nous les avons sélectionné avec $(\"button\"), puis nous leur avons ajouté des classes CSS avec .addClass(\"animated bounce\");.",
"Vous venez d'utiliser la fonction jQuery .addClass(), ce qui nous permet d'ajouter des classes aux éléments.",
"Tout d'abord, ciblons nos éléments div qui ont la classe well en utilisant le sélecteur $(\".well\").",
"Notez que, tout comme les expressions CSS, vous ajoutez un . avant le nom de la classe.",
"Puis, vous utilisez la fonction jQuery .addClass() pour ajouter les classes animated et shake.",
"Par exemple, vous pouvez faire en sorte que tous les éléments avec la classe text-primary s'agitent en ajoutant le code suivant à votre document ready function:",
"$(\".text-primary\").addClass(\"animated shake\");"
]
}
}
},
{
"id": "bad87fee1348bd9aeda08826",
"title": "Target Elements by id Using jQuery",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css"
}
],
"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\")."
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" $(\".well\").addClass(\"animated shake\");",
"",
" });",
"fcces",
"",
"",
"",
"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(/\\$\\(\\s*.#target3.\\s*\\)/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.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Elemente anhand der id mit jQuery auswählen",
"description": [
"Du kannst Elemente auch anhand deren ID-Attributs auswählen.",
"Wähle als erstes dein Button Element mit der ID target3, indem du den $(\"#target3\") Selektor nutzt.",
"Bedenke, dass du - genauso wie bei CSS-Deklarationen - eine # vor den Namen der Klasse setzen musst.",
"Dann nutze die jQuery Funktion .addClass() um die Klassen animated und fadeOut hinzuzufügen.",
"So könntest du das Button Element mit der ID target6 ausblenden lassen:",
"$(\"#target6\").addClass(\"animated fadeOut\")."
]
},
"es": {
"title": "Elige elementos por id usando jQuery",
"description": [
"También puedes elegir un elemento por su atributo id.",
"Primero selecciona tu elemento 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\")."
]
},
"fr": {
"title": "Cibler les éléments par id avec jQuery",
"description": [
"Vous pouvez également cibler les éléments à l'aide de leurs attributs id.",
"Premièrement, cibler votre élément button avec l'id target3 en utilisant le sélecteur $(\"#target\").",
"Notez que, tout comme les expressions CSS, vous ajoutez un # avant le nom de l'id.",
"Puis, utilisez la fonction jQuery .addClass() afin d'ajouter les classes animated et fadeOut.",
"Voici comment vous pouvez faire en sorte que l'élément button avec l'id target6 disparaisse en fondu:",
"$(\"#target6\").addClass(\"animated fadeOut\")."
]
}
}
},
{
"id": "bad87fee1348bd9aeda08726",
"title": "Delete Your jQuery Functions",
"required": [
{
"link": "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css"
}
],
"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."
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" $(\".well\").addClass(\"animated shake\");",
" $(\"#target3\").addClass(\"animated fadeOut\");",
"",
" });",
"fcces",
"",
"",
"",
"document ready function.');",
"assert(code.match(/