Front End Technology Articles - Page 580 of 860

Use the address object to represent the element. Let us see an example to create −Example Live Demo Heading Two Create address element Display    function display() {       var a = document.createElement("Address");       var node = document.createTextNode("ABC Inc, P 120, Ontario, Canada");       a.appendChild(node);       document.body.appendChild(a);    } OutputNow, click on the button to display the address −

The stroke() method of the HTML canvas is used to draw the path. This path is drawn with moveTo() and lineTo() method. The element allows you to draw graphics on a web page using JavaScript. Every canvas has two elements that describes the height and width of the canvas i.e. height and width respectively.Following is the syntax −ctx.stroke()Let us now see an example to implement the stroke() method of canvas −Example Live Demo    var c = document.getElementById("newCanvas");    var ctx = c.getContext("2d");    ctx.beginPath();    ctx.moveTo(100, 200);    ctx.lineTo(100, 100);    ctx.strokeStyle = "blue"; ... Read More

The href attribute of the element sets the the hyperlink target. Following is the syntax −Above, URL is the hyperlink you need to mention for the area, which can be a relative link, absolute link, script, protocol, etc.Let us now see an example to implement the href attribute of the element −Example Live Demo Learning Learn these technologies with ease....             OutputIn the above example, we have set the map on the following image −Now, we have set the map and area within it for shape −   ... Read More

The HTML DOM Object name property sets or returns the value of the name attribute. However, the name attribute only sets the name.Following is the syntax to set the object name property −obj.nameFollowing is the syntax to return the object name property −obj.name = nameLet us now see an example to implement the DOM Object name property −Example Live Demo Change the object name function display() { document.getElementById("obj1").name = "obj2"; document.getElementById("demo").innerHTML = "Name updated to obj2"; } OutputNow, click the button to update the object name −

The autocomplete attribute of the element allows you to set whether the autocomplete for the form should be on or off. The web browser automatically fills the values if the autocomplete is on. This only happens if the user already entered values before.Following is the syntax −Above, on | off values are to be set for autocomplete to appear or not. Set on if you want the browser to complete the entries based on previously entered values, whereas off doesn’t allow to complete the entries.Let us now see an example to implement the autocomplete attribute of the element ... Read More

The HTML DOM activeElement property is a read-only property to return the currently focused element in the document.Following is the syntax −document.activeElementLet us now see an example to implement the DOM activeElement property −Example Live Demo Heading Two Click in the element to get the active element. function display() { var a = document.activeElement.tagName; document.getElementById("myid").innerHTML = a; } OutputNow, click the element to display the same currently active element −

The shadowColor property of the HTML canvas is used to set the color for shadow. The default value is #000000.Following is the syntax −ctx.shadowColor=color;Above, set the color for shadow.Let us now see an example to implement the shadowColor property of canvas −Example Live Demo    var c = document.getElementById("newCanvas");    var ctx = c.getContext("2d");    ctx.shadowBlur = 20;    ctx.shadowColor = "gray";    ctx.fillStyle = "blue";    ctx.fillRect(40, 40, 200, 250); Output

The datetime attribute of the element is used to display the machine-readable date time.Following is the syntax −Above, the attribute datetime displays the datetime −YYYY - yearMM - monthDD - day of the monthhh - hourmm - minutesss - secondsTZD - Time Zone DesignatorYou can also set PTDHMS −P - prefix for "Period"D - prefix for "Days"H - prefix for "Hours"M - prefix for "Minutes"S - prefix for "Seconds"Let us now see an example to implement the datetime attribute of the element −Example Live Demo    Exam Results    Result would be announced on 6th June.    New ... Read More

The defaultPrevented event property in HTML is used to check whether the preventDefault() method was called or not. It returns a boolean value i.e. true if the preventDefault() method was called, else false.Following is the syntax −event.defaultPreventedLet us now see an example to implement the defaultPrevented event property in HTML −Example Live Demo Demo Heading Demo (click me)    document.getElementById("myid").addEventListener("click", function(event){       event.preventDefault()       alert("Was preventDefault() called: " + event.defaultPrevented);    }); OutputClick on the link and the following would get displayed in the alert box −

The currentTarget event property in HTML is used to get the element whose event listeners triggered the event.Following is the syntax −event.currentTargetLet us now see an example to implement the currentTarget event property −Example Live Demo Get the element Click on this line to generate an alert box displaying the element whose eventlistener triggered the event.    function myFunction(event) {       alert("Element = "+event.currentTarget.nodeName);    } OutputNow double click on the line as shown in the above screenshot to generate an alert box that would display the element whose event listeners triggered the event −