Uso de JavaScript

<script> etiqueta

en HTML, el código JavaScript debe estar ubicado dentro de <script> con </script> entre etiquetas.

Ejemplo

<script>
document.getElementById("demo").innerHTML = "mi primer segmento de JavaScript";
</script>

Inténtalo tu mismo

Nota:Los ejemplos antiguos de JavaScript podrían usar type Atributo: <script type="text/javascript">.

Nota:El atributo type no es necesario. JavaScript es el lenguaje de script predeterminado en HTML.

Funciones y eventos de JavaScript

JavaScript funciónes un bloque de código JavaScript que se puede ejecutar cuando se llama.

Por ejemplo, cuando ocurreeventoal llamar a la función, como cuando el usuario hace clic en un botón.

Consejo:Aprenderá más sobre funciones y eventos en capítulos posteriores.

JavaScript en el <head> o <body>

Puede放置任意数量的脚本 en el documento HTML.

Los scripts se pueden colocar en <body> o <head> o ambos.

JavaScript en la parte

En este ejemplo, la función JavaScript se coloca en el <head> parte.

Esta función se llamará cuando se haga clic en el botón:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "El párrafo se ha cambiado.";
}
</script>
</head>
<body>
<h1>Una página web</h1>
<p id="demo">Un párrafo</p>
<button type="button" onclick="myFunction()">Pruebe</button>
</body>
</html>

Inténtalo tu mismo

JavaScript en el <body> de la página HTML

En este ejemplo, la función JavaScript se coloca en el <body> parte.

Esta función se llamará cuando se haga clic en el botón:

Ejemplo

<!DOCTYPE html>
<html>
<body> 
<h1>Una Página Web</h1>
<p id="demo">Un párrafo</p>
<button type="button" onclick="myFunction()">Pruebe</button>
<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "El párrafo se ha cambiado.";
}
</script>
</body>
</html>

Inténtalo tu mismo

Consejo:Coloque el script en <body> al final del elemento, lo que puede mejorar la velocidad de visualización, ya que la compilación del script puede ralentizar la visualización.

Script externo

El script se puede colocar en el archivo externo:

Archivo externo: myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "El párrafo se ha cambiado.";
}

Los scripts externos son muy útiles, si el mismo script se utiliza en muchos sitios web diferentes.

La extensión del archivo de JavaScript es .js.

Para usar scripts externos, por favor <script> etiqueta src (fuente) atributo:

Ejemplo

<script src="myScript.js"></script>

Inténtalo tu mismo

Puede establecer el nombre del script en <head> o <body> se colocan las referencias a scripts externos.

El comportamiento del script depende de donde se coloque <script> es lo mismo en la etiqueta.

Nota:Los scripts externos no pueden contener <script> Etiquetas.

Ventajas de JavaScript externo

Colocar scripts en archivos externos tiene los siguientes beneficios:

  • Separa HTML y código
  • Hace que HTML y JavaScript sean más fáciles de leer y mantener
  • Los archivos JavaScript en caché pueden acelerar la carga de la página

Para agregar múltiples archivos de script a una página, utilice múltiples etiquetas script:

Ejemplo

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Referencia externa

Los scripts externos pueden ser referenciados mediante una URL completa o una ruta relativa al archivo actual de la página:

Este ejemplo utiliza una URL completa para enlazar al script:

Ejemplo

<script src="https://www.codew3c.com/js/myScript1.js"></script>

Inténtalo tu mismo

Este ejemplo utiliza un script ubicado en una carpeta específica del sitio actual:

Ejemplo

<script src="/js/myScript1.js"></script>

Inténtalo tu mismo

Este ejemplo enlaza un script con la carpeta del archivo actual:

Ejemplo

<script src="myScript1.js"></script>

Inténtalo tu mismo

Puedes probar Ruta del archivo HTMLAprende más sobre rutas de archivos aquí.