Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] ¿Cómo no repetir funciones a lo baboso?

Estas en el tema de ¿Cómo no repetir funciones a lo baboso? en el foro de Javascript en Foros del Web. Buen día. Tengo el siguiente HTML: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < div id = "links" >     < div >     ...
  #1 (permalink)  
Antiguo 14/04/2013, 13:45
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 2 meses
Puntos: 22
Sonrisa ¿Cómo no repetir funciones a lo baboso?

Buen día.
Tengo el siguiente HTML:
Código HTML:
Ver original
  1. <div id="links">
  2.     <div>
  3.       <a href="#" id="a"></a>
  4.     </div>
  5.     <div>
  6.       <a href="#" id="b" onclick="abrirVideoA()"></a>
  7.     </div>
  8.     <div>
  9.       <a href="#" id="c"></a>
  10.     </div>
  11.   </div>
  12. ...

Lo que quiero hacer es que al dar clic a cada link se abra una nueva ventana con un video distinto. Puedo hacer una función que abra una ventana que contenga un video específico:
Código Javascript:
Ver original
  1. function abrirVideoA()
  2.     {
  3.         var ventana = window.open("", "Nueva ventana", "width=660, height=380, scrollbars=no");
  4.         ventana.document.write("<head><title>Video</title></head><body>");
  5.         ventana.document.write("<video src="videoA.ogv" controls></video>");
  6.         ventana.document.write("</body>");
  7.     }

Puedo repetir esta misma función (sólo cambiando el nombre de la función y del video) tantas veces como videos haya que mostrar en mi galería, y llamar cada una de estas funciones desde el link con el evento onclick(). Pero si meto 15 videos, esto acarrearía mucho código. ¿Cómo hacer para no repetir funciones a lo baboso? Algo como lo siguiente:
Código Javascript:
Ver original
  1. function abrirVideo(video)
  2.     {
  3.         var ventana = window.open("", "Nueva ventana", "width=660, height=380, scrollbars=no");
  4.         ventana.document.write("<head><title>Video</title></head><body>");
  5.         ventana.document.write(video);
  6.         ventana.document.write("</body>");
  7.     }
En donde video sería una variable que contuviera cada vez el el HTML para mostrar un video específico. Es decir, que al dar clic al link A, la variable video contuviera:
Código HTML:
Ver original
  1. <video src="videoA.ogv" controls></video>
y que al dar clic al link B, contuviera:
Código HTML:
Ver original
  1. <video src="videoB.ogv" controls></video>
etc.
Se me ocurre que el ID de cada link tuviera este HTML, pero no sé muy bien cómo la función javascript lo recogería dentro de una variable.
Gracias.

Última edición por berkeleyPunk; 14/04/2013 a las 13:51
  #2 (permalink)  
Antiguo 14/04/2013, 14:23
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 14 años
Puntos: 155
Respuesta: ¿Cómo no repetir funciones a lo baboso?

...pues una forma facil y muy rapida es usando jQuery...

el XHTML

Código HTML:
Ver original
  1. <div>
  2. <a href="" id="A" >Video A</a>
  3. </div>
  4. <div>
  5. <a href="" id="B" >Video B</a>
  6. </div>
  7. <div>
  8. <a href="" id="C" >Video C</a>
  9. </div>
  10. <div>
  11. <a href="" id="D" >Video D</a>
  12. </div>
  13. <div>
  14. <a href="" id="E" >Video E</a>
  15. </div>
  16. <div>
  17. <a href="" id="F" >Video F</a>
  18. </div>
  19. <div>
  20. <a href="" id="G" >Video G</a>
  21. </div>

el Javascript

Código Javascript:
Ver original
  1. $("#links  div a").click(function(){
  2.     var ventana = window.open("", "Nueva ventana", "width=660, height=380, scrollbars=no");
  3.     ventana.document.write("<head><title>Video</title></head><body>");
  4.     ventana.document.write('<video src="video' + this.id + '.ogv" controls></video>');
  5.     ventana.document.write("</body>");
  6.     return false;
  7. });
  #3 (permalink)  
Antiguo 05/05/2013, 16:14
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 2 meses
Puntos: 22
De acuerdo Respuesta: ¿Cómo no repetir funciones a lo baboso?

Gracias ipraetoriux, pero ya tengo suficiente con las broncas entre Javascript y PHP como para meterme a estudiar jQuery. Aunque entiendo que éste hace más fácil javascript, primero quiero pelearme un poco más con javascript antes de apoyarme en una biblioteca como jQuery.

Para quien visie este post, solucioné mi problema así:
Código Javascript:
Ver original
  1. function abrirVideo(nameDelVinculo, titleDelVinculo)
  2.     {
  3.         if ( titleDelVinculo != "restringido" )
  4.         {
  5.             var ventana = window.open("", "popUp1", "width=660, height=500");
  6.             ventana.document.write('<head><title>Video gratuito (demo)</title>');
  7.             ventana.document.write('<link type="text/css" href="/Joomla/images/docs/estilos.css" rel="stylesheet" />');
  8.             ventana.document.write('</head>');
  9.             ventana.document.write('<body">');
  10.             ventana.document.write('<video src="images/video/video' + nameDelVinculo + '.ogv" controls></video>');
  11.             ventana.document.write('</body>');
  12.         }
  13.         else
  14.         {
  15.             var ventana = window.open("", "popUp2", "width=660, height=500");
  16.             ventana.document.write('<head><title>Video restringido</title>');
  17.             ventana.document.write('<link type="text/css" href="/Joomla/images/docs/estilos.css" rel="stylesheet" />');
  18.             ventana.document.write('</head>');
  19.             ventana.document.write('<body>');
  20.             ventana.document.write('<div id="contenedor"><div id="contenedorForm">');
  21.             ventana.document.write('<form action="images/docs/validarUsuario.php" method="post">');
  22.             ventana.document.write('Usuario<br /><input type="text" name="usuario" /><br /><br />');
  23.             ventana.document.write('Contraseña<br /><input type="password" name="contrasena" /><br /><br /><br />');
  24.             ventana.document.write('<input type="text" name="linkClicleado" value="' + nameDelVinculo + '" class="invisible" />');
  25.             ventana.document.write('<input type="submit" value="Entrar" />');
  26.             ventana.document.write('</form></div>');
  27.             ventana.document.write('<div id="divCandado"><img src="images/img/candado1.png" id="imgCandado" /></div>');
  28.             ventana.document.write('</div>');
  29.             ventana.document.write("</body>");
  30.         }
  31.     }



y
Código HTML:
Ver original
  1. <div id="contenedorImagenes">
  2.     <div class="cuadro floatLeft">
  3.       <a href="#n" id="imgSocial1" name="A" class="link" title="restringido" onclick="abrirVideo(this.name, this.title)"></a>
  4.     </div>
  5.     <div class="cuadro floatLeft">
  6.       <a href="#n" id="imgSocial2" name="B" class="link" onclick="abrirVideo(this.name, this.title)"></a>
  7.     </div>
  8.     <div class="cuadro floatLeft">
  9.       <a href="#n" id="imgSocial3" name="C" class="link" title="restringido" onclick="abrirVideo(this.name, this.title)"></a>
  10.     </div>
  11.     <div class="cuadro floatLeft">
  12.       <a href="#n" id="imgSocial4" name="D" class="link" title="restringido" onclick="abrirVideo(this.name, this.title)"></a>
  13.     </div>
  14.   </div>

Explico los puntos que creo pueden resultar confusos para quien, igual que yo hace unas semanas, se inicie con funciones que hagan uso de argumentos.

1. nameDelVinculo y titleDelVinculo son variables que van a guardar respectivamente los valores de las propiedades NAME y TITLE de los links. ¿Cómo? Cuando se da clic a un link, o sea cuando se activa el evento ONCLICK, se llama la función abrirVideo(this.name, this.title). Pero aquí en el nombre de la función, se quitan los argumentos nameDelVinculo y titleDelVinculo y se ponen respectivamente las instrucciones this.name y this.title. Así, cuando la función se ejecute, la variable nameDelVinculo contendrá el valor de la propiedad name de ese link en específico, por eso se pone this.name, que significa este.name. Más claro aún, la variable nameDelVinculo hace referencia a this.name del link clicleado, y la variable titleDelVinculo hace referencia a this.title. Pero hay que poner this.name y this.title en el orden en el que están los argumentos en la función, para que nameDelVinculo y titleDelVinculo correspondan con this.name y this.title.

2. ¿Y para qué demonios esta función guarda el valor de la propiedad name y title del link clicleado? Veamos, si el link clicleado NO tiene como title el valor "restringido", entonces se abre una nueva ventana y con un video. ¿cuál video? el video llamado videoA.ogv o videoB.ogv o videoC.ogv o el que corresponda según el link clicleado. Si se clicleó el link con name "B", entonces el video a mostrar será el videoB.ogv.

3. Para qué la siguiente línea:
Código Javascript:
Ver original
  1. ventana.document.write('<input type="text" name="linkClicleado" value="' + nameDelVinculo + '" class="invisible" >');
Pongo este input para guardar allí el valor del name del link clicleado, con el fin de enviarlo con el método POST a una página PHP que se encargará de leer este input mediante $_POST, y así PHP primero validará al usuario y contraseña de quien quiere ver el video B, por ejemplo, y si se valida correctamente, entonces PHP ejecuta el código Javascript necesario que abre una ventana y muestra el video B.
Ésta es la forma que encontré para que una variable PHP guarde el valor de una variable Javascript. (Hacer esto me costó varios días de búsqueda y frustración. Aunque mirado en retrospectiva, esta solución es tan de sentido común que resulta difícil no decirse a uno mismo "Pero si era tan fácil, estúpido!")



4. Una última cosa: al parecer hay necesidad de escapar todas las comillas y diagonales del código que se meta dentro de los document.write. Trabajando en local me lo exige el browser, si no, no funciona. Y pasa al revés trabajando en línea, ¿por qué? No sé.

Etiquetas: html+javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:47.