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

www.w3.org

www.ecma-international.org

"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."

Douglas Crockford, in Javascript: The Good Parts

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 ' + navn

Setninger (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 Javascript 2

GEO2311
Javascript 2