Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
lehrkraefte:blc:informatik:ffprg1-2023:start [2023/04/24 07:44] – [Lerneinheiten] Ivo Blöchligerlehrkraefte:blc:informatik:ffprg1-2023:start [2023/06/27 06:30] (current) – [Freifach Programmieren, Einstieg] Ivo Blöchliger
Line 1: Line 1:
 +====== Freifach Programmieren, Einstieg ======
  
 +===== Lerneinheiten =====
 +  * [[.:setup|Lektion 0: Einrichten, «Hello world» in HTML, JS und CSS]]
 +  * [[.:js-intro|Lektion 1: Erste Programme in JavaScript]]
 +  * [[.:programming-basics|Lektion 2: Variablen, Wiederholungen, Bedingte Ausführung]]
 +  * [[.:js-no-globals|Lektion 3: Ohne globale Variablen, Closures]]
 +  * [[.:js-connect-4:start|Lektion 4: 4-Gewinnt in JavaScript]]  
 +  * [[.:simon:start|Lektion 5: Simon-Spiel zum auswendig lernen von $\pi$]]
 +  * [[.:grid-based|Lektion 6: Rasterbasierte Spiele: Snake, Tetris]]
 +  * [[.:modules-and-classes|Lektion 7: Module, Klassen und Labyrinthe generieren]]
 +  * Beispiel für ein Dialog-Fenster: {{lehrkraefte:blc:informatik:ffprg1-2023:15-dialog.zip}}
 +  * [[.:datenaufserver|Daten auf dem Server speichern]]
 +===== Theorie / Dokumentation =====
 +  * [[.:files-directories-commandline|Dateien, Ordner, Kommandozeile]]
 +
 +===== Programm =====
 +
 +    * alias, ssh, scp, ~/.ssh/config, ssh-keys, «git-bash here»
 +    * upload script
 +  * Hello World:
 +    * JS auf der Konsole
 +    * HTML
 +    * JS inline
 +    * JS in separater Datei
 +    * CSS
 +  * Variablen in JS: global, var und let.
 +  * JS mit nur einer oder ohne globale Variablen
 +  * Manipulation von HTML-Elementen
 +  * Event-Loop im Browser, DOM
 +
 +====== Übersicht ======
 +
 +{{lehrkraefte:blc:informatik:ffprg1-2023:vorstellung-ffprog-beide.pdf|Vorstellung der Freifächer}}
 +
 +Wir werden JavaScript im Browser erlernen. Dazu gehören auch grundlegende Kenntnisse in HTML und CSS.
 +
 +Die Vorteile sind:
 +  * Ein Browser und ein Text-Editor sind auf fast allen Computern standardmässig vorhanden und installiert.
 +  * Die Programme funktionieren auf praktisch allen Geräten, die Webseiten anzeigen können. Und zwar ohne Installation.
 +  * Heutige Browser haben sehr gute und hilfreiche «Developper Tools» integriert, die einem das Programmiererleben vereinfachen.
 +  * Sie lernen en passant, wie moderne Webseiten funktionieren und können das nutzen, um mit Webseiten zu interagieren (Stichworte UserScripts, TamperMonkey).
 +  * Es gibt sehr viele Libraries für fast alles.
 +
 +Die Nachteile sind:
 +  * JavaScript hat nicht den besten Ruf als Programmiersprache und hat einige Quirks. Es hat sich aber viel getan und es wird noch vieles tun.
 +  * Interaktion vom System mit JavaScript im Browser ist sehr limitiert, z.B. wenn Dateien gelesen oder geschrieben werden sollen. Es gibt mit NodeJS aber auch die Möglichkeit, JavaScript ohne Browser auszuführen.
 +
 +
 +===== Vermittelte Grundlagen =====
 +Folgende grundlegenden und von der Programmiersprache unabhängige Konzepte sollen vertieft und gefestigt, bzw. erlernt werden:
 +  * Wiederholungen (for und while)
 +  * Selektion und bool'sche Ausdrücke (if, &&, ||, !)
 +  * Funktionen, Gültigkeitsbereich von Variablen (scope).
 +  * Strings vs. Zahlen
 +  * Arrays und Objects (Hashmaps, Dictionaries), JSON
 +  * Events, Konzepte asynchroner Programmierung.
 +  * Verwendung der Object.method() Notation.
 +  * Evtl. Closures und «First class functions».
 +
 +===== Beispiele =====
 +  * Ein kleiner Rechentrainer: https://bloechligair.ch/rechnen/
 +  * Vorlage, um Wordle zu Programmieren: https://ofi.tech-lab.ch/2022/teach/d0571f1e/
 +  * Einstiegsbeispiele (und einige komplexere): https://fginfo.ksbg.ch/~ivo/js/
 +
 +
 +===== Seiten vorheriger Programmier-Kurse =====
 +
 +  * [[ffprog:ffprogjava2016|2016, Programmieren mit Java, Einstieg (1 Semester)]]
 +  * [[lehrkraefte:blc:informatik:ffprg1-2018:ffprg1-2018|2018, Programmieren Einstieg: TigerJython]]
 +  * [[lehrkraefte:blc:informatik:ffprg1-2019:start|2019, Programmieren Einstieg: Python]]
 +  * [[lehrkraefte:blc:informatik:ffprg1-2020:start|2020, Programmieren Einstieg: Python]]
 +  * [[lehrkraefte:blc:informatik:ffprg1-2021:start|2021, Programmieren Einstieg: Python]]
 +  * [[lehrkraefte:blc:informatik:ffprg1-2022:start|2022, Programmieren Einstieg: Python]]