Tuletame meelde HTML keele reeglid:
- Enamasti on HTML märgendid ehk tag'id paaris. <tag> ja </tag>. Esimene alustab mõnda HTML plokki ning / algav lõpetab.
- Kõik, mis HTML lehel kuvatakse, tuleb panna tag'ide <html> ja </html> vahele.
- Lehekülje päisesse minev info kirjutatakse <head> ja </head> märgendite vahele. Päisesse kirjutatakse lehe pealkiri <title> ja </title> vahele, seda kuvatakse lehe avades lehe nimena. Päisesse kirjutatakse tihti ka javascripti kasutavad skriptid <script> ja </script> tag'ide vahele.
- <body> ... </body> vahele kirjutatakse kõik see, mis veebilehel nö nähtav peab olema.
HTML-i tekst (ava programm Notepad ja kopeeri allolev tekst alates <HTML> kuni </HTML> ning kleebi Notepad'i).
<HTML>
<HEAD>
<TITLE>Esimene katse</TITLE>
</HEAD>
<BODY>
<H1>See on minu esimene kodulehekülg</H1>
</BODY>
</HTML>
Salvesta dokument nii, et valid File -> Save as ning failitüübiks vali Save as type alt All files (vt pilti).
Ava oma võrguketas ning klõpsa salvestatud failil. See peaks nüüd avanema veebilehitsejas.
Proovi muuta <h1> ... </h1> vahel olevat teksti Notepadi failis, salvesta ning värskenda siis veebilehitsejas lahti olevat faili.
Javascripti lisamiseks HTML-i tuleb esmalt näidata, et tegemist on programmiga, mis on kirjutatud javascriptis. Selleks tuleb lisada lehele <body> .. ja </body> vahele
<script language=javascript type="text/javascript"> ... siia tuleb javascripti kood ... </script>
Teeme esmalt ühe lihtsa skripti 5-ga korrutamise kohta.
Selleks kirjutame <script> ... </script> tagide vahele:
document.writeln("5-ga korrutamine");document.writeln on käsklus, mis kuvab sulgudes oleva teksti (tekst peab olema jutumärkides) või muutuja ühe reana HTML lehel.
var arv=5;
for(i=1;i<=12;i++)
{document.writeln(i+" korda 5 = "+i*arv);}
Kui kõik õnnestus, siis kuvati veebilehel ühes reast tekst: 5-ga korrutamine 1 korda 5 = 5 2 korda 5 = 10 3 korda 5 = 15 4 korda 5 = 20 5 korda 5 = 25 6 korda 5 = 30 7 korda 5 = 35 8 korda 5 = 40 9 korda 5 = 45 10 korda 5 = 50 11 korda 5 = 55 12 korda 5 = 60
Selleks, et iga kirje oleks eraldi real, täiendame skripti HTML koodiga <br> - see on reavahetuse kood ning sellel ei ole lõpukoodi.
Kood võiks peale täiendamist välja näha nii:
document.writeln("5-ga korrutamine <br>");Salvesta dokument ning värskenda veebilehitseja vaadet!
var arv=5;
for(i=1;i<=12;i++)
{document.writeln(i+" korda 5 = "+i*arv + "<br>");}
Täiendame oma skripti nii, et see küsiks kasutajalt, mis arvuga ta korrutamist teha tahab ning kuvaks siis selle arvuga korrutamise 1-12-ni.
Kasutajalt andmete küsimiseks on javascriptis käsklus prompt.
Muutujale saab anda kohe väärtuseks selle arvu, mida kasutaja sisestab
var arv = prompt("Sisesta arv, millega tahad korrutada!");Muuda programmi nii, et ta kuvaks ka tekstis arvu, mille kasutaja sisestab!
Lisaülesanne edasijõudnutele:
Täienda programmi nii, et see küsiks lisaks arvule, millega soovid korrutada ka arvu, milleni soovid korrutada (näiteks mitte 1-st 12-ni vaid 1-st kasutaja poolt sisestatud arvuni).
Teksti kaunistamine (tuletame meelde HTML-i). NB! Need HTML tagid tuleb kirjutada jutumärkide sisse koos tekstiga!:
<H1>.... </H1> (suur pealkiri)
<H1 style="color:red"> .... </H1> (värviline pealkirja tekst)
HTML stiilide kohta leiad lisainfot: http://www.w3schools.com/html/html_styles.asp
HTML tekstivormingute kohta leiad lisainfot: http://www.w3schools.com/html/html_formatting.asp
