Agrafix Webdesign Blog » Javascript

ReTI IDE & Simulator (Technische Informatik)

agrafix — Sat, 14 Jan 2012 12:29:29 +0000

Da ich aktuell an der Veranstaltung Technische Informatik an der Uni teilnehme war es im letzten Übungsblatt Aufgabe Programm-Code für einen einfachen Prozessor (ReTI oder auch RESA) zu schreiben. Das vorgeschlagene Tool dafür (Neumi) kann entsprechenden Programm-Code zwar super visualisieren, ist allerdings beim “coden” nicht sehr hilfreich da es kein vernünftiges Feedback bei Fehlern gibt und es auch keine gute Eingabemaske für den Code gibt. Deshalb hab ich mich hingesetzt und eine kleine HTML-JavaScript-IDE mit einer ReTI-Simulation in PHP zusammengebaut. Das ganze ist unter reti.agrafix.net zu finden! Ich habe auch eine kleine Dokumentation dazu geschrieben, es sollte sich also alles von selbst erklären.
Ein paar Worte vielleicht noch zur “Simulation”: Die Simulation ist eher ein Debugger, da der Code nicht assembliert sondern direkt interpretiert wird. Das ist notwendig um zielgenaues Feedback bei (Laufzeit-)Fehlern zu geben. Deshalb ist es nicht möglich auf Speicherzellen zuzugreifen, die Anweisungen/Befehle enthalten. (Mit dieser Einschränkung konnte man dennoch alle Aufgabenstellungen bis jetzt lösen ) Solange man das also nicht benötigt, kann der Simulator den korrekten Endspeicherzustand berechnen.

Zur ReTI IDE & Simulator

Für die HTML-JavaScript-IDE bzw. dessen Code-Editor habe ich übrigens auf das CodeMirror 2 Framework gebaut. Super Framework, leider muss man erstmal ein bisschen Dokumentation lesen bis man damit zu guten Ergebnisen kommt!

Keine ähnlichen Beiträge vorhanden

Keep your scope – jQuery.proxy

agrafix — Tue, 10 Jan 2012 09:16:07 +0000

Wer kennt das nicht, man arbeitet mit jQuery und einem click-Event, und “verliert” dadurch bei Objekten das “this”. Kleines Beispiel:

function MyObject() {
	this.hello = "Hello";
}
 
MyObject.prototype.clickHandler = function(event) {
	alert(this.hello);
};
 
var obj = new MyObject();
 
$('#clickMe').click(obj.clickHandler);

Wenn man jetzt auf ein gedachtes Element mit der ID “clickMe” klickt, dann erscheint eine Fehlermeldung in JavaScript bzw. eine Alert-Box mit dem Inhalt “undefined” – obwohl this.hello eigentlich doch “Hello” sein sollte? Bei den jQuery Event-Handlern “verliert” die Funktion ihr aktuelles Scope und das this zeigt dann auf den Sender des Events, in diesem Fall auf das Element mit der ID “clickMe”. Das ist zwar oft gewünscht, da man dieses nun zB mit $(this).text(‘Ich wurde geklicked’); weiterverarbeiten kann, ist aber in meinem Beispiel oben sehr ungünstig. Deshalb bietet die jQuery-Library eine Funktion jQuery.proxy, welche eine Proxy-Funktion generiert mit der wir das Scope einer Funktion selbst beeinflussen können. Ersetzen wir Zeile 11 also mit folgendem:

11	$('#clickMe').click($.proxy(obj.clickHandler, obj));

Nun zeigt das this wärend unserem clickHandler-Aufruf wieder auf das eigentliche Objekt und eine Alert-Box mit dem Inhalt “Hello” erscheint. Möchte man nun trotzdem auf das auslösende Element für das Event zugreifen, schafft

var calledBy = event.target;
// beispiel
$(calledBy).text("Link geklickt!");

abhilfe! Natürlich kann man auch seine eigene Proxy-Funktion mit direct-calling bauen, was aber den Code schon deutlich unübersichtlicher macht, allerdings viel mehr Flexibilität bietet (wieder Bezug auf 1. Beispielcode):

$('#clickMe').click((function(o) {
	return function(event) {
		o.clickHandler(event);
	};
})(obj));

Es lohnt sich also immer auch mal unter “Misc” bzw. “Utilities” in der Dokumentation einer Library nachsehen

Ähnliche Beiträge:

HTML5 WebSocket

agrafix — Fri, 25 Nov 2011 11:08:57 +0000

HTML5 unterstützt jetzt das Aufbauen von “WebSocket”-Verbindungen. Eine WebSocket Verbindung basiert ähnlich wie HTTP auf dem TCP Protokoll, baut aber eine “dauerhafte” Verbindung auf. Die Vorteile gegenüber HTTP ist, dass eine Aktion des Servers keine vorhergehende Anfrage des Clients mehr erfordert, wodurch der Server neue Informationen fasst in Echtzeit ausliefern kann. Dadurch kann man eine Menge Traffic und viele unnötige HTTP-Requests sparen, die etwa ein AJAX-JavaScript sonst schicken würde um neue Informationen zu erhalten.
Technisch gesehen baut bei einer WebSocket-Verbindung der Browser mit dem Server eine Verbindung auf, die nach einen Handshake dann bestehen bleibt und über die dann Binär- und Textdaten geschickt werden können.

Leider hat das Protokoll im Handshake einige Sicherheitsprobleme (gehabt?) und sich deshalb ständig verändert. Dieser Artikel bezieht sich also auf die Aktuellste Version (17). Diese wird derzeit von der aktuellsten Chrome Version und anderen Webkit Browsern unterstützt, in Firefox und Opera ist WebSocket wegen der Sicherheitsprobleme derzeit deaktiviert.

Um HTML5 WebSocket zu verwenden ist zunächst ein WebSocket-Server nötig. Ich habe hier nach einer PHP-Variante gesucht und habe dann nach einer Weile folgenden gefunden: php-websocket. Diesen sollte man sich laden und dann kann man ihn per

php -q php-websocket/server/server.php

starten. Jetzt ist ein WebSocket-Server auf “localhost:8000″ zu erreichen. Dort sind derzeit zwei Module geladen, einmal das Modul “echo” und einmal das Modul “chat”. (Ich werde mich hier nicht mit der Entwicklung eines WebSocket-Server weiter befassen) Das “echo” Modul nimmt einfach Anfragen entgegen und schickt diese dann an alle Verbundenen Sockets weiter.

Nun kümmern wir uns um die HTML5-Seite von WebSocket, dem User-Frontend. Dafür bauen wir uns erstmal eine einfache HTML5 Seite:


<html>
<head>
<meta charset="UTF-8">
<title>HTML5 WebSocket Test</title>

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>

<script type="text/javascript" src="websocketlib.js"></script>
<script type="text/javascript">
// hier wird dann das WebSocket-Script reinkommen, siehe unten
</script>
</head>
<body>
 
<div style="float:right;width:40%;">
	<h1>Log</h1>
	<div id="logbox"></div>
</div>
 
<h1>Chatbox</h1>
<div id="chatbox"></div>
 
<h1>Say something</h1>
<form id='chat'>
	<input type='text' value='' name='message' />
	 <input type='submit' value='Sagen' />
</form>
 
</body>
</html>

Für die einfache Verwendung des WebSockets habe ich mir eine kleine Wrapper-Library (websocketlib.js) programmiert:

/**
 * Small wrapper library for HTML5 WebSocket
 * 
 * @author Alexander Thiemann 
 * @version 1.0
 * 
 * @param string WebSocket host, eg. ws://localhost:8010/echo
 * @param function Function to be called when socket is connected
 * @param function Function to be called when socket recieves data, takes 1 argument message
 * @param function Function to be called for logging purposes, takes 1 argument log-message
 * 
 * @see http://blog.agrafix.net/2011/11/html5-websocket/
 */
var WebSocketLib = {
	init: function(host, onConnect, onRecv, onLog) {
		this.socket = new WebSocket(host);
 
		this.onLog = onLog;
		this.onRecv = onRecv;
		this.onConnect = onConnect;
 
		this.onLog('Initializing Socket. State: ' + this.socket.readyState);
 
		this.socket.onopen = this._onOpen;
		this.socket.onmessage = this._onMessage;
		this.socket.onclose = this._onClose;
	},
 
	send: function(message) {
		WebSocketLib.socket.send(message);
	},
 
	_onClose: function() {
		WebSocketLib.onLog('Socket Closed.');
	},
 
	_onMessage: function(msg) {
		WebSocketLib.onLog('Recieved new Message from Server: ' + msg.data);
		WebSocketLib.onRecv(msg.data);	
	},
 
	_onOpen: function() {
		WebSocketLib.onLog('Socket is Ready. State: ' + WebSocketLib.socket.readyState);
 
		if (WebSocketLib.socket.readyState == 1) {
			WebSocketLib.onConnect();
		}	
	}
}

Ich denke dort ist alles relativ selbsterklärend. Das WebSocket ist wirklich sehr leicht zu verwenden! Um diese Wrapper-Library zu verwenden, bauen wir in obiges HTML-Grundgerüst bei “// hier wird dann das WebSocket-Script reinkommen, siehe unten” folgendes ein:

$(document).ready(function() {
	WebSocketLib.init('ws://localhost:8010/echo', 
	function() {
		sockReady();
	},
	function (t) {
		$('#chatbox').append($("").text(t));	
	},
	function (t) {
		$('#logbox').append($("
").text(t));	
	});
 
	function sockReady() {
		$('#chat').submit(function(e) {
			e.preventDefault();
 
			var input = $('input[name="message"]');
 
			WebSocketLib.send(input.val());
 
			input.val("");
		});
	}
});

Zuerst warten wir, bis unser HTML-Dokument im Browser aufgebaut ist. Dann geben wir in Zeile 2 an, wo unser WebSocket-Server läuft. Die Funktion in Zeile 4 wird aufgerufen, sobald das WebSocket verbunden ist. Die Funktion Zeile 6-8 wird aufgerufen, wenn eine Nachricht zurückgegeben wird. Die Funktion Zeile 9-11 wird bei Log-Ereignissen (Hauptsächlich zum Debuggen) aufgerufen. Mit WebSocketLib.send(“Nachricht”) in Zeile 19 schicken wir eine Nachricht an den Server.

Wenn nun alles vorbereitet ist, der WebSocket-Server gestartet ist (siehe oben), können wir einem Browser, der WebSocket unterstützt (siehe oben), unsere HTML-Seite aufrufen. Die Log-Ausgabe im HTML-Fenster sieht wie folgt aus:

Initializing Socket. State: 0
Socket is Ready. State: 1

Im Consolenfenster des PHP-Server sehen wir:

2011-11-25 11:26:47 [info] [client 127.0.0.1:30601] Connected
2011-11-25 11:26:47 [info] [client 127.0.0.1:30601] Performing handshake
2011-11-25 11:26:47 [info] [client 127.0.0.1:30601] Handshake sent

Die Verbindung ist nun also aufgebaut. Jetzt sollten wir den “echo”-Server testen. Wir tippen etwas in das Textfeld und schicken es ab. Der Log sagt:

Recieved new Message from Server: test

Und unter “Chat” steht jetzt “test”. Hat soweit also funktioniert! Jetzt können wir ein neues Browserfenster aufmachen, wieder den Verbindungsvorgang abwarten und dann dort eine Nachricht verschicken. Diese erscheint dann in allen verbundenen Client-Fenstern.

Eigentlich ziemlich einfach zu verwenden, und es öffnet viele neue Möglichkeiten vorallem in Kombination mit Canvas für HTML5-Multiplayer-Games… hoffen wir also, dass es bald von allen Browser voll unterstützt wird!

Ähnliche Beiträge:

Sprechblasen mit HTML5, Canvas und JavaScript

agrafix — Fri, 18 Nov 2011 04:42:54 +0000

Mit HTML5, Canvas und JavaScript kann man mittlerweile eine Menge schöner Grafiken direkt im Browser rendern. Da ich neulich eine flexible Sprechblase benötigt habe, hier der Code dafür:

/**
 * Draw a speech bubble on an HTML5-Canvas
 *
 * @author Alexander Thiemann 
 * @license CC BY-SA 2.0
 * 
 * @param ctx Canvas 2d context
 * @param text Text for the speech bubble
 * @param x bottom left x-coordinate of speech bubble
 * @param y bottom left y-coordinate of speech bubble
 *
 */
function speechBubble(ctx, text, x, y) {
	var messure = ctx.measureText(text);
 
	var w = messure.width;
	var h = 20;
 
	ctx.beginPath();
	ctx.strokeStyle="black";
	ctx.lineWidth="1";
	ctx.fillStyle="rgba(255, 255, 255, 0.8)";
 
	ctx.moveTo(x, y);
	ctx.lineTo(x + (w*0.2), y);
	ctx.lineTo(x + (w*0.2), y+10);
	ctx.lineTo(x + (w*0.3), y);
	ctx.lineTo(x + w, y);
 
	ctx.quadraticCurveTo(x + (w*1.1), y, x + (w*1.1), y-(h*0.2)); // corner: right-bottom
 
	ctx.lineTo(x + (w*1.1), y-(h*0.8)); // right
 
	ctx.quadraticCurveTo(x + (w*1.1), y-h, x + w, y-h); // corner: right-top
 
	ctx.lineTo(x, y-h); // top
 
	ctx.quadraticCurveTo(x - (w*0.1), y-h, x - (w*0.1), y-(h*0.8)); // corner: left-top
 
	ctx.lineTo(x - (w*0.1), y-(h*0.2)); // left
 
	ctx.quadraticCurveTo(x - (w*0.1), y, x, y); // corner: left-bottom
 
	ctx.fill();
	ctx.stroke();
	ctx.closePath();
 
	ctx.textAlign = 'left';
	ctx.fillStyle = '#000';
	ctx.fillText(text, x, y-6);
}

Verwendung:
HTML

JavaScript

var ctx = document.getElementById("bubble").getContext('2d');
speechBubble(ctx, "Das hier ist ein Test!", 5, 40);

Das Resultat:

Ziemlich schick, oder?

Ähnliche Beiträge:

AJAX und der “Vor” und “Zurück” Button

agrafix — Mon, 17 Oct 2011 07:18:29 +0000

Kleiner Hinweis: Dieser Blogpost nimmt an, das jQuery verwendet wird

Dank AJAX kann man eine Menge Traffic einsparen – allerdings hat AJAX leider ein paar Nachteile: Die Browsernavigation, also die “Vor” und “Zurück” Knöpfe des Browsers, funktionieren nicht mehr.
Hier mal ein Beispiel:

HTML:

 href="/content.html">Inhalt ändern>
 id="content">Hier ist Inhalt 1>

JavaScript:

$("a").live("click", function (e) {
    e.preventDefault();
 
    $('#content').load(e.target.href, function() {
        // nothing here yet ;)
    });
});

Klickt man nun auf “Inhalt ändern”, erscheint der Inhalt von content.html im content-div. Wenn jetzt der Benutzer allerdings wieder “Hier ist Inhalt 1″ sehen möchte, kann er nicht den “Zurück”-Button seines Browsers verwenden.

Um dieses Problem zu lösen gibt es zwei Möglichkeiten:

Einen hash an die aktuelle URL anhängen, etwa so: /#!content.html
Das HTML5 window.history-Objekt bemühen

Da die zweite Methode leider (noch) nicht von jedem Browser unterstützt wird, aber die wesentlich hübschere Methode ist, habe ich mir ein Objekt geschrieben, was beides kann!

/**
 * navigatorHistory
 *
 * Fixes navigator history for ajax-based sites
 *
 * @author agrafix 
 */
var navigatorHistory = {
	/**
	 * Title of site
	 */
	siteTitle: '',
 
	/**
	 * function to load content, needs to be set before hook()-call
	 */
	loaderFunc: null,
 
	/**
	 * check if the browser supports pushState
	 */
	isSupported : function() {
		return (typeof (window.history.pushState) == 'function');
	},
 
	/**
	 * add url to history
	 */
	add : function(url) {
 
		if (this.isSupported()) {
 
			window.history
					.pushState(null, this.siteTitle, url);
		} else {
			window.location.hash = "#!" + url;
		}
	},
 
	/**
	 * listen for back-forward button events
	 */
	hook : function() {
		if (!this.loaderFunc) {
			alert("No loaderFunc defined!");
			return;
		}
 
		if (this.isSupported()) {
			// doesn't work with jquery, no idea why :O
			window.addEventListener("popstate", function(e) {
				navigatorHistory.loaderFunc(document.location.pathname, true);
			});
		} else {
			$(window).bind('hashchange', function() {
				var location = (window.location.hash).replace(/^#!/, '');
				navigatorHistory.loaderFunc(location, true);
			});
		}
 
	}
};

Die Benutzung in Verbindung mit dem obigen HTML-Schnipsel ist denkbar einfach:

// funktion zum laden der Seiten definieren
navigatorHistory.loaderFunc = function(url, nohistory) {
	if (!nohistory) {
		navigatorHistory.add(url);
	}
 
	$('#content').load(url);
};
 
// seiten titel
navigatorHistory.siteTitle = "Deine Seite";
 
// auf vor bzw. zurück-button klicks hören
navigatorHistory.hook();
 
// die eigentliche ajax-funktion
$("a").live("click", function (e) {
    e.preventDefault();
 
	navigatorHistory.loaderFunc(e.target.href);
});

Eigentlich relativ einfach einzubauen und es macht eine Seite deutlich benutzerfreundlicher!

Ähnliche Beiträge:

JavaScript Timers mit jQuery

Unix-Timestamp in JavaScript formatieren

agrafix — Sun, 16 Oct 2011 00:33:59 +0000

Um ein Unix-Timestamp mit JavaScript zu formatieren, habe ich mir folgendes Objekt geschrieben:

var timeFormat = {
    /**
     * Output format.
     *
     * d - current day
     * m - current month
     * Y - current Year
     *
     * H - current hour (24 hour system)
     * i - current minute
     * s - current second
     */
    displayFormat: 'd.m.Y - H:i:s',
 
    /**
     * Format given unix-timestamp
     */
    format: function(timestamp) {
        // convert unix timestamp to javascript date object
        var d = new Date(timestamp * 1000);
        var output = this.displayFormat;
 
        output = output.replace(/d/g, this.padZero(d.getDate()))
            .replace(/m/g, this.padZero(d.getMonth()))
            .replace(/Y/g, d.getFullYear())
            .replace(/H/g, this.padZero(d.getHours()))
            .replace(/i/g, this.padZero(d.getMinutes()))
            .replace(/s/g, this.padZero(d.getSeconds()));
 
 
        return output;
 
    },
 
    /**
     * add zero paddings to numbers smaller than 10
     */
    padZero: function(number) {
        if (number < 10) {
            return "0" + number.toString();
        }
 
        return number;
    }
};

Die Benutzung ist ziemlich einfach:

// schreibt 13.09.2011 - 13:30:23
document.write(timeFormat.format(1318473023));

Man kann das Ausgabeformat über das timeFormat.displayFormat Feld steuern:

timeFormat.displayFormat = 'H:i'; // gibt nur Stunden und Minuten aus
document.write(timeFormat.format(1318473023)); // schreibt 13:30

Wie bereits oben beschrieben sind folgende Zeichen möglich (auch mehrfach)

    /**
     * Ausgabeformat
     *
     * d - aktueller Tag
     * m - aktueller Monat
     * Y - aktuelles Jahr
     *
     * H - aktuelle Stunde
     * i - aktuelle Minute
     * s - aktuelle Sekunde
     */

Ähnliche Beiträge:

JavaScript Timers mit jQuery

agrafix — Sat, 15 Oct 2011 01:02:28 +0000

Timer in JavaScript zu realisieren ist eigentlich recht leicht, dazu braucht mal nur die Funktionen window.setTimeout bzw. window.setInterval mit entsprechenden Argumenten zu füttern.

// funktion verzögert aufrufen
function machWas() {
   alert('alert() mit 1000ms verzögerung!');
}
window.setTimeout(machWas, 1000);
 
// funktion alle X Millisekunden aufruden
function machWasOft() {
   alert('alle 1000ms ein alert()');
}
window.setInterval(machWasOft, 1000);

Doch was ist, wenn ich jetzt einen solchen Timer ändern oder abbrechen möchte? Das ist eigentlich auch nicht schwer – die Funktionen setTimeout/setInterval geben ein Objekt zurück über das sie sich wieder beenden lassen.

var x = 0;
function machWasAbbrechbarOft() {
    x += 1;
    if (x > 200) {
        window.clearInterval(running); // beende das "Interval" nach 201 Ausführungen
    }
}
var running = window.setInterval(machWasAbbrechbarOft, 1000);

Das funktioniert in kleinen JavaScript Codes sicher ohne Probleme, wenn man allerdings an einem großem JavaScript Projekt arbeitet, macht es die Arbeit nicht gerade leichter wenn man immer dieses Rückgabe-Objekt (im Beispiel running) irgendwo speichern muss, vorallem wenn man von überall im Code darauf zugreifen will.

Um dieses Problem zu lösen habe ich ein jQuery Timer Plugin gefunden. (Siehe http://plugins.jquery.com/project/timers) Wer an einem größerem JavaScript Projekt arbeitet, sollte meiner Meinung nach aufjedenfall auf ein Framework setzen – jQuery ist hier meine Wahl von daher bietet sich dieses Plugin an.

Mit diesem Plugin geht das “Interval” setzen dann wie folgt:

$(document).everyTime(1000, "machWasOftAbbrechbar", function(i) { // alle 1000ms
  alert('Hallo ich bin der ' + i + 'te Aufruf!'); // machWasOftAbbrechbar, hier die funktion die aufgerufen werden soll
}, 200); // 200 mal ausführen

Der zweite Parameter, machWasOftAbbrechbar, stellt hierbei ein sogenanntes “label” dar, über das man den gestarten Timer dann wieder abbrechen kann:

$(document).stopTime("machWasOftAbbrechbar"); // stoppe machWasOftAbbrechbar

Viel mehr gibt’s eigentlich nicht dazu zu sagen – die Dokumentation dazu findet man, genau wie das Plugin selbst, unter http://plugins.jquery.com/project/timers.

Ähnliche Beiträge:

JavaScript und Geolocation

agrafix — Fri, 14 Oct 2011 00:00:54 +0000

Seit Firefox 3.5, Opera 10.60 bzw. Safari/Webkit 5 ist es möglich per JavaScript mit Einverständniss des Benutzers seine Position zu ermitteln. Die Position wird dann entweder über eine angeschlossene GPS-Antenne oder über die verfügbaren WLans ermittelt. Die API dafür ist sehr leicht zu benutzen.

Zunächst sollte geprüft werden ob der benutzte Browser Geolocation unterstützt. Das geht wie folgt:

if (!navigator.geolocation) {
	alert('Sorry, dein Browser unterstützt keine Geolocation-API');
}

Jetzt ist es möglich die aktuelle Position abzufragen:

navigator.geolocation.getCurrentPosition(function(position) {  
	alert('Deine aktuelle Position ist: Lat: ' + position.coords.latitude + ' Long: ' + position.coords.longitude);  
}, function(error) { alert('Fehler beim finden der Position. Fehler: ' + error.message); });

und bei jeder Änderung der Position erneut ein Event auszulösen:

var = locationHandler = navigator.geolocation.watchPosition(function(position) {  
	alert('Deine neue Position ist: Lat: ' + position.coords.latitude + ' Long: ' + position.coords.longitude); 
}, function (e) {}, {enableHighAccuracy:true, maximumAge:120 * 1000, timeout:27000});

Hierbei kann man angeben

enableHighAccuray: ob man auf hohe Genauigkeit setzen möchte (sofern diese vom Gerät unterstützt wird)
maximumAge: (in ms) wie alt die letzte Position maximal sein darf – je kleiner dieser Wert, desto öfterst wird auf dem Gerät die aktuelle Position abgefragt.
timeout: (in ms) wann die Positionsbestimmung abgebrochen werden soll wenn sie nicht erfolgreich ist

Wenn man die Positionsüberwachung wieder abbrechen will, hilft folgender API-Call weiter:

navigator.geolocation.clearWatch(locationHandler);

Sehr nützlich, vorallem wenn man eine Webseite für Smartphones bastelt

Ähnliche Beiträge:

Zippyshare Downloads Automatisieren update

agrafix — Wed, 16 Feb 2011 11:53:30 +0000

Kurz nachdem ich den letzten Beitrag über zippyshare veröffentlicht habe, hat die Seite wieder umgestellt auf einen anderen “Schutz” der Downloadlinks. Diesmal ist es aber ziemlich einfach an diese zu geraten, man muss nur nach documents.getElementById(‘dlbutton’).href = “…” suchen. Dort findet sich in Klammern ein einfacher mathematischer Ausdruck, der in fasst jeder Programmiersprache mit einem Einzeiler ausgeführt werden kann.

Ähnliche Beiträge:

Zippyshare Downloads automatisieren

agrafix — Sat, 12 Feb 2011 21:57:09 +0000

Zur Zeit arbeite ich an einem Downloadmanager, der alle gängigen Download-Seiten unterstützen soll. Neulich hat zippyshare.com etwas eingebaut um genau diesen “automatischen” Downloads einen Riegel vorzuschieben: Der Download-Link wird jetzt per JavaScript “verschlüsselt”. Ich werde jetzt hier keinen Beispiel-Zippyshare-Downloadlink posten, das findet man mit etwas googlen schnell selbst

Nun möchte ich erläutern, wie ich den Download-Link automatisch auslese:
Zuerst entnehme ich der Seite per Regulärem Ausdruck die benötigten JavaScript Variablen:
xHTML-Code der Stelle

Regexp zum auslesen

$aFind = StringRegExp($ZippySrc, "

Agrafix Webdesign Blog » Javascript

ReTI IDE & Simulator (Technische Informatik)

Keep your scope – jQuery.proxy

HTML5 WebSocket

Sprechblasen mit HTML5, Canvas und JavaScript

AJAX und der “Vor” und “Zurück” Button

Unix-Timestamp in JavaScript formatieren

JavaScript Timers mit jQuery

JavaScript und Geolocation

Zippyshare Downloads Automatisieren *update*

Zippyshare Downloads automatisieren

Zippyshare Downloads Automatisieren update