Siento responder a este tema, pero no lo pude editar. (Este subtítulo lo quise agregar entre el penúltimo subtítulo y el último subtítulo).

El Document Object Model como árbol
El DOM también se puede imaginar como un árbol. En la siguiente ilustración, el árbol está acostado de lado. La raíz sería el elemento "document".

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.

Es por eso que escribí que no está vinculado a la codificación de la página.

Bueno, no importa en el sentido de que haga lo que uno haga, no se puede cambiar el hecho de que javascript use siempre el formato UTF-16.

Lo de la propiedad length fue un error mio. Estaba pensado en una variable, pero escribí string. Gracias por avisarme.

Lo corregí sacándolo para evitar discusiones.

Eso lo interprete como un comentario adicional, no como una corrección. No se si lo interprete bien.

Nunca escribí eso.

Lo demás lo corregí.

Hola MinusFour,

gracias por tus comentarios. O bien los quiero comentar o bien los quiero corregir.

Para empezar yo no escribí que javascript solo se ejecuta en el navegador. Solo escribí que se ejecuta en el navegador.

Además mencioné también la de AJAX.

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.