¿Dónde se escribe el código JavaScript?
Capítulo 2: Primeras normas de sintaxis y ubicación del código
Vamos al grano, después de una buena introducción es el momento de ponerse a programar. Vas a ir aprendiendo a medida que vaya explicando con múltiples ejemplos y ejercicios a lo largo del curso.
Lo primero es lo primero, para empezar a entender los ejemplos y las explicaciones es imprescindible poder introducir el código en cada momento e ir probándolo. De modo, que vamos a ver como lo tienes que colocar para que funcione.
Ejecutar código JavaScript desde el head de html
Deberás o bien crear una página HTML o crear una página JS. Empecemos por añadir el código en la página html. Escribe las etiquetas <script></script> antes del cierre del </head>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ubicación del código en JavaScript</title>
<script>
num1 = 10;
alert(num1);
</script>
</head>
<body>
</body>
</html>Palabra del lenguaje nº 1 encontrada.
let es una palabra reservada del lenguaje y se utiliza para declarar variables.
Palabra del lenguaje nº 2 encontrada.
alert es una función para abrir una ventanita emergente con en el navegador.
Abre esta página html en el navegador. El resultado es el siguiente:
No te preocupes aún por entender el código que no haya explicado.
- Esto es la ruta hacia el archivo html, solo tienes que abrirlo con el navegador, no importa que escribas manualmente la ruta.
- Es el valor almacenado en una variable llamada
num1. - Esta ventanita emergente es la producida al invocar a
alert()en el código JavaScript. En ella se muestra el valor de la variablenum1.
Ejecutar código JavaScript desde el body de html
El código en el body se escribe de la misma forma, entre las etiquetas script pero dentro del body.
La diferencia de ponerlo en el <body> o en el <head> es que el script se va a cargar antes que el contenido visible en la página (si lo pones en el <head>) o en un momento determinado mientras se cargan los elementos visibles del <body> (si lo pones en el <body>). Le verás más la diferencia a medida que vayas aprendiendo. La mayoría de las veces, se suele poner el código JavaScript preferentemente en el <head> de html.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ubicación del código en JavaScript</title>
</head>
<body>
<script>
let num1 = 10;
alert(num1);
</script>
</body>
</html>El resultado es el mismo:
Ejecutar código JavaScript desde una hoja .js externa
La siguiente opción es hacer una página externa con extensión .js y empezar a escribir en ella. Es como lo que hacemos con CSS. Luego, solo tienes que enlazarla para poder utilizar todo el código JavaScript en cualquier página html.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ubicación del código en JavaScript</title>
<script src="test.js"></script>
</head>
<body>
</body>
</html>Archivo JS
let num1 = 10;
alert(num1);Nuevamente, el resultado es el mismo. Piensa que tienes que ejecutar la página html en el navegador. Este se encargará de ejecutar el código js.
Normalmente el código se escribe en hojas .js externas para aprovechar el código y no repetirlo. Si es algo puntual, lo escribes directamente sobre el documento .html.
JavaScript es case sensitive
Ahora que ya sabes donde colocar el código, vamos a empezar a quemar el teclado escribiendo código JavaScript. Pasamos a ver un poco sobre la sintaxis.
JavaScript es case sensitive, por lo que no es lo mismo escribir var PRIMERAVARIABLE; que var primeravariable;.
let PRIMERAVARIABLE;
let primeravariable;A partir de ahora, a no ser que lo requiera, voy a poner solo el código js. Doy por sentado que ya sabes donde lo tienes que poner. Si no es así, mira los vídeos de cada capítulo o déjame comentarios para que resuelva tus dudas.
Espacios en blanco y saltos de línea
En JavaScript podemos ordenar el código como queramos, ya que ignora los espacios en blanco y los saltos de línea.
Esta norma se aplica a todo, a variables, palabras reservadas del lenguaje, nombres de funciones, etc.
let primeraVariable = 500;
alert ( primeraVariable ) ;Esto funciona perfectamente, JavaScript entiendo que esos espacios no son nada, por lo tanto, los ignora.
Por supuesto, esto es una mala práctica. Hay que escribir código limpio y óptimo. Este sería el equivalente al código anterior pero bien escrito.
let primeraVariable = 500;
alert(primeraVariable);Ejercicios de JavaScript
- ¿Con qué etiqueta cargarías un código JavaScript directamente en el body?
- Intenta encontrar el fallo en el siguiente fragmento de código:
let primeravariable = 270;
alert(PrimeraVariable);La solución la encontrarás aquí: Haz click aquí.
Comentarios
Si te quedan dudas sobre el temario, sobre JavaScript o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.
