JS FUNDAMENTOS

document.write y close

Cuando se programa con JavaScript, se puede escribir directamente en el documento actual mediante el método document.write();.
El inconveniente que tiene el metodo write es que sobreescribe (destruye el contenido original) completamente la pagina web .
Se puede enviar tantos mensajes con document.write(); como sean necesarios.Para finalizar el proceso de escritura utiliza el metodo document.close();
El siguiente codigo declara una variable, se le asigna una cadena de texto y utiliza el metodo document.write para enviarlo al navegador.

Codigo

<script>
  let Mensaje_Saludo = "Hola!";

  // Mostramos el contenido de la variable en  documento HTML
  document.write(Mensaje_Saludo);
  document.write('<br>');
  document.write('[ Texto directo ]');
  // Cierra el proceso de escritura 
  document.close();
</script>

Visualizacion

Hola!
[Texto directo]

ACTIVIDADES A REALIZAR

Crea un script que recupere tu nombre desde una variable y la imprima mediante el metodo document.write y un siguiente mensaje con la fecha actual.

Procura no copiar directamente la respuesta desde una IA

JavaScript modificando el DOM

JavaScript fue creado inicialmente para los navegadores web. Los navegadores web proporcionan un medio para controlar las páginas web.

El Document Object Model, o DOM, representa todo el contenido de la página como objetos que pueden ser modificados.

El objeto document es el punto de entrada a la página. Con él podemos cambiar o crear cualquier cosa en la página.

Para el siguiente ejemplo:

El navegador comienza a interpretar el documento y lo presenta en pantalla hasta llegar a <script>.
Inicia la ejecución del codigo JavaScript

Se usa el método document.getElementById('Dato_001') para asignarlo a la constante Dato_001
De esta manera queda vinculada la constante Dato_001 al elemento con id="Dato_001"
Asi es posible utilizar la propiedad innerText para modificar el texto del elemento vinculado.
Para Dato_003 se modifica directamente la propiedad innerText del elemento "Dato_003" que existe en document.

NOTA : Es recomendable utilizar nombre de constantes / variables que permitan asociarlos a los identificadores de las etiquetas de la pagina HTML

CODIGO

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">      
</head>
  <body style="color:white;background-color:black">
  <h2>Pagina para realizar pruebas con JavaScript</h2>
  <hr>
  <p id="Dato_001">Datos1 en etiqueta P</p>  
  <p id="Dato_002">Datos2 en etiqueta P </p>
  <p id="Dato_003">Datos3 en etiqueta P </p>
  <script>
    console.log ('Iniciando el script');  

    // Accede al elemento con id="Dato_001" 
    const ID_Dato_001 = document.getElementById('Dato_001');        
    // Modifica el texto directamente del elemento accediendo a la propiedad innerText 
    ID_Dato_001.innerText = 'Nuevos datos actualizados';

    // Accede al elemento con id="Dato_002" 
    const ID_Dato_002 = document.getElementById('Dato_002');
    // Modifica el texto + valor de una variable 
    let  Mensaje_Numerico = '123';
    ID_Dato_002.innerText = 'Variable : '+Mensaje_Numerico;

    // Modifica directamente la propiedad innerText del elemento "Dato_003" que existe en document 
    let  Mensaje_Saludo = 'Hola, soy una variable';
    document.getElementById("Dato_003").innerText = Mensaje_Saludo;  

    console.log ('Terminando el script');
  </script>
  </body>
</html>

ACTIVIDADES A REALIZAR

Crea un HTML con script que presente tu nombre recuperado desde una variable. Esta informacion debe presentarse dentro una etiqueta P.

Procura no copiar directamente la respuesta desde una IA

Console .log .warn .error

La consola del navegador te permite interactuar con JavaScript, además de poder consultar los errores del codigo.
Lo más habitual es usar el método console.log(); para mostrarlo por la consola.
Para enviar a la consola mensajes de advertencia se usa método console.warn();
Para enviar a la consola mensajes de error se usa método console.error();
El siguiente codigo declara una variable, se le asigna una cadena de texto y utiliza el metodo document.write para enviarlo a la consolda del navegador.

Codigo

<script>
  let Mensaje_Saludo = "Hola!";

  // Mostramos el contenido de la variable en  documento HTML
  console.log('Mensaje tipo log :'+Mensaje_Saludo);
  console.warn('Mensaje tipo log :'+Mensaje_Saludo);
  console.error('Mensaje tipo log :'+Mensaje_Saludo);
</script>

ACTIVIDADES A REALIZAR

Crea un HTML con script que recupere tu nombre desde una variable y la imprima mediante el metodo console.log

Terminado el paso anterior modifica el archivo para que el nombre sea presentado en un parrafo dentro del HTML utilizando el metodo getElementById y la propiedad innerText

Procura no copiar directamente la respuesta desde una IA

Interacción: alert

Muestra un mensaje "modal" y espera a que el usuario presione “Aceptar”.

La mini ventana con el mensaje se llama * ventana modal *. La palabra “modal” significa que el visitante no puede interactuar con el resto de la página, presionar otros botones, etc., hasta que se haya ocupado de la ventana. En este caso, hasta que presionen “OK”.

Codigo para alert

<script>
  alert("Hola !");
</script>

ACTIVIDADES A REALIZAR

Crea un HTML con script que presente un mensaje Alert

Terminado el paso anterior modifica el script para que tu nombre sea presentado en el Alert obteniendo esta información desde una variable

Procura no copiar directamente la respuesta desde una IA

INTERACCIÓN : PROMPT

La función prompt acepta dos argumentos:

Muestra una ventana modal con un mensaje de texto, un campo de entrada para el visitante y los botones OK/CANCELAR.

title = El texto a mostrar al usuario.

default = Un segundo parámetro opcional, es el valor inicial del campo de entrada.

Codigo

<script>
  //result = prompt(title, [default]);
  let result = prompt('Escribe un numero ', '0');
  console.log('result =['+result+']');
</script>

El usuario puede escribir algo en el campo de entrada de solicitud y presionar OK, así obtenemos ese texto en result. O puede cancelar la entrada, con el botón Cancelar o presionando la tecla Esc, de este modo se obtiene null en result.

La llamada a prompt retorna el texto del campo de entrada o null si la entrada fue cancelada.

ACTIVIDADES A REALIZAR

Crea un HTML con script que recupere tu nombre mediante PROMPT, lo almacena en la varible Alumno_Nombre y lo presente mendiante console.log

Terminado el paso anterior modifica el archivo para que el contenido de Alumno_Nombre sea presentado en un parrafo dentro del HTML utilizando el metodo getElementById y la propiedad innerText

Procura no copiar directamente la respuesta desde una IA

INTERACCIÓN : Confirm

La función confirm muestra una ventana modal con una pregunta y dos botones: OK y CANCELAR.

El resultado es true si se pulsa OK y false en caso contrario.

Codigo

<script>
  let isBoss = confirm("¿Eres el jefe?");
  alert( isBoss ); // true si se pulsa OK
</script>

ACTIVIDADES A REALIZAR

Crea un HTML con script que utilice la funcion CONFIRM preguntando "si desea salir", lo almacena en la varible Respuesta_Usuario y lo presente mendiante console.log

Terminado el paso anterior modifica el archivo para que el contenido de Respuesta_Usuario sea presentado en un parrafo dentro del HTML utilizando el metodo getElementById y la propiedad innerText

Procura no copiar directamente la respuesta desde una IA

Operadores básicos

Están soportadas las siguientes operaciones:

Suma +
Resta -
Multiplicación *
División /
Resto %
Exponenciación **

El operador resto %, a pesar de su apariencia, no está relacionado con porcentajes.

El resultado de a % b es el resto de la división entera de a por b.

Codigo

<script>
  alert( 5 % 2 ); // 1, es el resto de 5 dividido por 2
  alert( 8 % 3 ); // 2, es el resto de 8 dividido por 3
  alert( 8 % 4 ); // 0, es el resto de 8 dividido por 4
</script>

ACTIVIDADES A REALIZAR

Crea un HTML con script que solicite 2 numeros mediante PROMPT en dos variables Numero_Uno y Numero_Dos

Utiliza los operadores matematicos basicos con los dos numeros

Presenta el resultado de cada operación en un parrafo individual utilizando el metodo getElementById y la propiedad innerText

Procura no copiar directamente la respuesta desde una IA

Concatenación de cadenas +

Normalmente el operador + suma números.

Pero si se aplica el + a una cadena, los une (concatena):

Codigo

<script>
  let s = "my" + "string";
  alert(s); // mystring
</script>

Tenga presente que si uno de los operandos es una cadena, el otro es convertido a una cadena también.

Codigo

<script>
  alert( '1' + 2 ); // "12"
  alert( 2 + '1' ); // "21"
</script>

Asignación

Tengamos en cuenta que una asignación = también es un operador.

Es por eso que, cuando asignamos una variable, como x = 2 * 2 + 1, los cálculos se realizan primero y luego se evalúa el =, almacenando el resultado en x.

Codigo

<script>
  let x = 2 * 2 + 1;
  alert( x ); // 5
</script>

ACTIVIDADES A REALIZAR

Crea un script con las siguientes expresiones y explica el resultado de cada una

"" + 1 + 0

"" - 1 + 0

true + false

6 / "3"

"2" * "3"

4 + 5 + "px"

"$" + 4 + 5

"4" - 2

"4px" - 2

" -9 " + 5

" -9 " - 5

null + 1

undefined + 1

Procura no copiar directamente la respuesta desde una IA

Comparaciones

En Javascript se escriben así:

Mayor/menor que: a > b, a < b.
Mayor/menor o igual que: a >= b, a <= b.
Igual: a == b (el doble signo == significa comparación, mientras que un solo símbolo a = b significaría una asignación).
Distinto. En matemáticas la notación es ≠, pero en JavaScript se escribe como una asignación con un signo de exclamación delante: a != b.

Codigo

<script>
    alert( 2 > 1 ); // true (correcto)
    alert( 2 == 1 ); // false (incorrecto)
    alert( 2 != 1 ); // true (correcto)
</script>

Comparación de diferentes tipos

Al comparar valores de diferentes tipos, JavaScript convierte los valores a números.

Codigo

<script>
    alert( '2' > 1 ); // true, la cadena '2' se convierte en el número 2
    alert( '01' == 1 ); // true, la cadena '01' se convierte en el número 1      
</script>

Codigo

<script>
    alert( true == 1 ); // true
    alert( false == 0 ); // true
</script>

Fundamentos 1