Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: JavaScript harjoittelua

Paratiisin poika [26.09.2010 12:18:30]

#

Böhö. Haluaisin oppia hieman JavaScriot koodia. Osaan joitain hellpoja juttuja kunten documentwrite() ja alert(). Siinä se sitten oikeasteen olikin. Haluaisiko joku auttaa minua hieman? Yritän tehdä pientä ohjelmaa. Siinä on nappula jossa lukee br. Kun siitä painaa ilmestyy sivulle koodi "i<br>". Eli siis eka sivulla on nappi oikealla puolella. se on kokoajan sivun yläkulmassa, jonka määrittelen tyylifilulla elementtijuutulla position: fixed. Mutta nyt: Kun siitä napiasta painaa, tulee sivulle i kirjain. Kun painan uudestaan, ilmestyy uusi i kirjain. Taas painettaessa tulee i kirjain jne jne jne... Olen nyt saanut värkättyä toimimattoman koodin. Mikä vikana? Ps. Joo joo. Luen khyl sen js oppaan ku oon tän viestin postannu...

<html>
<head>
<style>
button {
  position: fixed;
  right: 10px;
}
</style>
<script type="text/javascript">
var i = 1;
var br = 0;
function br(i, br) {
while(i != br) {
br++
document.write('<br>i');
document.write('<button type="button" onclick="br();">br</button>')
}
</script>
</head>

<body>
<button type="button" onclick="br(i, br);">Lis&auml;&auml; i kirjain!</button>

</body>
</html>

Teuro [26.09.2010 13:13:58]

#

Moikka!

Poistin osan toimimatonta koodia ja siistin muutenkin koodia hiukan.

<html>
	<head>
		<script type="text/javascript">
			function br() {
				lista = document.getElementsByTagName("ul")[0];
				alkio = document.createElement("li");
				text = document.createTextNode("Juttu");
				alkio.appendChild(text);
				lista.appendChild(alkio);
			}
		</script>
	</head>
	<body>
		<ul>
		</ul>
		<button type="button" onclick="br();">Lisää i kirjain!</button>
	</body>
</html>

Paratiisin poika [26.09.2010 13:39:05]

#

Kiitos. Tutkailen miten tuo on tehty ja opiskelen hieman. :)

tsuriga [26.09.2010 14:22:07]

#

Komppaan tällä muutoksella:

// JavaScript
var button = document.getElementsByTagName("button")[0];
if (button.addEventListener) {
    button.addEventListener('onclick', br, false);
} else {
    button.attachEvent('onclick', br);
}

// HTML
<button type="button">Lisää i-kirjain!</button>

Sitomalla tapahtumat elementteihin koodissa saadaan eroteltua koodi ja sivun rakenne toisistaan.

jlaire [26.09.2010 16:52:44]

#

Alkuperäisessä koodissa on ainakin seuraavat ongelmat:

- On määritelty sekä muuttuja br että funktio br. Jompikumpi ylikirjoittaa toisen*, ja kutsu br(i, br) ei toimi halutulla tavalla.

- JavaScript ei interpoloi muuttujia automaagisesti; ('<br>i') pitäisi olla ('<br>' + i).

- document.write:n käyttö. Jos opit tämän jostain oppaasta, vaihda opasta. Oikea tapa on DOM, mielellään vielä jQueryn tai jonkun muun siistin kirjaston avulla.

- Vaikka puolipisteet lausekkeiden lopussa eivät olekaan pakollista, niiden käyttö on suositeltavaa.

Teuron koodissa kaikki br:n sisällä olevat muuttujat ovat globaaleja, koska niitä ei esitellä var-avainsanalla. Tämä ei ole bugi, mutta huonoa tyyliä joka voi aiheuttaa ongelmia ja saastuttaa turhaan nimiavaruutta.

* Kymmenen pisteen kysymys: kumpi kumman, vai riippuuko toteutuksesta?

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta