<section>,<article>,<nav>,<header>,<footer>,<aside>,<hgroup>
<div contenteditable="true" > HTML5 Hello, World! </div>
<a href="/file.pdf" download="helloworld"></a>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img.jpg" draggable="true"ondragstart="drag(event)" >
function drop(e){ //e.target is element and e.dataTransfer.getData() will return data return false; }
var els = document.getElementsByClassName('finder'); // Finding elements with CSS syntax (Selectors API) els = document.querySelectorAll("p span:nth-child(odd)");
<div>This is a brick in HTML5 </div>
var host = document.querySelector('div'); var root = host.webkitCreateShadowRoot(); root.textContent = 'HTML5 Hello, World!';
<div>Just reached the edge. </div>
var host = document.querySelector('div'); var root = host.webkitCreateShadowRoot(); root.textContent = '<span>HTML5 Hello, World!</span>'+ '<style>span{color:orange}</span>';
<div>This is very advanced </div>
var host = document.querySelector('div'); var root1 = host.webkitCreateShadowRoot(); root.textContent = 'HTML5 Hello, World! 1'; var root2 = host.webkitCreateShadowRoot(); root2.textContent = 'HTML5 Hello, World! 2';
var connection = new WebSocket("URL"); connection.binaryType = 'arraybuffer'; connection.onopen=function(e)... connection.onerror=function(e)... connection.onclose=function(e)... connection.onmessage=function(e){ console.log(e.data)//data from server } connection.send("ping");
var worker = new Worker("worker.js"); worker.onmessage=function(e){ console.log(e.data)//data from worker } worker.postMessage("start");
onmessage=function(e){ var data=e.data;//data from main thread postMessage(data);//send data to main }
function moveElem() { requestAnimFrame( moveElem ); render(); } function render(){ // DOM changes }
var xhr = new XMLHttpRequest(); xhr.open('POST', '/server', true); xhr.responseType = 'text'; xhr.onload = function(e) { if (this.status == 200) { console.log(this.response); } }; xhr.send("some text");
indexedDB.db = null; indexedDB.onerror = function(e) { console.log(e); }; indexedDB.open = function() { var request = indexedDB.open("todos"); request.onsuccess=successCallback; request.onfailure=failureCallback; }
<input type="file" id="files" />
function selectedFiles(evt) { var files = evt.target.files; // selected list of files for (var i = 0, f; f = files[i]; i++) { console.log(escape(f.name)+" "+f.type+" "+f.size+" "+f.lastModifiedDate); } } document.getElementById("files").addEventListener("change",selectedFiles,false);
<input type="file" id="files" multiple />
document.querySelector('#files').onchange = function(e) { var files = this.files; window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { for (var i = 0, file; file = files[i]; ++i) { (function(f) { fs.root.getFile(f.name, {create: true, exclusive: true}, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.write(f); }, errorHandler); }, errorHandler); })(file); }}, errorHandler); };
<div data-left="1500" id="domdata" >Some data...</div>
//get data var el = document.getElementById('domdata'); var left = el.getAttribute('data-left'); console.log(left);
if(navigator.onLine){ //test the network conection console.log("Connected."); }else{ console.log("not Connected."); }
console.log(performance); //navigation timing connectEnd: 1363679948438 connectStart: 1363679948438 domComplete: 1363679955254 domContentLoadedEventEnd: 1363679950350 domContentLoadedEventStart: 1363679950308 domInteractive: 1363679950237 ...
function manageFocus() { if (document.hidden) { stopAnimation(); } else { startAnimation(); } } document.addEventListener("visibilitychange", manageFocus, false);
element.webkitRequestPointerLock(); // Chrome element.mozRequestPointerLock() //FF
function toggleFullScreen(el) { if (!el.fullscreenElement) { if (el.requestFullscreen) { el.requestFullscreen(); } } else { if (el.cancelFullScreen) { el.cancelFullScreen(); } } }
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error); //returns longitude and latitude points of current location on success. } else { error('not supported'); }
navigator.pushState({ foo : "bar"}, "New title", "new-url.html"); window.addEventListener('popstate', function(event) { console.log(event.state);//get the data }
<video src="video.ogg" controls> Your browser does not support the video element. </video> <audio src="/test/audio.ogg"> Your browser does not support the audio element. </audio>
navigator.getUserMedia ({video: true,audio: true}, function(localMediaStream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(localMediaStream); video.onloadedmetadata = function(e) { // Do something with the video here. }; }, function(err) { console.log("The following error occured: " + err); });
var sndr = pc1.createDataChannel("crispy"); var rcvr = pc2.createDataChannel("crispy"); var receiveLog = document.querySelector("div#receive"); rcvr.onmessage = function(event) { receiveLog.innerHTML += event.data; }; var input = document.querySelector("input#send"); function sendToPeer() { sndr.send(input.value);//send message }
var context = new webkitAudioContext(); function playSound(buffer) { var source = context.createBufferSource(); // creates a sound source source.buffer = buffer; // tell the source which sound to play source.connect(context.destination); // connect the source to the context's destination source.noteOn(0); // play the source now }
var recognition = new webkitSpeechRecognition(); recognition.onstart=function(e)... recognition.onend=function(e)... recognition.onerror=function(e)... recognition.onresult=function(e)... recognition.start();
<canvas id="canvasid" width="150" height="150"></canvas> var canvas = document.getElementById('canvasid'); var ctx = canvas.getContext('2d');
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <circle id="redcircle" cx="50" cy="50" r="50" fill="red"/> </svg>
var canvas = document.getElementById("canvas"); try{ var gl = canvas.getContext("experimental-webgl"); } catch(e){} if(!gl){ console.log("Your browser doesn't support webgl"); }