JavaScript Kurs: Unterschied zwischen den Versionen

Aus MINT.lentner.net
Zur Navigation springen Zur Suche springen
 
(35 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
 
[[Datei: js.jpg |thumb|links|250px]]
 
[[Datei: js.jpg |thumb|links|250px]]
  
Ab Schuljahr 2020/2021 führt die Städtische Realschule für Mädchen Rosenheim einen Forscherklassenzweig in der 5. und 6. Jahrgangsstufe. Ab der 7. Jahrgangsstufe kann diese Schwerpunktsetzung dann mit dem Besuch der Wahlpflichtfächergruppe I (Mathematisch-Naturwissenschaftlicher Zweig) fortgesetzt werden.
+
===Willkommen beim kleinen Javascript-Workshop===
 +
Im [[Html-Kurs]] habt Ihr gelernt, wie man Objekte auf einer Internet-Seite <b>selber</b> layoutet. Fast alle Internet-Seiten werden aber von Algorithmen (automatisch) erzeugt. Die einfachste und am weitesten verbreitete Script-Sprache für solche html-erzeugenden Programme ist das hier vorgestellte <b>JavaScript</b>. <p>
 +
Die für den Unterricht zusammengestellten kleinen Programme zeigen die typische features, die <b>JavaScript</b> als "<b>Internet-Sprache</b>" auszeichnet.<p>
  
Wir wollen durch dieses Angebot den diesbezüglich interessierten Mädchen besonders fördern und Ihnen einen vertieften, kindgerechten Einblick in eine selbstständige, forschende und naturwissenschftliche Geistes- und Lernhaltung geben. In Kleingruppen (10 - 12 Schülerinnen) und Doppelstunden führen unsere Kolleginnen und Kollegen in Mathematik, Biologie, Chemie, Physik und Informatik projektorientierte Lerneinheiten zusätzlich zum Pflichtunterricht durch. In diesem Schuljahr ist Coronabedingt das Angebot etwas eingeschränkt, da zum Beispiel ROBOTIK (LEGO-Programmierung in Kleingruppen) hygienetechnisch nicht durchführbar ist.
+
Viel Spaß beim erkunden Algorithmen-erzeugter WEB-SITES.
  
Die Stundenverteilung in diesem Schuljahr entnehmen Sie bitte der [[5b, Forscherklasse 2020/2021 | >>> Klassenseite ...]]
+
<br style="clear:left; ">
  
<i>Wolfgang Lentner</i>
+
Ich führe hier ausschließlich frei kopierbare Programme auf, deren kompletter Code in der anzeigenden Site enthalten ist, die also keinerlei ausgelagerte Dateien oder Zugriffe auf externe Bibliotheken benötigen. Ihr könnt Euch die Programme daher leicht auf Eueren PC laden:<p>
  
Willkommen beim Javascript-Workshop
+
<pre>Site starten > bei den meisten Browsern dann rechte Maustaste > Quelltext anzeigen (oder View Page Source) > Datei speichern</pre>
An dieser Stelle sollen einfache JavaScript-Programme gesammelt werden, die sich für den Unterricht im Rahmen eines Internet-Kurses eignen. Ich führe hier ausschließlich frei kopierbare Programme auf, deren kompletter Code in der anzeigenden Site enthalten ist, die also keinerlei ausgelagerte Dateien oder Zugriffe auf externe Bibliotheken benötigen. Ihr könnt Euch die Programme daher leicht auf Eueren PC laden:
 
(Site starten > bei den meisten Browsern dann rechte Maustaste > Quelltext anzeigen > Datei speichern),
 
  
Am besten dann den Quellcode studieren sowie verändern und die Veränderungen immer wieder testen!
+
Am besten dann den Quellcode studieren sowie verändern und die Veränderungen immer wieder testen! Die Site sollte mit allen gängigen Browsern ohne irgendwelche Zusätze lauffähig sein.
  
(Die Site sollte mit allen gängigen Browsern ohne irgendwelche Zusätze lauffähig sein.)
+
===Programmliste Grundkurs:===
 +
# [http://www.lentner.net/schule/javascript/1.html JavaScript-Anweisungen im html-Text] ... man kann einfachste JavaScript-Aktionen an jeder Stelle in eine html-Datei einbauen.
 +
# [http://www.lentner.net/schule/javascript/2.html Datentypen in JavaScript - Ausgabe mit alert] ... man kann Daten abspeichern und rechnen, wie mit jeder anderen Programmiersprache. Die Handhabung von Datentypen ist allerdings gewöhnungsbedürftig!
 +
# [http://www.lentner.net/schule/javascript/3.html Primfaktorzerlegung einer beliebigen Zahl (Aus- und Eingabe)] ... die meisten dynamischen WEB-SITES werden durch Eingaben von Besuchern auf Formularen gesteuert.
 +
# [http://www.lentner.net/schule/javascript/4.html Liste der Primfaktorzerlegungen der Zahlen von 1 bis 100 (Ausgabe mit document.write)] ... man kann aber auch ganz ohne Formulare html-Code erzeugen um z.B. übermäßig großen Tippaufwand zu sparen.
 +
# [http://www.lentner.net/schule/javascript/5.html Liste aller Primzahlen von 1 bis 10000 (Ausgabe mit document.write)] ... oder eine immense Arbeit zu sparen, die Daten überhaupt erst einmal zu erzeugen.
 +
# [http://www.lentner.net/schule/javascript/6.html Listenumfang durch prompt bestimmen (Primzahlen)] ... ebenso ist es möglich, das Ergebnis nach Benutzerwünschen auszurichten.
 +
# [http://www.lentner.net/schule/javascript/7.html Liste aller Fakultaeten von 1 bis 100] ... Fakultäten sind typische Ergebnisse, die schnell die kapazität von Taschenrechnern sprengen.
 +
# [http://www.lentner.net/schule/javascript/8.html Ein selbst programmierter Taschenrechner] ... Formulare können ganz einfach zu beliebiger Kompexität und Funktionalität ausgebaut werden.
 +
# [http://www.lentner.net/schule/javascript/9.html Sekundenzähler (Zeitverzögerter Funktionsaufruf)] ... zeitabhängige Aktionssteuerung/Aufrufverzögerung von Funktionen reizt besonders die Kreativität.
 +
# [http://www.lentner.net/schule/javascript/10.html Bilder wechseln (Grafiken austauschen - Animationen)] ... wie ändert man eine Seite nachträglich, die bereits angezeigt wurde?
  
Programmliste:
+
===Zusätzliche JavaScript-Programme:===
# JavaScript-Anweisungen im html-Text
+
# [http://www.lentner.net/schule/javascript/rgb.html Obiger Taschenrechner mit Zusatzfunktion] ... man kann die Hintergrundfarbe im HexCode eingeben (ChangeColor), mit RGB-Farben spielen
# Datentypen in JavaScript - Ausgabe mit alert
+
# [http://www.lentner.net/schule/memory/1/index.html Memory-Spiel] ... mit Herbst-Fotos aus dem ehemaligen Pfarrgarten in Höslwang
# Primfaktorzerlegung einer beliebigen Zahl (Aus- und Eingabe)
 
# Liste der Primfaktorzerlegungen der Zahlen von 1 bis 100 (Ausgabe mit document.write)
 
# Liste aller Primzahlen von 1 bis 10000 (Ausgabe mit document.write)
 
# Listenumfang durch prompt bestimmen (Primzahlen)
 
# Liste aller Fakultaeten von 1 bis 100
 
# Taschenrechner
 
# Sekundenzähler (Zeitverzögerter Funktionsaufruf)
 
# Modelgalerie (Grafiken austauschen - Animationen)
 
 
 
Welche JavaScript-Elemente entdeckst Du noch auf der Homepage?
 
 
 
Link zum Download-Verzeichnis der Lehrerbilder (letztes Progrmm)!
 
 
 
 
 
[http://www.lentner.net/schule/javascript/Index.html http://www.lentner.net/schule/javascript/Index.html]
 

Aktuelle Version vom 16. Dezember 2020, 15:12 Uhr

Js.jpg

Willkommen beim kleinen Javascript-Workshop

Im Html-Kurs habt Ihr gelernt, wie man Objekte auf einer Internet-Seite selber layoutet. Fast alle Internet-Seiten werden aber von Algorithmen (automatisch) erzeugt. Die einfachste und am weitesten verbreitete Script-Sprache für solche html-erzeugenden Programme ist das hier vorgestellte JavaScript.

Die für den Unterricht zusammengestellten kleinen Programme zeigen die typische features, die JavaScript als "Internet-Sprache" auszeichnet.

Viel Spaß beim erkunden Algorithmen-erzeugter WEB-SITES.
Ich führe hier ausschließlich frei kopierbare Programme auf, deren kompletter Code in der anzeigenden Site enthalten ist, die also keinerlei ausgelagerte Dateien oder Zugriffe auf externe Bibliotheken benötigen. Ihr könnt Euch die Programme daher leicht auf Eueren PC laden:

Site starten > bei den meisten Browsern dann rechte Maustaste > Quelltext anzeigen (oder View Page Source) > Datei speichern

Am besten dann den Quellcode studieren sowie verändern und die Veränderungen immer wieder testen! Die Site sollte mit allen gängigen Browsern ohne irgendwelche Zusätze lauffähig sein.

Programmliste Grundkurs:

  1. JavaScript-Anweisungen im html-Text ... man kann einfachste JavaScript-Aktionen an jeder Stelle in eine html-Datei einbauen.
  2. Datentypen in JavaScript - Ausgabe mit alert ... man kann Daten abspeichern und rechnen, wie mit jeder anderen Programmiersprache. Die Handhabung von Datentypen ist allerdings gewöhnungsbedürftig!
  3. Primfaktorzerlegung einer beliebigen Zahl (Aus- und Eingabe) ... die meisten dynamischen WEB-SITES werden durch Eingaben von Besuchern auf Formularen gesteuert.
  4. Liste der Primfaktorzerlegungen der Zahlen von 1 bis 100 (Ausgabe mit document.write) ... man kann aber auch ganz ohne Formulare html-Code erzeugen um z.B. übermäßig großen Tippaufwand zu sparen.
  5. Liste aller Primzahlen von 1 bis 10000 (Ausgabe mit document.write) ... oder eine immense Arbeit zu sparen, die Daten überhaupt erst einmal zu erzeugen.
  6. Listenumfang durch prompt bestimmen (Primzahlen) ... ebenso ist es möglich, das Ergebnis nach Benutzerwünschen auszurichten.
  7. Liste aller Fakultaeten von 1 bis 100 ... Fakultäten sind typische Ergebnisse, die schnell die kapazität von Taschenrechnern sprengen.
  8. Ein selbst programmierter Taschenrechner ... Formulare können ganz einfach zu beliebiger Kompexität und Funktionalität ausgebaut werden.
  9. Sekundenzähler (Zeitverzögerter Funktionsaufruf) ... zeitabhängige Aktionssteuerung/Aufrufverzögerung von Funktionen reizt besonders die Kreativität.
  10. Bilder wechseln (Grafiken austauschen - Animationen) ... wie ändert man eine Seite nachträglich, die bereits angezeigt wurde?

Zusätzliche JavaScript-Programme:

  1. Obiger Taschenrechner mit Zusatzfunktion ... man kann die Hintergrundfarbe im HexCode eingeben (ChangeColor), mit RGB-Farben spielen
  2. Memory-Spiel ... mit Herbst-Fotos aus dem ehemaligen Pfarrgarten in Höslwang