Desenrolo de aplicacións con tecnoloxías web 2013: Semaforo

Exercicio JavaScript

Crear unha páxina que mediante unha función en JavaScript, permita amosar en pantalla a imaxe de un semáforo coa luz acendida correspondente á cor que se lle pase por parámetro.

NOTA:
Ese exercicio repasa a creación de funcións e o uso de if else e switch.

A nosa páxina web se limita a solicitar a cor desexada mediante un prompt, e pasar a resposta mediante unha variable a unha función.

<BODY>
 <SCRIPT>
  var colorActualSemaforo;

  colorActualSemaforo = prompt ("Indica a cor do semaforo");
  
  semaforo (colorActualSemaforo);
 </SCRIPT>
</BODY>
</HTML>

En canto á función pódese crear de diversos xeitos, a continuación duas posibles solucións.

A primeira repasa o uso da instrucción condicional if else:

function semaforo (colorActualSemaforo){
 //Temos unha variable na que se almacena unha das 
 //tres posibles cores que pode ter un semaforo
 //indicar que acción debe realizar o condutor
 var VERMELLO = "Vermello";
 var AMARELO = "Amarelo";
 var VERDE = "Verde";
 
 if (colorActualSemaforo == VERMELLO) {
  document.write("O vehiculo ten que parar.<br><br>");
  document.write("<img src='vermello.jpg'>");
 }
 else if (colorActualSemaforo == AMARELO) {
  document.write("O vehiculo pode pasar con precaución.<br><br>");
  document.write("<img src='amarelo.jpg'>");
 }
 else if (colorActualSemaforo == VERDE) {
  document.write("O vehiculo pode pasar a toda mecha.<br><br>");
  document.write("<img src='verde.jpg'>");
 }
 else {
  document.write("Luz descoñecida, revisa na imaxe as dispoñibles.<br><br>");
  document.write("<img src='coresSemaforo.jpg'>"); 
 }
}

Outra posible solución para a creación de esta función sería a utilización de unha estructura switch:

function semaforo (colorActualSemaforo){
//Temos unha variable na que se almacena unha das 
//tres posibles cores que pode ter un semaforo
//indicar que acción debe realizar o condutor
 
 switch (colorActualSemaforo){
  case "Vermello":
   document.write("O vehiculo ten que parar.<br><br>");
   document.write("<img src='vermello.jpg'>");
   break;
  case "Amarelo":
   document.write("O vehiculo pode pasar con precaución.<br><br>");
   document.write("<img src='amarelo.jpg'>");
   break;
  case "Verde":
   document.write("O vehiculo pode pasar a toda mecha.<br><br>");
   document.write("<img src='verde.jpg'>");
   break;
  default:
   document.write("Luz descoñecida, revisa na imaxe as dispoñibles.<br><br>");
   document.write("<img src='coresSemaforo.jpg'>"); 
   break;
 }
}