Ampelschaltung Teil 3 - JavaScript Bedingungen, Schleifen und Parameter
Ampelschaltung Teil 3 - JavaScript Bedingungen, Schleifen und Parameter
Überprüfung der Lernziele
Ü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 die Templates sollen dabei helfen, das Gelernte zu festigen und sollten auch als kreative Anregung dienen.
Tags Ampelschaltung, Bedingungen, JavaScript, Parameter, Schleifen, Teil 3,
Version 1.0.05062018
Dauer ca. 90 min.
Vorkenntnisse
Für diesen Kurs sollte man die Teile 1 +2 des Kurses absolviert 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 zweiten Teil auszufrischen und zu vertiefen. Die wesentlichen Ziele sind JavaScript Bedingungen, Schleifen und Parameter zu nutzen. Damit lasst sich bereit eine schier unendliche Zahl an Use Cases umsetzten.
Einführung
Arbeitsanweisung 0
Schritt 0: Erweitere das Mindmap um 4 weitere Begriffe.
Aufruf
<input type="text" name="firstName" id="firstName" value="Mickey"/>
<button onclick="begruesse()"> Berechne Plus!</button>
Funktion
function begruesse(){
var firstNameById = document.getElementById("firstName").value;
console.log(firstNameById);
}
Arbeitsanweisung I
Schritt 1: Kopiert die Datei schleifen1.html. Öffnet die Datei mit Chrome und dem Editor. Öffnet die Entwicklerkonsole.
Schritt 2: Erweitert die Datei um zwei Input Felder und um weitere Grundrechenarten.
Schritt 3: Beachtet das nicht durch Null geteilt werden darf.
Variante 1 while Schleife:
Aufruf
loop(1);
Funktion
function loop(counter){
while(counter < 10) {
console.log( "Aktuelle Zahl " + counter);
counter = counter+1;
}
}
Variante 2 Rekursion:
Aufruf
loop(1);
Funktion
function loop(counter){
console.log(counter);
counter = counter +1;
loop(counter);
}
Arbeitsanweisung II
Schritt 4: Erweitert die Datei schleifen1.html um eine Funtkion die von 0 bis 1000 hochzählt.
setTimeout (parameter1 , parameter2 );
setTimeout ( console.log(“Pause”) , 1000);
Diese Funktion bekommt zwei Parameter.
Aufruf
loop(1); // Pause in Sekunden
Funktion
function loop(counter){
setTimeout (function(){
console.log(counter);
counter = counter +1;
loop(counter);
}, 1000);
}
Arbeitsanweisung III
Schritt 5: Erweitert die Datei schleifen2.html um eine Funktion welche jede Sekunde eins hochzählt.
Schritt 6: Zählt von 100 auf 0 runter und gebt jede Sekunde den aktuellen Wert aus.
Schritt 7: Erweitere die Datei so, das sich die Hintergrundfarbe jede Sekunde ändert.
Tipp: if (counter % 2 == 0) {
document.body.style.backgroundColor = "red";} else if (..) { ... }
Schritt 8: Erweitere die Datei schleifen2.html um eine Funktion welche jede Sekunde die aktuelle Zeit ausgibt.
Ressourcen
Überprüfung der Lernziele
Was sind Parameter? Übergebene Werte oder Funktionen.
Wie ruft man andere Funktionen auf? Durch den Namen.
Was ist eine If- Bedingung? Damit unterscheidet man ob etwas zutrifft oder nicht. Anders: Wenn, dann sonst.
Wofür braucht man alert, console.log und setTimeout?
Was ist Rekursion? Eine Funktion die sich selber aufruft.
Womit erstellt man eine Schleife? Mit while kann man Schleifen erstellen. Z.B. while ( a<10)
Wie wird diese abgebrochen? Wenn die Bedingung nicht mehr erfüllt ist.
Was ist eine Schleife? Eine Schleife wird solange ausgeführt bis die Bedingung nicht mehr erfüllt ist.
Kommentare
Kommentar veröffentlichen