In our previous lessons, we've been learning about the Browser Object Model (BOM) and its various components. So far, we've covered the Window object and its methods, such as alert, confirm, and prompt. Now, let's move on to another important part of the BOM: the Location object.
The Location object is a part of the BOM that represents the current URL of the webpage. It provides information about the URL, such as the protocol, hostname, pathname, and more. The Location object also allows you to manipulate the URL, which can be useful for navigating between pages or loading new content.
Think of the Location object as a map that shows you where you are on the web. It gives you information about the current URL and allows you to navigate to new URLs.
Before we dive into the properties and methods of the Location object, it's important to understand the context in which it's used: the window object.
The window object is the global object in a web browser that represents the browser window or tab. It contains properties and methods for controlling the browser window, accessing the browser's history, and manipulating the document content.
The location object is a property of the window object. When you use window.location, you're accessing the Location object associated with the current browser window or tab. This is why we often use the syntax window.location to interact with the Location object.
The Location object has several properties that provide information about the current URL. Here are some of the most important ones:
href: This property returns the entire URL of the webpage, including the protocol, hostname, pathname, and query string.protocol: This property returns the protocol part of the URL, such as "http:" or "https:".hostname: This property returns the hostname part of the URL, such as "www.example.com".pathname: This property returns the pathname part of the URL, such as "/path/to/page".search: This property returns the query string part of the URL, such as "?query=string".hash: This property returns the fragment identifier part of the URL, such as "#anchor".These properties can be used to get information about the current URL, and to manipulate the URL.
The Location object also has several methods that allow you to manipulate the URL. Here are some of the most important ones:
assign(): This method loads a new URL into the browser window.replace(): This method replaces the current URL with a new one, without adding a new entry to the browser's history.reload(): This method reloads the current URL, which can be useful for updating the page after making changes.These methods can be used to navigate between pages, or to load new content.
Let's see some examples of how we can use the Location object. We'll use JavaScript code to get information about the current URL and to navigate to new URLs.
<!DOCTYPE html>
<html>
<head>
<title>Location Object Example</title>
</head>
<body>
<script>
// Get the current URL
const currentURL = window.location.href;
console.log("Current URL: " + currentURL);
// Get the protocol part of the URL
const protocol = window.location.protocol;
console.log("Protocol: " + protocol);
// Get the hostname part of the URL
const hostname = window.location.hostname;
console.log("Hostname: " + hostname);
// Get the pathname part of the URL
const pathname = window.location.pathname;
console.log("Pathname: " + pathname);
// Get the search query part of the URL
const search = window.location.search;
console.log("Search query: " + search);
// Get the hash part of the URL
const hash = window.location.hash;
console.log("Hash: " + hash);
// Load a new URL into the browser window
// window.location.assign("https://www.example.com");
// Replace the current URL with a new one
// window.location.replace("https://www.example.com/new-page");
// Reload the current URL
// window.location.reload();
</script>
</body>
</html>
This example demonstrates how to use various properties of the Location object to get information about the current URL. Uncomment the lines with window.location.assign, window.location.replace, and window.location.reload to see how these methods work in action.
In this lesson, we've learned about the Location object and its properties and methods. We've also seen how to use the Location object to manipulate the URL and navigate between pages. The Location object is an important part of the BOM, and understanding how to use it can help you build more dynamic and interactive web applications.
We'll continue to explore the BOM and its components in future lessons. Stay tuned!