{"id":6541,"date":"2021-09-22T11:27:44","date_gmt":"2021-09-22T09:27:44","guid":{"rendered":"http:\/\/blog.bart.sk\/en\/?p=6541"},"modified":"2024-01-29T10:30:19","modified_gmt":"2024-01-29T09:30:19","slug":"3-web-apis-may-not-know","status":"publish","type":"post","link":"https:\/\/blog.bart.sk\/en\/3-web-apis-may-not-know\/","title":{"rendered":"3 Web APIs that you may (not) know"},"content":{"rendered":"\n

In today’s article, we will introduce 3 Web APIs that, when used correctly, can make the job easier for many web developers.<\/span><\/p>\n\n\n\n

URL API<\/h2>\n\n\n\n

As the name suggests, the <\/span>URL API is used to work with URL addresses.<\/b> URL consists of several parts: protocol, hostname, port, path and query parameters.<\/span><\/p>\n\n\n

\n
\"\"<\/a><\/figure><\/div>\n\n\n

With this API we can not only find out the individual parts, but we can also easily modify them.<\/span><\/p>\n\n\n\n

At the beginning we create a new object of URL type, where we put the URL address we want to work with as input parameter.<\/span><\/p>\n\n\n\n

For example:<\/b><\/p>\n\n\n\n

var<\/span> url <\/span>=<\/span> new<\/span> URL<\/span>(<\/span>\"https:\/\/www.nejaka-stranka.test\/blog\/clanky?datum=2021-06-22&stranka=3\"<\/span>);<\/span><\/pre>\n\n\n\n
If we want to get the GET value of the <\/span>date<\/b> parameter, we simply do it via:<\/span><\/p>\n\n\n\n
console<\/span>.<\/span>log<\/span>(<\/span>url<\/span>.<\/span>searchParams<\/span>.<\/span>get<\/span>(<\/span>\"datum\"<\/span>));<\/span><\/pre>\n\n\n\n
We can list all GET parameters by iterating the value of <\/span>searchParams<\/b>:<\/span><\/p>\n\n\n\n
for<\/span> (<\/span>let<\/span> p <\/span>of<\/span> url<\/span>.<\/span>searchParams<\/span>)<\/span> {<\/span>\nconsole<\/span>.<\/span>log<\/span>(<\/span>p<\/span>);<\/span>\n}<\/span><\/pre>\n\n\n\n
We will use the <\/span>set method to modify the parameter<\/b>.<\/span> In addition to modifying an existing parameter, we can use the same method to add a new parameter.<\/span><\/p>\n\n\n\n
url<\/span>.<\/span>searchParams<\/span>.<\/span>set<\/span>(<\/span>\"datum\"<\/span>,<\/span> \"2020-09-28\"<\/span>);<\/span>\nurl<\/span>.<\/span>searchParams<\/span>.<\/span>set<\/span>(<\/span>\"novyParameter\"<\/span>,<\/span> \"35\"<\/span>);<\/span><\/pre>\n\n\n\n
When we subsequently want to get the whole URL back as a text string, we call the toString() method:<\/span><\/p>\n\n\n\n
console<\/span>.<\/span>log<\/span>(<\/span>url<\/span>.<\/span>toString<\/span>());<\/span><\/pre>\n\n\n\n
History API<\/b><\/h2>\n\n\n\n
We can use the History API to manipulate the history of the browser. For example, we can replace the Back and Next buttons. We will use the <\/span>back()<\/b> method to go back 1 page:<\/span><\/p>\n\n\n\n
history.back();<\/span><\/pre>\n\n\n\n
Similarly, if we want to go one page forward in the history, we use the <\/span>forward()<\/b> method:<\/span><\/p>\n\n\n\n
history<\/span>.<\/span>forward<\/span>();<\/span><\/pre>\n\n\n\n
If we want to move several pages in the history, we use the <\/span>go()<\/b> method. This method has the number where we want to move in the history as input parameter. For example, the number <\/span>-3<\/b> means that we want <\/span>to move 3 pages back<\/b>. If we use 0 as the parameter, or omit the parameter, the current page will be refreshed.<\/span><\/p>\n\n\n\n
history<\/span>.<\/span>go<\/span>(-<\/span>3<\/span>);<\/span><\/pre>\n\n\n
\n
\"\"<\/a><\/figure><\/div>\n\n\n
HTML5 has introduced 2 new methods to History API: <\/span>pushState()<\/b> and <\/span>replaceState()<\/b>. These methods modify the history without refreshing the page. They’re very useful for single-page applications that consist of different subpages. We can move between subpages without refreshing the page. The History API is also used in frameworks such as Nuxt.js or React Router.<\/span><\/p>\n\n\n\n
History in single-page applications behaves like a stack. The <\/span>pushState()<\/b> method inserts a new record at the top of the stack. The <\/span>replaceState() <\/b>method modifies the record we are currently on. When we go back a few pages in the history and then call <\/span>pushState()<\/b>, the entire history of the following pages is replaced by one new record.<\/span><\/p>\n\n\n\n
Both methods have 3 input parameters:<\/b><\/p>\n\n\n\n