krouzek:objekty

Úkoly

Přidejte formulářové prvky, zapsání do objektu a zobrazení pro další atributy: vek, pohlavi, vyska
Zkusíme si vypsat vše co o pejskovi víme: for cyklus pro objekty
Z pole vsichniPsi zkuste vybrat všechny splňující nějaký atribut - například mladší 3 let

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Objekty</title>
 
    <style>
    /* Vychozi CSS stylovani prijde sem*/
 	td {border: 1px solid black; padding:0.3em}
 	table {border-collapse: collapse}
 
 
    /* */
    </style>
 
</head>
 
<body>
	<p>Jméno:
		<input type="text" id="jmenoVstup">
	</p>
	<p>Rod:
		<input type="text" id="rodVstup">
	</p>
	<input type="submit" value="Pridej" onclick="pridej()" >
 
 <div id="vystup"></div>
    <script>
    /* <![CDATA[ */
    var pes1 = {
		jmeno: "Haryk",
		rod: "Teriér",
		vek: 3,
		vyska: 40
	}
	var vsichniPsi = [ pes1 ]
 
	// vystup do tabulky
	function zobrazPsy(){
		var vystupKod = ""
		for(var indexPsa=0;indexPsa<vsichniPsi.length; indexPsa++){
			var tentoPes = vsichniPsi[indexPsa]
			vystupKod += "<p>"
			vystupKod += "Pejsek se jménem " + tentoPes['jmeno']
			vystupKod += ", je to " + tentoPes['rod']
			vystupKod += "</p>"
		}
		document.getElementById('vystup').innerHTML = vystupKod
	}
 
	// Pridani psa
	function pridej(){
		var jmeno = document.getElementById('jmenoVstup').value
		var rod = document.getElementById('rodVstup').value
 
		var novyPes = {
			jmeno: jmeno,
			rod: rod
		}
 
		vsichniPsi.push(novyPes)
		zobrazPsy()
	}
 
	// na zacatku zobraz psy
	zobrazPsy()
 
    /* ]]> */
    </script>
</body>
</html>