Ampelschaltung Teil 1 - HTML, CSS und JavaScript Basics
Überblick
Die meisten Webseiten bestehen im Wesentlichen aus drei
Bestandteilen:
HTML Tags, CSS Anweisungen und JavaScript
Code
Sie alle sind Text basiert und werden von Browsern nach festen Regeln
interpretiert, verarbeitet und dem User dargestellt. CSS Anweisungen und
JavaScript Code werden in den HTML Code mittels HTML Tags eingebunden. Eine
Webseite besteht also aus HTML Tags, CSS Style Anweisungen und JavaScript
Programmcode.
Dieser Kurs bietet einen ersten Einblick in diese Bestandteile mit
besonderen Schwerpunkt auf die Programmierung mit JavaScript.
Die MiniProjekte 1-4 und das Template sollen dabei helfen das Gelernte zu
festigen und sollten auch als kreative Anregung dienen.
Tags Einführung, HowTo, Getting startet, HTML, CSS, JavaScript, easy
Version 1.0.01052018
Dauer ca. 90 min.
Vorkenntnisse
Für diesen Kurs sind keine besonderen Vorkenntnisse erforderlich.
Vorbereitung
Auf dem Entwicklungssystem sollten mindestens ein Browser und ein
Texteditor installiert sein. In diesem Kurs verwende ich Chrome als Webbrowser
und Notepad++ als IDE zum entwickeln. Beide sind als Portable Version hier
erhältlich:
Ziel
Ziel ist es einen ersten Überblick über Webseiten und deren Erstellung zu
erhalten. Verstehen und erkennen der wesentlichen Bestandteile einer Webseite.
Grundlegende Bereiche nennen und erste HTML Tags sowie erste CSS Anweisungen
erkennen und anwenden können. Das wichtigste Ziel ist die Einführung in
JavaScript als erste Programmiersprache.
Einführung
Die meisten Webseiten bestehen im Wesentlichen aus drei
Bestandteilen:
HTML Tags, CSS Anweisungen und JavaScript Code.
Sie alle sind Text basiert und werden von Browsern nach festen Regeln
interpretiert, verarbeitet und dem User dargestellt. CSS Anweisungen und
JavaScript Code werden in den HTML Code mittels HTML Tags eingebunden. Eine
Webseite besteht also aus HTML Tags, CSS Style Anweisungen und Javascript
Programmcode.
Mit HTML Tags lässt sich eine Webseite strukturieren: Im <header> stehen beispielsweise Metadaten, die Angaben über Autor oder Inhalt enthalten können. Im Bereich <body> stehen z.B. Informationen wie: Wo befindet sich das Menü? Wo sind Artikel der Seite? Was kann als eine Überschrift interpretiert werden? Was als ein Bild oder Link? Die meisten Tags haben ein öffnendes und ein schließendes (durch ein / erkennbar) Tag etwa in der Form <tag></tag> <html>....</html>
Viele dieser Elemente können mithilfe von CSS Style Anweisungen formatiert oder im Layout verändert werden. Dabei können zum Beispiel Schriftarten, Formen, Sichtbarkeit und Positionen von Elementen bestimmt werden und verändert werden. CSS macht alles schön bunt.
JavaScript macht aus dieser bisher statischen Darstellung ein dynamische Anwendung. Bisher werden nur Informationen dargestellt, eine Interaktion findet nicht statt. Mit JavaScript ändert sich das. Daten können ausgelesen, verarbeitet und wieder ausgegeben werden. Stichwort: EVA (Eingabe, Verarbeitung und Ausgabe).
Im Folgenden sehen wir den HTML Quellcode aus dem Miniprojekt 1.
Arbeitsanweisung
I
Schritt 1: Kopiert die
Datei miniprojekt1.html in euer Verzeichnis.
Schritt 2: Öffnet die
Datei miniprojekt1.html mit dem Programm Chrome.
Schritt 3: Öffnet die Entwicklerkonsole.
Schritt 4: Öffnet die
Datei miniprojekt1.html mit dem Programm Notepad++.
Schritt 5: Pass den
Titel der Webseite an. Speicher alles und kontrolliere das Ergebnis im
Browser. (Im Tab sollte jetzt etwas anderes stehen.
Schritt 6: Erweitere die
Webseite um deine Lieblingsseiten. Pass dazu den Link und die
Beschreibung an und füge weitere Links hinzu.
Schritt 7: Verändere die Farbe des Hintergrunds. Verschiebe je einen Link nach Rechts, Links und Zentrier einen.
Hinweise zu
lösen:
Googled z.B.
folgende Schlagworte:
HTML CSS background
HTML CSS left oder align
Ein mögliches Ergebnis könnte wie folgende Abbildung aussehen:
JavaScript macht aus dieser bisher statischen Darstellung eine dynamische
Anwendung. Bisher werden nur Informationen dargestellt eine Interaktion findet
nicht statt. Mit JavaScript ändert sich das. Daten können ausgelesen,
verarbeitet und wieder ausgegeben werden. Stichwort: EVA (Eingabe, Verarbeitung
und Ausgabe).
JavaScript kann im <header> - Bereich eingebunden werden, kann aber
auch überall sonst mit eingebunden werden. JavaScript Code muss im
<script> - Tag der Seite stehen oder als Source mit eingebunden
werden.
Aufruf
<a href="https://www.google.de">Drueck mich!</a>
<a href="javascript:begruesse();">Drueck mich</a>
Funktion
<script>
function
begruesse(){
alert('Hallo zusammen');
}
</script>
Der bereits
aus dem 1. Miniprojekt bekannte Link im <a> - Tag wird nun durch den
JavaScript Aufruf ersetzt: javascript:begruesse();.
Dieser besagt
das die Funktion begruesse(), ohne
Parameter, bei Klick aufgerufen werden soll. In der Methode gibt es nur eine
Anweisung: alert, der den Text: 'Hallo zusammen' ausgibt.
Arbeitsanweisung
II
Schritt 9: Erweitere die
Datei miniprojekt2.html um einen weiteren Link “Nicht drückern!”
mit einer anderen Nachricht “Hey, nicht drücken”. Versuch statt eines
Link einen Button zu benutzen.
Schritt 10: Erweitere die Webseite um eine Begrüßung für Jana, Julian, Maria und Moritz.
Das Folgende
Listing zeigt wie man Arbeitsanweisung II hätte lösen können:
Aufruf
<a href="javascript:begruesse(‘Jana’)">Hallo Jana</a>
Funktion
<script>
function
begruesse(name){
alert('Hallo ’+ name+’ !’);
}
</script>
Man sieht das
im Listing oben ein Parameter übergeben wird (hier in gelb). Dieser wird mit
'Hallo ' konkateniert ( zu einen Text verknüpft) und dann mit alert (Popup
Fenster im Browser) ausgegeben.
Paramter wie
oben, können aber auch ausgelesen werden. Dadurch wird man flexibler. Ein
Beispiel zeigt folgendes Listing
Aufruf
<input type="text" name="firstName" id="firstName" value="Mickey"/>
<a href="javascript:begruesse()">Drueck mich!</a>
Funktion
function begruesse(){
var firstNameById =
document.getElementById("firstName").value;
alert('Nein!!!
' + firstNameById);
}
Im obigen Beispiel sieht man das der Variablen firstNameById der Wert aus dem <input> Feld mit der ID firstName (id="firstName") zugewiesen wird. Mit der Anweisung document.getElementById("firstName") wird das <input> Feld gewählt und mit .value der Wert. Wenn man die Variable das erste Mal benutzt, muss man sie als Variable deklarieren, indem man var davor schreibt. Hier: var firstNameById; Statt vom Typ text können input Felder auch vom Typ Nummer (type="number") sein.
Folgendes Listing soll bei der Lösung des nächsten Miniprojekts helfen:
Eingabefelder
Im obigen Beispiel sieht man das der Variablen firstNameById der Wert aus dem <input> Feld mit der ID firstName (id="firstName") zugewiesen wird. Mit der Anweisung document.getElementById("firstName") wird das <input> Feld gewählt und mit .value der Wert. Wenn man die Variable das erste Mal benutzt, muss man sie als Variable deklarieren, indem man var davor schreibt. Hier: var firstNameById; Statt vom Typ text können input Felder auch vom Typ Nummer (type="number") sein.
Folgendes Listing soll bei der Lösung des nächsten Miniprojekts helfen:
Eingabefelder
Zähler:
<input type="number" name="zaehler" id="zaehler" value="1"/>
<input type="number" name="zaehler" id="zaehler" value="1"/>
Nenner:
<input type="number" name="nenner" id="nenner" value="1"/>
Funktion
<input type="number" name="nenner" id="nenner" value="1"/>
Funktion
function
berechne(){
???
alert(‘Ergebnis ‘ + ergebnis );
}
Arbeitsanweisung III
Arbeitsanweisung III
Schritt 11: Erweitere in
der Datei miniprojekt3.html um ein weiteres Eingabefeld und gib
in der Funktion begruessung beide Felder aus.
Schritt 12: Erweitere die Datei miniprojekt4.html um zwei Nummern Eingabefelder für Zahlen. Lege einen Button zum Aufrufen der Funktion an. Und lege eine Funktion dividiere an. Gib das Ergebnis aus. Fang mithilfe einer if - Bedingung den Infinite Fehler ab. Nenner darf nicht ... sein
Schritt 13: Übertrage die
Ergebnisse des Taschenrechners in die Datei template1.html und
passe es an. Und speichere es unter deinem Namen.
Schritt 14: Passe es an und speicher es.
Ressourcen
Überprüfung der Lernziele
Was
sind die wesentlichen Bestandteile einer Webseite? - HTML, CSS, JavaScript
Wofür
sind sie gut? -Strukturierung von Text, Stylen des Textes, Verändern des Textes
Welche
Tags bzw. HTML kennt ihr? - h1..3, br, p, a, input, button, title, head, body
Welche
style Tags kennt ihr? margin, align, center
Welche
Werte nehmen die an? 10em, 20%, center
Woraus
besteht eine JavaScript Funktion? Eine Funktion besteht aus Funktionskopf und
Rumpf. Im Funktionskopf stehen der Name und die Parameter.
Was
ist eine Variable? Eine Variable wird mit var name= eingeleitet/definiert, wenn
sie auf der linken Seite vom Gleichheitszeichen steht, wird ihr der Wert von
rechts zugewiesen.
Kommentare
Kommentar veröffentlichen