JavaScript Kurs: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| (18 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 | + | Die für den Unterricht zusammengestellten kleinen Programme zeigen die typische features, die <b>JavaScript</b> als "<b>Internet-Sprache</b>" auszeichnet.<p> |
Viel Spaß beim erkunden Algorithmen-erzeugter WEB-SITES. | Viel Spaß beim erkunden Algorithmen-erzeugter WEB-SITES. | ||
| 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] | + | # [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] | + | # [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)] | + | # [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)] | + | # [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)] | + | # [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)] | + | # [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] | + | # [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] | + | # [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)] | + | # [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)] | + | # [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
