Javascript pro učitele

Doporučuji stáhnout Visual Studio Code, editace html, css i js je rychlejší, online verze na vscode.dev

Osnova kurzu

• Práce s VS Code, první program v Javascriptu - Hello Word
  Zkontrolovat výstupy můžeme pomocí Prompt + Alert, nebo metodou getElementById objektu document.
  <p id="demo"> zde </p>
<script>document.getElementById("demo").innerHTML = "Nejlepší způsob, jak něco napsat";</script>
  Vstupní políčko <input id="cislo" size ="5"> vyzkoušejte zde.
• Deklarace proměných, datové typy. W3schools, JS Variables.
• Metody String, Array
• Funkce, objekty, DOM
• Zpracování formuláře, Ukázka.
• Grafika HTML - canvas, SVG
• Knihovna Plotly, ukázka zde.
• Výuka statistiky s knihovnou Plotly, ukázka zde.
• Knihovna dynamické geometrie JSXGraph, ukázka zde.
• Zobrazení křivek v rovině, ukázka zde.
• Maticová reprezentace projektivity roviny, ukázka zde.
• GeoGebrascript, programování v GeoGebře, ukázka zde.
• Javascript a GeoGebrascript, externí ovládací prvky GeoGebra appletu, ukázka zde.

Prezentace

• JS1 Úvod, Javascript na ZŠ a SŠ, datové typy, podmínka, cyklus
• JS2 Řetězec, pole, funkce, objekty, DOM
• Grafika Plátno Canvas, Javascript SVG, Animace
• Plotly Knihovna plotly, kreslení grafů funkcí, histogram
• JSXgraph Knihovna dynamické geometrie, křivky počítačové grafiky
• GeoGebra Script - vnoření GeoGebra appletu do webovské stránky, tlačítka, vstupní pole

Zadání samostatných prací

1. Porovnejte dvě výuková prostředí pro ZŠ: Khan Academy a GrassHopper
2. Vytvořte program pro sestavení násobilkové tabulky, ukázka zde.
3. Napište Cayleyho tabulku pro sčítání ve zbytkové třídě Z_n. Uživatel zadá vstupním políčkem n, script vypíše sčítací tabulku.
   html: <input id="vstup" size="5" onchange="vykresli()">
   script: let n = document.getElementById('vstup').value;
   Třídu můžete reprezentovat barvou, ukázka zde.
4. Vytvořte skript pro výuku sčítání. Žák zadá sčítance, program vykreslí příslušný počet prvků a zkontroluje výsledek, ukázka zde.
5. Program pro určení největšího společného dělitele, ukázka zde.
6. Materiál demonstrující Eratosthenovo síto, ukázka zde.
7. Jednoduchá výuková animace, ukázka zde.
8. Vytvoření grafu funkce užitím knihovny plotly, ukázka zde.
9. Dynamický applet pro křivku počítačové grafiky dle vlastního výběru, ukázka zde.
10. Výukový hypertextový dokument s appletem GeoGebry a externími ovládacími prvky, ukázka zde.

Odevzdávání samostatných prací prostřednictvím sdílené nástěnky LinoIt

Odkazy

• Textový editor pro psaní html, css, js, python... Visual Studio Code
• Výukový server W3schools.
• Výukový server tvorba-webu.cz, Javascript.
• Učební texty Korespondenčního semináře programování MFF UK v Praze, Programátorské kuchařky.
• R. Hašek: Affine transformation, výukový materiál užitím knihovny JSXGraph.
• Š. Voráčová: Homografie, výukový materiál s appletem GeoGebry.
• Š. Voráčová: Programování v GeoGebře
• Š. Voráčová: Didaktický seminář