JavaScript del lado del cliente del lado del servidor
En este artículo, necesitamos crear un generador de strings aleatorias usando Javascript que generará un conjunto aleatorio de strings y se mostrará cuando el usuario haga clic en un botón. Además, también podemos recibir información sobre la longitud de la string del usuario. En el lado del cliente, representará esas strings una vez generadas utilizando el concepto del Modelo de objetos del documento (DOM).
Enfoque: para generar strings aleatorias en Javascript, podemos usar métodos integrados que realmente generarán las strings y pueden manipular el modelo de objetos de documento (DOM) en consecuencia. Usaremos la biblioteca Math para acceder a la función random() que ayudará al conjunto de caracteres añadidos a medida que se pasa.
Podemos generar la string aleatoria de 2 maneras, es decir, podemos iterar el bucle por la longitud especificada del juego de caracteres o podemos usar el método String.fromCharCode() que convertirá los códigos UTF-16 en sus caracteres equivalentes y devolverá la cuerda. Al usar el segundo enfoque, podemos tomar manualmente la entrada de la longitud de la string del usuario y luego generar la string de esa longitud en particular accediendo a los elementos DOM. Para ambos enfoques, usaremos la función Math.random().
Generación de strings aleatorias: aquí, generaremos strings solo con caracteres en letras minúsculas. Comencemos discutiendo los dos enfoques diferentes para generar las strings.
Enfoque 1: generar la string aleatoria a partir de la longitud especificada del juego de caracteres:
- Declare el conjunto de caracteres que se usará para generar la string.
- Acceda a la longitud de ese conjunto de caracteres desde la entrada.
- Construya el bucle de iteración para la generación aleatoria de caracteres.
- Use funciones matemáticas en javascript y asígnelas a la variable.
Utilizaremos los conceptos anteriores y generaremos las strings aleatoriamente de longitud definida por el usuario usando Javascript y manipulación DOM.
Definición del juego de caracteres: Hemos definido una variable “caracteres” que contendrá todos los caracteres que necesitemos. Usaremos otra variable «resultado» que se inicializa como una string vacía.
Acceder a la longitud de la string: después de esto, buscaremos la longitud de la string que necesitamos generar utilizando el método document.getElementById para acceder al elemento HTML o al campo de entrada del usuario que contiene la longitud.
length = document.getElementById("strlength").value;
Por lo tanto, hemos utilizado la identificación «strlength» que se declara dentro de la etiqueta HTML <input>. Podemos obtener el valor del elemento usando el atributo “.value” y luego asignarlo a una variable de “longitud” . Por lo tanto, ahora hemos obtenido la longitud de la string que se necesita para generar.
Generación de caracteres aleatorios: Usaremos un ciclo for para generar n (longitud) número de caracteres y agregarlos a la string. El ciclo se ejecutará desde 0 hasta la longitud -1 ya que el valor del índice comienza desde 0.
for ( let i = 0; i < length; i++ ) {
// Code
}
Ahora, usaremos la función Math.random() para generar un índice aleatorio en la string. Antes de eso, necesitamos obtener la longitud de la string de «caracteres» y almacenarla en una variable constante «longitud de caracteres». Esto nos dará la longitud de la string «charactersLength «, que es 26. Ahora, usando la función charAt() que devolverá el carácter en un índice específico en una string y podemos obtener el número aleatorio.
La función Math.random() dará el valor entre 0 y 1, es decir, valor decimal y debemos redondearlo para obtener un valor entero. Por lo tanto, usamos Math.floor para redondear el valor decimal. Multiplicaremos la función Math.random() con la variable longitud de caracteres para obtener el valor entero exacto. Por lo tanto, esto nos dará un número entero entre 0 y longitud de caracteres -1.
Math.floor(Math.random() * charactersLength)
La sintaxis anterior dará el número entero entre 0 y la longitud de los caracteres Longitud -1, ya que las strings en Javascript están indexadas en 0.
Por lo tanto, al usar el método characters.charAt() , podemos obtener el carácter en ese índice en particular. Finalmente lo agregamos a la string vacía «resultado» y al final del bucle, obtenemos una string con caracteres aleatorios.
Ejemplo: Este ejemplo describe la generación de números aleatorios para la longitud especificada del carácter.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String Generator</title>
</head>
<body>
<h2>Random String Generator</h2>
<h4 id="target"></h4>
<input id="strlength" type="number" value="5" min="1" max="100" />
<button id="gen" onClick="generate()">Generate</button>
<script>
function generate() {
let length = document.getElementById("strlength").value;
const characters = 'abcdefghijklmnopqrstuvwxyz';
let result = ' ';
const charactersLength = characters.length;
for(let i = 0; i < length; i++) {
result +=
characters.charAt(Math.floor(Math.random() * charactersLength));
}
document.getElementById("target").innerHTML = result
}
</script>
</body>
</html>
Producción:
Enfoque 2: Generar la string aleatoria usando la función String.fromCharCode():
- Obtenga la longitud de la string que se generará a partir de la entrada.
- Construya el bucle de iteración para la generación aleatoria de caracteres.
- Use las funciones String y Math para generar caracteres.
Podemos usar funciones integradas como la función String.fromCharCode() para generar un carácter aleatorio. El paso para declarar el conjunto de caracteres y acceder a su longitud será similar al primer enfoque, es decir, crearemos la variable de longitud para obtener la longitud de la entrada del usuario. Después de eso, creamos un «resultado» de string vacía para almacenar la string generada. Luego ejecutamos un ciclo for para iterar sobre la longitud de la string.
for ( let i = 0; i < length; i++ ) {
// Code
}
Ahora, usamos la función String.fromCharCode para generar caracteres uno por uno usando el bucle for. String.fromCharCode toma las unidades de código enteras o UTF-16 y proporciona la string equivalente. Aquí, estamos usando el número entero 97, es decir, el punto de partida de las letras minúsculas. Puede consultar la tabla UTF-16 para obtener el valor de las letras minúsculas. Entonces, si la ‘a’ minúscula es 97 en UTF-16, podemos agregar 26 al número para obtener la última letra ‘z’ como 122. Entonces, simplemente necesitamos generar 26 números aleatorios y sumarlos a 97.
Podemos usar la función Math.random() que devuelve un valor entre 0 y 1 y para obtener el valor entero necesitamos la función floor() para obtener el valor entero exacto y, por lo tanto, usamos Math.floor() . Pero esto solo nos dará 0, cada vez que necesitemos multiplicar el número Math.random() con 26 para obtener el resultado deseado.
97 + Math.floor(Math.random() * 26)
Esto le dará el valor entre 97 y 122, es decir, ‘a’ a ‘z’. Por lo tanto, encerrándolos en la función String.fromCharCode() para obtener la string real.
Mostrar las strings generadas: hemos mostrado la string usando la propiedad innerHTML y accediendo al elemento HTML usando su valor de identificación. Por lo tanto, use el método «document.getElementById» para obtener el elemento h4 con el id «objetivo» del código HTML y luego acceda al valor HTML usando «.innerHTML». Asignamos ese valor a la string «resultado», que es la string generada aleatoriamente. Esto mostrará la string en la plantilla HTML.
document.getElementById("target").innerHTML = result;
Ejemplo: este ejemplo describe la generación de números aleatorios mediante la función String.fromCharCode().
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String Generator</title>
</head>
<body>
<h2>Random String Generator</h2>
<h4 id="target"></h4>
<input id="strlength" type="number" value="5" min="1" max="100" />
<button id="gen" onClick="generate()">Generate</button>
<script>
function generate() {
let length = document.getElementById("strlength").value;
let result = ' ';
for(let i = 0; i < length; i++) {
result +=
String.fromCharCode(97 + Math.floor(Math.random() * 26));
}
document.getElementById("target").innerHTML = result
}
</script>
</body>
</html>
Producción:
