¿Qué No Se Puede Hacer sin JavaScript?

Analicemos qué se puede hacer en JS, qué no se puede hacer en otro lenguaje y por qué siempre estará relacionado con él.

Resulta que no basta con conocer solo HTML y CSS para crear un sitio web: resultará estático. Agrega PHP y las páginas se volverán dinámicas. Pero si necesitas interactividad, no puedes prescindir de JavaScript. Claro, puedes implementar animaciones en CSS, a veces incluso complejas y hermosas, pero no alcanza para una verdadera interactividad, porque CSS permite cambiar la apariencia de la página, pero no puede agregar nuevos elementos, reaccionar a acciones específicas de los usuarios, hacer animaciones fluidas o con un intervalo específico.

Mucho se reduce a la adaptabilidad: CSS obliga a escribir código adicional para dispositivos móviles, mientras que JS siempre funciona igual, si el usuario no lo ha desactivado y si no es IE6.

Para qué Sirve JavaScript

JavaScript es un lenguaje de scripts. Con su ayuda, puedes rastrear eventos y escribir reacciones a ellos:

• Pasar el mouse sobre un elemento (evento) — desplegar una lista (reacción).
• Hacer clic en un botón — mostrar un mensaje.
• Cambiar el valor en un campo — realizar cálculos y mostrar el resultado.
• Presionar un botón en el teclado — trasladar el enfoque a un campo para que el usuario no escriba en el vacío.
• Activar un temporizador — cambiar el fondo de un elemento.

Esta es solo una pequeña lista de los eventos y reacciones posibles.

Animación

JS permite una gran variedad tanto en términos de animación como de eventos que pueden desencadenar una reacción.

En JS puedes crear un slider usando solo unas pocas líneas de código. Para esto necesitas crear una estructura en HTML:

<div class='slider'>
  <div class='slider__block' id='slider__block01'>¡Vaya!</div>
  <div class='slider__block' id='slider__block02'>Qué</div>
  <div class='slider__block' id='slider__block03'>Genial</div>
  <div class='slider__block' id='slider__block04'>Animación</div>
</div>

Asignarle estilos en CSS:

.slider {
  color: #02020;
  width: 500px;
  height: 400px;
  overflow: hidden;
  border: 1px solid #eee;
  padding: 1px;
  margin: 50px;
}

.slider__block {
  width: inherit;
  height: 0px;
  text-align: center;
  font-size: 45px;
  position: relative;
  left: -99999999999px;
}

#slider__block01 {
  left: 0px;
  height: 400px;
}

Y escribir el cambio de fotogramas en JS:

var currSlide = 1;
function changeSlide() {
  document.getElementById("slider__block0" + currSlide).style.left = "-9999999px";
  document.getElementById("slider__block0" + currSlide).style.height = "0px";
  if (currSlide != 4) {
    currSlide++;
  } else {
    currSlide = 1;
  }
  document.getElementById("slider__block0" + currSlide).style.left = "0";
  document.getElementById("slider__block0" + currSlide).style.height = "400px";
}
setInterval(changeSlide, 500);

Tenemos 4 elementos de clase slider__block. Cada uno de estos elementos tiene un identificador del tipo slider__block01. Les asignamos estilos para ocultar todos los elementos excepto el primero. Luego entra en juego el script, que oculta el elemento actual y muestra el siguiente. Funciona con un temporizador, por lo que cada 500 milisegundos el slide cambia.

Claro, esta es una versión simplificada, pero se puede agregar animación suave, la capacidad de pasar diapositivas manualmente y mucho más.

Elementos interactivos

Los elementos interactivos son la especialidad de JavaScript. El ejemplo más común son las calculadoras en línea. Eliges diferentes parámetros y te calculan el costo de inmediato. Veamos una parte en HTML:

<div class='calc' style='padding:5px; margin:50px;'>
  <b>Área de la habitación: </b> <input type='number' id='floorSpace' value='0' onchange='calculateFloorCost();'> m<sup>2</sup><br><br>
  <b>Tipo de suelo deseado: </b>
  <select id='floorType' onchange='calculateFloorCost();'>
    <option value='0'>---</option>
    <option value='1'>Roble</option>
    <option value='2'>Pino</option>
    <option value='3'>Cerezo</option>
    <option value='4'>Abedul</option>
  </select>
  <br><br>
  <b>Precio:</b> <span id='totalCost'>0</span> dólares.<br><br>
  <i>No es una oferta pública.</i>
</div>

Y JS:

var floorCost = 0;
function calculateFloorCost() {
  switch(Number(document.getElementById("floorType").value)) {
    case 0: floorCost = 0; break;
    case 1: floorCost = 200; break;
    case 2: floorCost = 150; break;
    case 3: floorCost = 125; break;
    case 4: floorCost = 100; break;
  }
  document.getElementById("totalCost").innerHTML = floorCost * Number(document.getElementById("floorSpace").value);
}

Esta vez el evento se llama directamente en el HTML a través del atributo onchange en los elementos input y select. Al cambiar los valores de los elementos, se activa la función calculateFloorCost. Esta obtiene el costo de los diferentes tipos de suelo y luego lo multiplica por la cantidad de metros cuadrados. El resultado se coloca dentro del elemento totalCost.

El desarrollador de JS se enfrenta constantemente a este tipo de tareas, por lo que es útil no solo conocer los fundamentos del lenguaje, sino también tener experiencia práctica.

Ventanas emergentes

Las ventanas emergentes pueden ser de tres tipos:

• Modales;
• Nueva ventana con documento separado;
• Popup.

Las ventanas modales se abren con la función alert():

<input type='button' value='¡Haz clic en mí!' onclick="alert('¡Bien hecho!')">

Las ventanas emergentes con window.open():

<input type='button' value='Compartir en VK' onclick="window.open('https://vk.com/share.php?url=https://codigonautas.com', '', 'toolbar=0,status=0,width=626,height=436');">

Puedes escribir un script que muestre una ventana específica a los usuarios después de un tiempo determinado de abrir la página. Para esto, debes escribir los elementos en HTML y darles estilo. Al elemento popup se le debe establecer un fondo negro semitransparente y una posición fija. Debe ocupar todo el espacio y estar por encima de otros elementos. Al principio no debe ser visible.

<div id='popup'>
  <div id='popup__content'>
    <span id='popup__close' onclick='popupClose();'>X</span><br>
    ¡Por favor, suscríbete!
  </div>
</div>

#popup {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  left: -9999990000px;
  top: 0;
}

#popup__content {
  width: 30%;
  height: 150px;
  margin: 15px auto;
  padding: 2px;
  background: #fff;
}

#popup__close {
  cursor: pointer;
}

#popup__close:hover {
  color: #444;
}

function popup() {
  document.getElementById("popup").style.left = 0;
  document.getElementsByTagName("body")[0].style.overflow = 'hidden';
}

function popupClose() {
  document.getElementById("popup").style.left = '-999999999999px';
  document.getElementsByTagName("body")[0].style.overflow = 'auto';
}

setTimeout(popup, 2000);

Creamos dos funciones: una abre el popup, la otra lo oculta. La primera función debe ejecutarse después de un tiempo determinado de cargar la página. Para esto se usa la función setTimeout. La función de cierre se activa al hacer clic en el elemento popup__close.

También las funciones desactivan o activan el desplazamiento, para que el usuario no pueda desplazarse por la página mientras el popup está abierto.

Conexión con el servidor

El lenguaje proporciona la posibilidad de enviar una solicitud al servidor en cualquier momento y recibir una respuesta. Esta tecnología se llama AJAX y todavía no tiene análogos directos. Para usar AJAX, necesitas incluir la biblioteca jQuery.

Supongamos que estás creando un sitio de un centro meteorológico. Necesitas que el usuario pueda hacer clic en una fecha en el calendario y obtener inmediatamente el pronóstico. Para esto se crea el calendario (usamos una versión simplificada) y un bloque para mostrar el resultado.

<div id='calendar'>
  <span class='calendar__day' id='day1'>1</span>
  <span class='calendar__day' id='day2'>2</span>
  <span class='calendar__day' id='day3'>3</span>
</div>
<div id='result'>Selecciona un día</div>

.calendar__day {
  cursor: pointer;
  display: inline-block;
  border: 1px solid #eee;
  padding: 10px;
  margin: 2px;
}

//Cómo debe verse AJAX
$('.calendar__day').click(function () {
  $.post("meteo.php", {
    day: $(this).attr('id')
  }).done(function (data) {
    $('#result').html(data);
  });
});

Al hacer clic en algún día, el script envía datos con el método post al archivo meteo.php. Específicamente, la variable day, que contiene el id del elemento en el que el usuario hizo clic. En el archivo meteo.php se ejecuta una consulta a la base de datos y luego se muestra el resultado en la pantalla. Cuando el script recibe estos datos, los coloca en el elemento result.

Otros

Además, con JS se puede:

• Dibujar en canvas;
• Crear paneles de control para elementos de audio y video;
• Trabajar con cookies;
• Buscar información en la página;
• Desplazar el documento.

Y esto es solo una parte de las posibilidades.

HTML5 y CSS3 en lugar de JavaScript

Antes, JavaScript era la única solución para algunas tareas. Por ejemplo, la validez de los formularios se determinaba mediante expresiones regulares. Era complicado, porque a nadie le gustan las expresiones regulares.

Ahora esta tarea se puede delegar a HTML5. Por ejemplo, puedes especificar el tipo de campo number y solo se podrán ingresar números. También existe el tipo email, entonces el formulario no se puede enviar si la dirección no tiene el símbolo «@».

Antes, era necesario escribir así:

<input type='text' name='email' placeholder='email' id='email'> <span id='result'></span>

var emailInput = document.getElementById('email');
var result = document.getElementById('result');

function validateEmail() {
  var text = '';
  if (emailInput.value.match(/^[-._a-z0-9]+@(?:[a-z0-9][-a-z0-9]+\.)+[a-z]{2,6}$/i)) {
    text = "Éxito";
  } else {
    text = "Ingrese una dirección de correo electrónico válida";
  }
  result.innerHTML = text;
}

emailInput.onchange = validateEmail;

Ahora simplemente puedes hacer esto:

<input type='email' name='email' placeholder='email'>

Esto libera tiempo para otras tareas. Aunque, por supuesto, un usuario deshonesto puede intentar cambiar el tipo de campo para que se envíe el valor, por lo que es mejor realizar una verificación adicional en el archivo de procesamiento.

Análogos de JavaScript

JS tiene análogos que resuelven las mismas tareas, como TypeScript y CoffeeScript. Tienen las mismas capacidades, pero con diferente sintaxis. En realidad, los comandos de estos lenguajes simplemente se compilan en JS, por lo que no se pueden considerar una alternativa completa.

Se puede usar ASP.NET: los comandos de este lenguaje se convierten en las mismas funciones al compilarse, como si fuera una mezcla simple de HTML, CSS, JS y PHP.

No olvidemos Dart, desarrollado por Google como alternativa a JavaScript. Se posiciona como un lenguaje estructurado pero flexible. La primera versión estable se lanzó en 2013, pero aún no ha ganado una amplia aceptación.

Conclusión

JavaScript realiza muy bien sus tareas, aunque muchos afirman que carga demasiado la página. Pero si no usas bucles infinitos, código torcido y voluminoso y no reinventas la rueda, todo funcionará bastante rápido.

Como en todas partes, necesitas adquirir experiencia para escribir código de calidad. Para ello, necesitas leer artículos de buenas fuentes, interactuar con otros programadores y practicar mucho.