Ir al contenido principal

Destacados

Crear String usando Template Literals

Los templates literals , simplifican una concatenación de cadenas. Su sintaxis:   ´ cadena ${ expresión } ´ Ejemplo: Ejercicio freeCodeCamp Utilice la sintaxis template literal para crear una matriz de lista de elementos (li). El texto de cada elemento de la lista debe ser uno de los elementos de la matriz failure que es una propiedad del objeto result . Además, debe tener un atributo class con el valor "text-warning" . La función makeList debería devolver la matriz de cadenas de elementos de la lista. Utilice cualquier tipo de bucle para obtener la salida deseada (que se muestra a continuación). Código a modificar Solución La constante failuresList llama a la función makeList que tiene como argumento al objeto result y su propiedad failure que es una matriz de tres elementos.  El argumento arr sustituye a result.failure en la función. Se crea una nueva matriz failureItems para guardar los elementos que se leerán del objeto result.failure. Se usa el bucle for para

Hallar el número de frecuencia de la vocal “a” en una frase dada en Javascript

 


Análisis previo. El enunciado nos pide que contemos las vocales “a” que se encuentran en una frase cualquiera. En español tenemos vocales que llevan tílde, el programa debería ser capaz de identificarlas y contarlas.  También debe poder contar las vocales sean mayúsculas o minúsculas.



¿Qué utilizaremos?

  • La propiedad length.
  • El método  charAt()
  • EL método toLowerCase()
  • El método prompt()
  • Bucle for
  • Condicional If  


Crea un archivo HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, 
initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      
    Aquí van las instrucciones de Javascript
      
      
    </script>
  </body>
</html>




1.- Definimos las variables que necesitaremos para manipular los datos.

       
      /*----------------------------------------------------
       Bloque ingreso de datos e inicialización de variables
       ----------------------------------------------------*/
      let frase = prompt("Ingrese una frase");
      let longFrase = frase.length;
      let vocal = frase.toLowerCase();
      let sumaVocal = 0;


frase: guarda la cadena de caracteres que ingresará el usuario.

longFrase: guarda la longitud de la cadena. Necesitamos conocer su longitud porque se requiere ir comparando uno a uno, cada carácter de la cadena con la vocal indicada utilizando un bucle for.

vocal: en esta variable guardamos la variable frase convertida a minúsculas.

sumaVocal: es el contador. Este se irá incrementando en 1, cada vez que halle una coincidencia. 


2.- Inicializamos y declaramos las variables.


Declaramos todas las variables con let e inicializamos.

    let frase =  prompt(“Introduzca una frase”);

El método prompt() despliega una ventana en el navegador con un campo para recibir la frase que escribirá el usuario. Esta data queda guardada en la variable frase.

    let longFrase= frase.length;

La propiedad length devuelve el número de caracteres que tiene la frase.

    let vocalFrase= frase.toLowerCase();

El método toLowerCase() convierte los caracteres en mayúsculas a minúsculas.  Si no utilizáramos un filtro para evaluar la calidad del dato, probablemente el programa devolverá resultados inesperados.  En nuestro caso, para Javascript, las cadenas siguientes son diferentes:

“Mariposa de colores”  |  “MariposA de Colores”

Aunque “a” y “A” tienen igual representación para nosotros, no es así para Javascript, que en realidad está leyendo un código ASCII.  Javascript lee 65 y 97 respectivamente.

La variable vocal guardará la conversión a letras minúsculas que el método toLowerCase() hace, a la variable frase.

let sumaVocal = 0;

Esta variable guardará el total de vocales “a” que tenga la frase que indique el usuario. Cada vez que se encuentre una vocal “a” en la frase, se incrementará en 1.

Ahora podemos construir el bloque de instrucciones que hará la búsqueda de la vocal.


3.- Bloque de búsqueda de la vocal en la frase usando un bucle for

      /*----------------------------------------------------
       Bloque Búsqueda de la vocal en la frase
       ----------------------------------------------------*/
      for (let i = 0; i <= longFrase; i++) {
        if (vocal.charAt(i) === "a" || vocal.charAt(i) === "á") {
          sumaVocal++;
        }
      }

Un bucle for luce lo más indicado para iterar a lo largo de la frase. Nos permitirá ir recorriendo carácter por carácter para ubicar cada “a” que aparezca en ella. La longitud ya la tenemos guardada en la variable longFrase.

let i= 1:  Declaramos la variable “i” con let y la iniciamos en 1.

i<=longFrase: La variable “i” representa el número de caracteres de la frase.  Sirve como control de iteración. Cuando “i”  deje de ser menor o igual a la longitud de la frase, en este caso longFrase, parará de ejecutar la operación de comparación.

i++: El bucle for se repetirá hasta tanto “i” sea menor o igual que la variable longFrase. Mientras no sea así, se incrementará en uno cada vez hasta alcanzar la longitud de longFrase.

Necesitamos comparar cada letra de la frase con la vocal “a”, y el método charAt() ayudará. 

¿Qué hace charAt()? Devuelve el elemento que esté guardado en su posición o índice.

Suponiendo que Mariposa sea la palabra a examinar.  Tendría un número de 8 posiciones, comenzando en 1.


Letras            M | a | r | i | p | o | s | a  

Posiciones      1  |2  | 3 | 4| 5 | 6 | 7 | 8


Cuando “i” tenga el valor de 5, el método charAt(i) devolverá el valor de esa posición, que según el ejemplo sería la letra “p”.

Hagamos una prueba en frío. Me gusta seguir al detalle qué hace exactamente un algoritmo, para entender cómo trabaja.

Queremos conocer cuántas vocales “a” tiene la palabra  “Luna”. Luna es una palabra de 4 caracteres. Vamos a sustituir por data real cada una de las variables en el bucle for.


Letras            L | u | n | a

Posiciones     1 |  2 | 3 | 4


longFrase= 4

vocal= luna

Sustituiré la "i" por las letras de la palabra Luna en charAt(i) para hacerlo más gráfico.


     

Cuando i= 1; i <= 4; 1++) { 
     (vocal.charAt(“l”) === "a" ?  No!
sumaVocal++; no se incrementa

Cuando i= 2; 2 <= 4; 2++) { 
     (vocal.charAt(“u”) === "a" ?  No!
sumaVocal++; no se incrementa

Cuando i= 3; 4 <= 4; 3++) { 
     (vocal.charAt(“n”) === "a" ?  No!
sumaVocal++; no se incrementa
Cuando i= 4; 4 <= 4; 4++) { 
     (vocal.charAt(“a”) === "a" ?  Sí!
sumaVocal++; suma 1

Como ves, el método charAt() devolverá el elemento que esté guardado en el índice que se le indique.

ECMAscript6 recomienda que se use siempre el operador de igualdad estricta "===".

   for (let i = 1; i <= longFrase; i++) {
        if (vocal.charAt(i) === "a" || vocal.charAt(i) === "á") {
          sumaVocal++;
        }
      }

Fijate que agregué una condición más. 

   
        if (vocal.charAt(i) === "a" || vocal.charAt(i) === "á"
          

En español tenemos vocales acentuadas y ellas se deben contar también, pero hay que indicarle al programa que debe sumarlas también como vocal. 

El programa usa el operador lógico "||", para indicar que si encuentra una "a" o una "á" con tilde, debe sumarla al contador  sumaVocal. 

Ya tenemos listo el cuerpo de operaciones clave del programa. Ahora debemos mostrar los resultados en el navegador.

4.- Bloque impresión de resultados 

    /*----------------------------------------------------
       Bloque impresión en pantalla de los resultados
       ----------------------------------------------------*/
   if (sumaVocal > 0) {
    document.write(frase + "<br>");
    document.write('Frecuencia de "a"  en la frase:' + sumaVocal);
  } else {
    document.write(" No se hallaron coincidencias");
 }

El programa debería no solo mostrar el número de frecuencia de las letras halladas en la frase, sino también indicarle al usuario que no halló ninguna coincidencia.

Lo más sencillo, es simplemente verificar si la variable contador sumaVocal cambió su valor inicial de 0.

Si su valor es mayor a 0,  entonces mostrará dos mensajes usando document.write. El primero mostrará la frase que se está analizando, y el segundo document.write, indicará el número de frecuencia de la vocal “a” en la frase. Para mostrar los mensajes en diferentes líneas, el primer mensaje tiene un salto de línea con la etiqueta "<br>"

Si su valor es igual 0, mostrará un mensaje indicándole al usuario que no se hallaron coincidencias.

Aqui el algoritmo final

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, 
initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*-----------------------------------------------
       Prog. que cuenta el número de "a" en una frase
       -----------------------------------------------*/
      /*----------------------------------------------------
       Bloque ingreso de datos e inicialización de variables
       ----------------------------------------------------*/
      let frase = prompt("Ingrese una frase");
      let longFrase = frase.length;
      let vocal = frase.toLowerCase();
      let sumaVocal = 0;

      /*----------------------------------------------------
       Bloque Búsqueda de la vocal en la frase
       ----------------------------------------------------*/
      for (let i = 1; i <= longFrase; i++) {
        if (vocal.charAt(i) === "a" || vocal.charAt(i) === "á") {
          sumaVocal++;
        }
      }
      /*----------------------------------------------------
       Bloque impresión en pantalla de los resultados
       ----------------------------------------------------*/
      if (sumaVocal > 0) {
       document.write(frase + "<br>");
       document.write('Frecuencia de "a" en la frase:'+ sumaVocal);
      } else {
       document.write(" No se hallaron coincidencias");
      }
    </script>
  </body>
</html>


***



Sea un pensador libre.
No aceptes todo lo que escuches como verdad. Debemos tener cuidado de no creer las cosas simplemente porque queremos que sean verdad. Sea crítico y evalúe lo que cree.

Richard Feynman
@ProfFeynman









Comentarios

Entradas populares