Esta parte del tutorial trata sobre JavaScript central, el lenguaje en sí.
Pero necesitamos un entorno de trabajo para ejecutar nuestros scripts y, dado que este libro está en línea, el navegador es una buena opción. Mantendremos la cantidad de comandos específicos del navegador (como alert ) al mínimo para que no pierda tiempo en ellos si planea concentrarse en otro entorno (como Node.js). Nos centraremos en JavaScript en el navegador en la siguiente parte del tutorial.
Primero, veamos cómo adjuntamos un script a una página web. Para entornos del lado del servidor (como Node.js), puede ejecutar el script con un comando como "node my.js" .
Los programas JavaScript se pueden insertar casi en cualquier lugar de un documento HTML utilizando la etiqueta <script> .
Por ejemplo:
<!TIPO DE DOCUMENTO HTML>
<html>
<cuerpo>
<p>Antes del guión...</p>
<guión>
alerta ('¡Hola mundo!');
</script>
<p>...Después del guión.</p>
</cuerpo>
</html>Puede ejecutar el ejemplo haciendo clic en el botón "Reproducir" en la esquina superior derecha del cuadro de arriba.
La etiqueta <script> contiene código JavaScript que se ejecuta automáticamente cuando el navegador procesa la etiqueta.
La etiqueta <script> tiene algunos atributos que rara vez se usan hoy en día pero que aún se pueden encontrar en el código antiguo:
El atributo type : <script type =…>
El antiguo estándar HTML, HTML4, requería que un script tuviera un type . Normalmente era type="text/javascript" . Ya no es necesario. Además, el estándar HTML moderno cambió totalmente el significado de este atributo. Ahora se puede utilizar para módulos JavaScript. Pero ese es un tema avanzado, hablaremos de módulos en otra parte del tutorial.
El atributo language : <script language =…>
Este atributo estaba destinado a mostrar el idioma de la escritura. Este atributo ya no tiene sentido porque JavaScript es el idioma predeterminado. No es necesario utilizarlo.
Comentarios antes y después de los guiones.
En libros y guías muy antiguos, puedes encontrar comentarios dentro de etiquetas <script> , como este:
<script tipo="texto/javascript"><!--
...
//--></script> Este truco no se utiliza en JavaScript moderno. Estos comentarios ocultan el código JavaScript de los navegadores antiguos que no sabían cómo procesar la etiqueta <script> . Dado que los navegadores lanzados en los últimos 15 años no tienen este problema, este tipo de comentario puede ayudarle a identificar código realmente antiguo.
Si tenemos mucho código JavaScript, podemos ponerlo en un archivo separado.
Los archivos de script se adjuntan a HTML con el atributo src :
<script src="/ruta/a/script.js"></script>
Aquí, /path/to/script.js es una ruta absoluta al script desde la raíz del sitio. También se puede proporcionar una ruta relativa desde la página actual. Por ejemplo, src="script.js" , al igual que src="./script.js" , significaría un archivo "script.js" en la carpeta actual.
También podemos proporcionar una URL completa. Por ejemplo:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
Para adjuntar varios scripts, utilice varias etiquetas:
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> …
Tenga en cuenta:
Como regla general, sólo los scripts más simples se incluyen en HTML. Los más complejos residen en archivos separados.
La ventaja de un archivo independiente es que el navegador lo descargará y lo almacenará en su caché.
Otras páginas que hacen referencia al mismo script lo tomarán del caché en lugar de descargarlo, por lo que el archivo en realidad se descarga solo una vez.
Eso reduce el tráfico y hace que las páginas sean más rápidas.
Si se establece src , se ignora el contenido del script.
Una sola etiqueta <script> no puede tener dentro tanto el atributo src como el código.
Esto no funcionará:
<script src="archivo.js"> alerta(1); // el contenido se ignora porque src está configurado </script>
Debemos elegir un <script src="…"> externo o un <script> normal con código.
El ejemplo anterior se puede dividir en dos scripts para que funcione:
<script src="archivo.js"></script> <guión> alerta(1); </script>
Podemos usar una etiqueta <script> para agregar código JavaScript a una página.
Los atributos type e language no son obligatorios.
Se puede insertar un script en un archivo externo con <script src="path/to/script.js"></script> .
Hay mucho más que aprender sobre los scripts del navegador y su interacción con la página web. Pero tengamos en cuenta que esta parte del tutorial está dedicada al lenguaje JavaScript, por lo que no debemos distraernos con implementaciones específicas del navegador. Usaremos el navegador como una forma de ejecutar JavaScript, que es muy conveniente para la lectura en línea, pero solo uno de muchos.
importancia: 5
Cree una página que muestre el mensaje "¡Soy JavaScript!".
Hazlo en una caja de arena o en tu disco duro, no importa, solo asegúrate de que funcione.
Demostración en nueva ventana
<!DOCTYPE html>
<html>
<cuerpo>
<guión>
alerta ("¡Soy JavaScript!");
</script>
</cuerpo>
</html>Abra la solución en una caja de arena.
importancia: 5
Toma la solución de la tarea anterior Mostrar una alerta. Modifíquelo extrayendo el contenido del script en un archivo externo alert.js , que reside en la misma carpeta.
Abra la página, asegúrese de que la alerta funcione.
El código HTML:
<!DOCTYPE html> <html> <cuerpo> <script src="alert.js"></script> </cuerpo> </html>
Para el archivo alert.js en la misma carpeta:
alerta ("¡Soy JavaScript!");