Keskustelu: Nettisivujen teko: Parametrin välitys(javascript)

Vielä yksi kysymys parametrin välityksestä javascriptin ja html:n välissä.

Eli jos haluan vaikka määrittää taulukon koon jonkun javascript muuttujan mukaan, niin miten se tapahtuu?

Eli pseudokoodina:

<table height ="Javascript_name.muuttuja1">

Eli tuosta height:sta pitäisi tehä dynaaminen riippuen, jonka arvo riippuisi siitä, että miksi scripti sen määrittää?

Toinen kysymys, onko html kielessä mahdollisuus tehdä muuttujia?
Esimerkiksi, jos joku tietty luku, vaikka taulukon leveys toistuu useassa taulukossa ja haluan muuttaa kaikkien näiden taulukoiden leveyttä yhdellä kertaa, niin miten se onnistuisi?

Useammissa ohjelmointikielissä voisin kirjoittaa että int taulukonleveys = 100 ja laittaisin jokaiseen html taulukon leveydeksi: width= taulukonleveys, mutta miten tällainen voitaisiin temppuilla html:ssä?

Taulukolle kannattaa ensinnäkin antaa id, jotta JavaScript löytää sen.

<table id="taulukko" style="height:100px;">

JavaScriptillä voi sitten muuttaa korkeutta varsin vaivattomasti:

document.getElementById("taulukko").style.height = "50px";

Paulus M kirjoitti:

Toinen kysymys, onko html kielessä mahdollisuus tehdä muuttujia?

Ei voi, HTML ei ole ohjelmointikieli. Mutta jos käytät palvelimella jotain ohjelmointikieltä (esim. Perl tai PHP) HTML:n tulostamiseen, voit käyttää apuna muuttujia.

Okka, kiitos tiedoista!

osaisitko sanoa samalla, että miks error console valittaa tästä:

function Ukko(nimi, sukunimi, syntymaaika, puhelinnumero, osoite, sahkoposti)	//class Ukko konsturktori
{
	this.nimi = nimi;
	this.sukunimi = sukunimi;
	this.syntymaaika=syntymaaika;
	this.puhelinnumero = puhelinnumero;
	this.osoite = osoite;
	this.sahkkoposti = sahkoposti;

	this.kokemuslkm =0;
	this.maxkokemusalat = 50;
	this.kokemusarvot = new Array(this.maxkokemusalat);
	this.kokemusnimet = new Array(this.maxkokemusalat);




	this.prototype.asetaPersoona = function(rehellisyys, aktiivisuus, omaaloitteellisuus)
	{
		this.rehellisyys = rehellisyys;
		this.aktiivisuus = aktiivisuus;
		this.omaaloitteellisuus = omaaloitteellisuus;
	}



	this.prototype.asetaUusiKokemus = function(kokemusala, kokemusarvo) //kokemusarvon yksikkö on kk.

	{
		this.kokemusnimet[this.kokemuslkm] = kokemusala;
		this.kokemusarvot[this.kokemuslkm] = kokemusarvo;
		this.kokemuslkm++;
	}




}

Eli tuossa olen vain siis yrittänyt määritellä kahta luokka metodia, mutta valituksena tulee firefox:in error console ilmoittaa:

this.prototype has no properties

Ei this.prototype, vaan Ukko.prototype.

Esimerkki:

function Testi(foo) {
    this.foo = foo;
}

Testi.prototype.bar = 5;

var testi = new Testi(2);
print(testi.foo); // 2
print(testi.bar); // 5

Toinen vaihtoehto olisi tallentaa funktiot suoraan oliolle, esim. this.asetaPersoona = function () { ... }, mutta sitten metodeista tehtäisiin uusi kopio joka kerta.

Metodeja voi lisätä prototypeen ihan milloin vaan. Itse olen esimerkiksi laajentanut JavaScriptin Array-oliota parilla kymmenellä metodilla ja liitän tämän tiedoston joka sivun alkuun.

Wikipediasssa näyttää olevan ihan hyvä artikkeli: http://en.wikipedia.org/wiki/Prototype-based_programming.

Kiitos, toimii!

Voinko kysyä vielä yhen kysymyksen? :)

Onko mahdollista tehdä mitään olio taulukkoa, niin kuin javassa on esimerkiksi näin

Ukko ukot = new Ukko[100];
ukot[0].asetaNimi("Pöhlö");
.....

Tarkoituksena olisi tehdä siis sivu, jossa käsitellään eri ihmisiä.
Ja kun käyttäjä painaa seuraava, niin sitten tulee seuraavan ihmisen arvot näkyviin.

Niin koodin minimoimiseksi olisi varmaan viisainta kirjoittaa se niin, että
olisi juokseva muuttuja i, joka kertoisi ketä ihmistä käsitellään:

document.getElementById('nimi').innerHTML = Ukko[i].nimi;
document.getElementById('ika').innerHTML = Ukko[i].ika;
...

sen sijaan että kirjoittaisi näin:

i = x; //jossa x on käsiteltävän henkilön id numero:


var nimi ="";
if(i = 0){nimi = Kalle.nimi;}
if(i = 1){nimi = Pertti.nimi;}
if(i = 2){nimi = Korsti.nimi;}
if(i = 3){nimi = Masa.nimi;}
....
document.getElementById('nimi').innerHTML = nimi;


var ika = 0;
if(i = 0){ika = Kalle.ika;}
if(i = 1){ika = Pertti.ika;}
if(i = 2){ika= Korsti.ika;}
if(i = 3){ika = Masa.ika;}
....
document.getElementById('ika').innerHTML = ika;

Eli tässä olisi yksi esimerkki miten sen voisi typerästi tehdä, mutta olisiko
joko tätä luokka taulukkoa mahdollisuus tehdä, taikka sitten joku fiksu vaihtoehtoinen ratkaisu?

Paulus M kirjoitti:

Voinko kysyä vielä yhen kysymyksen? :)

Juu, kysy vaan vaikka useampikin. :)

Paulus M kirjoitti:

Onko mahdollista tehdä mitään olio taulukkoa, niin kuin javassa on esimerkiksi näin

Ukko ukot = new Ukko[100];
ukot[0].asetaNimi("Pöhlö");
.....

Ainakin näin saa tehtyä, eli ihan vaan luodaan ne oliot yksi kerrallaan ja tallennetaan taulukkoon:

var ukot = [];
for (var i = 0; i < 100; i++) {
    ukot[i] = new Ukko(); // tai ukot.push(new Ukko());
}

Paulus M kirjoitti:

var nimi ="";
if(i = 0){nimi = Kalle.nimi;}
if(i = 1){nimi = Pertti.nimi;}
if(i = 2){nimi = Korsti.nimi;}
if(i = 3){nimi = Masa.nimi;}
....
document.getElementById('nimi').innerHTML = nimi;

Tuossa on aika klassinen virhe: vertailussa pitäisi käyttää kahta (tai kolmea) =-merkkiä. Tuo ei toimi ollenkaan niin kuin pitäisi, koska i-muuttujan arvo ylikirjoitetaan joka kerta. Mutta taulukolla tämä onnistuu joka tapauksessa kätevämmin, ihan vaan var nimi = ukot[i].nimi;.

Oi, suuret kiitokset!

Mun mielestä sun kaltaisille kavereille pitäisi kyllä maksaa palkkaa tästä vastailemisesta, koska siitä on niin rutosti apua.
Siinä menee aina viisi vuotta, ku lähtee googlesta selailee jotain informaatiota ja loppujen lopuksi sitä ei edes löydä.