https://wiki.johannes-gehrke.de/ 2026-04-24T01:06:29+00:00 https://wiki.johannes-gehrke.de/ https://wiki.johannes-gehrke.de/lib/exe/fetch.php?media=wiki:dokuwiki.svg text/html 2022-12-17T12:28:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:ajax_post_zu_php_script&rev=1671280093&do=diff AJAX / XHR JSON Daten per POST an PHP Skript schicken Wenn man Daten auf dem Server an eine PHP Datei schicken möchte, bietet es sich an einen Javascript AJAX Call zu machen. Dann werden die Daten asynchron an den Server geschickt und man handled im Frontend die Antwort. Bei großen JSON Datenmengen sollte man POST als Methode wählen, da bei GET Requests die Zeichenzahl / Datenmenge begrenzt ist. text/html 2022-12-17T12:28:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:alpinejs_ajax_beispiel&rev=1671280093&do=diff Alpine.js Das Framework alpine.js ist sehr nützlich um interaktive Frontend-Seiten schnell und sauber hin zu bekommen. Wenn man jedoch einen AJAX Call durchführen möchte und und aus irgendwelchen Gründen kein .fetch() nutzen kann, muss man auf das bekannte text/html 2022-12-17T12:28:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:cookie_auslesen&rev=1671280093&do=diff Javascript Cookie auslesen mit nur einer Zeile Der Code ist nicht IE11 kompatibel, kann aber entsprechend umgeschrieben werden. IE11 unterstützt keine Arrow Funktionen, aber das Prinzip finde ich gut. const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift(); cookie('_ga'); // Result: "GA1.2.1929736587.1601974046" text/html 2022-12-17T12:28:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:default_optional_paramater_funktionen&rev=1671280093&do=diff Default/Optionale Paramter in Funktionen Dieser Code ist nur mit neuen Browsern kompatibel (nicht IE11) function eine_funktion( optionaler_parameter = 'Fallback Wert' ){ return typeof optionaler_parameter; } Dieser Code ist kompatibel mit IE11: text/html 2024-07-31T10:59:12+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:e-mail-adresse_spam_schutz&rev=1722423552&do=diff Spam-Schutz für E-Mail Adressen mit Javascript Dieser Javascript Code wird ausgeführt nach dem die Seite geladen wurde. Wartet 1,5 Sekunden und wandelt dann jeden HTML-Link in einen E-Mail-Adressen Link um. So fern dieser Link das Attribute data-mail-b64 text/html 2022-12-17T12:28:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:events_throtteling&rev=1671280093&do=diff Javascript Events limitieren / drosseln Manche Events, wie z.B. resize oder scroll feuern zu häufig für die meisten normalen Anwendungen – vor allem wenn gleichzeitig eine HTML Manipulation am DOM passieren soll. Solche Events kosten dann viel Performance. Es ist meist nötig diese mit einem Timeout zu drosseln, damit das Javascript Event verzögert mit einem Delay ausgeführt wird – und nicht mehr so häufig. text/html 2022-12-17T12:28:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:farbiges_console_log&rev=1671280093&do=diff Console.log() Meldung in Farbig formatieren Mit diesem Code Schnipsel kann man eine formatiere Console.log() Ausgabe erzeugen (function (){ console.log(""); console.log("%c brandgrad° ", "background: rgb(51,51,51); color: rgb(255,255,255); font-size: 18px; padding : 10px 20px 10px 20px; margin : 10px"); console.log(""); })(); text/html 2024-10-03T10:20:27+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:get_parameter_aus_der_url_auslesen&rev=1727950827&do=diff Javascript GET Parameter aus einer URL auslesen Der Code ist nicht IE11 kompatibel, kann aber entsprechend umgeschrieben werden. IE11 unterstützt keine Arrow Funktionen, aber das Prinzip finde ich gut. const get_url_parameters = function() { const URL = window.location.href; const has_params = ( URL.split("?").length > 1 ) ? true : false; if( !has_params ) return {} // -- exit, wenn es keine Parameter gibt const URL_params = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/… text/html 2024-04-10T16:19:46+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:go_back_button_navigation&rev=1712765986&do=diff Javascript-Code ausführen bei Browser Go Back Button und History State auslesen In einer One-Page Website mit Javascript ist es wichtig, dass der User mit dem Browser Back-Button nicht zurück auf die vorherige Seite kommt, sondern eine eigene Funktion der Applikation ausgeführt wird. text/html 2022-12-17T12:28:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:is_in_visble_in_viewport&rev=1671280093&do=diff Element visible in Viewport - Ist Elementes sichtbar im aktuellen Window Diese Funktion kommt aus einem GitHub Thread. Sie testet ob ein Elemente mind. zum Teil sichtbar im aktuellen Browser-Fenster ist. Andere Funktionen die man im Internet findet bilden nur ab, dass das gesamte Element sichtbar im Browser Fenster nach scrollen ist. Dieser Code funktioniert aber auch, wenn nur ein Teil des Elementes bereits im Viewport sichtbar ist. text/html 2024-05-07T08:50:52+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:js_function_exists&rev=1715071852&do=diff Javascript prüfen ob Function Exists Mit diesem Snippet kann man sicher stellen ob eine Funktion existiert oder nicht. Nützlich um ggf. zu vermeiden, dass man Module doppelt registriert. Achtung dieser Code sagt nur ob es eine Funktion/ein Objekt gibt, welches ans Window Object gehangen ist. Also globale Funktionen. Objekte/Funktionen die mit Const oder Let erzeugt wurden, werden nicht erkannt. Ebenso wenig werden Funktionen innerhalb von Objekten erkannt, als z.b. text/html 2022-12-17T12:28:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:jsonp_cross_domain_ajax_call&rev=1671280093&do=diff JSONP Cross Domain AJAX Aufruf Das ist nicht wirklich Ajax im eigentlichen Sinne. Aber wenn die Daten auf einer anderen Domain liegen, die eigentlich per CORS kein Cross-Domain Aufruf unterstützen, kann JSONP helfen. Dabei wir eine externe Ressource so eingebunden, das sie nach dem laden selbst eine Funktion aufruft. Der Funktionsname kommt daher per ?GET Parameter. text/html 2023-08-25T11:19:06+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:multible_ajax_xhr_aufrufe&rev=1692962346&do=diff Multible AJAX/XHR Aufrufe tätigen Manchmal ist es wichtig oder benötigt mehrere AJAX Requests durchzu führen und man will die “Callback-Hell” (Verkettung von unübersichtlich vielen Callbacks) verhinden. Dazu habe ich auf Stackoverflow folgenden Scripts gefunden, die ich noch aufarbeiten muss: text/html 2022-12-17T12:28:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:requirejs&rev=1671280093&do=diff Nützliche Require.js Scripte Hier das Basic Script wie man require.js klever integriert. Reihenfolge der Dateien Wie require.js Files lädt: * die require.js * danach die angegeben config.js * dann die main.js oder app.js aus der config.js text/html 2022-12-17T12:28:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:script_nach_html_load_laden&rev=1671280093&do=diff Javascript nach Page-Load laden Um Javascript Files nach dem die Seite geladen ist erst auch zu laden, kann dieses Script benutzt werden. window.addEventListener( 'load', function(){ const script = document.createElement( 'script' ); script.onload = function () { // Was soll nach dem Laden ausgeführt werden? // do_stack() }; script.src = 'https://www.brandgrad.com//assets/js/main.js'; document.head.appendChild(script); //or something of the likes } ) text/html 2022-12-17T12:28:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:script_wenn_seite_geladen_ausfuehren&rev=1671280093&do=diff On Page Ready/Loaded - Javascript ausführen, wenn die Seite geladen/bereit ist Mit diesem Script kann man eine Funktion aufrufen, die prüft ob das Dom geladen wurde und das Script aufgerufen werden kann. Es ist eine alternative zu jQuerys.ready() Methode. Diese Methode kann man auch nutzen, falls die Seite bereits geladen wurde. text/html 2022-12-17T12:28:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:url_mit_paramatern_aendern_und_laden&rev=1671280093&do=diff Javascript: Browser URL mit GET Parametern ändern Dieser Code liest die Browser URL aus, trennt sie in Ihre Komponenten Server Host, Pfad/Path und GET Parametern. Einer der GET-Parameter wird neu gesetzt und die aktualisierte URL wird aufgerufen. const url_host = window.location.origin; // https://www.domain.com/ const url_path = window.location.pathname; // folder/subpage.php/ const url_search_string = window.location.search; // ?parameter=tru… text/html 2022-12-17T12:28:13+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.johannes-gehrke.de/doku.php?id=programmieren:javascript:vanilla_js_statt_jquery&rev=1671280093&do=diff Vanilla JS alternativen zu jQuery Auf der Seite "move from jquery to vanilla javascript" sind ein paar tolle Beispiele, wie man auf jQuery verzichten kann. Die wichtigsten die ich immer wieder brauche (und nachschlage), habe ich hier her kopiert. Custom Event triggern document.dispatchEvent(new Event("myEvent")); document.querySelector(".box").dispatchEvent(new Event("myEvent"));