Primeras normas de sintaxis y ubicación del código - Curso de JavaScript de cero a máster - Capítulo 2

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.

¿Dónde se escribe el código JavaScript?

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>

Página html

<!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.

Resultado en el navegador

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 variable num1.

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.

Página 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>

Resultado en el navegador

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.

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);

Resultado en el navegador

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 al tema sintaxis de JavaScript.

JavaScript es case sensitive, por lo que no es lo mismo escribir var PRIMERAVARIABLE; que var primeravariable;.

Archivo JS

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.

Archivo JS

let        primeraVariable = 500;




alert               (    primeraVariable  )   ;

Resultado en el navegador

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 límpio y óptimo. Este sería el equivalente al código anterior pero bien escrito.

Archivo JS

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í.

Capítulos

Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.

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.