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 TO JAVASCRIPT
FUNCTIONS
DATA STRUCTURES
OBJECTS I
OBJECTS II

Frivillig, men anbefalt:
'FOR' LOOPS IN JAVASCRIPT
'WHILE' LOOPS IN JAVASCRIPT
CONTROL FLOW

Eksempel på javascript-kode i en html-fil på neste side

(sammen med litt CSS).

Koden benytter Google Maps API


<!DOCTYPE html>
<html>
  <head>
    <title>Synchronous Loading</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIJ9XX2ZvRKCJcFRrl-lRanEtFUow4piM&">
    </script>
    <script>

var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

    </script>
  </body>
</html>

https://google-developers.appspot.com/
maps/documentation/javascript/
examples/full/map-sync

Resultatet av koden:

Hint: Trykk Ctrl + U for å se koden i nettleseren (Chrome og Firefox)


  <head>
    <title>Synchronous Loading</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>


    <body>
        <div id="map"></div>
    </body>

HTML og CSS-delen av koden


    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
    <script>

var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

    </script>

javascript-kode mellom script-tagger

Dette eksemplet heter "Synchronous Loading"

Dette innebærer at koden lastes inn i den rekkefølge den står i HTML-fila. Det innebærere også at nettleseren venter med å gå videre til alt er lastet.


    <script>

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

    </script>
    <script 
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"
        async defer></script>

Alternativ, og Googles standard-metode:

asynkron lasting av kode - se async- og defer-attributtene på script-taggen

DOM - Document Object Model

Hva DOM ikke er

- er ikke en del av HTML
(men det beskriver oppbygningen av HTML)

- er ikke en del av CSS

- er ikke en del av javascript
(men javascript kan utnytte DOM)

DOM er

- en representasjon av et HTML- eller XML-dokument

- en modell av en webside

- et API

- en egen W3C-standard

The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XMLdocuments.

It defines the logical structure of documents and the way a document is accessed and manipulated.

In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents.

Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.

With the Document Object Model, programmers can

- build documents,

- navigate their structure,

- and add, modify, or delete elements and content.

Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions - in particular, the DOM interfaces for the XML internal and external subsets have not yet been specified.

As a W3C specification, one important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications.

The DOM is designed to be used with any programming language.

In order to provide a precise, language-independent specification of the DOM interfaces, we have chosen to define the specifications in Object Management Group (OMG) IDL [OMGIDL], as defined in the CORBA 2.3.1 specification [CORBA]. In addition to the OMG IDL specification, we provide language bindings for Java [Java] and ECMAScript [ECMAScript] (an industry-standard scripting language based on JavaScript [JavaScript] and JScript [JScript]).

http://www.w3.org/TR/DOM-Level-2-Core/introduction.html

Hvordan "snakke" med DOM i javascript?

4 type noder:

- document node

- element node

- attributt node

- tekst node

Utvelgelse av noder:

getElementByID()

querySelector()

getElementsByClassName()

getElementsByTagName()

parentNode

previousSibling/nextSibling

firstChild/lastChild


document.getElementById('map')

Manipulering av noder

innerHTML

textContent

createElement()

appendChild()

demo


<!DOCTYPE html>
<html>
  <head>
    <title>Synchronous Loading</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIJ9XX2ZvRKCJcFRrl-lRanEtFUow4piM&">
    </script>
    <script>

var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

    </script>
  </body>
</html>

Finn "document.getElementById" her

og div'en som matcher

Les mer om DOM her:

- www.w3.org/DOM/

- W3Schools

- javascriptbook.com

GEO2311 Javascript 2

GEO2311
Javascript 2