var preguntas = new obj_listapregs();
//PREGUNTA 0
preguntas.creapregta("¿Como editar los programas JavaScript?");
preguntas.crearespta(0,
"Los programas en JavaScript son interpretados, no compilados, por lo que sólo "+
"necesitas un editor de textos, el mismo que uses para crear páginas web. Si para "+
"esto usas un editor HTML seguro que posee una opción para escribir el código "+
"directamente, úsala para escribir tus scripts. Existen editores HTML que facilitan "+
" esta tarea como puede ser Dreamweaver.");
preguntas.crearespta(0,
"Existen algunos editores específicos para facilitar la escritura de programas Javascript. "+
"Dos buenos ejemplos de ellos son los señalados en la sección de recursos: NetObjectBuilder "+
"y Scriblet.");
preguntas.crearespta(0,
'Con el Wordpad de Windows va muy bien. No hay que olvidar guardar en modo de texto y con '+
'la extensión .html. Yo me olvidaría de esos fantásticos editores que existen... a veces '+
'quedan algunas cosas algo imprecisas.');
//PREGUNTA 1
preguntas.creapregta("¿Como se pueden depurar los programas escritos en Javascript?");
preguntas.crearespta(1,
"Los exploradores avisan cuando aparecen errores, este es uno de los poquísimos casos en que "+
"Netscape se comporta mejor que MSIExplorer. Pero ambos te orientan sobre donde se encuentra "+
"el error. Puedes usar las ventanas alert para colocar puntos de parada en tus scripts, estas "+
"alerts te servirán para informarte sobre valores de variables del programa.");
preguntas.crearespta(1,
"Si usas Microsoft Internet Explorer existe un debugger que abre el "+
"programa causante del error indicando la línea donde se ha producido. Puedes encontrarlo en "+
"Microsoft. También Netscape posee un depurador "+
"que puedes encontrar en Netscape");
//PREGUNTA 2
preguntas.creapregta("¿Cómo puedo crear una rutina para que se me procese un formulario y "+
"me lo mande a una dirección de correo?")
preguntas.crearespta(2,
"Si necesitas procesar los datos antes de enviarlos el método es bien sencillo. Asignas "+
"al atributo action del FORMulario el valor \"mailto:\" seguido de la dirección de "+
"correo del destinatario y pones el evento onsubmit = \"return procesar()\" donde "+
"procesar es la función que tu defines para procesar los campos del formulario, si "+
"esta función devuelve true el formulario se enviará si devuelve false el "+
"formulario no se envía. Pon también el atributo enctype =\"text/plain\" de esta "+
"forma los datos irán en el cuerpo del mensaje en lugar de como datos adjuntos y por último "+
"pones el atributo method = \"POST\". Por supuesto debes poner un botón tipo submit.")
//PREGUNTA 3
preguntas.creapregta("¿Cuando se carga una página, cómo puedo hacer desaparecer las barras de herramientas, de menú y estado de manera automática con JavaScript?")
preguntas.crearespta(3,
'El objeto window posee el método open para abrir una nueva ventana, posee tres '+
'argumentos: el primero es la dirección de la página que se mostrará en la '+
'nueva ventana, el segundo es el nombre del nuevo objeto ventana creado y el tercero, '+
'opcional, controla las propiedades de la nueva ventana. Así para crear una ventana '+
'limpia se puede usar la sentencia siguiente
'+
'window.open("url.htm", "nom", "Menubar=no")');
//PREGUNTA 4
preguntas.creapregta('¿Cómo puedo hacer que al entrar en una página que tarda un poco en ser cargada aparezca un único texto que diga \"Cargando...\" y '+
'una vez se haya cargado nos muestre el contenido de dicha página?');
preguntas.crearespta(4,
'Lo mas simple es crear un DIV con el mensaje Cargando página, espere por favor o similar'+
'Este DIV se situa inmediatamente despues de la etiqueta BODY, llevará un atributo ID y tendrá '+
'posicionamiento absoluto. Luego en la etiqueta BODY se coloca un evento onLoad que '+
'ponga en hidden el atributo visibility del mensaje.
'+
'<DIV id="msgCarga" style="position: absolute;
'+
'left:200px; top=300px; visibility:visible">
'+
'Cargando página...</DIV>
'+
' El estilo también puede definirse en una sección style y asignárselo en el atributo class.'+
'
La etiqueta BODY quedará:
'+
'<BODY onLoad="finCarga()">
'+
'La función finCarga() estará previamente definida en la sección HEAD como:
'+
'function finCarga()
'+
'{
'+
' if (navigator.appName!= "Netscape")
'+
' document.all["msgCarga"].style.visibility="hidden"
'+
' else
'+
' document.layers["msgCarga"].visibility = "hidden"
'+
'}');
//PREGUNTA 5
preguntas.creapregta('¿ Como puedo utilizar el atributo "src" en la etiqueta <script>'+
' ya que quiero enlazar un codigo javascript escrito en un archivo .txt ?');
preguntas.crearespta(5,
'El método es muy sencillo basta con lo siguiente:
'+
'<scr'+'ipt language="JavaScript" src="programa.js">
</script>
'+
'En el atributo src irá la dirección URL del archivo de programa. Los ficheros Javascript '+
'son ficheros de texto pero es conveniente usar la extensión '+
'js en el nombre, pues Windows los asocia como fichero de programa Javascript');
//PREGUNTA 6
preguntas.creapregta('En la página de entrada de JavaScriptDesdeCero hay unos botones de '+
'navegación que muestran al frente un cuadro descripitivo del respectivo '+
'vínculo cuando se pasa el mouse. Quisiera saber cómo se logra esto y cómo puedo '+
' aprender a hacerlo.');
preguntas.crearespta(6,
'Primero crea la capa que vaya a contener el texto a mostrar, llamémosla textoExpl '+
'Luego en el elemento del índice se asigna a un evento onMouseover una función que ponga esa '+
'capa en visible y al evento onMouseout otra que la oculte.
'+
'Por capa se entiende un elemento DIV con atributo ID y un estilo CSS con posicionamiento '+
'absoluto. Ejemplo:
'+
'<style>
'+
'.capa {position:absolute; visibility:hidden;
left:100px; top: 200px}
'+
'</style>
'+
'function verCapa(capa)
{
document.all[capa].style.visibility="visible";
}
'+
'function cerCapa(capa)
{
document.all[capa].style.visibility="hidden";
}
'+
'El código HTML para un elemento del índice es:
'+
'<a href="destino.htm"
onMouseOver="verCapa(\' textoExpl \')"
'+
'onMouseout="cerCapa(\' textoExpl \')">
'+
'El texto del enlace</a>
'+
'Por último la capa será:
'+
'<DIV ID="textoExpl" class="capa">
Explicación a mostrar
</DIV>
'
)
//PREGUNTA 7
preguntas.creapregta('¿como logro el efecto de que cuando muevo las barras de dezplazamiento '+
'parece que el fondo se queda estatico y lo unico que se mueve es el texto e imagenes?');
preguntas.crearespta(7,
'No es que parezca es que el fondo permanece fijo. Existen dos opciones: HTML y estilos CSS. '+
'El método HTML consiste en añadir el atributo bgproperties con el valor fixed, '+
'en la etiqueta BODY, que quedaría como sigue:
'+
'<body background="mifondo.gif" bgproperties="fixed">
'+
'El segundo método es crear una clase de estilo CSS o redefinir la clase body, algo así:
'+
'<style type="text/css">
'+
'.fondofijo { background: url(mifondo.gif) fixed}
'+
'</style>
'+
'<body class="fondofijo">
'+
'Aqui seguirá la página Web...
'
)
//PREGUNTA 8
preguntas.creapregta('quiero presentar varias imagenes que se esten cambiando con cierta '+
'frecuencia y cada una de ellas que tenga un hipervinculo hacia una página específica. '+
'¿cómo puedo lograrlo?');
preguntas.crearespta(8,
'Un método es usar varias capas DIV ocultas y un evento temporizador que vaya activando '+
'cada capa y ocultando las demas. Aquí va un ejemplo con un par de imágenes:
'+
'<style type="text/css">
'+
'.capa { position:absolute; visibility:hidden; left: 100px; top: 100px}
'+
'</style>
'+
'Con esto definimos una capa con posicionamineto absoluto en la página. Y ahora dentro '+
'del cuerpo de la página metemos las capas con el contenido que desees
'+
'<div id="capa0" class="capa"><a href="ref1.htm">
'+
'<img src="imagen.jpg></a></div>
'+
'<div id="capa1" class="capa"><a href="ref1.htm">
'+
'<img src="imagen.jpg></a></div>
'+
'En la sección HEAD ponemos el script que alterna las capas:
'+
'<script language="javascript">
'+
'var capaAct = 0;
'+
'var capas = new Array();
'+
'capas[0] = "capa0"
'+
'capas[1] = "capa1"
'+
'function verCapa()
'+
'{document.all[capas[capaAct]].style.visibility = "hidden"
'+
'capaAct++
'+
'if (capaAct >= capas.length) capaAct = 0;
'+
'document.all[capas[capaAct]].style.visibility = "visible"
}
'+
'function iniciaTemp()
'+
'{ setInterval(verCapa, 1000);}
'+
'El temporizador repite la función verCapa cada 1000 msec.Por último la función '+
'comenzará a funcionar cuando se carga la página
'+
'<body onLoad="inicaTemp()">
'
);
//PREGUNTA 9
preguntas.creapregta('¿Como puedo hacer para que mis links se subrayen al poner el ratón '+
'encima, o simplemente para que no aparezcan subrayados?');
preguntas.crearespta(9,
'Usando los eventos onMouseOver para poner el subrayado y onMouseOut para eliminar el '+
'subrayado. Es bien fácil, en la sección Head pones el código Javascript
'+
'<script language="JavaScript">
'+
'function subRayar(elem, sn)
'+
'{
'+
'if (sn)
'+
' elem.style.textDecoration="underline"
'+
' else
'+
' elem.style.textDecoration="none"
'+
' }
'+
'En el cuerpo de la página colocamos el enlace con los eventos correspondientes
'+
'<a href="destino.htm"
'+
'id="enl1" style="text-decoration: none"
'+
'onMouseover="subRayar(this,true)"
'+
'onMouseOut="subRayar(this,false)">
'+
'El texto del enlace</a>
'+
'Y listo.')
//PREGUNTA 10
preguntas.creapregta('¿Como logro hacer que cuando pase el ratón sobre una imagen '+
'ésta se cambie por otra?');
preguntas.crearespta(10,
'Usando los eventos onMouseOver para poner la nueva imagen y onMouseOut para '+
'reponer la original. En la sección Head pones el código Javascript
'+
'<script language="JavaScript">
'+
'function nuevaImg(imagen, archivo)
'+
'{
'+
'document.images[imagen].src = archivo;
'+
' }
'+
'En el cuerpo de la página colocamos el enlace con los eventos correspondientes
'+
'<a href="#" onclick="return false"
'+
'onMouseover="nuevaImg(\'imagen\',\'origen1.gif\')"
'+
'onMouseOut="nuevaImg(\'imagen\',\'origen0.gif\')">
'+
'<img name="imagen" src="origen0.gif" width="20" height="20"
'+
'border="0"></a>
'+
'Ojo, si quieres que el enlace funcione elimina todo el evento onclick. ¿Por qué '+
'este absurdo enlace nulo? es necesario para que funcione en Netscape (!¡). Si sólo lo '+
'quieres para IExplorer y no quieres enlace elimínalo y pon los eventos onmouseover y '+
' onmouseout a la imagen, como ves IExplorer es mucho mas sencillo.')
//PREGUNTA 11
preguntas.creapregta('Quisiera que me ayuden para obtener un script que me permita crear '+
'dos casillas.. y un boton "ENVIAR" cuya funcion sea enviar los datos rellenados a un '+
'e-mail.. y al mismo tiempo cargar una pàgina de agradecimiento.');
preguntas.crearespta(11,
'Mira la pregunta numero 3 para enivar un formulario procesado.
'+
'En cuanto a la página de agradecimiento debemos emplar un pequeño truco pues submit '+
'tan sólo es capaz de enviar el formulario. El truco es usar el método setTimeout '+
'con el primer atributo igual a window.location="gracias.htm" y el segundo atributo lo '+
'bastante corto para que actúe mientras se envía el formulario:
'+
'window.setTimeout("window.location=\'gracias.htm\'", 10)
'+
'Esta sentencia irá colocada en la rutina de procesado del formulario.');
//PREGUNTA 12
preguntas.creapregta('¿Cómo puedo modificar a través una variable (que dependa de un '+
'dato devuelto por una cookie, nombre de un usuario X, por ejemplo), el valor de una '+
' etiqueta hidden de un formulario, es decir, el atributo value="variable"?');
preguntas.crearespta(12,
'Una vez leído el valor del cookie basta con hacer una sencilla asignación:
'+
' document.forms.nombreformulario.nombrecampo.value = valor_del_cookie;
'+
'Por ejemplo la siguiente rutina lee los valores de los cookies y los almacena en un '+
'array indexado por nombres. Partimos de que la página guardó los siguientes pares '+
'nombre=valor en el cookie
'+
' nombre = juanito;
'+
' pais = colombia;
'+
' sexo = varon;
'+
'con los expires correspondientes.
' +
'Definimos la funcion de lectura del cookie que devuelve una matriz indexada por el '+
'nombre de cada pareja nombre=valor
'+
'function leerCookies()
'+
'{
'+
'var listaCookies = document.cookie.split("; ");
'+
'var arrayCookies = new Array();
'+
'var parNomVal;
'+
'for (var i = 0; i < listaCookies.length; i++)
'+
' {
'+
' parNomVal = listaCookies[i].split("=");
'+
' arrayCookies[unescape(parNomVal[0])]=unescape(parNomVal[1]);
'+
' }
'+
'return arrayCookies;
}
'+
'Ahora definimos una función para ser llamada por el evento onsubmit del '+
'formulario. Suponiendo que el atributo name del formulario es formul1 y el campo hidden '+
'se llama oculto la función sería la siguiente
'+
'function procesar()
'+
'{
'+
'var cookies=leerCookies();
'+
'document.forms.formul1.oculto.value=
'+'cookies["nombre"];
'+
'return true
'+
'}
'+
'Esta función puede aprovecharse para comprobar que el formulario está correctamente relleno '+
'como se dice en la respuesta a la pregunta 3.
'+
'Con esto debería funcionar.');
//PREGUNTA 13
preguntas.creapregta('Tengo 5 sitios en una intranet, Sitio1, sitio 2, etc. '+
'ahora bien necesito que cada uno tenga un boton de volver al sitio de donde ingrese.' +
'Ejemplo: Estoy en Sitio 1 y voy al 2, lo navego y quiero volver al 1. '+
'Si estoy en Sitio 2 cuando entre en el 3 pase lo mismo y así con todos. Poder volver '+
'desde donde haya ingresado. Ya que no puedo generar 5 botones que contenga cada uno '+
'el link que va a cada Sitio, solo tiene que ser un boton el que me permita volver desde '+
'donde ingrese');
preguntas.crearespta(13,
'Simplemente pones un link en el que substituyes el destino (href) por una llamada al '+
'método back del objeto history del explorador. Algo así:
'+
'<a href="javascript:history.back(1)">
Texto o imagen del enlace
</a>
'+
'Si pones esto en tu Sitio1 y llegas a él desde el sitio2, este link te '+
'devolverá al sitio2, y si llegas desde el sitio3 pues te devolverá al '+
'sitio3. Añádelo a todas los sitios y podrás ir y regresar de uno a otro con '+
'un sólo botón.');
//PREGUNTA 14
preguntas.creapregta('Estoy haciendo una página web en la que indico las sucursales de '+
'una determinada franquica. Utilizo una página con marcos en la cual el formulario con '+
'un menú desplegable con todas las provincias en las que se encuentras dichas sucursales '+
'se encuentra en la parte de arriba. Mi pregunta es como puedo hacer que al seleccionar '+
'una provincia del menu desplegable,las tiendas de dicha provincia me salgan en el marco '+
'de abajo. Gracias.');
preguntas.crearespta(14,
"Tan sólo es necesario asignar a la propiedad location la nueva dirección pero en el frame "+
"de destino. Esta función se ejecuta en el momento de hacer una selección en el menú "+
"desplegable. Este sería el código Javascript a colocar en el frame superior:
"+
"function cambiaPag(lista, destino){
"+
" var ind = lista.selectedIndex
"+
" destino.location= lista.options[ind].value;
}
"+
"En la misma página, la del frame superior irá el elemento form con el menú desplegable:
"+
"<form name="form1">
"+
"<select name="menu1"
"+
"onChange="cambiaPag(this,parent.frames['frameInf'])">
"+
"<option value="origen1.htm" selected>
Página 1</option>
"+
"<option value="origen2.htm">
Página 2</option>
"+
"</select>
"+
"</form>
"+
"El código HTML correspondiente a la página que contiene ambos frames será algo así como
"+
"
<frameset rows="*,341" frameborder="NO" border="0" "+
"framespacing="0" cols="*">
"+
"<frame name="frameMenu"
src="superior.htm">
"+
"<frame name="frameInf" scrolling="NO" noresize
src="origen1.htm">
"+
"</frameset>
"+
"superior.htm es la página del frame superior con el form y la función javascript
"+
"origen1.htm es la página del elemento seleccionado por defecto en el menú. Si quieres mas "+
"basta con añadir opciones al menú. ");
//PREGUNTA 15
preguntas.creapregta('¿Como evitar que un visitante vote mas de una vez en una encuesta?');
preguntas.crearespta(15,
"Lo ideal es una aplicación CGI pero también con Javascript puede hacerse algo. La clave "+
"está en las cookies que permiten almacenar información en el ordenador del visitante "+
"No es un método válido al cien por cien pues el visitante puede borrar sus cookies. "+
"Recuerda que las cookies no son peligrosas en absoluto para el visitante.
"+
'Como el código es un poco largo para este espacio este '+
"enlace te permitirá descargar en formato zip (menos de 2Kb) un ejemplo de uso.");
//PREGUNTA 16
preguntas.creapregta('¿Como puedo pasar parametros entre diferentes paginas?');
preguntas.crearespta(16,
"Muy sencillo: usando las propiedades del objeto location en la ventana destino. "+
"Una dirección URL tiene la estrucutra típica siguiente
"+
" "+
"protocolo:\/\/host:port\/pathname?search#hash
"+
"cada una de esas partes es una propiedad del objeto location. En esta caso la propiedad "+
"search es la utilizada para pasar parámetros (es la misma que se usa en los CGI). Basta "+
"con asignar a location.href la URL seguida de ?valor, valor sería el parametro a pasar. "+
"En este ejemplo se muestra como hacerlo:
"+
"Enlace con parámetros tomados de un formulario:
"+
"<form name=\"form1\" method=\"post\"
"+
"action=\"javascript:saltar('paginadestino.htm',document.forms.form1.texto.value)\">
"+
" <input type=\"text\" name=\"texto\">
"+
" <input type=\"submit\" name=\"Submit\" value=\"Submit\">
"+
" </form>
"+
"
Al pulsar el botón de este formulario se llama a la dirección indicada seguida del valor "+
"escrito en el campo texto.
"+
"El código javascript de la función es de lo mas simple:
"+
"function saltar(direc, param)
"+
"{
location.href=direc+'?'+param;
}
"+
"Esto se podría haber hecho en línea (action=\"javascript:location.href=...\") pero es "+
"preferible usar una función por si se desea comprobar el texto o cualquier otra cosa. "+
"La página destino deberá leer el valor de la siguiente forma
"+
"function leerParam()
"+
"{
var param=unescape(location.search).substring(1);
}
"+
"
La función unescape traduce a ASCII los códigos de la cadena y se usa substring porque "+
"search incluye el símbolo ? usado como separador.");
//PREGUNTA 17
preguntas.creapregta('Como podría hacer para que al poner una imagen como fondo de una '+
'página no se me repita hasta completar dicha página. Gracias.');
preguntas.crearespta(17,
'Tan sólo debes crear un estilo CSS con la propiedad repeat del background en el valor '+
'apropiado. La definición del estilo, que va en la sección HEAD de la página o linkado a '+
'un fichero externo, es:
'+
'<style>
'+
'.fondofijo{
'+
' background-image: url(simbolos/fondo.jpg);
'+
' background-repeat: no-repeat;
'+
' }
'+
'</style>
'+
'Si quieres que se repita en vertical pones repeat-y, y si quieres que se repita en '+
'horizontal pones repeat-x. Luego asignas al atributo class de body '+
'este estilo:
'+
'<body class="fondofijo">
'+
'Aunque también puedes redefinir la etiqueta body en lugar de .fondofijo, en este caso '+
'no es necesario que coloques el atributo class.');
//PREGUNTA 18
preguntas.creapregta('¿Cómo puedo hacer que mediante un click en una imagen se cambie el '+
'fondo y los colores de las letras? es para dar la oportunidad para que el lector elija el '+
'color de fondo y letra: por ejemplo fondo negro letras blancas; fondo plomo claro '+
'letras negras');
preguntas.crearespta(18,
'El script deberá actuar sobre las propiedades bgColor y fgColor del '+
'document. Si usas una imagen coloca un evento onClick que llame a la '+
'función encargada de cambiar esos argumentos. La función puede ser:
'+
'function cambiaColor(fondos, letras)
'+
'{
document.bgColor = fondos;
'+
' document.fgColor = letras;
}
'+
'Y la imagen será algo así como:
'+
'<image src="cambiar.gif" onclick="cambiaColor(\'blue\',\'yellow\')">
'+
'Para los colores puedes usar nombres o cadenas hexadecimales (000000 al FFFFFF). '+
'Estos cambios sólo funcionan en IExplorer 4+, Netscape apenas permite cambios '+
'tras cargar la página.
'+
'En la página de ejemplos tienes otra forma de hacer esto mismo pero usando un formulario.');
//PREGUNTA 19
preguntas.creapregta('Pretendo crear una página comercial, en la que enseño los productos y '+
'luego me envian un formulario con lo que les interesa. Quisiera que los clientes picaran en '+
'la imagen del producto, y que el nombre, precio y referencia del mismo se escribiera en el '+
'formulario con sólo hacerlo. O sea, que al final el cliente despues de picar los productos '+
'que quiere comprar, vea la lista de lo que ha picado en forma de formulario, con todo prepa'+
'rado para dar a "enviar" y que no tenga que hacer nada mas.');
preguntas.crearespta(19,
'La gestión de una cesta de la compra se realiza habitualmente mediante programas CGI, que '+
'dan un amplio abanico de posibilidades, no obstante Javascript también permite esa '+
'gestión para tiendas online no demasiado grandes. Una solución es el uso de las cookies. '+
'Esta solución se compone de dos páginas llamémoslas tienda y pedido. La primera es la usada '+
'para presentar los artículos y permitir que el visitante escoja la cantidad que desee de '+
'cada uno. Cada vez que el visitante anota una cantidad se crea una cookie con el par '+
'idarticulo=cantidad. Las rutinas Javascript de esta página se reducen pues a crear cookies, '+
'contendrá ademas un botón o enlace para mostrar la segunda página, la del pedido.
'+
'La segunda página presentará el formulario con los artículos elegidos por el visitante y un '+
'botón enviar. La parte del formulario se creará dinámicamente usando rutinas Javascript que irán leyendo '+
'las cookies y escribiendo los datos de cada artículo anotado en ellas. Estos datos se '+
'extraen de una lista creada previamente con información como la descripción, referencia '+
'y precio.
'+
'Página tienda.htm, para cada artículo tendremos un campo de formulario:
'+
' <img src="imagen.jpg" width="20" height="20" align="absmiddle">
'+
' <input type="text" name="cantidad1" size="3" value="1">
'+
' <input type="button" name="articulo1" value="Anotar"
'+
' onclick="creaCookie(this.name, document.forms.articulos.cantidad1.value)">
'+
'Ojo con esto: el nombre del botón es el identificador del artículo elegido y el que se '+
'anotará en el cookie en una forma similar a esta cadena: "articulo1=5"
'+
'Página pedido.htm, esta página contiene un objeto javascript para los artículos '+
'cuyo constructor será algo así
'+
'function objArticulo(nombre, refer, valor)
'+
'{
this.nombre = nombre;
'+
' this.refer = refer
'+
' this.valor = valor;
'+
' this.cant = 0;
}
'+
'Luego creamos una lista de instancias para los artículos ofrecidos de la forma
'+
'tienda = new Array() //la lista de articulos
'+
'tienda["articulo1"]= new objArticulo("El articulo num1", "Ref001", 2500)
'+
'Vemos que los elementos de la lista se refieren por el identificador usado en la página '+
'tienda. El resto es fácil: con cada artículo leemos el correspondiente cookie y si existe '+
'se anota mediante document.write los campos de formulario con los datos del mismo. Para '+
'el articulo de identificador articulo1 haremos un leerCookie("articulo1"), si existe y '+
'se han pedido alguno usamos un document.write para escribir en esta página pedido los '+
'datos de ese artículo: nombre, referencia, cantidad pedida, precio...
'+
'for (elem in tienda)
'+
'{ dato = leerCookie(elem);
'+
' if (dato >0)
'+
' document.write(tienda[elem].nombre)
}
'+
'De la misma manera se escriben los datos en campos ocultos de un formulario al que se añade '+
'un botón enviar como ya se explica en la pregunta 3 de esta página.
'+
'En esquema este es el método para abordar este problema, pero si alguien quiere verlo en '+
'funcionamiento tan sólo debe pasar por '+
'aquí para verlo.
'+
'En esa dirección existe un fichero zip con los códigos Javascript y HTML.
');
//PREGUNTA 20
preguntas.creapregta('¿Como se puede hacer aparecer en la ventana un párrafo cuyo '+
'identificador es tecleado por el visitante en un campo de un formulario?');
preguntas.crearespta(20,
'Para esto tienes, en IExplorer, el método scrollIntoView(arriba), donde arriba es un '+
'que indica si queremos que el objeto al que se aplica aparezca en el borde superior de la '+
'pantalla (true, por defecto) o en la inferior (false). En este ejemplo usamos un párrafo '+
'cuyo identificador id es Jordan
'+
'<p id="Jordan">Aquí irá el texto contenido en este párrafo</p>
'+
'Podemos añadir mas párrafos con diferentes identficadores. Ahora colocamos un formulario
'+
'<form name="form1" method="post" action="">
'+
' <input type="text" name="buscador">
'+
' <input type="button" name="Buscar" value="Buscar"
'+
' onclick="mostrar(parentElement.buscador.value)">
'+
' </form>
'+
'El objeto parentElement lo usamos aquí para referirnos al elemento que contiene al botón, '+
'o sea al formulario. Al picar sobre ese botón se llama a la función mostrar() con '+
'el valor del campo de texto como argumento. La función sería la siguiente:
'+
'function mostrar(arg)
'+
'{
if (document.all[arg])
document.all[arg].scrollIntoView(true)
else
'+
' alert("Palabra inexistente")
}
'+
'Como es habitual en el tema de buscadores es aconsejable no distinguir entre mayúsculas'+
'y minúsuclas, para ello transforma la palabra clave a, por ejemplo, minúsculas usando el '+
'método de string toLowerCase(), y por supuesto poniendo los id todos en minúsculas.
'+
'Este método es aplicable a prácticamente todos los elementos de las páginas HTML y es exclu'+
'sivo del DOM de Microsoft');
//PREGUNTA 21
preguntas.creapregta('¿Como calcular el número de caracteres de una cadena?');
preguntas.crearespta(21,
'Un pregunta de Javascript puro. La cadena es un objeto String y una de sus propiedades'+
'es precisamente la propiedad length que contiene su longitud.
'+
'O sea si el siguiente código escribirá el valor 16
'+
' var cadena ="Hola buenos días"
'+
' document.write(cadena.length);
'+
'La sección dedicada a los Strings contiene los '+
'métodos y propiedades de este objeto');
//PREGUNTA 22
preguntas.creapregta('¿Como hacer que automáticamente mi página llame un código javas'+
'cript u otro diferente dependiendo de la resolución del monitor con la que el '+
'navegante entre en ella?');
preguntas.crearespta(22,
'El objeto screen dependiente del objeto window te da información acerca de la pantalla del '+
'navegador usado para visitar la página:
'+
'window.screen.width te da la resolución horizontal
'+
'window.screen.height te da la resolución vertical
'+
'window.screen.colorDepth te da la resolución de color
'+
'Te basta una sentencia if para comprobar la resolución y llamar a la función que quieras.');
//PREGUNTA 23
preguntas.creapregta('¿Como pueden sumarse dos campos de un formulario?');
preguntas.crearespta(23,
'Los campos de texto de los formularios son eso, campos de texto lo que en Javascript '+
'se traduce en una cadena de caracteres, un objeto string. Lógicamente si sumamos '+
'los contenidos de dos campos de texto lo que estamos haciendo es concatenar strings. Así '+
'si en los campos de un formulario escribimos "8" y "7" la suma nos dará "87". Para '+
'sumar estos valores primero debemos convertirlos a números usando para ello la función de '+
'Javascript parseInt( ). En un formulario la suma sería algo así como:
'+
' parseInt(form1.valor1.value)+parseInt(form1.valor2.value)
'+
'asumiendo que en ese formulario existan dos campos tipo text llamados valor1 y valor2.');
//PREGUNTA 24
preguntas.creapregta('¿Como puedo lograr que la sentencia write escriba los numeros con '+
'los separadores de miles (1.234.567 en lugar de 1234567)?');
preguntas.crearespta(24,
'Javascript no posee ningún método para formatear las salidas, pero podemos crear una '+
'función que si lo haga. En este caso usamos la siguiente:
'+
'function formatMiles(numero)
'+
'{
'+
'numero=numero+"";
'+
'var largo = numero.length;
'+
'var cad= "";
'+
'//Nos aseguramos que no existen caracteres no numéricos
'+
'if (parseInt(numero)+"" == numero)
'+
'{
'+
'while (largo>3)
'+
' {
'+
' cad = "."+numero.substr(largo-3, 3)+cad;
'+
' numero = numero.substr(0, largo-3);
'+
' alert(cad+" - "+numero);
'+
' largo=numero.length;
'+
' }
'+
' if (numero.length>0)
'+
' cad = numero+cad
'+
' }
'+
'return cad;
'+
'}
'+
'Esta función recibe como argumento una cadena o un número, lo primero que hace es '+
'convertir el argumento a un string por si no lo era. Luego hace lo que haríamos nosotros'+
'a mano: ir agrupando de tres en tres los dígitos y poniendo los puntos de miles
'+
'Un ejemplo de uso podría ser:
'+
' document.write(formatMiles(235679))
'+
'La cadena escrita será 235.679');
//PREGUNTA 25
preguntas.creapregta('¿Como logro que con los botones (como los de esta ventana -borrar, '+
'enviar. cerrar-) actuen como hiperligas, es decir, que cada botón me lleve una página '+ 'diferente (boton1 a liga 1, botón 2 a liga 2, etc)?');
preguntas.crearespta(25,
'Para que un botón haga el efecto de un hipervículo basta con asignarle a us evento onclick'+
'una instruccion Javascript que asigna a la propiedad location.href la dirección URL a la '+
'que desees que apunte. Es decir algo así como:
'+
'<form name="form1" method="post" action="">
'+
'<input type="button" name="Boton1" value="Dirección1" '+
'onclick="location.href=\'ira1.htm\'">
'+
'<input type="button" name="Boton2" value="Otra dirección"'+
'onclick="location.href=\'ira2.htm\'">
'+
'</form>
'+
'Así de sencillo.');
//PREGUNTA 26
preguntas.creapregta('¿Como puedo hacer para que pulsando un botón en un frame me cargue una url en otro frame diferente?');
preguntas.crearespta(26,
'Basta con asignarle el nombre del frame al atributo target del hipervínculo. Algo así '+
'como:
'+
'<a href= "pagina.htm" target="marcoderecho">Ir a la página</a>
'+
'Si quieres hacerlo usando Javascript debes usar la propiedad parent que devuelve la ventana propietaria de todos los frames. A continuaciónle asignas al frame destino el URL que quieres que se muestre:
:'+
'parent.frames["Marcoppal"].location="pagina.htm";
'+
'En esta sencilla instrucción Marcoppal es el nombre del marco donde deseas que se muestre la página. Esta instrucción como es lógico deberá estar en el marco del enlace
'+
'Otra pregunta relacionada con este tema es la 15.');
//PREGUNTA 27
preguntas.creapregta('¿Cómo puedo bloquear con JavaScript un campo de texto en un formulario de forma que no pueda ser modificado el valor que contiene?')
preguntas.crearespta(27,
'Una forma muy simple es asignarle this.blur() al evento onfocus del control del cuadro de texto que no quieras que se modifique. Es decir dentro del elemento form el cuadro'+
'de texto en cuestión será:
'+
'<textarea name="campo" rows="15" cols="60" '+
'onfocus="this.blur()">
Esto no se puede modificar
'+
'</textarea>
'+
'resto del elemento form. El evento onfocus se activa cuando se selecciona el '+
'elemento (posee el foco), mientras que el método blur() fuerza a qe el elemento pierda '+
'el foco.
');
//PREGUNTA 28
preguntas.creapregta('¿Cómo puedo combinar la pregunta no. 3 de tal forma que en el cuerpo del mensaje del email los campos y las entradas me lleguen formateadas separadas por comas, por ejemplo:
'+
'Campo NOMBRE de tipo TEXT
'+
'Campo APELLIDOS de tipo TEXT, el formato que quisiera es:
'+
'NOMBRE,JORGE
'+
'APELLIDOS,LOPEZ PEREZ
');
preguntas.crearespta(28,
'Pues de entrada es necesario eliminar el atributo enctype del elemento FORM de la página, de esta manera el cuerpo del mensaje queda en blanco y los datos irán en un attachment (que en este caso no nos sirve de nada), será la rutina del evento onsubmit la que se encargue de construir el cuerpo con el formato que desees. Por ejemplo si el formulario fuera el que sigue:
'+
'<form name="form1" method="post" action="mailto:p@j.com"
'+
'onsubmit = "return procesar(this)" >
'+
'<input type="text" name="Campo1">
'+
'<input type="text" name="Campo2">
'+
'<input type="submit" name="Submit" value="Submit">
'+
'<input type="reset" name="Submit2" value="Reset">
'+
'</form>
'+
'La función procesar podría ser algo sí como:
'+
'function procesar(formul)
'+
'{
'+
'var cuerpo="";
'+
'var ind = 0;
'+
'var rc = "%0d%0a";
'+
'for(ind=0; ind'+
' cuerpo += formul.elements[ind].name+","formul.elements[ind].value+rc;
'+
'formul.action +="?Subject=datos&Body="+cuerpo;
'+
'return true
'+
'}
'+
'En esta ejemplo se ha colocado la cadena "datos" para el Subject (Asunto) del mensaje, pero por supuesto puede colocarse cualquier otra valor. El siguiente atributo colocado es el correspondiente a Body, o sea el cuerpo del mensaje construido por la propia función'+
'
Y eso es todo, fácil.');
//PREGUNTA 29
preguntas.creapregta('¿Como se usan los campos ocultos en los formularios?');
preguntas.crearespta(29,'Un campo oculto es un campo que el autor de la página introduce en '+
'un formulario con un valor que usará al procesar la respuesta. Por ejemplo, en estas '+
'páginas un campo oculto puede diferenciar un formulario para preguntas del formulario para '+
'respuestas. Ambos van a la misma dirección email, ese campo oculto se usa para darle valor '+
'al subject (asunto) del mensaje. Un filtro en el lector de correo puede separar los '+
'mensajes de respuestas de los de preguntas. Un programa CGI haría cosas por el estilo.
'+
'Su uso es similar al de cualquier otro campo del formulario. Por ejemplo
:'+
'<form name="form1" method="post"
'+
'onsubmit"return procesar(this)">
'+
'<input type="password" name="nombre">
'+
'<input type="hidden" name="micampo" value="oculto">
'+
'<input type="submit" name="Submit" value="enviar">
'+
'</form>
'+
'La instrucción document.forms.form1.micampo.value me devolvería oculto, lo '+
'mismo que document.forms.form1.nombre.value me devolvería el valor escrito en el '+
'campo de texto nombre
')