Enunciado

Vas a hacer un programa que resuelva el siguiente problema: se pedirá una explicación sobre un tema, por título o por palabra que contenida en él. Cuando elija con uno u otro método, se mostrará debajo el tema en cuestión, si es elegido por título, o el tema que contenga ese texto, si se ha elegido por una palabra contenida. Cuando haya varios temas que contengan esa palabra, los mostrará todos. Si no hay ninguno, dará el mensaje de error correspondiente.

Asegúrate que entiendes el enunciado antes de continuar. Pregunta al profesor si no lo ves claro.

Resolución

Empieza preparando una página con varios div de la clase tema, con un id que va a ser el nombre de cada uno. Prepáralo ahora, antes de seguir.

Enlaza un fichero CSS en que haces que la clase tema sea invisible. Ahora.

Al principio de la página vamos a preparar el formulario de selección. Identifica el formulario con el id "dat"

Dentro del formulario, el primer elemento que vamos a añadir es la selección por tema. Pon un texto del tipo "Elige tema" y prepara un SELECT para que el usuario elija el tema que quiere.

Pon las etiquetas de apertura y cierre de SELECT. Dentro vamos a rellenar la lista con los temas que se pueden elegir.

Prepara las etiquetas OPTION para cada tema de forma que su atributo value coincida con el id del DIV del tema correspondiente.

Ahora pon un texto para pasar a ofrecer la selección por una palabra o palabras contenidas.

Después irá un elemento que permita indicar esa palabra o palabras.

Indica la etiqueta que te parezca correcta

<input type="text" name="palabra" id="pedpal">
<select name="palabra" id="pedpal">
Vale. Para recoger lo que tecleen podremos usar el id o el name
¿¿¡¡Piensas hacer una lista desplegable con todas las palabras posibles!!??

Ahora vamos a ocuparnos de cómo reaccionará la página cuando seleccionen un elemento de la lista de temas.

Pondremos que reaccione en cuanto seleccionen uno

¿A quién y cómo le ponemos la llamada a la función correspondiente?

En el SELECT ponemos onload="..."
En el SELECT ponemos onchange="..."
En cada OPTION ponemos onclick="..."
En el FORM ponemos onmousemove="..."
No onload se refiere a la carga de la página
No, el evento está asociado al SELECT, no a las opciones individuales
Entonces, en cuanto acercases el ratón al formulario se dispararía.
Vamos a ocuparnos de esa función. Pon las etiquetas Javascript correspondientes (también para jQuery) y entra en el fichero del programa.

Prepara la cabecera de la función.

Dentro, empieza ocultando todos los temas (por si había alguno visto) usa el selector de clase de jQuery y el método hide()

A continuación vamos a recuperar el id elegido.

Lo haremos por partes. Empezamos sacando el número de opcion elegida ¿Cómo?

$("iddelselect").selectedIndex
$(".iddelselect")[selectedIndex]
$("#iddelselect").attr("selectedIndex");
Así, estás buscando el conjunto de elementos cuya etiqueta sea IDDELSELECT, que adem´as no van a tener una propiedad selectedIndex
No. selectedIndex ah´i entre corchetes no va a significar nada. Adem´as iddelselect no es una clase, sino el id del SELECT
Sí, usando jQuery
Mete ese valor en la variable numsel

Ahora sacaremos el elemento OPTION seleccionado. ¿Cómo?

document.nombreform.nombreselect[numsel]
document.nombreform.nombreselect.numsel
Pues no, numsel no es un atributo, sino un indicador
Ahora tenemos que sacar el numsel del tema que nos interesa.

Según hayas construido los OPTION podrás hacerlo con su atributo value o text, como vimos más arriba. Guarda ese valor en una variable

Ahora usa esa variable para construir una instrucción jQuery que visualice ese DIV

Con eso quedaría lista esa parte. Cierra la llave de la función. Pruébala y si te da problemas consulta con el profesor.

Vamos ahora con la selección por palabras.

Esta vez tenemos que recoger los cambios en el elemento TEXT. Usa onchange con otra función

Métete en el programa y pon la cabecera de la función.

Dentro, empezamos recogiendo el texto que han introducido en el TEXT Vamos a ponerlo en la variable palabra ¿Cómo?

palabra=document.nombreform.nombretext.text;
palabra=document.nombreform.nombretext.value;
palabra=$("#idtext").text;
palabra=$("#idtext").attr("value");
No, no es text
No, no es text
Sí, sacando el atributo value con jQuery
Ahora tenemos que sacar todos los DIV que tengan dentro el valor de palabra y meterlos en la variable temas ¿Cómo?
temas=$("div:contains("+palabra+")");
temas=$(".tema:contains("+palabra+")")
Sí, si no hay más DIV que los de los temas
Sí, porque todos los temas están puestos a la clase "tema" ¿verdad?
Ahora tenemos dos casos:
  1. Que no haya. Entonces hay que sacar un mensaje de error
  2. Que haya. Entonces lo visualizamos.

¿Cómo sacamos cuántos hay?

temas.length
Prepara el bloque if que comprueba los casos

En el caso de que sea 0, usa un alert para sacar el mensaje de error

En otro caso, procede cómo en la otra función: ocúltalos todos y muestra sólo los elegidos (temas.show())

Pon la llave de cierre del programa y pruébalo todo. Si te da problemas avisa al profesor.