JavaScript 1 2 Grundlagen Tipps Bausteine Links

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.

[Bildschirmfoto / Grafik]
 JavaScript im Einsatz

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.
Quelltext mit Format

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

Escape-Zeichen
Tastureingaben und Mausaktionen mit JavaScript Aktualisiert
Tastatur-Ereignisse (Objekte) beschreiben eine Benutzerinteraktion mit der Tastatur (Keyboard), jede Eingabe beschreibt dabei ein Ereignis.
Tastureingaben und Mausaktionen mit JavaScript
Cookie-Kurs: Erstellen Sie ein Cookie in 5 Schritten Tutorial
Cookies (Kekse) machen das Web persönlicher, Cookies erkennen Homepage-Besucher wieder und ermöglichen einen individuellen Service.
Cookie-Kurs: Erstellen Sie ein Cookie in 5 Schritten
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.
Liste der Event Handler
CSS in JavaScript
CSS-Klasse in JavaScript setzen und entfernen. Liste der JavaScript Schreibweisen
Mit JavaScript auf HTML-Elemente zugreifen Tutorial
Um mit JavaScript auf HTML-Elemente zugreifen zu können gibt es verschiedene Möglichkeiten.
Mit JavaScript auf HTML-Elemente zugreifen
CSS-Stile mit JavaScript auf ein Element anwenden Tutorial
CSS-Stile mit JavaScript auf ein Element anwenden

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!

Mausjagt mit Canvas Neu
Der Mauszeiger wird von einer Katze verfolgt. Ein Beispiel mit JavaScript: Canvas.
Mausjagt mit Canvas
ToDo-Liste mit JavaScript ✶✶✶✶
Die im Formular eingetragenen Daten per JavaScript: localStorage() im Browser des Benutzers hinterlegen, auslesen und löschen.
ToDo-Liste mit JavaScript
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.
HTML-Tabelle sortieren ✶✶✶
Diese Tabelle kann durch klicken auf die Spaltenüberschrift, absteigend und aufsteigend sortiert werden.
HTML-Tabelle sortieren
Formular über AJAX erstellen und Daten versenden
Formulardaten über AJAX überprüfen und speichern ✶✶✶
Ohne lästigen Seitenwechsel werden die eingegebenen Daten im Formular überprüft und gespeichert.
Sortierkasten Zum Herunterladen ✶✶✶✶
Objekte über Ziehen und Ablegen (drag & drop) sortieren und die Änderung in einer Datenbank (SQLite-Datei) speichern. Mit diesem Script können verschiedene Dinge und Sachen (Namen von Fußballspielern, Produkten, etc.) sortiert werden. Es sind bis zu 25 Ablageflächen möglich in denen etwas abgelegt werden kann.
Sortierkasten - Objekte über 'Ziehen und Ablegen' sortieren
Diashow aufgebohrt Tipp ✶✶✶
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.
Diashow aufgebohrt
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.
Datenschutz-Hinweis über Cookies dauerhaft ausblenden
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 Tutorial ✶✶✶✶
HTML 5 bietet uns die Möglichkeit, mittels des JavaScript: localStorage() einfache Daten im Browser zu speichern. Auch wenn man zwischendurch weg surft und dann wieder kommt sind die Daten noch auslesbar.
Benutzereingaben mit JavaScript lokal 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 Tipp ✶✶✶✶
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 Tipp ✶✶✶✶
Dieses Beispiel zeigt, wie man eine HTML-Auswahlliste (Drop-Down-Liste) dynamisch generiert, die auf den Werten einer Spalte in einer Datenbank-Tabelle beruht.
Verkettete Auswahllisten dynamisch aus einer DB-Tabelle generieren
Mit JSON Daten zwischen JavaScript und PHP austauschen ✶✶✶
JSON, ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen.
Mit JSON Daten zwischen JavaScript und PHP austauschen
CountDown
Dialog mit dem Computer

JavaScript-Bausteine (Alphabetische Sortierung)  Alle Anzeigen

1  A  B  C  D  E  F  G  H  I  J  L  M  N  O  P  R  S  T  Ü  U  V  W  Z 

    1

  1. 1 x Klick Button
  2. A

  3. Alle Checkboxen auf einmal auswählen
  4. Anzahl der HTML-Tags
  5. Anzahl der markierten Checkboxen anzeigen
  6. Anzahl der Wörter als Fortschrittsbalken anzeigen
  7. Audiodatei in JavaScript verstecken
  8. Audiodateien per Button-Klick abspielen
  9. Ausgabe des aktuellen Datums
  10. Ausgabe des aktuellen Datums mit Monats- und Tagesnamen
  11. Ausgabe zeitlich steuern
  12. Auslesen der Benutzer-Zeitzone
  13. Autom. Überprüfung der Eingabe
  14. Automatische Weiterleitung nach einigen Sekunden
  15. B

  16. BBCode in einem Textarea einfügen
  17. BBCode konvertieren oder entfernen
  18. Bei Bestätigung zur nächsten Seite
  19. Bei der Eingabe eines Datums die Punkte automatisch hinzufügen
  20. Beim Anklicken einer Checkbox den dazugehörenden Text hervorheben
  21. Berechne die Summe von zwei oder mehr Zahlen
  22. Bestimmte Textstellen markieren
  23. Bild mit dem Mausrad vergrößern
  24. Bilder Zoom-Funktion
  25. Bildschirm und Fenstergröße ermitteln
  26. Browser Infos
  27. C

  28. Checkbox auf "unbestimmt" setzen
  29. Checkboxen JavaScript-Funktion zuweisen
  30. Confirm()
  31. Cookies aktiv
  32. Cookies setzen und löschen
  33. Count-Up Anzeige für Personen, Dinge etc.
  34. Countdown
  35. CountDown (2)
  36. Countdown (3)
  37. Countdown (4)
  38. CountUp
  39. CSS über Javascript einbinden
  40. D

  41. Darstellungsmodus überprüfen
  42. Das gewählte Datum plus 30 Tage errechnen
  43. Dateiname ermitteln
  44. Datenbank-Inhalt an ein JavaScript (Array) übergeben
  45. Datum und Uhrzeit als Zeichenkette anzeigen
  46. Demo für die Anwendung der Fetch-API Neu
  47. Den Wert des ausgewählten Optionsfelds auslesen
  48. Dialog mit dem Computer
  49. Die aktuelle Fenstergröße ermitteln
  50. Die Höhe eines IFrames automatisch dem Inhalt anpassen
  51. Die Position eines Schiebereglers speichern und auslesen
  52. Die Reihenfolge der Werte eines Arrays verändern Neu
  53. Die Textauswahl in Zwischenablage kopieren
  54. Die Werte in Eingabefeldern per Button-Klick ändern
  55. Diese Webseite teilen
  56. E

  57. Ein Array von Zahlen mit dem Bubblesort-Algorithmus sortieren Neu
  58. Ein Array von Zahlen mit dem Bucketsort-Algorithmus sortieren Neu
  59. Ein farbig blinkender Text
  60. Eine Animation ab einer bestimmten Scroll-Position starten
  61. Eine Gruppe von Bildern markieren
  62. Einen zufälligen hexadezimalen Farbcode generieren Neu
  63. Einfügemarke im Textarea bewegen
  64. Eingabefeld bei Fehleingabe farbig markieren
  65. Eingabefeld selektieren
  66. Eingabefelder automatisch fokussieren
  67. Element ein- und ausblenden
  68. Entferne HTML Tags in JavaScript
  69. Erkennen ob die Feststelltaste bei der Passworteingabe eingeschaltet ist
  70. Erkennung für Chromium-basierte Browser
  71. Externe Datei per AJAX zeitabhängig aktualisieren
  72. F

  73. Falsche Zahleneingabe ändern
  74. Farbanzeiger
  75. Formulareingabe nur mit Großbuchstaben
  76. Formularfelder dynamisch hinzufügen
  77. Formularfelder farbig markieren
  78. Formularinhalt herunterladen
  79. Fortschrittsanzeige mit JavaScript verändern
  80. Frames per Link nachladen
  81. Funktion zur zufälligen Auswahl eines Bildes aus einer Bildliste
  82. G

  83. Geburtstag anzeigen
  84. Gedrückte Taste markieren
  85. Geladenes Stylesheet austauschen
  86. Geolocation API - Bei Knopfdruck Koordianten ausgeben
  87. Großbuchstaben Test
  88. H

  89. Hexadezimal nach RGB umwandeln
  90. HTML-Button über JavaScript eine Funktion zuweisen
  91. HTML-Tabelle als CSV-Datei exportieren
  92. HTML-Tabelle filtern
  93. HTML-Tabelle sortieren
  94. HTML-Tabelle Spaltenbreite anpassen
  95. HTML-Tags in benannte Zeichen umwandeln
  96. HTML-Title Attribut tauschen
  97. HTML 5 - Pflichtfeld setzen mit JavaScript
  98. htmlEntities für JavaScript
  99. https und den Querystring aus der URL entfernen
  100. I

  101. Iframe-Inhalt zeitlich steuern
  102. Iframe alle 10 Sekunden neu laden
  103. In den Vollbild-Modus umschalten
  104. Individuelle Fehlermeldung ausgeben
  105. Interne Anker hervorheben
  106. J

  107. JavaScript-Version des Browsers anzeigen
  108. JavaScript über dem Form-Tag aufrufen
  109. L

  110. Langsam zum Seitenanfang scrollen
  111. Leerstellen löschen
  112. Leerzeichen am Anfang und Ende einer Zeichenkette entfernen
  113. Letzte Änderung an einem Dokument ausgeben
  114. Lichtregler
  115. Link mit Ajax aufrufen Neu
  116. Löschen mit Sicherheitsabfrage
  117. M

  118. Markierten Text in ein Eingabefeld einfügen
  119. Mehrere Tastatureingaben mit Zahlen
  120. Meldung mit Format
  121. N

  122. Nachfragen bevor die Seite verlassen wird
  123. Neues Fenster öffnen
  124. O

  125. Objekt eine JavaScript-Funktion zuweisen
  126. outerHTML - Quelltext anzeigen
  127. P

  128. Passwort im Klartext anzeigen
  129. Pop-up automatisch ausblenden
  130. Pop-up Fenster bewegen Neu
  131. Position der Einfügemarke in einem Textfeld ermitteln
  132. Prüfen, ob die Funktion vor dem Aufruf vorhanden ist
  133. Prüfen, ob die Zahl gerade oder ungerade ist
  134. R

  135. Radiobutton mit Auswahl-Hinweis
  136. S

  137. Schieberegler für Bilder
  138. Schlüssel und Wert aus einem Objekt auslesen
  139. Seite autom. jede Minute neu laden
  140. Seite laden oder erneut laden
  141. Sekundenzähler
  142. Sicherheitsabfrage bevor die Formulardaten zurücksetzt werden
  143. Suchen und Ersetzen
  144. T

  145. Text bei onMouseOver und onMouseOut ersetzen
  146. Text in Großbuchstaben oder Kleinbuchstaben umwandeln
  147. Text mit einem Link markieren
  148. Text über ID auslesen und ändern
  149. Textteil auswählen
  150. Trim-Funktion in JavaScript
  151. Trinitätsoperator
  152. Ü

  153. Überprüfen ob ein Button gedrückt wurde
  154. Überprüfen ob ein String in Großbuchstaben geschrieben ist Neu
  155. Überprüfen ob eine Zeichenfolge ein gültiges JSON ist Neu
  156. Überprüfen ob eine Zeichenfolge nur alphanumerische Zeichen enthält Neu
  157. U

  158. URL Query und Fragment über JavaScript auslesen
  159. V

  160. Verzögerte Umleitung mit JavaScript
  161. W

  162. Wörter in einer Zeichenkette zählen
  163. Z

  164. Zahl in einem Eingabefeld mit dem Mausrad verändern
  165. Zahl runden
  166. Zahlen aus zwei Eingabefeldern zusammenzählen
  167. Zahlen autom. addieren
  168. Zahlenwert in einer Tabelle verändern
  169. Zahlenwerte überprüfen und korrigieren
  170. Zeichenkontrolle
  171. Zeichnung erstellen
  172. Zeilen, Wörter und Zeichen in einem Textarea zählen
  173. Zeit-Differenz ermitteln
  174. Zeitabhängige Aktualisierung
  175. Zufallsfarbe ausgeben
  176. Zufallslink im neuen Tab/Fenster anzeigen und aktuelle Seite verlassen
  177. Zwei Ziffern
  178. Zweite Auswahlliste aktivieren
  179. Zweite Checkbox mit JavaScript auswählen
Zeichnung erstellen
developer.mozilla.org ✶✶✶✶✶
JavaScript (JS) ist eine leichtgewichtige, interpretierte oder JIT-übersetzte Sprache mit First-Class-Funktion. Bekannt ist sie hauptsächlich als Skriptsprache für Webseiten geworden, jedoch wird sie auch in vielen Umgebungen außerhalb des Browsers wie zum Beispiel Node.js, Apache CouchDB und Adobe Acrobat eingesetzt.
javascripttutorial.net ✶✶✶✶✶
JavaScript Tutorial (englisch)
jquery.com ✶✶✶✶
jQuery ist ein freies, umfangreiches JavaScript-Framework (englisch).
molily.de ✶✶✶✶
Dokumentation der Programmiersprache JavaScript. Sie richtet sich an Einsteiger, soll dem Leser aber nach und nach alle wichtigen Aspekte des JavaScript-Einsatzes bei der Webseiten-Entwicklung nahe bringen.
w3schools.com ✶✶✶✶
JavaScript Tutorial (englisch)
j-berkemeier.de ✶✶✶✶✶
Kleines JavaScript, mit dem HTML-Tabellen im Browser sortiert werden können, ohne dass die Datei jedes mal neu geladen werden muss. Einfache alternative: https://werner-zenk.de/javascript/html-tabelle_sortieren.php
javascript.info ✶✶✶✶✶
JavaScript Tutorial (englisch).
the-art-of-web.com ✶✶✶✶✶
JavaScript | The Art of Web (englisch)
kostenlose-javascripts.de
Viele JavaScripte nach Kategorien sortiert.
jswelt.de
Ein gutes JavaScript-Archiv.
ajaxschmiede.de
Ajaxschmiede.de - Der Blog über Ajax und Web2.0

Alle Links mit Bewertungen anzeigen
In die Linkliste eintragen

JavaScript - Seite 1 2