78.
Mit Javascript eigene Apps für Ihr Smartphone schreiben am
Beispiel eines Haushaltsstellenfinders
Inhaltsangabe
Einleitung
Javascript
zum Aufrufen einer Haushaltsstelle vom offenen Bundeshaushalt
Funktionsweise
des Javascripts
Quellcode
Erklärung
Durch I-Frame Suchfeld beibehalten
Fazit
Einleitung
Der
Sternenhimmelstuermer besitzt ein Phone 7 und da ist der Marketplace in
Bezug auf nützliche Applikationen naturgemäß in der Anfangsphase
ziemlich mau. Also extra eine neue Programmiersprache lernen? Nein, ein
paar Zeilen Javascript reichen aus.
In einer
Webbasierten Welt gibt es tausende von Spielen oder nützlichen
Anwendungen, die auf html und Javascript basieren. Um so erstaunlicher
ist es, dass sämtliche großen Anbieter von Android über I-Phone
hauptsächlich auf C++ basierte Applikationen setzen, während
die Verwendung von Javascript auf dem Handy eher stiefmütterlich
behandelt wird - ein gravierender Fehler!
Die
Microsoft Corporation setzte z. B. bei den allseits beliebten Gadgets
auf dem Desktop auf Javascript - mit dem Erfolg, dass tausende Gadgets
von ambitionierten Usern bestehen. Dieses Konzept wurde lobenswert
ansatzweise auf das Phone 7 übertragen, so dass die
Microsoft Corperation in dieser Disziplin eher zweigleisig fährt und
das Phone 7 ein ziemlich positives "Alleinstellungsmerkmal" besitzt -
das Anpinnen von Webseiten auf der Startseite in Phone 7 als
gleichberechtigte Kachel. Der integrierte Browser vom Phone 7 startet
sämtliche Javascripts zufriedenstellend und so ist ein
schneller Zugang zu "JavascriptonlineApps" möglich.
Wenn die
Microsoft Cooperation noch eine Möglichkeit zum Speichern der
Internetseiten auf dem Handy und einen limitierten Befehlssatz zur
Steuerung von Funktionen des Phone 7 und
Javascript-Bibliotheken zur Verfügung stellen würde, so wäre das Phone
7 wirklich einzigartig und nicht nur einige läppische tausend
Anwendungen, sondern eine Million Anwendungen wären realistisch.
Wie
dem auch sei, der Weg ist nach wie vor offen und ermöglicht zumindest
beim Phone 7 adäquate Anwendungen in einem individuellen Design. Es ist
nämlich möglich, beliebige Webseiten aus dem Internetexplorer auf der
Eingangsseite anzupinnen. Die Kachel bietet ein Miniaturabbild der
Webseite. Beim Anklicken öffnet sich die Webseite - in diesem Fall ein
kleines Javascript vom Sternenhimmelstuermer, mit dem man durch Eingabe
der Haushaltsstellennummer auf die passende Seite Offener
Bundeshaushalt weitergeleitet wird und so sehen kann, wo so das Geld
der Steuerzahler verbraten wird.
Javascript
zum Aufrufen einer Haushaltsstelle vom offenen Bundeshaushalt
Hier
erstmal das
eingebettete Javascript und hinterher die Erklärung:
Geben
Sie als Nichtprofi von Haushaltsnummern zur Probe die 3006 ein.
Die Nummer setzt sich aus der 30 - Der Identnummer für den Einzelplan
des Bundesministeriums für Bildung und Forschung und der 06, die für
die Abteilung Information und Kommunikation steht, zusammen. Danach
bestätigen Sie mit Haushaltsstellensuche.
Dieses
ist natürlich mit der Einzelplannummer allein oder wie oben Einzelplan
und Kapitelnummer oder der vollständigen Nummer möglich...
Falls Sie Interesse an mehr Informationen über den Haushaltsplan haben, so lesen Sie sich diese Abhandlung im Rechtskanal dieser Homepage durch.
Funktionsweise
des Javascripts
Die Seite vom offenen Bundeshaushalt
ist sehr userfreundlich gestaltet. Nicht nur die grafische Darstellung,
sondern auch die einzelnen Webseiten mit der jeweiligen Web-Adresse der
passenden Haushaltsstelle sind ein liebevolles Detail, dass vielen
Usern entgeht. So heißt die o. a. Probeseite, die Sie mit 3006
aufrufen, dementsprechend auch http://bund.offenerhaushalt.de/3006.html.
Daran
dockt der Sternenhimmelstuermer an, indem er durch eine Eingabe eines
Users die Webadresse die jeweilige Nummer einfach ergänzt und per Javascript
die neue Seite aufrufen lässt.
Schauen Sie sich doch
einmal den Quellcode an:
Quellcode
<div><script
type='text/javascript'> <!--
function titelfinder( ) {
location.href="http://bund.offenerhaushalt.de/"
+ document.nummer.haushaltsstellennummer.value + ".html";
}
//-->
</script>
<form name="nummer"
action="javascript:titelfinder();">
Bitte geben Sie ohne
Trennzeichen die Haushaltsstelle so weit bekannt ein (Einzelplan: mit
zwei Stellen; Einzelplan und
Kapitelnummer: 4 Stellen;
Einzelplan, Haushaltsstelle und Titelnummer mit 9 Stellen und
Bindestrich mit folgenden drei Nummern):
<input type="text"
name="haushaltsstellennummer" size="15">
<input type="button"
value="Haushaltsstellensuche" onclick="titelfinder()"
name="button">
</form>
</div>
Und
nun eine kleine Erklärung:
Das
vollständige
Javascript steht im Body der HTML-Seite - eine Variante, die
übersichtlicher ist!
Mit den beiden <div>
</div> wird ein begrenzter Bereich erzeugt.
Das
Javascript an sich beträgt gerade mal sechs kurze Zeilen - mehr kriegt
der Sternenhimmelstuermer auch nicht auf die Reihe -:)
Der
Einleitungssatz und die Endzeile <script>
bis </script>
sind ziemlich obligatorisch.
function titelfinder()
- Der Titel der function
....() ist so ziemlich egal, muss aber dann auch
so weiter verwendet werden.
location.href
ist die Einleitungsformel für den zu erstellenden Link - der ist gleich
(=)
der zusammengesetzten Teile "erster
Teil der Internetadresse einschließlich dem Slash" . Das
ganze wird dann addiert (+)
mit dem erstellten document
- Unterabteilung nummer
(Das ist der Form-Name)
- Unterabteilung haushaltsstellennummer
(Das ist der Name des Eingabefeldes mit unserer 3006..) - Unterabteilung value (Das
ist die 3006..oder eben jede andere beliebige Eingabenummer). Das Ganze
wird nach Javascriptkonvention mit Punkten abgetrennt...
Am
Ende wird ".html"
hinzugefügt. Der erste und letzte Teil dieser Zeile sind feste
Bestandteile, die immer in Anführungszeichen stehen müssen, während der
Mittelteil der durch Punkte gegliederte Pfad zur Eingabe (input) des
HTML-Dokumentes ist - einer Variablen. Dieses wird eben nicht in
Anführungszeichen gesetzt. Javascriptkundige mögen mir meine
unkonventionelle Ausdrucksart verzeihen, aber die Hauptsache ist doch,
die funktionsweise irgendwie für normalsterbliche verständlich zu
beschreiben...
<form name="nummer"
action="javascript:titelfinder();"> ist die für die
Adressierung (siehe oben document.nummer) und die Aktion wichtig, die
nach der Bestätigung der Eingabe passiert. Nämlich der Start des
Javascripts, sobald im Input-Feld ein Value (Wert: z. B. 3006
eingetragen wurde.
Danach wird der Erklärungstext
eingegeben. Alles in einer Form (mit Namen "nummer"). Der
Vorteil dieser Methode ist, dass Sie Schrift und Eingabefeld in einer
Reihe haben - das wirkt optisch harmonisch..
<input type="text"
name="haushaltsstellennummer" size="15"> ist die
Definition der Eingabezeile mit einer größe von 15, Die
haushaltsstellennummer ist unser Value (Wert), die ein
"Textwert" ist.
<input type="button"
value="Haushaltsstellensuche" onclick="titelfinder()"
name="button">ist schließlich die Definition des
Eingabe-Buttons. Haushaltsstellensuche ist der Aufdruck des Buttons.
Bei einem Anklicken (onclick) startet unser Javascript titelfinder().
Bei
den ganzen Aktionen ist immer Groß und Kleinschreibung zu beachten
Haushaltsstellensuche ist etwas ganz anderes als Haushaltsstellensuche...
Durch I-Frame Suchfeld beibehalten
Der
Sternenimmelstuermer wurde gefragt, ob es möglich ist, auch das
Suchfeld nicht zu verlieren, da automatisch die neue Seite gegen die
alte Seite ausgetauscht wird.
Zur Lösung greift der Sternenhimmelstuermer auf einen Kniff zurück der bei vielen Gadgets praktiziert wird: mit einem I-Frame.
Das
Problem ist, das es nicht wirklich möglich ist, die herkömmliche
Adressierung mit _blank zur realisieren, also muss hier ein parent
herhalten. Zur Erklärung erst einmal der modifizierte Code:
<html>
<head>
<meta name="generator" content="HTML Studio">
<title> </title>
</head>
<body>
<div><script type='text/javascript'> <!--
function titelfinder( ) {
parent["tippseite_in_a_box"].location.href="http://bund.offenerhaushalt.de/" + document.nummer.haushaltsstellennummer.value + ".html";
}
//-->
</script>
<form name="nummer" action="javascript:titelfinder();">
Bitte geben Sie ohne Trennzeichen die Haushaltsstelle so weit bekannt ein (Einzelplan: mit zwei Stellen; Einzelplan und
Kapitelnummer: 4 Stellen; Einzelplan, Haushaltsstelle und Titelnummer mit 9 Stellen und Bindestrich mit folgenden drei Nummern):
<input type="text" name="haushaltsstellennummer" size="15">
<input
type="button" value="Haushaltsstellensuche" onclick="titelfinder()"
name="button"><br><br><br><br><div><center>
<iframe src="https://www.sternenhimmelstuermer.eu/pctipps/app.html"
name="tippseite_in_a_box" height="1200" scrolling="auto"
width="1200"></iframe><div><center><br><a target="tageskarte_in_a_box" </center></div><br>
<div>
</form>
</div>
<br />
</body>
</html>
Vieles kommt Ihnen bekannt vor, einiges ist
neu. Kopieren Sie sich einfach die Textdatei in ein Textdokument und
benennen die Dateiendung in htm oder html um.
parent["tippseite_in_a_box"].
Im Javascript schaffen wir eine eine eindeutige Anzeigedistanz, die adressierbar ist. Ob Sie die nun tippseite_in_a_box
oder wie auch immer nennen ist Egal. Der Rest der Zeile bleibt wie
zuvor. Eckige Klammer, Anführungszeichen und Punkt sollten auch so
verwendet werden - es funktioniert.
<div><center>
<iframe src="https://www.sternenhimmelstuermer.eu/pctipps/app.html"
name="tippseite_in_a_box" height="1200" scrolling="auto"
width="1200"></iframe><div><center><br><a target="tageskarte_in_a_box" </center></div>
Einen Iframe legt der Sternenhimmelstuermer immer in einem <div> Bereich an. Geschmackssache!
Die erste Seite im Iframe (http://www.sternenhimmelstuermer.eu/pctipps/app.html)
muss festgelegt werden. Hier können Sie, auch wenn Sie keine Hompepage
besitzen, jede beliebige Webseite einsetzen. Gerne auch die von der
Sternenhimmelstuermerhomepage - ist gut für die Seitenstatistik-:)
Denken
Sie daran, dass das nicht alle so relaxed wie der Sternenhimmelstuermer
sehen und die Seite klein sein sollte, um die Downloadzeit zu
reduzieren.
Der Sternenhimmelstuermer sortierte bewußt die Attribute (
name="tippseite_in_a_box" height="1200" scrolling="auto"
width="1200">)
des Iframes nicht. Die Reihenfolge sollte unerheblich sein...Lediglich
der Name des Iframes sollte unmittelbar hinter der Adresse stehen.
Dieses ist quasi die Kennungs-ID für den oben behandelten parent -
Befehl
Danach wird die Höhe und Breite des
Iframes in Pixeln festlegen. Das können Sie individuell regeln. Das
Anzeigen der Srollleiste des Iframes wird zwar meistens auch ohne den
automatischen Scrollbefehl durchgeführt - aber man kann ja nie wissen.
Übrigens mit scrolling="no" werden Scrollbalken ausgeschlossen.
I-Frames
von fremden Seiten ist in der Regel eine der Todsünden, aber da hier
ein User bewußt die APP einsetzt, die er selbst geschrieben hat und
somit auch weiß, wer Urheber ist und nicht anderen zugänglich macht,
ist das eben nur eine Hilfe und nicht als verwerflich anzusehen!?
Ansonsten sollte selbstverständlich immer eine Anfrage vorausgehen und nicht fremder Code eingebunden werden...
Fazit
Der
Sternenhimmelstuermer demonstrierte hier, wie Sie mit einigen Zeilen
Javascript eine mehr oder weniger sinnvolle simple App
programmieren können und durch einen Upload als Webmaster zur Verfügung
stellen könnten. Der Wunsch des Sternenhimmelstuermers ist, dass alle
Smartphones von Android bis Phone 7 im eigenen Interesse ihre
App-Politik an Webstandards ausrichten - eben an Javascript, welches
untrennbar mit dem WEB verbunden ist. Es ist wesentlich
sinnvoller eine Sprache zu verwenden und die Möglichkeiten von
Datenbanken, PHP und anderen Standards mit Javascript zu benutzen. Der
Sternenhimmelstuermer weist in diesem Zusammenhang darauf hin, dass
html 5, insbesondere Canvas (nichts anderes als Javascript) die Zukunft
ist.
Der Rückfall in höhere Programmiersprache für
Apps macht das WEB komplizierter, undurchsichtiger und schließt die
nicht zu unterschätzenden Ressourcen der Kreativität der
Javascriptfangemeinde aus. Wer hier schlau agiert, der könnte im
Handymarkt leicht die Führungsposition übernehmen, aber davon sind die
heutigen Apps noch meilenweit entfernt...
Zur
besseren Orientierung auf den über 911 (Din A 4) Tippseiten in Abhandlungen von drei Generationen Windows der Sternenenhimmelstuermerpage die individualisierte Suchmaschine von Google mit Suchergebnissen nur von dieser Homepage: Selbst
der Sternenhimmelstuemer findet sich bei diesem umfassenden Content trotz präziser Sortierung der Abhandlungen nur mit Hilfe von Suchmaschinen zu
recht...
Loading
Disclaimer: Sie geben bei der Suche Daten ein, deren Verwendung nach den Regeln von Google weiterverwendet werden können.
Der Sternenhimmelstuermer hat darauf keinen Einfluss, aber kommt mit diesem Hinweis der Verpflichtung aus dem Datenschutz und Telekommunikationsgesetz nach, auf diesen Umstand aufmerksam zu machen. Mit der Eingabe eines Suchwortes stimmen Sie dieser
Verfahrensweise zu, der Sternenhimmelstuermer kann hierfür nicht haftbar gemacht werden. Der Sternenhimmelstuermer distanziert sich von
den Werbeinhalten.
Beim Betätigen dieses Buttons geben Sie Daten an Google weiter über deren Verwendung der Webmaster keinen Einfluss hat. Nach dem Datenschutzgesetz und Telekommunik ist der Webmasterverpflichtet, Sie darauf aufmerksam zu machen - Der Sternenhimmelstuermer traut Google +