JavaScript 2 3 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.
✔ 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.
- Steuerzeichen - Formatierung von auszugebenden Texten in JavaScript und PHP.
- Bevor längere Texte an ihre Ziele geschickt werden, können diese mit Steuerzeichen für Formatierung, Umbruch, Tabulator etc. versehen werden. Welche Möglichkeiten es gibt, zeigt die folgende Liste.
- Tastureingaben und Mausaktionen mit JavaScript Aktualisiert
- Tastatur-Ereignisse (Objekte) beschreiben eine Benutzerinteraktion mit der Tastatur (Keyboard), jede Eingabe beschreibt dabei ein Ereignis.
- 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.
- 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.
- Mit JavaScript auf HTML-Elemente zugreifen Tutorial
- Um mit JavaScript auf HTML-Elemente zugreifen zu können gibt es verschiedene Möglichkeiten.
- CSS-Stile mit JavaScript auf ein Element anwenden Tutorial
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!
- Formular je nach Browsersprache laden Neu
- Dieses Skript ermittelt die Browsersprache des Benutzers und zeigt dann das passende Formular (per Ajax) dazu an. Alternativ kann man auf ein Flaggen-Symbol klicken, um die Sprache per Hand zu ändern.
- Daten über AJAX und JSON aus einer SQLite-Datenbank auslesen
- Hier möchte ich demonstrieren, wie einfach es ist, Daten über AJAX (JavaScript FETCH-API) und JSON aus einer SQLite Datenbank-Datei auslesen und diese in einer HTML-Tabelle auszugeben.
- Mausjagt mit Canvas ✶✶✶✶
- Der Mauszeiger wird von einer Katze verfolgt. Ein Beispiel mit JavaScript: Canvas.
- ToDo-Liste mit JavaScript ✶✶✶✶
- Die im Formular eingetragenen Daten per JavaScript:
localStorage()
im Browser des Benutzers hinterlegen, auslesen und löschen.
- HTML-Tabelle sortieren ✶✶✶✶
- Diese Tabelle kann durch klicken auf die Spaltenüberschrift, absteigend und aufsteigend sortiert werden.
- 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.
JavaScript-Bausteine Alle Anzeigen
- Alle Checkboxen auf einmal auswählen
- Anzahl der HTML-Tags
- Anzahl der markierten Checkboxen anzeigen
- Anzahl der Wörter als Fortschrittsbalken anzeigen
- Audiodatei in JavaScript verstecken
- Audiodateien per Button-Klick abspielen
- Ausgabe des aktuellen Datums
- Ausgabe des aktuellen Datums mit Monats- und Tagesnamen
- Ausgabe zeitlich steuern
- Auslesen der Benutzer-Zeitzone
- Autom. Überprüfung der Eingabe
- Automatische Weiterleitung nach einigen Sekunden
- BBCode in einem Textarea einfügen
- BBCode konvertieren oder entfernen
- Bei Bestätigung zur nächsten Seite
- Bei der Eingabe eines Datums die Punkte automatisch hinzufügen
- Beim Anklicken einer Checkbox den dazugehörenden Text hervorheben
- Berechne die Summe von zwei oder mehr Zahlen
- Bestimmte Textstellen markieren
- Bild mit dem Mausrad vergrößern
- Bilder bei Klick in Originalgröße öffnen Neu
- Bilder Zoom-Funktion
- Bildschirm und Fenstergröße ermitteln
- Browser Infos
- Checkbox auf "unbestimmt" setzen
- Checkboxen JavaScript-Funktion zuweisen
- Confirm()
- Cookies aktiv
- Cookies setzen und löschen
- Count-Up Anzeige für Personen, Dinge etc.
- Countdown
- CountDown (2)
- Countdown (3)
- Countdown (4)
- CountUp
- CSS über Javascript einbinden
- Darstellungsmodus überprüfen
- Das gewählte Datum plus 30 Tage errechnen
- Dateiname ermitteln
- Datenbank-Inhalt an ein JavaScript (Array) übergeben
- Datum und Uhrzeit als Zeichenkette anzeigen
- Demo für die Anwendung der Fetch-API
- Den Wert des ausgewählten Optionsfelds auslesen
- Dialog mit dem Computer
- Die aktuelle Fenstergröße ermitteln
- Die aktuelle Seite in der Navigation hervorheben Neu
- Die Höhe eines IFrames automatisch dem Inhalt anpassen
- Die Position eines Schiebereglers speichern und auslesen
- Die Reihenfolge der Werte eines Arrays verändern
- Die Textauswahl in Zwischenablage kopieren
- Die Wahl einer Auswahlliste speichern und auslesen Neu
- Die Werte in Eingabefeldern per Button-Klick ändern
- Diese Webseite teilen
- Ein Array von Zahlen mit dem Bubblesort-Algorithmus sortieren
- Ein Array von Zahlen mit dem Bucketsort-Algorithmus sortieren
- Ein farbig blinkender Text
- Eine Animation ab einer bestimmten Scroll-Position starten
- Eine CSS-Klasse hinzufügen, wenn ein Bildlauf durchgeführt wird Neu
- Eine Gruppe von Bildern markieren
- Einen zufälligen hexadezimalen Farbcode generieren
- Einfügemarke im Textarea bewegen
- Eingabefeld bei Fehleingabe farbig markieren
- Eingabefeld selektieren
- Eingabefelder automatisch fokussieren
- Element ein- und ausblenden
- Entferne HTML Tags in JavaScript
- Erkennen ob die Feststelltaste bei der Passworteingabe eingeschaltet ist
- Erkennung für Chromium-basierte Browser
- Externe Datei per AJAX zeitabhängig aktualisieren
- Falsche Zahleneingabe ändern
- Farbanzeiger
- Filter für HTML-Listenelemente Neu
- Formulareingabe nur mit Großbuchstaben
- Formularfelder dynamisch hinzufügen
- Formularfelder dynamisch hinzufügen (2) Neu
- Formularfelder farbig markieren
- Formularinhalt herunterladen
- Fortschrittsanzeige mit JavaScript verändern
- Frames per Link nachladen
- Funktion zur zufälligen Auswahl eines Bildes aus einer Bildliste
- Geburtstag anzeigen
- Gedrückte Taste markieren
- Geladenes Stylesheet austauschen
- Geolocation API - Bei Knopfdruck Koordianten ausgeben
- Großbuchstaben Test
- Hexadezimal nach RGB umwandeln
- HTML-Button über JavaScript eine Funktion zuweisen
- HTML-Details automatisch schließen Neu
- HTML-Tabelle als CSV-Datei exportieren
- HTML-Tabelle filtern
- HTML-Tabelle sortieren
- HTML-Tabelle Spaltenbreite anpassen
- HTML-Tags in benannte Zeichen umwandeln
- HTML-Title Attribut tauschen
- HTML 5 - Pflichtfeld setzen mit JavaScript
- htmlEntities für JavaScript
- https und den Querystring aus der URL entfernen
- Iframe-Inhalt zeitlich steuern
- Iframe alle 10 Sekunden neu laden
- In den Vollbild-Modus umschalten
- Individuelle Fehlermeldung ausgeben
- Interne Anker hervorheben
- Langsam zum Seitenanfang scrollen
- Leerstellen löschen
- Leerzeichen am Anfang und Ende einer Zeichenkette entfernen
- Letzte Änderung an einem Dokument ausgeben
- Lichtregler
- Link mit Ajax aufrufen Neu
- Löschen mit Sicherheitsabfrage
- Objekt eine JavaScript-Funktion zuweisen
- Optionen in der Auswahlliste je nach Alter der Person anzeigen Neu
- outerHTML - Quelltext anzeigen
- Passwort im Klartext anzeigen
- Pop-up automatisch ausblenden
- Pop-up Fenster bewegen
- Position der Einfügemarke in einem Textfeld ermitteln
- Prüfen, ob die Funktion vor dem Aufruf vorhanden ist
- Prüfen, ob die Zahl gerade oder ungerade ist
- Schieberegler für Bilder
- Schlüssel und Wert aus einem Objekt auslesen
- Seite autom. jede Minute neu laden
- Seite laden oder erneut laden
- Sekundenzähler
- Sicherheitsabfrage bevor die Formulardaten zurücksetzt werden
- Suchen und Ersetzen
- Text bei onMouseOver und onMouseOut ersetzen
- Text in Großbuchstaben oder Kleinbuchstaben umwandeln
- Text mit einem Link markieren
- Text über ID auslesen und ändern
- Textteil auswählen
- Trim-Funktion in JavaScript
- Trinitätsoperator
- Überprüfen ob ein Button gedrückt wurde
- Überprüfen ob ein String in Großbuchstaben geschrieben ist
- Überprüfen ob eine Zeichenfolge ein gültiges JSON ist
- Überprüfen ob eine Zeichenfolge nur alphanumerische Zeichen enthält
- Zahl in einem Eingabefeld mit dem Mausrad verändern
- Zahl runden
- Zahlen aus zwei Eingabefeldern zusammenzählen
- Zahlen autom. addieren
- Zahlen ins deutsche Format umwandeln Neu
- Zahlenwert in einer Tabelle verändern
- Zahlenwerte überprüfen und korrigieren
- Zeichenkontrolle
- Zeichnung erstellen
- Zeilen, Wörter und Zeichen in einem Textarea zählen
- Zeit-Differenz ermitteln
- Zeitabhängige Aktualisierung
- Zufallsfarbe ausgeben
- Zufallslink im neuen Tab/Fenster anzeigen und aktuelle Seite verlassen
- Zwei Ziffern
- Zweite Auswahlliste aktivieren
- Zweite Checkbox mit JavaScript auswählen
- Die Position eines Schiebereglers speichern und auslesen
Links zum Thema JavaScript Alle anzeigen
- 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