elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía actualizada para evitar que un ransomware ataque tu empresa


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Duda funcion javascript
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Duda funcion javascript  (Leído 2,805 veces)
rubcr

Desconectado Desconectado

Mensajes: 51


Ver Perfil
Duda funcion javascript
« en: 28 Mayo 2020, 18:07 pm »

Hola a todos, tengo una duda con una función de javascript que debe añadir a una lista dos elementos string con letras y números aleatorios, tengo la función que añade los dos elementos funcionando bien pero no se como hacer que genere los strings de forma aleatoria, adjunto el código:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
         function addInfo() {
              var elemento = document.createElement("li");
  var texto = document.createTextNode("Elemento1");
  elemento.appendChild(texto);

  var lista = document.getElementById("lista");
  lista.appendChild(elemento);

  var nuevoElemento = "<li>Elemento2</li>";
  lista.innerHTML = lista.innerHTML + nuevoElemento;
         }
      </script>
   </head>
   <body>
      <ul id="lista">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetuer adipiscing elit</li>
      <li>Sed mattis enim vitae orci</li>
      <li>Phasellus libero</li>
      <li>Maecenas nisl arcu</li>
      </ul>
      <input type="button" value="Añadir elemento" onclick="addInfo();">
</body>
</html>

Espero que alguien pueda ayudarme, un saludo.


En línea

EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.156



Ver Perfil
Re: Duda funcion javascript
« Respuesta #1 en: 28 Mayo 2020, 23:12 pm »

Saludos,

- Lo siguiente me funciona a mí según e entendido tu enunciado:

Código
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8">
  5.  <script>
  6.    var charSet = "ABCDEFGHIJKLMNÑOPQRSTUVWXYZabcdefghijklmnñopqrstuvwxyz0123456789"
  7.  
  8.    function addInfo() {
  9.      var lista = document.getElementById("lista")
  10.      // Tamaño del String aleatorio es entre 3 a 10 caracteres
  11.      lista.innerHTML += "<li>" + genStringAleatorio(numAleatorio(3, 10)) + "</li>"
  12.    }
  13.    function genStringAleatorio(tam) {
  14.      var stringAleatorio = ""
  15.      for (var i = 0; i < tam; i++) {
  16.        // Se va extrayendo un caracter aleatorio desde el charSet
  17.        stringAleatorio += charSet[numAleatorio(0, charSet.length - 1)]
  18.      }
  19.      return stringAleatorio
  20.    }
  21.    function numAleatorio(min, max) {
  22.      // Genera un número aleatorio entre min y max incluyéndolos
  23.      return Math.floor( Math.random() * (max + 1 - min) ) + min
  24.    }
  25.  </script>
  26. </head>
  27. <body>
  28.  <ul id="lista">
  29.    <li>Lorem ipsum dolor sit amet</li>
  30.    <li>Consectetuer adipiscing elit</li>
  31.    <li>Sed mattis enim vitae orci</li>
  32.    <li>Phasellus libero</li>
  33.    <li>Maecenas nisl arcu</li>
  34.  </ul>
  35.  <input type="button" value="Añadir elemento" onclick="addInfo()">
  36. </body>
  37. </html>

- HTML5 es soportado completamente en la actualidad, mejor usar esa sintáxis. Con respecto al javascript yo prefiero seguir utilizando la sintáxis clásica, al menos por este año más XD.

- Dependiendo de la complejidad de los elementos a crear suele ser mejor utilizar innerHTML para cosas muy sencillas, luego createElement() para cosas algo más complejas y documentFragment para crear elementos complejos con muchos sub-elementos como formularios o árboles de elementos.


« Última modificación: 28 Mayo 2020, 23:45 pm por EdePC » En línea

rubcr

Desconectado Desconectado

Mensajes: 51


Ver Perfil
Re: Duda funcion javascript
« Respuesta #2 en: 29 Mayo 2020, 11:23 am »

Saludos,

- Lo siguiente me funciona a mí según e entendido tu enunciado:

Código
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8">
  5.  <script>
  6.    var charSet = "ABCDEFGHIJKLMNÑOPQRSTUVWXYZabcdefghijklmnñopqrstuvwxyz0123456789"
  7.  
  8.    function addInfo() {
  9.      var lista = document.getElementById("lista")
  10.      // Tamaño del String aleatorio es entre 3 a 10 caracteres
  11.      lista.innerHTML += "<li>" + genStringAleatorio(numAleatorio(3, 10)) + "</li>"
  12.    }
  13.    function genStringAleatorio(tam) {
  14.      var stringAleatorio = ""
  15.      for (var i = 0; i < tam; i++) {
  16.        // Se va extrayendo un caracter aleatorio desde el charSet
  17.        stringAleatorio += charSet[numAleatorio(0, charSet.length - 1)]
  18.      }
  19.      return stringAleatorio
  20.    }
  21.    function numAleatorio(min, max) {
  22.      // Genera un número aleatorio entre min y max incluyéndolos
  23.      return Math.floor( Math.random() * (max + 1 - min) ) + min
  24.    }
  25.  </script>
  26. </head>
  27. <body>
  28.  <ul id="lista">
  29.    <li>Lorem ipsum dolor sit amet</li>
  30.    <li>Consectetuer adipiscing elit</li>
  31.    <li>Sed mattis enim vitae orci</li>
  32.    <li>Phasellus libero</li>
  33.    <li>Maecenas nisl arcu</li>
  34.  </ul>
  35.  <input type="button" value="Añadir elemento" onclick="addInfo()">
  36. </body>
  37. </html>

- HTML5 es soportado completamente en la actualidad, mejor usar esa sintáxis. Con respecto al javascript yo prefiero seguir utilizando la sintáxis clásica, al menos por este año más XD.

- Dependiendo de la complejidad de los elementos a crear suele ser mejor utilizar innerHTML para cosas muy sencillas, luego createElement() para cosas algo más complejas y documentFragment para crear elementos complejos con muchos sub-elementos como formularios o árboles de elementos.
De acuerdo.
y tengo otra cuestión, tengo un programa que realiza varias cosas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 11 - DOM básico</title>

<script type="text/javascript">
window.onload = function() {
  var info = document.getElementById("informacion");

  // Numero de enlaces de la pagina
  var enlaces = document.getElementsByTagName("a");
  info.innerHTML = "Numero de enlaces = "+enlaces.length;

  // Direccion del penultimo enlace
  var mensaje = "El penultimo enlace apunta a: "+enlaces[enlaces.length-2].href;
  info.innerHTML = info.innerHTML + "<br/>" + mensaje;

  // Numero de enlaces que apuntan a http://prueba
  var contador = 0;
  for(var i=0; i<enlaces.length; i++) {
    // Es necesario comprobar los enlaces http://prueba y
    // http://prueba/ por las diferencias entre navegadores
    if(enlaces.href == "http://prueba" || enlaces.href == "http://prueba/") {
      contador++;
    }
  }
  info.innerHTML = info.innerHTML + "<br/>" + contador + " enlaces apuntan a http://prueba"

  // Numero de enlaces del tercer párrafo
  var parrafos = document.getElementsByTagName("p");
  enlaces = parrafos[2].getElementsByTagName("a");
  info.innerHTML = info.innerHTML + "<br/>" + "Numero de enlaces del tercer párrafo = "+enlaces.length;
}
</script>
</head>

<body>
<div id="informacion" style="border:thin solid silver; padding:.5em"></div>
<p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing elit</a>. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer lacus. Vestibulum venenatis erat eu odio. Praesent id metus.</p>

<p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin consequat auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>. Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum nulla vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum. Etiam <a href="http://prueba3">consequat sem quis massa</a>. Donec aliquam euismod diam. In magna massa, mattis id, pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed tellus.</p>

<p>Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet imperdiet suscipit, nunc erat laoreet est, a <a href="http://prueba">aliquam leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique. Ut dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In sem. Cras id augue eu lorem dictum interdum. Donec pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula. Duis iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit, eros quis malesuada tristique, ipsum odio euismod tortor, a vestibulum nisl mi at odio. <a href="http://prueba5">Sed non lectus non est pellentesque</a> auctor.</p>
</body>
</html>

Necesito que también otra acción en el script que cuente en el texto todas las palabras que acaben en j. Como se puede hacer?
En línea

.:Xx4NG3LxX:.

Desconectado Desconectado

Mensajes: 203



Ver Perfil WWW
Re: Duda funcion javascript
« Respuesta #3 en: 30 Mayo 2020, 07:23 am »

Coloca los códigos entre etiquetas de código:

[ code=HTML ]El código[ /code ]

Sin espacios entre los corchetes [ ]

Es mucho mejor a la vista, y es más ordenado.
En línea

"Quizá Batch no sea un lenguaje de programación, pero no obstante deja de ser útil. Asi que no anden diciendo «Que ganas de perder el tiempo»"
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
funcion javascript
Desarrollo Web
qiqeroot 2 2,487 Último mensaje 5 Diciembre 2010, 19:11 pm
por Nakp
=javascript= Duda sobre funcion substring (subStr) (SOLUCIONADO)
Java
CloudswX 3 7,975 Último mensaje 28 Abril 2011, 15:44 pm
por Debci
[javascript] llamar a funcion que se recibe por parametro de la funcion
Desarrollo Web
Graphixx 0 5,999 Último mensaje 24 Abril 2012, 19:36 pm
por Graphixx
Duda con una funcion en javascript
Desarrollo Web
palacio29 2 2,463 Último mensaje 30 Mayo 2020, 16:01 pm
por palacio29
[Duda] Parámetros de una función javascript
Desarrollo Web
MA40 3 2,630 Último mensaje 5 Julio 2021, 20:05 pm
por Danielㅤ
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines