La forma más común y recomendada de incluir JavaScript es en un archivo externo. Esto permite separar la lógica del JavaScript del contenido HTML, facilitando el mantenimiento y la reutilización del código.
<!DOCTYPE html>
<html>
<head>
<title>Incluir JavaScript Externo</title>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
Este método utiliza la etiqueta <script> con el atributo src para enlazar el archivo JavaScript externo.
Puedes incluir JavaScript directamente en la sección <head> del documento HTML. Este método es útil cuando deseas ejecutar el código antes de que el contenido de la página se cargue.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript en la Cabeza</title>
<script>
alert('Hola, desde el head');
</script>
</head>
<body>
</body>
</html>
Este enfoque es útil si el script no depende del contenido de la página, pero puede retrasar la carga de la misma.
Incluir JavaScript en la parte inferior del cuerpo del documento (<body>) permite que el código se ejecute después de que se haya cargado todo el contenido HTML.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript en el Cuerpo</title>
</head>
<body>
<script>
alert('Hola, desde el body');
</script>
</body>
</html>
Este método es eficiente, ya que no bloquea la carga del contenido visible de la página.
El JavaScript en línea se ejecuta directamente en elementos HTML utilizando el atributo on* (por ejemplo, onclick, onmouseover). Este método no es recomendado para proyectos grandes.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Inline</title>
</head>
<body>
<button onclick="alert('Botón presionado!')">Haz clic en mí</button>
</body>
</html>
Este enfoque es fácil de usar, pero puede llevar a problemas de mantenimiento y seguridad si no se usa con cuidado.