Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Tittel, Manuel Baumann, Sven Webtechnologie27.01.2014 Java Script Sprachkonstrukte II –Sprachkonstrukte –Objekte / vordefinierte Objekte –Funktionen –Event.

Ähnliche Präsentationen


Präsentation zum Thema: "Tittel, Manuel Baumann, Sven Webtechnologie27.01.2014 Java Script Sprachkonstrukte II –Sprachkonstrukte –Objekte / vordefinierte Objekte –Funktionen –Event."—  Präsentation transkript:

1 Tittel, Manuel Baumann, Sven Webtechnologie Java Script Sprachkonstrukte II –Sprachkonstrukte –Objekte / vordefinierte Objekte –Funktionen –Event Handler Ausblick –Sicherheit –DOM –ECMA – Script Components

2 Tittel, Manuel Baumann, Sven Webtechnologie Sprachkonstrukte

3 Tittel, Manuel Baumann, Sven Webtechnologie 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

4 Tittel, Manuel Baumann, Sven Webtechnologie Objekte / vordefinierte Objekte

5 Tittel, Manuel Baumann, Sven Webtechnologie 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)

6 Tittel, Manuel Baumann, Sven Webtechnologie 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 !

7 Tittel, Manuel Baumann, Sven Webtechnologie Sprachkonstrukte II Objekte / vordefinierte Objekte Objektmodel im JavaScript (vereinfacht)

8 Tittel, Manuel Baumann, Sven Webtechnologie 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)

9 Tittel, Manuel Baumann, Sven Webtechnologie 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)

10 Tittel, Manuel Baumann, Sven Webtechnologie 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();

11 Tittel, Manuel Baumann, Sven Webtechnologie Funktionen

12 Tittel, Manuel Baumann, Sven Webtechnologie 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

13 Tittel, Manuel Baumann, Sven Webtechnologie 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

14 Tittel, Manuel Baumann, Sven Webtechnologie 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);...

15 Tittel, Manuel Baumann, Sven Webtechnologie Event Handler

16 Tittel, Manuel Baumann, Sven Webtechnologie 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

17 Tittel, Manuel Baumann, Sven Webtechnologie Sprachkonstrukte II Event Handler Beispiel:

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

19 Tittel, Manuel Baumann, Sven Webtechnologie Sprachkonstrukte II Event Handler Beim eintreten eines Ereignisses gibt es 2 Arten wie ein Event-Handler den JavaScript-Code anspricht 1)Code steht direkt im Event-Handler Xyz Dieser Link führt zu der Seite xyz

20 Tittel, Manuel Baumann, Sven Webtechnologie Sprachkonstrukte II Event Handler 2) Aufrufen einer Funktion im Event-Handler die vorher innerhalb definiert wurde Dieser Befehlt setzt voraus, dass die Funktion highlight zuvor definiert wurde

21 Tittel, Manuel Baumann, Sven Webtechnologie Sicherheit

22 Tittel, Manuel Baumann, Sven Webtechnologie 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

23 Tittel, Manuel Baumann, Sven Webtechnologie 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

24 Tittel, Manuel Baumann, Sven Webtechnologie 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

25 Tittel, Manuel Baumann, Sven Webtechnologie 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

26 Tittel, Manuel Baumann, Sven Webtechnologie 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!

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

28 Tittel, Manuel Baumann, Sven Webtechnologie 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(); }

29 Tittel, Manuel Baumann, Sven Webtechnologie 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

30 Tittel, Manuel Baumann, Sven Webtechnologie DOM (Document Object Model)

31 Tittel, Manuel Baumann, Sven Webtechnologie 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

32 Tittel, Manuel Baumann, Sven Webtechnologie Ausblick DOM: (Document Object Model) Beispiel - Abbildung des DOM in einer Baumstruktur: DOM-Demo DOM-Demo

33 Tittel, Manuel Baumann, Sven Webtechnologie Ausblick DOM: (Document Object Model) Methoden zur Veränderung des DOM-Baums:

34 Tittel, Manuel Baumann, Sven Webtechnologie 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

35 Tittel, Manuel Baumann, Sven Webtechnologie 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

36 Tittel, Manuel Baumann, Sven Webtechnologie 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

37 Tittel, Manuel Baumann, Sven Webtechnologie 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.

38 Tittel, Manuel Baumann, Sven Webtechnologie Ausblick DOM - Illustration

39 Tittel, Manuel Baumann, Sven Webtechnologie 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)

40 Tittel, Manuel Baumann, Sven Webtechnologie ECMA-Script Components

41 Tittel, Manuel Baumann, Sven Webtechnologie 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

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

43 Tittel, Manuel Baumann, Sven Webtechnologie Ausblick ECMA-Script Components Durch folgende Standards bekannt geworden : 1.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

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


Herunterladen ppt "Tittel, Manuel Baumann, Sven Webtechnologie27.01.2014 Java Script Sprachkonstrukte II –Sprachkonstrukte –Objekte / vordefinierte Objekte –Funktionen –Event."

Ähnliche Präsentationen


Google-Anzeigen