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


 


Tema destacado: Sigue las noticias más importantes de seguridad informática en el ttwitter! de elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [HTML][JS] Optimizar codigo: asignar value a <option> a partir de innerText
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: [HTML][JS] Optimizar codigo: asignar value a <option> a partir de innerText  (Leído 521 veces)
.:Xx4NG3LxX:.

Desconectado Desconectado

Mensajes: 193


¿Aún no estás registrad@? ¿Qué esperas?


Ver Perfil WWW
[HTML][JS] Optimizar codigo: asignar value a <option> a partir de innerText
« en: 20 Septiembre 2020, 23:05 »

Saludos,

HTML:

Código
  1. <select id="country">
  2.  <option id="empty" value="" selected>--- País ---</option>
  3.  <option value="">Venezuela</option>
  4.  <option value="">Argentina</option>
  5. </select>

javascript:

Código
  1. document.addEventListener('DOMContentLoaded', () => {
  2.  // Colocar el valor correspondiente a cada opción del selector de países.
  3.  var options = document.getElementsByTagName("option"); // Obtengo todos los elementos "option".
  4.  for (var i = 0; i < options.length; i++) {  // Bucle para hacer referencia a cada elemento individualmente.
  5.    options[i].value = options[i].innerText;  // Se traduce a: El valor de cada opción (options[i].value), será igual al texto que lleve dentro (options[i].innerText).
  6.  }
  7.  document.getElementById("empty").value = "";  // Exeptuamos la opción por defecto.
  8. });

¿Está bien?
¿Hay otra forma más fácil?

Gracias por sus comentarios...


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»"


Drakaris

Desconectado Desconectado

Mensajes: 221


Todo lo que puedas imaginar, lo puedes crear.


Ver Perfil
Re: [HTML][JS] Optimizar codigo: asignar value a <option> a partir de innerText
« Respuesta #1 en: 21 Septiembre 2020, 00:45 »

La logíca de este código lo veo bién. Obtienes todas las etiquetas options y con ello haces un bucle, pasando por cada etiqueta y añades al atributo value el texto del option. Y el id empty añades un valor vacio.

Para mí que no hay otra forma.


En línea

.:Xx4NG3LxX:.

Desconectado Desconectado

Mensajes: 193


¿Aún no estás registrad@? ¿Qué esperas?


Ver Perfil WWW
Re: [HTML][JS] Optimizar codigo: asignar value a <option> a partir de innerText
« Respuesta #2 en: 21 Septiembre 2020, 01:20 »

Muchas gracias! Alguien más?

La verdad yo también lo veo bien...
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»"


@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Conectado Conectado

Mensajes: 2.136


Turn off the red ligth


Ver Perfil WWW
Re: [HTML][JS] Optimizar codigo: asignar value a <option> a partir de innerText
« Respuesta #3 en: 21 Septiembre 2020, 01:51 »

En realidad si que puedes optimizarlo. En este caso da un poco igual, pero en otros es mejor que crees las etiquetas de javascript.

El motivo es que estás actualizando el documento 3 veces. En caso de que el documento necesitase renderizar mucha historia lo mejor sería utilizar un documentFragment https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

Por otro lado, estás haciendo 2 operaciones innecesarias, actualizar el value del primer elemento y después eliminarlo.

Solución super sencilla, inicializa el iterador con 1 para no acceder al índice 0 del array. (Dando por echo que el por defecto va a ser el primer elemento del array). Tambien podrías hacer un splice al array para quitarle el primer elemento.
Código
  1. for (var i = 1; i < options.length; i++) {
  2.    options[i].value = options[i].innerText
  3. }

Así ya no necesitas. document.getElementById("empty").value = "";

Si añades el código de javascript justo antes de la etiqueta body, entonces también puedes prescindir totalmente del addEventListener.

Otra cosa que está bien saber es que por cada iteración se calcula la condición. Es decir, se está obteniendo el .length cada iteración. Sabes que el tamaño es constante asique podrías usar un valor fijo para evitar calcular el tamaño del string en cada iteración. En este caso concreto es hasta contraproductivo, pero lo comento porque se te puede dar el caso que metas una condición de bastante costo computacional que es mejor que precalcules y metas en una variable. Puedes usar el propio espacio destinado para la inicialización o asignación del bucle for clásico, así se elemina de memoria al concluir el bucle.

Ej:
Código
  1. for (var i = 1, s = options.length; i < s; ++i) {  
  2.    options[i].value = options[i].innerText;
  3. }




En línea

EdePC
Colaborador
***
Desconectado Desconectado

Mensajes: 1.331



Ver Perfil
Re: [HTML][JS] Optimizar codigo: asignar value a <option> a partir de innerText
« Respuesta #4 en: 21 Septiembre 2020, 01:56 »

Yo solo mencionaría que cuando un <option> no tiene un value definido explícitamente, su value pasa a ser su innerText, osea el código equivalente sería:

Código
  1. <select id="country">
  2.  <option value="" selected>--- País ---</option>
  3.  <option>Venezuela</option>
  4.  <option>Argentina</option>

- Claro que dependerá de ti el ser o no explícito.
En línea

WHK
CoAdmin
***
Desconectado Desconectado

Mensajes: 6.323


The Hacktivism is not a crime


Ver Perfil WWW
Re: [HTML][JS] Optimizar codigo: asignar value a <option> a partir de innerText
« Respuesta #5 en: 21 Septiembre 2020, 02:28 »

Hola, yo creo que el código no pinta mal pero tambien lo veo como una mala práctica debido a que el valor debe interpretarse del lado del servidor para saber que opciones etsá guardando el usuario y ¿que sucede si quieres hacer que tu sitio web funcione en distintos idiomas?, tendrás valores en español, ingles, frances y quien sabe que otros lenguajes. Si guardas el texto en la base de datos entonces tendrás problemas para separar los tipos de contenido, hacer búsquedas, filtrar datos o mostrar valores cuando el usuario cambie de idioma, ya que los selectores pasarán a tener valores distintos según cada idioma.

Mejor te recomiendo utilizar valores estáticos para cada texto a mostrar de manera totalmente independiente y tener en cuenta que cuando el usuario vargue un formulario con valores guardados anteriormente tendrás que utilizar la propiedad "selected" para seleciconar el valor por defecto independientemente del idioma o texto que se esté utilizando.

Si el día de mañana quieres utilizar una app movil y quieres disponibilizar tu app con algún servicio REST tendrás que utilizar identificadores de valores y no el texto original ya que la app movil puede tener sus propios textos de traducciones independientes a la aplicación web o utilizar diferentes tipos de filtros y manejos de la información de manera interna.

De todas maneras, con jQuery puedes hacerlo masivamente:

Código:
$('option').each(function(){ $(this).val($(this).text()) });

Saludos.
En línea

Telegram: @WHK102 - Semáforo Epidemiologico Chile
.:Xx4NG3LxX:.

Desconectado Desconectado

Mensajes: 193


¿Aún no estás registrad@? ¿Qué esperas?


Ver Perfil WWW
Re: [HTML][JS] Optimizar codigo: asignar value a <option> a partir de innerText
« Respuesta #6 en: 21 Septiembre 2020, 02:58 »

Gracias a todos, cualquier comentario más se agradece. Modifique los códigos un poco, aplicando los cambios sugeridos por @XSStringManolo. Esta bien así? O aún falta optimizarlo?

HTML:

Código
  1. <select id="country">
  2.  <option selected>--- País ---</option>
  3.  <option value="">Venezuela</option>
  4.  <option value="">Argentina</option>
  5. </select>
  6.  

javascript:

Código
  1. // Colocar el valor correspondiente a cada opción del selector de países.
  2. var options = document.getElementsByTagName("option"); // Obtengo todos los elementos "option".
  3. for (var i = 1, s = options.length; i < s; i++) {  // Bucle para hacer referencia a cada elemento individualmente, exceptuando al primero.
  4.  options[i].value = options[i].innerText;  // Se traduce a: El valor de cada opción (options[i].value), será igual al texto que lleve dentro (options[i].innerText).
  5. }
  6.  

Muchas gracias a @EdePC y a @WHK, pero sólo es una prueba para mi propio aprendizaje... MUCHAS GRACIAS!!! :D
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»"


#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.538



Ver Perfil WWW
Re: [HTML][JS] Optimizar codigo: asignar value a <option> a partir de innerText
« Respuesta #7 en: 21 Septiembre 2020, 13:22 »

Estoy de acuerdo con WHK, estás condicionando tu aplicación al idioma del frontend.

Generalmente cuando tienes un desplegable de países, lo que se suele hacer es que el option tenga de texto el nombre del país y de value el código ISO 3166-1 del país ya sea en alpha2 o alpha3.

https://es.wikipedia.org/wiki/ISO_3166-1

Código
  1. <select id="country">
  2.  <option selected>--- País ---</option>
  3.  <option value="ve">Venezuela</option>
  4.  <option value="ar">Argentina</option>
  5. </select>

Por otro lado, con ese selector, vas a cambiar a TODOS los options de TODA la página. Igual en un futuro añades un select donde los options si tengan value diferente al innerText y la jodes. Recuerda que options es una coleción del select.

Código
  1. var options = document.getElementById("country").options;
  2. for (var i = 0; i < options.length; ++i) {
  3.    options[i].value = options[i].innerText;
  4. }

Y por último, le has dado un ID "empty" al primer option. Recuerda que un ID solo se puede asignar una vez. En el próximo select tendrás que usar otra cosa que no sea empty como ID. Como alternativa puedes usar una clase o un data attribute (data-).

Saludos
En línea

.:Xx4NG3LxX:.

Desconectado Desconectado

Mensajes: 193


¿Aún no estás registrad@? ¿Qué esperas?


Ver Perfil WWW
Re: [HTML][JS] Optimizar codigo: asignar value a <option> a partir de innerText
« Respuesta #8 en: 21 Septiembre 2020, 19:54 »

Muchas gracias por sus opiniones... Veré que hago... Something more?
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»"


@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Conectado Conectado

Mensajes: 2.136


Turn off the red ligth


Ver Perfil WWW
Re: [HTML][JS] Optimizar codigo: asignar value a <option> a partir de innerText
« Respuesta #9 en: 21 Septiembre 2020, 20:25 »

Muchas gracias por sus opiniones... Veré que hago... Something more?
Sigue dándole. Te recomiendo el libro Eloquent javascript y que te leas todo lo que hay en esta pregunta; respuestas, comentarios, links... Y lo entiendas: https://codegolf.stackexchange.com/questions/2682/tips-for-golfing-in-javascript . Te ayudará a conocer el funcionamiento del lenguaje, algún truquito y más cosas. Hay uno igual para ES6.
En línea

Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Mostrar codigo fuente escondido por HTML Protector, HTML Guardian, Altrise, etc.
Desarrollo Web
sirdarckcat 1 11,897 Último mensaje 10 Enero 2012, 09:40
por gm-vl
que es mejor, escribir codigo html desde un echo o html solo
Desarrollo Web
morenochico 1 3,207 Último mensaje 14 Febrero 2011, 19:10
por ~ Yoya ~
Optimizar Codigo
PHP
FFFenix 0 758 Último mensaje 9 Septiembre 2011, 03:18
por FFFenix
¿Optimizar código?
ASM
paulagarcum 2 1,210 Último mensaje 4 Abril 2013, 13:46
por paulagarcum
Optimizar un codigo
Programación C/C++
arcanaer 0 763 Último mensaje 23 Noviembre 2016, 04:16
por arcanaer
Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines