PROTRANET, Burkhard Lösel, www.protranet.de und www.software-loes.de

Inhalte:

1 Grundlagen

2 Syntax


3 Programmsteuerung

4 Funktionen


5 Das Objektmodell von JavaScript


6 Event-Handler und typischen Anwendungen






1 Grundlagen

2 Syntax


3 Programmsteuerung

4 Funktionen


5 Das Objektmodell von JavaScript


6 Event-Handler und typischen Anwendungen






1 Grundlagen

1996 nahm die Firma Netscape JavaScript in den damals führenden Webbrowser Navigator auf. In den Jahren danach versuchte Microsoft eigene Dialekte im Explorer durchzusetzen, der sogenannte Browser-Krieg. Deshalb sieht man oft im Code sogenannte Browser-Weichen: Das Programm verzweigt je nach benutztem Browser in unterschiedliche Teile. Ungefähr 2005 hatte Mozilla Firefox die Marktführung übernommen und erarbeitete die JavaScript-Versionen öffentlich. Diese Spezifikationen heissen ECMA.

Microsoft schloss sich schliesslich an.

Mit der raketenhaften Verbreitung von Chrome, das ebenfalls auf kooperativen Standard setzt, war es endgültig entschieden:

Im Frühjahr 2012, mit HTML5, wurde JavaScript zur Standard-Scriptsprache für Webseiten.

Inzwischen besitzt Oracle die Markenrechte an dem Namen JavaScript.


Details siehe http://de.wikipedia.org/wiki/JavaScript#Versionsgeschichte_von_JavaScript


Inzwischen läuft JavaScript sogar auf Smartphones. Zunehmend verbreiten sich Webportale, Shops und ähnliches, die nur mit modernem JavaScript funktionieren.

Übrigends, mit Java wird immer automatisch auch eine Laufzeitumgebung (Interpreter) für JavaScript installiert, das heisst, man kann JavaScript-Programme auch mit Java, ohne Browser, laufen lassen.


Mit Node.js gibt es, paradox, auch eine Variante, die auf dem Server läuft, also Java oder PHP Konkurrenz macht.



Nur ältere Versionen und speziell-leichtgewichtige Minibrowser (etwa für Schaltschränke) können kein JavaScript. In Firefox zum Beispiel lässt es sich auch nicht mehr abschalten, zu selten ist das noch sinnvoll. Für Sicherheitsbewusste kann man NoScript als AddOn nachinstallieren, und damit gezielt ausschalten:











Innerhalb des <script>-Tag kann man einfach Programmierbefehle eintippen. Oder aber ganze Bibliotheken einbinden, Dateiname *.js. Siehe Beispiele.



Zunächst kommt eclipse mit einem einfachen Texteditor, ausser man hat sowieso schon die webfähige Enterprise Edition installiert. Bereits mit dem Texteditor lässt schnell entwickeln, denn der mitgelieferte, interne Webbrowser zeigt sofort, was man eingetippt hat:

<html>

Wollte einfach mal Hallo sagen :-)

</html>


Besser geht es mit einem PlugIn:

Open Eclipse -> Go to "Help" -> "Install New Software"

  1. Select the repository for your version of Eclipse. Select http://download.eclipse.org/releases/luna

  2. Expand "Programming Languages" -> Check the box next to "JavaScript Development Tools"

  3. Click "Next" -> "Next" -> Accept the Terms of the License Agreement -> "Finish"

  4. Wait for the software to install, then restart Eclipse (by clicking "Yes" button at pop up window)

  5. Once Eclipse has restarted, open "Window" -> "Preferences" -> Expand "General" and "Editors" -> Click "File Associations" -> Add ".js" to the "File types:" list, if it is not already there

  6. In the same "File Associations" dialog, click "Add" in the "Associated editors:" section

  7. Select "Internal editors" radio at the top

  8. Select "JavaScript Viewer". Click "OK" -> "OK"

Das sieht so aus:

























Alternative:

1

install eclipse-wtp-webtools

Weitere Alternative:

The eclipse plugin for JS Test Driver allows you to enjoy all the benefits of JS Test Driver right from the comfort of Eclipse. This includes starting and stopping the server, capturing browsers, running and rerunning tests, filtering and viewing results.



Umstellen des Webbrowsers:






Wenn die Äs, Ös, Üs nicht gehen: Zeichensatz von eclipse umstellen:






2 Syntax



3 Programmsteuerung

JavaScript kennt den boolschen Datentyp , true und false. Der Vergleichsoperator ist das doppelte Gleichzeichen == . Das einfache = ist nämlich nur die Zuweisung.

Siehe Beispiel „condition if else boolean.html“




Eine Übersicht gibt es unter http://de.wikipedia.org/wiki/JavaScript#Sprachelemente


4 Funktionen


functionName(parameter1, parameter2, parameter3) {
   
code
}

Parameter sind die Namen, die in der Funktions-Definition gelistet sind.

Argumente sind die realen Werte, die übergeben werden.

Also in function add(a, b) sind a und b die Parameter, in add(1,2) sind 1 und 2 die aufgerufenen Werte, also Argumente.

Innerhalb der Funktion sind die Argumente wie lokale Variable.

Der Rückgabewert ergibt sich nach Ablauf der Funktion:

var x = add(1, 2); nach dem Addieren ist x also 3.




Eine Funktion wird zwar nur mit einer gewissen Zahl von Parametern deklariert, doch kann sie mit einer beliebigen Zahl aufgerufen werden.

So bedeutet etwa die Deklaration:
function add(param)
konzeptionell eigentlich
function add(param,...)

siehe Beispiel function parameter argument.html



eval(); (evaluate = berechne).

parseInt(); parseFloat(); wandelt Zeichenkette in eine Zahl um

isNaN(); NotANumber, ist es ein numerischer Wert?

isFinite(); ist es ein endlicher Wert?



Zum Ausprobieren die tolle Seite http://www.w3schools.com/js/



5 Das Objektmodell von JavaScript

siehe Beispiel „Math Date Array.html“

siehe Beispiel „alert confirm prompt.html“






6 Event-Handler und typischen Anwendungen

siehe Beispiel „window open moveTo frame.html

Das automaische Öffnen von Fenstern gilt als Bevormundung des Users, schlechter Stil.

Einen Frame innerhalb eines Framesets erreicht man mit parent.meinFrame, und kann dann frames.meinFrame.location.href nachgeladen werden.

Framesets werden heutzutage aber nicht mehr benutzt.


Siehe Beispiel „audioSample.html“.

Siehe Beispiel „menu animation button.html“

Siehe Beispiel „menu animation button.html“

siehe Projekt „Zeiterfassung“


ANHANG


Organisatorisches:

Kenntnisse? englisch?

live coding zum Mittippen?