Javascript Basico #58484974

codificadas · Nov 10, 2013 · 17a8c17 · 17a8c17
1 parent 633eb5b
commit 17a8c17
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 0 deletions.
diff --git a/lib/step.rb b/lib/step.rb
@@ -54,6 +54,7 @@ def insert file
 
   @@header_sections = {
     steps:"Steps",
+    pasos:"Pasos",
     explanation:"Explanation",
     explicacion:"Explicación",
     overview:"Overview",

diff --git a/sites/es/frontend/javascript_basico.step b/sites/es/frontend/javascript_basico.step
@@ -0,0 +1,109 @@
+spanish_goals do
+  goal "Agregar una etiqueta javascript al documento."
+  goal "Escribir un script sencillo para interactuar con él."
+end
+
+pasos do
+
+  spanish_step do
+    message "Ahora que haz completado los retos para tu index.html y los archivos CSS relacionados, regresaremos a hechar un vistazo a tu archivo hello.html."
+    message "CSS hace que tus páginas sean bonitas, pero es **JavaScript** el que hace interactivas la mayoría de las páginas. Ve a tu archivo hello.html de nuevo y agrega una etiqueta script a tu página para que puedas empezar a escribir código JavaScript. En la parte inferior de tu documento, abajo de los párrafos, agrega lo siguiente:"
+
+   source_code :html, <<HTML
+<script type="text/javascript">
+</script>
+HTML
+
+   message "Guarda y actualiza la página en el navegador. Ésta debería permanecer sin cambio alguno."
+  end
+
+
+  spanish_step do
+    message "Escribe en este pequeño script. Javascript es case-specific y exigente en la sintaxis, por lo tanto si tu script no corre, revisa cuidadosamente errores de tipografía."
+
+    source_code :html, <<HTML
+<script type="text/javascript">
+  function reemplazaNombre() {
+    var miNuevoNombre = window.prompt('¡Elige un nuevo nombre!');
+    document.getElementById('nombre-usuario').innerHTML = miNuevoNombre;
+  }
+
+  document.onclick = reemplazaNombre;
+</script>
+HTML
+
+ message <<-MARKDOWN
+Actualiza la página, y da clic sobre uno de los párrafos. Deberías ver un mensaje del navegador como éste:
+<img src='img/prompt.png'>
+
+Cuando respondas el mensaje, deberías ver que lo que acabas de introducir está en el texto en negrita que tenía tu nombre.
+
+<img src='img/hello_omg.png'>
+    MARKDOWN
+
+ important "Toma años convertirse en un experto en Javascript. No te preocupes si el último paso es confuso para tí o tienes problemas al intentar correr tu script. Lo más importante aquí es que debes notar que puedes escribir código Javascript **directamente** en tu documento si así lo quieres, poniéndolo dentro de una etiqueta `script`, y usar este script para agregarle interactividad a tu página."
+
+  end
+
+end
+
+
+explanation do
+
+  message <<-MARKDOWN
+
+## ¿Por qué JavaScript?
+
+Javascript te permite hacer tus páginas interactivas. Puedes usarlo para construir
+cualquier cosa desde una simple animación hasta una gigantesca aplicación Web como
+Twitter o Github. Te da control total para agregar, remover, o modificar contenido
+que haz hecho con HTML. También puedes usarlo para cambiar estilos o agregar o 
+remover clases.
+
+Escribir Javascript en una página web puede ser difícil, porque no empiezas con
+un espacio en blanco. Todo el contenido de un navegador web, incluyendo los
+objetos incorporados del navegador y tus elementos HTML están ahí también. Sólo 
+debes averiguar como obtenerlos con Javascript para que puedas manipularlos.
+
+## ¿Qué hizo este script?
+
+Explicaremos línea por línea:
+
+La primera línea declara una función 'function', que es una porción de código
+reusable a la que puedes hacer referencia después llamándola por su nombre:
+
+  MARKDOWN
+  source_code :js, "function reemplazaNombre() {"
+  message <<-MARKDOWN
+
+Las siguientes dos líneas son pasos que la función hará. La primera crea una 
+variable llamada 'miNuevoNombre' y le asigna un valor. La ventana del navegador
+intentará obtener este valor usando su método `prompt`, una función incorporada
+que sabe cómo enviar un cuadro de texto emergente para que tú lo llenes.
+
+  MARKDOWN
+  source_code :js, "var miNuevoNombre = window.prompt('¡Elige un nuevo nombre!');"
+  message <<-MARKDOWN
+
+En la siguiente línea, entra en tu documento HTML, y, usando una función incorporada 
+al documento sabe que puede encontrar un elemento por su ID, localiza tu span 
+'nombre-usuario'. Entonces pone en el contenido HTML del span el valor de la variable 
+'miNuevoNombre'.
+
+  MARKDOWN
+  source_code :js, "document.getElementById('nombre-usuario').innerHTML = miNuevoNombre;"
+  message <<-MARKDOWN
+
+La `}` cierra la función que empezaste a definir en la primera línea.
+
+La línea final le dice al navegador, 'Cuando dé clic al documento, corre esa función llamada reemplazaNombre que definí'
+
+MARKDOWN
+source_code :js, "document.onclick = reemplazaNombre;"
+
+
+tip "Algunos elementos de este script, como 'document.onclick' o la propiedad '.innerHTML', están un poco desactualizados. Éstos son excelentes medios para comenzar a jugar con Javascript, pero cuando escribas tu propio Javascript, tal vez quieras usar técnicas más contemporáneas o una librería como jQuery que hará estas cosas por tí de una manera menos torpe."
+
+end
+
+next_spanish_step 'jquery'