Ver Mensaje Individual
  #2 (permalink)  
Antiguo 04/01/2014, 01:18
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 3 meses
Puntos: 977
Respuesta: Como llamo codigo javascript desde HTML.

La antigua manera de hacerlo era a través de atributos en los elementos del DOM:

Código HTML:
Ver original
  1. <button id = "boton" onclick = "funcion1()">CLIC</button>
  2.  
  3. <select id = "combo" onchange = "funcion2()">
  4.   <option value = 1>UNO</option>
  5.   <option value = 2>DOS</option>
  6.   <option value = 3>TRES</option>
  7.  
  8. <input type = "text" id = "caja" onkeypress = "funcion3()" />

Y en el documento JavaScript, definías las funciones:

Código Javascript:
Ver original
  1. function funcion1(){
  2.   alert("Este es un botón");
  3. }
  4.  
  5. function funcion2(){
  6.   alert("Este es un combo");
  7. }
  8.  
  9. function funcion3(){
  10.   alert("Esta es una caja de texto");
  11. }

Sin embargo, la W3C recomienda hacer esto únicamente desde el código JavaScript. Aplicando esto al ejemplo anterior, quedaría así:

Código HTML:
Ver original
  1. <button id = "boton">CLIC</button>
  2.  
  3. <select id = "combo">
  4.   <option value = 1>UNO</option>
  5.   <option value = 2>DOS</option>
  6.   <option value = 3>TRES</option>
  7.  
  8. <input type = "text" id = "caja" />

Código Javascript:
Ver original
  1. var boton = document.getElementById("boton"),
  2.     combo = document.getElementById("combo"),
  3.     caja = document.getElementById("caja");
  4.  
  5. // FORMA 1
  6.  
  7. boton.addEventListener("click", function(){
  8.   alert("Este es un botón");
  9. }, false);
  10.  
  11. combo.addEventListener("change", function(){
  12.   alert("Este es un combo");
  13. }, false);
  14.  
  15. caja.addEventListener("keypress", function(){
  16.   alert("Esta es una caja de texto");
  17. }, false);
  18.  
  19. // FORMA 2
  20.  
  21. function funcion1(){
  22.   alert("Este es un botón");
  23. }
  24.  
  25. function funcion2(){
  26.   alert("Este es un combo");
  27. }
  28.  
  29. function funcion3(){
  30.   alert("Esta es una caja de texto");
  31. }
  32.  
  33. boton.addEventListener("click", funcion1, false);
  34. combo.addEventListener("change", funcion2, false);
  35. caja.addEventListener("keypress", funcion3, false);

Como verás, en la forma recomendada, retiré los atributos de eventos de los elementos del DOM, los tomé desde el código JavaScript y les asigné los respectivos eventos, que ejecutarán determinadas funciones por cada vez que se produzcan.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand