Joan: /* Solució */

2018-04-03T16:04:10Z

Solució

Pàgina nova

=Introducció=
Se't dóna l'enunciat d'una prova que es va realitzar en un any previ. L'hauràs de resoldre.
*[[Fitxer:Ex mostra UF4.zip]]
=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''':
<pre>
{ "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
}
}
]
}
</pre>
fitxer '''cotxes2.json''':
<pre>
[{
"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
}
}]
</pre>
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:
<pre>
txt=xmlhttp.responseText;
var jsondata = JSON.parse(txt);
var items = jsondata.cotxes;
</pre>
on ''cotxes'' és el ''nom'' de l'array segons podem veure en el fitxer ''cotxes1.json''.

En el segon cas:
<pre>
txt=xmlhttp.responseText;
var items = JSON.parse(txt);
</pre>
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''':
<pre>
<!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>
</pre>
'''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:
<pre>
xmlhttp.open("GET","cotxes1.json?t=" + Math.random(),true);
</pre>

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''':
<pre>
<!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>
</pre>

==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ó=
*[[Fitxer:Ex mostra.zip]]
{{Autor}}, abril 2018

Examen de mostra. Cotxes i vocabulari d'anglès - Historial de revisió

Joan: /* Solució */