A list of one-liners you should know to up your knowledge of JavaScript.
1.# Copy content to the clipboard
In order to improve the user experience of the website, we often need to copy the content to the clipboard, so that users can paste it to the designated place.
검색 페이지나 페이지네이션(pagination)을 가진 페이지에서 많이 사용됩니다. 즉 검색 조건이나 페이지 전환이 비동기식 ajax로 이루어질때 이를 반영하기 위해 페이지 주소를 함께 변경하는 것입니다. 페이지 주소를 변경해두면 만약페이지를 리로드, 갱신하더라도 바뀐 주소나 쿼리 스트링 정보를 그대로 가져올 수 있기 때문이죠.
pushstate()의 장점은 페이지 주소만 변경하는 것이 아니라 url 주소를 바꾸면서 동시에 데이터(state)를 전달하거나 타이틀 변경도 가능하다는 점입니다.
순수한 JavaScript를 사용하면 주어진 값에서 해시 값을 얻을 수 있습니다.indexOf()그리고substring(), 아래에 설명된 대로:
var url = "https://mail.google.com/mail/u/0/#inbox";
var index = url.indexOf("#");
if (index !== -1)
{
var hash = url.substring(index + 1);
console.log(hash);
}
당신은 또한 사용할 수 있습니다split()방법pop()방법은 아래와 같습니다.
var url = "https://mail.google.com/mail/u/0/#inbox";
var parts = url.split('#');
if (parts.length > 1) {
console.log(parts.pop());
}
2. 현재 URL의 해시 값 가져오기
또는 현재 창 URL에 대한 해시 값이 필요한 경우 다음을 사용할 수 있습니다.window.location.hash, 다음을 포함하는 문자열을 반환합니다.'#', URL의 조각 식별자가 뒤따릅니다. URL에 조각 식별자가 없으면 빈 문자열을 반환합니다."".
// 'https://www.techiedelight.com/#input'에 대해 '#input'을 반환합니다.
var hash = window.location.hash;
jQuery를 사용하면 다음을 사용할 수 있습니다..prop()에location해시를 얻기 위한 객체:
// 'https://www.techiedelight.com/#input'에 대해 '#input' 반환
var hash = $(location).prop('hash');
URL의 조각 식별자만 추출하려면'#', 당신은 사용할 수 있습니다substr()다음과 같은 방법:
// 'https://www.techiedelight.com/#input'에 대한 'input'을 반환합니다.
// JavaScript로
var hash = window.location.hash.substr(1);
// jQuery로
var hash = $(location).prop('hash').substr(1);
다음은 다음을 사용하는 또 다른 솔루션입니다.window.location.href.
// 'https://www.techiedelight.com/#input'에 대한 'input'을 반환합니다.
window.location.href.split('#').pop();
With the rapidly changing technologies, developers are being provided with incredible newtoolsandAPIs. But it has been seen that out of the100+ APIs, only5%of them are actively used by developers.
Let’s take a look at some of the usefulWeb APIsthat can help you skyrocket your website to the moon! 🌕🚀
1. Screen Capture API
TheScreen Capture API, as the name suggests, allows you to capture the contents of a screen, making the process of building ascreen recordera piece of cake.
You need avideoelement to display the captured screen. Thestartbutton will start thescreen capture.
<video id="preview" autoplay>
Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>
TheWeb Share APIallows you to sharetext,links, andeven filesfrom aweb page to other appsinstalled on the device.
async function shareHandler() {
navigator.share({
title: "Tapajyoti Bose | Portfolio",
text: "Check out my website",
url: "https://tapajyoti-bose.vercel.app/",
});
}
NOTE:To use theWeb Share API, you need an interaction from the user. For example, abutton clickor atouch event.
3. Intersection Observer API
TheIntersection Observer APIallows you todetect when an element enters or leaves the viewport. This is exceptionally useful for implementinginfinite scroll.
NOTE:The demo usesReactbecause of my personal preference, but you can useany frameworkorvanilla JavaScript.
4. Clipboard API
TheClipboard APIallows you toread and write datato theclipboard. This is useful for implementing thecopy to clipboardfunctionality.
async function copyHandler() {
const text = "https://tapajyoti-bose.vercel.app/";
navigator.clipboard.writeText(text);
}
5. Screen Wake Lock API
Ever wondered howYouTubeprevents the screen from being switched off while playing the video? Well, that’s because of theScreen Wake Lock API.
let wakeLock = null;
async function lockHandler() {
wakeLock = await navigator.wakeLock.request("screen");
}
async function releaseHandler() {
await wakeLock.release();
wakeLock = null;
}j
NOTE:You can only use theScreen Wake Lock APIif the page is already visible on the screen. Otherwise, it would throw an error.
6. Screen Orientation API
TheScreen Orientation APIallows you to check thecurrent orientationof the screen and evenlock itto a specific orientation.
async function lockHandler() {
await screen.orientation.lock("portrait");
}
function releaseHandler() {
screen.orientation.unlock();
}
function getOrientation() {
return screen.orientation.type;
}
7. Fullscreen API
TheFullscreen APIallows you to display an element or the entire page infull screen.
async function enterFullscreen() {
await document.documentElement.requestFullscreen();
}
async function exitFullscreen() {
await document.exitFullscreen();
}
NOTE:To use theFullscreen APItoo, you need an interaction from the user.