JS FUNDAMENTOS 2

CODIGO BASE PARA PRUEBAS

<!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">
  <h4>Codigo para pruebas</h4>
  <p id="campo_para_mostrar_datos"></p>
  <!-- "campo_para_mostrar_datos" es como se identifica el campo  -->    
  <!-- Puedes modificar el id para tus necesidades   -->


  <input 
    type="text" 
    id="campo_para_ingresar_datos" 
    placeholder="Ingrese informacion">
  <!-- "campo_para_ingresar_datos" es como se identifica el campo  -->    
  <!-- Puedes modificar el id para tus necesidades   -->

  <button onclick="fn_Presionar_Boton()">
    Mensaje en el boton
  </button>
  <!-- Cada vez que se presiona el boton se llama a la fn_Presionar_Boton  -->  
  <!-- Puedes modificar el nombre de la funcion "asignada" para tus necesidades   -->

  <script>
    // En esta sección se copia/escribe el codigo JavaScript

    // Codigo de ejemplo al presionar el boton
    function fn_Presionar_Boton()
    {
      console.log("Iniciando fn_Presionar_Boton");

      alert("Hago algo al presionar el boton");

      //Codigo para recuperar 
      let info_campo = document.getElementById("campo_para_ingresar_datos").value;
      info_campo = info_campo.trim(); // Elimina los espacios en blanco

      let longitud_campo = info_campo.length; // Determina la longitud del campo.
      if (longitud_campo==0)  // Verifica el campo tenga texto
      { alert("No ingresaste nada"); }
      else
      { 
        alert ("Ingresaste ["+info_campo+"] con longitud ["+longitud_campo+"]" ) 
        //Codigo para copiar el contenido dentro del campo de texto

        document.getElementById("campo_para_mostrar_datos").textContent = "Información ingresada : "+info_campo;
      }

    }//fin de function fn_Presionar_Boton()


  </script>
  </body>
</html>

Ejecución condicional: if

La sentencia if(...) evalúa la condición en los paréntesis, y si el resultado de la comparación es verdadero true, ejecuta un bloque de código.

La sentencia if puede contener un bloque else opcional. Este bloque se ejecutará cuando la condición sea falsa.

Codigo

<script>
  let variable_year = prompt('¿En que año fué publicada la especificación ECMAScript-2015?', '');

  if (variable_year == 2015) 
  {//Inicia bloque verdadero
    alert( '¡Estás en lo cierto!' );
  }//Finaliza bloque verdadero
  else
  {//Inicia bloque falso
    alert ('La respuesta  ['+ variable_year +'] es incorrecta');
  }//Finaliza bloque falso  
</script>

ACTIVIDADES A REALIZAR

Crea un HTML con el script anterior

Modificalo para que pregunte tu nombre y fecha de nacimiento

Debe indicar si los datos son correctos o incorrectos

Los datos preguntados y la respuesta deben escribirse en parrafos en HTML

Procura no copiar directamente la respuesta desde una IA

Ejecución condicional: else if

En ocaciones es necesario probar más de una condición. La clausula else if nos permite hacer esto.

Codigo

<script>
  let year = prompt('¿En qué año fue publicada la especificación ECMAScript-2015?', '');

  if (year < 2015) 
  {//Inicio bloque
    alert( ' El año '+year+' es menor al correcto ' );
  }//Finaliza bloque 
  else if (year > 2015) 
  {//Inicio bloque
    alert( ' El año '+year+' es mayor al correcto ' );
  }//Finaliza bloque 
  else if (year == 2015 )
  {//Inicio bloque
    alert( '¡Exactamente!' );
  }//Finaliza bloque      
</script>

En el código de arriba, JavaScript primero revisa si year < 2015. Si esto es falso, continúa a la siguiente condición year > 2015. Si esta también es falsa, continuara a la siguiente comparación year == 2015

Podría haber más bloques else if. Opcionalmente puede añadirse una sentencia else

Operador ternario ‘?’

El operador de comparación está representado por el signo de cierre de interrogación ?. A veces es llamado “ternario” porque el operador tiene tres operandos, es el único operador de JavaScript que tiene esa cantidad.

Codigo con IF

<script>
  let Respuesta;
  let Num_Magico = prompt('¿Adivina el numero magico?', '');

  if ( Num_Magico == 666 ) 
  {
    Respuesta = 'Correcta';
  } 
  else 
  {
    Respuesta = 'Erronea';
  }

  alert(Respuesta);
</script>

ACTIVIDADES A REALIZAR

Crea un HTML con el script anterior

Modificalo para que la respuesta se escriba en un parrafo en HTML

Investiga como usar la propiedad style.color En JavaScript

Aplica style.color = "green" al resultado correcto

Aplica style.color = "red" al resultado correcto

Procura no copiar directamente la respuesta desde una IA

La sintaxis es

let resultado = condicion ? proceso_verdadero : proceso_falso;

Codigo ternario ?

<script>
  let Respuesta;
  let Num_Magico = prompt('¿Adivina el numero magico?', '');
  Respuesta = ( Num_Magico == 666 )  ? 'Correcta' : 'Erronea';
  alert(Respuesta);
</script>

El operador ternario en JavaScript es una herramienta poderosa y concisa para realizar evaluaciones condicionales. Sin embargo, hay situaciones en las que es mejor evitar su uso:

Condiciones complejas: Si la condición requiere múltiples comparaciones o lógica compleja, un if...else puede ser más claro y fácil de entender
Anidamiento múltiple: Anidar múltiples operadores ternarios puede hacer que el código sea difícil de leer y mantener
Legibilidad: Si el uso del operador ternario hace que el código sea menos legible, es preferible optar por una estructura if...else

Operadors Lógico (Or)

En la programación clásica, el OR lógico esta pensado para manipular solo valores booleanos. Si cualquiera de sus argumentos es true, retorna true, de lo contrario retorna false.

El operador OR se representa con dos símbolos de lineas verticales ||

Hay cuatro combinaciones lógicas posibles:

Codigo

<script>
  alert(true || true); // true (verdadero)
  alert(false || true); // true
  alert(true || false); // true
  alert(false || false); // false (falso)  
</script>

Como podemos ver, el resultado es siempre true excepto cuando ambos operandos son false.

Si un operando no es un booleano, se lo convierte a booleano para la evaluación.

Codigo

<script>
  if (1 || 0) 
  { // Funciona como if( true || false )
    alert("valor verdadero!");
  }
</script>

La mayoría de las veces, OR || es usado en una declaración if para probar si alguna de las condiciones dadas es true.

Codigo

<script>
  let hour = 9;

  if (hour < 10 || hour > 18) 
  {
    alert( 'La oficina esta cerrada.' );
  }
</script>

ACTIVIDADES A REALIZAR

Crea un HTML con el script anterior.

Que utilice prompt para preguntar el valor de la hora

La respuestas deben escribirse en un parrafo en el documento.

Procura no copiar directamente la respuesta desde una IA

El operador OR || funciona de la siguiente manera:

Evalúa los operandos de izquierda a derecha.
Para cada operando, convierte el valor a booleano. Si el resultado es true, se detiene y retorna el valor original de ese operando.
Si todos los operandos han sido evaluados (todos eran false), retorna el ultimo operando.

Codigo

<script>
  alert(1 || 0); // 1 (1 es un valor verdadero)

  alert(null || 1); // 1 (1 es el primer valor verdadero)
  alert(null || 0 || 1); // 1 (el primer valor verdadero)

  alert(undefined || null || 0); // 0 (todos son valores falsos, retorna el último valor)
</script>

Operador logico AND

El operador AND es representado con dos ampersands &&

En la programación clásica, AND retorna true si ambos operandos son valores verdaderos y false en cualquier otro caso.

Codigo

<script>
  alert(true && true); // true
  alert(false && true); // false
  alert(true && false); // false
  alert(false && false); // false
</script>

Codigo

<script>
  let hour = 12;
  let minute = 30;

  if (hour == 12 && minute == 30) 
  {
    alert("La hora es 12:30");
  }
</script>

ACTIVIDADES A REALIZAR

Crea un HTML con el script anterior.

Que utilice prompt para preguntar el valor de la hora y los minutos

La respuestas deben escribirse en un parrafo en el documento.

Procura no copiar directamente la respuesta desde una IA

Codigo

<script>
  if (1 && 0) 
  { // evaluado como true && false
    alert( "no funcionará porque el resultado es un valor falso" );
  }
</script>

El operador AND && realiza lo siguiente:

Evalúa los operandos de izquierda a derecha.
Para cada operando, los convierte a un booleano. Si el resultado es false, se detiene y retorna el valor original de dicho operando.
Si todos los operandos han sido evaluados (todos fueron valores verdaderos), retorna el último operando.

Nota

La precedencia del operador AND && es mayor que la de OR ||.

Así que el código a && b || c && d es básicamente el mismo que si la expresiones && estuvieran entre paréntesis: (a && b) || (c && d)

Operador Logico NOT

El operador booleano NOT se representa con un signo de exclamación !

Codigo

<script>
  alert(!true); // false
  alert(!0); // true
</script>

El operador acepta un solo argumento y realiza lo siguiente:

Convierte el operando al tipo booleano: true/false.
Retorna el valor contrario.