Document

Download Report

Transcript Document 

Javascript: johdatus
ohjelmointiin
Jaana Holvikivi
17.7.2015
Jaana Holvikivi
1
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ä
17.7.2015
Jaana Holvikivi
2
HTML - sivun rakenne ja osiot
HTML
HEAD
STYLEsheet
STYLE
Javascript file
SCRIPT
BODY
<tag Javascript>
Javascript
<tag style>
17.7.2015
Jaana Holvikivi
3
Javascript HTML sivulla
<html>
<head>
<title>Javascript alkeet</title>
</head>
<body>
<p>
<form>
<input value="Paina" type="button" onClick="alert('HEIPPA')">
</form> </p>
<p>
<script language="JavaScript">
document.write("Päivitetty viimeksi:");
document.write(document.lastModified);
</script> </p>
</body>
</html>
17.7.2015
Jaana Holvikivi
4
Javascript HTML sivulla
<html>
<head>
<title>Javascript alkeet</title>
</head>
<body>
<p>
<a href="http://www.metropolia.fi"
onMouseOver="window.status=' paina tästä '; return true"
onMouseOut="window.status=' '; ">
Napsauta linkkiä</a>
</p>
</body>
</html>
17.7.2015
Jaana Holvikivi
5
Javascript HTML sivulla
<html>
<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>
17.7.2015
Jaana Holvikivi
6
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!
17.7.2015
Jaana Holvikivi
7
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)
17.7.2015
Jaana Holvikivi
8
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)
17.7.2015
Jaana Holvikivi
9
Ohjelmointikielen perusosat










17.7.2015
Tietotyypit
Vakiot
Muuttujat
Lausekkeet
Operaattorit
Käskyt ja lauseet: sijoitus, ehtolause, silmukat
Tapahtumat
Funktiot (rakenne)
Oliot, oliomalli
Virheilmoitukset
Jaana Holvikivi
10
Tietotyypit Javascriptissä
Vakiot
 Luvut / Numbers 0.44 (ei erikseen kokonaislukuja)
 Merkkijonot / Strings
document.write ("<br/><br/>");
lainausmerkeissä (joko ' tai ")
<input value="Paina" type="button"
onClick="alert('HEIPPA')">

String literals

Totuusarvot / Boolean values
true, false
alert("I am an alert box!! \n\t Man!");
adds a new line and a tab
17.7.2015
Jaana Holvikivi
11
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
arvoksi 0
määritellään muuttuja ja asetetaan sen
(assignment statement)
Var a, A;
JavaScript erottelee isot ja pienet kirjaimet "case
sensitive"
17.7.2015
Jaana Holvikivi
12
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
17.7.2015
Jaana Holvikivi
13
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/>");
17.7.2015
Jaana Holvikivi
14
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/>");
}
17.7.2015
Jaana Holvikivi
15
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++
17.7.2015
Jaana Holvikivi
16
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 );
17.7.2015
Jaana Holvikivi
17
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>
17.7.2015
Jaana Holvikivi
18
Tapahtumat / Events
 <A HREF="http://www.evtek.fi" onMouseOver =
"window.status='Click here ';
return true" onMouseOut="window.status=' '; ">






onClick
onerror
onSelect
onChange
onMouseOver
onKeyPress
17.7.2015
Jaana Holvikivi
19
DOM Document Object Model
 document.form1.text1.value
<form name="form1">
<input type="text" name="text1">
</form>
 parent.location = word1 + word2 + ".html"
17.7.2015
Jaana Holvikivi
20
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 = 1.20 + .30 * (ounce/8);
price = price + (shots - 1) * .50;
price = price + price * taxRate;
document.Bean.price.value =
Math.round(price*100)/100;
17.7.2015
Jaana Holvikivi
21
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;
17.7.2015
Jaana Holvikivi
22
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 = 1.20 + .30 * (ounce/8);
17.7.2015
Jaana Holvikivi
23