Skip to content

Commit

Permalink
styling, viewport meta tag
Browse files Browse the repository at this point in the history
  • Loading branch information
@molily
molily committed Jan 9, 2016
1 parent 4257f96 commit 421ef43
Show file tree
Hide file tree
Showing 31 changed files with 252 additions and 236 deletions.
55 changes: 28 additions & 27 deletions ajax.html
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion aufgaben.html
View file
Expand Up @@ -3,8 +3,9 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Aufgaben und Anwendungsbereiche</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<script src="js-doku.js"></script>
</head>
<body>

Expand Down
3 changes: 2 additions & 1 deletion bibliotheken.html
View file
Expand Up @@ -3,8 +3,9 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Bibliotheken und Frameworks</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<script src="js-doku.js"></script>
</head>
<body>

Expand Down
3 changes: 2 additions & 1 deletion browser.html
View file
Expand Up @@ -3,8 +3,9 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Browserübergreifende Entwicklung</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<script src="js-doku.js"></script>
</head>
<body>

Expand Down
7 changes: 4 additions & 3 deletions css.html
View file
Expand Up @@ -3,8 +3,9 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Zusammenarbeit mit CSS, Darstellung von Dokumenten steuern</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<script src="js-doku.js"></script>
</head>
<body>

Expand Down Expand Up @@ -225,7 +226,7 @@ <h3>Microsofts <code>currentStyle</code></h3>
window.alert("Textfarbe: " + currentStyle.color);
window.alert("Elementbreite: " + currentStyle.width);</pre>
<p><code>currentStyle</code> liefert meist ein ähnliches Ergebnis wie das standardisierte <code>getComputedStyle</code>. In manchen Fällen gibt es jedoch Abweichungen, etwa im obigen Beispiel beim Auslesen des <code>width</code>-Wertes. <code>currentStyle.width</code> gibt <code>auto</code> zurück, wenn dem Element keine explizite Breite zugewiesen wurde. Für das browserübergreifende Auslesen der Box-Größe eignen sich stattdessen die Eigenschaft <a href="#elementgroessen"><code>offsetWidth/offsetHeight</code> sowie <code>clientWidth/clientHeight</code></a>.</p>

</div>
<div id="crossbrowser-style-auslesen" class="subsection">
<h3>Browserübergreifendes Auslesen von CSS-Eigenschaften</h3>
Expand All @@ -244,7 +245,7 @@ <h3>Browserübergreifendes Auslesen von CSS-Eigenschaften</h3>
window.alert(currentFontSize);</pre>
<p>Dies funktioniert zwar browserübergreifend, allerdings ist das Ergebnis unterschiedlich: Ältere Internet Explorer, in welchen nur <code>currentStyle</code> zur Verfügung steht, geben für die <code>font-size</code>-Eigenschaft einen <code>pt</code>-Wert zurück, andere Browser einen <code>px</code>-Wert. Mit diesen Browserunterschieden müssen Sie rechnen, sie lassen sich nicht einfach vereinheitlichen.</p>
</div>

</div>
<div id="elementgroessen" class="subsection">
<h3>Elementbox-Größen auslesen über Microsoft-Eigenschaften</h3>
Expand Down
4 changes: 3 additions & 1 deletion dom.html
View file
Expand Up @@ -3,8 +3,10 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Arbeiten mit dem DOM</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<meta name="viewport" content="width=device-width">
<script src="js-doku.js"></script>
</head>
<body>

Expand Down
12 changes: 7 additions & 5 deletions einbindung.html
View file
Expand Up @@ -3,8 +3,10 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Einbindung in HTML mit dem script-Element</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<meta name="viewport" content="width=device-width">
<script src="js-doku.js"></script>
</head>
<body>

Expand Down Expand Up @@ -54,7 +56,7 @@ <h2>Das script-Element</h2>
</div>
<div class="section" id="ausfuehrung">
<h2>Ausführung von script-Elementen</h2>

<p>Mit dem <code>script</code>-Element können Sie sowohl Scripte im Dokumentkopf als auch im Dokumentkörper einbetten. Die Ausführung des Scriptcodes läuft nach gewissen Regeln ab, die wir im folgenden betrachten.</p>
<p>Wenn der Browser das HTML-Dokument vom Webserver empfängt, beginnt er sofort damit, den Quellcode zu verarbeiten und in eine interne Speicherstruktur, das <a href="dom.html">Document Object Model (DOM)</a> zu überführen. Das dafür zuständige Modul im Browser nennt sich <dfn>Parser</dfn> und der Verarbeitungsvorgang <dfn>Parsen</dfn>.</p>
<p>Sobald der Parser auf ein <code>script</code>-Element trifft, wird das Parsing des HTML-Dokuments angehalten und der JavaScript-Code innerhalb des <code>script</code>-Elements ausgeführt. Dasselbe gilt für externe JavaScript-Dateien: Der HTML-Parser stoppt, lädt die externe JavaScript-Datei vom Webserver, führt den JavaScript-Code aus und fährt erst dann mit der Verarbeitung des restlichen HTML-Quellcodes fort.</p>
Expand All @@ -70,13 +72,13 @@ <h3>Scripte haben Zugriff auf die Objekte vorher eingebundener Scripte</h3>
&lt;/script&gt;</pre>
<p>Das Beispiel bindet drei Scripte ein, die ersten beiden als externe Dateien, das dritte direkt im HTML-Code. Da der Browser die Scripte in der Reihenfolge ihrer Einbindung ausführt, können spätere Scripte die Objekte, Funktionen und Variablen nutzen, die die vorher eingebundenen Scripte definiert haben. Im Beispiel wird zuerst <var>grundlagenscript.js</var> eingebunden, heruntergeladen und ausgeführt. Das darauffolgende Script aus der Datei <var>aufbauscript.js</var> kann die darin notierten Funktionen nutzen. Schließlich kann das dritte Script eine Funktion nutzen, die in <var>aufbauscript.js</var> definiert wurde.</p>
</div>

<div class="subsection" id="script-verzoegerung">
<h3>Externe Scripte verzögern den Aufbau des Dokuments</h3>
<p>Dass der Webbrowser die eingebundenen Scripte nicht erst <em>nach</em>, sondern bereits <em>während</em> dem Einlesen des HTML-Codes ausführt, hat Vor- und Nachteile. Einerseits werden Scripte so schnell wie möglich ausgeführt und es ist garantiert, dass ein externes Script ausgeführt wird, bevor ein nachfolgendes internes Script abgearbeitet wird. Andererseits verlangsamt sich der Seitenaufbau, wenn große externe Scriptdateien vom Webserver heruntergeladen werden.</p>
<p>Dieser Nachteil kann dadurch umgangen werden, alle <code>script</code>-Elemente in der notwendigen Reihenfolge am Dokument-Ende zu platzieren anstatt wie üblich in den Dokumentkopf. Aus Gründen der kürzeren Ladezeit und des schnelleren Aufbau des Dokumentes wird dies immer öfter empfohlen. Es setzt allerdings eine bestimmte Arbeitsweise voraus. Im Abschnitt <a href="event-handling-grundlagen.html">Ereignisbasierte Scripte</a> werden wir eine Methode kennenlernen, bei die Scripte die Hauptarbeit erst verrichten, wenn das Dokument vollständig geladen wurde.</p>
</div>

<div class="subsection" id="script-document-write">
<h3>Scripte können während des Ladens das Dokument mit <code>document.write</code> ergänzen</h3>
<p>Mit der Methode <code>document.write</code> kann ein Script schon während dem Laden das Dokument direkt beeinflussen und einige Weichen stellen. <code>document.write</code> nimmt HTML-Code in einem JavaScript-String entgegen und fügt diesen an der Stelle ins Dokument ein, an denen das zugehörige <code>script</code>-Element steht.</p>
Expand All @@ -101,7 +103,7 @@ <h3>Scripte können während des Ladens das Dokument mit <code>document.write</c
<p><code>document.write</code> ist beim »Unobtrusive JavaScript« nur sehr selten sinnvoll. Inhalte, die nur bei aktiviertem JavaScript sichtbar sein sollen, da sie auf JavaScript-Funktionalität beruhen, sollten Sie ohne <code>document.write</code> dynamisch ins Dokument einfügen. Die dazu nötigen Techniken werden wir noch kennenlernen.</p>
<p>Der Anwendungsbereich von <code>document.write</code> wird oftmals missverstanden. Wir haben hier den einen von zwei möglichen Anwendungsfällen kennenlernt: Das Ergänzen eines Dokuments noch während der Browser den HTML-Code einliest. Wenn <code>document.write</code> jedoch nach dem vollständigen Einlesen de HTML-Codes aufgerufen wird, hat die Methode einen ganz anderen Effekt und eignet sich nicht dazu, das vorhandene Dokument via JavaScript zu ändern.</p>
</div>

<div class="subsection" id="script-dom-zugriff">
<h3>Ein Script hat Zugriff auf die Elemente vor dem zugehörigen <code>script</code>-Element</h3>
<p>Wie Sie vielleicht wissen, ist die häufigste Aufgabe von JavaScripten der Zugriff auf das Dokument über die DOM-Schnittstelle, die die Elemente und deren Textinhalte als Knotenobjekte zugänglich macht. Da ein Script mitten im Parsing-Prozess, also während des Einlesens des HTML-Dokuments ausgeführt wird, hat es zu diesem Zeitpunkt noch nicht Zugriff auf den gesamten DOM-Elementenbaum. Stattdessen kann es nur auf einen Teil-Baum zugreifen, nämlich auf die Elemente, die <em>vor</em> dem zugehörigen <code>script</code>-Element liegen und somit vom Parser bereits verarbeitet wurden.</p>
Expand Down
4 changes: 3 additions & 1 deletion einsatz.html
View file
Expand Up @@ -3,8 +3,10 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Sinnvoller JavaScript-Einsatz</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<meta name="viewport" content="width=device-width">
<script src="js-doku.js"></script>
</head>
<body>

Expand Down
13 changes: 7 additions & 6 deletions event-handling-effizient.html
View file
Expand Up @@ -3,8 +3,9 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Effiziente Ereignisverarbeitung: Event-Delegation und Capturing</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<script src="js-doku.js"></script>
</head>
<body>

Expand Down Expand Up @@ -39,7 +40,7 @@ <h2>Event-Delegation</h2>
// Vereinheitlichung von <a href="event-handling-objekt.html">Event-Objekt</a> und <a href="event-handling-objekt.html#currenttarget-target">Zielelement</a>
var e = e || window.event;
var target = e.target || e.srcElement;

var elementName = target.nodeName,
aElement = false;
// Überprüfe, ob das Zielelement ein Link oder ein Bild im Link ist:
Expand All @@ -52,15 +53,15 @@ <h2>Event-Delegation</h2>
// suche das zugehörige Link-Element:
aElement = target.parentNode;
}

// Zeige das Vollbild, wenn das Zielelement
// ein Link ist oder in einem Link liegt:
if (aElement) {
zeigeVollbild(aElement);
// Unterdrücke die Standardaktion:
return false;
}

// Andernfalls mache nichts.
}</pre>
<p>In dieser Funktion wird das Zielelement des Ereignisses angesprochen und dessen Elementname überprüft. Wenn ein <code>a</code>-Element geklickt wurde, muss es sich um einen Link auf ein Bild handeln und das Vollbild soll eingeblendet werden.</p>
Expand All @@ -70,7 +71,7 @@ <h2>Event-Delegation</h2>
// Empfange das Elementobjekt als ersten Parameter und
// lese dessen href-Attribut mit der Bild-Adresse aus:
var bildAdresse = aElement.href;

// Blende das Bild ein, auf das der Link zeigt.
// (Die genaue Umsetzung ist an dieser Stelle ausgeklammert.)
}</pre>
Expand Down Expand Up @@ -101,7 +102,7 @@ <h2>Capturing</h2>
<p>Event-Capturing ist nur unter Verwendung der standardisierten Methode <code>addEventListener</code> möglich. Das traditionelle Event-Handling mit seinem Schema <code>element.onevent = handlerfunktion</code> registriert den Handler immer für die Bubbling-Phase. Dasselbe gilt für das Microsoft-Modell mit <code>attachEvent</code>. Für Internet Explorer vor Version 9, welche <code>addEventListener</code> nicht unterstützen, müssen Sie daher gegebenenfalls eine Alternative ohne Event-Capturing bereitstellen.</p>
<p>Um Event-Handler für die Capturing-Phase zu registrieren, nutzen Sie wie gewohnt <code>addEventListener</code>, setzen jedoch den dritten Boolean-Parameter auf <code>true</code>:</p>
<pre>document.addEventListener("focus", captureHandler, true);</pre>

<p>Die Vorteile des Capturings liegen also darin, insbesondere nicht aufsteigende Ereignisse bei einem höherliegenden Element zu verarbeiten.
<p>Folgende Ereignisse beispielsweise steigen nicht auf:</p>
<ul>
Expand Down
3 changes: 2 additions & 1 deletion event-handling-fortgeschritten.html
View file
Expand Up @@ -3,8 +3,9 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Fortgeschrittene Ereignisverarbeitung</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<script src="js-doku.js"></script>
</head>
<body>

Expand Down
4 changes: 3 additions & 1 deletion event-handling-grundlagen.html
View file
Expand Up @@ -3,8 +3,10 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Grundlagen zur Ereignisverarbeitung</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<meta name="viewport" content="width=device-width">
<script src="js-doku.js"></script>
</head>
<body>

Expand Down
6 changes: 4 additions & 2 deletions event-handling-objekt.html
View file
Expand Up @@ -3,8 +3,10 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Arbeiten mit dem Event-Objekt</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<meta name="viewport" content="width=device-width">
<script src="js-doku.js"></script>
<style type="text/css">
#target-area {
border: 1px solid #aaf;
Expand Down Expand Up @@ -185,7 +187,7 @@ <h2>Verarbeitendes Element und Zielelement</h2>
document.getElementById("absatz").onclick = klickverarbeitung;</pre>
<p>Innerhalb der Handler-Funktion können wir über <code>this</code> auf das <code>p</code>-Element zugreifen. Im Beispiel wird auf dessen Eigenschaft <code>nodeName</code> ausgegeben, welche den Elementnamen <code>P</code> enthält.</p>
<p>Der DOM-Standard sieht eine andere Zugriffsweise vor: Die Eigenschaft <code>currentTarget</code> beim Event-Objekt enthält das Element, dessen Handler gerade ausgeführt wird. Der Internet Explorer kennt diese Eigenschaft erst an Version 9. Das besagte <code>this</code> ist in älteren Internet-Explorer-Versionen die einzige Möglichkeit, auf das fragliche Element zuzugreifen. Der Einfachheit halber können Sie browserübergreifend <code>this</code> verwenden.</p>

<p>Der eindeutige Zugriff auf das <strong>Zielelement</strong> gestaltet sich etwas schwieriger. Der DOM-Standard definiert die Eigenschaft <code>target</code> beim Event-Objekt. Diese kennen alle modernen Browser, doch der Internet Explorer unterstützt diese Eigenschaft erst ab Version 9. Ältere Versionen kennen eine äquivalente Eigenschaft namens <code>srcElement</code>. Mithilfe einer Fähigkeitenweiche nehmen wir eine Vereinheitlichung vor, sodass das Zielelement in allen Browsern über eine Variable ansprechbar ist &ndash; wir kennen dieses Vorgehensweise bereits vom Zugriff auf das Event-Objekt.</p>
<pre>function klickverarbeitung (eventObjekt) {
if (!eventObjekt) eventObjekt = window.event;
Expand Down
3 changes: 2 additions & 1 deletion event-handling-onload.html
View file
Expand Up @@ -3,8 +3,9 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Onload-Techniken: Scripte ausführen, sobald das Dokument verfügbar ist</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<script src="js-doku.js"></script>
</head>
<body>

Expand Down
3 changes: 2 additions & 1 deletion fenster.html
View file
Expand Up @@ -3,8 +3,9 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Einbindung in HTML und Ereignisverarbeitung</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<script src="js-doku.js"></script>
</head>
<body>

Expand Down
3 changes: 2 additions & 1 deletion funktionen.html
View file
Expand Up @@ -3,8 +3,9 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Funktionen</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<script src="js-doku.js"></script>
</head>
<body>

Expand Down
5 changes: 3 additions & 2 deletions geruest.html
View file
Expand Up @@ -3,8 +3,9 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: </title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<script src="js-doku.js"></script>
</head>
<body>

Expand All @@ -18,7 +19,7 @@ <h1>JavaScript: </h1>
<div class="section" id="">
<h2></h2>
<p></p>

<div class="subsection" id="">
<h3></h3>
<p></p>
Expand Down
3 changes: 2 additions & 1 deletion index.html
View file
Expand Up @@ -4,8 +4,9 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="de">
<title>Einführung in JavaScript</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
<script src="js-doku.js"></script>
<link rel="author" href="mailto:zapperlott@gmail.com" title="E-Mail an den Autor senden">
<meta name="author" content="Mathias Schäfer (molily)">
<meta name="description" content="Deutschsprachige Dokumentation der Programmiersprache JavaScript für Anfänger und Fortgeschrittene">
Expand Down

0 comments on commit 421ef43

Please sign in to comment.