of {$slidecount} ½ {$title}, {$author}

Lecture 05

Prof. Dr.-Ing. S. Gössner

FH Dortmund - University of Applied Sciences

Inhalt

Web-Programmiersprachen

HTML und XML werden als deklarative Sprachen bezeichnet. Es handelt sich hierbei nicht um sog. Programmiersprachen. Diese sind vielmehr Befehlssprachen oder imperative Sprachen_.

Serverseitige Programmiersprachen

Clientseitige Programmiersprachen

Javascript - Eigenschaften

Javascript …

Javascript Beispiel

 

Programmstruktur

Datentypen

Javascript ist eine schwach typisierte Sprache (weakly typed). Es gibt folgende sieben Datentypen:

Literale

Literale sind konstante Ausdrücke eines bestimmten Typs.

Variablen

Variablen (Bezeichner) sind Symbole für den Inhalt von Speicherbereichen in einem Programm. Diese Speicherbereiche werden gemäss des zugewiesenen Datentyps interpretiert.

Variablen …

Beispiel: 

var pi=3.14, s="Hallo", u;
var arr = [24, 35, -48],
    obj = {mat_nr: 1996746930,
           name: "Müller, Elfriede"};
var pi2 = 2*pi, piroot = Math.sqrt(pi);

Operatoren

Operatoren führen eine Operation mit einem oder mehreren Operanden durch.

Operator typeOperators
member . []
call / create instance () new
negation/increment ! ~ - + ++ - - typeof void delete
multiply/divide * / %
addition/subtraction + -
bitwise shift << >> >>>
relational < <= > >= in instanceof
equality == != === !==
bitwise-and &
bitwise-xor ^
bitwise-or |
logical-and &&
logical-or ||
conditional ?:
assignment = += -= *= /= %= <<= >>= >>>= &= ^= |=
comma ,

Die Operatoren in der Tabelle besitzen abnehmende Priorität, d.h. Operatoren in der ersten Zeile haben die höchste und in der letzten Zeile die niedrigste Priorität.

[Quelle: MozillaDeveloper Center]

Ausdrücke

Ein Ausdruck (expression) …

Anweisungen

Eine Anweisung (statement) … 

var s = "hallo", vocals=0;

for (var i=0; i<s.length; i++) {
   switch (s.charAt(i)) {
      case "a": case"A":
      case "e": case"E":
      case "i": case"I":
      case "o": case"O":
      case "u": case"U": vocals++; break;
      default: break;
   }
}

window.alert(vocals + " Vokale gefunden!");

Bedingungsanweisungen

Eine Bedingungsanweisung (conditional expression) …

if … else 

  if (bedingung) {
     anweisung*
  }
  else {
     anweisung*
  }

switch 

  switch(ausdruck) {
     case literal1:
        anweisung*
        break;
     ...
     case literalN:
        anweisung*
        break;
     default:
        anweisung*
        break;
  }

Wiederholungsanweisungen

Eine Wiederholungsanweisung (loop) …

do … while 

  do {
     anweisung*
  }
  while (bedingung);

for 

  for (initialisierung; bedingung; inkrementierung) {
     anweisung*
  }

for … in 

  for (eigenschaft in object) {
     anweisung*
  }

while 

  while (bedingung) {
     anweisung*
  }

Kommentare

Ein Kommentar (comment) … 

// Dies ist ein *einzeiliger* Kommentar
var x = 42;
/* Und nun
   ein mehr-
   zeiliger
   Kommentar */

Funktionen

Eine Funktion (function) …

Beispiel: 

function TagPreis(artikel) { return 4.90; }
function NachtPreis(artikel) { return 7.90; }

var hour = 19,
    Preis = hour > 20 ? TagPreis
                      : NachtPreis;
Preis("bier");

Objekte

Javascript selbst stellt nur einige wenige Objekte zur Verfügung
(Array, Boolean, Date, Function, Global, Math, Number, RegExp, String)

Beispiel: 

// static circle object
var circle = { 
  x:25, y:35, 
  r:10, 
  color:"green",
  length: function() { return 2*Math.PI*circle.r; }
  area: function() { return Math.PI*circle.r*circle.r; }
}; 
window.alert(circle.area());

// circle constructor
function Circle(x, y, r, color) {
  this.x = x; this.y = y;
  this.r = r;
  this.color = color;
}
Circle.prototype = {
  length: function() {return 2*Math.PI*this.r; }
  area: function() {return Math.PI*this.r*this.r; }
};

var c1 = new Circle(20,30,5,"red"),
    c2 = new Circle(120,30,7,"blue");

Einbindung von Javascript in HTML

Es gibt genau drei Möglichkeiten, Javascript Programmcode in HTML und XML einzubinden.

Beispiel: 

<html>
  <head>
    <title>Javascript Einbindung</title>
    <script type="text/javascript" src="extern.js"> </script>
    <script type="text/javascript">
      var a = 3, z = 14*a;
      function init() { /* ... */ }
      ...
    </script>
  </head>
  <body onload="init();">
     <!-- ... -->
  </body>
</html>

Aufruf von Javascript-Anweisungen in HTML

Eine Javascript Anweisung wird

Beispiel: Beispiel: 

<html>
  <head>
    <title>Javascript Einbindung</title>
    <script type="text/javascript" src="extern.js"> </script>
    <script type="text/javascript">
      var c = 2 + 2 + "2";
    </script>
  </head>
  <body onclick="alert("84"*1/2);">
    <script type="text/javascript">
      document.write(23%8*6);
    </script>
     <!-- ... -->
  </body>
</html>

HTML Event-Handler