Cómo vincular JavaScript a HTML
JavaScript es un lenguaje de secuencias de comandos muy popular que se usa tanto en el lado del cliente como en el lado del servidor. JavaScript es necesario para nuestras páginas web, ya que hace que nuestra página web sea interactiva.
Hay tres requisitos básicos para convertirse en un desarrollador front-end:
- Html,
- CSS,
- Javascript
HTML está acortado para un lenguaje de marcado de hyper text que proporciona estructura a nuestra página web y CSS da estilo a nuestras páginas. Finalmente, JavaScript, como se mencionó anteriormente, hace que nuestra página web sea interactiva. JavaScript también ayuda a alterar HTML y CSS.
Ahora surge una pregunta que podemos vincular/conectar JavaScript con HTML. Hoy en este artículo exploraremos casi todas las formas en que podemos vincular JavaScript a HTML.
¿Qué es una etiqueta de guión??
Antes de entrar en la solución de cómo vincular JavaScript a HTML, veamos la etiqueta de script.
El La etiqueta se usa para incrustar scripts del lado del cliente que son JavaScript. Esta etiqueta tiene elementos de secuencia de comandos o referencias a otro archivo de script utilizando el atributo SRC.
Sintaxis
Esta es una etiqueta de script con un atributo SRC en el que podemos proporcionar un nombre de archivo al que queremos hacer referencia.
Uso de JavaScript dentro del archivo HTML
Podemos vincular JavaScript a HTML agregando todo el código JavaScript dentro del archivo HTML. Logramos esto usando la etiqueta de script que se explicó anteriormente. Podemos poner la etiqueta dentro de la cabeza del HTML o al final del cuerpo. Depende totalmente de nosotros donde queremos ponerlo y cuando queremos que JavaScript se cargue. Los programadores generalmente llaman a la etiqueta de script siempre que quieran generar contenido o aplicar alguna acción. Entonces, al mirar el siguiente código, es una buena práctica cargar JavaScript después del cuerpo HTML.
Veamos un ejemplo:
Ejemplo
En este ejemplo, primero, creamos un botón en HTML. Establecemos un evento para hacer clic. Siempre que un usuario haga clic en este botón en el myFunc () la función se activará. Después de eso pusimos un etiqueta. Todo el código de JavaScript fue aquí. Pusimos una función con el nombre de myFunc () donde mostramos una alerta.
Felicidades! Hemos vinculado con éxito JavaScript con HTML agregando código JavaScript dentro de la etiqueta de script.
Este método es bueno para páginas web pequeñas o una página web. Sin embargo, a medida que su aplicación web se hace más grande, el código de script también será más grande y será realmente difícil de manejar, así como leer. La solución es escribir JavaScript en un archivo JavaScript separado dedicado y proporcionar la referencia del archivo JavaScript en el archivo HTML.
Uso de JavaScript en un archivo externo
El uso de un archivo externo para scripts más grandes es beneficioso, ya que podemos dividir nuestro código en diferentes páginas de JavaScript, así como en diferentes archivos. Se logra haciendo referencia al nombre del archivo JavaScript en el atributo "SRC" de la etiqueta de script en el archivo HTML.
Cambiemos un poco el ejemplo anterior. El código seguirá siendo el mismo. Haremos otro archivo de JavaScript con el nombre de "Código.JS ". Pondremos todo el código JavaScript en el "código.archivo js "y proporcionar el" código.referencia JS "en el archivo HTML.
Por ejemplo
Hicimos referencia al "código.jsArchivo "utilizando el atributo SRC de etiqueta.
Ahora el código.js archivo:
función myFunc ()alerta ("Me hiciste clic");
El resultado será el mismo que el ejemplo anterior I-E.
Ventajas de archivo javascript externas
Permitamos formalmente algunas de las ventajas después de discutir el archivo JavaScript externo:
- Separa nuestro código HTML y el código JavaScript
- El código JavaScript se puede legible y mantenible.
- Otra ventaja es que los archivos de JavaScript en caché actúan para acelerar la carga de la página.
Selectores de JavaScript
En los ejemplos anteriores, tomamos la ayuda de un evento. Supongamos que no queremos agregar un evento y queremos seleccionar un elemento del archivo HTML. JavaScript nos ayuda al proporcionar diferentes opciones para esto que se llaman selectores de JavaScript.
Selectores de JavaScript La función principal es seleccionar un elemento HTML y realizar diferentes acciones de acuerdo con nuestras necesidades. JavaScript proporciona diferentes opciones para esto, una de ellas es la identificación.
Podemos darle a un elemento un atributo de identificación en HTML y luego acceder a él en JavaScript. Accedemos en JavaScript por:
documento.getElementById ("idname");La identificación es única y se usa para un solo elemento.
JavaScript también nos da la opción de seleccionar un elemento usando un atributo de clase. Podemos usar el nombre de clase para diferentes elementos. La sintaxis es:
documento.QuerySelector (".nombre de la clase");Otra opción que JavaScript nos brinda es acceder a los elementos de JavaScript usando nombres de etiquetas. Sintaxis para acceder a los nombres de las etiquetas:
documento.getElementsBytagName ("P");
Ejemplo:
Html
Javascript
const btn = documento.getElementById ("BTN");btn.addEventListener ("hacer clic", function ()
alerta ("Me hiciste clic");
)
En este ejemplo, accedimos al elemento de botón usando getElementById (). Después de eso, ponemos un evento que cada vez que un usuario hace clic en el botón se debe mostrar una alerta.
Podemos lograr la misma salida si usamos:
const btn = documento.QuerySelector ("BTN");Debe tenerse en cuenta que tenemos que establecer el atributo de clase en el elemento del botón.
Conclusión
Vinculación de JS con HTML hace que su sitio web sea dinámico e interactivo. En esta publicación, le enseñamos cómo vincular JavaScript a HTML. Discutimos las dos formas principales de lograr esta tarea.
El primero fue usar JavaScript dentro del archivo HTML. El segundo fue usar JavaScript fuera del archivo HTML usando un archivo JavaScript. Para ser un desarrollador front-end, es necesario trabajar tanto en HTML como en JavaScript y este artículo le mostró cómo vincular ambos.