Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
The encodeURI() function encodes the complete URI including special characters except except (, / ? : @ & = + $ #) characters.The encodeURIComponent() function encodes some parts of the URI by basically encoding the special characters. It also encodes the following characters − (, / ? : @ & = + $ # )The decodeURI() function decodes the URI generated by the encodeURI() function.The decodeURIComponent() function is used to decode some parts of URI generated by encodeURIComponent().Following is the code for the encodeURI(), decodeURI() and its component functions −Example Live Demo Document body { ... Read More
To get the coordinates of mouse using JavaScript, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 25px; font-weight: 500; } Coordinates of mouse Hover the mouse over the screen to get its x and y axis position let sampleEle = document.querySelector(".sample"); document.body.addEventListener("mousemove", (event) => { sampleEle.innerHTML = "X axis: " + event.x + " Y axis: " + event.y; }); OutputThe above code will produce the following output:
To convert a string to boolean in JavaScript, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } Converting string to boolean CLICK HERE Click the above button to convert the string to boolean value let sampleEle = document.querySelector(".sample"); let inputEle = document.querySelector(".str"); document.querySelector(".Btn").addEventListener("click", () => { sampleEle.innerHTML += "Using == " + (inputEle.value == "true") + ""; sampleEle.innerHTML += "Using === " + (inputEle.value === "true") + ""; }); OutputOn writing something in the input field other than string ‘true’ and clicking the button −
The JavaScript const declarations create variables that cannot be reassigned to some other value or redeclared later. It was introduced in ES2015.Following is the code for JavaScript const declaration −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } Const example CLICK HERE Click the above button to try changing const value let sampleEle = document.querySelector(".sample"); const a = 33; sampleEle.innerHTML = "a = " + a + ""; document.querySelector(".Btn").addEventListener("click", () => { try { a = 44; } catch (err) { sampleEle.innerHTML += "Error : " + err; } }); OutputOn clicking the ‘CLICK HERE’ button to change constant value −
Chart.js is an open source JavaScript library. Using Chart.js, add animated, interactive graphs on your website.Following is the code for Chart.js library in JavaScript −Example Live Demo
To auto-filling one field same as other, the JavaScript script is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } JavaScript Auto-filling one field same as other Enter your primary address Address Pin Code Secondary Address same as primary Same Address Enter your secondary address Address Pin Code let checkEle = document.querySelector(".check"); let addressEle = document.querySelectorAll(".address"); let pinCodeEle = document.querySelectorAll(".pincode"); checkEle.addEventListener("change", (event) => { if (event.target.checked) { console.log(addressEle[0].value); addressEle[1].value = addressEle[0].value; pinCodeEle[1].value = pinCodeEle[0].value; } }); OutputOn filling the primary address and clicking the “Same Address” checkbox −
The Symbol.hasInstance property is used to check if a constructor recognizes the object as its instance.Following is the code for Symbol.hasInstance property −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { font-size: 20px; font-weight: 500; } JavaScript Symbol.hasInstance Property CLICK HERE Click on the above button to see if the above symbols are instance of array and custom() respectively let fillEle = document.querySelector(".sample"); let ele = [1, 2, ... Read More
The Symbol.for() function searches runtime-wide symbol registery for a given symbol. If the symbol is found then it is returned otherwise a new symbol is created in the global symbol registery and simply returned.Following is the code for symbol.for() functionExample Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { font-size: 20px; font-weight: 500; } JavaScript Symbol.for() function CLICK HERE Click on the above button to get the symbols. let ... Read More
The symbol.@@toPrimitive() function converts a symbol object to a primitive value.SyntaxSymbol()[Symbol.toPrimitive](hint)The hint value specifies the type eg − number, string, etc and is an optional argument.Following is the code for symbol.@@toPrimitive() function −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { font-size: 20px; font-weight: 500; } JavaScript symbol.@@toPrimitive() function CLICK HERE Click on the above button to add the object with a number. let fillEle = document.querySelector(".sample"); ... Read More
To create a flip card with CSS, the code is as follows −Example Live Demo body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin:20px; } .flipCard { background-color: transparent; width: 300px; height: 300px; perspective: 1000px; } .innerCard { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: ... Read More