[Õpetused] Javascript

[Pistik]

1. Tund: Ajalugu

Et kõik korralikult kirja saaks tuleb alustada ikka algusest - rohujuure tasandilt. Mis on javascript, mõistena, tehnoloogiana?

Mõiste:
JavaScript on Netscape Communications Corporation'i poolt väljatöötatud prototüübipõhine keel, mida peamiselt kasutatakse veebilehtede arendamisel - interaktiivsete veebilehtede loomiseks.

Tihti aetakse segi Javat ja JavaScripti, mis on täiesti erinevad keeled. Sarnane on vaid C-st pärit süntaks ja sarnasus nimes.

JavaScripti toetavad tänapäeval kõik levinumad browserid (Microsoft Internet Explorer, Netscape, Mozilla, Mozilla Firefox, Opera, Safari).

Miks javascripti kasutada? Kui tavapärased HTML ja CSS lahendused pakuvad külastajale ainult staatilist lehte siis javascript võimaldab lehele lisada dünaamilistust ja efekte. Arendajale seab see muidugi jälle uusi nõudmisi ja eeldab uusi teadmisi võrreldes HTML ja CSS'iga.

Definitsiooni järgi on javascript kliendi poolne skripitimise keel. Mis tähendab, et koodi parsib (töötleb) külastaja veebibrowser. Samuti on kogu kood külastaja poolt nähtav, erinevalt näiteks PHP'st mida töötleb hoopis server (ja kasutajal puudub ligipääs koodile).

Ajalugu:
JavaScript on loodud Brendan Eich-i poolt Netscape Communications Corporation-is. Algselt kandis keel nimetust Mocha, siis LiveScript ning lõpuks JavaScript. Esimest korda oli JavaScript realiseeritud lehitsejas Netscape 2.0B3 detsembris 1995. Hiljem lisas Microsoft Internet Explorerisse JavaScriptiga ühilduva keele JScript (IE versioon 3.0, 1996. aasta augustis).

JavaScript standardiseeriti Ecma International (Euroopas infotehnoloogia süsteemide standardiseerija) poolt 1997. aasta juunikuus. Standardiseeritud keele nimi on ECMAScript. JavaScript (ja JScript) on laiendused ECMAScriptile (ECMAScript keskendub vaid keeleomadustele, aga JavaScript lisaks ka veebikeskkonnale). Esimese standardi ametlik nimi on ECMA-262. Töö ECMAScripti täiendamise kallal käib senini.

Aastal 2006 on JavaScripti versiooniks 1.7. Viimastel aastatel on saanud JavaScripti areng uue tõuke tänu AJAX tehnoloogia tähelepanu saamisega (pikemalt all pool).

Allikad:
Vikibooks: JavaScript
e-Teatmik


Lingid/materjalid:
JavaScript Manual
JavaScript Tutorial
Online JavaScript Tutorial

[Pistik]

2. Tund: Lihtsamad koodinäited

a) Lihtsa teate kuvamine:

Kood: Vali kõik

<script type="text/javascript">
window.alert ('Esimene katse')
</script>

Teate väljakutsumine:

Kood: Vali kõik

window.alert

võib olla ka lihtsalt nii (lühendatult):

Kood: Vali kõik

alert

b) Teate kuvamine muutujatega:

Kood: Vali kõik

<script type="text/javascript">
var p = '21';
var k = 'aprill';
window.alert ('Täna on '+p' +' '+k)
</script>

Lahtiseletatult:
Esimese muutuja loomine (numbriline väärtus võib olla ka ilma jutumärkideta, rea lõpus olev semikoolon lihtsalt igaksjuhuks - näiteks optimeerimise tarbeks):

Kood: Vali kõik

var p = '21';

Teise muutuja loomine (täheline väärtus peab kindlasti jutumärkide sees olema:

Kood: Vali kõik

var k = 'aprill';

Muutujate liitmine ja täiendava teksti lisamine neile:

Kood: Vali kõik

window.alert ('Täna on '+p' +' '+k)

[Pistik]

3. Tund: Pop-upide/akende avamine, sulgemine ja häkkid

a) Pop-upi avamine

Kood: Vali kõik

<a href="javascript:void(0)" onclick="window.open('index.html')">Ava</a>

Kasutada on võimalik erinevaid atribuute (atribuudid () vahel)

Kood: Vali kõik

window.open('aadress', 'nimi', 'tunnused', 'asendamine')

Tunnuseid võimalik kasuta omakorda erinevates variatsioonides

Kood: Vali kõik

width=100,height=100,menubar=yes,status=yes,location=yes,toolbar=yes,scrollbars=yes

Lisaks mõned tunnused mis käituvad erinevate browserite puhul erinevalt

Kood: Vali kõik

fullscreen=yes,scrollbars=yes

fullscreen töötab Internet Exploreri puhul
scrollbars töötab samuti IE puhul, Firefoxis kuvatakse alati scrollbar alles siis kui seda on vaja, no valiku puhul ei kuvata seda ka mitte Firefoxis

* Kui aknale/pop-upile antud kindel kõrgus või laius siis pole seda võimalik suurendada, nende mitte etteandmisel aga küll.
* Tunnuste vahemiku tühjaks jättes avatakse pop-up kogu browseri akna suuruse ulatuses (Tabide olemasolu korral tabina)

[Pistik]

4. Tund: Unobtrusive/korrektne kood

Mis juhtub kui browser javascripti ei toeta? Tihtipeale kuvatakse kogu kood kasutajale veebilehitsejas.
Selle vältimiseks on soovitatav kood varjestada HTML'ist tuntud märkidega:

Kood: Vali kõik

<!-- --->

Ehk siis nii:

Kood: Vali kõik

<script type="text/javascript">
<!--
window.alert ('Esimene katse')
-->
</script>

Kui nüüd seda lahendust testida näed kindlasti suureks üllatuseks, et javascript töötab edasi, miks? Browser töötleb koodi läbi, kuvab koodi kuvarile, samas saadab <script> tagide (märgistuse) vahel oleva kood edasisse töötlusesse kust see töödeldakse hoopis teise mootori abil erinevalt HTML koodist ning javascripti mootori jaoks see nn. välja kommenteerimise märgistus ei mõju (sama kehtib ka CSS <style> tagide vahel asuva koodi kohta).