English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
En este capítulo, aprenderás cómo integrar JavaScript en tu página web.
Por lo general, hay tres métodos para agregar JavaScript a una página web:
Puedes<script>y</script>Insertar código JavaScript entre las etiquetas
Usarpropiedades de eventos (Por ejemplo, onclick, onkeypress, etc., puede insertar código JavaScript directamente dentro de las etiquetas HTML.
Crear un archivo JavaScript externo y cargarlo a la página mediante<script>Cargar el archivo JavaScript al página mediante el atributo src de la etiqueta.
En HTML, es necesario que<script>y</script>Insertar código JavaScript entre las etiquetas.
<script>
document.write("Hello World");
</script>Verifique aquí‹/›Nota:Los ejemplos antiguos de JavaScript pueden usar el atributo type: <script type="text/javascript">. Desde HTML5Desde que se introdujo, ya no es necesario el atributo type. JavaScript es HTML5El lenguaje de script predeterminado.
Puedes放置任意数量的脚本在HTML文档中。
Los scripts pueden colocarse en cualquier parte de la página HTML.<head>o en <body>, según el momento en que desee cargar el script.
En este ejemplo, la función JavaScript se coloca en el<head>sección.
La función se llama cuando se hace clic en el botón:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunc() {
document.getElementById("output").innerHTML = "Hello World";
}
</script>
</head>
<h2>JavaScript en la Cabeza</h2>
<button type="button" onclick="myFunc()">Click</button>
<p id="output">Este es un párrafo</p>
</html>Verifique aquí‹/›cada<script>etiquetas pueden detener el proceso de presentación de la página hasta que se descargue y ejecute completamente el código JavaScript, por lo que colocarlas en la parte superior del documento sin razón justificada puede afectar significativamente el rendimiento de su sitio web.
En este ejemplo, la función JavaScript se coloca en elsección.
La función se llama cuando se hace clic en el botón:
<!DOCTYPE html>
<html>
<h2>JavaScript en el Body</h2>
<button type="button" onclick="myFunc()">Click</button>
<p id="output">Este es un párrafo</p>
<script>
function myFunc() {
document.getElementById("output").innerHTML = "Hello World";
}
</script>
</html>Verifique aquí‹/›Los scripts deben colocarse al final de la sección de contenido, justo después de</body>antes del etiqueta, lo que puede hacer que su página web se cargue más rápido, ya que puede evitar que la presentación inicial de la página se vea afectada.
También puede usarpropiedades de eventos (Por ejemplo, onclick, onkeypress y otros) colocan código JavaScript directamente dentro de las etiquetas HTML.
<p onclick="this.innerHTML='Hello World';">Este es el primer párrafo (haga clic en mí)</p>Verifique aquí‹/›
Sin embargo, debe evitar inyectar grandes cantidades de código JavaScript, ya que el JavaScript puede ensuciar HTML y hacer que el código JavaScript sea difícil de mantener.
También puede poner código JavaScript en un archivo separado con extensión .js y luego llamarlo a través de<script>etiquetasrcpropiedad lo carga en la página.
El siguiente ejemplo apunta a un archivo JavaScript externo:
<script src="myscript.js"></script>Verifique aquí‹/›
Para agregar varios archivos de scripts a una página, utilice múltiples etiquetas de script:
<script src="myscript_1.js"></script> <script src="myscript_2.js"></script>
Puede colocar una referencia de script externo según sea necesario<head>o<body>Coloque una referencia de script externo.
El comportamiento de este script es como si estuviera ubicado<script>en el mismo lugar que la etiqueta.
Nota:Los archivos de scripts externos no pueden contener<script>etiqueta.
Colocar scripts en archivos externos tiene algunos beneficios:
Separa JavaScript de HTML
Hace que HTML y JavaScript sean fáciles de leer y mantener
Los archivos JavaScript en caché pueden acelerar la carga de la página
El mismo script se puede usar para varios documentos
ConsejoPor lo general, cuando se descarga por primera vez un archivo JavaScript externo, se almacena en la caché del navegador (como las imágenes y las hojas de estilo), por lo que no es necesario descargar el archivo múltiples veces desde el servidor web que crea la página web. Carga más rápida.
Se puede usar un URL completo o una ruta relativa al archivo actual de la página web para referenciar scripts externos.
Este ejemplo utiliza un enlace URL completo para conectar al script:
<script src="https://es.oldtoolbag.com/run/js/myscript.js"></script>Verifique aquí‹/›
Este ejemplo utiliza el script ubicado en la carpeta especificada en el sitio web actual:
<script src="/run/js/myscript.js"></script>Verifique aquí‹/›
Puede encontrar en " Ruta de archivo HTML Obtenga más información sobre las rutas de archivo en el capítulo "