Java Script Sprachkonstrukte II Ausblick Sicherheit DOM

Präsentation zum Thema: "Java Script Sprachkonstrukte II Ausblick Sicherheit DOM"—  Präsentation transkript:

1 Java Script Sprachkonstrukte II Ausblick Sicherheit DOM
Objekte / vordefinierte Objekte Funktionen Event Handler Ausblick Sicherheit DOM ECMA – Script Components Webtechnologie

2 Sprachkonstrukte Webtechnologie

3 Sprachkonstrukte II Sprachkonstrukte
Sprache ist universell verständlich JavaScript wird innerhalb der HTML-Seite oder externen Dateien implementiert Stand-alone kann nicht realisiert werden da JavaScript nur innerhalb von Browsern lauffähig sind Casesensitiy Groß- u. Kleinschreibung spielt eine große Rolle Webtechnologie

4 Objekte / vordefinierte Objekte
Webtechnologie

5 Sprachkonstrukte II Objekte / vordefinierte Objekte
Elemente der Sprache Namen (d.h. Variable zeigen auf Objekte) auf die wir zugreifen können Bsp.: Browser-Fenster, HTML-Dokument, HTML-Eingabe-Formular, Formular-Button…etc. Objekte sind definierbar nicht wie bei prozed. Sprache (C o. Pascal) = Strucktur bzw. Record JavaScript benutzt in erster Linie vordefinierte Objekte (bestehende Objekthierarchie) Webtechnologie

6 Sprachkonstrukte II Objekte / vordefinierte Objekte
Objekte bestehen aus 3 verschiedenen Komponenten : Eigenschaften (Properties) z.B. Hintergrundfarbe Methode (Methods) Funktion mit der Objekte abgefragt oder verändert werden kann Ereignisse (Events) Reagieren auf bestimmte Ereignisse (Reaktion bei Anklicken des Buttons) Eigenschaften von Objekten können wiederum Objekte sein ! Webtechnologie

7 Sprachkonstrukte II Objekte / vordefinierte Objekte
Objektmodel im JavaScript (vereinfacht) Webtechnologie

8 Sprachkonstrukte II Objekte / vordefinierte Objekte
Math-Objekte : E (Eulersche Konstante) LN2 (natürlicher Logarithmus von 2) LOG2E (konstanter Logarithmus von 2) PI (Kreiszahl PI) SQRT2 (Quadratwurzel aus 2) Webtechnologie

9 Sprachkonstrukte II Objekte / vordefinierte Objekte
Math-Objekte : abs() (positiver Wert) asin() (Arcus Sinus) sin() (Sinus) ceil() (nächsthöhere ganze Zahl) exp() (Exponentialwert) floor() (nächstniedrigere ganze Zahl) log() (Anwendung des natürlichen Logarithmus) round() (kaufmännische Rundung einer Zahl) sqrt() (Quadratwurzel) Webtechnologie

10 Sprachkonstrukte II Objekte / vordefinierte Objekte
Methoden aufrufen: window.history.back(); Objekt Methode Eigenschaften lesen: Var1 = window.document.title; Objekt Eigenschaft Eigenschaften verändern: document.title = “Hallo“; („Window“ kann weggelassen werden) Erzeugen von neuen Objekten Bild = new Image(); Webtechnologie

11 Funktionen Webtechnologie

12 Sprachkonstrukte II Funktionen
Zusammenfassung einer Anweisungsfolge unter einem Namen an beliebiger Stelle im Programm aufrufbar z.B. bei Events (Ereignissen) Parameter ermöglichen das Arbeiten mit unterschiedlichen Werten in einer Funktion Webtechnologie

13 Sprachkonstrukte II Funktionen
Bei der Funktionsdefinition ist zu beachten : Name (Funktion) muss eindeutig sein Innerhalb () Klammern können Parameter übergeben werden Anweisungsblock kommt zwischen {} Bei Verwendung einer Funktion muss der Funktionsname auch in () angegeben werden Webtechnologie

14 Sprachkonstrukte II Funktionen
Beispiel Es kann auch irgendein Wert in einer Funktion berechnet (oder irgendwie erzeugt) werden, der dann zurückgegeben wird. Im Funktionskopf kein Rückgabetyp. function prozent(wert, prozentsatz) { var x = wert*(1.0 + prozentsatz/100.0); return(x); } ... MWSt = prozent(NettoPreis,16); alert(MWSt); ... Webtechnologie

15 Event Handler Webtechnologie

16 Sprachkonstrukte II Event Handler
Bindeglied zwischen HTML und JavaScript Arbeitet in graphischer Benutzeroberfläche Bestimmt welche Anweisungen ausgeführt werden wenn ein bestimmtes Ergebnis eintritt Individuelle Reaktionen werden ausgeführt Webtechnologie

17 Sprachkonstrukte II Event Handler
Beispiel: <img src=“moby.gif“ onclick=“Abfrage()“> Webtechnologie

18 Sprachkonstrukte II Event Handler
Beispiel: Erklärung : An verschiedenen Stellen im HTML-Code werden Eventhandler gesetzt Webtechnologie

19 Sprachkonstrukte II Event Handler
Beim eintreten eines Ereignisses gibt es 2 Arten wie ein Event-Handler den JavaScript-Code anspricht Code steht direkt im Event-Handler <a href="xyz.html" onmouseover="window.status=return true">Xyz</a> Dieser Link führt zu der Seite xyz Webtechnologie

20 Sprachkonstrukte II Event Handler
2) Aufrufen einer Funktion im Event-Handler die vorher innerhalb <script> definiert wurde <a href="xyz.html" onmouseover="highlight(0,'on')"><img id=0 src="buttonxyz.gif"></a> Dieser Befehlt setzt voraus, dass die Funktion „highlight“ zuvor definiert wurde <script><!--function highlight(number, on_or_off){hier steht was passieren soll}--></script> Webtechnologie

21 Sicherheit Webtechnologie

22 Hinführung Sicherheit
Javascript hat einige Sicherheitslöcher kein Verstoß gegen Richtlinien Browser entscheidet mittels Sicherheitsrichtlinien, ob ein Script zulässig ist Unterschiede bei den Browsern Webtechnologie

23 Das Sicherheitsmodell Sicherheit
• Das Modell basiert im Wesentlichen auf Java • Scripte werden in einer so genannten „Sandbox“ ausgeführt, welche vom Betriebssystem isoliert arbeitet Zugriffsrechte von Javascript: Dateien, die mit dem Script engen Bezug haben Aktive Informationen, die von verwandten Web-Adressen kommen Lokales Dateisystem Speicherbereich anderer Programme Netzwerkschicht des Betriebssystems Webtechnologie

24 Same-Origin Policy (SOP) Sicherheit
Hindert Scripts daran Objekte anderer geöffneter Dokumente von anderen Web-Seiten zu steuern Überprüfung auf Quellengleichheit Gleichheit ist gewährleistet bei gleichen: Serveradressen Ports Übertragungsprotokollen Webtechnologie

25 Ausnahmen bei der SOP Sicherheit
Es gibt jedoch Methoden die von der SOP nicht betroffen sind: window.focus() window.close() window.location … Sie dienen zur harmloseren Fenstersteuerung Es Gibt jedoch Probleme mit der SOP Webtechnologie

26 Signierte Scripte Sicherheit
Identifikation des Programmierers Mehr Fähigkeiten: Zugriff aufs Dateisystem Volle Kontrolle über den Browser Netzwerkschicht des Betriebssystems Ausstellung der Zertifikate z.B.: Anwendung meist firmenintern  Vertrauenswürdig Signiertes Script schließt bösartige Absicht des Scripts nicht aus! Webtechnologie

27 Beispiele für bösartiges Coding Sicherheit
Schleifen / Funktionsaufrufe, die unendlich andauern: function blah() { naBlah(); } function naBlah() blah(); } blah(); Webtechnologie

28 Beispiele für bösartiges Coding Sicherheit
Belagern des Arbeitsspeichers: ... var text = “Hohoo, HoHooooHoHo”; while (true) text += text; function recurse() { var x = 1; //Der Stack laeuft voll! recurse(); } Webtechnologie

29 Weitere Angriffsmöglichkeiten Sicherheit
Endloses Öffnen von Browserfenstern Simulation von vertrauenswürdigen Eingabemasken (z.B. Onlinebanking)  Phishing Datenklau allgemein (Passwörter, Cookies) Ändern der Startseite des Browsers Webtechnologie

30 DOM (Document Object Model)
Webtechnologie

31 Ausblick DOM: (Document Object Model)
Beschreibt Manipulation von XML -/HTML – Elementen • Elemente werden für OOP-Sprachen als Objekte dargestellt (in unserem Fall JavaScript) • DOM bietet eine programmiersprachenunabhängige Schnittstelle (API = Application Programming Interface) • Zweck: Standardisierung beim objektorientierten Umgang mit diesen XML-/HTML-Elementen Webtechnologie

32 Ausblick DOM: (Document Object Model)
Beispiel - Abbildung des DOM in einer Baumstruktur: <HTML> <HEAD> <TITLE>DOM-Demo</TITLE> </HEAD> <BODY ID="alles"> <H3 ID="Ueberschrift">DOM-Demo</H3> <IMG SRC="ball.gif" ID="Ball1"> <IMG SRC="ball.gif" ID="Ball2"> <IMG SRC="ball.gif" ID="Ball3"> <IMG SRC="ball.gif" ID="Ball4"> </BODY> </HTML> Webtechnologie

33 Ausblick DOM: (Document Object Model)
Methoden zur Veränderung des DOM-Baums: Webtechnologie

34 Ausblick DOM: (Document Object Model)
• DOM gibt nur Richtlinien für die Organisationsstruktur der Elemente als Objekte • Über die endgültige Implementierung wird keine Aussage getroffen Webtechnologie

35 Ausblick DOM: (Document Object Model)
so genanntes Application Programming Interface (API) (Schnittstelle zur Anwendungsprogrammierung) besteht aus KNOTEN (Nodes) die Dokumente, Elemente und Attribute enthalten, die durch Zeiger miteinander verbunden sind Vereinheitlichung der Internetprogrammierung zwischen verschiedenen Browsern und Scriptsprachen Webtechnologie

36 Ausblick DOM: (Document Object Model)
Objektorientierte Sicht auf XML-Dokumente und Dokumentbestandteile Unterschiedliche Objekttypen entsprechen unterschiedlichen XML-Konzepten (z. B. Elemente, Attribute) Baumstruktur nicht nur die Elemente sondern alle Dokumentbestandteil Methoden erlauben das Navigieren und Manipulieren im Baum Webtechnologie

37 Ausblick DOM: (Document Object Model)
Keine Aussagen über die konkrete Implementation der Objekte, nur das Methodeninterface wird spezifiziert. DOM-Anwender müssen sich Klassenbibliotheken besorgen, mit denen er Arbeiten kann. Webtechnologie

38 Ausblick DOM - Illustration
Webtechnologie

39 Ausblick DOM - Ausblick
(Proprietäre) Methoden, die zusätzliche Funktionalität bieten, z.B.: Anwendung von (XSL-)Stylesheets Es gibt zahlreiche Möglichkeiten, wie man mit DOM arbeiten kann, d.h. Implementierungen z.B.: JavaScript und Web-Browser Java (+ XML-Parser) Webtechnologie

40 ECMA-Script Components
Webtechnologie

41 Ausblick ECMA-Script Components
European Computer Manufacturers Association (ECMA) Private Normorganisation (1961) zur Standardisierung von : Informations- und Kommunikationssysteme in Europa Organisation von der Industrie für die Industrie Webtechnologie

42 Ausblick ECMA-Script Components
Mitglieder Können alle Firmen werden die in Europa Computer oder Kommunikationssysteme Vermarkten Produzieren Entwickeln Webtechnologie

43 Ausblick ECMA-Script Components
Durch folgende Standards bekannt geworden : Standardisierung von ECMAScript Streit zwischen Microsoft und Netscape (JavaScript) zum Nachteil von Nutzer u. Programmierer Ermöglichung dynamischer Internetseiten Interpretierbar von z.B. Mozilla o. Internet Explorer 2. Standardisierung von C# und Bestandteile der .NET Technologie von Microsoft Webtechnologie

44 Danke für eure Aufmerksamkeit
Und wenn wir nicht eingeschlafen sind dann Lernen wir noch heute… NICHT BÖSE SEIN *g* Webtechnologie