Para empezar a generar las páginas, se tiene que escoger un editor que permita escribir tanto código HTML y JavaScript. Uno de los programas que aconsejo, aunque hay muchos, es Visual Studio Code. Un programa de propiedad de Microsoft que es gratuito.
El siguiente requisito necesario es un navegador, en donde podremos hacer pruebas de los programas que vamos implementado. No es necesario estar conectado a Internet, por lo que se pueden hacer pruebas como se suele decir en local.
Hay que puntualizar que los archivos en los que corre JavaScript, es decir para visualizar su efectos, son archivos con extensión .html
Para trabajar cómodamente, sería aconsejable tener simultáneamente el navegador y el editor de código en una misma ventana. En Windows, si abrimos dos ventanas y una la arrastramos fuera de la pantalla a la derecha y la otra a la izquierda, automáticamente se reparten equitativamente el espacio de la pantalla.
Como es habitual en los libros de programación, vamos a empezar por hacer un pequeño programa en el cual escribe por pantalla un pequeño mensaje que saluda al mundo «¡Hola mundo!».
Tabla de contenidos
Método write()
Podemos escribirlo directamente en una sentencia o primero podemos poner el texto en una variable y después mostrar el contenido de dicha variable:
document.write ("!Hola mundo!");
text = "¡Hola mundo!";
document.write(text);
Estos dos fragmentos de código, los podríamos implementar de tres formas diferentes (recuerda la entrada 3 sitios donde colocar mi código JavaScript):
La primera, en un archivo aparte con extensión .js. La segunda, dentro de la cabecera <head> del archivo con extensión .html y la tercera forma dentro del <body> del archivo con extensión .html.
// Primera forma (holamundo.js)text = "¡Hola mundo!";
document.write(text);
<!-- Primera forma (extensión .html) archivo externo -->
<!DOCTYPE html><html lang="es"><head><meta charset="UTF-8"><script src="holamundo.js"></script> <! -- Vinculamos archivo JS --><title>Document</title></head><body>
…</body></html>
<! -- Segunda forma (extensión .html) en <head> --><!DOCTYPE html><html lang="es"><head><meta charset="UTF8"><script>
text = "!Hola mundo!"; document.write(text);</script><title>Document</title></head><body>
…</body></html>
<! -- Tercera forma (extensión .html) en <body> --><!DOCTYPE html><html lang="es"><head><meta charset="UTF8"><title>Document</title></head><body>
<script>
text = "!Hola mundo!"; document.write(text);</script> </body></html>
Estas tres formas diferentes de insertar código JavaScript simplemente mostraran por pantalla la frase ¡Hola mundo!
Hay que tener en cuenta que el método write() modifica el código fuente de la página HTML que lo llama, por lo que borra todo el contenido HTML previo que había en la página.
Nota: En los próximos ejemplos que ponga sólo utilizaré la forma en la que el archivo JS se enlaza externamente, ya que es la más correcta para tener el código separado y ordenado.
Función alert(), confirm() y prompt()
La función alert() crea una ventana modal (flotante) en la que se muestra un mensaje pasado como parámetro de la función. Se puede utilizar para avisar al usuario de cualquier error.
La función confirm() crea una ventana modal con Se puede pasar un parámetro de tipo cadena a la función que mostrará por pantalla. La ventana tiene dos botones, uno de cancelar y otro de aceptar.
La función prompt() crea una ventana de modal donde solicita al usuario un dato que será guardado en una variable. Se pasa como parámetro una cadena que el usuario verá.
alert("¡Esto es una alerta para el ususario!");
var x = confirm("¿Está seguro de borrar los datos?");
En la variable x se guarda true o false según el botón pulsado por el usuario.
var age = prompt("¿Cuántos años tienes?");
En la variable age (edad) se guarda lo que el usuario especifique. Si se pulsa el botón cancelar el valor guardado es null.
Hay que tener en cuenta que estás tres funciones detienen el flujo del programa y no se podrá interactuar con la página mientras el usuario no pulse algún botón.
Deja una respuesta