JavaScript para desarrolladores

 

JavaScript fácil para páginas web. Códigos y ejemplos prácticos

Como usar e insertar JavaScript en el HTML de las páginas web para agregarles efectos y funciones y hacerlas más dinámicas e interactivas. Sencillo tutorial para aficionados.

 

 

 

 

¿Qué es el lenguaje JavaScript?

Javascript es un sencillo lenguaje de programación, creado y diseñado para utilizarse en las páginas web.
Permite añadirles muchas funcionalidades, que las hacen más dinámicas, interactivas, útiles y atractivas.
Podrás comprobar muchos efectos útiles más abajo en esta misma página, incluso crearlos tu mismo, copiando los códigos.
Javascript no es más que líneas de texto, que pueden ser escritas con cualquier editor, como el sencillo Bloc de notas de Windows.
Este código es insertado dentro del código HTML o código fuente de las paginas web, encerrado entre etiquetas que le indican al navegador que son instrucciones que debe ejecutar.
En el siguiente cuadro se escribe una frase usando Javascript, empleando un efecto similar al de la Matrix.

N

o

r

f

i

P

C

J

a

v

a

s

c

r

i

p

t

f

á

c

i

l

e

n

p

á

g

i

n

a

s

w

e

b

En los ejemplos prácticos más abajo, comparto el código que usa el script.

Probar Javascript en el navegador

Algunos bloqueadores de anuncios impiden que JavaScript funcione y por lo tanto que los efectos en esta página no se muestren.
En la siguiente línea se puede comprobar.

¿Dónde y cómo insertar el código Javascript en las páginas web?

Hay varias formas de insertar los códigos JavaScript en las páginas web.
Podemos agregarlo en el área del HEAD de la página o encabezado o en el área del BODY o cuerpo.
¿Cuál es la diferencia?
Las pagina web se dividen en dos zonas o áreas, el HEAD y el BODY.
El navegador al abrir una página lee primero todas las instrucciones escritas en el área del HEAD, nada escrito aquí se visualiza.
Después renderiza el contenido en el área del BODY, texto, imágenes y scripts.
En la siguiente imagen muestro la estructura de una página con las dos áreas principales y la ubicación recomendada de los scripts.
Es decir que solo debemos de insertar en el área del HEAD el código imprescindible y necesario, para tenerlo cargado al representar el navegador el cuerpo de la página.
Siempre que sea posible para no afectar la velocidad de carga de la página y evitar bloqueos, agregarlo justo antes del cierre de la etiqueta </body>.
¿Cómo se usa e inserta el código JavaScript?

JavaScript se usa de formas diferentes en las páginas web y en aplicaciones.

Forma directa

- Agregándolo directamente, encerrado entre dos etiquetas script. Por ejemplo:

<script>

CODIGO

</script>

- Insertándolo desde un archivo externo.
Se usa cuando es mucha cantidad de código o cuando se encuentra en un sitio externo de internet. Por ejemplo:

<script src="script.js"></script>

En los dos casos anteriores se carga de forma forzada.

Forma interactiva

Método que permite ejecutar el código solo a petición del usuario mediante un evento.
Estos eventos pueden ser varios, entre ellos: un clic del ratón, situar el ratón sobre un área determinada, la página al iniciarse, seleccionar una casilla, botón u otro tipo de forma, etc.
Hay varias formas de hacerlo.
A continuación algunos ejemplos sencillos y básicos.

Escribir con JavaScript

Con JavaScript se puede escribir en una página texto o código HTML (imágenes, enlaces, marcos, etc.) ya sea de forma directa o interactiva.
Para eso se pueden emplear las funciones document.write(), innerHTML, así como crear elementos con createElement() o agregarlos con appendChild().

Ejemplos

✔ Esta línea se ha escrito directamente con document.write()

✔ Esta línea se ha escrito directamente con innerHTML

✔ Escribir con innerHTML

✔ La siguiente imagen se escribe, pero solo después que la página termine de cargar todos sus elementos, usando la función addEventListener.

Funciones más utilizadas en Javascript

¿Qué son las funciones?

Una función es un pedazo de código que permanece inactivo hasta que es llamada por un evento determinado por su nombre.
En este ejemplo se llama con un botón.

<script>

function popup() {

    alert("Hola gente")

}

</script>

<button type="button" onclick="popup()">Probar función</button>

Probar función
Las funciones cuando son sencillas, también se pueden llamar con un enlace, incluyendo javascript y la función en la propiedad HREF.
Algunos ejemplos. Pruébalos.
✔ Mensaje con un alerta
✔ Compartir en Facebook
✔ Imprimir esta página
✔ Refrescar esta página
Código empleado:

<a href="javascript:(function(){alert('Hola gente')})()">Mensaje</a>

<a href="javascript:void(window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location)));">Facebook</a>

<a href="javascript:window.print();">Imprimir</a>

<a href="javascript:window.location.reload();">Refrescar</a>

 

Ojo. Cuando se usa JavaScript en los enlaces, para abreviar el código, el navegador lo considera como si se tratara de una dirección URL, por lo que no deben existir espacios en el código y si son necesarios se tienen que escapar (%20).
Es necesario principalmente, al crear Bookmarklets
Usa la siguiente herramienta: Escapar y codificar caracteres de direcciones URL a hexadecimal

Alertas

Un alerta es una función que se usa para mostrar un mensaje en un cuadro, después de realizar alguna acción, que puede ser presionar un enlace, un botón, dar clic en un contenedor o cualquier otro evento.
Es necesario confirmar para cerrar el cuadro.
Probar alerta
Código empleado:

<button type="button" onclick="alert('Esto es un cuadro de alerta')">Probar alerta</button>