JavaScript - Yleistä

JavaScript on ohjelmointikieli, jonka tarkoituksena on liittää interaktiivisuutta kotisivujen yhteyteen. Huomattavaa on, että koodi kirjoitetaan suoraan sivuille HTML-koodin kanssa ja koodia ei tarvitse kääntää mitenkään. Selain suorittaa koodin ja tulos on nähtävillä heti virheineen. JavaScript suoritetaan siis aina paikallisella koneella, joten (ainoastaan) sen avulla ei ole mahdollista tehdä sovelluksia, jotka toimivat verkon yli palvelimelle.

Paikalliselle selaimelle on myös mahdollista laittaa asetus, joka kieltää selainta suorittamasta JavaScript-koodeja, joten sivuilla olevista JavaScript-ohjelmista on hyvä mainita käyttäjälle.

Nettisivun html-koodin rakenne

Html-koodi on tarkoitettu nettisivun rakentamiseen. Tätä rakennetta noudattaa kaikki nettisivut, niin Facebookin jokainen näkyvä sivu, kuin Wikipediankin sivut.

Sivu rakentuu aina niin kutsuttujen tagien varaan, jotka merkitään < ja > merkkien väliin. Välissä oleva sana ilmoittaa selaimelle tiedon siitä, mitä haluamme selaimen tekevän tai mistä alkaa mikäkin osio nettisivulla.

• Alla olevassa esimerkissä ensimmäinen rivi ilmoittaa selaimelle, että tämä on html-dokumentti.
• Rivilla 2 aloitaan html-koodi, joka loppuu rivillä 15 (huomaa lopetusmerkki /html).
• Itse html sivu rakentuu kahdesta osiosta: head ja body. Head-osio on määritelty rivien 4 ja 6 väliin.
• Head-osioon tulee yleensä esimerkiksi ohjelmakoodia, sivulle tulevia tyylimäärityksiä ja sivulle tilattavia ohjelmia muualta netistä.
• Body osioon, joka on määritetty rivien 8 ja 13 väliin, kirjoitetaan kaikki nettiselaimen ikkunassa näkyvät asiat. Selaimen ikkunassa näkyviä asioita voidaan sitten muunnella, poistaa, lisätä ohjelmakoodeilla.

Huomaa! Mitkään muut muotoilut kuin välilyönnit eivät välity nettiselaimelle. Kaikki muut muotoilut täytyy käskeä tageilla. Muotoiluista enemmän löytyy https://www.matikki.fi/html/yleista.html

Ensimmäinen ohjelma

Mitä koodissa tapahtuu (rivi ilmoitettu R-alulla, esim. rivi 1 on R1):

• R1 ilmoitetaan selaimelle, että tämä on html-koodi
• R2 ilmoitetaan selaimelle html-koodin alkavan
• R3 html-koodin head-osio alkaa
• R5 ilmoitetaan, että ohjelmakoodi-osio alkaa ja ohjelmakoodi on javascriptiä
• R7 käsketään nettisivun documenttiä kirjoittamaan "Hei maailma"
  Käsky loppuu aina puolipisteeseen ;
• R9 ilmoitetaan, että ohjelmakoodi-osio loppuu
• R11 html-koodin head-osio loppuu
• R14 sivun body-osa alkaa
• R16 sivun body-osa loppuu
• R17 ilmoitetaan selaimelle, että html-koodi loppuuu

Huom!

Ohjelmakoodiosioita voi sijoitella mihin tahansa kohtaa html-koodia, mutta yleensä on järkevää sijoittaa ne head-osion sisään jo sivun koodin selkeydenkin takia.

Kommentointi ohjelmassa

Kommentointi on ohjelmoinnin tehokkaimpia keinoja. Oman ohjelman kommentointi selkeyttää ohjelmakoodia ja muistuttaa ohjelmoijalle, miten ohjelma on rakennettu. Usean viikon tai vuoden päästä voi olla hyvin vaikea muuten päätellä, miten olet rakentanut ohjelman toiminnan.

Kommentointia tarvitaan kertomaan myös muille ohjelmoijille, miten ohjelma toimii ja miten sitä voisi kehittää. Nykyään tämä on vielä korostunut entisestään ohjelmoijien laittaessa koodin tai ohjelman pätkiä muiden ohjelmoijien ulottuville nettiin.

Kommentointi voidaan aloittaa kirjoittamalla riville // .
// merkin jälkeistä ei suoriteta ko. rivillä ja merkillä aloitettua riviä ei siis huomioida ohjelmaa ajettaessa vaikka rivillä olisi selkeä JavaScript-käsky.

Jos tarvitaan useampirivistä kommenttia, niin kommentointi aloitetaan merkeillä /* ja lopetetaan */ yhdistelmällä. Mitä ikinä näiden välissä onkin sitä ei suoriteta ohjelmaa ajettaessa.

Edellinen esimerkki kommentoituna:

Tehtävä:

• Muuta edellistä esimerkkiä siten, että siinä on kaksi käskyä. Ensimmäinen käsky tulostaa "Minun nimeni on: " ja toinen sinun oman nimesi.
• Kokeile tehdä sama asia window.alert("Jokin teksti"); käskyllä

Suorita tehtävävät Editorilla ja tallenna työsi Tiedostona.