SVT Le 1er Parrain

JavaScript
FICHE 19.
Les images
On utilise l'objet Image :

var myImg = new Image();
On peut créer une forme de lightbox :
Head avec le CSS3 :

<html>
<head>
<style type="text/css">
#overlay {
display : none; 
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
text-align: center; 
background-color: rgba(0,0,0,0.6); 
}
#overlay img {
margin-top: 100px;
}
p {
margin-top: 300px;
text-align: center;
}
</style>
</head>
Body :
<body>
<a href="images/circuit_html.jpg" title="Afficher l'image originale"><img
src="images/circuit_html_min.jpg" alt="Miniature" /></a> 
<div id="overlay"></div>
JavaScript
Script :
<script>
var links = document.getElementsByTagName('a'),
linksLen = links.length;
for (var i = 0 ; i < linksLen ; i++) {
links[i].onclick = function() { // Vous pouvez très bien utiliser le DOM-2
displayImg(this); // On appelle notre fonction pour afficher les images et
on lui passe le lien concerné
return false; // Et on bloque la redirection
};
}
function displayImg(link) {
var img = new Image(),
overlay = document.getElementById('overlay');
img.onload = function() {
overlay.innerHTML = '';
overlay.appendChild(img);
};
img.src = link.href;
overlay.style.display = 'block';
overlay.innerHTML = '<span>Chargement en cours...</span>';
}
document.getElementById('overlay').onclick = function() {
this.style.display = 'none';
};
</script>
</body>
</html>
Fiche réalisée d'après le travail de Sébastien de la Marck et Johann Pardanaud (licence CC BY-NC-SA) sur http://www.siteduzero.com/.
par F. Reynaud. 2012.
JavaScript
FICHE 20.
(nécessite un serveur)
AJAX & XMLHttpRequest
20.1. Qu'est-ce que l'AJAX ?

AJAX est l'acronyme d'Asynchronous Javascript and XML, ce qui, transcrit en français, signifie «
Javascript et XML asynchrones ». Derrière ce nom se cache un ensemble de technologies
destinées à réaliser de rapides mises à jour du contenu d'une page Web, sans qu'elles nécessitent
le moindre rechargement visible par l'utilisateur de la page Web. Cela permet par exemple l'auto-
complétion (mots possibles lors d'une recherche) ou encore la sauvegarde automatique.
Plusieurs formats existent pour le transfert de données : un fichier texte, HTML, XML pour de
nombreuses données (eXtensible Markup Language), JSON pour de petits transferts (JavaScript
Object Notation). Pour le texte et le HTML, il n'y a pas de traitement, alors que c'est différent avec
XML et JSON.
XML :
<?xml version="1.0" encoding="utf-8"?>
<table>
<line>
<cel>Ligne 1 - Colonne 1</cel><cel>Ligne 1 - Colonne 2</cel><cel>Ligne 1 - Colonne 3</cel>
</line>
<line>
</line>
<line>
</line>
</table>
Avec en entête : <?php header('Content-type: text/xml'); ?>
JSON :
{
Membre1: {
posts: 6230,
inscription: '22/08/2003'
},
Membre2 {
posts: 200,
inscription: '04/06/2011'
}
}
Avec JSON, on peut utiliser la méthode parse(), qui prend en paramètre la chaîne de
caractères à analyser et retourne le résultat sous forme d'objet JSON, la méthode stringify(),
qui permet de faire l'inverse (elle prend en paramètre un objet JSON et retourne son équivalent
sous forme de chaîne de caractères). Le JSON permet aussi d'envoyer des données
(json_encode() et json_decode() depuis PHP 5.2).
JavaScript
20.2. XMLHttpRequest
On instancie un objet XMLHttpRequest :

var xhr = new XMLHttpRequest();
On prépare la requête avec la méthode open(), qui prend 5 arguments :

Le premier argument contient la méthode d'envoi des données, les trois
méthodes principales sont GET, POST et HEAD.
Le deuxième argument est l'URL à laquelle vous souhaitez soumettre votre
requête, par exemple : 'http://mon_site_web.com'.
Le troisième argument est un booléen facultatif dont la valeur par défaut est
true. À true, la requête sera de type asynchrone, à false elle sera synchrone (la
différence est expliquée plus tard).
Les deux derniers arguments sont à spécifier en cas d'identification
nécessaire sur le site Web (à cause d'un .htaccess par exemple). Le premier
contient le nom de l'utilisateur, tandis que le deuxième contient le mot de passe.
Avec :
xhr.open('GET', 'http://mon_site_web.com/ajax.php');
xhr.send(null);
Avec GET :
var value1 = encodeURIComponent(value1),
value2 = encodeURIComponent(value2);
xhr.open('GET', 'http://mon_site_web.com/ajax.php?param1=' + value1
+ '&param2=' + value2);
Avec POST :
xhr.open('POST', 'http://mon_site_web.com/ajax.php');
xhr.setRequestHeader("Content-Type", "application/x-www-formurlencoded");
xhr.send('param1=' + value1 + '&param2=' + value2);
Pour récupérer des données,

xhr.onreadystatechange = function() {
if (xhr.readyState == xhr.DONE) { // La constante DONE appartient à l'objet
XMLHttpRequest, elle n'est pas globale
// Votre code…
}
};
var xhr = new XMLHttpRequest();

xhr.open('HEAD', 'http://mon_site_web.com/', false);
xhr.send(null);
alert(xhr.getResponseHeader('Content-type')); // Affiche : « text/html;
charset=utf-8 »
JavaScript
FICHE 21.
AJAX : Upload via une frame
Les iframes peuvent être utiles pour l'upload de fichiers.

On crée le frame :
var frame = document.getElementById('myFrame');
frame = frame.contentDocument || frame.document;
On peut charger une iframe en changeant l'URL :
document.getElementById('myFrame').src = 'request.php?nick=Thunderseb';
Avec target et un formulaire :
<form id="myForm" method="post" action="request.php" target="myFrame">
<div>

<input type="submit" value="Envoyer" /> </div> </form>
<iframe src="#" name="myFrame" id="myFrame"></iframe>
On détecte le chargement avec load :
<iframe src="file.html" name="myFrame" id="myFrame" onload="trigger()"></iframe>
<script>
function trigger() {
var frame = document.getElementById('myFrame');
frame = frame.contentDocument || frame.document;
alert(frame.body.textContent);
} </script>
Avec une fonction de callback :

avec dans la page mère :
<iframe src="file.html" name="myFrame"
id="myFrame"></iframe>
<script> et dans l'iframe :
function trigger() {
<script>
var frame =
window.top.window.trigger(); // On
document.getElementById('myFrame');
appelle ici notre fonction de callback
frame = frame.contentDocument ||
</script>
frame.document;
<p>Lorem ipsum dolor sit amet,
alert('Page chargée !');
consectetuer adipiscing elit.<br />
}
Suspendisse molestie suscipit arcu.</p>
</script>
JavaScript
Avec du PHP (nécessite un serveur) :
dans la page HTML : var nick =
document.getElementById("nick").value;
<form id="myForm" method="post" if (nick) { // Si c'est OK
action="request.php" target="myFrame">
document.getElementById("myForm").submit(
<div> ); // On envoie le formulaire
<label for="nick">Votre pseudo :</label> } }
<input type="text" id="nick" function receiveData(data) {
name="nick" />
alert('Votre pseudo est "' + data + '"');
<input type="button" value="Envoyer"
onclick="sendForm();" /> } </script>
</div> dans la page PHP (request.php) :
</form> <script>
<iframe src="#" name="myFrame" window.top.window.receiveData("<?php echo
id="myFrame"></iframe> htmlentities($_POST['nick']); ?>");
<script> </script>
function sendForm() {
Pour créer une interface d'upload :

dans la page HTML :
<form id="uploadForm"
enctype="multipart/form-data"
action="upload.php" target="uploadFrame"
method="post">
<label for="uploadFile">Image :</label> dans la page upload.php :
<input id="uploadFile" name="uploadFile" <?php
type="file" /> $error = NULL;
<br /><br /> $filename = NULL;
<input id="uploadSubmit" type="submit" if (isset($_FILES['uploadFile']) &&
value="Upload !" />
$_FILES['uploadFile']['error'] === 0) {
</form>
$filename = $_FILES['uploadFile']
<div id="uploadInfos"> ['name'];
<div id="uploadStatus">Aucun upload en $targetpath = getcwd() . '/' . $filename;
cours</div> // On stocke le chemin où enregistrer le
<iframe id="uploadFrame" fichier
name="uploadFrame"></iframe> // On déplace le fichier depuis le
</div> répertoire temporaire vers $targetpath
function uploadEnd(error, path) { if
if (error === 'OK') { (@move_uploaded_file($_FILES['uploadFile']
['tmp_name'],
document.getElementById('uploadStatus').i
nnerHTML = '<a $targetpath)) { // Si ça fonctionne
href="' + path + '">Upload done ! $error = 'OK';
</a><br /><br /><a href="' + path + } else { // Si ça ne fonctionne pas
'"><img src="' + path + '" /></a>'; $error = "Échec de l'enregistrement !";
} else { }
document.getElementById('uploadStatus').i } else {
nnerHTML = error; $error = 'Aucun fichier réceptionné !';
} }
} // Et pour finir, on écrit l'appel vers
document.getElementById('uploadForm').add la fonction uploadEnd :
EventListener('submit', ?>
function() { <script>
document.getElementById('uploadStatus').i window.top.window.uploadEnd("<?php echo
nnerHTML = $error; ?>", "<?php echo
'Loading...'; $filename; ?>");
}, true); </script>
JavaScript
FICHE 22.
AJAX : Dynamix Script Loading (DSL)
Par exemple :
dans HTML :
<script>
function sendDSL() {
var scriptElement = document.createElement('script');
scriptElement.src = 'dsl_script.js';
document.body.appendChild(scriptElement);
}
function receiveMessage(message) {
alert(message);
}
</script>
<p><button type="button" onclick="sendDSL()">Exécuter le script</button></p>
et le fichier dsl_script.js :
receiveMessage('Ce message est envoyé par le serveur !');
Ou avec du PHP :
le fichier HTML :
<script>
scriptElement.src = 'dsl_script.php?nick=' + prompt('Quel est votre
pseudo ?');
}
function receiveMessage(message) {
alert(message);
}
</script>
<p><button type="button" onclick="sendDSL()">Exécuter le script</button></p>
le fichier dsl_script.php :
<?php header("Content-type: text/javascript"); ?>
var string = 'Bonjour <?php echo $_GET['nick'] ?> !';
receiveMessage(string);
JavaScript
Ou encore avec JSON :
dans HTML :
<script>
scriptElement.src = 'dsl_script_json.php';
}
function receiveMessage(json) {
var tree = '', nbItems, i;
for (node in json) {
tree += node + "\n";
nbItems = json[node].length;
for (i=0; i<nbItems; i++) {
tree += '\t' + json[node][i] + '\n';
}
}
alert(tree);
}
</script>
<p><button type="button" onclick="sendDSL()">Charger le JSON</button></p>
dans dsl_script_json.php :
<?php
header("Content-type: text/javascript");
echo 'var softwares = {
"Adobe": [
"Acrobat",
"Dreamweaver",
"Photoshop",
"Flash"
],
"Mozilla": [
"Firefox",
"Thunderbird",
"Lightning"
],
"Microsoft": [
"Office",
"Visual C# Express",
"Azure"
]
};';
?>
receiveMessage(softwares);
JavaScript
FICHE 23.
Exemple d'un système d'auto-complétion
(avec towns.txt)
Le fichier PHP (search.php) : count($results) < 10 ; $i++)

{
<?php
if (stripos($data[$i], $_GET['s']) === 0)
$data = { // Si la valeur commence par les mêmes
unserialize(file_get_contents('towns.txt')); / caractères que la recherche
/ Récupération de la liste complète des villes
array_push($results, $data[$i]); // On
$dataLen = count($data); ajoute alors le résultat à la liste à
sort($data); // On trie les villes dans retourner
l'ordre alphabétique }
$results = array(); // Le tableau où }
seront stockés les résultats de la recherche
echo implode('|', $results); // Et on
// La boucle ci-dessous parcourt tout le affiche les résultats séparés par une barre
tableau $data, jusqu'à un maximum de 10 verticale |
résultats
?>
for ($i = 0 ; $i < $dataLen &&
Le fichier HTML :
<!DOCTYPE html> border: 1px solid #AAA;
<html> border-top-width: 0;
<head> background-color: #FFF;
<meta charset="utf-8" /> }
<title>TP : Un système d'auto- #results div {
complétion</title> width: 220px;
<style> padding: 2px 4px;
body { text-align: left;
margin: auto; border: 0;
padding-top: 80px; background-color: #FFF;
width: 300px; }
font-family: sans-serif; #results div:hover, .result_focus {
font-size: 0.8em; background-color: #DDD !important;
background-color: #F5F5F5; }
} </style>
input[type="submit"] { </head>
margin-left: 10px; <body>
width: 50px; height: 26px; <input id="search" type="text"
} autocomplete="off" />
#search { <div id="results"></div>
padding: 2px 4px; <script>
width: 220px; height: 22px; (function() {
border: 1px solid #AAA; var searchElement =
} document.getElementById('search'),
#search:hover, #search:focus { results =
document.getElementById('results'),
border-color: #777;
selectedResult = -1, // Permet de savoir
} quel résultat est sélectionné : -1 signifie «
#results { aucune sélection »
display: none; previousRequest, // On stocke notre
width: 228px; précédente requête dans cette variable
JavaScript
previousValue = searchElement.value;
// On fait de même avec la précédente
valeur
function getResults(keywords) { // searchElement.onkeyup = function(e) {
Effectue une requête et récupère les résultats
e = e || window.event; // On n'oublie pas
var xhr = new XMLHttpRequest(); la compatibilité pour IE
xhr.open('GET', './search.php?s='+ var divs =
encodeURIComponent(keywords)); results.getElementsByTagName('div');
xhr.onreadystatechange = function() { if (e.keyCode == 38 && selectedResult >
if (xhr.readyState == 4 && xhr.status == -1) { // Si la touche pressée est la flèche «
200) { haut »
displayResults(xhr.responseText); divs[selectedResult--].className = '';
} if (selectedResult > -1) { // Cette
}; condition évite une modification de
childNodes[-1], qui n'existe pas, bien entendu
xhr.send(null);
divs[selectedResult].className =
return xhr; 'result_focus';
} }
function displayResults(response) { }
// Affiche les résultats d'une requête else if (e.keyCode == 40 &&
results.style.display = response.length ? selectedResult < divs.length -
'block' : 'none'; 1) { // Si la touche pressée est la
// On cache le conteneur si on n'a pas de flèche « bas »
résultats results.style.display = 'block'; // On
if (response.length) { // On ne modifie affiche les résultats
les résultats que si on en a obtenu if (selectedResult > -1) { // Cette
response = response.split('|'); condition évite une modification de
var responseLen = response.length; childNodes[-1], qui n'existe pas, bien entendu
results.innerHTML = ''; // On vide les divs[selectedResult].className = '';
résultats }
for (var i = 0, div ; i < responseLen ; divs[++selectedResult].className =
i++) { 'result_focus';
div = }
results.appendChild(document.createElemen else if (e.keyCode == 13 &&
t('div')); selectedResult > -1) { // Si la touche pressée
div.innerHTML = response[i]; est « Entrée »
div.onclick = function() { chooseResult(divs[selectedResult]);
chooseResult(this); }
}; else if (searchElement.value !=
previousValue) { // Si le contenu du champ de
}
recherche a changé
}
previousValue = searchElement.value;
}
if (previousRequest &&
function chooseResult(result) { // previousRequest.readyState < 4) {
Choisit un des résultats d'une requête et gère
previousRequest.abort(); // Si on a
tout ce qui y est attaché
toujours une requête en cours, on l'arrête
searchElement.value = previousValue =
}
result.innerHTML; // On change le contenu du
champ de recherche et on enregistre en tant previousRequest =
que précédente valeur getResults(previousValue); // On stocke la
nouvelle requête
results.style.display = 'none'; // On
cache les résultats selectedResult = -1; // On remet la
sélection à zéro à chaque caractère écrit
result.className = ''; // On supprime
l'effet de focus }
selectedResult = -1; // On remet la };
sélection à zéro })();
searchElement.focus(); // Si le résultat </script>
a été choisi par le biais d'un clic, alors le </body>
focus est perdu, donc on le réattribue
</html>
}
JavaScript
FICHE 24.
L'élément Canvas (1/2)
Avec <canvas>
Par exemple un rectangle doré et un bleu, <script>

avec un effacement : var canvas =
document.querySelector('#canvas');
<!DOCTYPE html>
var context =
<html> canvas.getContext('2d');
<head> context.lineWidth = "3";
<title>CANVAS</title> context.strockStyle = "gold";
<meta charset="utf-8" /> context.strockRect(50, 35, 50, 80);
</head> context.fillStyle = "rgba(23, 145,
<body> 167, 0.5)";
<canvas id="canvas" width="150" context.fillRect(40, 25, 40, 40);
height="150"> context.clearRect(45, 40, 30, 10);
<p>Désolé, votre navigateur ne </script>
supporte pas Canvas. Mettez-vous à
</body>
jour</p>
</html>
</canvas>
On peut créer des rectangles, des arcs, context.moveTo(20, 20); // 1er point
mais aussi des chemins et courbes de Béziers : context.lineTo(130, 20); // 2e point
context.lineTo(130, 50); // 3e
<script>
var canvas =
document.querySelector('#canvas'); context.lineTo(20, 50); // 5e
var context = context.closePath(); // On relie le
canvas.getContext('2d'); 5e au 1er
context.strokeStyle = "rgb(23, 145, context.stroke();
167)"; </script>
context.beginPath();
Un smiley avec la méthode arc (x, y, rayon, un arc de cercle

angleDepart, angleFin, sensInverse) : context.arc(75, 75, 40, 0, Math.PI);
// Ici aussi
<script>
context.fill();
var canvas =
context.beginPath(); // L'oeil gauche
context.arc(55, 70, 20, (Math.PI /
var context =
180) * 220, (Math.PI / 180) * 320);
canvas.getContext('2d');
context.stroke();
context.beginPath(); // Le cercle
extérieur context.beginPath(); // L'oeil droit
context.arc(75, 75, 50, 0, Math.PI * context.arc(95, 70, 20, (Math.PI /
2); // Ici le calcul est simplifié 180) * 220, (Math.PI / 180) * 320);
context.stroke(); context.stroke();
context.beginPath(); // La bouche, </script>
JavaScript
Un triangle rempli de rouge :
<script>
var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');
context.fillStyle = "#990000";
context.moveTo(20, 20); // 1er point
context.lineTo(500, 100); // 2e point
context.closePath(); // On relie le 3e au 1er
context.fill();
</script>
Le logo JavaScript avec des courbes de Béziers :
<script>
context.moveTo(131, 119);
context.bezierCurveTo(131, 126, 126, 131, 119, 131);
context.lineTo(30, 131);
context.closePath();
context.fillStyle = "rgb(23, 145, 167)";
context.fill();
context.font = "68px Calibri,Geneva,Arial";
context.fillStyle = "white";
context.fillText("js", 84, 115);
</script>
On peut intégrer une image :
<script>
var circuit = new Image();
circuit.src = 'images/circuit_html.jpg';
circuit.onload = function() {
context.drawImage(circuit, 35, 35);
}
</script>
On peut intégrer du texte :
<script>
context.fillStyle = "rgba(23, 145, 167, 1)";
context.fillRect(50, 50, 50, 50);
context.font = "bold 22pt Calibri,Geneva,Arial";
context.fillStyle = "#fff";
context.fillText("js", 78, 92);
</script>
JavaScript
FICHE 25.
L'élément Canvas (2/2)
Les extrémités des chemins peuvent être butt (par défaut, droites), round (arrondies)
ou square (avec un carré qui dépasse de chaque côté).
lineJoin permet de gérer les intersections, avec round, bevel ou mitter.
Pour un dégradé, on crée un objet canvasGradient (avec createLinearGradient()
ou createRadialGradient()), auquel on affile fillStyle.
var linear = context.createLinearGradient(0, 0, 0, 150);
linear.addColorStop(0, 'white');
linear.addColorStop(1, '#1791a7');
context.fillStyle = linear;
Avec un exemple :
<script>
var linear = context.createLinearGradient(0, 0, 0, 150);
linear.addColorStop(0.5, '#1791a7');
linear.addColorStop(0.5, 'orange');
context.fillStyle = linear;
context.fillRect(10, 10, 130, 130); </script>
Ou :
var radial = context.createRadialGradient(75, 75, 0, 130, 130, 150);
radial.addColorStop(0, '#1791a7');
radial.addColorStop(1, 'white');
context.fillStyle = radial;
Ou (avec des bulles) : radial2.addColorStop(1,

'rgba(245,160,6,0)');
<script> var radial3 =
var canvas = context.createRadialGradient(105, 105,
document.querySelector('#canvas'); 20, 112, 120, 50); // bulle turquoise
var context = radial3.addColorStop(0, '#86cad2');
canvas.getContext('2d'); radial3.addColorStop(0.9, '#61aeb6');
var radial1 = radial3.addColorStop(1,
context.createRadialGradient(0, 0, 10, 'rgba(159,209,216,0)');
100, 20, 150); // fond
context.fillStyle = radial1;
radial1.addColorStop(0, '#ddf5f9');
radial1.addColorStop(1, '#ffffff');
context.fillStyle = radial2;
var radial2 =
context.createRadialGradient(75, 75, 10, context.fillRect(10, 10, 130, 130);
82, 70, 30); // bulle orange context.fillStyle = radial3;
radial2.addColorStop(0, '#ffc55c'); context.fillRect(10, 10, 130, 130);
radial2.addColorStop(0.9, '#ffa500'); </script>
JavaScript
On restaure l'état pour revenir aux context.save();
context.translate(40, 40);
coordonnées 0 du plan :
context.fillStyle = "teal";
<script>
var canvas =
context.restore();
context.fillStyle = "orange";
var context =
canvas.getContext('2d'); context.fillRect(0, 0, 50, 50);
</script>
On exerce une rotation : context.fillStyle = "orange";

context.rotate(Math.PI / 2);
<script>
var canvas =
document.querySelector('#canvas'); context.fillStyle = "teal";
var context = context.rotate(Math.PI / 2);
canvas.getContext('2d'); context.fillRect(0, 0, 50, 50);
context.translate(75,75); context.fillStyle = "orange";
context.fillStyle = "teal"; context.rotate(Math.PI / 2);
context.rotate((Math.PI / 180) * 45); context.fillRect(0, 0, 50, 50);
context.fillRect(0, 0, 50, 50); </script>
On crée une animation : context.fillStyle = "teal";

context.rotate((Math.PI / 180) * (45
<script> + angle)); // ne pas oublier le décalage
window.requestAnimFrame = context.fillRect(0, 0, 50, 50);
(function(){
context.fillStyle = "orange";
return window.requestAnimationFrame
|| // La forme standardisée context.rotate(Math.PI / 2);
window.webkitRequestAnimationFrame || context.fillRect(0, 0, 50, 50);
// Pour Chrome et Safari context.fillStyle = "teal";
window.mozRequestAnimationFrame || context.rotate(Math.PI / 2);
// Pour Firefox context.fillRect(0, 0, 50, 50);
window.oRequestAnimationFrame || context.fillStyle = "orange";
// Pour Opera
context.rotate(Math.PI / 2);
window.msRequestAnimationFrame ||
// Pour Internet Explorer
context.restore();
function(callback){
// Pour les mauvais angle = angle + 2; // on augmente le
décalage
window.setTimeout(callback, 1000 /
60); if (angle >= 360) angle = 0; // on
remet le décalage à 0, puisqu'on a fait
};
le tour du cercle
})();
window.requestAnimFrame(function()
window.onload = function() { { draw(angle) });
var canvas = }
draw(0); // premier appel
var context =
};
canvas.getContext('2d');
</script>
function draw(angle) {
context.save(); Avec l'élément Canvas, on peut créer des
context.clearRect(0, 0, 150, 150); jeux, comme des RPG (à voir sur le site
context.translate(75,75); http://rpgjs.com/wiki/)
JavaScript
FICHE 26.
L'API File
L'API File permet de récupérer le nom d'un fichier sur l'ordinateur de l'usager :
<input id="file" type="file" multiple />
<script>
document.querySelector('#file').onchange = function() {
alert(this.files[0].name);
};
</script>
L'API File permet de lire le contenu d'un fichier .txt :

<input id="file" type="file" />
<script>
var fileInput = document.querySelector('#file');
fileInput.onchange = function() {
var reader = new FileReader();
reader.onload = function() {
alert('Contenu du fichier "' + fileInput.files[0].name +
'":\n\n' + reader.result);
};
reader.readAsText(fileInput.files[0]);
};
</script>
JavaScript
L'API File permet de sélectionner et prévisualiser des images (avant upload) :

<input id="file" type="file" multiple />
<div id="prev"></div>
<script>
(function() {
function createThumbnail(file) {
var reader = new FileReader();
reader.onload = function() {
var imgElement = document.createElement('img');
imgElement.style.maxWidth = '150px';
imgElement.style.maxHeight = '150px';
imgElement.src = this.result;
prev.appendChild(imgElement);
};
reader.readAsDataURL(file);
}
var allowedTypes = ['png', 'jpg', 'jpeg', 'gif'],
fileInput = document.querySelector('#file'),
prev = document.querySelector('#prev');
fileInput.onchange = function() {
var files = this.files,
filesLen = files.length,
imgType;
for (var i = 0 ; i < filesLen ; i++) {
imgType = files[i].name.split('.');
imgType = imgType[imgType.length - 1];
if(allowedTypes.indexOf(imgType) != -1) {
createThumbnail(files[i]);
}
}
};
})();
</script>
JavaScript
FICHE 27.
Drag & Drop
Cet outil permet un déplacement d'objets dans la page HTML :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Drag & Drop</title>
<style> .draggable {
.dropper { display: inline-block;
margin: 50px 10px 10px 50px; margin: 20px 10px 10px 20px;
width: 400px; padding-top: 20px;
height: 250px; width: 80px;
background-color: #555; height: 60px;
border: 1px solid #111; color: #3D110F;
-moz-border-radius: 10px; background-color: #822520;
border-radius: 10px; border: 4px solid #3D110F;
-moz-transition: all 200ms linear; text-align: center;
-webkit-transition: all 200ms linear; font-size: 2em;
-o-transition: all 200ms linear; cursor: move;
transition: all 200ms linear; -moz-transition: all 200ms linear;
} -webkit-transition: all 200ms linear;
.drop_hover { -o-transition: all 200ms linear;
-moz-box-shadow: 0 0 30px rgba(0, 0, transition: all 200ms linear;
0, 0.8) inset; -moz-user-select: none;
box-shadow: 0 0 30px rgba(0, 0, 0, -khtml-user-select: none;
0.8) inset;
-webkit-user-select: none;
}
user-select: none;
}
</style>
</head>
<body>
<div class="dropper">
<div class="draggable">#1</div>
</div>
<div class="dropper">
</div>
<script>
(function() {
var dndHandler = {
draggedElement: null, // Propriété pointant vers l'élément en cours de déplacement
applyDragEvents: function(element) {
element.draggable = true;
var dndHandler = this; // Cette variable est nécessaire pour que l'événement "dragstart" ci-
dessous accède facilement au namespace "dndHandler"
element.addEventListener('dragstart', function(e) {
dndHandler.draggedElement = e.target; // On sauvegarde l'élément en déplacement
e.dataTransfer.setData('text/plain', ''); // Nécessaire pour Firefox
}, false); },
JavaScript
applyDropEvents: function(dropper) {
dropper.addEventListener('dragover', function(e) {
e.preventDefault(); // On autorise le drop d'éléments
this.className = 'dropper drop_hover'; // Et on applique le design
adéquat à notre zone de drop quand un élément la survole
}, false);
dropper.addEventListener('dragleave', function() {
this.className = 'dropper'; // On revient au design de base lorsque l'élément
quitte la zone de drop
});
var dndHandler = this; // Cette variable est nécessaire pour que l'événement "drop"
ci-dessous accède facilement au namespace "dndHandler"
dropper.addEventListener('drop', function(e) {
var target = e.target,
draggedElement = dndHandler.draggedElement, // Récupération de l'élément concerné
clonedElement = draggedElement.cloneNode(true); // On créé immédiatement le
clone de cet élément
while(target.className.indexOf('dropper') == -1) { // Cette boucle permet de
remonter jusqu'à la zone de drop parente
target = target.parentNode;
}
target.className = 'dropper'; // Application du design par défaut
clonedElement = target.appendChild(clonedElement); // Ajout de l'élément cloné
à la zone de drop actuelle
dndHandler.applyDragEvents(clonedElement); // Nouvelle application des
événements qui ont été perdus lors du cloneNode()
draggedElement.parentNode.removeChild(draggedElement); // Suppression de
l'élément d'origine
});
}
};
var elements = document.querySelectorAll('.draggable'),
elementsLen = elements.length;
for(var i = 0 ; i < elementsLen ; i++) {
dndHandler.applyDragEvents(elements[i]); // Application des paramètres
nécessaires aux élément déplaçables
}
var droppers = document.querySelectorAll('.dropper'),
droppersLen = droppers.length;
for(var i = 0 ; i < droppersLen ; i++) {
dndHandler.applyDropEvents(droppers[i]); // Application des événements
nécessaires aux zones de drop
}
})();
</script>
</body>
</html>

SVT Le 1er Parrain

Transféré par

Droits d'auteur :

Formats disponibles

SVT Le 1er Parrain

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

SVT Le 1er Parrain

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript

On utilise l'objet Image :

On peut créer une forme de lightbox :

Head avec le CSS3 :

20.1. Qu'est-ce que l'AJAX ?

On instancie un objet XMLHttpRequest :

On prépare la requête avec la méthode open(), qui prend 5 arguments :

Pour récupérer des données,

var xhr = new XMLHttpRequest();

Les iframes peuvent être utiles pour l'upload de fichiers.

Avec une fonction de callback :

Pour créer une interface d'upload :

Le fichier PHP (search.php) : count($results) < 10 ; $i++)

Par exemple un rectangle doré et un bleu, <script>

Un smiley avec la méthode arc (x, y, rayon, un arc de cercle

Ou (avec des bulles) : radial2.addColorStop(1,

On exerce une rotation : context.fillStyle = "orange";

On crée une animation : context.fillStyle = "teal";

L'API File permet de lire le contenu d'un fichier .txt :

L'API File permet de sélectionner et prévisualiser des images (avant upload) :

Cet outil permet un déplacement d'objets dans la page HTML :

Vous aimerez peut-être aussi