HTML/JS: Testbeispiele & Tutorials & References

Javascript

Popup Boxes: www.w3schools.com: alert, confirm, prompt
Click the button to display a confirm box:
popup demo
Die Window Object Properties & Methods
Die Window.open-Methode
Click the button to open a new window called "MsgWindow" with some text.
Timing Events: www.w3schools.com: setInterval, setTimout
'overflow'-property (leider nur für div-tags, nicht für tbody ua)
innere Scrollbars lassen sich für <div>-Tags mit CSS definieren, indem man die 'overflow'-property einsetzt: style="width:200px; height:60px; overflow:auto;" (oder selektiv 'overflow-x/y'). Dafür sind die optionen 'visible,hidden,scroll,auto,initial,inherit' mgl.

Drag and Drop

Tutorial: HTML5 Drag-and-Drop
Achtung: Source & target müssen eine (beliebige) id haben!!

drop image here

or drop image here

Input mit Range Object (nicht für IE vers. ≤ 9)

Reference on W3Schools User-actions werden vom "oninput"-Event ausgewertet.
Beim Dragging des Sliders wird das 'value' span aktualisiert: value display

Test von WebSockets

siehe

Wenn der Browser WebSockets unterstüzt, ist "typeof(WebSocket) = function" (sonst "undefined"):
Dazu muß ein WebSocketServer on 'localhost' auf Port 8080 laufen.

result:

Interaktives Sortieren einer gegebenen Tabelle

(Die Tabellen-Daten sind nicht als JS-Struktur vorhanden, sondern müssen erst aus der HTML-Tabelle importiert werden.)
siehe "http://www.w3schools.com/jsref/dom_obj_table.asp"
und "http://www.j-berkemeier.de/TableSort.html" für ein fertiges Script

Model ⇅	Year ⇅	Degree ⇅	Data ⇅	Reference ⇅	download ⇅
GO_CONS_GCF_2_SPW_R4	2014	280	S(Goce)	Gatti et al, 2014	♦zip♦
EIGEN-6C4	2014	2190	S(Goce,Grace),G,A	Förste et al, 2014	♦zip♦
ITSG-Grace2014s	2014	200	S(Grace)	Mayer-Gürr et al, 2014	♦zip♦
ITSG-Grace2014k	2014	200	S(Grace)	Mayer-Gürr et al, 2014	♦zip♦
GO_CONS_GCF_2_TIM_R5	2014	280	S(Goce)	Brockmann et al, 2014	♦zip♦
OSU68	1968	14	S,G	Rapp, 1968	♦♦♦♦
WGS66	1966	24	G	WGS Committee, 1966	♦♦♦♦
SE1	1966	15	S	Lundquist and Veis, 1966	♦♦♦♦

DWD Download

DWD: KL-Wetter-Tabelle Potsdam Wolfgang Köhler wolfk@gfz-potsdam.de