JavaScript Kurs: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| (12 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
[[Datei: js.jpg |thumb|links|250px]] | [[Datei: js.jpg |thumb|links|250px]] | ||
| − | ===Willkommen beim Javascript-Workshop=== | + | ===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> | 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> | Die für den Unterricht zusammengestellten kleinen Programme zeigen die typische features, die <b>JavaScript</b> als "<b>Internet-Sprache</b>" auszeichnet.<p> | ||
| Zeile 9: | Zeile 9: | ||
<br style="clear:left; "> | <br style="clear:left; "> | ||
| − | 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: | + | 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> |
| − | + | <pre>Site starten > bei den meisten Browsern dann rechte Maustaste > Quelltext anzeigen (oder View Page Source) > Datei speichern</pre> | |
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. | 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:=== | + | ===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/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/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! | ||
| Zeile 22: | Zeile 22: | ||
# [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/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/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 | + | # [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/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 | + | # [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? | # [http://www.lentner.net/schule/javascript/10.html Bilder wechseln (Grafiken austauschen - Animationen)] ... wie ändert man eine Seite nachträglich, die bereits angezeigt wurde? | ||
| + | |||
| + | ===Zusätzliche JavaScript-Programme:=== | ||
| + | # [http://www.lentner.net/schule/javascript/rgb.html Obiger Taschenrechner mit Zusatzfunktion] ... man kann die Hintergrundfarbe im HexCode eingeben (ChangeColor), mit RGB-Farben spielen | ||
| + | # [http://www.lentner.net/schule/memory/1/index.html Memory-Spiel] ... mit Herbst-Fotos aus dem ehemaligen Pfarrgarten in Höslwang | ||
Aktuelle Version vom 16. Dezember 2020, 15:12 Uhr
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:
- JavaScript-Anweisungen im html-Text ... man kann einfachste JavaScript-Aktionen an jeder Stelle in eine html-Datei einbauen.
- 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!
- Primfaktorzerlegung einer beliebigen Zahl (Aus- und Eingabe) ... die meisten dynamischen WEB-SITES werden durch Eingaben von Besuchern auf Formularen gesteuert.
- 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.
- Liste aller Primzahlen von 1 bis 10000 (Ausgabe mit document.write) ... oder eine immense Arbeit zu sparen, die Daten überhaupt erst einmal zu erzeugen.
- Listenumfang durch prompt bestimmen (Primzahlen) ... ebenso ist es möglich, das Ergebnis nach Benutzerwünschen auszurichten.
- Liste aller Fakultaeten von 1 bis 100 ... Fakultäten sind typische Ergebnisse, die schnell die kapazität von Taschenrechnern sprengen.
- Ein selbst programmierter Taschenrechner ... Formulare können ganz einfach zu beliebiger Kompexität und Funktionalität ausgebaut werden.
- Sekundenzähler (Zeitverzögerter Funktionsaufruf) ... zeitabhängige Aktionssteuerung/Aufrufverzögerung von Funktionen reizt besonders die Kreativität.
- Bilder wechseln (Grafiken austauschen - Animationen) ... wie ändert man eine Seite nachträglich, die bereits angezeigt wurde?
Zusätzliche JavaScript-Programme:
- Obiger Taschenrechner mit Zusatzfunktion ... man kann die Hintergrundfarbe im HexCode eingeben (ChangeColor), mit RGB-Farben spielen
- Memory-Spiel ... mit Herbst-Fotos aus dem ehemaligen Pfarrgarten in Höslwang
