Keskustelu: Nettisivujen teko: JavaScript ja sisällön lisääminen

Eli en saa lisättyä tekstiä tiettyyn elementtiin. Myönnän ettei JS ole mitenkään hallussa, mutta silti on yritettävä tehdä mitä ihmeellisempiä virityksiä :P Minulla on siis erillisessä filussa tuo JS -koodi, joka näyttää tältä:

// js/koodi.js
document.write("JavaScript-koodi erillisessä tiedostossa.");
document.bgColor = "#fef0ff";

terve = "Hello World!";
document.getElementById('foo').innerHTML = terve;

Ensimmäinen ja toinen rivi toimii kyllä, mutta heti kun lisään mukaan tuon "getElementById()" -osan, niin hähää, eipäs toimikaan. Mulla on kyllä sivun rakenteessa div -elementti joka sisältää id:n "foo". Joten mikä tässä koodissani ei pelitä?

Toki tämä ei ole lopullinen tarkoitukseni. Vaan tarkoitus on myöhemmin lisätä kyseiseen diviin uusia div-elementtejä ja antaa näille jokaiselle omat tyylinsä (esimerkiksi oma taustakuva sekä top ja left sijainnit yms)

Toistaiseksi pääasiallinen tarkoitus on vain opetella JavaScriptiä, kun sitä ei ole koskaan tullut kokeiltua..

Ainakin document.write kannattaa unohtaa saman tien, se ei kerta kaikkiaan ole nykyaikaa. Varsinainen vika koodissa on varmaan se, että yrität ajaa sen liian aikaisin. Pääsääntöisesti sivun sisältöön vaikuttavat JS-koodit pitää ajaa vasta, kun sivu on kokonaan latautunut. Voit siis tehdä vaikka näin:

window.onload = function() {
	document.getElementById('foo').innerHTML = "Hei!";
};

Näin sivun latautumisen aikana asetetaan vain tapahtumankäsittelijä ja funktion sisällä oleva koodi ajetaan vasta myöhemmin. Vielä nykyaikaisempaa on käyttää onload-ominaisuuden sijaan addEventListener-funktiota tai vaikka jQuery- tai Prototype-kirjaston vastaavia funktioita.

Juu tuolla Metabolix:n esimerkki pätkällä lähti toimimaan.

Eli mun pitäs aina käyttää tuota onloadia tai muita mainitsemiasi esimerkkejä, jos haluan muokata javascriptillä dokumentin rakennetta?

Pitää käyttää, koska muuten JS-koodi suoritetaan siinä kohdassa, kuin se dokumentissa on, jolloin et tietenkään voi muokata elementtejä, joita ei vielä ole. HTML:ssä on periaatteessa mahdollista laittaa koodi sivun loppuun, jolloin se toimii myös sinun tavallasi, mutta se on ruma tapa. XHTML:ssä dokumentin muokkaaminen kesken latautumisen on kokonaan kielletty.

Ok, tämä on hyvä tietää. :)

Mites nuo "<!--//" ja "//-->" -merkit tiedoston alkuun ja loppuun? Ne eivät ole vissiin pakollisia, mutta kaiketi suotavia? ja XHTML:n kanssa "<![CDATA[" -merkinnät?

vai koskeeko tuo vain dokumenttiin sisällytettyjä "<script>" -elementtejä?

Nuo kaikki kikkailut koskevat vain dokumenttiin sisältyvää JS-koodia. Merkintöjen tarkoitus on estää JS-koodiin kuuluvien merkkien vaikutus HTML-koodiin. Merkinnät eivät ole tarpeen, jos koodi ei sisällä merkkejä <, > ja &, eli esimerkiksi <script>alert("moi");</script> on aivan kelvollinen koodinpätkä. HTML5:ssä merkintöjä ei tarvita muutenkaan (mutta XHTML5:ssä toki CDATA tarvitaan).

Yleensä kannattaa kuitenkin pyrkiä pitämään JS-koodi erillisessä tiedostossa, niin ei tarvitse kikkailla ja sivun lähdekoodikin pysyy siistimpänä.

Pentu kirjoitti:

Mites nuo "<!--//" ja "//-->" -merkit tiedoston alkuun ja loppuun?

Ne ovat silkkaa huuhaata, ellet oleta, että sivuasi katsellaan Netscape 1:llä.

lainaus:

Ne eivät ole vissiin pakollisia, mutta kaiketi suotavia?

Eivät kumpaakaan.

lainaus:

ja XHTML:n kanssa "<![CDATA[" -merkinnät?

Jos nyt joskus on syytä käyttää XHTML:ää, niin sitten kannattaa kirjoittaa JavaScript-koodi ulkoiseen tiedostoon, jolloin tuollaista ongelmaa ei synny.

lainaus:

vai koskeeko tuo vain dokumenttiin sisällytettyjä "<script>" -elementtejä?

No ei niitäkään, mutta ei varsinkaan ulkoisia JavaScript-tiedostoja.

Pääset helpommalla kun käytät esim. jQuerya:
http://jquery.com/

reca:

Pentu kirjoitti:

Toistaiseksi pääasiallinen tarkoitus on vain opetella JavaScriptiä, kun sitä ei ole koskaan tullut kokeiltua..

On hyvä tuntea kieli ennen kirjastoihin siirtymistä.

Joitakin alkeita ehkä, muutenhan sitä voi opetella rinnakkain kirjastojen käyttämisen kanssa.

Alkeita tässä yritänkin opetella, vähän vaativamman projektin / kokeilun kanssa.. Toki jQuerya opettelen sitten myöhemmin erikseen.

Seuraavan lisään nyt tähän viestiketjuun, vaikka sille voisi luoda omankin. Sama projekti kuitenkin kyseessä, niin en uutta ketjua luo.

###

Eli mulla on kuusikulmio ruudukko, josta tarvitsisi selvittää, että missä ruudussa hiiri liikkuu. Tähän en oikeestaan kehittänyt mitään ideaa. Sen sijaan keksin, että millä periaatteella kuvat tarvitsee sijoittaa, että osuvat oikeisiin kohtiin..

Eli millä tavoin kannattaisi lähteä tutkimaan, että missä ruudussa kursori liikkuu? Lähtö tietona on vain hiiren coordinaatit tuossa "laudalla".

Ja koska tämä olisi turhan epäselvää sepustusta ilman minkään sortin konkreettista esimerkkiä, niin tässä.

Sitä en keksinyt, että miksi tuo lomake ei toimi JSFiddlessä, mutta luultavasti tuo selventää tuota juuri sepustamaani tarinaa.

Sattumoisin olen tehnyt aiempaan keskusteluun JavaScript-funktiot suorakulmaisen koordinaatiston ja kuusikulmioiden välisiin muunnoksiin. Ideana on esittää koordinaatit käyttäen kantavektoreita, joiden välinen kulma onkin 60°.

Jatkossa tee mielellään uusi viestiketju, kun asia ei aihepiiriltään mitenkään liity edelliseen.

Ok, muistan jatkossa toimia näin, kun törmään projekteissani ongelmiin, joita en saa ratkaistua..

Mutta kysymys scriptistäsi:
Mitä nuo funkkarit on tarkoitus ottaa parametriksi? Kursorin sijainti (p)? Ymmärrän kyllä ajatuksen noista x- jta y- akseleista. Mutta itse syötettävä tieto ei aivan auennut.

Metabolix kirjoitti:

// Muunnos oikeasta kuusikulmioiksi:
function euc2hex(p) {
	return {
		"x": p.y / Math.sqrt(3) + p.x,
		"y": p.y / Math.sqrt(3) - p.x
	};
}

Syötteeksi annetaan objekti, jolla on ominaisuudet x ja y

Eli vaikka tyyliin:

var hexPiste = {}
hexPiste.x = 7
hexPiste.y = 8
var eucPiste = hex2euc(hexPiste)

tai sama

var hexPiste = { x: 7, y: 8 }
var eucPiste = hex2euc(hexPiste)

tai melkein sama

var eucPiste = hex2euc({ x: 7, y: 8 })