1. Escribir usando JavaScript
JavaScript
1. Escribir usando JavaScript
1.1. ¿Qué tiene de bueno JavaScript?
Siendo breves... que es claramente multiplataforma: en casi cualquier sistema operativo existen navegadores web, y la mayoría de ellos admiten JavaScript, de modo que lo que hagamos en una página web que contenga JavaScript se podrá usar desde un ordenador con Windows, con Linux, con MacOS X, desde un tablet o smartphone, etc.
1.2. ¿Qué tiene de malo JavaScript?
Abreviando, nuevamente: No es el lenguaje más rápido, no es totalmente estándar (existen pequeñas diferencias entre unos navegadores y otros), es menos estricto que otros (y sí, eso puede ser malo)... aun así, su gran ventaja de ser multiplataforma puede compensar sus desventajas.
1.3. ¿Y cómo se escribe desde JavaScript?
Vamos a lo interesante....
En este tutorial, iremos directamente a lo práctico, introduciendo los nuevos conceptos en el momento exacto en el que sean necesarios, no antes. Eso supondrá que también veamos unas ciertas nociones sobre cómo crear páginas Web, pero dejaremos en el tintero bastante detalles de JavaScript y muchos más de creación Web.
Para escribir desde JavaScript, tendremos que empezar por ver cómo se escribe en una página Web, porque las páginas web son (con diferencia) la forma más habitual de usar JavaScript.
Una página web básica "por dentro" es algo relativamente sencillo: un fichero de texto, que podrías crear con cualquier editor de texto, como el bloc de notas de Windows, pero preferiblemente no con un procesador de textos como Word. El bloc de notas de Windows tampoco es la mejor alternativa: es poco versátil y a veces guarda los documentos con nombres de ficheros terminados en ".txt", lo que no nos permitirá probar correctamente nuestras páginas. Una mejor opción sería usar un editor un poco más avanzado, y entre los que hay muchos gratuitos para elegir, como Geany, Notepad++, Notepad2, SciTe, etc.
Una página Web que escribiese el texto "hola" podría ser simplemente así:
<html>
<body>
Hola
</body>
</html>Primero vamos a ver cómo crearla y luego lo que significa cada cosa:
Para crearla, desde nuestro editor de texto (insisto: es preferible que no sea el Bloc de notas ni Word) tecleamos lo anterior y después lo guardamos con el nombre "ejemplo01a.html" (o cualquier otro nombre parecido; lo importante es que termine con ".html") Para probarla, debería bastar hacer doble clic en ese fichero "ejemplo01a.html". Se abrirá nuestro navegador y mostrará una página que contendrá únicamente el texto "Hola".
¿Qué es lo que hemos escrito?
- Las páginas web se escriben usando un lenguaje de especificación llamado HTML. En este lenguaje, cada página está formada por una serie de bloques, que se encierran entre símbolos de "menor que" (
<) y "mayor que" (>). Por ejemplo, todo el cuerpo de la página se debe indicar entre y - El cuerpo de una página web se detallará entre y
- El texto intermedio (en este caso, "Hola") será lo que se realmente se muestre.
Esta página escribe algo en pantalla (realmente, en el navegador), pero es algo estático. Vamos a empezar a ampliarlo usando JavaScript. Por ejemplo, podemos mostrar una ventana de aviso así:
<html>
<body>
Hola
<script>
alert("Bienvenido!");
</script>
</body>
</html>Apenas hay dos cambios:
- Nuestro programa empezará con
<script>y termina con</script>. - Este primer programa sólo contiene una orden: "alert", que muestra una ventana de aviso. El texto del aviso se debe indicar entre paréntesis y comillas.
- Cada orden de JavaScript deberá terminar con un punto y coma. En un programa tan simple como este, se podría omitir el punto y coma.
Si no queremos mostrar una ventana de aviso, sino escribir texto en la propia página web, también podemos hacerlo, si usamos la orden "document.write":
<html>
<body>
Hola
<script>
document.write("Bienvenido!");
</script>
</body>
</html>Pero hay una diferencia entre lo que hemos escrito desde JavaScript ("Bienvenido") y el texto prefijado que forma parte de la página web: lo que hacemos desde JavaScript no es estático, sino que se calcula en el momento, por lo que, por ejemplo, podemos hacer operaciones aritméticas:
<html>
<body>
Hola. 2 + 3 es
<script>
document.write( 2+3 );
</script>
</body>
</html>Ejercicios propuestos
- 01.01 - Crea una página web que escriba tu nombre (texto estático)
- 01.02 - Crea una página web que escriba tu nombre (texto estático) y muestre una ventana de aviso que diga "Lo has conseguido!"
- 01.03 - Crea una página web que escriba tu nombre (texto estático) y tu apellido (usando "document.write")
- 01.04 - Crea una página web que escriba el resultado de sumar 12345 y 67890
- 01.05 - Crea una página web que muestre en una ventana el resultado de restar 67890 - 12345
- 01.06 - Crea una página web que escriba el resultado de multiplicar 123 y 456 (pista: el símbolo de la multiplicación es el asterisco: *)