Präsentation herunterladen
Veröffentlicht von:Loreley Zehner Geändert vor über 10 Jahren
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
Ähnliche Präsentationen
© 2024 SlidePlayer.org Inc.
All rights reserved.