This is the P2PU Archive. If you want the current site, go to www.p2pu.org!

Javascript 1-2-3

My recent threads

You haven't posted any discussions yet.

Recently updated threads

Dudas de programación

Go back to: General discussion

Aquí pueden poner cualquier duda que tengan sobre los temas que vayamos viendo cada semana de programación. Les pido que nos limitemos a los temas que corresponden para que todos vayamos avanzando a la par.

Humberto Ruiz's picture
Humberto Ruiz
Wed, 2011-02-09 21:43

lo unico que tengo dudas es sobre lo de la parte del css, nunca lo he usado antes pero si me pudieras dar una pista sobre que buscar seria grandioso...

David Suárez's picture
David Suárez
Wed, 2011-02-09 23:34

Hola Humberto, me encontré esta guía que te puede servir: http://www.w3c.es/divulgacion/guiasbreves/hojasestilo
La idea de CSS es separar el contenido de las páginas web de la presentación, lo que te da muchas otras ventajas.
Espero que te sirva la liga.

Humberto Ruiz's picture
Humberto Ruiz
Thu, 2011-02-10 03:35

gracias lo leere cualquier duda te comento

Humberto Ruiz's picture
Humberto Ruiz
Thu, 2011-02-10 05:36

bueno yo me referia a la parte de css que viene en el ejercicio bonus no al css en si... tenemos que resaltar el texto pero no entiendo la forma. Acepta javacript el css? o tenemos que separar partes de javascript y poner el css indicado para la resaltacion del color y luego otra vez javascript?, o como ?... seria de mucha ayuda un consejo o al menos una pista

Celso Ulises Juarez Ramirez's picture
Celso Ulises Juar...
Thu, 2011-02-10 06:33

CSS funciona, de manera basica (hay mas opciones), sobre IDs y CLASES. A los elementos HTML (como puede ser un <div>, un <p>, etc) se les puede asignar un ID, o una CLASE, de la siguiente manera:
<p id="primerParrafo"> Hola, soy el primer parrafo </p>
En tu sección de CSS (digo sección porque puede ir incluido dentro de la cabecera del documento, aunque también puede ser un archivo externo) le indicas que estilo (por eso se llaman hojas de estilo) debe de llevar cada clase o cada elemento. Suponiendo que quisieras, a ese <p> que ya definimos, darle estilo, en tu cabecera pondrías algo como esto:

<head>
   <title>Titulo</title>
   <style type="text/css">
      #primerParrafo {
          background-color: #FFFF00;
      }
   </style>
</head>

Esto le dará de fondo a tu parrafo de id=primerParrafo un color de fondo amarillo.

Espero haberte ayudado. Saludos.

David Suárez's picture
David Suárez
Thu, 2011-02-10 16:42

Humberto, como explica Celso, los estilos definidos con CSS se aplican a un tipo de elemento HTML, entonces lo único que hay que hacer con Javascript es asegurarse de que el HTML que se escriba con la función document.write lleve un identificador, que bien podría ser un atributo class="salidaJS". Para este ejercicio te recomendaría usar class en lugar de id, pues no va a ser un único resultado.
Hay que tener en cuenta que lo único que está haciendo document.write es agregar el texto que le indiquemos al documento HTML, y que el navegador interpretará ese texto como si hubiera estado escrito en el documento original. Este método para agregar contenido HTML es práctico en situaciones como la que se plantea en el ejercicio, pero ya veremos más adelante que la manera recomendada de agregar nuevo contenido a los documentos en modificando el DOM. Igualmente JS puede interactuar directamente con el estilo de una página, pero, una vez más, a través del DOM.

Humberto Ruiz's picture
Humberto Ruiz
Thu, 2011-02-10 20:55

ahh ok ya entiendo muchas gracias

Luis Palomo's picture
Luis Palomo
Sun, 2011-02-13 22:52

Hola, no he sido capaz de hacer funcionar el css con el contenido añadido por javascript, lo que he intentado es lo siguiente:

document.write('<p class="anadido">');
...
otras sentencias document.write("string");
...
document.write('</p>');

lo curioso es que sí define el texto encerrado como párrafo pero no se le aplican las reglas definidas para la clase "anadido"... ¿Alguna sugerencia?
------------------------------------------
EDIT: Ésto sucede cuando se define el código javascript en un archivo externo, al parecer en este caso el método genera un documento en blanco que va llenando con lo que se le pase como argumento, a diferencia de cuando se incluye en código dentro del documento xHTML en que lo que se pasa como argumento se agrega al documento. Para que funcione de esta forma habría que rearmar el documento (la estructura xhtml + cargar css + cargar código javascript que se vaya a usar más adelante). Encontré la solución muy fea, por lo que mejor incrusté el código en el documento xHTML, al menos ya sé que la forma recomendada es agregar contenidos manipulando el DOM.

David Suárez's picture
David Suárez
Mon, 2011-02-14 19:04

Hola. Gracias a todos por los comentarios para la pregunta de Luis. Como algunos quizás hayan notado o leído, la función document.write requiere para funcionar dos cosas: 1) que en el contexto en que se ejecuta la aplicación haya un objeto document, y 2) que ese objeto document pueda escribir aún datos.
La mayor parte de los problemas que se pudieron haber encontrado al usar esta función con seguridad provienen del segundo punto, pues éste significa que document.write sólo se puede ejecutar mientras el documento HTML se está cargando, ni antes ni después, por lo que la ejecución de nuestro código Javascript actual interfiere, necesariamente, con la carga normal del documento, incluídas las hojas de estilo CSS.
Para aquellos que tuvieron problemas y ya lograron resolverlos, se han enfrentado exitosamente a un elemento esencial de la programación, que es la detección y la corrección de los errores (o bugs) de programación. Para aquellos que aún no logran resolverlo, les recomiendo seguirlo intentando, pues como se dice comúnmente: "de los errores también se aprende" (y en programación se aprende mucho).
Esta semana revisaremos, entre otras cosas, mejores formas de ejecutar nuestro código Javascript, de manera que no interfiera con la carga normal de la página.

Humberto Ruiz's picture
Humberto Ruiz
Mon, 2011-02-14 00:44

por que no defines el class en el xhtml , y haces uso de el ya en el document.write ...
ejemplo de lo que yo hice...
primero tuve que definir un estilo:

<style type="text/css">
.boldred{font-weight:bold; background-color: red;}
</style>

y despues en la seccion de javascript lo llame de esta manera :
document.write("<p>El resultado de la operacion OR con los dos resultados es : <em class=\"boldred\">" + op2 + "</em></p>")

y asi no tuve ningun problema, aunque todo lo hice en el mismo xHTML, sin poner un archivo de javascript externo.

Humberto Ruiz's picture
Humberto Ruiz
Mon, 2011-02-14 00:48

Espero y te sirva

Rodny Perez's picture
Rodny Perez
Mon, 2011-02-14 00:50

puedes poner las etiquetas

<p>,<h1>,<h2>...


dentro de document.write(""), debes ponerlas entre comillas... si usas un archivo para el CSS, debes asignarles los valores a esas etiquetas.

Rodny Perez's picture
Rodny Perez
Mon, 2011-02-14 00:56

Para poder utilizar el CSS desde un archivo externo debes utilizar el siguiente codigo:

<link rel="stylesheet" href="nombredearchivo.css" type="text/css">

y en el darle lo que deseas a cada etiqueta. Lo recomendable es hacer el css en un archivo externo. Mas bonito y menos complicado. Espero te sirva, asi lo hice yo.

Rodny Perez's picture
Rodny Perez
Thu, 2011-02-17 17:57

A que te refieres con incluir el evento. "Hola eventos JavaScript"?

David Suárez's picture
David Suárez
Fri, 2011-02-18 01:52

Hola Rodny, esa instrucción se refiere a que la primera función que se implemente, para el tercer ejercicio, debe mostrar, al activarse, un mensaje que incluya la cadena de texto "Hola eventos Javascript". Esto pueden hacerlo, como en los ejercicios anteriores, con la función alert("Hola eventos Javascript"). Espero esto aclare la duda.

Humberto Ruiz's picture
Humberto Ruiz
Sat, 2011-02-19 07:30

aqui hay informacion sobre las funciones de javascript sobre como llamarlas...

http://www.w3schools.com/js/js_functions.asp

Carla's picture
Carla
Sun, 2011-02-20 23:50

Después de la clase de hoy se me solucionaron varias dudas, me queda resolver la segunda parte del ejercicio:

"Cada función debe ejecutarse cuando se active un evento en la página. El texto de la página o un estilo particular con CSS debe hacer servir de guía al usuario sobre cuáles son los elementos activos (los que causarán que se ejecuten las funciones). La tercera función debe desactivarse cuando el usuario conteste negativamente a la pregunta de la segunda función, y activarse si contesta positivamente o si no se ha ejecutado la segunda función."

Ya logre que cada función se activara apretando un botón por ejemplo. Al principio tengo los 3 botones activados, pero no se como hacer para que con el confirm de la segunda función el botón que activa la tercera se desactive desde JavaScript.

Gracias!

David Suárez's picture
David Suárez
Mon, 2011-02-21 01:01

Hola Carla, hay una manera de desactivar el botón, aunque aún no la hemos visto, que requiere acceder al botón a través del DOM o a través de un atributo id y cambiando su propiedad disabled a false. Sin embargo eso no desactiva la función, sino sólo el botón que dispara la función, aunque al final el resultado es el mismo. La otra forma, que yo había pensado que podían usar para este ejercicio es empleando una variable global, de manera que la tercera función emplee el valor de esa variable global para ejecutar, o no, su contenido. El valor de la variable global sería cambiado por la segunda función.
Bueno, espero que esto ayude. Si hay alguna otra duda, adelante.
Saludos.