(Novato) Paso a Notación Semántica

GardBeat · #1 (**permalink**) 30/12/2009, 15:56

Buenas.

Tengo un código html + javascript y querria que me ayudaseis a trasladarlo a notación semantica de JavaScript, gracias de antemano y espero vuestra ayuda.

Este es mi codigo:

Código Javascript:

Ver original<html>
<head>
<title>Intercambiador de Imagenes</title>
</head>
<body>
<img src="img/img0.JPG" width="128" height="96" border="0" name="Imagen">
<script>
var _img = new Array();
    _img[0] = new Image(); _img[0].src="img/img0.jpg";
    _img[1] = new Image(); _img[1].src="img/img1.jpg";
    _img[2] = new Image(); _img[2].src="img/img2.jpg";
    _img[3] = new Image(); _img[3].src="img/img3.jpg";
function cambiarA(_obj)
{
  if(!_obj)return;
  var _index = _obj.selectedIndex;
  if(!_index)return;
  var _item  = _obj[_index].value;
  if(!_item)return;
  if(_item<0 || _item >=_img.length)return;
  document.images["Imagen"].src=_img[_item].src;
}
</script>
 
 <form method="get">
    <select onchange="cambiarA(this)">
      <option value="">Seleccionar Imagen</option>
      <option value="0">Imagen 1</option>
      <option value="1">Imagen 2</option>
      <option value="2">Imagen 3</option>
      <option value="3">Imagen 4</option>
    </select>
</form>
 
</body>
</html>

caricatos · #2 (**permalink**) 30/12/2009, 16:27

Hhola:

Parece que la semántica está de moda... en la wikipedia y en google no se encuentran entradas (tampoco busqué mucho)...

¿A que te refieres con notación semántica javascript?

Saludos

cocu3 · #3 (**permalink**) 30/12/2009, 16:34

notacion semantica? he escuchado pero cun las url's, nada para programacion

zerokilled · #4 (**permalink**) 30/12/2009, 23:57

me parece a lo que se refiere con semantica es a json. busque en google por terminos en ingles y la mayoria me habla sobre json. http://www.google.com/search?q=javas...ient=firefox-a en todo caso, tampoco entiendo que cambios quieres hacerle para que se parezca a json.

GardBeat · #5 (**permalink**) 31/12/2009, 02:29

Pues os explico segun he leido la semantica basicamente consiste en no cargar las funciones en los input o en el formulario y hacer que se cargen las funciones en la zona del script que esta dentro del head. He intentado pasarlo pero me da errores, por ello os pediria de que me ayudarais o me guiarais. Gracias de antemano.

GardBeat · #6 (**permalink**) 31/12/2009, 12:19

Os dejo la ultima modificación del código:

Código Javascript:

Ver original1.
      <html>
   2.
      <head>
   3.
      <title>Intercambiador de Imagenes</title>
   4.
      </head>
   5.
      <body>
   6.
      <img src="img/img0.JPG" width="128" height="96" border="0" name="Imagen">
   7.
      <script>
   8.
      var _img = new Array();
   9.
          _img[0] = new Image(); _img[0].src="img/img0.jpg";
  10.
          _img[1] = new Image(); _img[1].src="img/img1.jpg";
  11.
          _img[2] = new Image(); _img[2].src="img/img2.jpg";
  12.
          _img[3] = new Image(); _img[3].src="img/img3.jpg";
  13.
      function cambiarA(_obj)
  14.
      {
  15.
        if(!_obj)return;
  16.
        var _index = _obj.selectedIndex;
  17.
        if(!_index)return;
  18.
        var _item  = _obj[_index].value;
  19.
        if(!_item)return;
  20.
        if(_item<0 || _item >=_img.length)return;
  21.
        document.images["Imagen"].src=_img[_item].src;
  22.
      }
  23.
      </script>
  24.
       
  25.
       <form method="get">
  26.
          <select onchange="cambiarA(this)">
  27.
            <option value="">Seleccionar Imagen</option>
  28.
            <option value="0">Imagen 1</option>
  29.
            <option value="1">Imagen 2</option>
  30.
            <option value="2">Imagen 3</option>
  31.
            <option value="3">Imagen 4</option>
  32.
          </select>
  33.
      </form>
  34.
       
  35.
      </body>
  36.
      </html>

zerokilled · #7 (**permalink**) 31/12/2009, 12:23

en programacion conozco semantica por el significado de las expresiones o instrucciones. a lo que tu te refieres no se si tenga un nombre pero no creo que sea semantica. en todo caso, para separar el contenido de la programacion, desde el script tienes que obtener la referencia del elemento que le quieras agregar el evento o lo que fuera. la forma mas sencilla de obtener la referencia es asignandole un ID al elemento y luego capturarlo con getElementById.

Código:

<h1 id='header'>Encabezado</h1>

document.getElementById('header')

una vez obtenga la referencia haces con él lo que necesites. segun tu codigo, es asignar un evento e invocar una funciona pasando como parametro el elemento en si. usando el mismo ejemplo anterior.

Código:

document.getElementById('header').onclick = function(){
invocar_funcion(this);
}

por supuesto, esto es un ejemplo utilizando evento de raton y elemento H1. pero es igual de aplicable a cualquier elemento y evento.

GardBeat · #8 (**permalink**) 01/01/2010, 07:35

Gracias zerokilled por la info. Seguire con ello, si alguien me puede seguir dando mas información seria mucho mejor. Gracias de antemano.

junihh · #9 (**permalink**) 01/01/2010, 12:12

@GardBeat: Hay cosas que en lo personal no hago y entre ellas ponerselas dificil a los visitantes y los search-bots.

Tampoco entiendo lo que quieres decir con "notacion semantica de javascript" y si es lo que explicas de halar las funciones de js en el head, cometes el error de cargar estos antes del resto del contenido.

Se que es muy comun ese metodo, pero algo que tienes que saber es que los navegadores cargan el codigo de forma lineal y si un javascript es pesado y toma tiempo en cargarse, hasta que no se cargue este, el resto del codigo de la pagina se detiene de hacerlo, por lo que el visitante no veria contenido y puede desesperarse. Para evitar ese problema tengo como costumbre cargar todos los js en el footer, antes de </body>.

Otra cosa es que no le estas dando oportunidad a los buscadores de indexar tus imagenes con ese script que pones. Si permites que los bots indexen las imagenes en tu pagina, garantizas mas visitas provenientes de buscadores.

El metodo que uso es poner todas las imagenes dentro de una lista tipo:

Código HTML:

<div id="imgs">
	<img src="imagen.jpg" />
	<img src="imagen.jpg" />
	<img src="imagen.jpg" />
	<img src="imagen.jpg" />
</div>

Luego con js capturo todos los elementos <img> dentro del div y les aplico el efecto que necesite. El js lo cargo como antes mencione.

Lo importante es dejar las imagenes visibles a los bots para garantizarte visitas.

junihh · #10 (**permalink**) 01/01/2010, 14:00

Me tome la libertad de hacer lo que quieres pero a partir de las recomendaciones que te menciono. Puedes ver la muestra aqui.

La funcion del javascript es esta:

Código HTML:

function selectImage (idSel,idLis)
{
	var slct = document.getElementById(idSel);
	var imgs = document.getElementById(idLis).getElementsByTagName('img');
	//
	for (var i = 0; i < imgs.length; i++)
	{
		imgs[i].style.display = 'none';
		slct.options[i] = new Option (imgs[i].alt,i);
	}
	//
	imgs[0].style.display = 'block';
	//
	slct.onchange = function ()
	{
		for (var i = 0; i < imgs.length; i++) imgs[i].style.display = 'none';
		imgs[this.value].style.display = 'block';
	}
}

Cuando revises el source de la muestra notaras que las imagenes tienen alt. Asegurate que en el trabajo que apliques esta funcion le pongas alt a las imagenes, porque el js los asume como titulos para el select. Ademas, al poner los alt estas cumpliendo con una de las reglas basicas recomendadas por la W3C.

Espero que te sirva.

GardBeat · #11 (**permalink**) 01/01/2010, 14:26

Muchas gracias por ese enlace junihh. Este ejemplo me ha venido muy bien, por que ha simplificado bastante el codigo que mostraba y es mas claro y directo.

1 saludo.

GardBeat · #12 (**permalink**) 01/01/2010, 14:59

He realizado una modificaciones siguendo lo que me has menciado, y ya por curiosidad y seguir trasteando mi codigo y pasarlo al mal llamado "semantico", asi se me ha quedado el codigo, pero no me termina de funcionar, alguien me detecta el error. Gracias de antemano.

Cita:

<html>
<head>
<title>Seleccion de Imagenes</title>
<script type="text/javascript">

window.onload = function () {

document.getElementsByName("menu").onchange = cambiarA(this);
}

var _img = new Array();
_img[0] = new Image();
_img[0].src="img/img0.jpg";
_img[1] = new Image();
_img[1].src="img/img1.jpg";
_img[2] = new Image();
_img[2].src="img/img2.jpg";
_img[3] = new Image();
_img[3].src="img/img3.jpg";

function cambiarA(_obj) {

if(!_obj) return;

var _index = _obj.selectedIndex;

if(!_index) return;

var _item = _obj[_index].value;

if(!_item) return;

if(_item<0 || _item >=_img.length) return;

document.images["Imagen"].src=_img[_item].src;

}

</script>
</head>
<body>
<img src="img/img0.JPG" width="128" height="96" border="0" name="Imagen">

<form id="formulario">
<select name="menu">
<option value="">Seleccionar Imagen</option>
<option value="0">Imagen 1</option>
<option value="1">Imagen 2</option>
<option value="2">Imagen 3</option>
<option value="3">Imagen 4</option>
</select>
</form>

</body>
</html>

Esck21 · #13 (**permalink**) 01/01/2010, 15:02

Es mala practica colocar JS en el HTML, se coloca en un archivo separado.... Web 2.0.

GardBeat · #14 (**permalink**) 01/01/2010, 15:07

Ya Esck21, pero son aplicaciones simples que estoy haciendo. Cuando hago bloques grandes de codigo, hago como tu bien me indicas guardaros en archivos ".js". Podrias ayudarme con el codigo ultimo que indico??? Es que no consigo ver ese fallo que hay para que no funcione. Gracias.

zerokilled · #15 (**permalink**) 01/01/2010, 15:09

Cita:

Iniciado por Esck21

... se coloca en un archivo separado.... Web 2.0.

¿la Web 2.0 trata de eso?

@GardBeat,
de lo poco que pude ver, el problema lo tienes cuando asignas el evento onchange al "elemento". en este caso en realidad no estas asginando la funcion al elemento sino a una coleccion de elementos.

Código:

window.onload = function () {

document.getElementsByName("menu").onchange = cambiarA(this);
}

te falta indicar cual elemento de esa coleccion. getElementsByName devuelve una coleccion, algo parecido a un array, e indicas el elemento con un indice. por ejemplo, getElementsByName("menu")[0]

Esck21 · #16 (**permalink**) 02/01/2010, 02:53

Cita:

Iniciado por zerokilled

¿la Web 2.0 trata de eso?

No.. pero se toma mas en serio desde que esa frase salio.. pwned!.

caricatos · #17 (**permalink**) 02/01/2010, 03:02

Hola:

Más cosas...

Código:

document.getElementsByName("menu").onchange = cambiarA(this);

Esta línea asigna al evento onchange de ese elemento menu (supuestamente bien indexado, el resultado de la función cambiarA, y no la propia función... si tienes que usar parámetros, deberías asignar una función...

document.getElementsByName("menu").onchange = function(x) {cambiarA(this);}

O asignarla así:

document.getElementsByName("menu").onchange = cambiarA;

Y obtener el elemento de otra manera...

Saludos

GardBeat · #18 (**permalink**) 02/01/2010, 03:43

caricatos, aplicando uno u otra forma que me indicas de solucionar, sigue igual, no me da ningun error el firebug y no me hace lo que quierro, que es elegir una o otra imagen, segun la opcion en el despegable que indica, ¿que puede ser entonces?

Gracias de antemano a todos, nuevamente.

caricatos · #19 (**permalink**) 02/01/2010, 04:44

Hola:

Sobre las imagenes no sé, pero yo prefiero hacer mis pruebas con alertas, y fíjate en este código:

Código:

window.onload = function () {
document.getElementsByName("menu")[0].onchange = function(x) {cambiarA(this)};
}

Y este...

Código:

function cambiarA(_obj) {
alert(_obj.value)
}

Si te funciona con alertas, te debería funcionar con imágenes, siempre y cuando las rutas sean correctas.

Saludos

GardBeat · #20 (**permalink**) 02/01/2010, 05:33

caricatos, asunto zanjado, seguia como patron lo primero que me dijistes, y de tanto y tanto tocar, modifique la carpeta de las imagenes y ese era el error, meti en otra carpeta las nuevas imagenes y por eso no funcionaba.

Gracias por tu ayuda y a los demas.

junihh · #21 (**permalink**) 02/01/2010, 07:13

@Esck21: ECMA no tiene reglamentos como lo que dices. Web2.0 no es mas que un concepto que conglomera las redes sociales y servicios de utilidad online, es un simple nombre inventado por Tim O'Reilly. ECMA, ese ente regulador poseedora de los derechos del ECMAscript o ECMA-262 (javascript), permite incrustar o usar como archivo externo los scripts a desicion del autor. No te limites por esa tonteria.

@GardBeat: Ayer estuve buscando algo en mis bookmarks de Delicious y me encontre con un link que habia olvidado que tenia, es una introduccion a HTML semantico. De alli tomo este trozo que leeras bajo el titulo "Always separate style from content":

Cita:

Note, perfect production practice also removes all JavaScript functions and event handlers from the markup as well!

Eso te demuestra que el modo como aplicas tu script no es del todo "semantico", retomando el punto que entiendo dio origen a este post. Lee el articulo, es muy bueno:

http://webdesignfromscratch.com/html...antic-html.php