JavaScript

Cómo insertar JavaScript en HTML

insertar javascript en html

En este tutorial te mostraremos cómo incluir JavaScript en HTML. Al comienzo incluiremos una breve introducción a JavaScript, mientras que el resto de la guía se enfocará en varias formas de insertar JavaScript en HTML.

Si quieres mostrar contenido estático, por ejemplo, un conjunto de imágenes, HTML puede hacer el trabajo por ti. Sin embargo, las páginas estáticas lentamente se están convirtiendo en una cosa del pasado. La mayoría del contenido hoy en día es interactivo e incluye presentaciones de diapositivas llamativas, formularios y menús. Estas mejoran la experiencia del usuario y le agregan dinamismo al sitio web. Esto se logra con los lenguajes de script y JavaScript es uno de los más famosos en este sentido, ya que le permite a los desarrolladores crear sitios web que interactúan con el usuario y viceversa. A pesar de que hay muchos otros lenguajes disponibles, ninguno de ellos es tan popular como JavaScript. Y para utilizarlo en su mayor potencial, se usa en conjunto con HTML.

Ventajas de JavaScript

JavaScript primero fue conocido como LiveScript. Pero como Java era un lenguaje muy popular, Netscape decidió cambiarle el nombre a JavaScript. Su primera aparición se remonta a 1995 dentro de Netscape 2.0. Estas son algunas de las principales ventajas de usar JavaScript:

Interacción mínima con el servidor

Es un hecho bien conocido que si quieres optimizar el rendimiento de un sitio web, la mejor manera es reducir la comunicación con el servidor. JavaScript ayuda en este sentido al validar la información que ingresa el usuario en el lado del cliente. Solo envía solicitudes al servidor después de ejecutar las comprobaciones de validación iniciales. Como resultado, el uso de recursos y la cantidad de solicitudes al servidor se reduce significativamente.

Interfaces más completas y fáciles de usar

Al usar JavaScript, puedes crear interfaces interactivas del lado del cliente. Por ejemplo, agregar controles deslizantes, presentaciones de diapositivas, efectos al poner el cursor sobre objetos, funciones de arrastrar y soltar, etc.

Retroalimentación inmediata para el usuario

Al usar JavaScript, puedes asegurarte de que los usuarios obtengan una respuesta inmediata. Por ejemplo, imaginemos que un usuario ha rellenado un formulario y ha dejado un campo vacío. Sin la validación de JavaScript, tendrán que esperar a que la página se vuelva a cargar solo para darse cuenta de que dejaron un campo vacío. Sin embargo, con JavaScript, serán alertados al instante.

Fácil depuración

JavaScript es un lenguaje interpretado, lo que significa que el código escrito se descifra línea por línea. En caso de que aparezcan errores, obtendrás el número de línea exacto donde se encuentra el problema.

Insertar JavaScript en HTML

Hay dos formas de incluir JavaScript en HTML y hacer que funcionen juntos. Ahora que hemos hablado sobre JavaScript y hemos visto cuáles pueden ser algunas de sus ventajas, echemos un vistazo a algunas de las formas en que podemos conectar JavaScript con HTML.

Agregar JavaScript directamente a un archivo HTML

La primera forma de insertar JavaScript en HTML es directa. Puedes hacerlo utilizando la etiqueta <script> </script> que debe envolver todo el código JS que escribas. Se puede agregar el código JS:

  • entre las etiquetas <head>
  • entre las etiquetas <body>

Dependiendo de dónde agregues el código JavaScript en tu archivo HTML, la carga será diferente. Por lo general se recomienda agregarlo en la sección <head> para que permanezca separado del contenido de tu archivo HTML. Pero colocarlo dentro de <body> puede ayudar a mejorar la velocidad de carga, ya que el contenido del sitio web se cargará más rápido, y solo después de eso se procesará el JavaScript. Para este ejemplo, echemos un vistazo al siguiente archivo HTML que debe mostrar la hora actual:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>JAVASCRIPT IS USUALLY PLACED HERE</script>
<title>Time right now is: </title>
</head>
<body>
<script>JAVASCRIPT CAN ALSO GO HERE</script>
</body>
</html>

En este momento, el código anterior no contiene JavaScript y, por lo tanto, no puede mostrar la hora. Podemos agregar el siguiente código para asegurarnos de que muestre la hora correcta:

var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());

Envolveremos este código con las etiquetas <script> y </script> y lo colocaremos en la cabecera (head) del código HTML para garantizar que cada vez que se cargue la página, se genere una alerta que muestre la hora actual al usuario. Así es como se verá el archivo HTML después de agregar el código:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now is: </title>
<script>
var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
</script>
</head>
<body>
</body>
</html>

Si quieres mostrar la hora dentro del cuerpo (body) de la página, deberás incluir la script dentro de las etiquetas <body> de la página HTML. Así es como se verá el código cuando lo hagas:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now is: </title>
</head>
<body>
<script>
let d = new Date();
document.body.innerHTML = "<h1>Time right now is:  " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()
"</h1>"
</script>
</body>
</html>

Así es como se vería el resultado final:Ejemplo del resultado al insertar javascript en html

Agregar código JavaScript a un archivo separado

A veces, insertar JavaScript en HTML directamente no parece ser la mejor opción. Sobre todo porque algunos scripts de JS deben utilizarse en varias páginas, por lo tanto, es mejor mantener el código JavaScript en archivos separados. Es por esto que la forma más aceptable de incluir JavaScript en HTML es importando archivos externos. Se puede hacer referencia a estos archivos desde adentro de los documentos HTML, al igual que hacemos referencia a los documentos CSS. Algunos de los beneficios de agregar código JS en archivos separados son:

  • Cuando los códigos HTML y JavaScript están separados, se cumple el principio de diseño de separación y hace que todo sea mucho más sostenible y reutilizable.
  • La legibilidad y el mantenimiento del código es mucho más fácil.
  • Los archivos JavaScript en caché mejoran el rendimiento general del sitio web al disminuir el tiempo que tardan las páginas en cargarse.

Podemos hacer referencia al archivo JavaScript desde HTML así:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now:</title>
</head>
<body>
</body>
<script src="js/myscript.js"></script>
</html>

El contenido del archivo myscript.js será:

let d = new Date();
document.body.innerHTML = "<h1>Time right now is:  " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()</h1>"

Nota: Aquí se asume que el archivo myscript.js se encuentra en el mismo directorio que el archivo HTML.

Ejemplo de JavaScript para validar una dirección de correo electrónico

JavaScript potencia tu aplicación al ayudarte a validar los datos ingresados por el usuario en el lado del cliente. Uno de los datos del usuario más importantes que a menudo necesitan validación son las direcciones de correo electrónico. Esta función de JavaScript puede ayudarte a validar la dirección de correo electrónico ingresada antes de enviarla al servidor:

function validateEmailAddress(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
$("#result").text("");
var emailaddress = $("#email").val();
if (validateEmailAddress(emailaddress)) {
$("#result").text(emailaddress + " is valid :)");
$("#result").css("color", "green");
} else {
$("#result").text(emailaddress + " is not correct, please retry:(");
$("#result").css("color", "red");
}
return false;
}
$("#validate").bind("click", validate);

Para adjuntar esta función a una entrada de formulario, puedes usar el siguiente código:

<form>
<p>Enter an email address:</p>
<input id='email'>
<button type='submit' id='validate'>Validate!</button>
</form>
<h2 id='result'></h2>

Este es el resultado que obtendrías después de combinar todos los ingredientes en un archivo HTML:
Ejemplo de cómo insertar javascript en html y validación de email exitosa

Y si la validación es incorrecta, el resultado será diferente:
Ejemplo de cómo insertar javascript en html y validación de email errada

¡Felicitaciones! Has aprendido a insertar JavaScript en HTML con algunos ejemplos básicos.

Palabras finales

En este artículo hablamos sobre las dos formas de incluir JavaScript en el código HTML y, cuando lo entiendas aún mejor, las posibilidades de hacer grandes cosas con estos dos lenguajes de programación son infinitas. JavaScript se puede usar en combinación con HTML para dar forma a aplicaciones web modernas que sean intuitivas, interactivas y fáciles de usar. Al usar la validación simple del lado del cliente, se reduce el tráfico del servidor y mejora la eficiencia general del sitio web.

Agrega un Comentario

Dale clic aquí para dejar un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

0
96
€/mes
  • Soporte 24/7.
  • Migración gratis.
  • 57% De Descuento.