atividade56276

Prévia do material em texto

Atividade da Aula 08 
Crie um arquivo JSON que contenha os dados de 5 carros. Depois, usando as técnicas de AJAX contidas no guia de estudos, mostre o conteúdo desse arquivo em uma página HTML. 
Como enviar para correção?
Crie as página em um editor de sua preferência 
Depois de testadas, copie e cole o código de todas as páginas para o word (ou outro editor de texto)
Salve (ou exporte) em PDF
Envie o arquivo PDF para correção
index08.html
script08.js
dados08.json
https://localhost/ativ8/index08.html
[
	{
		"modelo" : "Uno",
		"anoModelo" : "2010",
		"anoFabricacao" : "2010",
		"marca" : "Fiat",
		"placa" : "HFV-4871"
	},
	
	{
		"modelo" : "Fusca",
		"anoModelo" : "1972",
		"anoFabricacao" : "1972",
		"marca" : "Volkswagem",
		"placa" : "HMJ-4521"
	},
	
	{
		"modelo" : "Civic",
		"anoModelo" : "2020",
		"anoFabricacao" : "2020",
		"marca" : "Honda",
		"placa" : "FNR-4521"
	},
	
	{
		"modelo" : "Corola",
		"anoModelo" : "2020",
		"anoFabricacao" : "2020",
		"marca" : "Toyota",
		"placa" : "HPS-4581"
	},
	
	{
		"modelo" : "Gol",
		"anoModelo" : "2015",
		"anoFabricacao" : "2015",
		"marca" : "Volkswagem",
		"placa" : "HJJ-4578"
	}
]
script08.js
function pegarValores(url, callback) {
 var xmlhttp;
 if (window.XMLHttpRequest){
 xmlhttp = new XMLHttpRequest();
 }else{
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 console.log('responseText:' + xmlhttp.responseText);
 try {
 var data = JSON.parse(xmlhttp.responseText);
 } catch(err) {
 console.log(err.message + " in " + xmlhttp.responseText);
 return;
 }
 callback(data);
 }
 };
 xmlhttp.open("GET", url, true);
 xmlhttp.send();
}
pegarValores('dados08.json', function(dados08) {
 
 var html = "<h3>Carros</h3>";
 for (var i=0; i < dados08.length; i++) {
 html += "Modelo: " + dados08[i]["modelo"]; 
 html += "<br>Ano do Modelo: " + dados08[i]["anoModelo"];
	 html += "<br>Ano de Fabricação: " + dados08[i]["anoFabricacao"];
	 html += "<br>Marca: " + dados08[i]["marca"];
	 html += "<br>Placa: " + dados08[i]["placa"] + "<br><br>";
 }
 document.getElementById("texto").innerHTML = html;
});
/*
"modelo" : "Uno",
		"anoModelo" : "2010",
		"anoFabricacao" : "2010",
		"marca" : "Fiat",
		"placa" : "HFV-4871"
		*/
index08.html
dados08.json