Ampelschaltung Teil 2 - JavaScript Funktionen und Variablen
Überblick
Die meisten Webseiten bestehen im Wesentlichen aus drei Bestandteilen:
HTML Tags, CSS Anweisungen und JavaScript Code
Dieser Kurs bietet einen ersten Einblick in diese Bestandteile mit besonderem Schwerpunkt auf die Programmierung mit JavaScript.
Die Arbeitsanweisungen 1-3 und das Template sollen dabei helfen, das Gelernte zu festigen und sollten auch als kreative Anregung dienen.
Tags Einführung, HowTo, Getting startet, JavaScript, easy
Version 1.0.28052018
Dauer ca. 90 min.
Vorkenntnisse
Für diesen Kurs sind keine besonderen Vorkenntnisse erforderlich. Abgesehen von kopieren, öffnen, bearbeiten, löschen und speichern von Dateien. Es empfiehlt sich jedoch Ampelschaltung Teil 1 zumindest einmal gesehen zu haben.
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:
ChromePortable Notepad++Portable
ChromePortable Notepad++Portable
Ziel
Ein Ziel ist es die erworbenen Web-Kenntnisse aus dem ersten Teil auszufrischen und zu vertiefen. Die wesentlichen Ziele sind JavaScript Variablen anlegen, auslesen, bearbeiten und ausgeben zu können.
Einführung
Wir erinnern uns:
Die meisten Webseiten bestehen im Wesentlichen aus drei Bestandteilen:
Die meisten Webseiten bestehen im Wesentlichen aus drei Bestandteilen:
HTML Tags, CSS Anweisungen und JavaScript Code
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.
Mindmap
Ampelschaltung
Christof Kaller
Christof Kaller
Tags
CSS
style
HTML
h1
JavaScript
function
alert
Arbeitsanweisung 0
Schritt 0: Erstelle ein Mindmap
Hinweise zu lösen:
Googled z.B. folgende Schlagworte:
HTML CSS background
HTML CSS left oder align
Ein Computer bzw. ein Computerprogramm soll dem Anwender helfen ein bestimmtes Problem zu lösen oder eine Aufgabe zu übernehmen. Ein Computerprogramm besteht aus vielen Funktionen, die sich gegenseitig aufrufen, benutzen und interagieren können. Eine Folge von Anweisungen, Deklarationen und Instruktionen. Folgen von Anweisungen, Deklarationen , Instruktionen lassen sich als eine Funktion zusammenfassen. Diese sind wiederholbare Aufrufe, die Kapselung, Modularisierung und Strukturierung fördern.
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).
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 innerhalb des <script> - Tag der Seite stehen oder kann 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 das Tag: button und den JavaScript Aufruf onclick="begruesse() ersetzt:
<button onclick="begruesse()">Drueck mich</button>
Dieser besagt, dass die Funktion begruesse(), ohne Parameter, bei Klick aufgerufen werden soll. In der Methode gibt es nur eine Anweisung: console.log, der den Text: 'Hallo zusammen' im Browser im Entwicklungsfenster ausgibt.
Aufruf
<button onclick="begruesse()"> HI!</button>
Funktion
function begruesse(){
var firstNameById = "firstName";
console.log(firstNameById);
}
Hier sieht man in Orange eine Variable. Eine Variable kann man sich wie eine Schublade im Computer vorstellen. Für jede Variable wird eine neue Schublade angelegt. Eine Schublade in der Daten wie Texte, Zahlen und andere Funktionen abgelegt werden können. Variablen können angelegt, ausgelesen, manipuliert oder gelöscht werden.
Variablen werden mit
var variablemitnamen=
deklariert. Eine neue Schublade wird angelegt.
Wird sie innerhalb einer Funktion deklariert, kann sie auch nur dort verwendet werden. Es wird eine neue Schublade mit dem Namen variablemitnamen angelegt und diese kann dann mit Daten wie Zahlen, Text und sogar anderen Funktionen belegt werden.
Hinweis Addition
Aufruf
<button onclick="berechnePlus()"> Berechne Plus!</button>
Funktion
function berechnePlus(){
var x_variable= 2;
var y_variable= 2;
var z_variable= x_variable + y_variable;
console.log(‘Ergebnis: ‘+z_variable);
}
Arbeitsanweisung I
Schritt 1: Kopiert den Ordner Teil1 vom Austausch- Ordner in euer Verzeichnis.
Schritt 2: Öffnet die Datei javascript1.html aus dem Ordner mit dem Programm Chrome.
Schritt 3: Öffnet die Entwicklerkonsole.
Schritt 4: Öffnet die Datei javascript1.html aus dem Ordner mit dem Programm Notepad++.
Schritt 5: Füge an den verschiedenen Stellen ein console.log(“Eure Nachricht”); ein und siehe dir das Ergebnis im Browser an.
Schritt 6: Erstellt eine Funktion zur Subtraktion, zur Division und Multiplikation analog (nach dem gleichen Muster) zur Addition.
Das folgende Listing zeigt wie man Arbeitsanweisung II lösen kann:
Aufruf
<a href="javascript:begruesse(‘Jana’)">Hallo Jana</a>
Funktion
<script>
function begruesse(name){
console.log('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 console.log (im Browser) ausgegeben.
Im folgenden Listing wird gezeigt, wie man abhängig von Parameter zwei verschieden Ausgaben erzeugt. Der Vergleich (rechnugsTyp == “plus”) in der if Bedingung bestimmt dabei, ob der Teil in den geschweiften Klammern ausgegeben wird oder nicht.
Aufruf
<button onclick="berechne(‘plus’)">
Berechne Plus!</button>
Funktion
function
berechne(rechnugsTyp){
if(rechnugsTyp == “plus”){
console.log(“plus”);
}
else{
console.log(“etwas anderes”);
}
}
Arbeitsanweisung II
Schritt 7: Erweitere die Datei
javascript1.html um 4 Buttons, die jeweils eine andere Ausgabe produzieren.
Schritt 8: Abhängig vom gedrückten Button soll eine eurer zuvor erstellten Funktionen aufgerufen werden.
Aufruf
<input type="text" name="zahlEins" id="zahlEins" value="1"/>
<button onclick="berechne(‘plus’)"> Berechne Plus!</button>
Funktion
function berechne(param){
var x_wert=
document.getElementById("zahlEins").value;
console.log(x_wert);
}
Arbeitsanweisung III
Schritt 9: Erweitere die Datei javascript1.html um Eingabefelder und nutze diese zur Berechnung.
Ressourcen
Überprüfung der Lernziele
Was sind die wesentlichen Bestandteile einer Webseite? - HTML, CSS, JavaScript
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. Vergleichbar einer Schulade in die man etwas legt.
Wie wird sie definiert? Sie wird mit var NAME eingeleitet.Was kann man mit Variablen machen? Bearbeiten, verändern, auslesen, ausgeben.
Kommentare
Kommentar veröffentlichen