[Õ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:

Code: Select all

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

Teate väljakutsumine:

Code: Select all

window.alert

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

Code: Select all

alert

b) Teate kuvamine muutujatega:

Code: Select all

<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):

Code: Select all

var p = '21';

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

Code: Select all

var k = 'aprill';

Muutujate liitmine ja täiendava teksti lisamine neile:

Code: Select all

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

[Pistik]

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

a) Pop-upi avamine

Code: Select all

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

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

Code: Select all

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

Tunnuseid võimalik kasuta omakorda erinevates variatsioonides

Code: Select all

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

Code: Select all

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:

Code: Select all

<!-- --->

Ehk siis nii:

Code: Select all

<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).