Examen de mostra. Cotxes i vocabulari d'anglès

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

Se't dóna l'enunciat d'una prova que es va realitzar en un any previ. L'hauràs de resoldre.

Aclaració

En l'examen hem de fer un fitxer JSON que representi un array de 5 cotxes. Se us dóna dues solucions possibles (encara que similars) per fer aquest array:

fitxser cotxes1.json:

{ "cotxes": [
	{	"id": 1,
		"marca": "Seat",
		"model": "Alhambra",
		"image":
			{
				"url": "img/1.jpg",
				"width": 200,
				"height": 200
			},
		"thumbnail":
			{
				"url": "thumb/1.jpg",
				"width": 32,
				"height": 32
			}
	},
	{	"id": 2,
		"marca": "Citroen",
		"model": "Berlingo",
		"image":
			{
				"url": "img/2.jpg",
				"width": 200,
				"height": 200
			},
		"thumbnail":
			{
				"url": "thumb/2.jpg",
				"width": 32,
				"height": 32
			}
	},
	{	"id": 3,
		"marca": "Opel",
		"model": "Astra",
		"image":
			{
				"url": "img/3.jpg",
				"width": 200,
				"height": 200
			},
		"thumbnail":
			{
				"url": "thumb/3.jpg",
				"width": 32,
				"height": 32
			}
	}
]
}

fitxer cotxes2.json:

[{
	"id": 1,
	"marca": "Citroen",
	"model": "XSara",
	"image":
	{
		"url": "img/1.jpg",
		"width": 200,
		"height": 200
	},
	"thumbnail":
	{
		"url": "thumb/1.jpg",
		"width": 32,
		"height": 32
	}
},
{
	"id": 2,
	"marca": "Renault",
	"model": "Express",
	"image":
	{
		"url": "img/2.jpg",
		"width": 200,
		"height": 200
	},
	"thumbnail":
	{
		"url": "thumb/2.jpg",
		"width": 32,
		"height": 32
	}
},
{
	"id": 3,
	"marca": "Peugeot",
	"model": "Partner",
	"image":
	{
		"url": "img/3.jpg",
		"width": 200,
		"height": 200
	},
	"thumbnail":
	{
		"url": "thumb/3.jpg",
		"width": 32,
		"height": 32
	}
}]

En el primer cas hem definit l'objecte cotxes, que per valor té un array de 5 objectes. En el segon cas hem definit directament un array de 5 objectes. Podríem dir que en el primer cas a l'array li hem donat un nom, i en el segon cas a l'array no li hem donat cap nom.

Tant un cas com l'altre ens serveixen per accedir a la informació des de Javascript, però la manera de fer-ho és una mica diferent. En el primer cas:

txt=xmlhttp.responseText;
var jsondata = JSON.parse(txt); 
var items = jsondata.cotxes;

on cotxes és el nom de l'array segons podem veure en el fitxer cotxes1.json.

En el segon cas:

txt=xmlhttp.responseText;
var items = JSON.parse(txt);

Tant en un cas com en l'altre tenim a items la representació del nostre array de cotxes, i per tant el podem recórrer mitjançant un bucle i items.length.

El codi que mostra les dues maneres de procedir és:

fitxer llista_cotxes_v1.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Llista Cotxes</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html charset=utf-8" />
<script>
function llistar_cotxes()
{
	llistar_cotxes1();
	llistar_cotxes2();
}

function llistar_cotxes1()
{
	var xmlhttp;
	var txt;
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			txt=xmlhttp.responseText;
			//http://www.javascriptkit.com/dhtmltutors/ajaxgetpost4.shtml
			//var jsondata = eval("("+txt+")"); //retrieve result as an JavaScript object
			//millor:			
			var jsondata = JSON.parse(txt); 
			var items = jsondata.cotxes;
			var output = '<ul>';
			for (var i = 0; i < items.length; i++){
			 output += '<li>';
			 output += items[i].id + ': ' + items[i].marca + ' ' + items[i].model + ' ' + items[i].image.url;
			 output += '</li>';
			}
			output += '</ul>';
			document.getElementById("cotxes1").innerHTML = output;
		}
	}
	xmlhttp.open("GET","cotxes1.json",true);
	xmlhttp.send();

}

function llistar_cotxes2()
{
	var xmlhttp;
	var txt;
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			txt=xmlhttp.responseText;

			//var jsondata = eval("("+txt+")"); //retrieve result as an JavaScript object
			//millor:
			var items = JSON.parse(txt); 

			var output = '<ul>';
			for (var i = 0; i < items.length; i++){
				output += '<li>';
				output += items[i].id + ': ' + items[i].marca + ' ' + items[i].model + ' ' + items[i].image.url;
				output += '</li>';
			}
			output += '</ul>';
			document.getElementById("cotxes2").innerHTML = output;
		}
	}
	xmlhttp.open("GET","cotxes2.json",true);
	xmlhttp.send();

}

</script>
</head>
<body onload='llistar_cotxes()'>
<h1>Llista dels cotxes</h1>
<h2>Primer es fa una crida AJAX, després l'altra</h2>
<div id="cotxes1">
</div>
<div id="cotxes2">
</div>
</body>
</html>

NOTA: el professor s'ha trobat que en modificar el fitxer json, els canvis no es veien, degut a problemes amb la cache, com ja s'ha comentat d'altres vegades. Una possible solució és fer:

xmlhttp.open("GET","cotxes1.json?t=" + Math.random(),true);

En l'exemple anterior primer hem una crida AJAX, i després l'altra, reutilitzant el mateix objecte. En el següent exemple instanciem dos objectes diferents, i fem les dues crides AJAX de forma simultània. Aquest petit exemple només és per prendre nota de què l'esquema bàsic de crida AJAX que hem estat fent aquestes últimes setmanes només és un esquema, que nosaltres podem adaptar i modificar a cada circumstància, incorporant diferents tècniques.

fitxer llista_cotxes_v2.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Llista Cotxes</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html charset=utf-8" />
<script>

function llistar_cotxes()
{
	var xmlhttp1, xmlhttp2;
	var txt1, txt2;
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp1=new XMLHttpRequest();
	  xmlhttp2=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
		xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP");
		xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
	}

	xmlhttp1.onreadystatechange=function()
	{
		if (xmlhttp1.readyState==4 && xmlhttp1.status==200)
		{
			txt1 = xmlhttp1.responseText;		
			var jsondata = JSON.parse(txt1); 
			var items = jsondata.cotxes;
			var output = '<ul>';
			for (var i = 0; i < items.length; i++){
			 output += '<li>';
			 output += items[i].id + ': ' + items[i].marca + ' ' + items[i].model + ' ' + items[i].image.url;
			 output += '</li>';
			}
			output += '</ul>';
			document.getElementById("cotxes1").innerHTML = output;
		}
	}

	xmlhttp2.onreadystatechange=function()
	{
		if (xmlhttp2.readyState==4 && xmlhttp2.status==200)
		{
			txt2=xmlhttp2.responseText;
			var items = JSON.parse(txt2); 

			var output = '<ul>';
			for (var i = 0; i < items.length; i++){
				output += '<li>';
				output += items[i].id + ': ' + items[i].marca + ' ' + items[i].model + ' ' + items[i].image.url;
				output += '</li>';
			}
			output += '</ul>';
			document.getElementById("cotxes2").innerHTML = output;
		}
	}

	xmlhttp1.open("GET","cotxes1.json",true);
	xmlhttp1.send();

	xmlhttp2.open("GET","cotxes2.json",true);
	xmlhttp2.send();

}


</script>
</head>
<body onload='llistar_cotxes()'>
<h1>Llista dels cotxes</h1>
<h2>Les dues crides AJAX es realitzen al mateix temps</h2>
<div id="cotxes1">
</div>
<div id="cotxes2">
</div>
</body>
</html>

Feina per l'alumne

Aquest examen es va proposar a un curs previ. L'examen de la UF que hauràs de realitzar serà d'un nivell similar.

Entrega

Els alumnes entregaran al Google Classroom tots els fitxers generats. S'empaquetaran tots aquests fitxers i es pujaran al Classroom dins del termini d'entrega de la pràctica.

Recorda la normativa per entregar les pràctiques al Schoology: ASIX-M11-SAD#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Moodle

Solució


creat per Joan Quintana Compte, abril 2018

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines