Tittel, Manuel Baumann, Sven Webtechnologie27.01.2014 Java Script Sprachkonstrukte II...

Webtechnologie 04/11/23Tittel, ManuelBaumann, Sven

Java Script

• Sprachkonstrukte II– Sprachkonstrukte – Objekte / vordefinierte Objekte– Funktionen– Event Handler

• Ausblick– Sicherheit– DOM– ECMA – Script Components


Sprachkonstrukte


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


Objekte / vordefinierte Objekte


Sprachkonstrukte II Objekte / vordefinierte Objekte

• Elemente der SpracheNamen (d.h. Variable zeigen auf Objekte) auf die wir zugreifen könnenBsp.: 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)



• 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 !



• Objektmodel im JavaScript (vereinfacht)



• Math-Objekte :

- E (Eulersche Konstante) - LN2 (natürlicher Logarithmus von 2) - LOG2E (konstanter Logarithmus von 2) - PI (Kreiszahl PI) - SQRT2 (Quadratwurzel aus 2)



• 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)



• 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();


Funktionen


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



• 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



• 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); ...


Event Handler


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



• Beispiel: <img src=“moby.gif“ onclick=“Abfrage()“>



• Beispiel:

Erklärung : An verschiedenen Stellen im HTML-Code werden Eventhandler gesetzt



• Beim eintreten eines Ereignisses gibt es 2 Arten wie ein Event-Handler den JavaScript-Code anspricht

1) 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

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></script>


Sicherheit


HinführungSicherheit

• Javascript hat einige Sicherheitslöcher kein Verstoß gegen Richtlinien

• Browser entscheidet mittels Sicherheitsrichtlinien,

ob ein Script zulässig ist

• Unterschiede bei den Browsern


Das SicherheitsmodellSicherheit

• 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


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


Ausnahmen bei der SOPSicherheit

• 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


Signierte ScripteSicherheit

• 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!


Beispiele für bösartiges Coding Sicherheit

• Schleifen / Funktionsaufrufe, die unendlich andauern:

function blah() {

naBlah(); } function naBlah() {

blah(); }

blah();


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();

}


Weitere AngriffsmöglichkeitenSicherheit

• Endloses Öffnen von Browserfenstern

• Simulation von vertrauenswürdigen Eingabemasken (z.B. Onlinebanking) Phishing

• Datenklau allgemein (Passwörter, Cookies)

• Ändern der Startseite des Browsers


DOM (Document Object Model)


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



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>



Methoden zur Veränderung des DOM-Baums:



• DOM gibt nur Richtlinien für die Organisationsstruktur der Elemente als Objekte

• Über die endgültige Implementierung wird keine Aussage getroffen


ECMA-Script Components


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



• Mitglieder

Können alle Firmen werden die in Europa Computer oder Kommunikationssysteme

- Vermarkten- Produzieren- Entwickeln



• 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


Danke für eure Aufmerksamkeit

Und wenn wir nicht eingeschlafen sind dann Lernen wir noch heute…

NICHT BÖSE SEIN *g*

Tittel, Manuel Baumann, Sven Webtechnologie27.01.2014 Java Script Sprachkonstrukte II...

Documents

Transcript of Tittel, Manuel Baumann, Sven Webtechnologie27.01.2014 Java Script Sprachkonstrukte II...