Transcript JavaScript

Innehåll
JavaScript
„
„
„
„
Introduktion till JavaScript och DOM
JavaScript ‐ Syntax
DOM och DOM Scripting
Hä d l h t i h CSS
Händelsehantering och CSS
En introduktion till skriptspråket JavaScript och till DOM Scripting
Historia
„
„
„
„
„
Skapat 1995 av Netscape och Sun
JavaScript ≠ Java
JavaScript, (VBScript), Jscript, EcmaScript
DHTML HTML CSS J S i t
DHTML = HTML + CSS + JavaScript
DOM – Netscape, Microsoft och W3C
Document object model
”A platform‐ and language‐neutral interface that will allow programs and scripts to dynamically access and update the content, structure and y
the style of documents”
W3C:s defenition
DHTML
Varför Javascript?
<div id=”inforuta”>Min text!</div>
„
#inforuta {
position: absolute;
left: 100px;
}
„
„
Minskad datatrafik + Snabbare feedback
Utökad interaktiv funktionalitet
Lättvikts RIA (Rich Internet Applications) ‐
‐
var x = ↵
document.getElementById(’inforuta’).style.left;
‐
slipper installation av Java‐applets och liknande
li
i t ll ti J
l t h lik
d
slipper installation av pluggins som Flash‐spelare
mindre filer än Java‐applets och Flashapplikationer
1
Varför inte JavaScript?
•
•
‐
JavaScript kan utgöra en säkerhetsrisk
Alla webbläsare har stödjer inte JavaScript och vissa användare väljer att slå av stödet
Webbsidan ska fungera bra även för de webbklienter som ej stödjer JavaScript!
JavaScript
„
„
Ett interpreterande scriptspråk jämfört med Java som kräver kompilering
Koden tolkas av webbläsaren
<script>
//Och här har jag flera rader med scriptkod
</script>
<script type=”text/javascript” src=”skript.js” />
<script type=”text/javascript” src=”skript2.js” />
Uttryck och kommentarer
Variabler och Datatyper
Statements:
Variabler:
„ Svagt typade
„ Måste inte deklareras
„ Case sensitive
C iti
Första uttrycket
Andra uttrycket
Första uttrycket; Andra uttrycket;
Första uttrycket;
Andra uttrycket;
Datatyper:
Strängar, Heltal, Flyttal, Boolska, Arrayer
Kommentarer:
// Kommentar
/* Kommentar som spänner
Över flera rader */
„
Variabler och Datatyper
Konvertering av datatyper
var age = ”Trettionio”;
var minVariabel = 1 + ”2”;
var minVariabel = 1 + Number(”2”)
// strängvariabel
age = 39;
// heltalsvariabel
// skiljer sig från age=”39”;
var Age = 39.5;
// flyttalsvariabel
// age och Age är två olika variabler
var adult = true;
Number()
parseFloat()
parseInt()
// boolsk variabel
2
Arrayer
„
Aritmetiska Operatorer
Lagrar flera värden av samma eller olika typ
+ ‐ * och /
var age = ”39” + ”år”;
var Age = 38 + 1;
// 39år
// 39
age = ”38” + 1;
// 381
var colors = new Array();
// array av
colors[0] = ”red”;
// strängvariabler
colors[1] = ”blue”;
var Tal = [”Ett”, ”Två”, ”Tre”, ”Fyra”];
Age = 38;
Age += 1;
// 39
Jämförande Operatorer
och IF-satser
Logiska Operatorer
och If-satser
== != > >= < och <=
&& || och !
age = 39;
if (age < 40) {
alert(”Ingen
alert(
Ingen kris ännu?”)
ännu? )
}
if (age >= 40 && name != ”Silvia”) {
alert(”Du börjar bli gammal”)
}
else
{
alert(”Lika vacker som alltid...?”)
}
Element
Index:
„
0
1
2
3
Värden nås genom index
if (age == 40) {
alert(”Nu blir det kris...”);
}
// Notera == inte bara = då tilldelas age värdet 40!
CASESATSER
LoopAR
switch (betyg) {
case "3":
alert(’Helt ok');
break;
case "4":
alert(’Bra
alert(
Bra jobbat');
jobbat );
break;
case "5":
alert(’Riktigt bra jobbat!');
break;
default:
alert(’Det är bara att kämpa vidare...');
while, do… while och for
var stoppbuttonpressed = false;
while (stoppbuttonpressed == false){
alert(”Vi
alert(
Vi kör vidare tills du trycker stopp!”);
stopp! );
}
for (var i = 0; i < 10; i++){
alert(i);
}
// i++ är samma som i+=1 och i = i + 1;
3
Funktioner
„
„
„
„
Kod som läggs i en funktion kan återanvändas
Effektivare och mer överskådligt
En funktion kan ta emot parametrar och returnera ett värde
Funktioner
function addera(tal1, tal2){
var resultat = tal1 + tal2;
return resultat;
}
var summa = addera(10, 5);
En variabel kan vara global eller lokal. Lokala variabler deklareras i funktioner och globala utanför
Funktioner
Dataobjekt
Riskabelt att använda globala variabler!
„
function addera(tal1, tal2){
resultat = tal1 + tal2;
return resultat;
}
var resultat = 100;
var summa = addera(20+30);
alert(resultat + summa);
„
JavaScript har fördefinierade objekt, och man kan skapa sina egna
Ett objekt kan ha egenskaper, utföra metoder och reagera på händelser
var colors = [”Red”, ”Green”, ”Blue”, ”Yellow”];
alert(colors.length);
function dice(){
var number = Math.floor(Math.random()*6) + 1;
}
Document object Model (DOM)
Demonstration av JavaScript
„
„
En standardiserad modell där man ser en webbsida och dess innehåll som objekt
Objekten hänger ihop Elementträd
”Elementträd”
4
elementNODER
DOMs viktigaste metoder
Kan inneha andra elementnoder, attributnoder och/eller en textnod
var meny = document.getElementById(”minmeny”);
var lista = document.getElementByTagName(”li”);
var minAtagg = document.getElementByTagName(”a”);
alert(minAtagg[0].getAttribute(”href”));
minAtagg[0].setAttribute(”href”,”http://di.se”));
Children, ParentS, SiblingS…
…And Values
Children, ParentS, SiblingS…
…And Values
<body>
<h1>Rubrik</h1>
<p>Textstycke</p>
<h2>Underrubrik</h2>
<ul id=”MinLista”>
<li>Listvärde 1</li>
<li>Listvärde 1</li>
<li><a href=”http://www.di.se”>di.se</a></li>
</ul>
</body>
var minlista = document.getElementById(’MinLista’);
var listenheter = ↵
minlista.getElementsByTagName(’li’);
Läsa och ändra Attribut
Objektdetektering
var firstLink = ↵
document.getElementByTagName(’a’)[0];
Kontroll om det finns stöd för DOM
if(firstLink.getAttribute(’href’) == ↵
”http://www.di.se”){
firstLink.setAttribute(”href”,
i
i
i
↵
”http://www.va.se”);
}
for(var i = 0; i < listenheter.legth; i++){
// Gör något smart
}
document.getElementByTagName
↵
(’p’)[0].firstChild.nodeValue=’Hej världen’;
<script type=text/javascript>
if (document.getElementById &&
document.createTextNode) {
// Den kod jag tänkt...
return;
}
else {
// Anpassad kod, dvs mer kod...
}
</script>
↵
5
händelsehantering
Exempel på händelser (events):
‐ en webbsida laddas
‐ en bild laddas
‐ en knapptryckning
k
t k i
‐ tryck på en tangent
‐ när musen rör sig över något
Demonstration av DOM
6