Front End Technology Articles - Page 559 of 860

The HTML DOM Input Datetime autofocus property sets/returns whether Input Datetime is focused upon initial page load.SyntaxFollowing is the syntax −Returning boolean value - true/falseinputDatetimeObject.autofocusSetting autofocus to booleanValueinputDatetimeObject.autofocus = booleanValueBoolean ValuesHere, “booleanValue” can be the following −booleanValueDetailstrueIt defines that input will be autofocused on page load.falseIt is the default value and input is not autofocused.ExampleLet us see an example of Input Datetime autofocus property − Live Demo Input Datetime Autofocus Date & Time: Remove Auto Focus    var divDisplay = document.getElementById("divDisplay");    var inputDatetime = document.getElementById("Datetime");    divDisplay.textContent = 'Autofocus: '+inputDatetime.autofocus function removeAutoFocus() { ... Read More

The HTML DOM Input Date value property returns a string, which is the value of the value attribute of input date. User can also set it to a new string.SyntaxFollowing is the syntax −Returning string valueinputDateObject.valueSetting value attribute to a string valueinputDateObject.value = ‘String’ExampleLet us see an example of Input Date value property − Live Demo Input Date Value Calendar: Change Value    var divDisplay = document.getElementById("divDisplay");    var inputDate = document.getElementById("dateSelect");    divDisplay.textContent = 'Current value: '+ inputDate.value;    function changeValue(){       var currDate = inputDate.value;       ... Read More

The HTML DOM Input Date type property returns/sets type of Input Date.SyntaxFollowing is the syntax −Returning string valueinputDateObject.typeSetting type to string valueinputDateObject.type = stringValueString ValuesHere, “stringValue” can be the following −stringValueDetailsdateIt defines that input type is dateradioIt defines that input type is radiocheckboxIt defines that input type is checkboxExampleLet us see an example of Input Date type property − Live Demo Input Date type Calendar: Change Type    var divDisplay = document.getElementById("divDisplay");    var inputDate = document.getElementById("dateSelect");    divDisplay.textContent = 'Input type: '+ inputDate.type;    function changeType(){       ... Read More

The HTML DOM Input Date stepUp() method defines the amount of days the date field should increase.SyntaxFollowing is the syntax −Calling stepUp method with a number, which by default is equal to 1inputDateObject.stepUp(number)ExampleLet us see an example of Input Date stepUp method − Live Demo Input Date stepUp() Calendar: Increase by 2 Increase by 3    var divDisplay = document.getElementById("divDisplay");    var inputDate = document.getElementById("dateSelect");    function changeStep(num){       if(num===2)          inputDate.stepUp(2);       else          inputDate.stepUp(3);       divDisplay.textContent = 'Current date increased by: '+num;    } OutputThis will produce the following output −Clicking ‘Increase by 2’ button −Clicking ‘Increase by 3’ button −

The HTML DOM Input Date stepdown() method defines the amount of days the date field should decrease.SyntaxFollowing is the syntax −Calling stepDown method with a number, which by default is equal to 1inputDateObject.stepDown(number)ExampleLet us see an example of Input Date stepDown method − Live Demo Input Date stepDown() Calendar: Decrease by 2 Decrease by 3    var divDisplay = document.getElementById("divDisplay");    var inputDate = document.getElementById("dateSelect");    function changeStep(num){       if(num===2)          inputDate.stepDown(2);       else          inputDate.stepDown(3);       divDisplay.textContent = 'Current date decreased by: '+num;    } OutputThis will produce the following output −Clicking ‘Decrease by 2’ button −Clicking ‘Decrease by 3’ button −

The DOM PageTransitionEvent is an event which occurs when a user navigates between the webpages.Property of PageTransitionEvent objectPropertyExplanationpersistedIt returns true or false value depending upon whether the webpage was cached or not.Types of events belong to PageTransitionEvent objectEventsExplanationpageHideIt happens when the user navigates away from a webpage.pageShowIt happens when the user navigates to a webpage.ExampleLet us see an example of PageTransitionEvent object − Live Demo    body{       text-align:center;       color:#fff;       background: #ff7f5094;       height:100%;    }    .btn{       background:#0197F6;       border:none;     ... Read More

The DOM readyState property returns the loading status of the current HTML document.SyntaxFollowing is the syntax −document.readyStateExampleLet us see an example of readyState property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: #ff7f5094;       height:100%;    }    p{       font-weight:700;       font-size:1.2rem;    }    .btn{       background:#0197F6;       border:none;       height:2rem;       border-radius:2px;       width:35%;       margin:2rem auto;       ... Read More

The HTML DOM removeNamedItem() method removes the node specified in its parameter from an attribute node using its name in an HTML document.SyntaxFollowing is the syntax −node.removeNamedItem(node);ExampleLet us see an example of removeNamedItem() method − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    .btn{       background:#0197F6;       border:none;       height:2rem;       border-radius:2px;       width:60%;       margin:2rem ... Read More

The DOM setNamedItem() method set a node specified in its parameter to an attribute node using its name in an HTML document.SyntaxFollowing is the syntax −node.setNamedItem(node);ExampleLet us see an example of setNamedItem() method − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    .btn{       background:#0197F6;       border:none;       height:2rem;       border-radius:2px;       width:50%;       margin:2rem auto; ... Read More

exec()The exec() method is a regex method. It searches a string for a specified pattern and, unlike test() regex method, returns the found text as an object. If there are no matches it will give null as an output. Let's discuss it in detail.Example-1In the following example, a variable pattern "est" is checked through the exec() method. The exec() regex method, after scrutinizing the given pattern throughout the text, returned the pattern as an object.Live Demo var obj = /est/.exec("Tutorix is the best e-learning platform"); document.write( "The object is ... Read More