Depot43-Unterlagen - ZIM Debugging

HTML Elemente
            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>Zim-CreateJS-Animation - ZIM Debugging</title>
      <script src="https://d309knd7es5f10.cloudfront.net/createjs.min.js"></script>
      <script>
        var zon = true; 
        var zns = false; 
      </script>
    <script src="https://d309knd7es5f10.cloudfront.net/zim_6.7.3.js"></script>

    <script>
var scaling = "fit"; 
var width = 1024;
var height = 768;
var color = "#DDD";

var frame = new zim.Frame(scaling, width, height, color); 
frame.on("ready", function() {
	zog("ready from ZIM Frame");

	var stage = frame.stage;
	var stageW = frame.width;
	var stageH = frame.height;
    
    alert("Alert mit OK schliessen und - Konsole öffnen mit F12! - 3 x 5 Sekunden Anzeige prüfen - Button klicken für die Anzeige in der Console.")

    // Funktion und Aufruf
	function sayHello(meldung) {
		zog("Debug in «log.console»: "+meldung);
	}
	sayHello("Aufruf beim Start!");

    // Die 
	function addNumbers(a, b) {
		return a+b;
	}
	zog(addNumbers(10, 30));
	zog(50 + addNumbers(15, 35)); 

	// Eine Funktion kann auch in einer Variablen liegen und so angesprochen werden:
	var doIt = function() {
		zog("Funktion in Variable");
	}
	doIt();


	// TIMEOUTS AND INTERVALS
	// Bei Start gets los mit dem Timeout von 5 Sekunden.
	window.setTimeout(zeitpunktX, 5000); 
	function zeitpunktX() {
		zog("Zwischen Start und Anzeige wurde 5 Sekunden gwartet!");
	}


	// COMMENTED OUT AFTER SHOWING
	// var catInterval = setInterval(function() { ...
    // clearInterval(catInterval);

	var catInterval = setInterval(function() {
		zog("jetzt!");
	}, 5000);

	setTimeout(function(){
		zog("nach 3 Durchläufen gestoppt ...");
		clearInterval(catInterval);
	}, 16000); 


	// EVENTS AND HANDLERS
	// Der Button-Event meldet an Console
	var button = new zim.Button(200, 80, "START");
	button.center(stage);
	button.on("click", startDebug);
    var ButtonKlick = 0;

	function startDebug() {
        
        if( ButtonKlick == 0 ) {
            zog("Auf den Button geklickt!");
            ButtonKlick = 1;
        } else {
            ButtonKlick ++;
            zog( "Wiederholt: "+ButtonKlick+" x");
        }
  
	}

	stage.update();

});
    </script>
    <style>

    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
    <body>

    </body>
</html>


 

            
Hinweis

Neben den gebräuchlichen Debugging-Funktionen "alert()" oder "console.log()" kann mit ZIM die Funktion "zog()" benutzt werden.