Menu général| Fermer X |


 
1614 mots clé par thème et par ordre alphabétique pour faciliter vos recherches,

HTML (231)
2w,
ASCII 7 bits,
DTD,
Quicktime,
Real Player,
VLC Media Player,
Winamp,
Windows Media,
a,
abrr,
accesskey,
acronym,
adresse,
aif,
aiff,
alt,
ancre,
apple,
area,
article,
aside,
audio,
autobuffer,
autoplay,
avi,
axis,
b,
balise,
barré,
basefont,
bgsound,
big,
bloc,
blockquote,
body,
br,
caption,
caracteres,
caractères spéciaux,
cellule,
center,
challenge,
cite,
col,
colgroup,
color,
colspan,
commentaire,
condition,
conditionnel,
contenteditable,
controls,
coords,
custom data attributes,
data-,
datatemplate,
date,
datetime,
datetime-local,
dd,
del,
details,
div,
dl,
dns,
doctype,
domaine,
dt,
e-mail,
em,
email,
embed,
en ligne,
explorer,
favicon,
fieldset,
figcaption,
figure,
filter,
font,
footer,
for,
form,
formulaire,
frame,
frameset,
ftp,
h1,
head,
header,
headers,
hr,
href,
html,
html5,
hypertexte,
i,
icon,
icone,
if ie,
iframe,
image map,
img,
input,
ins,
internet,
ip,
jauge,
keygen,
keyparams,
keytype,
label,
language,
legend,
li,
lien,
link,
liste,
longdesc,
loop,
mail,
mailto,
map,
mark,
max,
mdi,
menu contextuel,
menu,
menuitem,
meta,
meter,
midi,
mime,
min,
mode,
mov,
mp3,
mpeg,
mpg,
name,
nav,
navigateur,
nest,
noframes,
nohref,
note,
number,
object,
ogg,
ol,
open,
optgroup,
option,
output,
p,
pattern,
placeholder,
plug in,
plugin,
pre,
preload,
progress,
protocole,
pubdate,
quizz,
ra,
ram,
range,
requiered,
rm,
rowspan,
rp,
rpm,
rt,
ruby,
rule,
s,
scope,
script,
search,
section,
select,
serveur,
shape,
site,
span,
spellcheck,
src,
step,
strict,
strike,
strong,
style,
sub,
summary,
sup,
swf,
table,
tableau,
tbody,
td,
tel,
telnet,
template,
textarea,
tfoot,
th,
thead,
time,
title,
titre,
tr,
transitional,
tt,
type mime,
u,
ul,
url,
usemap,
usenet,
validation,
validator,
vidéo,
vorbis,
w3c,
wav,
wave,
wbr,
webclick,
wmv,
www,
CSS (385)
%,
@import,
@keyframes,
@page,
Box-shadow,
Hexa,
RGB,
Text-shadow,
absolute,
active,
add,
affichage,
after,
alignement texte,
all,
alpha,
always,
animation,
animation-delay,
animation-direction,
animation-duration,
animation-fill-mode,
animation-iteration-count,
animation-name,
animation-play-state,
animation-timing-function,
arrière plan,
arrondi,
at,
attr,
attribut,
aural,
auto,
avoid,
backface-visibility,
background,
background-attachment,
background-clip,
background-color,
background-image,
background-origin,
background-position,
background-repeat,
background-size,
backwards,
balance,
baseline,
before,
bezier,
block,
blur,
border,
border-bottom-color,
border-bottom-style,
border-bottom-width,
border-box,
border-left-color,
border-left-style,
border-left-width,
border-radius,
border-right-color,
border-right-style,
border-right-width,
border-style,
border-top-color,
border-top-style,
border-top-width,
border-width,
bordure colonne,
bordure tableau,
both,
bottom,
bouton,
box-sizing,
braille,
brightness,
capitalize,
caption,
caption-side,
case à cocher,
cell,
center,
centrage,
centrer,
checkbox,
chroma,
circle,
class,
clear,
clip,
close-quote,
closest-corner,
closest-side,
coin,
col,
colgroup,
collapse,
colonnes multiples,
color,
column-count,
column-fill,
column-gap,
column-rule,
column-rule-color,
column-rule-style,
column-rule-width,
column-span,
column-width,
columns,
compact,
compteur,
contain,
content,
content-box,
contrast,
couleur,
countent,
counter-increment,
counter-reset,
cover,
crosshair,
cubic,
cubic-bezier,
cursor,
dashed,
decimal leading,
decimal,
default,
dimensionnement,
direction,
disc,
display,
dotted,
double,
drop-shadow,
dropshadow,
dynamiques,
e-resize,
ease,
ease-in,
ease-in-out,
ease-out,
ellipse,
ellipsis,
em,
embossed,
empty,
ex,
farthest-corner,
farthest-side,
filter,
filtre,
finishopacity,
finishx,
finishy,
first-letter,
first-line,
fixed,
flat,
fliph,
flipv,
float,
flux,
focus,
font,
font-family,
font-size,
font-stretch,
font-variant,
font-weight,
formulaire,
forwards,
freq,
from,
glow,
gradient,
gray,
grayscale,
groove,
générateur,
handheld,
height,
help,
hexa,
hidden,
horizontal,
hover,
href,
html5,
hue-rotate,
id,
image,
images,
inherit,
inline,
inline-block,
input[type=checkbox],
inset,
inside,
invert,
justify,
keyframes,
landscape,
left,
letter-spacing,
light,
line-height,
linear,
linear-gradient,
link,
list-item,
list-style,
list-style-image,
list-style-position,
list-style-type,
liste,
lower-alpha,
lower-greek,
lower-roman,
lowercase,
margin,
margin-bottom,
margin-left,
margin-right,
margin-top,
marker,
marks,
mask,
matrix,
matrix3d,
media,
medium,
menus,
middle,
move,
n-resize,
ne-resize,
no-repeat,
none,
normal,
nowrap,
nw-resize,
offx,
offy,
ombre,
opacity,
open-quote,
origin,
orpheans,
outset,
outside,
overflow,
padding-box,
page-break-after,
page-break-before,
paused,
perspective,
perspective-origin,
phase,
pixel,
pointer,
portrait,
position,
positive,
preserve-3d,
print,
progress,
projection,
pseudo classes,
pseudo éléments,
px,
quizz,
quote,
radial-gradient,
radio,
redimensionnement,
rel,
relative,
repeat,
repeat-x,
repeat-y,
repeating,
resize,
rgb,
rgba,
ridge,
right,
rollover,
rotate,
rotate3D,
rotateX,
rotateY,
rotateZ,
rotation,
run-in,
running,
s-resize,
saturate,
scale,
scale3d,
screen,
scroll,
se-resize,
sepia,
shadow,
site,
size,
skew,
solid,
spacing,
span,
square,
startx,
starty,
static,
step,
steps,
strength,
style curseur,
style tableau,
style texte,
style,
stylesheet,
sub,
super,
survol,
sw-resize,
text,
text-align,
text-bottom,
text-decoration,
text-indent,
text-shadow,
text-top,
text-transform,
text/css,
texte,
thick,
thin,
to bottom,
to left,
to right,
to top,
to,
top,
transform,
transform-style,
transition,
transition-delay,
transition-duration,
transition-property,
transition-timing-function,
translate,
translate3d,
translateX,
translateY,
translateZ,
translation,
transparence,
transparent,
tty,
tv,
type,
unicode-bidi,
upper-alpha,
upper-roman,
uppercase,
url(images),
variantes,
vertical,
vertical-align,
vide,
visibility,
visibilité,
visible,
visited,
w-resize,
wait,
wave,
white-space,
widows,
width,
word-spacing,
xray,
z-index,
DOM (253)
::after,
::before,
DOM,
HTMLDocument,
InnerHTML,
URL,
URLUnencoded,
action,
alert(),
appCodeName,
appVersion,
appendChild,
appname,
attributes[],
availHeight,
availWidth,
back(),
back,
background,
backgroundAttachment,
backgroundColor,
backgroundImage,
backgroundPosition,
backgroundRepeat,
boite dialogue,
border,
borderBottomColor,
borderBottomStyle,
borderBottomWidth,
borderCollapse,
borderColor,
borderLeftColor,
borderLeftStyle,
borderLeftWidth,
borderRightColor,
borderRightStyle,
borderRightWidth,
borderSpacing,
borderStyle,
borderTopColor,
borderTopStyle,
borderTopWidth,
borderWidth,
captionSide,
channelmode,
childNodes[i],
classList,
className,
clear,
clearIntervall(),
clearTimeout(),
clientHeight,
clientWidth,
clip,
clone,
cloneNode,
close(),
close,
closed,
color,
colorDepth,
compilateur,
confirm(),
cookie,
createElement,
création,
cssText,
cursor,
description,
dimension,
direction,
display,
document.getElementById,
domain,
dupliquer,
emptyCells,
enabledPlugin.name,
encoding,
enfant,
exécutable,
fenêtre,
fileName,
firstChild,
firstChild.nextSibling,
float,
focus,
font,
fontFamily,
fontSize,
fontStretch,
fontStyle,
fontVariant,
fontWeight,
forms,
forward(),
forward,
fullscreen,
getAttribute(),
getComputedStyle,
getElementById,
getElementsByName,
getPropertyValue,
go(),
go,
hasChildNodes(),
hash,
height,
history,
host,
hostName,
href,
id,
images,
innerHeight,
innerWidth,
javascript,
langage,
language,
lastChild.previousSibling,
lastModified,
left,
lenght,
length,
letterSpacing,
lineHeight,
listStyle,
listStyleImage,
listStylePosition,
listStyleType,
location,
margin,
marginBottom,
marginLeft,
marginRight,
marginTop,
maxHeight,
maxWidth,
menubar,
method,
mimeType,
minHeight,
minWidth,
minuterie,
moveBy,
moveTo,
méthode,
name,
navigateur,
navigator,
next,
nodeName,
nodeType,
noeud,
objet window,
objet,
offsetHight,
offsetWidt,
open(),
open,
opener,
outerHTML,
outerHeight,
outerWidth,
overflow,
padding,
paddingBottom,
paddingLeft,
paddingRight,
paddingTop,
pageBreakAfter,
pageBreakBefore,
pageXOffset,
pageyOffset,
parent,
parentNode,
pathName,
php,
pixelDepth,
platform,
pop up,
pop-up,
popup,
port,
position,
previous,
prompt(),
protocol,
pugins,
querySelector(),
querySelectorAll(),
quizz,
referrer,
reload(),
reload,
removeChild,
replace(),
replace,
reset(),
resizable,
resizeBy,
resizeTo,
right,
screen,
screenLeft,
screenTop,
screenX,
screenY,
script,
scrollBy,
scrollHeight,
scrollLeft,
scrollTo,
scrollTop,
scrollWidth,
scrollbar3dLightColor,
scrollbarArrowColor,
scrollbarBaseColor,
scrollbarDarkshadowColor,
scrollbarFaceColor,
scrollbarHighlightColor,
scrollbarShadowColor,
scrollbarTrackColor,
scrollbars,
search,
setAttribute(),
setIntervall(),
setTimeout(),
status,
style,
submit(),
suffixes,
taille,
target,
textAlign,
textContent,
textDecoration,
textIndent,
textOverflow,
textTransform,
timer,
title,
toolbar,
top,
type,
userAgent,
verticalAlign,
visibility,
width,
window,
wordSpacing,
write,
zIndex,
écran,
JavaScript (465)
!,
!=,
!==,
$,
%,
&&,
*,
++,
+,
+=,
,
-,
--,
.,
.=,
/,
<,
<=,
=,
==,
===,
>,
>=,
?,
A,
B,
Custom Data Attributes,
D,
DocumentTouch,
FileReader(),
G,
JSGF,
Leaflet,
Math.LN10,
Math.LN2,
Math.LOG10E,
Math.LOG2E,
Math.PI,
Math.SQRT1_2,
Math.SQRT2,
Math.abs(),
Math.acos(),
Math.asin(),
Math.atan(),
Math.atan2(),
Math.ceil(),
Math.cos(),
Math.exp(),
Math.floor(),
Math.log(),
Math.max(),
Math.min(),
Math.pow(),
Math.random(),
Math.round(),
Math.sin(),
Math.sqrt(),
Math.tan(),
OSI,
RangeError,
ReferenceError,
RegExp,
RemoveDoublons(),
S,
SpeechGrammar,
SpeechGrammarList,
SpeechRecognitionError,
SyntaxError,
TTS,
Text To Speech,
TypeError,
URIError,
W,
WebVTT,
XMLHttpRequest,
Z,
[ ],
^,
abort(),
abort,
action,
add,
addElement,
addEventListener,
altKey,
anchor(),
animation,
animationend,
animationiteration,
animationstart,
anonimous,
anonyme,
api,
appendChild,
arguments,
array(),
assignement,
attachEvent,
barre progression,
bgsound,
big(),
binaire,
blink(),
blob,
blur,
bold(),
boucle,
bouillonnement,
break,
button,
calculatrice,
calendrier,
callback,
cancel,
cancelBubble,
canvas,
capture,
caractères,
cartographie,
case,
catch,
centrage,
chaine caractères,
chaines,
change,
changedTouches,
charAt(),
charCodeAt(),
cible,
classe,
clavier,
clearData,
click,
client,
clientHeight,
clientWidth,
clientX,
clientY,
cloneNode,
closure,
code,
coller,
columnNumber,
command,
commentaires,
concat(),
condition,
continue,
converSeconde(),
conversion,
cookies,
copyLink,
copyMove,
couche,
createElement,
crossorigin,
ctrlKey,
cue,
currentTarget,
d,
dataTransfert,
dataset,
date,
dblclick,
decodeURI,
decodeURIComponent,
delete,
detachEvent,
detail,
diffusion,
dimension,
do,
domain,
double click,
doublons,
dragenter,
draggable,
dragleave,
dragover,
drop,
dropEffect,
décimal,
effectAllowed,
elapsedTime,
else,
embed,
encodage URL,
encodeURI,
encodeURIComponent,
enctype,
erreur,
error,
espace,
eval(),
event,
evènement,
exec(),
expires,
expression régulières,
fichier,
fieldset,
fileName,
fixed(),
focus,
fonction,
fontcolor(),
fontsize,
for in,
for,
form,
formulaires,
fromCharCode(),
function,
functions,
geocoder,
get,
getAttribute,
getData,
getDate(),
getDay(),
getFullYear(),
getHours(),
getMilliseconds(),
getMinutes(),
getModifierState(),
getMonth(),
getResponseHeader(),
getSeconds(),
getTime(),
getTimezoneOffset(),
getYear(),
getvoices,
glisser,
google map,
google,
grammars,
height,
hexa,
horloge,
html5,
htmlFor,
identifier,
if,
image sur curseur,
image,
imbrication,
impair,
in,
indexOf(),
innerHeight,
innerWidth,
input,
instance,
instanceof,
integrity,
interimResults,
isNan,
isfinite,
italics,
jauge,
join(),
json,
key,
keyboard,
keydown,
keypress,
keyup,
kind,
label,
lastIndexOf(),
lecteur vidéo,
legend,
length,
lineNumber,
linkMove,
linl(),
load,
longueur,
map,
marker,
match(),
max,
maxAlternatives,
menu contextuel,
message,
method,
mime,
mousedown,
mousemove,
mouseout,
mouseover,
mouseup,
move,
méthodes,
name,
new,
nomage,
nombre aléatoire,
noms,
object,
objet,
offsetLeft,
offsetParent,
offsetTop,
onboundary,
onend,
onerror,
onmark,
onnomatch,
onreadystatechange(),
onresult,
onresume,
open(),
options,
opérateurs,
ou,
pageX,
pageY,
pair,
paramètres url,
parse,
parseFloat(),
parseInt(),
path,
paused,
pending,
pitch,
pop(),
position,
post,
preventDefault,
procédures,
progress,
prototypes,
push(),
put,
quizz,
rate,
readAsArrayBuffer(),
readAsBinaryString(),
readAsDataURL(),
readAsText(),
reader,
readyState(),
reconnaissance vocale,
remove,
removeAttribute,
removeEventListener,
repeat,
replace(),
reset,
resize,
responseText(),
responseXML(),
resume,
return,
reverse(),
reviver,
rgb,
récupération paramètres url,
récursivité,
s,
screenX,
screenY,
search(),
secure,
select,
selectedIndex,
send(),
serveur,
setAttribute,
setData,
setDate(),
setDragImage,
setFullYear(),
setHours(),
setMilliseconds(),
setMinutes(),
setMonth(),
setRequestHeader(),
setSeconds(),
setTime(),
setYear(année),
shift(),
shiftKey,
slice(),
small(),
socket,
sort(),
souris,
sous titre,
speak,
speaking,
splice(),
split(),
spéciaux,
src,
srcElement,
srclang,
stack,
status(),
statusText(),
stopPropagation,
strike(),
sub(),
submit,
substr(),
substring(),
subtitles,
sup(),
switch,
syntaxError,
sécurité,
tableaux,
target,
targetTouches,
tcp,
test(),
textTracks,
textarea,
texte sur curseur,
this,
toGMTString(),
toLocaleString(),
toLowerCase(),
toSource(),
toString(),
toUpperCase(),
tooltip,
touchcancel,
touchend,
touches,
touchmove,
touchstart,
track,
trier,
try,
typeof(),
typeof,
udp,
unload,
unshift(),
use-credentials,
value(),
value,
valueOf(),
var,
variables,
vidéo,
virgule,
visibilité,
vocal,
voice,
void(),
vtt,
vu-mètre,
w,
while,
width,
window.event,
x/y,
xml,
z,
{ },
|,
PHP (247)
$_SERVER,
$filename,
,
?,
?php,
ALTER,
AND|OR,
AUTH_TYPE,
AuthFile,
AuthGroupFile,
AuthName,
AuthType Basic,
BETWEEN,
CONTENT_TYPE,
CREATE,
Cache-Control,
Content-Disposition,
Content-Length,
Content-Transfer-Encoding,
Content-Type,
DELETE,
DISTINCT,
DOCUMENT_ROOT,
Disallow,
EXIF,
ErrorDocument,
Expires,
FROM,
FormData(),
GATEWAY_INTERFACE,
HTTP_ACCEPT_LANGUAGE,
HTTP_HOST,
HTTP_USER_AGENT,
INSERT,
IPTC,
LIMIT,
Limit,
MSQL,
ORDER BY,
Options -Indexes,
PATH_INFO,
PATH_TRANSLATED,
PHP_AUTH_PW,
PHP_AUTH_USER,
PHP_SELF,
Pragma,
QUERY_STRING,
REMOTE_ADDR,
REMOTE_PORT,
REQUEST_METHOD,
REQUEST_URI,
RedirectPermanent,
SELECT,
SERVER_ADDR,
SERVER_ADMIN,
SERVER_NAME,
SERVER_PROTOCOL,
SERVER_SIGNATURE,
SERVER_SOFTWARE,
TALB,
TCOM,
TCON,
TCOP,
TENC,
TIT2,
TLEN,
TOPE,
TPE1,
TPE2,
TPOS,
TPUB,
TRCK,
TYER,
UPDATE,
USLT,
User-agent,
WCOM,
WCOP,
WHERE,
WOAR,
WPUB,
XMLHttpRequest(),
absolu,
alter,
append,
array(),
ascii,
attachement,
audio,
base 64,
base64_encode(),
basename,
bcc,
bd,
biginteger,
bin2hex(),
bit,
blob,
boundary,
byte,
caractère,
cc,
chaine,
channels,
char,
chemin,
chop(),
chunk,
chunk_split(),
clé,
code,
commentaires,
connect(),
content-transfer-encoding,
content-type,
convertisseur,
count(),
count,
create,
date,
decimal,
delete,
deny from all,
disposition-notification-to,
double,
download,
décimal,
echo,
else,
enum,
exif_read_data(),
explode(),
fetch,
fichiers,
fileatime,
filectime,
filemtime,
filesize(),
find,
float,
fopen(),
for,
foreach,
formulaire,
forum,
fpdf,
fputs(),
fread(),
free_result(),
from,
full-text,
get,
getimagesize(),
global,
grant,
headers,
hexa,
hexdec(),
htaccess,
hébergement,
id3,
if,
implode(),
index,
info,
inode,
insert,
integer,
interclassement,
iptcparse(),
isset(),
json,
longtext,
mail,
mediumint,
mediumtext,
mime,
mp3,
must-revalidate,
mysql,
méta données,
nl2br(),
no-cache,
nombre,
null,
numrows,
octet,
onsubmit,
opérateur,
opérateurs,
paramètres URL,
php,
phpinfo,
phpversion,
post,
preventDefault(),
primaire,
print(),
printf(),
qrcode,
query(),
query,
quizz,
readfile,
real,
relatif,
replace,
replay-to,
require valid-user,
revoke,
robots,
root,
scalaire,
select,
serveur,
set,
sextet,
smallint,
sql,
static,
str_replace(),
str_replace,
string,
strip_tags(),
strrev(),
tableaux,
tag,
text,
texte,
time,
timestamp,
tinyint,
tinytext,
types,
unique,
unpack(),
unsigned,
update,
upload,
varchar,
variables,
version,
while,
x-priority,
xml,
year,
zerofill,
Android (22)
activity,
activité,
adt,
android,
apk,
avd,
ddms,
drawable,
eclipse,
emulateur,
ide,
java,
jre,
launcher,
layout,
manifest,
package,
res,
sdk,
theme,
value,
éclipse,
Extra (11)
Audacy,
CGV,
Filezilla,
Hexedit,
Movie Maker,
Notepad++,
Photoeditor,
Xnview,
cookies,
mentions,
swap,
Aide| Fermer X |

 







Logo

Fiche Javascript : HTML5 Balises et API

Objet de la fiche :

Exploration de quelques API JavaScript pour HTML5.

État de la fiche En cours


Plan de la fiche :

Avant propos :

Le Html5 est une évolution de portée considérable qui modifie totalement la conception des pages et applications Web. On va aborder ici quelques unes de ces API sous fourme pratique avec de nombreux exemples. D'autres API et particulièrement celles liées à l'audio, à la vidéo et au glisser/coller seront abordées dans les fiches suivantes.


Custom Data Attributes

Rappel

HTML5 permet d'écrire librement tout attribut débutant par data- et ainsi associer des données personnalisées directement dans un élément HTML.

La propriété dataset permet d'interagir avec ces données. Chaque attribut data est membre de dataset.

Exemple simple

Exemple
Survolez l'image
Ma voiture
Code
  1. Survolez l'image<br />  
  2. <img id="img_data" src="../Images/Mavoiture.jpg"   
  3.  onmouseover="affiche_CustomDataAttributes();"   
  4.  onmouseout="document.getElementById('info_data').innerHTML=''" width="153" height="115" alt="Ma voiture"                 
  5.  data-proprio="Jany" data-lieu="Héricy"  
  6.  data-materiel="2CV6" data-date="Octobre 1985"  
  7. />  
  8.   
  9. <div id ="info_data">  
JAVASCRIPT
  1. <script type="text/javascript">  
  2. function affiche_CustomDataAttributes(){  
  3.     x=document.getElementById('info_data');  
  4.     y=document.getElementById('img_data');  
  5.     x.innerHTML =   
  6.         'Récupération des informations data- de l\'élément img <br/><br/>' +  
  7.         'Propriétaire : ' + y.dataset.proprio + '<br/>' +  
  8.         'Lieu : ' + y.dataset.lieu + '<br/>' +  
  9.         'Matériel : ' + y.dataset.materiel + '<br/>' +  
  10.         'Date : ' + y.dataset.date  
  11.     ;  
  12. }  
  13. </script>  

Nous venons de voir comment lire ces attributs, mais il est aussi possible :

  • de les modifier : document.getElementById('img_data').dataset.lieu = "Fontainebleau";
  • de les supprimer : document.getElementById('img_data').dataset.date = null;

Remarque

L'API dataset n'étant pas à l'heure actuelle implémentée de façon universelle, on peut utiler l'autre alternative JavaScript, à savoir l'accès classique aux attributs quels qu'ils soient (getAttribute et setAttribute) et pourquoi pas ceux débutant par data-.

  • Pour lire un attribut : var lieu = document.getElementById('img_data').getAttribute('data-lieu');
  • Pour modifier un attribut : document.getElementById('img_data').setAttribute('data-lieu') = "Fontainebleau";
  • Pour supprimer un attribut : document.getElementById('img_data').removeAttribute('data-date');

La balise progress

But

La balise "progress" permet d'afficher l'état d'avancement d'une tâche ou d'une action à l'aide d'une barre de progression.
javascript va nous permettre d'animer cette barre.

Syntaxe et propriétés spécifiques

<progress (propriété générales) (propriétés spécifiques)></progress>

Propriétés Commentaires
maxValeur maximale de la barre de progression
positionPourcentage d'avancement de la barre de progression (lecture seule)
valueValeur actuelle de la progression

Exemple simple

Exemple
40 %
Code
HTML
  1. <div id="#contenerProgress">  
  2.     <progress id="progression_prog" max="100" value="0"></progress>  
  3.     <div id="progression_txt">0 % </div>  
  4. </div>  
  5. <input value="Démarrer la progression" onclick="StartProgress();" type="button">  
JAVASCRIPT
  1. <script type="text/javascript">  
  2.   
  3.     var valeurAvancement = 0;      
  4.     var barreProgression = document.getElementById('progression_prog');    
  5.     var avancement = document.getElementById('progression_txt');  
  6.   
  7.     function StartProgress(){  
  8.         if(barreProgression.value == 100) valeurAvancement = 0;  
  9.         MyTimeOut = setTimeout('Progress()', 500);  
  10.     }  
  11.     function Progress(){    
  12.         valeurAvancement += 5;  
  13.         if(valeurAvancement <= barreProgression.max){  
  14.             barreProgression.value = valeurAvancement;  
  15.             avancement.innerHTML = valeurAvancement.toString() + ' %';  
  16.             MyTimeOut = setTimeout('Progress()', 500);  
  17.         }  
  18.     }   
  19. </script>                           
CSS
  1. <style type="text/css">  
  2. #contenerProgress{width:200px;margin:auto}  
  3. progress {position:relativewidth:100%height:18pxbackground-color#f3f3f3;  
  4.     border0; border-radius: 9px;}  
  5. progress::-webkit-progress-bar { background-color#f3f3f3; border-radius: 9px;}  
  6. progress::-webkit-progress-value {  
  7.     background#cdeb8e;  
  8.     background: -moz-linear-gradient(top,  #cdeb8e 0%#a5c956 100%);  
  9.     background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));  
  10.     background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);  
  11.     background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);  
  12.     background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);  
  13.     background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%);  
  14.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );  
  15.     border-radius: 9px;  
  16. }  
  17. progress::-moz-progress-bar {  
  18.     background#cdeb8e;  
  19.     background: -moz-linear-gradient(top,  #cdeb8e 0%#a5c956 100%);  
  20.     background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));  
  21.     background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);  
  22.     background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);  
  23.     background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);  
  24.     background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%);  
  25.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );  
  26.     border-radius: 9px;  
  27. }  
  28. #progression_txt{position:relativeline-height:25px;left:0px; top:-25pxfont-size:18px;text-align:center}  
  29. </style>  

Evènements concernant les animations : API AnimationEvent

CSS3 permet de mettre en oeuvre des animations très efficaces en termes de richesse, fluidité et rapidité, mais une fois les styles déclarés on perd le contrôle des différentes "frame". Heureusement, l'interface AnimationEvent nous apporte des informations sur les animations CSS en cours.

Attention : Ces fonctionnalités sont encore expérimentales et en cours d'évolution. Elles peuvent donc ne pas fonctionner sur certains navigateurs.

Le gestionnaire d'évènements

Les évènements disponibles

Trois types d'évènements sont disponibles durant le déroulement de l'animation.

Gestionnaires Commentaires
.animationstart Cet évènement est disponible lorsque l'animation démarre pour la première fois. Pour cette phase elapsedTime donne 0.0
.animationiteration Cet évènement est disponible chaque fois qu'une animation démarre (répétitions par exemple). On peut ainsi récupérer le temps de chaque animation avec elapsedTime.
.animationend Cet évènement est disponible chaque fois qu'une animation se termine. On peut ainsi récupérer le temps de chaque animation et le temps total des diverses animations avec elapsedTime.

Propriérés de l'interface AnimationEvent

Toures ces propriétés sont en lecture seule.

Propriétés Commentaires
AnimationEvent.type représente le nom du type de l'évènement lié à AnimationEvent. Cela peut être : 'animationstart', 'animationend', ou 'animationiteration'.
AnimationEvent.animationName contient la valeur de la propriété CSS animation-name associée à la transition.
AnimationEvent.elapsedTime donne le temps (nombre à virgule flottante) pendant lequel l'animation s'est déroulée, en secondes, quand l'évènement est déclenché, en excluant tous les temps de pause.
AnimationEvent.pseudoElement chaîne démarrant avec '::' et contenant le nom du pseudo-élément où l'animation se déroule. Si l'animation ne se déroule pas sur un pseudo-élément, mais sur un élément, la chaîne de caractères sera vide.

Déclaration des évènements

C'est la déclaration classique avec addEventListener

  1. var anim = document.getElementById("élément sur lequel est appliqué l'animation");  
  2. anim.addEventListener("animationstart", InfoAnimation, false);  
  3. anim.addEventListener("animationiteration", InfoAnimation, false);  
  4. anim.addEventListener("animationend", InfoAnimation, false);  
  5.   
  6. function InfoAnimation(e) {  
  7.     switch(e.type) {  
  8.         case "animationstart":  
  9.             // Traitement du démarrage de l'animation  
  10.           break;  
  11.         case "animationend":  
  12.             // Traitement de la fin de l'animation  
  13.             }  
  14.           break;  
  15.         case "animationiteration":  
  16.             // Traitement des itérations  
  17.           break;  
  18.     }  
  19. }  

Reprenons l'exemple purement CSS3 de la fiche CCS_HTML5

Partie html Partie CSS
  1. <div id="blop"></div>  
  1. #blop{  
  2.     position:relative;  
  3.     background-colorred;  
  4.     height50px;  
  5.     width50px;  
  6.     border-radius: 50%;  
  7.     margin:auto;top:0px;  
  8.     animation: changeColor 32, changeSize 3s ease-in  2, moveH 3s  6.53 ;  
  9. }  
  10. @keyframes changeColor {  
  11.     0% {background-colorred;}  
  12.     100% {background-colorgreen;}  
  13. }  
  14. @keyframes changeSize {  
  15.     0% {transform: scale(1)}  
  16.     100% {transform: scale(1.6)}  
  17. }  
  18. @keyframes moveH {  
  19.     from { margin-left:-20%; } to { margin-left:100%;}  
  20. }  

Remarques sur le code

  • Relancer une animation avec javascript :

    Il n'existe pas de méthode pour relancer une animation lorsqu'elle est terminée. L'astuce consiste à supprimer la classe associée à l'élément, puis à la redéfinir, ce qui oblige le DOM à se remettre à jour et ainsi re-exécuter l'animation. Pour cela on va utiliser la méthode toggle de classList
    Si la classe blop est affectée, on la retire et on retourne false; Sinon, on l'ajoute et retourne true.
    resultClassList = anim.classList.toggle("blop");
  • événement animationiteration :
    Notez que lors de la fin de l'animation, l'événement animationiteration n'est pas envoyé, seul animationend est déclenché.

La balise canvas

Tracer des formes simples (droites, rectangles)


Accés aux fichiers locaux : API Files

HTML5 met à disposition une API standard pour interagir avec les fichiers locaux au travers des spécifications de l'API files.

Il existe 3 niveaux de l'API File:

  • File API: Reader ou autrement appelé FileReader API pour lire des fichiers locaux,
  • File API: Writer ou autrement appelé FileWriter API pour créer, sauvegarder ou modifier des fichiers locaux,
  • File API: Directories ou autrement appelé FileSystem API pour effectuer toutes opérations sur des répertoires (créer, renommer, effacer, copier, déplacer, etc.

Interface File : File objects et Blob objects

Généralités

Propriétés

  • object.size : taille du fichier.
  • object.name : le nom du fichier.
  • object.type : type MIME du fichier.
  • object.lastModifiedDate : date de la dernière modification.

Interface FileReader()

Possibilités

  • Lire(via l'interface FileReader) un fichier ou les données d'un fichier à n'importe quelle position d'octet.

Syntaxe

var reader = new FileReader();
var f = files[i] // fichiers objets

EventTarget

  • EventTarget.addEventListener() : supervision d'évènements spécifiques.
  • EventTarget.removeEventListener() : suppression de la supervision d'un évènement.
  • EventTarget.dispatchEvent() : Envoie un évènement dans le système d'évènements.

Propriétés et méthodes

PropriétésCommentaires
reader.readyState peut valoir EMPTY (vide), LOADING (chargement), DONE (terminé).
reader.result le contenu du fichier a été lu.
reader.error type d'erreur détectée.
onloadstart évènement disponible au démarrage de la lecture du fichier.
onprogress évènement disponible cycliquement durant le chargement du fichier: il fournit,aussi, un objet en paramètre possédant deux propriétés, loaded et total, indiquant respectivement le nombre d'octets lus et le nombre d'octets à lire en tout.
onload évènement disponible lorsque toutes les données ont été chargées.
onabort évènement disponible lorsque la lecture a été interrompue.
onerror évènement disponible lorsque la lecture a échouée.
onloadend évènement disponible lorsque la requête est terminée avec succés ou erreur.
MethodesCommentaires
reader.abort() arrêt de la procédure de chargement.
reader.readAsDataURL(f) lit le fichier et retourne sous forme d'URL les données codées en base64. Les données sont converties dans un format nommé DataURL. Ce format consiste à convertir toutes les données binaires d'un fichier en base64 (voir fiche Conversion 64 bits. Cette méthode est particulièrement intéressante pour initialiser la propriété src d'une balise image pour affichier la photo correspondande aux données
reader.readAsText(f,option) Récupère le contenu du fichier f sous forme de texte. On associer un paramètre optionnel qui défini le format des informations récupérées. Par défaut, UTF-8 est utilisé si le paramètre optionnel n'est pas défini. Les données ne subissent aucune modification, elles sont tout simplement lues puis stockées sous forme d'une chaîne de caractères.
reader.readAsArrayBuffer(f) cette methode permet de lire un Blob (note1) ou un Fichier et retourne une ArrayBuffer (tableau typé voir note2) : type de données générique pour représenter un tampon de données de longueur fixe. Stocke les données dans un objet de type ArrayBuffer.Ces objets ont été conçus pour permettre l'écriture et la lecture de données binaires directement dans leur forme native,
reader.readAsBinaryString(f) cette méthode peut être utilisées pour lire n'importe quel type de fichier. La méthode retourne les données binaires brutes d'un fichier. Associé à XMLHttpRequest.sendAsBinary() (Voir la fiche AJAX) il est facile d'uploaded n'importe quel fichier du serveur avec peu de code javascript.
Note1 les Blob
Définition
Structure
Convertir un blob en fichier
La particularité des objets File est qu'ils héritent des propriétés et méthodes des objets Blob, donc en plus des propriétés et méthodes des objets Blob, les objets File possèdent deux propriétés supplémentaires qui sont name pour obtenir le nom du fichier et lastModifiedDate pour obtenir la date de la dernière modification du fichier (sous forme d'objet Date).
  1. function blobToFile(theBlob, fileName){  
  2.     /* Un Blob() est presque un fichier,  
  3.     il lui manque seulement les 2 propriétés suivantes */  
  4.       
  5.     theBlob.lastModifiedDate = new Date();  
  6.     theBlob.name = fileName;  
  7.     return theBlob;  
  8. }  
  9. //Usage  
  10.   
  11. var myBlob = new Blob();  
  12.   
  13. var myFile = blobToFile(myBlob, "my-image.png");  
note2 les tableaux typés

Exemples

On va utiliser l'élément HTML Input qui est une extensions (comme le sont Form, Select, Embed, etc) de la classe centrale HTMLElement pour sélectionner les fichiers.

Avec readAsDataURL
Avec readAsText
Avec readAsArrayBuffer
Avec readAsBinaryString

JavaScript retourne la liste des fichiers sélectionné sous forme d'une FileList.

Interface FileWriter()

Propriétés et méthodes

Interface FileSystem()

Propriétés et méthodes

Application au projet de site web


© Jany 2008-2023
Respectons la propriété intellectuelle

 


Erreurs, remarques, suggestions : monwebfacile@free.fr
Reproduction interdite sans citation de la source monwebfacile   © Jany 2008-2023