Introducción al DOM - Document Object Model
La interfaz se crea con HTML y CSS, y el contenido de la salida HTML se puede ampliar o intercambiar con javascript. De la misma forma, se puede utilizar javascript para reaccionar ante el uso del ratón o del teclado.

El primer paso para manipular la salida HTML es observar el DOM. DOM significa "Document Object Model" o en español: "Modelo de objetos del documento". El DOM está disponible para nosotros en cualquier navegador que nos muestre una página HTML.

A través del Modelo de objetos del documento (DOM) podemos:

• abordar a cada elemento HTML individualmente (leer o cambiar).
• insertar elementos adicionales antes o después de ciertos elementos.
• ¡DOM es independiente de un lenguaje de programación! Además de javascript, también se puede trabajar con el DOM utilizando Java y ECMAScript.

El navegador nos proporciona dos objetos importantes como parte del DOM:

• document
• window

Numerosos métodos y propiedades están disponibles para nosotros a través de estos dos objetos.



Mostrar la consola para la visualización de posibilidades de document/window
Si ahora ingresamos la instrucción console.log(window); o console.log(document); en la consola, vemos una gran cantidad de información a la que podemos acceder y luego manipular a través de esos métodos.

Por ejemplo, se puede imprimir el ancho de la ventana del navegador a través de:

window.innerWidth

Árbol HTML y acceso a él a través de DOM
Podemos acceder a cada elemento individual de nuestro árbol a través de los elementos secundarios. Para hacer esto, se debe de moverse a lo largo del árbol HTML. Pero esto no es realmente divertido y, por lo tanto, hay opciones mucho más cómodas, como por ejemplo:

• document.getElementById("id")
• document.getElementsByClassName("color1")
• document.getElementsByTagName("h2")

javascript y el Array: almacenamiento de datos de forma estructurada
Hasta ahora hemos llegado a conocer las variables; por supuesto, cuando se trata de matrices, surge rápidamente la pregunta de por qué se necesita una matriz si hay variables.

Primero a la pregunta más importante:


¿Que es un Array o matriz?
Una matriz es una colección de datos almacenados en algún tipo de "variable"; a diferencia de una variable, podemos almacenar muchos datos. Supongamos que queremos usar todos los nombres de los jugadores en una tabla de puntuación de un juego. Si tuviéramos que resolver esto con las variables, tendríamos que crear el número correspondiente de variables requeridas de antemano.

let nombredeljugador1;
let nombredeljugador2;
let nombredeljugador3;
etc.

Pero, ¿qué hacemos si no sabemos de antemano cuánto contenido, es decir, cuántas variables, necesitaríamos? Aquí es donde salen a la luz los primeros beneficios del uso de matrices. Simplemente creamos nuestra matriz y luego podemos llenarla con cualquier cantidad de datos.

let nombredejugadores = ["Encina", "Hector", "Mencia"];

O, más claro:

let nombredejugadores = [
"Encina", 
"Hector", 
"Mencia"
];

Ahora podemos simplemente imprimir la matriz en la consola:

console.log(nombredejugadores);

La forma "extraña" de numerar de la matriz
En la salida de la consola ya vimos que el primer elemento de la matriz no tiene el número 1, sino que comienza en 0. ¡Las matrices siempre se numeran desde 0! Es muy importante tener eso en cuenta.

Entonces, si queremos mostrar el primer elemento de una matriz, esto se hace usando el índice 0. Esto se especifica entre corchetes después del nombre de la matriz, como se muestra en el siguiente ejemplo.

console.log(nombredejugadores[0]);

Más funciones de javascript para los Arrays
javascript ahora nos ofrece toda una gama de funciones. También podemos expandir una matriz existente con datos adicionales en cualquier momento:

• push("Nombre del jugador");
• unshift("Nuevo nombre de jugador");

Ahora, ¿por qué hay 2 formas de extender una matriz? Podemos agregar más datos al final (aquí con push) y al comienzo de la matriz (unshift).

Y la contrapartida de agregar es quitar:

Aquí tenemos de nuevo 2 posibilidades: al principio y al final.

• ARRAY.pop()
• ARRAY.shift()

Y con esto la última o la primera entrada se puede tomar el palo.

En la mayoría de las veces, se necesita el contenido eliminado para alguna acción; obtenemos esto como un valor de retorno en la acción de eliminar:

let ultimaentrada = nombredejugadores.pop();
console.log(ultimaentrada);

O desde el comienzo de la matriz:

let primerentrada = nombredejugadores.unshift();
console.log(primerentrada);

Otras funciones a menudo requeridas para los Arrays
Después de ya no saber cuántos datos se han almacenado en la matriz, simplemente podemos consultar el recuento. Para hacer esto, el nombre de la matriz se concatena con la función length:

console.log(nombredejugadores.length);

Por supuesto, siempre podemos abordar a los elementos de las matrices a través del índice; la mayoría de las veces necesitamos todos los elementos, por ejemplo, para una salida. Esto requiere bucles, que conoceremos en un capítulo aparte.

Números aleatorios con javascript: el primer pequeño juego de cálculo mental
Nuestro objetivo es programar juegos con javascript. Hasta ahora conocimos muy pocos comandos como para programar un juego con ellos. Pero con cada comando adicional y cada nueva posibilidad, surgen opciones adicionales.

Nuestro primer juego (muy simple) es el cálculo mental contra la computadora (o el celular), que por supuesto siempre tiene razón. Así que es mas bien un juego de control acerca de qué tan rápido uno es en el cálculo mental.

Lo que hemos aprendido hasta ahora es:

• Podemos imprimir algo en la ventana del navegador.
• Podemos realizar cálculos.
• Podemos almacenar contenido en las variables (aquí necesitamos números para nuestro juego).

¿Qué nos falta todavía para nuestro juego?

• Numeros al azar.
• La posibilidad de no mostrar el resultado de forma inmediatamente y visible.

Conoceremos ambas cosas en los siguientes capítulos y así podremos implementar nuestro primer pequeño juego.


Generar números aleatorios
Ningún juego puede prescindir de un proceso aleatorio y, por lo tanto, de números aleatorios. Ahora vamos a familiarizarnos con un método llamado random() en el objeto Math. Por favor, no se asusten por los términos objeto y método. El concepto de los objetos y métodos se explicará en detalle más adelante; lo bueno es que podemos simplemente usarlo al principio y experimentar la función. Lo típico es conectar el objeto a través de un punto con el método deseado. La ortografía es importante: ¡Math debe de escribirse con mayúscula! Por favor pongan atención en ello.

Veamos qué obtenemos como resultado cuando simplemente ejecutamos Math.random();.

let numero1;
numero1 = Math.random();
document.write(numero1);

Genial: cada vez que ejecutamos el programa, obtenemos un número aleatorio. Simplemente actualicen sus navegadores reiteradamente.



Lo llamativo aquí es que este número siempre es menor a 1.

Tal como lo define el comando random(), siempre se generan números entre 0 (incluido 0) y menos de 1.

No queremos usar números tan pequeños para nuestro juego, todavía no.

Si ahora queremos obtener números aleatorios entre 1 y 10, entonces tenemos que incluir esto en nuestro cálculo.

Veamos la sección superior. Queremos números hasta el 10 (incluido el 10). Para hacer esto, primero tenemos que multiplicar nuestro número por 10:

let numero1;
numero1 = Math.random() * 10;
document.write(numero1);

Si lo ejecutamos varias veces, obtenemos, por ejemplo, los siguientes resultados:





Para obtener también el 10, necesitamos sumar 1 a nuestro resultado.

let numero1;
numero1 = Math.random() * 10 + 1;
document.write(numero1);

Esto nos da nuestro rango de números entre 1 y 10, un 1 como también un máximo de 10. Si se quisiera un rango de números diferente que no necesariamente tenga que comenzar con 1, se aplica la siguiente fórmula (en aras de la exhaustividad):

Math.random() * (maximo - minimo + 1) + minimo;

Por supuesto, queremos mantener nuestro juego de cálculo mental de forma simple - no deben de haber lugares decimales en nuestros números. Aquí, nuestro objeto Math tiene el método floor. También este método podemos usar fácilmente sin tener mucha idea de los métodos y objetos. Lo único importante para nosotros es que como resultado de floor el siguiente entero más bajo (es decir, sin lugares decimales) vuelva (el método de floor redondea los números).

Ahora, por supuesto, podemos usar una notación más engorrosa para mantenerlo transparente para el comienzo, como por ejemplo:

let numero1;
let numeroentero;
numero1 = Math.random() * 10 + 1;
numeroentero = Math.floor( numero1 );
document.write(numeroentero);

Sin embargo, nuestros 2 nuevos "comandos" también se pueden anidar. Entonces no necesitamos ninguna variable adicional que deba definirse por separado.

El código entonces se ve así:

let numero1;
numero1 = Math.floor( Math.random() * 10 + 1 );
document.write(numero1);

El resultado devuelto por Math.random() que se pasa al método Math.floor() (siempre se lee desde atrás) y ese resultado se almacena en nuestra variable número1.

Para nuestro juego queremos 2 variables, que luego multiplicamos. Los números individuales y el resultado de la multiplicación deben mostrarse directamente en el navegador. ¡Pruébelo ustedes mismos antes de ver la siguiente solución!

let numero1;
let numero2;
let resultado;
numero1 = Math.floor( Math.random() * 10 + 1 );
numero2 = Math.floor( Math.random() * 10 + 1 );
resultado = numero1 * numero2;
document.write(numero1 + ' * ' + numero2 + ' = ' + resultado );

Por supuesto, el juego no es realmente emocionante si el resultado se muestra inmediatamente. Podríamos desplazar el resultado hacia abajo en la pantalla del navegador para que el jugador primero tenga que desplazarse hacia abajo para encontrar la solución. Todavía no podemos hacer nada más con nuestro nivel actual de conocimiento.

let numero1;
let numero2;
let resultado;
numero1 = Math.floor( Math.random() * 10 + 1 );
numero2 = Math.floor( Math.random() * 10 + 1 );
resultado = numero1 * numero2;
document.write(numero1 + ' * ' + numero2 + ' = ?');
document.write('
 
 
 
     mucho 
 
     ');
document.write(numero1 + ' * ' + numero2 + ' = ' + resultado );

Este resultado solo debe mostrarse después de una acción del jugador. Ahora también llegamos al punto en que queremos separar la salida HTML de nuestra salida del programa javascript. Hasta ahora la salida a través de document.write(); es un método poco práctico. Queremos poder agregar o reemplazar áreas en un archivo HTML existente. Para esto necesitamos el DOM (en inglés "Document Object Model"), que será introducido en los siguientes capítulos.

Cálculos con javascript
Los cálculos habituales son la suma (+), la resta (-), la multiplicación (*) y la división (/).

Como ejemplo se tiene que sumar aquí.

var resultado = 3 + 6;
alert(resultado);

O división.

var resultado = 3 / 6;
alert(resultado);

Muy a menudo se requiere sumar 1 a un número. Por ejemplo en bucles.

var vuelta = 1;
vuelta = vuelta + 1;
alert(vuelta);

Hay una notación más corta para esto.

var vuelta = 1;
vuelta += 1;
alert(vuelta);

Esta es una notación abreviada, por lo general no se verá esta notación larga; y menos es más, por lo que hay una notación aún más corta:

var vuelta = 1;
vuelta++;
alert(vuelta);

Qué sucede: se suma 1 a la variable vuelta.

Podés hacer lo mismo con restar, es decir, restar 1. Aquí, también, las 3 notaciones son posibles (pero generalmente se prefiere la más corta).

var vuelta = 1;
vuelta = vuelta  - 1;
vuelta -= 1;
vuelta--;
alert(vuelta);

Strings y javascript
En javascript, los datos de texto se almacenan en un string. A diferencia de otros lenguajes de programación, no hay tipos de datos adicionales en javascript como para caracteres de 1 dígito.

UTF-16 es el formato interno de javascript para almacenar cadenas. Importante: no está vinculado a la codificación de la página (encoding). Por lo tanto, no importa si un sitio web especifica "ISO-8859-1" o "UTF-8" en el encabezado. javascript siempre usa UTF-16.


Estructura básica de las cadenas
Las cadenas se asignan a una variable. Esto se puede hacer usando el conocido var o usando let. Las comillas van después del signo igual:

var x = "Curso de javascript";
var y = 'Curso de javascript';
var z = `Curso de javascript`;

Ahora usamos 3 comillas diferentes en el ejemplo anterior, y la buena noticia es que las 3 funcionan bien. Pero ¿cuál es la diferencia?

Las comillas simples y dobles tienen el mismo uso. No debe haber compaginaciones en la siguiente línea, de lo contrario, javascript arrojará mensajes de error.

Las comillas invertidas (en inglés "backticks") son la forma más moderna de comillas. Con los "backsticks" tenemos la ventaja de que también se puede producir una ruptura entre las comillas invertidas sin que javascript se queje con un error.

var z = `Curso de javascript
para 
aprender javascript`;

Pero, ¿cómo podríamos incluir una ruptura en el tipo tradicional de comillas? Y la segunda pregunta: ¿cómo se puede empaquetar una comilla, que se imprima, en una cadena como contenido?

Es posible "enmascarar" caracteres especiales, como las distintas comillas. Así se llama esta técnica. Simplemente se escribe una barra invertida antes del "carácter problemático" y todo está bien. Entonces, si se desea guardar una comilla en una cadena como contenido, simplemente se escribe \":

var x = "Hoy es un \"gran\" dia";

Y entonces tenemos como salida (si imprimimos la cadena):



Si se va a imprimir una barra invertida, entonces se inserta una barra invertida antes de la barra invertida:

Codigo	Resultado	Descripcion
\"	"	Comilla doble
\'	'	Comilla simple
\\	\	Barra invertida

Compaginar líneas largas
Los programadores son muy reacios a tener líneas de más de 80 caracteres en su código. Entonces, si una declaración de javascript no cabe en una línea y debe de ajustarse, hay varias opciones.

Compaginación después de un operador:

document.getElementById("salida").innerHTML =
   "Hola mundo";

O simplemente concatenar la salida con "+".

document.getElementById("salida").innerHTML = "Hola " +
   "mundo";

Los strings tienen propiedades y métodos
Los strings tienen propiedades y métodos. Una de las propiedades más conocidas es la longitud de caracteres. En el siguiente ejemplo se determina la longitud de caracteres de la cadena "x" y se almacena en una variable. ¿Por qué se almacena esto en una nueva cadena extra y no se imprime directamente? Por razones didácticas. Esta es la mejor manera de ver la estructura de la instrucción length:

var x = "Hola mundo";
var longitud = x.length;
alert(longitud);

Importante: no hay paréntesis después de la propiedad length. ¿Por qué? ¡Es una propiedad y no un método o una función!

Más sobre esto en un capítulo siguiente.

Tipos de datos en javascript
javascript no necesita una definición del tipo de la variable. javascript determina el tipo de variable en función del propio contenido. Tenemos 3 tipos diferentes de contenido:

• String - es decir, texto.
• Number - es decir, números.
• Boolean = interruptor, encendido o apagado o, en la jerga informática, true o false.

¡Las cadenas siempre se ponen entre comillas!

var variableTexto = "Aqui viene el texto";

¡Cualquier lugar decimal en los números se da con el punto americano! Así que no te tropeces con los lugares decimales - es efectivo un "lugar después del PUNTO".

var variableNumero = 34.23;

En el tipo "Booleano" solo hay 2 estados: true o false; estos también se pueden especificar con "1" para true y "0" para false. Es más claro especificar las variables (también para diferenciarlas de los números) a través de true o false.

var variableBoolean = true;

También existen peligros que acechan en la naturaleza de la tipificación automática de datos. El siguiente ejemplo debería aclarar esto.

var numeroa = 3;
console.log(numeroa);

Obtenemos 3.

Si ahora sumamos este número a otro:

var numeroa = 3;
numeroa = numeroa + 6;
console.log(numeroa);

Ahora se muestra la adición. Pero si accidentalmente ponemos el segundo número entre comillas, ¡obtendremos un resultado diferente!

var numeroa = 3;
numeroa = numeroa + '6';
console.log(numeroa);

Ahora se usan los tipo de datos "number" y "string" y javascript convierte automáticamente todo en el tipo de datos "string" y obtenemos el texto "36" como resultado.

Comentarios de javascript - Comentar áreas en javascript
Como en todos los lenguajes de programación, los comentarios en javascript ayudan a proporcionar una descripción general y comentar las áreas del programa en javascript ayuda a limitar los errores.

Los comentarios en javascript ayudan a orientarse rápidamente si se escribió el programa hace meses y luego se desea realizar cambios y extensiones en algún momento. Incluso si varias personas están trabajando en el código fuente. A veces te sentas años más tarde frente a un fragmento de código fuente y te sorprendes de que haya funcionado hasta ahora y apenas podés creer que lo hayas programado vos mismo. Es entonces cuando estás contento con los breves comentarios explicativos.

Especialmente cuando se está aprendiendo, se puede agregar comentarios delante de ciertas líneas o comandos; esto ayuda a obtener una mejor visión general de para qué sirve el comando y tal vez también para saber quién agregó el comando.

Comentar el código fuente o áreas del programa individuales en javascript se usa principalmente en proyectos complejos para identificar fuentes de error. Con el comando de comentario se puede desactivar líneas individuales.


Comentarios y comentar funcionan de la siguiente manera
2 barras comentan una línea, exactamente la que está detrás:

//

Asimismo, no solo podés desactivar una sola línea, sino un área completa. Comenta una sección entera:

/*
area comentada, que tambien puede ser varias
filas de largo
*/

Ejemplo 1: agregar un comentario en javascript

<h1>Comentar ejemplos</h1>
 
<script> 
document.write(" Hola "); 
document.write(" mundo ");
// Saludo 
document.write(" redondo ");
</script>

Los "comandos" para los comentarios son los mismos que para comentar áreas en el código fuente, es decir, para hacerlos "invisibles" para el flujo del programa. En el siguiente ejemplo, la salida de la palabra "mundo" se desactiva durante la ejecución del programa; los programadores lo llaman "comentar".


Ejemplo 2: comentar una sola línea en el código fuente de javascript

<h1>Comentar ejemplos</h1> 
 
<script> 
document.write(" Hola "); 
document.write(" mundo ");
// document.write(" redondo "); 
</script>

Y si se van a comentar áreas enteras, entonces todo entre /* y */, como en el siguiente ejemplo.


Ejemplo 3: Comentar un área

<h1>Comentar varias lineas</h1>
 
<script> 
document.write(" Hola "); 
/*
document.write(" mundo ");
document.write(" redondo ");
*/
</script>

Aprender javascript de una forma mejor a través del "modo estricto"
Originalmente, el lenguaje de programación javascript era muy tolerante a errores, también debido a su historia. Los "campamentos" de los desarrolladores de navegadores también abusaron originalmente de javascript como una herramienta poderosa, por lo que javascript tuvo que volverse más tolerante hacia las fallas en sus primeros días.

Esto condujo rápidamente a una programación descuidada y propensa a errores. Y aquí es donde el simple aprendizaje del idioma ayuda a adquirir el conocimiento sin procedimientos propensos a errores y a activar el modo más estricto ("stict mode"), que señala rápidamente errores y problemas.


Activar „strict mode“
Podemos activar el modo estricto para todo el programa o solo para ciertas partes del programa. Por supuesto, al aprender javascript, tiene sentido activar siempre el modo más estricto para que se señalen todos los errores y las posibles fuentes de errores y problemas.

Para este propósito, el "modo estricto" se activa justo al comienzo de nuestro programa javascript:

'use strict';
let x = 42;

Las comillas en torno a nuestro use strict son importantes para los navegadores más antiguos que aún no conocen esta instrucción. Para estos, la línea es solo una cadena y se ignora. No importa si se utilizan comillas simples o dobles.


Efectos del "modo estricto"
A partir de ahora, ya no podemos usar las variables de manera descuidada, sino que debemos declararlas (es decir, introducirlas con let o var).

El siguiente código javascript simplemente se ejecutaría si no fuera por el use strict, incluso si se programara de manera descuidada debido a la declaración faltante. Tan pronto como se activa nuestro modo estricto, obtenemos una página de navegador vacía (el programa finaliza) y un mensaje de error en la consola.

'use strict';
contenido = 'Hola mundo';

El mensaje de error puede diferir según el navegador, así que no te sorprendas si aparece un mensaje de error diferente en el curso (aquí se usa Google Chrome) que cuando usas un navegador diferente.

Entonces el código correcto sería:

'use strict';
let contenido = 'Hola mundo';

Hay otros efectos del "modo estricto" - estos serán explicados en el transcurso del curso en la parte apropiada. Por lo tanto, utiliza siempre use strict en las siguientes partes del curso.

Variables en javascript
Las variables se pueden crear y usar en javascript (al igual que en cualquier otro lenguaje de programación). En los siguientes ejemplos, puede que no sea inmediatamente obvio por qué, por ejemplo, el nombre se empaqueta en una variable y luego se genera cuando el nombre también podría generarse de inmediato. Estos ejemplos sirven para mostrar el uso. Más tarde vamos a ver que cualquier contenido puede estar en estas variables, por ejemplo, horas alternas, en donde el programa javascript creado realiza luego diferentes acciones dependiendo del tiempo.

Para establecer una variable, se asigna un nombre de variable. Este puede ser (casi) cualquiera. Hay algunas excepciones, pero eso no es tan importante para empezar.

En el primer paso creamos una variable y en el segundo paso llenamos esta variable con contenido.

Para causar cierta confusión de inmediato, introduzco 2 comandos para esto:

• Uno antiguo (que por supuesto aparece en muchos ejemplos y libros).
• Y la nueva y mejor versión del comando.

Ambos comandos hacen lo mismo; mostraré las sutiles diferencias más adelante.


Crear/definir variables
Para definir una variable, se usa el comando de javascript var (que es la vieja variante) o el comando más nuevo let.

<script>
var contenido;
</script>

O en la nueva forma:

<script>
let contenido;
</script>

Así le hemos dicho a javascript que hay una variable llamada contenido.

A continuación solo continuaré con la nueva variante let - más adelante se seguirá con la comparación entre la variante antigua y la nueva.


Asignar un contenido a una variable
Ahora hemos definido una variable; sin embargo, la variable aún no tiene ningún contenido o valor. Después de definir la variable, podemos asignarle un valor a esa variable:

<script>
let contenido;
contenido = 'Hola mundo';
</script>

Después del signo igual, asignamos el texto “Hola mundo” a la variable denominada contenido. Para este propósito, el texto se empaqueta entre comillas. ¡En un texto estático, no importa si son comillas simples o dobles! Las comillas dobles también podrían usarse en el ejemplo:

contenido = "Hola mundo";

Y ahora podemos trabajar con esta variable, es decir, podemos mostrar el contenido de la variable en la pantalla.

<script>
let contenido;
contenido = 'Hola mundo';
document.write(contenido);
</script>

La salida en la pantalla es "Hola mundo".

Por supuesto, también podemos trabajar con el contenido de la variable, es decir, por ejemplo, realizar cálculos y otras cosas. Estas posibilidades se mostrarán en los siguientes capítulos. En primer lugar, sigamos con el uso correcto de las variables.


Definir una variable y asignarle un valor en una línea
Se comienza con let y luego con el nombre de la variable y la asignación del contenido (entre ambos un signo igual).

En la salida, ahora se proporciona el nombre de la variable en lugar del texto (¡sin comillas!).

<script>
let contenido = 'Hola mundo';
document.write(contenido);
</script>

También es posible omitir let, pero entonces creamos una variable global, que puede tener sus inconvenientes al usar funciones. Más sobre este tema con las funciones más adelante. ¡Así que tene cuidado aquí! Como resultado, el siguiente programa javascript es el mismo.

<script>
contenido = 'Hola mundo';
document.write( contenido );
</script>

No es un buen estilo establecer variables globales a menos que realmente se necesiten globalmente.


Mayúsculas y minúsculas: nombres de variables en javascript
Otro peligro con las variables es la ortografía de los nombres de las variables. Estos son "Case-sensitivitys", es decir, la variable con el nombre variablepropia es diferente de variablePropia - ¡presta atención a las mayúsculas y minúsculas!

La salida ilustra esto en el ejemplo:

let variablepropia = "Hola";
let variablePropia = "mundo";
alert (variablepropia);

Por lo tanto, tene mucho cuidado aquí: es bueno si el editor de texto sugiere variables que ya están en uso, que simplemente se puedan adoptar. Menos errores tipográficos - más diversión con javascript.


Diferencias entre let y var
El comando let de javascript es más nuevo y está definido mucho más. Esto debería facilitar la creación de programas estables y sin errores. Por ejemplo, se puede definir una variable solo una vez usando let. Si se tuviera que definir nuevamente la variable más adelante en el código usando let, se recibiría un mensaje de error.

¡El siguiente programa sale mal!

let contenido = "Hola";
let contenido = "mundo";
alert (variablepropia);

Por otro lado, la vieja variante a través de var funciona sin un mensaje de error porque la verificación no es tan precisa allí. Si bien esto puede parecer una ventaja a primera vista, conlleva el riesgo de un código descuidado y de tener errores en el programa.

var contenido = "Hola";
var contenido = "mundo";
alert (variablepropia);

Hay otras diferencias entre let y var. Sin embargo, estas solo se vuelven comprensibles cuando conozcamos las funciones y usamos variables allí. Volveré a las diferencias entre let y var en el capítulo correspondiente.

Estructura de los comandos de javascript
En el último capítulo conocimos y usamos 2 comandos de javascript en su función. Sin embargo, sin mucha explicación de cómo es la estructura y qué se debe considerar, es decir, la mejor manera de evitar errores. Usamos los siguientes 2 comandos:

• alert('Hola mundo');
• document.write('Hola mundo');

Desde el primer comando obtenemos la salida del posterior contenido en la pantalla en una ventana emergente independiente, y la segunda salida la obtenemos directamente en el área de contenido de la ventana del navegador.


Orden de procesamiento de nuestros comandos
Tenemos el siguiente programa javascript:

document.write("Hola");
document.write("mundo");

El programa se procesa de arriba a abajo. Por lo tanto, vemos "Holamundo" como salida. De lo contrario, si un programa se ejecutara de abajo hacia arriba, tendría que imprimir "mundoHola", lo que no sería particularmente lógico.

Es lógico, pero tiene que ser mencionado.


Lo que es fundamentalmente importante: ¿cómo es la estructura de los comandos de javascript?
El poco vistoso punto y coma al final de cada comando es extremadamente importante. Esto limita el comando del siguiente.

document.write("Hola");
document.write("mundo");

El hecho de que ahora se use una línea separada para cada declaración de javascript tiene que ver más con la claridad para el programador que con cualquier influencia en la ejecución.

Por lo tanto, también podríamos poner todos los comandos en una línea y obtendremos el mismo resultado en la salida.

document.write("Hola"); document.write("mundo");

Pero solo si no olvidamos accidentalmente el punto y coma delimitador. En el siguiente ejemplo, no obtenemos ningún resultado, por lo que nos maravillamos:

document.write("Hola")   document.write("mundo");

No recibimos ni directamente un mensaje de error, ni ninguna salida. Oculto en lo profundo del navegador en ejecución, aparece el mensaje de error "Uncaught Syntax Error: unexpected identifier".

SIEMPRE inclui un punto y coma al final para evitar sorpresas desagradables.


Estructura de los comandos de javascript antes del punto y coma
A menudo es útil si miramos los comandos de derecha a izquierda. En nuestro ejemplo, hay una salida:

document.write("Hola");

Junto a nuestro punto y coma está el texto de salida entre corchetes y entre comillas.

Las comillas son importantes ya que ese es el texto que queremos generar. Todavía no conocemos ninguna variable; en el capítulo Variables veremos que, de lo contrario, el texto se entendería como una variable.


El tipo de comillas
El tipo de comillas entre corchetes no importa para una salida de puro texto; lo principal es que haya comillas. Entonces podemos usar comillas dobles (") así como comillas simples ('). Lo único importante es que siempre se utilice el mismo tipo de comillas. ¡Una combinación de comillas simples y dobles como ("Hola') saldrá mal!

Hasta ahora, tenemos nuestro texto (entre corchetes y comillas) antes del punto y coma (que delimita el siguiente comando). Antes de eso viene el comando de javascript, que ahora determina qué debe pasar con nuestro texto.

En nuestros ejemplos debe haber una salida, independientemente de si se trata de document.write o de alert.

En el ejemplo podemos ver que no hay espacio entre nuestro comando de javascript y el corchete.

<script>
document.write("Hola");
</script>

Esta es la variante estándar que todos los programadores normalmente usan y que ahorra espacio.

Ahora, si querés confundir a los programadores veteranos, agrega espacios.

<script>
document.write    ("Hola");
</script>

Curiosamente, funciona en el navegador, pero no es muy claro. Así que apegate a las convenciones.


Falta del espacio en la salida
Si te preguntabas por qué faltaba el espacio entre nuestras palabras "Hola" y "mundo" en el resultado, aquí está la explicación:

El navegador muestra exactamente en la pantalla lo que le pedimos.

Si queremos un espacio entre "Hola mundo", también debemos ingresarlo en nuestro código:

document.write("Hola");
document.write(" mundo");