Keskustelu: Nettisivujen teko: Yhteistyö HTML:n ja JavaScriptin välillä

Tässä taas koodailin javascriptejä, niin huomasin, että scripti on hankala laittaa yhteistyötön html kielen kanssa.

Onko mahdollista esim. sisällyttää html taulukkoon pätkä javascriptiä. Toisin sanoen jossakin taulukon boksissa kutsua javascriptin funktiota, esim LaskeKeskiarvo(arvo1, arvo2), joka voisi mennä vaikka näin:

fuction Laskekeskiarvo(arvo1, arvo2){
document.write((arvo 1+arvo2)/2);
}

Ja sitten tuohon html:n taulukon boksiin ilmestyisi niiden kahden luvun keskiarvo.

kutsu html:ssa voisi tapahtua esimerkiksi näin:
....<td>
"scriptname.Laskekeskiarvo(4,6)"
</td>...

Mutta tämä ei siis ollut mahdollista, mutta kysymykseni on, että kuinka paljon pystytään sekoittamaan näitä kahta kieltä toisiinsa? Onko olemassa jokin parametri strategia, miten niinden kielien välille saataisiin kommunikointia?
Onko mitään taktiikka, miten voisin toteuttaa esimerkiksi tämän ongelman, jossa minun pitäisi saada tuonne taulukon sisälle keskiarvo-metodin paluuarvo? tai mahdollisesti, niin kuin esimerkin mukaan, tuo keskiarvo-metodi voisi itse kirjoittaa html taulukon boksiin, niin ettei koko näyttö muutu valkoiseksi ja scripti kirjoituksen (=document.write) lisäksi jäisi jäljelle kaikki muukin html kielessä määritellyt kirjoitukset ja kuvat.

Esim. näin

<td id="vastaus"></td>

function Laskekeskiarvo(arvo1, arvo2) {
  return (arvo1 + arvo2) / 2);
}

document.getElementById('vastaus').firstChild.nodeValue = Laskekeskiarvo(4, 6);

Näistä asioista ois tarkotus tulla opas jossain vaiheessa.

Kiitokset!

Näyttääpä todella olevan nihkeästi tietoa tuosta kommunikoinnista näiden kahden kielen välillä.
Täytyy kysyä, jaksaisko joku selittää pikkasen teoriaa tästä kommunikoinnista, ihan vain pari perusjuttua tai homman ideaa, niin että pystyisin pikkasen soveltamaan tuota tietoa?

https://www.google.fi/search?q=JavaScript DOM tutorial

Paulus M kirjoitti:

Näyttääpä todella olevan nihkeästi tietoa tuosta kommunikoinnista näiden kahden kielen välillä.

Enpä kyllä sanoisi noinkaan, sillä aihetta (dom) käsitellään nykyään erittäin paljon, esim. ajaxin yleistyttyä "räjähdysmäisesti" sekä niihin liittyvien js-kirjastojen dokumenteissa.

Tuota document.write-funktiota ei todellakaan kannata ajatella "tulostamisena". Täälläkin on hyvä opas: http://www.howtocreate.co.uk/tutorials/javascript/domintroduction.

Blaze kirjoitti:

document.getElementById('vastaus').firstChild.nodeValue = Laskekeskiarvo(4, 6);

Vähän makuasia, mutta minusta innerHTML on selkeämpi (ja lyhyempi):

document.getElementById('vastaus').innerHTML = Laskekeskiarvo(4, 6);

innerHTML on helpompi, mutta toisaalta ei myöskään standardinmukainen; Microsoftin keksintöjä. Itseasiassa Firefox 1.0 ei tukenut sitä Strict XHTML:ssä siitä johtuen, mutta tämä sitten muutettiin 1.5:ssä.

Mutta on innerHTML sentään vähän "parempi" juttu kuin document.write, jälkimmäinen kun voi aiheuttaa sivun täyskatoamisen aika helpostikin.

Mihis toi teidän antama esimerkki täytyy sijoittaa, kun laitoin ihan sattuman varaiseen paikkaan scriptissä tuon:

document.getElementById('vastaus').innerHTML = Laskekeskiarvo(4, 6);

ja pistin sitten html tagin <td> id = "vastaus"</td> sinne html taulukkoon, niin kuin varmaan kuuluukin, mutta sitten firefox:in error concole ilmoittaa tästä getElementByid:stä, että: document.getElementById("vastaus") has no properties.

Niin mitäs tein väärin?

Paulus M kirjoitti:

Mihis toi teidän antama esimerkki täytyy sijoittaa, kun laitoin ihan sattuman varaiseen paikkaan scriptissä tuon

Mm, no sellanen pointti, että tuon HTML-elementin, jonka sisältöä vaihetaan, pitää olla olemassa, jota se ei välttämättä oo, jos sivu ei oo kokonaan ladattu kun JS suoritetaan.
Voit joko heittää skriptin jonnekin sivun loppuosaan tai laittaa jonkun eventin (esim. onload) suorittamaan sen.
Kato myös tuo ketju: https://www.ohjelmointiputka.net/keskustelu/15757-window-onload

Paulus M kirjoitti:

ja pistin sitten html tagin <td> id = "vastaus"</td> sinne html taulukkoon

<td id="vastaus></td>
Väkästen paikalla on väliä.

Ai joo, toimii nyt ku laitoin scriptin loppuun, kiitokset. Voisin tähän loppuun kysäistä vielä, että jos haluan samalla taktiikalla välittää String valuen, eli kirjoituksen, niin pitääkö jotakin muuttaa?

Nyt tulee: "undefined + Stringin_sisältö", jos en tee mitää muutoksia metodiin.