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

Sprachkonstrukte Webtechnologie 27.03.2017

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 27.03.2017

Objekte / vordefinierte Objekte Webtechnologie 27.03.2017

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 27.03.2017

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 27.03.2017

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

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 27.03.2017

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 27.03.2017

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 27.03.2017

Funktionen Webtechnologie 27.03.2017

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 27.03.2017

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 27.03.2017

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 27.03.2017

Event Handler Webtechnologie 27.03.2017

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 27.03.2017

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

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

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 27.03.2017

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 27.03.2017

Sicherheit Webtechnologie 27.03.2017

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 27.03.2017

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 27.03.2017

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 27.03.2017

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 27.03.2017

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.: www.thawte.com Anwendung meist firmenintern  Vertrauenswürdig Signiertes Script schließt bösartige Absicht des Scripts nicht aus! Webtechnologie 27.03.2017

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

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 27.03.2017

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 27.03.2017

DOM (Document Object Model) Webtechnologie 27.03.2017

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 27.03.2017

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 27.03.2017

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

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 27.03.2017

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 27.03.2017

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 27.03.2017

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 27.03.2017

Ausblick DOM - Illustration Webtechnologie 27.03.2017

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 27.03.2017

ECMA-Script Components Webtechnologie 27.03.2017

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 27.03.2017

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

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 27.03.2017

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