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 lenguajes de programación más utilizados debido a 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 HTML y las mejores prácticas para combinar los dos idiomas.
Tabla de contenido
Por qué es crucial usar JavaScript en 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 de 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: comprende las etiquetas HTML básicas, puede agregar botones y crear formularios usando HTML.
- Comprensión básica de CSS: comprende los conceptos de CSS, como la identificación, la clase y los selectores de elementos.
- Un editor de código: puede usar un editor de código como VS Code o Atom. También puede usar un compilador de JavaScript en línea si no desea instalar software en su sistema.
Cómo usar JavaScript en 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 las etiquetas
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-playground
Crea 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="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/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="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/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;
Pros of embedding JavaScript code between <script> … </script> tags
- Fast to implement: Working on the same file can save you time as you can reference your JavaScript code from HTML code from the same file.
- Easy to read code: The presence of <script> tags separates HTML from JavaScript codes, making it easier to read and debug.
Cons of embedding JavaScript code between <script> … </script> tags
- Makes it hard to reuse code: If you have several forms in your app, it means you will create JavaScript code for every form.
- Slows performance: Big code blocks on the HTML document can slow loading speeds.
#2. Inline Code by using JavaScript code directly inside HTML
Instead of enclosing the above JavaScript code in <script> …. </script> tags, you can add it directly to the HTML code. We will use the same HTML code and style sheet (style.css).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/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 haga clic en enviar, aparecerá una pequeña ventana en su navegador con las palabras "envío en línea".
Ventajas de agregar JavaScript como código en línea
- Rápido de implementar: no es necesario 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á un código JavaScript para cada formulario.
- Disminuye el rendimiento: los bloques de código grandes 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.
Cree un nuevo archivo script.js para llevar su código JavaScript.
Importe el archivo script.js en el archivo HTML;
<head> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/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="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" /> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/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 archivo script.js;
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 a que se active el evento DOMContentLoaded.
- Se ejecuta una función de devolución de llamada después de que se activa el evento DOMContentLoaded.
- El código usa querySelector para elegir un formulario.
- Usamos 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.
- Se activa un mensaje de "envío de hoja JS externa" una vez que se activa el evento de envío.
JavaScript en HTML: mejores prácticas
- Minimice el tamaño de los archivos: cuanto mayor sea el tamaño del archivo, más tiempo tardará en cargarse en el navegador. Minifying 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. Puede usar extensiones como Prettier para organizar su código.
- Use 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.
- Optimice 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 código JavaScript entre las etiquetas