Javascript Articles - Page 529 of 671

Cross-origin resource sharing (CORS) is a mechanism to allows the restricted resources from another domain in a web browserFor suppose, if you click on HTML5- video player in html5 demo sections. It will ask camera permission. If the user allows the permission then only it will open the camera or else it doesn't open the camera for web applications.The following is an example of event handlers in CORS:xhr.onload = function() {    var responseText = xhr.responseText;    // process the response.    console.log(responseText); }; xhr.onerror = function() {    console.log('There was an error!'); };

Two-way communication between the browsing contexts is called channel messaging. It is useful for communication across multiple origins.While creating messageChannel, it internally creates two ports to send the data and forwarded to another browsing context.postMessage() − Post the message throw channelstart() − It sends the dataclose() − it close the portsIn this scenario, we are sending the data from one iframe to another iframe. Here we are invoking the data in function and passing the data to DOM.var loadHandler = function(){    var mc, portMessageHandler;    mc = new MessageChannel();    window.parent.postMessage('documentAHasLoaded', 'http://foo.example', [mc.port2]);    portMessageHandler = function(portMsgEvent){     ... Read More

Create a new web browsing context either by creating new iframe or new window. We can send the data using with postMessage() and it has two arguments. They are asmessage − The message to sendtargetOrigin − Origin nameLet us see an example to send a message from iframe to button:var iframe = document.querySelector('iframe'); var button = document.querySelector('button'); var clickHandler = function(){    iframe.contentWindow.postMessage('The message to send.','https://www.tutorialspoint.com); } button.addEventListener('click',clickHandler,false);

Microdata introduces five global attributes that would be available for any element to use and give context for machines about your data.AttributeDescriptionItemscopeThis is used to create an item. The itemscope attribute is a boolean attribute that tells that there is Microdata on this page, and this is where it starts.Itemtype This attribute is a valid URL which defines the item and provides the context for the properties.ItemidThis attribute is a global identifier for the item.ItempropThis attribute defines a property of the item.ItemrefThis attribute gives a list of additional elements to crawl to find the name-value pairs of the item.Read More

HTML5 canvas provides capabilities to create nice shadows around the drawings. All drawing operations affected by the four global shadow attributes.     Sr.No.                                         Property and Description1shadowColor [ = value ]This property returns the current shadow color and can be set, to change the shadow color.2shadowOffsetX [ = value ]This property returns the current shadow offset X and can be set, to change the shadow offset X.3shadowOffsetY [ = value ]This property returns the current shadow offset Y and can be set, ... Read More

To handle Server-Sent Events in HTML5, you can try to run the following code:                    document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);          function eventHandler(event)          {             // Alert time sent by the server             document.querySelector('#ticker').innerHTML = event.data;          }                                                    [TIME]          

To use Server-Sent Events in a web application, you would need to add an element to the document.The src attribute of the element should point to an URL that should provide a persistent HTTP connection that sends a data stream containing the events.The URL would point to a PHP, PERL or any Python script that would take care of sending event data consistently.ExampleHere is an example showing application that would expect server time.                    /* Define event handling logic here */                                                              

Session StorageThe Session Storage is designed for scenarios where the user is carrying out a single transaction but could be carrying out multiple transactions in different windows at the same time.Local StorageThe Local Storage is designed for storage that spans multiple windows and lasts beyond the current session. In particular, Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons.HTML5 introduces the localStorage attribute which would be used to access a page's local storage area without no time limit and this local storage will ... Read More

The HTML5 tag is used to draw SVG Gradients. Yes, modern browsers support it.The following is the HTML5 version of an SVG example that would draw an ellipse using the tag and would use the tag to define an SVG radial gradient. Similar way you can use the tag to create SVG linear gradient.                    #svgelem{             position: relative;             left: 50%;             -webkit-transform: translateX(-40%);             -ms-transform: translateX(-40%);             transform: translateX(-40%);          }             SVG                     HTML5 SVG Gradient Ellipse                                                                              

To apply gravity between two or more object in Canvas:var distX = ob1.x - ob2.x, distY = ob1.y - ob2.y; var val = distX *distX + distY * distY; var r = Math.sqrt(val); var F = 50 / val; var rhat_x = distX / r; var rhat_y = distY / r; var Fx = F * rhat_x; var Fy = F * rhat_y; ob1.vx += -Fx; ob1.vy += -Fy; ob2.vx += Fx; ob2.vy += Fy;