2 – Saludo Personalizado
Bienvenidos a todos de nuevo! En esta nueva entrada vamos a seguir avanzando en nuestro conocimiento sobre JavaScript con otro sencillo ejemplo, en este caso crearemos un Saludo Personalizado según los datos que introduzca el usuario en un campo de un formulario. Como en la anterior entrada pondré el código y a continuación iré explicando paso a paso lo que hay en él. (Solo explicare por encima lo que ya haya explicado más a fondo anteriormente). Bien, vamos a ello ^^
CÓDIGO
(hacer click en la imagen para aumentar)
Expliquemos el código. La mayoría de la estructura de esta página HTML es idéntica a la que realizamos en la anterior entrada por lo tanto solo explicaré por encima lo que ya salio anteriormente.
Iniciamos nuestro código con la etiqueta <!DOCTYPE HTML> para indicar el tipo de documento que estamos creando, en este caso un documento HTML. Seguimos con la etiqueta de apertura <html> con la cual iniciamos el código HTML, proseguimos con la etiqueta <head> dentro de la cual recordamos que siempre se ponen otras etiquetas para dar información al navegador sobre nuestra página y que por lo general no muestran información al usuario que visualiza está, en este caso tenemos las etiquetas <title> y <meta>. La etiqueta <title> se utilizaba para dar un titulo a nuestra página y la etiqueta <meta> en este caso con el atributo charset = «utf-8» el cual indica al navegador que la codificación que usamos para nuestros caracteres es la utf-8. Tras la etiqueta <head> nos encontramos con la etiqueta <body> en la cual pondremos todas aquellas etiquetas que si darán algún tipo de información que visualizarán nuestros usuarios. Dentro de nuestro <body> tenemos la etiqueta <h1> con la cual ponemos nuestro encabezado para el segundo ejemplo. Tras esta etiqueta <h1> pasamos a lo realmente nuevo en este código y por lo tanto lo explicaré más detenidamente:
(hacer click en la imagen para aumentar)
Como podemos observar en la imagen del recuadro amarillo tenemos lo siguiente:
La etiqueta <form> la cual nos permite crear un formulario, dentro del que podemos poner nuestros campos de inserción de datos (etiqueta input), Descripciones para estos campos (etiqueta label), botones y varios más.
En este caso dentro del formulario tenemos la etiqueta <fieldset> la cual es un contenedor lógico donde se insertarán todas aquellas etiquetas de las que acabamos de hablar. La primera de esas etiquetas es <label> con la cual describiremos para que sirve nuestro campo de inserción de datos, en este caso la etiqueta <label> posee el atributo for = «nombre», con este atributo podemos hacer que dicha descripción haga referencia a un campo de inserción determinado, en este caso a un campo de inserción cuyo atributo id sea «nombre» (Lo veremos ahora). A continuación nos encontramos con la etiqueta <input> , este es nuestro campo de inserción de datos, es decir, un cuadro vacío donde podemos insertar una cadena de caracteres, números, símbolos, etc. Esta etiqueta posee los atributos type e id, con el atributo type = «text» indicamos que lo que contendrá nuestro campo de inserción será una cadena de texto, por otra parte el atributo id = «nombre» es un atributo identificador, con el damos una identidad única a nuestro campo de inserción, en este caso ese campo se llamará «nombre». Ahora ya podemos encontrar el sentido al atributo for de nuestra etiqueta label con la cual nos referimos al campo de inserción cuya id tiene el mismo valor que este: «Nombre».
Bien, a continuación de la etiqueta <input> nos encontramos con la etiqueta ya conocida <button> con la cual creamos un botón y recuerdo su atributo type= «button» que como explique en la entrada anterior es imprescindible para que funcione correctamente nuestro código.
Ya explicado el código pasemos a ver como se visualizaría nuestra página.
VISTA DESDE EL NAVEGADOR
(Hacer click en la imagen para aumentar)
Como se puede observar en la imagen, el usuario visualizaría todo lo que tenemos entre las etiquetas <body>, en este caso nuestro encabezado <h1> : «SEGUNDO EJEMPLO DE JAVASCRIPT», y nuestro formulario, compuesto de la etiqueta <label> con la cual describimos el campo de inserción <input> que aparece a continuación y el botón que configuramos seguido a ellos. Y que pasa si hacemos click sobre nuestro botón del formulario…NADA! porque aun no hemos escrito nuestra porción de código JavaScript la cual veremos ahora mismo ^^
CÓDIGO COMPLETO
(haga click en la imagen para aumentar)
Expliquemos las novedades que encontramos en nuestro código. Se puede observar claramente dentro de nuestra etiqueta <head> tenemos una nueva etiqueta llamada <script>, esta etiqueta indica al navegador que su contenido va a ser código de programación, para indicar que tipo de lenguaje de programación usamos, se utiliza el atributo type = «text/javascript», es decir, mediante ese atributo estamos diciendo al navegador que escribiremos código del lenguaje de programación JavaScript.
Antes de analizar lo que contiene nuestro código JavaScript conviene recordar otra novedad que se ha insertado en este código completo pero que ya vimos en la anterior entrada. Hemos añadido a la etiqueta <button> el atributo de evento onclick. Con él conseguiremos que nuestro botón realice una acción cuando esté sea pulsado, en este caso al pulsar al botón llamaremos a la función saludo(). Recordar que en la entrada anterior el atributo de evento onclick llamaba a la función predefinida alert(), la cual mostraba el mensaje contenido entre sus paréntesis. En este caso hemos hecho que llame a una función nueva denominada saludo(), la cual debemos programar nosotros mismos dentro de la etiqueta <script>.
Bien ahora que sabemos que nuestro botón al ser pulsado llamará a una función denominada saludo(), debemos analizar dicha función, que es la unica porción de código JavaScript de la página.
(hacer click en la imagen para aumentar)
Entonces una vez que hemos definido que vamos a escribir dentro de nuestra etiqueta <script> (texto del lenguaje de programación JavaScript), pasamos a analizar dicho código:
Lo primero que debemos hacer es declarar la función y su nombre, en este caso, function saludo(), a continuación, abrimos llaves, dentro de estas llaves podemos insertar tantas lineas de código JavaScript como queramos acabadas todas ellas con punto y coma. La primera instrucción con la que nos encontramos es la declaración de una variable denominada nombre. Para declarar una variable utilizamos la palabra reservada var y a continuación su nombre, en nuestro ejemplo, var nombre.
Una variable es un espacio de memoria de nuestra computadora donde guardamos algún tipo de dato, en este caso, decimos que nuestra variable nombre es igual al comando document.getElementById(«nombre»);
Que queremos decir con esto?
El comando document.getElementById es uno de los más utilizados en JavaScript, con él recogemos el valor que tiene una etiqueta cuyo id sea el que se encuentra dentro del paréntesis, es decir, guardamos el valor que se escriba, en nuestro caso, dentro de nuestra etiqueta <input> ya que es la etiqueta cuyo atributo id coincide con el que el comando tiene («nombre»).
IMPORTANTE!!!
Conviene hacer énfasis en que es muy importante escribir correctamente los valores que damos a estos atributos y comandos ya que es diferente escribir «nombre» con minúsculas a «Nombre» con la primera letra mayúscula, etc… y equivocarnos en esto puede dar a lugar a que no funcione nuestro programa y no encontremos el error para solucionarlo. También debemos tener en mente el acabar cada linea de código JavaScript con ; para evitar cualquier tipo de problema con el código así como para tenerlo todo mejor ordenado.
Bien, ahora sabemos que nuestra primera instrucción var nombre = document.getElementById(«nombre»); crea una variable cuyo nombre es nombre (valga la redundancia) y guarda en ella lo que hay escrito dentro de nuestro campo de inserción <input> ya que es la etiqueta cuyo id es «nombre».
Pasemos a la siguiente linea de código en la cual nos encontramos con lo siguiente:
var username = nombre.value;
Con esta instrucción declaramos una nueva variable cuyo nombre es «username» (nombre de usuario) y decimos que esta sea igual a nombre.value;
Que queremos decir con ello?¿
Al igualar una variable al nombre de otra mas la instrucción «.value» guardamos en la nueva variable el valor contenido en la otra, es decir, estamos guardando en la variable username lo que contenia la variable nombre.
Pongamos un ejemplo para verlo todo mejor. Imaginemos que escribimos dentro del campo de inserción una cadena de caracteres como: «Julian», al dar a nuestro botón, entraría en acción nuestra función saludo(). Según tenemos escrito el código de dicha función, esa cadena de caracteres «Julian», se guardaría dentro de nuestra variable nombre. Bien, tenemos dentro de la variable nombre «Julian». La siguiente instrucción var username = nombre.value; hace que el contenido de la variable nombre se guarde también en la variable username, por lo tanto, tenemos en ambas variables «Julian».
Diferencias entre ambas variables, la primera variable guarda como valor lo que haya en el campo de inserción cuando clickeamos al botón y la segunda guarda el valor que haya guardado la primera. La primera variable se utiliza para extraer el valor del campo de inserción y la segunda para guardar dicho valor de manera que podamos trabajar con él posteriormente.
Ambas variables son imprescindibles para el funcionamiento de nuestro programa.
Por lo tanto ya solo nos falta la ultima linea de código JavaScript por analizar, la cual nos resultará familiar de la anterior entrada, en ella nos encontramos lo siguiente:
alert(«Hola » + username + «!!!»);
Se hace una llamada a la función predefinida alert() la cual mostrará lo que se encuentra dentro de sus paréntesis mediante un Pop Up (una ventana emergente), en este caso, «Hola» + username + «!!!»
Como podemos observar la función nos mostrará lo que esta entre paréntesis de forma literal, es decir, aparecerá íntegramente «Hola» y «!!!» y entre estas tenemos a nuestra variable que contenia el valor recogido en el campo de inserción, es decir, lo que escribamos allí (Tener en cuenta que cada elemento que queremos mostrar mediante la función alert esta unido entre ellos por un símbolo +). Por lo tanto al hacer click en el botón saltará un Pop Up a la ventana del navegador que pondrá, Hola Pedro !!!, si lo que teníamos escrito en el campo de inserción era Pedro.
Con esto queda analizado todo el código, pasemos a ver el resultado.
VISTA TRAS PULSAR EL BOTÓN
(hacer click en la imagen para aumentar)
Como podemos observar gracias a nuestro código JavaScript podemos crear un formulario que realice un saludo personalizado con apenas unas pocas lineas, con esto se ve el gran potencial de este lenguaje de programación.
Espero que les haya gustado el tutorial y no haya sido muy pesado para aquellos que no habían visto nunca JavaScript, aun así advierto que esto es una simple toma de contacto y no es ni mucho menos un 1% del potencial de este lenguaje de programación. No olviden que todo esto se aprende mediante la practica así que les invito a que intenten realizar el ejemplo por su propia mano.
En la próxima entrada realizaremos una historia de palabras utilizando las mismas instrucciones que hemos utilizado en esta, de forma que queden bien asentadas.
No duden en comentar si tienen cualquier duda!! Un saludo ^^
Desarrollo y programación 