-
Notifications
You must be signed in to change notification settings - Fork 10
/
index_de.html
87 lines (67 loc) · 3.11 KB
/
index_de.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!doctype html>
<head>
<title>Kursmaterial — JavaScript für Webseiten</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Averia+Serif+Libre:300,400">
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
</head>
<h1>Kursmaterial: JavaScript für Webseiten</h1>
<p><a href="index.html">In English »</a></p>
<p><strong><em>Achtung: Dieses Material ist etwas veraltet, weil hier Animationen mit JavaScript umgesetzt werden, was heutzutage eher mit CSS gemacht werden würde. Es war ursprünglich Teil 2 (Tag 2) des <a href="http://opentechschool.github.io/js-beginners-1/index_de.html">JavaScript für absolute Beginner-Workshop</a>, wird aber nicht mehr aktiv verwendet.</em></strong></p>
<p>Das Internet ist eine Wundermaschine, getrieben von Magie, oder –
wie wir es nennen – JavaScript.</p>
<p>Heute lernen wir, wie man mit JavaScript Webseiten-Inhalte
erstellen und verändern kann. So können wir mittels JavaScript
Texte, Formen und Bilder erscheinen lassen, sie verschieben
oder sie effektvoll ausblenden. Dabei wird der Inhalt einer Webseite
durch HTML, das Aussehen in CSS beschrieben.
</p>
<aside><p>Details für Nerds: HTML ist die Abkürzung für HyperText Markup
Language, CSS für Cascading Style Sheets. Die langen Namen werden
jedoch kaum ausgesprochen und interessieren in der Praxis eher niemanden.
Kleiner Gag: Frage einen Coach nach den Bedeutungen der Namen.
</p></aside>
<h2>Werkzeuge</h2>
<p>
Wir werden heute wieder den Browser Google Chrome benutzen und die
Vorteile seiner Konsole benutzen. Weiterhin benutzen wir andere
Entwickler-Features des Browsers.
</p>
<p>
Nachdem wir gestern den Großteil der Programme direkt im Browser
geschrieben haben, werden wir heute zu einem Text-Editor greifen
und dort umfangreicheren Quelltext schreiben.
</p>
<p>
Da Code nur Text ist, kann prinzipiell jeder Text-Editor genutzt werden.
Die meisten Programmierer wählen jedoch einen Code-Editor, welcher
mehr Funktionen besitzt und für mehr Spaß beim Entwickeln sorgt.
</p>
<p>
Ein guter Editor ist Sublime Text 2. Falls du diesen noch nicht installiert
hast, kannst du ihn hier erhalten:
</p>
<ul>
<li><a href="http://www.sublimetext.com/2" target=_blank>Download Sublime Text 2</a></li>
</ul>
<h2>Projekt</h2>
<p>
Während des heutigen Tages werden wir eine Foto-Galerie erstellen.
Bevor wir jedoch starten, spielen wir ein wenig mit HTML und CSS herum,
sodass du ein Gefühl für das Zusammenspiel der beiden Technologien bekommst.
<p>
<h2>Informationsquellen</h2>
<p>
Halte den <a href="http://marijnhaverbeke.nl/js-cheatsheet.html"
target=_blank>JavaScript-Spickzettel</a> in einem Tab deines Browser
griffbereit, sodass du jederzeit nachgucken kannst, falls du etwas
vergessen hast.
</p>
<p>
Darüber hinaus sind unsere Coaches auch immer gerne bereit Fragen
zu beantworten. Falls Du irgendwann zwischendurch das Gefühl hast,
dass Du verwirrt bist oder nicht weiterkommst, mach Dich bemerkbar
und wir werden unser Bestes tun Dich zu „entwirren“.
</p>
<h2>Los geht’s</h2>
<p><a href="page1_de.html">→ Zur ersten Seite</a>.</p>