-
Notifications
You must be signed in to change notification settings - Fork 10
/
javascript_basico.step
109 lines (74 loc) · 4.56 KB
/
javascript_basico.step
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
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'