JavaScript ❶ ❷ Grundlagen Tipps Bausteine

Zusammen mit der Programmiersprache Java erblickte JavaScript (LiveScript) Ende 1995 das Licht der Welt. Mittlerweile ist aus der einfachen Scriptsprache JavaScript eine komplette Programmiersprache geworden, die durch ihre Einfachheit besticht.

✔ Heutzutage beinhalten nahezu alle Webseiten JavaScript, eine Skriptsprache welche in Ihrem Browser läuft. Sie hilft dabei Webseiten für bestimmte Zwecke funktional zu gestalten. Mit JavaScript können Sie z.B. auf HTML-Elemente zugreifen und diese dann dynamisch anpassen.

✔ Inzwischen ist durch die Kombination mit anderen Programmiersprachen z.B. PHP, diese Scriptsprache in weiter entwickelter Form als AJAX (Asynchronous JavaScript and XML) oder mit dem JavaScript-Framework jQuery bekannt und zu größerer Bedeutung gelangt.

➥ Um nun die JavaScript-Anweisungen richtig einsetzen zu können finden sich dazu zahlreiche Dokumentationen im Web. Das bekannte deutsche selfHTML , das englischsprachige w3schools.com und das Mozilla Developer Network.

• In der Linkliste finden Sie weitere Links zum Thema JavaScript.

Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.

Grundlagen

Quelltext mit Format

Es gibt gute Gründe einen Quelltext zu formatieren und zu kommentieren.

Escape-Zeichen - (Escape-Codes) Formatierung von auszugebenden Texten in JavaScript und PHP.

Tastureingaben (Key Codes) für JavaScript

Liste der Event Handler

Event-Handler, was so viel heißt wie "Ereignis-Behandler" ist kleiner JavaScript- Code, den Sie innerhalb von HTML-Tags als Attribut platzieren. Treten bestimmte Ereignisse ein wie ein Mausklick oder Tastendruck, leitet ein Event-Handler bestimmte Aktionen ein.

Tipps

Hier finden Sie nützliche und interessante JavaScript Beispiele. Diese müssen eventuell den eigenen Wünschen angepasst werden, dazu sind allerdings Kenntnisse in JavaScript notwendig!

Seiteninhalt mit JavaScript verstecken und wieder anzeigen

Manchmal wird eine Funktion benötigt um Texte, Bilder, etc. erst anzuzeigen wenn der Benutzer auf einen Link klickt.

Diashow aufgebohrt ✶✶✶✶

Oft sind Diashows mit JavaScript sehr komplex aufgebaut, der Anwender muss im JavaScript-Code die Bilder für die Diashow eintragen oder die Geschwindigkeit etc. anpassen.

Mit dieser autom. Diashow werden Bilder und Beschreibungen aus einer HTML-Aufzählungsliste über JavaScript ausgelesen und angezeigt. Der Vorteil wenn man weitere Bilder hinzufügt ist, das nur die Aufzählungsliste erweitert werden muss.

Mit JavaScript und Canvas zeichnen ✶✶✶✶

Mit JavaScript und Canvas können Sie alle Arten von Grafiken zeichnen von einfachen Linien bis zu komplexen grafischen Objekten, durch JavaScript sind sogar Animationen möglich. Diese kleine Anleitung vermittelt die Grundlagen die für die Erstellung von Grafiken mit JavaScript benötigt werden.

Datenschutz-Hinweis über Cookies dauerhaft ausblenden ✶✶✶✶

Hier zeige ich, wie der Datenschutz-Hinweis über Cookies (LocalStorage) dauerhaft ausgeblendet werden kann.

Artikel über Checkboxen auswählen ✶✶✶✶

Hier können Artikel (Bilder) ausgewählt werden die bestimmte Kriterien der Checkboxen erfüllen. Die Daten werden in einer CSV-Datei gespeichert und können individuell angepasst werden.

Benutzereingaben mit JavaScript lokal speichern ✶✶✶✶

HTML 5 bietet uns die Möglichkeit, mittels localStorage oder sessionStorage einfache Daten im Browser zu speichern.

Browser-Sprachumschaltung ✶✶✶✶

Diese Sprachumschaltung zeigt je nach der verwendeten Sprache (deutsch, englisch, ...) im Browser unterschiedlichen Inhalt an.

Bilder in den Browser laden per File API ✶✶✶✶

Wenn Bilder hoch geladen werden sollen, ist es für dem Benutzer wissenswert welche Bilder er überhaupt ausgewählt hat. Diese JavaScript-Funktion zeigt Bilder vor dem hochladen im Browser an.

Verkettete Auswahllisten dynamisch aus einer DB-Tabelle generieren ✶✶✶✶

Dieses Beispiel zeigt, wie man eine HTML-Auswahlliste (Drop-Down-Liste) dynamisch generiert, die auf den Werten einer Spalte in einer Datenbank-Tabelle beruht.

Mit JSON Daten zwischen JavaScript und PHP austauschen ✶✶✶✶

JSON, ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen.

Formulardaten über AJAX überprüfen und speichern ✶✶✶✶

Ohne lästigen Seitenwechsel werden die eingegebenen Daten im Formular überprüft und gespeichert.

JavaScript-Bausteine (Alphabetische Sortierung)

1
1. 1 x Klick Button
A
2. Alle Checkboxen auf einmal auswählen
3. Anzahl der HTML-Tags
4. Ausgabe des aktuellen Datums
5. Ausgabe des aktuellen Datums mit Monats- und Tagesnamen
6. Ausgabe zeitlich steuern
7. Autom. Überprüfung der Eingabe
8. Automatische Weiterleitung nach einigen Sekunden
B
9. BB-Code in einem Textarea einfügen
10. Bei der Eingabe eines Datums die Punkte automatisch hinzufügen
11. Beim Anklicken einer Checkbox den dazugehörenden Text hervorheben
12. Bilder Zoom-Funktion
13. Bildschirm und Fenstergröße ermitteln
14. Browser Infos
C
15. Checkbox auf "unbestimmt" setzen
16. Checkboxen JavaScript-Funktion zuweisen
17. Confirm()
18. Cookies aktiv
19. Count-Up Anzeige für Personen, Dinge etc.
20. Countdown
21. CountDown (2)
22. Countdown (3)
23. CountUp
24. CSS über Javascript einbinden
D
25. Darstellungsmodus überprüfen
26. Dateiname ermitteln
27. Datenbank-Inhalt an ein JavaScript (Array) übergeben
28. Datum und Uhrzeit als Zeichenkette anzeigen
29. Die aktuelle Fenstergröße ermitteln
30. Die Höhe eines IFrames automatisch dem Inhalt anpassen
31. Die Textauswahl in Zwischenablage kopieren
E
32. Ein farbig blinkender Text
33. Eine Animation ab einer bestimmten Scroll-Position starten
34. Eine Gruppe von Bildern markieren
35. Einfügemarke im Textarea bewegen
36. Eingabefeld bei Fehleingabe farbig markieren
37. Eingabefeld selektieren
38. Eingabefelder automatisch fokussieren
39. Element ein- und ausblenden
F
40. Falsche Zahleneingabe ändern
41. Farbanzeiger
42. Formulareingabe nur mit Großbuchstaben
43. Formularfelder dynamisch hinzufügen
44. Formularfelder farbig markieren
45. Fortschrittsanzeige mit JavaScript verändern
46. Frames per Link nachladen
47. Funktion zur zufälligen Auswahl eines Bildes aus einer Bildliste
G
48. Geburtstag anzeigen
49. Gedrückte Taste markieren
50. Geladenes Stylesheet austauschen
51. Geolocation API - Bei Knopfdruck Koordianten ausgeben
52. Großbuchstaben Test
H
53. HTML-Button über JavaScript eine Funktion zuweisen
54. HTML-Tags in benannte Zeichen umwandeln
55. HTML-Title Attribut tauschen
56. HTML 5 - Pflichtfeld setzen mit JavaScript
57. htmlEntities für JavaScript
I
58. Iframe-Inhalt zeitlich steuern
59. Iframe alle 10 Sekunden neu laden
60. Individuelle Fehlermeldung ausgeben
J
61. JavaScript-Version des Browsers anzeigen
62. JavaScript über dem Form-Tag aufrufen
L
63. Langsam zum Seitenanfang scrollen
64. Leerstellen löschen
65. Leerzeichen am Anfang und Ende einer Zeichenkette entfernen
66. Letzte Änderung an einem Dokument ausgeben
67. Löschen mit Sicherheitsabfrage
M
68. Markierten Text in ein Eingabefeld einfügen
69. Meldung mit Format
N
70. Nachfragen bevor die Seite verlassen wird
71. Neues Fenster öffnen
O
72. Objekt eine JavaScript-Funktion zuweisen
73. outerHTML - Quelltext anzeigen
P
74. Passwort im Klartext anzeigen
75. Position der Einfügemarke in einem Textfeld ermitteln
76. Prüfen, ob die Funktion vor dem Aufruf vorhanden ist
77. Prüfen, ob die Zahl gerade oder ungerade ist
R
78. Radiobutton mit Auswahl-Hinweis
S
79. Schieberegler für Bilder
80. Seite autom. jede Minute neu laden
81. Sekundenzähler
82. Suchen und Ersetzen
T
83. Text bei onMouseOver und onMouseOut ersetzen
84. Text mit einem Link markieren
85. Text über ID auslesen und ändern
86. Textteil auswählen
87. Trim-Funktion in JavaScript
88. Trinitätsoperator
Ü
89. Überprüfen ob ein Button gedrückt wurde
U
90. URL Query und Fragment über JavaScript auslesen
V
91. Verzögerte Umleitung mit JavaScript
W
92. Wörter in einer Zeichenkette zählen
Z
93. Zahl runden
94. Zahlen aus zwei Eingabefeldern zusammenzählen
95. Zahlen autom. addieren
96. Zahlenwerte überprüfen und korrigieren
97. Zeichenkontrolle
98. Zeilen, Wörter und Zeichen in einem Textarea zählen
99. Zeitabhängige Aktualisierung
100. Zufallsfarbe ausgeben
101. Zufallslink im neuen Tab/Fenster anzeigen und aktuelle Seite verlassen
102. Zweite Auswahlliste aktivieren
103. Zweite Checkbox mit JavaScript auswählen