lehrkraefte:blc:informatik:ffprg1-2019:js-intro

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		 Previous revision
lehrkraefte:blc:informatik:ffprg1-2019:js-intro [2019/04/23 07:05] – created Ivo Blöchligerlehrkraefte:blc:informatik:ffprg1-2019:js-intro [2019/06/18 15:19] (current) – [Schülerprojekte] Ivo Blöchliger
Line 1: Line 1:
 +====== Schülerprojekte ======
 +  * [[https://glf.tech-lab.ch/2fNP/d8fd942a/river/river_03.html|River]]
 +  * [[https://glf.tech-lab.ch/2dNP/b5d54baf/Minesweeper.html|Minesweeper]]
 +
 +
 +====== Einführung in JavaScript ======
 +JavaScript ist die Programmiersprache, die direkt im Browser ausgeführt werden kann. Damit lassen sich dynamische Webseiten realisieren. Der gesamte HTML-Code der Seite kann damit manipuliert werden.
 +
 +JavaScript ist asynchron, d.h. der Code wird nicht einfach linear ausgeführt, sondern Funktionen werden nach bestimmten Ereignissen ausgeführt. Z.B. wenn etwas auf der Seite angeklickt oder verändert wurde, wenn die Seite vollständig geladen ist, oder nach einer bestimmten Zeit.
 +
 +===== Hello world =====
 +Ein Beispiel für einfache Manipulationen finden Sie hier:
 +
 +https://glf.tech-lab.ch/teach/deadbeef/javascript/
 +
 +  * Betrachten Sie im Browser das helloworld Beispiel.
 +  * Zeigen Sie sich den HTML-Quellcode an. Die zentralen Zeilen sind:
 +    * 7: Einbinden der JavaScript-Datei.
 +    * 12: Aufrufen der init-Funktion, wenn die gesamte Seite geladen ist (vorher kann man keine Seiten-Elemente manipulieren, weil diese noch nicht existieren.
 +    * 15,18,20,24: Aufruf von Funktionen nach bestimmten Ereignissen.
 +  * Zeigen Sie sich dann auch den Quellcode der eingebundenen JavaScript-Datei an. 
 +
 +==== Nur eine globale (überall sichtbare) Variable ====
 +Es ist gute Praxis, globale Variablen so weit wie möglich zu vermeiden. Wir begnügen und darum mit einer Variable 'helloWorld', die als Objekt sowohl unsere Daten (z.B. counter) wie auch Funktionen enthält.
 +
 +Im HTML-Code werden die Funktionen dann immer mit 'helloWord.//funktionsName(...)//' aufgerufen.
 +
 +In den Funktionen selbst wird auf Variablen (oder auch Funktionen) mit 'this.//variablenName' oder 'this.//funktionsName(...)' zugegriffen.
 +
 +====== Aufgaben ======
 +===== Rechentrainer =====
 +  * Verändern Sie das HelloWorld Beispiel so, dass der Knopf unten mit "Neue Rechnung" angeschrieben ist.
 +  * Drückt man den Knopf, wird anstatt einer Zufallszahl eine einfache Kopfrechnung angezeigt (Summe zweier natürlichen Zahlen zwischen 1 und 10).
 +  * Die Lösung der Rechnung soll oben in der Statuszeile erscheinen und im helloWorld-Objekt selbst unter 'this.resultat' gespeichert werden.
 +  * Die Lösung soll in einem Eingabefeld eingegeben werden können.
 +  * Das Resultat soll überprüft werden und eine Meldung "richtig/falsch" soll erscheinen.
 +  * Wenn das Resultat richtig war, soll automatisch eine neue Rechnung erzeugt werden. Progammieren Sie dazu eine eigene Funktion, die eine neue Rechnung erstellt, anzeigt und die Variable 'this.resultat' setzt.
 +
 +===== Grundlegende Konstrukte in JavaScript =====
 +==== if ====
 +Um die Bedingung sind immer runde Klammern zu setzen. Der Block im if steht zwischen gschweiften Klammern:
 +
 +if (//Bedingung//) {
 + /* Code wenn Bedingung wahr (true) */
 +}
 +
 +  
 +<code javascript>
 +if (i<2) {
 +  console.log("i ist kleiner 2");
 +} 
 +
 +if (i%2==0) {
 +  console.log("i ist gerade");
 +} else {
 +  console.log("i ist ungerade");
 +}
 +
 +if (i%3==0) {
 +  console.log("i ist durch 3 teilbar.");
 +} else if (i%3==1) {
 +  console.log("i lässt den Rest 1 bei der Division durch 3");
 +} else {
 +  console.log("i lässt weder Rest 0 noch 1 bei der Division durch 3");
 +}
 +</code>
 +
 +==== for ====
 +Wiederholung. Ganz allgemein:
 +
 +for (//Initialisierung//; //Bedingung davor//; //Aktion am Ende//) {
 + /* Code */
 +}
 +
 +Typischerweise:
 +<code javascript>
 +  for (var i=0; i<10; i++) {
 +     /* Wird zehn mal druchlaufen, für i von 0 bis 9 */
 +  }
 +</code>
 +Varianten:
 +<code javascript>
 +  for (var i=100; i>0; i-=10) {
 +     /* i läuft von 100 bis 10 in Schritten von -10 */
 +  }
 +</code>
 +
 + 
 +===== (print)-Debuggen =====
 +Für sporadische Ausgaben:
 +  alert("Text in einer Alert-Box");
 +  
 +Für häufigere Debug-Ausgaben:
 +  console.log("bla bla");
 +Das ist auch besonders für die Ausgabe von Arrays oder Objekten interessant, die dann in der Konsole noch analysiert werden können.
 +