JavaScript II - Añadiendo JS a nuestra página

25/2/2018

Vamos a empezar

Bienvenidos a este capítulo en el que continuaremos por donde nos quedamos la semana pasada añadiendo JavaScript a nuestras páginas a través de tres métodos distintos.

En este segundo trabajo, vamos a ver acciones básicas que con JavaScript vamos a poder realizar en un documento HTML. Para ello debemos referenciar los elementos que queremos usar, cambiar, etc.

Insertar comentarios

Para realizar comentarios y anotaciones, JavaScript usa una sintaxis parecida a otros lenguajes de programación. Podemos diferenciar dos formas diferentes de comentar, los comentarios de una sola línea que comenzarían con // y finalizan al final de la línea.

// este es un comentario en una sola línea

Y luego estarían los comentarios de más de una línea que estarían delimitados por /* y */

/* este sería un comentario en más
de una línea*/

Referenciar en JavaScript

Como acabamos de leer unas líneas más arriba los elementos sobre los que queremos actuar deben ser referenciados, para esta labor actualmente disponemos de tres formas de referenciar elementos HTML desde JavaScript, veamoslas:

getElementByTagName(): Referencia un elemento mediante su nombre o palabra clave.

getElementById(): Referencia un elemento por el valor de su atributo Id

getElementByClassName(): Es una de las últimas incorporaciones a este lenguaje, nos permite la identificación de un elemento por el valor de su atributo class.

Formas de añadir JavaScript a nuestra página

En línea

Esta forma es la más simple de añadir funcionalidades de JavaScript a un documento HTML y como dijimos la semana pasada vamos a ver el camino usando los manejadores de eventos.
Los manejadores de eventos nos sirven para que se ejecuten acciones previstas por nosotros cuando un usuario realice una acción.

Veamos los manejadores de eventos que más se suelen usar, por ejemplo onclick, onMouseOver u onMouseOut. De esta forma al clickar, es decir, pasar nuestro ratón por encima de una imagen se puede activar una acción y llamar a un programa. Como por ejemplo activar un molesto popup, también se pueden añadir eventos de teclado y de la ventana, ejecutar comandos después de haber presionado una tecla o al cambiar alguna condición en la ventana de nuestro navegador (como ejemplos onload u onfocus) pero hoy será una primera toma de contacto y os vamos a mostrar un acercamiento básico.

<!DOCTYPEhtml>
<html lang="es">

<head>
              <meta charset="utf-8">
              <title>Este texto es el título del documento</title>
</head>
<body>
              <h2>Pulsa sobre la primera línea</h2>
              <div id="ejemplo1">
              <p onclick="alert('Caíste has pulsado!')">Pulsa sobre este texto</p>

              <p>No sirve de nada pulsar aquí</p>
              </div>
</body>
</html>

Pulsa sobre la primera línea

Pulsa sobre este texto

No sirve de nada pulsar aquí

Ejemplo nº1

En el código de arriba hemos usado el manejador de eventos onclick, si escribís este texto y guardáis como HTML y lo ejecutáis en el navegador veréis que al hacer clic con el ratón sobre el texto “Hacer Clic”. Veremos que la función del manejador de eventos onclick hace es una sentencia del tipo: “Cuando se haga clic sobre esto (en este caso un texto) se hace esto otro”, lo que en este ejemplo hemos programado es que cuando se haga clic se muestre una pequeña ventana con el mensaje Caíste has pulsado!

Ahora veamos qué pasa con onMouseOver y veamos como el código se activa y ejecuta simplemente pasando el cursor sobre un texto (en este ejemplo es un texto, para simplificar, pero puede ser cualquier elemento).

<!DOCTYPEhtml>
<html lang="es">

       <head>
             <meta charset="utf-8">
             <title>Aquí iría el título del documento</title>
       </head>
       <body>
             <h2>Pasa el puntero por encima de la primera línea de texto</h2>
             <div id="ejemplo2">
                    <p onMouseOver="alert('Caíste has pulsado!')">Pulsa sobre este texto</p>

                    <p>No sirve de nada pulsar aquí</p>

             </div>
       </body>
</html>

Pasa el puntero por encima de la primera línea de texto

Pulsa sobre este texto

No sirve de nada pulsar aquí

Ejemplo nº2

El siguiente manejador de eventos sería onMouseOut, con este, al colocar el cursor encima no sucede nada, y así continua hasta que lo quitamos del elemento, momento en el cual se activa.

<!DOCTYPEhtml>
<html lang="es">

       <head>
             <meta charset="utf-8">
             <title>Aquí iría el título del documento</title>
       </head>
       <body>
             <div id="ejemplo3">
                    <h2>Pasa el puntero por encima de la primera línea de texto</h2>
                     <p onMouseOut="alert('Caíste has pulsado!')">Pulsa sobre este texto</p>

                    <p>No sirve de nada pulsar aquí</p>

             </div>
       </body>
</html>

Pasa el puntero por encima de la primera línea de texto

Pulsa sobre este texto

No sirve de nada pulsar aquí

Ejemplo nº3

Cambiando el contenido de HTML

Una de las cosas que no permite el uso de JavaScript es la de cambiar un elemento en HTML de la siguiente forma, primero debemos encontrar dicho elemento para ello utilizaremos document.getElementById() y entre paréntesis escribiremos la id del elemento que queremos referenciar, seguido añadiremos innerHTML para cambiar el contenido por el texto que queramos. Esto lo hemos puesto todo dentro de un botón que se ha creado con la etiqueta <button>.

<!DOCTYPEhtml>
<htmllang="es">
<head>
       <meta charset="utf-8">
       <title>Aquí iría el título del documento</title>
</head>
<body>
       <header>
             <h1>Conteste a la pregunta, por favor</h1>
       <header>
       <section>
             <p id="pregunta">¿Hola cómo estas?<p>

             <button type="button" onclick='document.getElementById("pregunta").innerHTML="Yo bien gracias"'>Hola, estoy bien ¿y tu?</button>

             <button type="button" onclick='document.getElementById("pregunta").innerHTML="Vale simpátic@, tampoco hay que ponerse así"'>Y a ti que te importa</button>

             <button type="button" onclick='document.getElementById("pregunta").innerHTML="¿Hola como estas?"'>resetear la pregunta</button>
</body>
</html>

Conteste a la pregunta, por favor

¿Hola cómo estas?

Ejemplo nº4

Arriba de estas líneas en el ejemplo 4, hemos usado el mismo código prácticamente para tres botones distintos. Dependiendo del botón que se elija el texto cambiará simulando una respuesta.

Otro ejemplo.

<!DOCTYPEhtml>
<html>
<body>

<h2>Preguntame</h2>

<p>Hola, me llamo Mike.</p>

<p>¿Qué me has dicho?</p>

<button onclick="document.getElementById('ImagenInicial').src='http://www.negocioscontralaobsolescencia.com/files/theme/ART143JAVASCRIPT2/sorpresa.jpg'">Yo soy tu padre</button>

<img id="ImagenInicial" src="http://www.negocioscontralaobsolescencia.com/files/theme/ART143JAVASCRIPT2/contento.jpg" style="width:100px">

<button onclick="document.getElementById('ImagenInicial').src='http://www.negocioscontralaobsolescencia.com/files/theme/ART143JAVASCRIPT2/triste.jpg'">Me caes mal</button>

</body>
</html>

Preguntame

Hola, me llamo Mike.

¿Qué me has dicho?

Ejemplo nº5

Si observamos el código es prácticamente el mismo del ejemplo 4 con la salvedad de que en vez de cambiar un texto por otro cambiamos la imagen por otra, la cual simularía cambiar el estado de ánimo del emoticono de la imagen dependiendo de nuestra respuesta.

Ahora vamos a cambiar estilos CSS, de una manera simple pero rápida, por supuesto si se buscase cambiar algo más complejo seguramente esta no sería la mejor manera, pero para cambios sencillos es perfecto.

Veamos…

<!DOCTYPEhtml>
<html>
<body>

<h2>Ahora vamos a cambiar el estilo del texto</h2>

<p id="ejemplo6">Veamos como podemos cambiar el estilo con JavaScript</p>

<button type="button" onclick="document.getElementById('ejemplo6').style.fontSize='50px'">Pulsa para cambiar el tamaño</button>

</body>
</html>

Ahora vamos a cambiar el estilo del texto

Veamos como podemos cambiar el estilo con JavaScript

Ejemplo nº6

En el ejemplo 6 vemos como podemos modificar el tamaño de un texto de una manera rápida en el mismo documento HTML.

<!DOCTYPEhtml>
<html>
<body>

<h2>Ahora vamos a cambiar el estilo del texto</h2>

<p id="ejemplo6_2">Veamos como podemos cambiar el estilo con JavaScript</p>

<button type="button" onclick="document.getElementById('ejemplo6_2').style.fontWeight='bold'">Pulsa para cambiar a negrita</button>

</body>
</html>

Ahora vamos a cambiar el estilo del texto

Veamos como podemos cambiar el estilo con JavaScript

Ejemplo 6_2

En el ejemplo 6_2 vemos prácticamente la misma modificación, pero esta vez ponemos el texto en negrita.

<!DOCTYPEhtml>
<html>
<body>

<h2>Cambiando el estilo de visualización podemos...</h2>

<p>En un lugar de la mancha de</p>

<p id="ejemplo7" style="display:none">cuyo nombre no quiero acordarme</p>

<button type="button" onclick="document.getElementById('ejemplo7').style.display='block'">Leer más</button>

</body>
</html>

Cambiando el estilo de visualización podemos...

En un lugar de la mancha de

Ejemplo nº7

En el ejemplo 7 hemos puesto parte del texto oculto, y mediante un botón hemos cambiado su estado a visible, con style="display:none (no visible) y style.display='block' que en este caso lo volvería visible, siendo otro ejemplo más de cambio de estilo.

Y hasta aquí hemos llegado por hoy, os aconsejo practicar intentando realizar variaciones en imágenes, textos y respuestas hasta la semana que viene que continuaremos añadiendo más elementos JavaScript a nuestra página, que os facilite asimilar el funcionamiento básico de estos comandos y su empleo.

Manuel Castelló (kasmangou)

Temas relacionados: Programación, Redacción independiente, kasmangou, JavaScript

Reconocimientos y más información sobre la obra gráfica
ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.

0 Comentarios