JavaScript código dinámico Formulario, select, checked, selectedIndex CU01179E

[bermartinv]

Hola chicos,dejo mis soluciones del tema CU01179E del tutorial de programación web con JavaScript.

https://www.aprenderaprogramar.es/index.php?option=com_content&view=article&id=867:eventos-forms-javascript-change-radio-checkbox-select-value-checked-options-selectedindex-cu01179e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

Responde estas preguntas (mantén la consola activada para ver posibles mensajes de error):

a) ¿Qué código es el que hace posible que cuando se selecciona el radio button Sr aparezca la imagen caraHombre.jpg y que cuando se selecciona el radio button Sra aparezca la imagen caraMujer.jpg?

Antes de nada metemos en una variable los elementos que son radio buttons
     

Código: [Seleccionar]

radioButTrat = document.getElementsByName("tratamiento"); //Nodos radio buttonsDespués le añadimos un evento en caso de hacer click en cualquiera de los radio y llamamos a la funcion actualizarDatos
       

Código: [Seleccionar]

for(var i=0; i<elementosDelForm.length;i++) {

                if (elementosDelForm[i].type == 'radio') {elementosDelForm[i].addEventListener("click", actualizarDatos);}
Posteriormente tratamos los datos de los radio button en la funcion. Recorremos lo radio que tenemos y si está alguno checkeado metenemos en la variable 'radioButSelValue' el valor de ese radio. Si esta variable es distinta a vacio y es igual a Sr. se le añade la foto de Pedro sino la de Vilma.

Código: [Seleccionar]

for (var i=0; i<radioButTrat.length; i++) {if (radioButTrat[i].checked == true) { radioButSelValue= radioButTrat[i].value;} }

if (radioButSelValue != ''){

                if (radioButSelValue =='Sr.') {rutaImagen='http://i1336.photobucket.com/albums/o646/alejrod872/Curso%20JavaScript/CU01179E_1_zps77ab9108.jpg?t=1412436617';} else {rutaImagen='http://i1336.photobucket.com/albums/o646/alejrod872/Curso%20JavaScript/CU01179E_2_zpsf09ad002.jpg?t=1412436624';}

                document.getElementById('encuadraImagen').innerHTML = '';

                document.getElementById('encuadraImagen').style.background='url("'+rutaImagen+'") no-repeat';

}

b) ¿ radioButTrat es una variable global o local a una función? ¿Por qué?

radioButTrat es una variable global, está definida en la función anónima que se carga cuando la página está abierta, y posteriormente es usada por la funcion actualizarDatos. En JavaScript es reconmendable definir las variables al principio del cuerpo de la función y preferibremente con ámbito global para posteriormente al manejar otras funciones no tener `problemas de ámbito (SCOPE).

c) ¿radioButTrat es una array o un objeto NodeList de tipo array-like? ¿El método length es aplicable a objetos de tipo array? ¿El método length es aplicable a objetos de tipo array-like?

radioButTrar es una array de nodos que tienen como name='tratamiento'.El metodo getElementsByTagName() devuelve un node list. Un node list es una colecion de nodos  array-like.
El método length si es aplicable a objetos array ya que te dá la longitud de ese vector, la cantidad de elementos dentro de el.
Lo mismo sucede con array de nodos.

d) ¿Qué ocurre si tratas de aplicar el método push a radioButTrat? Escribe el código para ello. ¿Qué mensaje visualizas en la consola? Busca información y trata de explicar por qué ocurre esto.

Nos da un error.
var conjunto = radioButTrat.push(casillaDatos);
TypeError: radioButTrat.push is not a function
 Lo que pasa es que el error dice que estas intentando usar un objeto como una función.

e) ¿Las imágenes son el fondo de un elemento HTML distinto de img o es el atributo source de un elemento img?

Código: [Seleccionar]

document.getElementById('encuadraImagen').innerHTML = '';
   document.getElementById('encuadraImagen').style.background='url("'+rutaImagen+'") no-repeat';

.........
 
  <div id="encuadraImagen"><h1> ? </h1></div><br/>

  Las imagenes son el fondo del elemento HTML con id='encuadraImagen', primero eliminamos el codigo innerHTMML interno a él y posteriormente asignamos una url con la imagen.

f) ¿checkBoxSel es un array o un NodeList de tipo array-like?

Código: [Seleccionar]

var checkBoxSel = new Array();checkBoxSel se define como un array vacio.

g) ¿Qué significa y para qué sirve este código: checkBoxSel||' --- ' ?

Significa que si no tiene ningún valor asignado checkBoxSel coja el valor que se encuentra entre comillas en este caso ' --- '

h) ¿Y este otro: elementoCiudad.options[elementoCiudad.selectedIndex].text ?

En este código elementoCiudad es la variable que hemos utilizado para asignar el elemento select.
elementoCiudad.options --> hace referencia a los elementos options que tiene el select
[elementoCiudad.selectedIndex].text --> el elemento de los posibles options que tiene select que esta seleccionado asignamos el text que tiene para usarlo.

Saludos.

[pedro,,]

Buenas bermartinv.

Todas las respuestas bien, solo comentar algo que pusiste en la respuesta b y d:

En JavaScript es reconmendable definir las variables al principio del cuerpo de la función y preferiblemente con ámbito global para posteriormente al manejar otras funciones no tener `problemas de ámbito (SCOPE).

Si declarásemos todas las variables con ámbito global, en este caso probablemente no nos afectaría mucho, pero en un código mas extenso estaríamos sobrecargando el uso de memoria. Por lo cual lo aconsejable sería que las variables, siempre que podamos evitar declararlas en ámbito global, las declaremos con ámbito local.

Y sobre la pregunta d, el error se produce porque un array-like no tiene todas las propiedades de un array, y en este caso no se le puede aplicar el  método push() que sirve para añadir nuevos elementos al final de una array.

Saludos.

[bermartinv]

Si pedro,, referente a lo que dices de las variables globales tienes razón. Lo que quería haber dicho que lo dije mal, y no es aplicable en este ejercicio es que:
Una manera de minimizar el uso de variables globales es crear una variable global para cada aplicación y dentro de esta las propiedades,etc.... .Así también evitamos entrar en conflicto con propiedas o variables de otras librerias.
Saludos y gracias