NathaTerrien/20141007_JS_Exercice2.htm

## 20141007_JS_Exercice2.htm
<!DOCTYPE html>
<html>
<head>
	<title>Exercice - Promises</title>
	<meta charset="utf-8" />
	<style>
		#asynchronous-animation {
			width: 100px;
			height: 80px;
			padding: 5px;
			color: white;
			background-color: red;
		}
    </style>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function() {
			$("#go").on("click", function (e) {
				var promiseAnimation = $("#asynchronous-animation").animate({ "marginLeft": 500 }, 3000).promise(),
					promiseDigit = (function () {
						var dfd = $.Deferred();

						setTimeout(function () {
							var success = Math.round(Math.random()), // 0 ou 1
								digit = Math.round(Math.random() * 10);

							if (success) {
								dfd.resolve(digit);
							} else {
								dfd.reject("Nombre de merde !");
							}
						}, 2000);

						return dfd.promise();
					})(),
					promiseAjax = $.ajax({
						"url": "http://odata.sentiweb.fr/Sentinelles.svc/INDICATOR%28ID=%270I%27%29",
						"dataType": 'json'
					});

				/* VOTRE CODE ICI */
				$.when(promiseDigit, promiseAjax,promiseAnimation).done(
					// réussite
					function (digitParams, ajaxParams,animParams) {
							$("#resultajax").html(ajaxParams);
							$("#resultatdigit").html(digitParams);
				    })
					.fail(
						function (digitParams,ajaxParams,animParams){
							$("#resultajax").html("Erreur ? " + ajaxParams);
				    		$("#resultatdigit").html("Erreur ? " + digitParams);
				    })
				    ;

			});

			$("#reset").on("click", function (e) {
				$("#asynchronous-animation").stop().css("marginLeft", 0);
			});
        });
    </script>
</head>
<body>
	<div id="explanations">
		<h1>Exercice:&nbsp;Promises</h1>
		<p>Au chargement de la page sont lancés de manière asynchrone:</p>
		<ul>
			<li>Une méthode qui renvoie un chiffre aléatoirement, mais qui plante une fois sur trois (promiseDigit).</li>
			<li>Une animation qui dure trois secondes (promiseAnimation).</li>
			<li>Une requête Ajax d'une durée indéterminée (promiseAjax).</li>
		</ul>
		<p>Affichez dans l'élément "#result" le résultat des différentes opérations, une fois que l'ensemble de celles-ci se sont terminées.</p>
	</div>
	<hr />
	<div id="exercice">
		<button id="go" type="button">GO!</button><br />
		<button id="reset" type="button">Reset</button><br />
		<br />
		<div id="asynchronous-animation">Je m'anime</div>
		<hr />
		<p>Résultat:</p>
		<div id="result">
			<p>Contenu de la requête Ajax:</p>
			<div id="resultajax"></div>
			<p>Chiffre tiré aléatoirement:</p>
			<div id="resultatdigit"></div>
		</div>
	</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Exercice - Promises</title>
	<meta charset="utf-8" />
	<style>
	#asynchronous-animation {
	width: 100px;
	height: 80px;
	padding: 5px;
	color: white;
	background-color: red;
	}
	</style>
	<script src="jquery.js"></script>
	<script>
	$(document).ready(function() {
	$("#go").on("click", function (e) {
	var promiseAnimation = $("#asynchronous-animation").animate({ "marginLeft": 500 }, 3000).promise(),
	promiseDigit = (function () {
	var dfd = $.Deferred();

	setTimeout(function () {
	var success = Math.round(Math.random()), // 0 ou 1
	digit = Math.round(Math.random() * 10);

	if (success) {
	dfd.resolve(digit);
	} else {
	dfd.reject("Nombre de merde !");
	}
	}, 2000);

	return dfd.promise();
	})(),
	promiseAjax = $.ajax({
	"url": "http://odata.sentiweb.fr/Sentinelles.svc/INDICATOR%28ID=%270I%27%29",
	"dataType": 'json'
	});

	/* VOTRE CODE ICI */
	$.when(promiseDigit, promiseAjax,promiseAnimation).done(
	// réussite
	function (digitParams, ajaxParams,animParams) {
	$("#resultajax").html(ajaxParams);
	$("#resultatdigit").html(digitParams);
	})
	.fail(
	function (digitParams,ajaxParams,animParams){
	$("#resultajax").html("Erreur ? " + ajaxParams);
	$("#resultatdigit").html("Erreur ? " + digitParams);
	})
	;

	});

	$("#reset").on("click", function (e) {
	$("#asynchronous-animation").stop().css("marginLeft", 0);
	});
	});
	</script>
	</head>
	<body>
	<div id="explanations">
	<h1>Exercice: Promises</h1>
	<p>Au chargement de la page sont lancés de manière asynchrone:</p>
	<ul>
	<li>Une méthode qui renvoie un chiffre aléatoirement, mais qui plante une fois sur trois (promiseDigit).</li>
	<li>Une animation qui dure trois secondes (promiseAnimation).</li>
	<li>Une requête Ajax d'une durée indéterminée (promiseAjax).</li>
	</ul>
	<p>Affichez dans l'élément "#result" le résultat des différentes opérations, une fois que l'ensemble de celles-ci se sont terminées.</p>
	</div>
	<hr />
	<div id="exercice">
	<button id="go" type="button">GO!</button><br />
	<button id="reset" type="button">Reset</button><br />
	<br />
	<div id="asynchronous-animation">Je m'anime</div>
	<hr />
	<p>Résultat:</p>
	<div id="result">
	<p>Contenu de la requête Ajax:</p>
	<div id="resultajax"></div>
	<p>Chiffre tiré aléatoirement:</p>
	<div id="resultatdigit"></div>
	</div>
	</div>
	</body>
	</html>