Foros del Web » Programando para Internet » Javascript »

Manejo de funciones semanticas

Estas en el tema de Manejo de funciones semanticas en el foro de Javascript en Foros del Web. Hola. La consulta q quiero hacer es simple. Una forma de separar el codigo dinamico del html es usando funciones semanticas, de este tipo: @import ...
  #1 (permalink)  
Antiguo 28/01/2010, 00:36
Avatar de Fernarey1810  
Fecha de Ingreso: noviembre-2008
Mensajes: 214
Antigüedad: 16 años
Puntos: 1
Pregunta Manejo de funciones semanticas

Hola. La consulta q quiero hacer es simple. Una forma de separar el codigo dinamico del html es usando funciones semanticas, de este tipo:
Código Javascript:
Ver original
  1. // Función externa
  2. function muestraMensaje() {
  3. alert('Gracias por pinchar');
  4. }
  5. // Asignar la función externa al elemento
  6. document.getElementById("pinchable").onclick = muestraMensaje;
  7. // Elemento XHTML
  8. <input id="pinchable" type="button" value="Pinchame y verás" />

Este ejemplo funciona bien, pero el problema lo tengo al querer pasarle parametros a la funcion, de esta forma:

Código Javascript:
Ver original
  1. document.getElementById("nombre").onFocus = muestraOculta(1,'nombre');

Esto no funciona, porque ejecuta una función y guarda su resultado en una propiedad de un elemento. Y lo q yo quiero hacer es asignar una función externa a un evento de un elemento. Como resuelvo esto?.
  #2 (permalink)  
Antiguo 28/01/2010, 00:49
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: Manejo de funciones semanticas

Hola:

Prueba así:

document.getElementById("nombre").onfocus = function(a, b) {muestraOculta(1,'nombre');}

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 28/01/2010, 09:24
Avatar de Fernarey1810  
Fecha de Ingreso: noviembre-2008
Mensajes: 214
Antigüedad: 16 años
Puntos: 1
Pregunta Respuesta: Manejo de funciones semanticas

1- No me funciona che.
document.getElementById("nombre") is null. Este es el error q me tira

2- function(a,b) otra cosa porque le pones estos parametros?
  #4 (permalink)  
Antiguo 28/01/2010, 11:39
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: Manejo de funciones semanticas

Hola:

Fíjate que en tu primer ejemplo usaste algo con id="pinchable"... luego usaste lo de nombre... el error que tienes es porque no hay nada con id="nombre"...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 28/01/2010, 12:10
Avatar de Fernarey1810  
Fecha de Ingreso: noviembre-2008
Mensajes: 214
Antigüedad: 16 años
Puntos: 1
Pregunta Respuesta: Manejo de funciones semanticas

Ese ejemplo caricatos lo copie de un tutorial.
Estoy usando bien el ID, y en mi pagina es 'nombre', no 'pinchable', eso era un ej nomas de lo que queria hacer.. Tenes idea entonces como lo resuelvo?

POR LAS DUDAS NO ME QUEDO CLARO LO Q PONES EN function (a, b), alomejor estoy poniendo mal estos parametros. nose porque pones esto exactamente, = no creo q sea por ello, pero por las dudas lo consulto.

Última edición por Fernarey1810; 28/01/2010 a las 12:16
  #6 (permalink)  
Antiguo 28/01/2010, 12:19
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Manejo de funciones semanticas

el principio basico es que tienes que crear una funcion anonima que invoca a tu funcion pasandole los parametros necesarios. eso es lo que caricatos te ha tratado de demostrar.
Código:
elemento.evento = function(){
invoca_funcion(parametro1, parametro2, ..., parametroN);
}
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #7 (permalink)  
Antiguo 28/01/2010, 12:49
Avatar de Fernarey1810  
Fecha de Ingreso: noviembre-2008
Mensajes: 214
Antigüedad: 16 años
Puntos: 1
Pregunta Respuesta: Manejo de funciones semanticas

Ya no tira mas el error que es nulo (is null), porque lo coloco dentro de
Código Javascript:
Ver original
  1. window.onload = function() {
  2.     document.getElementById("nombre").onFocus = function() { muestraOculta(1,'nombre'); }
  3. }

El problema es q ahora no anda XD. osea no se lanza el evento onFocus.
Este es el input q tengo

Código HTML:
Ver original
  1. <input type="text" id="nombre" name="idUsuario" value="<?php if (isset($_POST['idUsuario'])) echo htmlspecialchars($_POST['idUsuario']); ?>" onKeyPress="return permite(event,'num_car',15,'nombre')" onKeyUp="actualizaInfo(15, 1,'nombre')"
  2. onFocus="muestraOculta(1,'nombre');">

Como podras observar estoy quitando los eventos para q quede mas prolijo, eso lo hice asi en modo desarrollo nomas. Entonces cuando quito onFocus me queda asi:

Código HTML:
Ver original
  1. <input type="text" id="nombre" name="idUsuario" value="<?php if (isset($_POST['idUsuario'])) echo htmlspecialchars($_POST['idUsuario']); ?>" onKeyPress="return permite(event,'num_car',15,'nombre')" onKeyUp="actualizaInfo(15, 1,'nombre')">

Código Javascript:
Ver original
  1. window.onload = function() {
  2.     document.getElementById("nombre").onFocus = function() { muestraOculta(1,'nombre'); }
  3. }

Esta bien no???. Pero no anda. Q falla?
  #8 (permalink)  
Antiguo 28/01/2010, 14:26
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Manejo de funciones semanticas

javascript es sensible a las mayusculas y minusculas. en javascript, todos los eventos se escriben en minuscula. fijate que tu codigo aparece como onFocus. adicional, dependiendo del HTML que estes utilizando, los atributos tambien se escriben en minuscula aunque esto no supone un problema para el navegador pero igual no te valida el documento.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #9 (permalink)  
Antiguo 28/01/2010, 15:24
Avatar de Fernarey1810  
Fecha de Ingreso: noviembre-2008
Mensajes: 214
Antigüedad: 16 años
Puntos: 1
Pregunta Respuesta: Manejo de funciones semanticas

Ya lo solucione pasa q antes habia un onload. y yo lo ponia en otro.
Código Javascript:
Ver original
  1. window.onload = function() {
  2.         document.getElementById("nombre").onfocus = function() { muestraOculta(1,'nombre');
  3.          Calendar.setup({
  4.          inputField: "fecha",
  5.          ifFormat: "%d-%m-%Y",
  6.          button: "selector"
  7.     }); initListGroup('paises', document.forms[0].pais, document.forms[0].provincia, document.forms[0].ciudad, 'cs')};

Última edición por Fernarey1810; 28/01/2010 a las 15:31
  #10 (permalink)  
Antiguo 28/01/2010, 17:49
Avatar de Fernarey1810  
Fecha de Ingreso: noviembre-2008
Mensajes: 214
Antigüedad: 16 años
Puntos: 1
Pregunta Respuesta: Manejo de funciones semanticas

HOLA YO DE NUEVO. YA SOLUCIONE EL PROBLEMA. PERO AHORA NO ME ANDA ESTO.
Código Javascript:
Ver original
  1. document.getElementById("nombre").onkeypress = function() { permite(event,'num_car',15,'nombre'); }

Código HTML:
Ver original
  1. <input type="text" id="nombre" name="idUsuario" value="<?php if (isset($_POST['idUsuario'])) echo htmlspecialchars($_POST['idUsuario']); ?>">

Este es el input. Ahora LO Q FALLA ES event (Error: event is not defined). Yo tomo los datos de esa funcion asi

Código Javascript:
Ver original
  1. function permite(elEvento, permitidos, maxCaracter, nombreId) {
  2.     var elemento = document.getElementById(nombreId);            
  3.     .....
  4.     .....
  5.     .....
  6. }

Como hago para q pase EVENT???
  #11 (permalink)  
Antiguo 28/01/2010, 17:57
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Manejo de funciones semanticas

intentando creando un argumento con nombre event para la funcion anonima. es decir,
Código:
elemento.evento = function(event){
...
} 
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #12 (permalink)  
Antiguo 29/01/2010, 07:41
Avatar de Fernarey1810  
Fecha de Ingreso: noviembre-2008
Mensajes: 214
Antigüedad: 16 años
Puntos: 1
Pregunta Respuesta: Manejo de funciones semanticas

Pero es q hago eso fijate
Código Javascript:
Ver original
  1. document.getElementById("nombre").onkeypress = function() { permite(event,'num_car',15,'nombre'); }

AHI ESTA EVENT VES?.
  #13 (permalink)  
Antiguo 29/01/2010, 08:19
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 7 meses
Puntos: 839
Respuesta: Manejo de funciones semanticas

Pero debes pasarlo como parámetro a la función anónima, cosa que en tu código no estás haciendo. Aplica el ejemplo que te mostró zerokilled.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #14 (permalink)  
Antiguo 29/01/2010, 11:11
Avatar de Fernarey1810  
Fecha de Ingreso: noviembre-2008
Mensajes: 214
Antigüedad: 16 años
Puntos: 1
Respuesta: Manejo de funciones semanticas

Lo probe de estas 2 formas y no me funciona. tenes idea q puede ser?

Código Javascript:
Ver original
  1. document.getElementById("nombre").onkeypress = function(event) { permite('num_car',15,'nombre'); } 
  2. Error: elevento is null
function permite(elEvento, permitidos, maxCaracter, nombreId) {
var elemento = document.getElementById(nombreId);
}



De esta forma no me tira error, pero no funciona el codigo.

Código Javascript:
Ver original
  1. document.getElementById("nombre").onkeypress = function(event) { permite(event,'num_car',15,'nombre'); }
  #15 (permalink)  
Antiguo 29/01/2010, 11:31
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 7 meses
Puntos: 839
Respuesta: Manejo de funciones semanticas

De la segunda forma debería funcionar. ¿Cuál es el código completo de la función permite()?
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #16 (permalink)  
Antiguo 29/01/2010, 11:41
Avatar de Fernarey1810  
Fecha de Ingreso: noviembre-2008
Mensajes: 214
Antigüedad: 16 años
Puntos: 1
Respuesta: Manejo de funciones semanticas

Antes esta esto por las dudas q haga fallar algo.

Código Javascript:
Ver original
  1. window.onload = function() {
  2.     // Declaración de manejadores semánticos
  3.     // Funciones externas
  4.         document.getElementById("nombre").onfocus = function() { muestraOculta(1,'nombre'); }
  5.        
  6.     document.getElementById("nombre").onkeyup = function() { actualizaInfo(15, 1,'nombre'); }
  7.  
  8.         document.getElementById("nombre").onkeypress = function(event) { permite(event,'num_car',15,'nombre'); }           
  9.    
  10.     Calendar.setup({
  11.         inputField: "fecha",
  12.         ifFormat: "%d-%m-%Y",
  13.         button: "selector"
  14.     }); initListGroup('paises', document.forms[0].pais, document.forms[0].provincia, document.forms[0].ciudad, 'cs');
  15. }

Código Javascript:
Ver original
  1. function permite(elEvento, permitidos, maxCaracter, nombreId) {
  2.     var elemento = document.getElementById(nombreId);            
  3.     // Variables que definen los caracteres permitidos
  4.     var numeros = "0123456789";
  5.     var caracteres = " @abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ";
  6.     var numeros_caracteres = numeros + caracteres;
  7.     var teclas_especiales = [8, 9, 13, 35, 36, 37, 39, 46, 95];
  8.     // 8= Espacio, 46= Supr, 37= Flecha Izquierda, 39= Flecha Derecha 95= Guión bajo       
  9.     // Seleccionar los caracteres permitidos a partir del parámetro de la función
  10.     switch (permitidos) {
  11.         case 'num':
  12.             permitidos = numeros;
  13.             break;
  14.         case 'car':
  15.             permitidos = caracteres;
  16.             break;
  17.         case 'num_car':
  18.             permitidos = numeros_caracteres;
  19.             break;
  20.     }
  21.     // Obtener la tecla pulsada
  22.     var evento = elEvento || window.event;
  23.     var codigoCaracter = evento.charCode || evento.keyCode;
  24.     var caracter = String.fromCharCode(codigoCaracter);
  25.            
  26.     // Comprobar si la tecla pulsada es alguna de las teclas especiales    
  27.     var tecla_especial = false;
  28.         for (var i in teclas_especiales) {
  29.         if (codigoCaracter == teclas_especiales[i]) {
  30.             tecla_especial = true;
  31.             break; }
  32.     }  
  33.     // Comprobar si la tecla pulsada se encuentra entre los caracteres permitidos
  34.     // o si es una tecla especial
  35.     if (elemento.value.length >= maxCaracter) {
  36.         return tecla_especial;         
  37.         return false;
  38.     } else
  39.         return permitidos.indexOf(caracter) != -1 || tecla_especial;
  40. }

Etiquetas: funciones, manejo
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 05:42.