trisquel

Aprende JavaScript con ejemplos (II). Recordando…

1 ¿Dónde coloco el JavaScript?

El JavaScript lo puedes colocar tanto en la etiqueta head como en la etiqueta body. Nuestro consejo es que lo sitúes todo en el mismo sitio. No desperdigues el código porque luego es imposible de entender y mantener.

Recuerda
La mejor opción para colocar el JavaScript es en un fichero separado. Recuerda lo que comentábamos en el capítulo anterior.

2 Las etiquetas <script> y </script>

Estas etiquetas nos servían para situar el código del script dentro de ellas. No obstante, podrás encontrar versiones antiguas de JavaScript con etiquetas como estas:

<script type=”text/javascript”>

Ten en cuenta que el atributo type no hace falta. todos los navegadores entenderán que el código que hay dentro de las etiquetas es JavaScript.

3. Comunicando JavaScript con el exterior…

Tenemos varias opciones:

3.1 Escribiendo en la consola del navegador utilizando console.log()

Esta opción es utilizada solamente por los desarrolladores. Ningún usuario va a acceder a la consola para ver el contenido escrito en ella.

Por cierto, para acceder a la consola basta con pulsar F12 y elegir consola en tu navegador.

Este es un ejemplo de un script que muestra un mensaje por consola:

<script>
console.log("Myfpschool, ejemplo de consola");
</script>

Ejercicio 2.1
Realiza una página web en el que al pulsar un botón genere un mensaje por consola.

3.2 Escribiendo en cualquier elemento HTML utilizando el atributo innerHTML

Esta técnica ya la vimos en el capítulo anterior.

Este es un ejemplo de un script que utiliza el atributo innerHTML para cambiar el contenido de un elemento HTML:

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

3.3 Generando directamente HTML utilizando el método document.write()

Con el siguiente código podremos generar código HTML. Puedes también añadirle etiquetas si quieres.

<script>
document.write("Buenos días");
</script>

Ejercicio 2.2
Modifica la web anterior para que pulsando cualquiera 3 botones genere un mensaje de bienvenida en ruso, español e inglés en la misma página. Los mensajes tienen que tener un color diferente dependiendo del idioma.

3.4 Generando un mensaje de alerta utilizando el método window.alert()

Aquí presentamos un ejemplo de utilización del método window.alert() dentro de un JavaScript:

<script>
window.alert("Buenos días");
</script>

Ejercicio 2.3
Aprovecha este código para modificar el ejercicio anterior y que los mensajes de bienvenida se generen con alertas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>