Bienvenido al primer tutorial que tendremos en nuestra web escueladeJavaScript.com. En este tutorial vas a aprender a escribir tu primera línea de código usando JS.
Aunque quizás no lo parezca JavaScript, es un lenguaje sumamente poderoso. Se puede utilizar en cualquier navegador del mundo. Además de eso, se puede usar para escribir código del lado del servidor usando node.js.
Cuando usamos JavaScript dentro del navegador, podemos cambiar el aspecto de la página e incluso su comportamiento. En este tutorial, solo nos centraremos en aprender el idioma en sí, y por lo tanto, solo usaremos una función para imprimir los resultados llamados «console.log».
Conociendo a la etiqueta <script>
Vamos a empezar por lo mas importante. Seguramente te habrás preguntado anteriormente «¿Cómo voy a poder mostrar mis resultados en pantalla?» o «¿Cómo es posible enlazar mi código HTML con mi código JS?». Bueno, ya vas a saberlo.
Los programas elaborados en JavaScript se pueden insertar en cualquier parte de un documento HTML con la ayuda de la famosa etiqueta <script>.
Aquí abajo te muestro un ejemplo de ello:
<!DOCTYPE HTML> <html> <body> <p>Antes del Script</p> <script> alert( '¡Hola, Mundo!' ); </script> <p>...Después del Script.</p> </body> </html>
Este código te mostrará una pequeña alerta emergente (de la cual hablaremos mas adelante con más detalle) con el texto «¡Hola, Mundo!.
Para que veas los resultados de este código en tu navegador, debes realizar un documento de texto con extensión HTML y guardar este código en el, y luego ejecutarlo para que veas su funcionamiento.
La etiqueta <script> contiene código JavaScript que se ejecuta automáticamente cuando el navegador se encuentra con la etiqueta.
El marcado de etiquetas moderno
La etiqueta <script> tiene algunos atributos que son raramente usados hoy en día, pero podemos encontrarlos en código antiguo:
El atributo type: <script type=…>
El antiguo estándar HTML4 requería un script para tener un tipo. Normalmente era type=»texto/javascript». El estándar HTML moderno asume este tipo por defecto. No se requiere ningún atributo.
El atributo de idioma: Lenguaje de script=…>
Este atributo estaba destinado a mostrar el lenguaje del script. Por ahora, este atributo no tiene sentido, el lenguaje es JavaScript por defecto. No hay necesidad de usarla.
Comentarios antes y después de los scripts.
En los libros y guías realmente antiguos, uno puede encontrar comentarios dentro de <script>, como este:
<script type="text/javascript"><!-- ...//--> </script>
Estos comentarios se suponía que ocultaban el código de un navegador antiguo que no sabía de una etiqueta <script>. Pero todos los navegadores nacidos en los últimos 15 años no tienen ningún problema. Lo mencionamos aquí, porque tales comentarios sirven como señal. Si ves eso en alguna parte – ese código es probablemente muy antiguo y no vale la pena investigarlo.
Scripts externos
Si tenemos mucho código JavaScript, podemos ponerlo en un archivo separado.
El archivo de script se adjunta a HTML con el atributo src:
<script src="carpeta/script.js"></script>
Aquí carpeta/script.js es una ruta absoluta al archivo con el script (desde la raíz del sitio).
También es posible proporcionar una ruta relativa a 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/3.2.0/lodash.js"></script>
Para adjuntar varios scripts, utilice varias etiquetas:
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> …
Nota:
Como regla general, sólo los scripts más simples se ponen en HTML. Los más complejos residen en archivos separados.
La ventaja de un archivo separado es que el navegador lo descarga y lo almacena en su caché.
Después de esto, otras páginas que quieran el mismo script lo tomarán de la caché en lugar de descargarlo. Por lo tanto, el archivo se descarga sólo una vez.
Esto ahorra tráfico y hace que las páginas sean más rápidas.
Si src está configurado, el contenido del script se ignora.
Una sola etiqueta <script> no puede tener tanto el atributo src como el código dentro.
Esto no funcionará:
<script src="archivo.js"> alert(1); // el contenido es ignorado, porque src está configurado </script>
Debemos elegir: o es un <script src=»…»> externo o un <script> regular con código.
El ejemplo anterior puede dividirse en dos scripts para que funcione:
<script src="archivo.js"></script> <script> alert(1); </script>
Consideraciones generales
- Podemos usar una etiqueta <script> para añadir código JavaScript a la página.
- Los atributos de tipo e idioma no son necesarios.
- Se puede insertar un script en un archivo externo con <script src=»carpeta/script.js»></script>.
Hay mucho más que aprender sobre los scripts de los navegadores y su interacción con la página web. Pero tengamos en cuenta que esta parte del tutorial está dedicada al lenguaje JavaScript, así que no debemos distraernos de él. Usaremos un navegador como una forma de ejecutar JavaScript, que es muy conveniente para la lectura en línea, pero es uno de muchos.
Ejercicios
Cree una página que muestre el mensaje «Soy un código JavaScript»
Puedes hacerlo en una caja de arena, o en su disco duro, no importa, sólo asegúrate de que funciona.
Solución:
<!DOCTYPE html> <html> <body> <script> alert( "Soy un código JavaScript" ); </script> </body> </html>
Segundo ejercicio:
Toma el código de la solución de la tarea anterior de Mostrar una alerta. Modifícalo extrayendo el contenido del script en un archivo externo llamado alert.js, que resida en la misma carpeta del archivo HTML.
Abre la página y asegúrate de que la alerta funcione correctamente.
Solución:
Código HTML:
<!DOCTYPE html> <html> <body> <script src="alerta.js"></script> </body> </html>
Documento con extensión .js
alert("Soy un código JavaScript");
