¡Hola, mundo!
Esta sección del tutorial se enfoca en el núcleo de JavaScript, el lenguaje en sí mismo.
Necesitamos un entorno de trabajo para ejecutar nuestros scripts y, dado que este libro está en línea, el navegador es una excelente opción. Mantendremos al mínimo la cantidad de comandos específicos del navegador (como alert) para que no pierdas tiempo en ellos si planeas centrarte en otro entorno (como Node.js). Nos concentraremos en JavaScript en el navegador en la siguiente parte del tutorial.
Primero, veamos cómo adjuntar un script a una página web. Para entornos del lado del servidor (como Node.js), puedes ejecutar el script con un comando como «node my.js».
La etiqueta “script”
Los programas de JavaScript se pueden insertar en casi cualquier parte de un documento HTML utilizando la etiqueta <script>.
Por ejemplo:
<!DOCTYPE HTML>
<html>
<body>
<p>Antes del script...</p> <script>alert('¡Hola, mundo!')</script> <p>...Después del script.</p>
</body>
</html>
Puedes ejecutar el ejemplo haciendo clic en el botón “Play” 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.
Marcado moderno
La etiqueta <script> tiene algunos atributos que rara vez se utilizan hoy en día, pero aún se pueden encontrar en código antiguo:
El atributo type: <script type=…>
El antiguo estándar HTML, HTML4, requería que un script tuviera un type. Generalmente, era type=»text/javascript». Ya no es necesario. Además, el estándar HTML moderno cambió completamente el significado de este atributo. Ahora, se puede utilizar para módulos de JavaScript. Pero eso es un tema avanzado, hablaremos sobre módulos en otra parte del tutorial.
El atributo language: <script language=…>
Este atributo estaba destinado a mostrar el lenguaje del script. Ya no tiene sentido porque JavaScript es el lenguaje predeterminado. No es necesario usarlo.
Comentarios antes y después de los scripts.
En libros y guías muy antiguos, puedes encontrar comentarios dentro de las etiquetas <script>, como el siguiente:
<script type="text/javascript">...</script>
Este truco no se utiliza en JavaScript moderno. Estos comentarios ocultaban 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 ayudarte a identificar códigos realmente antiguos.
Scripts externos
Si tenemos un montón de código JavaScript, podemos ponerlo en un archivo separado.
Los archivos de script se adjuntan a HTML con el atributo src:
<script src="/path/to/script.js"></script>
Aquí, /path/to/script.js es una ruta absoluta al archivo de 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» significaría un archivo «script.js» en la carpeta actual.
También podemos dar 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, usa varias etiquetas:
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> …
Por favor tome nota:
Como regla general, solo los scripts más simples se colocan en el HTML. Los más complejos residen en archivos separados.
La ventaja de un archivo separado es que el navegador lo descargará y lo almacenará en caché.
Otras páginas que hacen referencia al mismo script lo tomarán del caché en lugar de descargarlo, por lo que el archivo solo se descarga una vez.
Eso reduce el tráfico y hace que las páginas sean más rápidas.
Si se establece src, el contenido del script se ignora.
Una sola etiqueta <script> no puede tener el atributo src y código dentro.
Esto no funcionará:
<script src="file.js">alert(1)</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="file.js"></script> <script>alert(1)</script>
