Werner-Zenk.de - Zur Startseite

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

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!

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.
Artikel über Checkboxen auswählen
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.
Browser-Sprachumschaltung
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.
Bilder in den Browser laden per File API
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.
Suchanfrage an eine Datenbank über AJAX senden und empfangen ✶✶✶
Ohne das die Seite neu geladen werden muss, kann man über JavaScript eine Suchanfrage an eine PHP-Datei senden (die dann eine DB-Tabelle ausliest) und die Ergebnisse auf der gleichen Seite ausgibt.
Suchanfrage an eine Datenbank über AJAX senden und empfangen
Audio-Player ✶✶✶
Mit diesem Audio-Player kann man Audio-Dateien über JavaScript steuern.
Audio-Player
Diashow (manuell / automatisch) ✶✶✶✶
Die Diashow liest Bilder aus einem Verzeichnis aus (mit PHP), und zeigt diese mit Hilfe von JavaScript an.
Diashow
Seite manipulieren mit 'contentEditable'
Mit dem Attribut 'contentEditable' lassen sich einzelne Bereiche oder die gesamte Seite manipulieren.
JavaScript-Counter
Hier finden Sie einen Counter der die Stunden, Minuten und Sekunden von einer vorher festgelegten Zeit abzählt.
Mouseover in Tabellen
Dieses JavaScript ändert die Hintergrundfarbe wenn der Mauszeiger über einen Tabellenbereich fährt. Besonders bei großen Tabellen ist diese Funktion nützlich.
Schriftgröße mit JavaScript ändern
Schriftgröße einer Seite mit JavaScript ändern.
Zeitansage in JavaScript ✶✶✶✶
Dieses JavaScript gibt die aktuelle Uhrzeit in Worten aus.
Zeitansage in JavaScript
Zeitbalken ✶✶✶✶
Dieses Script zeigt die vergangene Zeit mit einem farbigen Fortschrittsbalken an. Mit JavaScript oder PHP kann man die vergangene Zeit berechnen lassen und mit CSS wird dann der Fortschrittsbalken farbig angezeigt.
Zeitbalken

Bausteine (Alphabetische Sortierung)

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