GEO2311
Javascript 2
Brendan Eich
Laget Javascript for nettleseren Netscape
på 10 dager i 1995
Fikk navnet Mocha, seinere Livescript, seinere Javascript
(av markedsføringsgrunner ettersom Java var populært)
2011:
ECMAScript versjon 5.1
ECMA-262 spesifikasjon
ISO/IEC 16262 standard
"The amazing thing about JavaScript is that it is possible to get work done with it without knowing much about the language, or even knowing much about programming.
It is a language with enormous expressive power. It is even better when you know what you’re doing.
Programming is difficult business. It should never be
undertaken in ignorance."
Byggeklosser i et programmeringsspråk
- variabler
- funksjoner
- objekter
- uttrykk
- setninger
- nøkkelord
- datatyper
- grammatikk
var w1 = 2;
var h1 = 4;
var name = 'Olav';
var test = true;
var sjekk = (w1 > 2);
var x; //undefined
var y = null;
var z = {};
Variabler
Datatyper
- Number
- String
- Boolean
- Undefined
- Null
- Object
Uttrykk (expressions) kan evalueres til en verdi
1 + 2
a > 4
'hei ' + navnSetninger (statements) skilles fra hverandre med semikolon
x = a + 3;
var mapOptions = {
zoom: 4,
center: myLatlng
};
alert('Velkommen til GEO2311');Reserverte ord i javascript (key words)
| break | do | instanceof | typeof |
| case | else | new | var |
| catch | finally | return | void |
| continue | for | switch | while |
| debugger | function | this | with |
| default | if | throw | |
| delete | in | try |
Grammatikk (syntax)
her beskrevet med
jerbaneskinne-diagram
{
zoom: 4,
center: myLatlng
}
function area(width, height) {
return width * height;
};
Scope
Handler om rekkevidde eller synlighet for variabler.
Javascript har globalt scope.
Global = verden = nettleservinduet
Var - nøkkelordet gjør at variabler får lokalt scope.
Funksjoner har sitt eget scope.
Vi kan ikke dekke hele språket i GEO2311, så vi hopper over:
- tester (if-tester etc.)
- valg
- løkker
m.m.
Minimumskrav for Javascript-kurset på Codeacademy
Obligatorisk:
- Introduction
- Functions
- Scope
- Arrays
- Objects
- Browser Compatibility and Transpilation (1-4)
Eksempel på javascript-kode i en html-fil på neste side
(sammen med litt CSS).
Koden benytter Open Layers API.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://openlayers.org/en/v3.14.2/css/ol.css" type="text/css">
<style>
#map {
height: 500px;
width: 100%;
border: solid 1px;
}
</style>
<title>B-bygget</title>
</head>
<body>
<div id="map"></div>
<script src="http://openlayers.org/en/v3.14.2/build/ol-debug.js" type="text/javascript"></script>
<script src="wms.js" type="text/javascript"></script>
</body>
</html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://openlayers.org/en/v3.14.2/css/ol.css" type="text/css">
<style>
#map {
height: 500px;
width: 100%;
border: solid 1px;
}
</style>
<title>B-bygget</title>
</head><body>
<div id="map"></div>
<script src="http://openlayers.org/en/v3.14.2/build/ol-debug.js" type="text/javascript"></script>
<script src="wms.js" type="text/javascript"></script>
</body>HTML og CSS-delen av koden
var attribution = new ol.Attribution({
html: 'Kartgrunnlag: <a href="http://kartverket.no">Kartverket</a>'
});
var extentKartverketWMS25832 = [234068, 6338450, 1351516, 8051673];
var projection = new ol.proj.Projection({
code: 'EPSG:25832',
extent: extentKartverketWMS25832
});
var topo2 = new ol.layer.Tile({
extent: extentKartverketWMS25832,
source: new ol.source.TileWMS({
attributions: [attribution],
url: 'http://openwms.statkart.no/skwms1/wms.topo2?',
params: {
'LAYERS': 'topo2_WMS',
'STYLES': 'default'
},
})
});
var map = new ol.Map({
layers: [topo2],
target: 'map',
view: new ol.View({
projection: projection,
center: [591500, 6740500],
minResolution: 2,
maxResolution: 200,
resolution: 20,
})
});wms.js
javascript:
GEO2311 - H2017 - Javascript 2
By sverres
