Entrada destacada

Como usar enums en Android, kotlin

el
0

Cómo convertir caracteres a ASCII - JavaScript

el
Describamos el problema.

Crear un programa en javascript que obtenga el valor ASCII el carácter ingresado desde un campo de texto. La acción deber ejecutada al hacer click sobre un botón y devolver el resultado en un elemento html (a elegir), También se debe agregar un segundo botón que haga lo contrario, que nos devuelva el carácter a partir de un valor ASCII.

Intenta resolverlo antes de seguir leyendo, una vez terminado compara tu resultado o si después de 10 minutos no has podido resolverlo ve a continuación la respuesta.



Codificación Unicode de un carácter.


Está codificación es compatible con ASCII, así que usamos el método charCodeAt(). Este método se usa sobre una cadena de caracteres, hay que especificar la posición del carácter del cual queremos obtener su correspondiente Unicode. Y para obtener el resultado contrario usamos fromCharCode() el cual convierte un número Unicode a un carácter.

Empecemos con la parte del html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <title>Práctica 3</title>
 <style type="text/css">
  .boton {
    height: 20pt;
    border: 1px solid #45EE99;
    border-radius: 3px;
    background: #45EE99;
    margin-top: 4px;
    margin-bottom: 4px;
    width: 100%;
  }
  .entrada {
    height: 18pt;
    border-radius: 2px;
    width: 100%;
  }
  .salida {
    height: 18pt;
    border-radius: 2px;
    border: 1px dotted black;
    width: 100%;
    margin-top: 4px;
  }
  .contenedor {
    width: 30%;
  }
 </style>
 <script src="main.js"></script>
</head>
<body>
 <div class="contenedor"> 
  <input type="text" id="campoEntrada" class="entrada"/> 
  <div id="pantalla" class="salida" ></div>
  <input type="button" value="Codificar" class="boton" onclick="codificar()" />
  <input type="button" value="Decodificar" class="boton" onclick="decodificar()" />
 </div>
</body>
</html>

También se ha agregado CSS para mejorar la presentación de los campos que vamos a utilizar, y obtener el siguiente resultado.
Ahora el contenido del archivo main.js el cual se ha enlazado en el archivo html en la línea 32.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
var cadena = document.getElementById("campoEntrada");
var pantalla = document.getElementById("pantalla");

function codificar() {
  var caracteres = [];
  valor = cadena.value;
  for (var i = 0; i < valor.length; i++){
    caracteres[i] = valor.charAt(i).charCodeAt(0);
  }
  pantalla.innerHTML = caracteres.toString();
}


function decodificar() {
  valor = cadena.value;
  var caracteres = valor.split(',');

  for (var i = 0; i < caracteres.length; i++){
    caracteres[i] = String.fromCharCode(caracteres[i]);
  }
  pantalla.innerHTML = caracteres.toString();
}

En el método codificar utilizamos charCodeAt(), pero lo usamos dentro de un ciclo for ya que intentaremos obtener el código de varios caracteres a la vez. 
Para el proceso inverso, si queremos decodificar varios códigos a la vez los escribimos separados por una coma.

Otras funciones de cadenas utilizadas son length que obtiene el número de caracteres contenidos en un String, chartAt() para obtener un carácter en la posición especificada, split() para obtener cada uno de los caracteres de una cadena, los cuales se almacenaran en un array a este hay que especificar el carácter por el cual separa la cadena.

Finalmente toString() lo utilizamos para convertir un arreglo a un String esto para poder mostrarlo en la página.

Ver el Pen Caracteres a unicode por Jesus Tepec (@JesusTepec) en CodePen.

Comentarios

  1. Anónimo8 de enero de 2020, 4:58

    esto no es correcto á = 160 en codigo ascii no a 225

    ResponderEliminar

Publicar un comentario