-
Notifications
You must be signed in to change notification settings - Fork 17
/
voraussetzungen.html
60 lines (54 loc) · 7.58 KB
/
voraussetzungen.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>JavaScript: Vorkenntnisse und Voraussetzungen</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
</head>
<body>
<div id="nav">
<p>Hier entsteht eine <strong>JavaScript-Dokumentation</strong> von <a href="https://molily.de/">molily</a>. Derzeit ist sie noch lückenhaft, wächst aber nach und nach. Kommentare und Feedback werden gerne per <a href="mailto:molily@mailbox.org">E-Mail</a> entgegen genommen.</p>
<p class="contents-link"><a href="./">Zum Inhaltsverzeichnis</a></p>
</div>
<h1>JavaScript: Vorkenntnisse und Voraussetzungen</h1>
<div id="herangehensweise" class="section">
<h2>Herangehensweise dieser Einführung</h2>
<p>Diese Dokumentation wählt eine <em>bestimmte</em> Herangehensweise an JavaScript und empfiehlt einen <em>bestimmten</em> JavaScript-Einsatz. Sie gibt Ihnen bewusst eine Arbeitsweise vor und geht von einigen Grundannahmen aus, die im Folgenden offen gelegt werden. Sie müssen mit diesen selbstverständlich nicht einverstanden sein und können Ihren eigenen Weg wählen.</p>
<p>Diese Anleitung ist nicht für Webautoren gedacht, die bloß fremde Fertigscripte in ihre Sites einbauen wollen. Diese Einführung soll dazu befähigen, den Themenkomplex zu verstehen, um schließlich auf hohem Niveau zu programmieren. JavaScript wird nicht als schnell zu erlernende Technik dargestellt, sondern als eine vielseitige Programmiersprache mit erfreulichen Besonderheiten und nervenraubenden Tücken.</p>
<p>Die Geschichte von JavaScript verlief äußerst wechselhaft. Viele der im Laufe der Geschichte entstandenen JavaScript-Tutorials sind veraltet oder empfehlen eine fragwürdige Praxis. Diese Anleitung beschränkt sich auf die aktuelle Situation und erklärt ausgewählte Grundlagen des JavaScript-Gebrauchs.</p>
<p>Diese Einführung wirkt auf den ersten Blick trocken, weil sie derzeit aus viel erklärendem Text und wenig konkretem JavaScript-Code oder Anwendungsbeispielen besteht. Sie möchte zunächst die Grundkonzepte und später ständig benötigte Fertigkeiten vermitteln. Wenn Sie diese Grundlagen nachvollzogen haben, werden Sie den Aufbau von Scripten verstehen können und das Entwerfen eigener Scripte fällt Ihnen viel leichter.</p>
</div>
<div id="trennung-html-css" class="section">
<h2>HTML und CSS: Trennung von Struktur und Layout</h2>
<p>Bevor Sie sich mit JavaScript beschäftigen, sollten Sie sich bereits intensiv mit HTML und CSS auseinandergesetzt haben. Idealerweise haben Sie bereits eine kleine Website mit diesen Web-Sprachen geschrieben. JavaScript tritt nämlich als <em>dritte, zusätzliche Technik</em> hinzu, die auf HTML und CSS aufbaut.</p>
<p>Für einen Einstieg in JavaScript ist es hilfreich, die <em>genauen Aufgaben</em> von HTML und CSS sowie vor allem deren Rolle im modernen Webdesign zu kennen:</p>
<ul>
<li>Sie sollten wissen, dass <strong>HTML</strong> der Auszeichnung von Texten dient. Damit entsteht ein strukturiertes Dokument – bestehend aus Überschriften, Abschnitten, Absätzen, Listen, Hyperlinks usw.</li>
<li>Dieses Dokument wird anschließend mit <strong>CSS</strong> formatiert. Das Stylesheet hat dabei unter anderem die Aufgabe, die innewohnende Struktur für den Leser ersichtlich zu machen, Übersichtlichkeit zu schaffen und nicht zuletzt dem Dokument eine prägnante, ansprechende und mitunter kunstvolle Erscheinung zu geben.</li>
</ul>
<p>Zentral beim Einsatz von HTML und CSS ist die <strong>Trennung von Inhalt und Präsentation</strong>. Das bedeutet: Informationen zur Darstellung im Browser gehören nicht in den HTML-Code, sondern in ein ausgelagertes Stylesheet. Inhaltliche und strukturelle Informationen gehören ins HTML, wie z.B. »dieser Text ist wichtig«. Eine Auszeichnung im HTML-Code vermittelt diese »Wichtigkeit«, anstatt den Text bloß im Stylesheet z.B. fett zu formatieren.</p>
<p>Der Zweck dieser Trennung ist, dass der HTML-Code möglichst schlank ist und möglichst viel Bedeutung trägt. Man spricht daher auch von <strong>semantischem Markup</strong>. (»Semantik« ist die Lehre von der Bedeutung, und »Markup« steht für Textauszeichnung.)</p>
<p>Dadurch lassen sich effiziente Stylesheets schreiben, die HTML-Elemente gezielt ansprechen und formatieren. Im HTML-Code bedarf es dann nur wenige zusätzliche Angriffspunkte für das Stylesheet wie etwa <code>div</code>-Abschnitte sowie <code>id</code>- und <code>class</code>-Attribute. Wenn ein zentrales Stylesheet das Layout zahlreicher Dokumente steuert, ist die Präsentation mit geringem Aufwand anpassbar, ohne dass alle betroffenen HTML-Dokumente geändert werden müssen.</p>
<p>Warum ist das für JavaScript wichtig? Je klarer und präziser HTML und CSS angewendet werden, desto einfacher ist es später, JavaScripte zu schreiben. Denn mit JavaScript operieren Sie später auf Grundlage ihrer HTML-Dokumente und Ihre Scripte werden Hand in Hand mit dem Stylesheet zusammenarbeiten. Bevor Sie also die erste JavaScript-Codezeile schreiben, sollten Sie mit HTML und CSS beste Voraussetzungen dafür schaffen. Am Anfang mag das noch theoretisch klingen. Später bekommen Sie ein Gefühl dafür, HTML und CSS so zu organisieren, damit sie effizient mit JavaScript zusammenarbeiten.</p>
</div>
<div id="serverprogrammierung" class="section">
<h2>Serverseitige Programmierung</h2>
<p>Mit HTML und CSS alleine lassen sich nur statische Informationsangebote mit Texten, Bildern und Hyperlinks erstellen. Die meisten Websites bieten jedoch keine festen HTML-Dokumente, sondern interaktive Dienste. Webnutzer durchsuchen Produktdatenbanken, vergleichen Preise, bestellen Artikel, lesen Texte, schauen sich Fotos an, füllen Formulare aus, geben Texte ein, laden Dateien hoch und dergleichen. Diese Funktionen basieren auf Programmen, die auf dem Webserver laufen. Die Programme fragen zumeist Datenbanken ab, verarbeiten die Browser-Anfrage und generieren HTML-Dokumente.</p>
<p>Der Einsatz von JavaScript lohnt sich insbesondere bei solchen interaktiven und personalisierten Webanwendungen, denn JavaScript hat die Möglichkeit, deren Bedienkomfort enorm zu verbessern. Das fängt bei einem Webforum an und geht bis zu Anwendungen, die zum großen Teil aus JavaScript bestehen und sich dadurch wie Desktop-Programme verhalten können.</p>
<p>Die vollen Fähigkeiten von JavaScript entfalten sich also im Zusammenhang mit Server-Anwendungen. Um JavaScript-Techniken wie Ajax einsetzen zu können, sollten Sie daher Kenntnis einer serverseitigen Programmiersprache haben oder zumindest serverseitige Fertigscripte in Betrieb nehmen können. Gängige Einsteigersprachen für serverseitige Dynamik sind PHP, Python und Ruby.</p>
</div>
<div class="sequence-navigation">
<p class="next"><a href="konzepte.html" rel="next">Grundlegende Konzepte</a></p>
<p class="prev"><a href="aufgaben.html" rel="prev">Aufgaben und Anwendungsbereiche</a></p>
</div>
<div id="footer">
<p><strong>JavaScript-Dokumentation</strong> · <a href="./">Zum Inhaltsverzeichnis</a></p>
<p>Autor: <a href="https://molily.de/">molily</a> · Kontakt: <a href="mailto:molily@mailbox.org">molily@mailbox.org</a></p>
<p>Lizenz: <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/de/">Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0</a></p>
<p><a href="https://github.com/molily/javascript-einfuehrung">JavaScript-Einführung auf Github</a></p>
<p>Kostenloses Online-Buch und E-Book:<br><a href="https://testing-angular.com" lang="en" hreflang="en">Testing Angular – A Guide to Robust Angular Applications</a> (englisch)</p>
</div>
<script src="js-doku.js"></script>
</body>
</html>