Lataa esitys
Esittely latautuu. Ole hyvä ja odota
1
Javascript: johdatus ohjelmointiin
Jaana Holvikivi Jaana Holvikivi
2
Javascript HTML sivulla
JavaScriptin tyypillisiä käyttötapoja HTML-sivulla: Reagoi käyttäjän aloittamiin tapahtumiin, kuten hiiren painalluksiin, selailuun Lomakesyötön avustus, lomakkeen tarkistukset, Päivittää sivua ja mahdollistaa sen ulkoasun muokkauksen käyttäjän koneella JavaScriptin sijoitus HTML-sivulla: Ohjelmanpätkä <script> elementin (tagin) sisällä joko head tai body -osioissa. Viittaus ulkoiseen JavaScript lähdetiedostoon Määrittelemällä JavaScript-käskyn HTML attribuutin arvoksi, esim. tilannekäsittelijäksi lomaketageissä Jaana Holvikivi
3
HTML - sivun rakenne ja osiot
HEAD STYLEsheet STYLE Javascript file SCRIPT BODY <tag Javascript> Javascript <tag style> Jaana Holvikivi
4
Javascript HTML sivulla
<head> <title>Javascript alkeet</title> </head> <body> <p> <form> <input value="Paina" type="button" onClick="alert('HEIPPA')"> </form> </p> <script language="JavaScript"> document.write("Päivitetty viimeksi:"); document.write(document.lastModified); </script> </p> </body> </html> Jaana Holvikivi
5
Javascript HTML sivulla
<head> <title>Javascript alkeet</title> </head> <body> <p> <a href=" onMouseOver="window.status=' paina tästä '; return true" onMouseOut="window.status=' '; "> Napsauta linkkiä</a> </p> </body> </html> Jaana Holvikivi
6
Javascript HTML sivulla
<head> <title>Javascript and DOM</title> <script type="text/javascript" > var date=new Date(); var hour=date.getHours(); if (hour>=22 || hour<=5) document.write("You should go to sleep"); else document.write("Hello, world!"); </script> </head> <body> </body> </html> Jaana Holvikivi
7
Ulkoinen tiedosto jsdom.js: var date=new Date();
var hour=date.getHours(); if (hour>=22 || hour<=5) document.write("You should go to sleep"); else document.write("Hello, world!"); <html> <head> <title>Javascript and DOM</title> <script type="text/javascript" src="jsdom.js"></script> </head> <body> I love you! </body> </html> Hello, world! I love you! Jaana Holvikivi
8
Javascriptin käyttö Javascript ladataan aina palvelimelta asiakkaalle
joko tiedostona tai suoraan HTML - sivulla Javascript suoritetaan asiakkaan selaimessa. vähentää palvelinkutsuja ja palvelimen kuormaa esimerkiksi tutkimaan form input (numeeriset kentät, sallitut arvot, pakolliset kentät, päiväykset) Javascript ymmärtää HTML-sivun rakenteen ja pystyy käsittelemään sen osia (document object model, DOM) Jaana Holvikivi
9
Javascriptin hyödyt käyttäjälle
Parantaa vuorovaikutusta käyttäjän kannalta välitön palaute (nopeus) lomakkeiden täyttö helpottuu: tietojen täydennys alun perusteella, tarkistukset, opastukset tapahtumat, valinnat, nopeus sivun osien liikuteltavuus: Scrolling and zooming maps (google maps) sähköpostin tai uutisten päivitys taustalla (Update checking) sivujen henkilökohtaistaminen (Customization of pages on-the -fly) Jaana Holvikivi
10
Ohjelmointikielen perusosat
Tietotyypit Vakiot Muuttujat Lausekkeet Operaattorit Käskyt ja lauseet: sijoitus, ehtolause, silmukat Tapahtumat Funktiot (rakenne) Oliot, oliomalli Virheilmoitukset Jaana Holvikivi
11
Tietotyypit Javascriptissä
Vakiot Luvut / Numbers (ei erikseen kokonaislukuja) Merkkijonot / Strings document.write ("<br/><br/>"); lainausmerkeissä (joko ' tai ") <input value="Paina" type="button" onClick="alert('HEIPPA')"> String literals alert("I am an alert box!! \n\t Man!"); adds a new line and a tab Totuusarvot / Boolean values true, false Jaana Holvikivi
12
Muuttujat var i=0, result = 0; // = sijoitus, ei yhtäläisyys for (i = 0; i <= 10; i++) { result += i; document.write(i + ": " + result + "<br/>"); } document.write("<br/><br/>"); var i = 0 määritellään muuttuja ja asetetaan sen arvoksi 0 (assignment statement) Var a, A; JavaScript erottelee isot ja pienet kirjaimet "case sensitive" Jaana Holvikivi
13
Lausekkeet (expressions) ja käskyt
i <= 10 vertailulauseke saa arvon tosi tai epätosi "tulos on" + summa merkkijonolauseke Käsky eli statement: document.write("<br/><br/>"); ; komennon loppumerkki, parasta käyttää aina Jaana Holvikivi
14
Operaattorit Sijoitus, Assignment Operators
x+=y vastaa yhteenlaskua x=x+y Vertailu, Comparison Operators ==is equal to !=is not equal 5!=8 returns true Logical Operators && and Merkkijono / String Operator alert (i + ": " + result + "<br/>"); Jaana Holvikivi
15
Ehtolauseet/ Conditional statements
if ( !Math.random ) // funktion olemassaolon testaus { document.write('<pre> -- weather called off due to rain --</pre>'); } else if ( Math.floor((Math.random()*2)) == 0 ) { document.write ("<b>It's just awful. </b><br/>"); } else { document.write ("<i>How wonderful it is!</i><br/>"); } Jaana Holvikivi
16
Silmukat / Loops: for for (i = 0; i <= 10; i++)
{ result += i; document.write(i + ": " + result + "<br/>"); } document.write("<p></p>"); Increment i=i+1 or i++ Jaana Holvikivi
17
Loops: while var x = 1; var result = 0; while ( x <= 10 ) // the loop is repeated until x>10 { result += x; x++; } alert ("The result is " + result + " and x is " + x ); Jaana Holvikivi
18
Funktiot <html> <head>
<script type="text/javascript"> function disp_alert() // funktion nimeäminen ja määrittely { alert("I am an alert box!!") } </script> </head> <body> <form> <input type="button" onclick="disp_alert()" value="Display alert box"> <!--painonapilla kutsutaan funktiota--> </form> </body> </html> Jaana Holvikivi
19
Tapahtumat / Events <A HREF=" onMouseOver = "window.status='Click here '; return true" onMouseOut="window.status=' '; "> onClick onerror onSelect onChange onMouseOver onKeyPress Jaana Holvikivi
20
DOM Document Object Model
document.form1.text1.value <form name="form1"> <input type="text" name="text1"> </form> parent.location = word1 + word2 + ".html" Jaana Holvikivi
21
Bean counter ohjelma var price; var taxRate = 0.088;
if (drink == "espresso") price = 1.40; if (drink == "latte" || drink == "cappuccino") { if (ounce == 8) price = 1.95; if (ounce == 12) price = 2.35; if (ounce == 16) price = 2.75; } if (drink == "Americano") price = * (ounce/8); price = price + (shots - 1) * .50; price = price + price * taxRate; document.Bean.price.value = Math.round(price*100)/100; Jaana Holvikivi
22
Bean counter ohjelman selostus1
var price; //määritellään muuttuja price var taxRate = 0.088; //asetetaan muuttuja ja sille arvo vertailu: onko drink yhtä kuin espresso? if (drink == "espresso") price = 1.40; //ja se maksaa 1.40 ilman veroa muut drinkit tässä välissä .... sitten lasketaan kokonaishinta kok.määrälle price = price + (shots - 1) * .50; lisätään verot price = price + price * taxRate; Sijoitetaan tulos Bean-lomakkeen price-kentän arvoksi pienellä pyöristyksellä document.Bean.price.value = Math.round(price*100)/100; Jaana Holvikivi
23
Bean counter ohjelman selostus 2
lasketaan eri drinkeille if (drink == "espresso") price = 1.40; jos on latte tai capp. if (drink == "latte" || drink == "cappuccino") niin hinta riippuu määrästä { if (ounce == 8) price = 1.95; if (ounce == 12) price = 2.35; if (ounce == 16) price = 2.75; } ja vielä yksi tapaus if (drink == "Americano") price = * (ounce/8); Jaana Holvikivi
Samankaltaiset esitykset
