|
9 | 9 | | [Working with `<template>` tag](#working-with-template-tag) | |
10 | 10 | | [Loading Script Dynamically](#loading-script-dynamically) | |
11 | 11 | | [Setting Timers and Intervals](#setting-timers-and-intervals) | |
| 12 | +| [The `location` and `history` Objects](#the-location-and-history-objects) |
12 | 13 |
|
13 | 14 | Below topics will be covered and for its practical application, [Planner Project](project_planner/) will be used as reference where concept of classes and functions are demonstrated: |
14 | 15 |
|
@@ -268,3 +269,53 @@ clearInterval(interval); |
268 | 269 | ``` |
269 | 270 |
|
270 | 271 | In this example, `clearTimeout` is used to cancel the timer and prevent the code from executing after the specified time. `clearInterval` works similarly for intervals. |
| 272 | + |
| 273 | +## The [`location`](https://developer.mozilla.org/en-US/docs/Web/API/Location) and [`history`](https://developer.mozilla.org/en-US/docs/Web/API/History_API) Objects |
| 274 | + |
| 275 | +In the Document Object Model (DOM), the `location` and `history` objects are used to interact with the browser's location and history. |
| 276 | + |
| 277 | +### The `location` object |
| 278 | + |
| 279 | +The `location` object represents the current location of the document, including the URL and any query parameters. You can use this object to get information about the current location or to navigate to a new location. Here are some examples: |
| 280 | + |
| 281 | +```javascript |
| 282 | +// Get the current URL |
| 283 | +const currentUrl = location.href; |
| 284 | + |
| 285 | +// Navigate to a new URL |
| 286 | +location.href = "https://www.example.com"; |
| 287 | + |
| 288 | +// Get the query parameters |
| 289 | +const queryParams = location.search; |
| 290 | +``` |
| 291 | + |
| 292 | +Readings: |
| 293 | + |
| 294 | +- [What is the DOM Location object?](https://www.educative.io/answers/what-is-the-dom-location-object) |
| 295 | + |
| 296 | +- [JavaScript Location](https://www.javascripttutorial.net/javascript-bom/javascript-location/) |
| 297 | + |
| 298 | +### The `history` object |
| 299 | + |
| 300 | +The `history` object represents the user's navigation history, including the pages they have visited and any back/forward navigation. You can use this object to navigate back or forward in the user's history or to get information about the history. Here are some examples: |
| 301 | + |
| 302 | +```javascript |
| 303 | +// Go back one page in the history |
| 304 | +history.back(); |
| 305 | + |
| 306 | +// Go forward one page in the history |
| 307 | +history.forward(); |
| 308 | + |
| 309 | +// Get the length of the history |
| 310 | +const historyLength = history.length; |
| 311 | +``` |
| 312 | + |
| 313 | +Both the `location` and `history` objects are part of the `window` object in the browser's global scope, so you can access them directly without needing to declare them first. |
| 314 | + |
| 315 | +Readings: |
| 316 | + |
| 317 | +- [Working with history object of HTML DOM](https://iq.opengenus.org/history-object-of-html-dom/) |
| 318 | + |
| 319 | +- [JavaScript History](https://www.javascripttutorial.net/javascript-bom/javascript-history/) |
| 320 | + |
| 321 | +- [JavaScript History Object](https://www.studytonight.com/javascript/javascript-history-object) |
0 commit comments