Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

JavaScript Grundkurs

Zugriff auf die Adresszeile

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit Hilfe der Adresszeile des Browsers (window. location) können Sie nicht nur zu einer Ressource weiterleiten, sondern auch Daten an andere Webseiten übergeben. Hier erfahren Sie, wie das geht.
07:04

Transkript

Das Objekt Location ist ein Unterobjekt von Window, was die Adresszahl des Browsers repräsentiert. Über location. href können Sie eine Weiterleitung zu neuen Resources auslösen per JavaScript. Aber dieses Objekt hat noch einige weitere Informationen für Sie, die nicht uninteressant sind. Es gibt beispielsweise mit den Eigenschaften Protocol, host, port, pathname, hash, search und hostname genauere Informationen, die sich an der Struktur eines URL orientieren. Ein allgemeiner URL beginnt immer mit einem Protocoll: , je nachdem ob man das Protocoll zählt oder explizit ausführt. Dann folgt meistens ein double slash. Das muss nicht sein. Bei einigen URL Strukturen da bleibt es, dann kann man je nach Situation einen User, ein Doppelpunkt, ein Passwort setzen, optional in vielen Fällen, wenn man es setzt kommt diese Klammeraffe und dann kommt der host mit einem weiteren Doppelpunkt, abgetrennt der path, sofern man einen path angeben möchte und dann durch slash getrennt ein ein pathname, durch das Rautesymbol, ein sogenannter Hash, ein Wertepaar und durch das Fragezeichen abgebremst, der Searchausdruck oder auch Crurry. Nun ja, genau diese potentiellen Strukturen eines URLs die sehen Sie hier, als Eigenschaften don’t location. Wir s schauen uns das mal an, wie das jetzt in einer Webseite jetzt aussieht. Diese Auswertung nehme ich vor, sobald ich hier auf den Button klicke und hier haben sie gewisse Angaben. Sie sehen, dass das Protokoll https ist, Sie sehen die Hostadresse inklusive path. Hier ist der Port einzeln angegeben. Der Pathame ist das, was jetzt hier dieser Stelle folgt. Hash und search isthier nicht angegeben, href ist die gesamte Adresse und der Hostname ist die IP-Nummer in diesem Fall 127.0.0.1. Es gibt nun einige Anwendungen von diesen Informationen, die man auch im Client nutzen kann , zum Beispiel können Sie Daten weitergeben von einer Webseite an eine andere, ohne dass Sie den Server bemühen müssen, oder anders ausgedrückt, normalerweise werden Daten, die von einer Webseite zur anderen weitergegeben werden entweder über Cookies gespeichert oder aber sie werden auf einen serverseitiges Skript, eine serverseitige Applikation weitergereicht und diese sendet sie mit der neuen Webseite oder per Ajax. Das kann man aber auch gänzlich mit Javascript machen. Sie sehen hier, dass ich ein Formular habe, ein Formular, dass seine Daten an eine HTML Seite weitergibt, auf dem gleichen Serverrespektive, auf der gleichen Domain. Wollmerkt einer HTML-Seite, also der Server wird diese Daten nicht verarbeiten. Diese Felder hier sind versteckt, wir müssen nicht mit versteckten Formularfeldern arbeiten, aber es zeigt eine Technik, wie sie im grunde beliebige Werte an eine neue HTML-Seite weiterreichen können und hier sehen Sie einen Hyperlink, der mit einer inline Referenz eine Funktion aufruft. Diese Funktion selbst benutzt window.document. den Namen des Formulars., den Namen des ersten Eingabefeldes.value, um dessen Wert anzusprechen. Und ich schreibe hier den Wert einer Variablen rein, das kann natürlich auch eine Benutzereingabe sein, wenn Sie sichtbare Formularfelder haben. Genauso schreibe ich in das zweite versteckte Formularelement in Wert einer zweiten Variablen und diese hat Sonderzeichen als Inhalt, das ist nichts notwendiges, es soll aber die allgemeine Situation zeigen, was man dann beim Auswerten der Daten machen würde und hier rufe ich eine Methode eines Formularobjektes auf, die submit heißt. Das ist genauso, als würde ich auf eine Schaltfläche mit hier in dem Formular klicken. Ich hätte diesen Hyperlink hier auch nehmen können und hätte die mit einem Button koppeln können, allerdings ist es so etwas leichter diese Javaskriptfunktion aufzurufen. Die eigentlich spannende Geschichte findet aber statt hier, sobald die Daten weg geschickt wurden in der anderen HTML-Datei. Das sieht jetzt auf den ersten Blick relativ kompliziert aus, aber im Wesentlichen ist die Schwierigkeit, dass man Daten, die man in Form eines Drings bekommt zerlegen muss. Mann muss sie zerlegen an bestimmten Trennzeichen, die wir uns gleich in der Praxis ansehen werden. Hauptsächliche interessant ist, dass ich über location. search die übergebenen Daten bekomme und was ich dann mache mit substring, string, length, split ist, ich zerlege diesen entsprechenden String an gewissen Zeichen Mit dem kaufmännischen und, dem Gleichheitszeichen im Wesentlichen und die Rückgabe speichere ich in einem RE. Was Sie hier noch sehen, ist eine Funktion von Javascript, um diese Sonderzeichen, die ich ja bewusst übergebe, zurückzuwandeln. Um das zu verstehen schauen wir uns mal das Beispiel erstmal an. Das ist das Beispiel von der wir die Daten weitergeben und die ist erst mal uninteressant, aber diese Seite ist interessant. Sie sehen, dass ich die Daten komplett zerlegt habe und bitte beachten Sie hier die Adresszeile. Ich übergebe die Daten mittels get, das bedeutet Sie werden in der Adresszeile als sogenannter search angefügt hinter dem Fragezeichen. Und Sie sehen hier einmal den Wert der Variabelen A. Das ist die Zahl 42 und die ist gut lesbar, aber meine Sonderzeichen sind zum Teil zerlegt. Sie erkennen so ein Prozentzeichen und dann einen numerischen Kod. Hier werde ich zuerst diese Searcheigenschaft als dringend betrachten und da sind nämlich auch noch diese Prozentzeichen drin. Dann werde ich dieses Fragezeichen beseitigen. Das ist einer dieser Stringzerlegungs Mechanismen. Dann Spalte ich diese Wertepaare, A ist gleich auf und versuche am Schluss nur noch den Wert zu haben, das da an dieser Stelle. Das gleiche mache ich hier auch mit der Variable B, nur muss ich hier noch einen Schritt weiter gehen und das ist das Rückwandeln dieses unlesbaren Kodes mit diesen Prozentnummernkods in die tatsächlichen Zeichen. Das ist eben notwendig, wenn ich mit so einer Technik auch solche Sonderzeichen überbegeben möchte und zum Schluss habe ich die übergebenen Werte, was Sie hier sehen. Obwohl es wie gesagt Ratifilcode ist, sind einfache Stringtechniken. Und zum Schluss die Methode decodeURIComponent zum Rückwandeln von diesen Sonderzeichen. Das Formular hatte die automatisch so maskiert.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!