Mit JavaScript aus einem Dokument Daten lesen
22. Februar 2009 Roland
- Programmierung
- Variablenzuweisungen und Berechnungen
- Alter berechnen nur mit JavaScript
- Alter berechnen mit und ohne Javascript
- Code Optimierung
- Client Server Applikationsarchitektur
- Eigenschaften eines Webbrowsers
- Stylesheets
- Interaktive Webclients
- Mit HTML, oder SVG, interaktive Ein- Ausgaben erstellen
- Mit JavaScript aus einem Dokument Daten lesen
- Der Webserver
- Webserver-seitige Programmierung
- Datenbankanbindung
- Architekturprinzip Separation of Concerns
- Beschreibung von Anwendungsfällen
- Mit JavaScript einen wiederkehrenden Event erzeugen
- Kommunikationswege bei Einsatz von Java auf dem Webclient
- Einbinden der JavaScript Timer Klasse in eine Webseite
- AJAX Kommunikation ohne Fassaden Pattern
- JavaScript Klassen mit Object-Literal Syntax erstellen
- Knackpunkte bei der Klasse AsyncCommunication
- Speicherverbrauch in AJAX Applikationen
- Auch bei JavaScript immer die Variablen sauber deklarieren
- Eventhandler im JavaScript mit dem HTML Dokument verknüpfen
- Objekte in JavaScript mit JSON deklarieren
So, schön. Wir haben mittlerweile auf unserem Client eine JavaScript Funktion die “huhu” sagt und können Dokumente dank Stylesheets und Auszeichnungssprache schön darstellen. Wie kommen wir jetzt an die wertvollen Daten heran, die unser Anwender eingegeben hat?
Naja, wir lesen einfach unser HTML Dokument aus.
Dein HTML Dokument ist im Endeffekt ein XML Dokument. Somit hast du die Möglichkeit jedes Element in deinem Dokument zu durchlaufen und den Wert (value) des Elements zu lesen und zu ändern.
Um schnell an bestimmte Elemente heranzukommen kannst du dass id Tag verwenden. Mit id wird innerhalb eines HTML Dokuments ein Element mit einer eindeutigen Identifizierung versehen. Beispiel:
-
<form>
-
<input id="name" type="text"/>
-
<input id="vorname" type="text"/>
-
</form>
Hier wurde ein Text-Input-Tag mit der id name und eines mit vorname bestimmt. Wir können jetzt mit den zwei Eingabefeldern den Namen und Vornamen einer Person eingeben. Mit JavaScript können wir die beiden Eingabefelder folgendermaßen auslesen:
-
var name = document.getElementById("name").value;
-
var vorname = document.getElementById("vorname").value;
Die Variablen name und vorname beinhalten danach die Werte der im HTML Dokument vorhandenen Elemente mit der id vorname und name.
document ist hierbei immer dass aktuelle Dokument in dem wir uns befinden. Egal ob es sich hier um HTML oder SVG handelt.
Aufgabe
Sucht mal im Internet ein bisschen rum und baut ein HTML Dokument mit einem Paragraph (p) dass die id “actual_date” hat.
Baut eine JavaScript Datei und bindet diese in das HTML Dokument ein.
Erstellt eine JavaScript Funktion die beim Laden des HTML Dokuments angezogen wird und in den Paragraph actual_date dass aktuelle Datum (Jahr, Monat, Tag, Stunde, Minute, Sekunde) einschreibt.
Probiert aus ob dass alles ohne Fehlermeldung auf der JavaScript Konsole funktioniert und euer HTML Dokument immer noch valide ist.
Der Beitrag wurde
am Sonntag, den 22. Februar 2009 um 00:20 Uhr veröffentlicht
und wurde unter Programmieren abgelegt.
Kurzlink: http://www.baldenhofer.eu/blog/?p=224
Dir gefiel der Artikel? Dann abonniere doch den RSS Feed
Du kannst die Kommentare zu diesem Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.
Ich würde gerne aus meinem Javascrip-scrip einen Alert-Sound ‘erklingen’ lassen.
Aber bereits das init versagt (siehe unten für den Code)
Leider habe ich nix gefunden ausser einen nicht mehr funktionierenden Lösung mit netscape aus dem Jahr 2005
Gäbe es eeinen Weg und könnte man den nicht ‘veröfffentlichen’.
Danke für das Interesse,
calli
// das wäre jetzt der Code
var soundfile = “file:///C:\Users\cas\Music\sounds\BellTinyStrike.wav”;
var sound = Components.classes["@mozilla.org/sound;1"].createInstance(Components.interfaces.nsISound);
// Error: has no allowance to read the properties of XPCComponents.classes.
playThis(soundfile);
function playThis(soundfile) {
var s = Components.classes["@mozilla.org/sound;1"].createInstance(Components.interfaces.nsISound);
var sUri;
if (soundfile.search(“://”) == -1) {
var ios = Components.classes['@mozilla.org/network/io-service;1'].getService(Components.interfaces.nsIIOService);
var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
file.initWithPath(soundfile);
sUri = ios.newFileURI(file);
} else {
sUri = Components.classes['@mozilla.org/network/standard-url;1'].createInstance(Components.interfaces.nsIURI);
sUri.spec = soundfile;
}
s.play(sUri);
}
Hallo calli,
ich habe mal schnell gegoogelt.
Unter how to play sound steht eine recht gute Erklärung wie du einen Sound abspielen kannst.
Ich habe hier ein funktionierendes Demo zusammengestöpselt:
<html>
<head>
<title>Huhu</title>
<script language="JavaScript">
<!--
function getMimeType(){
var mimeType = "application/x-mplayer2"; //default
var agt=navigator.userAgent.toLowerCase();
if (navigator.mimeTypes && agt.indexOf("windows")==-1) {
//non-IE, no-Windows
var plugin=navigator.mimeTypes["audio/mpeg"].enabledPlugin;
if (plugin){
mimeType="audio/mpeg" //Mac/Safari & Linux/FFox
}
}//end no-Windows
return mimeType
}
function setEmbed(ID, dir) {
var element = document.getElementById(ID);
//Write the following three lines in one:
element.innerHTML = '<embed src="'+dir+'" autostart="1" loop="0" height="45" width="170" type="'+getMimeType()+'"></embed>';
}
-->
</script>
</head>
<body onload="setEmbed('sample', 'http://simplythebest.net/sounds/WAV/sound_effects_WAV/sound_effect_WAV_files/ape.wav')">
<span id="sample">Finding plugin...</span>
</body>
</html>
Das sollte auf Firefox, IE usw. funktionieren…
Dieses Teil erstellt einen Player der im span id=”sample” eingefügt wird. Du kannst das Teil natürlich auch nicht beim body-Tag aufrufen sondern z.B. wenn ein Button gedrückt wird.
Die Funktion setEmbed() sorgt dafür, dass das richtige Tag pro Browser eingefügt wird. Das Attribute autostart sorgt dafür, dass dein sound sofort losläuft. Wenn du das nicht willst, kannst du ihn auf “0″ setzen.
Ich hoffe, ich konnte dir ein wenig helfen.
Grüssle
Roland
eeh, wow – DANKE!
Ich weiß jetzt nur noch nicht wie ich das in mein Script einbauen kann.
Ich will ja keine eigene Webseite erstellen, sondern eine andere Webseite ‘überwachen’ mit einem Script, das unter dem FF-AddOn Scriptish läuft. Und je nach Änderung soll dann mal das oder das, aber auch jenes Sound-File abgespielt werden, alles gesteurert über das script, das die Web-Seite zwische jede Sekunde oder alle n Sekunden abtastet:
setInterval(function() { ... }, 1000 );
</code)
Deine Lösung ist wohl für eine eigene Web-Seite, in die ich die Möglichkeit einbaue, aber bei einer externen Web-Seite?
Aber ein herzliches Danke aus Wien,
Calli
Hi nochmal
Also die Scriptish Erweiterung habe ich noch nicht verwendet.
Schau doch mal auf die Seite http://musicplayer.sourceforge.net/greasemonkey/inline.player.user.js Greasemonkey soll ja ähnlich sein, nur für ältere Browser.
Vielleicht kannst du dir solch einen Player zusammenstecken und mit dem von mir beschriebenen Funktionen anreichern…
Das JavaScript ist bei der Firefox Erweiterung ja identisch wie auf einer eigenen Seite.
Viel Erfolg und Grüße aus Konstanz!
Roland
hmm, ohne es ausprobiert zu haben aber die Berschreibung sagt:
Replace every link to mp3 file on page with a tiny inline player button to hear without leave the page.
Icxh schau mal am Wochenende – wenn sich die Zeit ergibt – ob ich solche ‘Sound-Buttons’ in die Original-Web-Page einschmuggeln kann, die ich dann drücke.
Aber nochmad, der Aufruf:
Components.classes["@mozilla.org/sound;1"].createInstance(Components.interfaces.nsISound);
scheitert ja wohl an irgendwelchen Rechten
Könnte man die
a) umgehen (unwahrschenlich) oder
b) ein hidden window, ein locales priveligiertes Tab, öffnen, wo dann doch dieser Aufruf und die folgenden ‘durchginge’?
Das Interessante ist aber, dass das AddOb check4Change einen sound spielt!
Ich habe mich auch schon durch dessen Code gewühlt, aber nichts gefunden,
wodurch mir ein Heureka entführe.
Dort schaut es so aus:
try{
window.addEventListener(“load”,c4cSystem_init, false);
window.addEventListener(“unload”,c4cSystem_uninit, false);
} catch (e) {c4cUti_assert(false,e);}
// setup c4c.
function c4cSystem_init() {
try{
// onload. copied from http://kb.mozillazine.org/On_Page_Load
var appcontent = document.getElementById(“appcontent”); // browser
if(appcontent)
appcontent.addEventListener(“load”, c4cSystem_pageReloaded, true);
// for removed tab
var container = gBrowser.tabContainer;
container.addEventListener(“TabClose”, c4cSystem_tabRemoved, false);
// for window focus and blur. NOTE: BUG in FF. onblur handler only gets called for first window. This means it’ll work some of the time.
window.addEventListener(“focus”,function() {/*c4cUti_log(“focus”);*/ window.hasFocus = true;}, true);
window.addEventListener(“blur” ,function() {/*c4cUti_log(“blur”);*/ window.hasFocus = false;}, true);
// init stats
c4cStats_init();
//init sound
c4cUti_soundInit();
// make sure default params are setup.
c4cParams_setUpDefaults();
// setup menus
c4cMenu_initContextMenus();
} catch (e) {c4cUti_assert(false,e);}
}
function c4cUti_soundInit() {
try{
var sound = Components.classes["@mozilla.org/sound;1"].createInstance(Components.interfaces.nsISound);
sound.init();
} catch (e) {c4cUti_assert(false,e); return null;}
}
Einen EvenListener habe ich versucht zu ‘benutzen’ der lief aber nicht in/mit Scriptish, da bin ich dann zu setInterval(function() {..} gewechselt.
Tja, bei diesem AddOn get’s, aus scriptish aber nicht ??
Ich kann nicht erkennen, wieso check4Chance die Rechte hat, die ich gerne hätte.
Ich sehe nicht, was da anders ist, dass es geht, und bei mir nicht
Ein Idee, dass ich weiter suchen und probieren kann?
Es kann doch nicht sein, dass das nicht geht?
LG aus Wien mit einem schönen Wochendewunsch,
Calli