Poznatky z používání HTML5 v praxi
- Webová interaktivní prezentace
- Klávesa "?" zobrazí krátkou nápovědu
- Tisk jako obvykle
- Pro pokračování stiskněte mezerník
- ondrej.zara@firma.seznam.cz
www.seznam.cz
-moz-, -webkit-, -ms-, -o-)/* podpora atributu */
if ("placeholder" in document.createElement("input")) { /* ... */ }
/* podpora HTML značky */
if (document.createElement("audio").canPlayType) { /* ... */ }
/* podpora JS API */
if (window.Audio) { /* ... */ }
<a id="captcha" href="/captcha.wav">přehrát</a>
/* zjednodušený kód! */
$("captcha").addEventListener("click", function(e) {
if (window.Audio) { /* podpora HTML5 audio; wav formát je podporován všude */
e.preventDefault();
new Audio(e.target.href).play();
} else if (navigator.mimeTypes["audio/wav"].enabledPlugin) { /* plugin */
e.preventDefault();
var embed = document.createElement("embed");
embed.src = e.target.href;
embed.autostart = true;
document.body.appendChild(embed);
} else { /* nic, uživatel si stáhne zvukový soubor */ }
}, false);
button {
border: 1px solid #666;
padding: 0.1em 0.2em;
text-shadow: 0em 0.03em 0.06em white;
border-radius: 0.35em;
background-color: #bbb;
background-image: linear-gradient(top, #eee, #999);
}
button:hover { background-image: linear-gradient(top, #ddd, #888); }
button:active { box-shadow: 0px 0.1em 0.2em 0.1em #666 inset; }Function.caller (resp. arguments.callee.caller)/* při volání z metody objektu zavolá stejně pojmenovanou metodu předka */
this.parent = function() {
/* zjistit, odkud jsme voláni */
var caller = arguments.callee.caller;
/* najít jméno této metody */
var name = "";
for (var p in this) { if (this[p] == caller) name = p; }
/* získat stejně pojmenovanou metodu předka */
var parentMethod = ...(name);
/* zavolat ji */
return parentMethod.apply(this, arguments);
}
classvar mojeHodnota = $("prvek").getAttribute("data-mujKlic");
var mojeHodnota = $("prvek").dataset.mujKlic;
<body data-mereni="search-results"> ... <div data-mereni="search-item"> <h3 data-mereni="search-title">nadpis výsledku</h3> <img data-mereni="search-image" /> ... </div> ... </body>
if ("draggable" in document.createElement("div")) { /* podpora pro přetažení */
$("target").addEventListener("drop", function(e) {
e.preventDefault(); /* aby prohlížeč neotevřel soubor jako dokument */
processFiles(e.dataTransfer.files);
}, false);
}
$("input").addEventListener("change", function(e) {
if ("files" in $("input")) { /* podpora pro přístup k souborům */
processFiles(e.target.files);
} else { /* ... */ } /* odeslat nějakým "běžnějším" způsobem */
}, false);
if (!("multiple" in $("input"))) { /* vyrobit UI pro přidání dalšího */ }
var processFiles = function(files) {
for (var i=0; i<files.length; i++) {
var img = document.createElement("img"); /* náhled */
if (files[i].type.match(/image/)) {
img.src = window.URL.createObjectURL(files[i]);
} else { /* předpřipravený obrázek pro ostatní typy */ }
document.body.appendChild(img);
var xhr = new XMLHttpRequest();
xhr.open("post", "/upload", true);
xhr.upload.addEventListener("progress", ..., false); /* ukázat postup */
xhr.send(files[i]);
}
}
<input type="text" id="input" placeholder="Uživatelské jméno" /> <textarea placeholder="Text článku"></textarea>
focus a blur:placeholder v HTML5, jinak class)