Javascript es uno de los tres componentes básicos de la web junto con HTML y CSS. Si HTML es la estructura y el diseño CSS, se puede decir que Javascript es la funcionalidad de las páginas web de Internet.
Hoy en día, se pueden crear animaciones simples usando CSS, pero en general, es Javascript el que habilita todo lo que “sucede” en una página web. Algunos ejemplos de cosas que suceden pueden ser que algo cambie cuando hace clic en un botón, que un formulario muestre que ha ingresado números en el formato incorrecto o que algo se mueve o cambia en el sitio web.
Una idea errónea común es que Java y Javascript son lo mismo, lo cual no es cierto. Ambos son lenguajes de programación, pero son relativamente diferentes en términos de cómo se usan.
¿Qué puedes hacer con Javascript?
Un uso común de Javascript es determinar qué sucede cuando un usuario interactúa de manera diferente en una página web. Se llama usar ‘escuchadores de eventos’. Por ejemplo, puede escuchar después de que un usuario se desplaza, hace clic en la tecla ENTRAR o comienza a completar un formulario y decide qué debe suceder cuando el oyente escucha estas cosas.
Javascript también se puede usar para llamar a las API (consulte, por ejemplo, la publicación de blog ¿Qué es una API?), Para manejar la lógica con bucles y declaraciones if, para realizar cálculos y mucho más. La mayoría de las cosas se pueden hacer con Javascript de una forma u otra.
¿Cómo se usa Javascript?
Para poder usar Javascript, es bueno tener primero una comprensión básica de cómo funciona HTML, que puede obtener en la publicación del blog ¿Qué es HTML?.
Una de las cosas más básicas en Javascript es el uso de variables. Si se va a guardar el número 25 en la variable edad, se puede escribir de la siguiente manera:
var edad = 25;
Si se va a guardar un texto en una variable, se utilizan comillas alrededor del texto, de la siguiente manera:
var nombre = “Tony Montana”;
Cada expresión en Javascript termina con un punto y coma.
Los detectores de eventos se pueden crear utilizando la función addEventListener (). Todas las funciones en Javascript terminan con paréntesis, y dentro de los paréntesis se escriben los parámetros de entrada que necesita la función. La función addEventListener necesita saber dos cosas, primero qué escuchar y qué sucederá cuando suceda lo que se está escuchando. Así se puede describir:
element.addEventListener (evento, función);
El primer elemento de la parte describe a qué se debe aplicar el oyente. Por ejemplo, puede ser que desee escuchar después de que alguien haga clic en un botón determinado. En ese caso, el botón es ‘elemento’. Para escuchar los cambios en el ancho de la ventana del navegador, realizados anteriormente, siga estos pasos:
window.addEventListener (‘cambiar tamaño’,
mostrarTamañoCambiadoVentana);
Window es un objeto en Javascript que contiene toda la información sobre la ventana del navegador. Aquí se crea un oyente en el objeto de la ventana y elegimos escuchar específicamente después del cambio en el tamaño de la ventana. El segundo parámetro de entrada, showChangedWindowSize, es el nombre de una nueva función que debe especificar qué debe suceder cuando se cambia el tamaño de la ventana. Por lo tanto, se llamará a la función showChangedWindowSize cada vez que se cambie el tamaño de la ventana. Una nueva función se puede definir de la siguiente manera:
función showChangedWindowSize () {
console.log (window.innerWidth);
}
Primero, se escribe la palabra clave función, lo que indica que se va a definir una nueva función. Luego viene el nombre de la función, que en este caso es showChangedWindowSize, y después del nombre de la función vienen los paréntesis. Los paréntesis están vacíos, ya que la función no necesita ningún parámetro de entrada.
Luego, la función se abre y se cierra usando alas de gaviota {}. El código que existe entre las alas de las gaviotas es el contenido de la función. En este caso se utiliza la función console.log(), que registra lo que está entre paréntesis. Si está utilizando el navegador Chrome en una computadora, puede intentar hacer clic derecho en cualquier parte de esta página, hacer clic en Inspeccionar y luego cambiar el ancho de la ventana del navegador, y el ancho en píxeles se imprimirá en el área titulada Consola en el cuadro que apareció cuando hizo clic en Inspeccionar.
Iniciar sesión es fácil, pero no contribuye directamente a la interactividad con los usuarios habituales. Para imprimir el ancho en algún lugar de la página web, puede usar la función document.querySelector () para ‘agarrar’, por ejemplo, un elemento de párrafo (ver ¿Qué es HTML?) e insertar texto en ese elemento. La función document.querySelector necesita un parámetro de entrada, es decir, una descripción de qué elemento tomar.
La descripción se especifica utilizando un selector CSS, por ejemplo, una clase. Tomamos un nuevo ejemplo y esperamos que sea un poco más claro.
Supongamos que tenemos este código HTML:
En otras palabras, un elemento vacío con una clase para poder acceder al elemento en el código Javascript.
En el código Javascript podemos escribir así:
window.addEventListener (‘movimiento del mouse’,
showChangedMousePosition);
var posición del mouse =
document.querySelector (‘. posición del mouse’);
function showChangedMousePosition () {
mousePosition.innerHTML =
‘El puntero del mouse está encendido’
+ window.event.pageX
+ ‘pixels from the left edge and’
+ window.event.pageY
+ ‘pixels from the top edge’;
}
En primer lugar, se crea un detector de eventos que escucha los movimientos del puntero del mouse utilizando la palabra clave ‘mousemove’. En la siguiente línea de código, el elemento de párrafo se toma indicando que queremos obtener el primer elemento que tiene la posición del mouse de clase y el elemento se guarda en la variable mousePosition.
En cada movimiento del puntero del mouse, se llama a la función showChangedMousePosition. En esa función se usa la variable mousePosition y con la extensión .innerHTML se indica que se quiere cambiar el código HTML en el párrafo.
Puede verse como el cambio de contenido entre las etiquetas de inicio y final en el elemento de párrafo que actualmente está vacío. mousePosition.innerHTML se agrega a una combinación de texto y números que se pueden combinar con el signo más. window.event.pageX y window.event.pageY contienen datos para la posición actual del puntero del mouse en relación con el borde izquierdo y el borde superior de la página web, respectivamente. Prueba a mover el puntero del ratón (o haz clic en diferentes partes de la pantalla si estás usando un móvil)
Otra cosa que puede contribuir a la interactividad es hacer algo con el texto que ingresa un usuario. Para hacer esto, se puede crear un elemento de entrada en el código HTML de la siguiente manera:
= ‘Escribe algo aquí…’>
Para acceder al elemento en el código Javascript, puede, como de costumbre, escribir lo siguiente:
var textInput =
document.querySelector (“.-text-input”);
Si por alguna razón tenemos la idea de que queremos imprimir el texto que el usuario ha escrito al revés, podemos hacerlo creando primero un detector de eventos que escuche la entrada en el elemento de entrada de la siguiente manera:
textInput.addEventListener (‘entrada’,
showReversedText);
Para cada nueva entrada en el elemento de entrada, se llamará a la función showReversedText. Un párrafo en el que se va a imprimir el texto hacia atrás también debe ser accesible, por lo que hacemos lo mismo que de costumbre con un elemento de párrafo en el código HTML:
Y en el código Javascript, accedemos al elemento así:
var reversedTextElement =
document.querySelector (“. texto invertido”);
La funcionalidad de imprimir texto al revés se puede lograr de la siguiente manera:
función mostrarTextoInverso (evento) {
var texto = evento.objetivo.valor;
var texto invertido =
texto.dividir (“”). contrarrestar (). unirse (»);
elementoTextoInvertido.innerHTML =
TextoInvertido;
}
Tenga en cuenta que ingresamos un parámetro de entrada aquí, aunque no lo hicimos en el detector de eventos. Lo que sucede entonces es que tenemos acceso a un objeto de evento donde está disponible una gran cantidad de información sobre lo que está sucediendo en el cuadro de entrada. Luego guardamos el texto que se ha ingresado en la variable ‘texto’ configurándolo en event.target.value.
Luego, la funcionalidad de Javascript existente se usa para separar primero las letras en el texto, invertir y luego fusionar el texto nuevamente. Finalmente, el resultado se imprime en el elemento de párrafo.
Hay posibilidades casi infinitas con Javascript y, por lo tanto, lo que he visto aquí es obviamente solo una fracción de lo que se puede lograr. Pero es, después de todo, un poco de la funcionalidad más básica que se usa a menudo.