HTML, CSS y JavaScript son los tres lenguajes principales utilizados en el desarrollo front-end. HTML es un lenguaje de marcado, mientras que CSS es un lenguaje de estilo.
JavaScript es un lenguaje de programación orientado a objetos que se utiliza principalmente para crear el lado del cliente de aplicaciones web y móviles. Este lenguaje dinámico de código abierto se ha convertido en uno de los más utilizados lenguajes de programación por su flexibilidad y facilidad de comprensión.
Con HTML5 y CSS3, puede crear sitios web estáticos. Sin embargo, para agregar interactividad a dicho sitio, debe usar un lenguaje de programación como JavaScript que los navegadores entiendan.
Este artículo explicará por qué necesita usar JavaScript con HTML, los diferentes enfoques para agregar código JavaScript a HTMLy las mejores prácticas para combinar los dos idiomas.
Why it is crucial to use JavaScript in HTML
- Agregar interactividad: La interactividad responde a las entradas/acciones del usuario en tiempo real sin recargar el navegador. Por ejemplo, puede tener un contador que aumente en uno cada vez que se haga clic en él. Otro ejemplo puede ser una respuesta que les diga a los usuarios que sus comentarios se han enviado cada vez que hacen clic en el botón Enviar.
- Validación del lado del cliente: puede usar JavaScript para capturar los datos correctos en los formularios. Por ejemplo, puede usar este lenguaje de programación para validar las entradas del usuario en una página de registro por el formato de correo electrónico, la longitud de la contraseña y la combinación de caracteres a usar.
- Manipulación DOM: JavaScript ofrece el Modelo de objetos de documento (DOM), que facilita el cambio dinámico de los contenidos de una página web. Con esta tecnología implementada, los contenidos de una página se actualizan automáticamente en función de las entradas del usuario sin recargar la página web.
- Compatibilidad entre navegadores: JavaScript es compatible con todos los navegadores modernos. Las páginas web creadas con HTML, CSS y JavaScript funcionarán perfectamente en diferentes navegadores.
Requisitos previos
- Comprensión básica de HTML: entiendes basico Etiquetas HTML, puede agregar botones y crear formularios usando HTML.
- Comprensión básica de CSS: Comprende los conceptos de CSS, como los selectores de id, class y element.
- Un editor de código: Puedes utilizar una Editor de código como VS Code o Atom. También puede utilizar un compilador de JavaScript en línea si no desea instalar software en su sistema.
How to use JavaScript in HTML
Puede utilizar tres enfoques principales para agregar código JavaScript a HTML. Exploramos cada enfoque y dónde se adapta mejor.
#1. Código incrustado entre and etiqueta
Este enfoque le permite tener códigos JavaScript y HTML en el mismo archivo (archivo HTML). Podemos comenzar creando una carpeta de proyecto donde demostraremos cómo funciona. Puede usar estos comandos para comenzar;
mkdir javascript-html-playground
cd javascript-html-playgroundCrea dos archivos; index.html y estilo.css
Agregue este código de inicio al archivo HTML;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>Agregue este código de inicio a su archivo CSS;
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
display: block;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 8px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 5px 10px;
border: none;
border-radius: 2.5px;
font-size: 8px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}Cuando se represente la página web, tendrá algo como esto;
Ahora podemos agregar un código JavaScript simple que dice "enviado" cuando hace clic en el botón Enviar. El código HTML refactorizado con JavaScript será;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="submitted()" />
</form>
</div>
<script>
function submitted() {
alert("submitted");
}
</script>
</body>
</html>Cuando haga clic en el botón Enviar, obtendrá algo similar a esto;
Ventajas de incrustar código JavaScript entre … etiquetas
- Rápido de implementar: Trabajar en el mismo archivo puede ahorrarle tiempo, ya que puede hacer referencia a su código JavaScript desde el código HTML del mismo archivo.
- Código fácil de leer: La presencia de tags separates HTML from JavaScript codes, making it easier to read and debug.
Contras de incrustar código JavaScript entre … etiquetas
- Hace que sea difícil reutilizar el código: Si tiene varios formularios en su aplicación, significa que creará código JavaScript para cada formulario.
- Ralentiza el rendimiento: Los grandes bloques de código en el documento HTML pueden reducir la velocidad de carga.
#2. Código en línea mediante el uso de código JavaScript directamente dentro de HTML
En lugar de encerrar el código JavaScript anterior en …. etiquetas, puede agregarlo directamente al código HTML. Usaremos el mismo código HTML y hoja de estilo (style.css).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="alert('inline submit')" />
</form>
</div>
</body>
</html>Cuando hace clic en enviar, una pequeña ventana en su navegador con las palabras "envío en línea" aparecerá.
Ventajas de agregar JavaScript como código en línea
- Rápido de implementar: No tiene que cambiar de un documento a otro para escribir código HTML y JavaScript.
- Perfecto para una aplicación pequeña: Si tiene una aplicación pequeña que no exige mucha interactividad, JavaScript en línea es una opción perfecta.
Contras de agregar JavaScript como código en línea
- El código no es reutilizable: Si su aplicación tiene varios formularios, creará código JavaScript para cada formulario.
- Ralentiza el rendimiento: Los grandes bloques de código en el documento HTML pueden reducir la velocidad de carga.
- Legibilidad del código: A medida que la base de código continúa creciendo, la legibilidad del código se reduce.
#3. Creación de un archivo JavaScript externo
A medida que crezca su aplicación, notará que agregar código JavaScript directamente a un archivo HTML no es una buena idea. También es probable que tenga páginas web con velocidades de carga bajas cuando tiene mucho código en su archivo HTML.
Crear un nuevo archivo script.js para llevar su código JavaScript.
Importe el archivo script.js en el archivo HTML;
<head>
<script src="script.js"></script>
</head>La nueva página HTML actualizada tendrá este código;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="script.js"></script>
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>Agregue este código al script.js archivo;
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("external JS sheet submit");
});
});Este JavaScript hace lo siguiente;
- Tenemos un detector de eventos que espera el
DOMContentLoadedevento para disparar. - Una función de devolución de llamada se ejecuta después de la
DOMContentLoadedse dispara el evento. - El código usa querySelector para elegir un formulario.
- Usamos la
event.preventDefault()para evitar que el DOM elija el comportamiento predeterminado (actualizar la página o navegar a una página nueva) cuando se activa el evento de envío. - Un mensaje "envío de hoja JS externa" se activa una vez que se activa el evento de envío.
JavaScript in HTML: Best Practices
- Minimizar los tamaños de archivo: Cuanto mayor sea el tamaño del archivo, más tiempo tardará en cargarse en el navegador. Minimizar elimina todos los caracteres no deseados en el código fuente sin cambiar su significado o rendimiento. Puede usar herramientas como Yahoo YUI Compressor y HTMLMinifier para crear una base de código compacta.
- Mantenga su código organizado: Esto hará que sea fácil de leer y mantener. Puedes usar extensiones como Más bonita para organizar su código.
- Usar bibliotecas externas: Si una biblioteca puede realizar una determinada tarea para su aplicación, no es necesario escribir el código desde cero. Sin embargo, evite usar varias bibliotecas que logren los mismos objetivos en el mismo proyecto.
- Optimizar la ubicación de JavaScript: Si tiene la intención de agregar código JavaScript a su archivo HTML, asegúrese de que esté después del código HTML. Coloque el JavaScript entre tags before closing the tag. This ensures that HTML content such as text, images, and table load first before JavaScript, improving loading speed.
Resumen
Ahora puede usar cómodamente JavaScript con HTML para crear páginas web interactivas. El enfoque que utilizará para fusionar las dos tecnologías dependerá de la naturaleza de la aplicación web que esté creando. Por ejemplo, puede usar código en línea al crear una aplicación pequeña. Por otro lado, una gran aplicación necesita un archivo JavaScript externo que importará a su archivo HTML.
Fin del retiro Bibliotecas de tablas de JavaScript que puedes usar hoy.
