JavaScript Location Object

JAVASCRIPT BASICS

• Introduction to JavaScript
• Javascript Features
• JavaScript in HTML
• JavaScript Syntax
• Output in JavaScript
• JavaScript Variables
• Javascript let Keyword
• JS Literals and Keywords
• JavaScript Data Types
• JavaScript Operators
• JavaScript Events
• Javascript const Keyword

JAVASCRIPT FLOW CONTROL AND LOOPS

• JS if, else and else if
• JavaScript for Loop
• JS while and do-while loop
• JS Switch case
• JS break and continue

JAVASCRIPT ADVANCED

• JavaScript Strings
• JavaScript String Methods
• JavaScript Array
• JavaScript Regular Expression
• JavaScript Popup Boxes
• JavaScript Functions
• JavaScript Default Parameters
• JavaScript Rest Parameters
• JavaScript Arrow Function
• JavaScript Errors
• JavaScript Error Handling
• JavaScript Cookies

JAVASCRIPT OBJECT

• JavaScript Objects
• JavaScript User-defined Object
• JavaScript Boolean Object
• JavaScript Number Object
• JavaScript Math Object
• JavaScript Date Object
• JavaScript RegExp Object

JAVASCRIPT WEB API AND INTERFACES

• JavaScript Browser Object
• JavaScript Window Object
• JavaScript History Object
• JavaScript Navigator Object
• JavaScript Location Object
• JavaScript Screen Object
• JavaScript Document Object

JavaScript Location is a built-in Interface (object type) which represents the location (URL) of the object to which it is attached. Both the Window object and the Document object have this property. The window objects location property gives us access to the browser window’s location whereas the document location property gives us the location object for a particular document.

It is used to fetch information of the current URL. The Location object allows you to navigate to another webpage as well.

Get Website Host name

    <script>
         var x = location.hostname;
        document.write(x);

    </script>
</body>

There are many different properties of the location object and many methods too.

JavaScript Location Object Properties

JavaScript Location Object has many properties using which we can access the various components of a webpage’s URL and even change it.

Here are some commonly used properties for the location object:

Property	Description
href	Represents a string specifying the entire URL, for instance
protocol	Represents a String at the begining of a URL to the first colon(:),which specifies the Method of access to the URL , for instance http: or https:
host	Represents a String consisting of hostname and port Strings,for instance:- http://www.javascriptstudytonight.com:80
hostname	Represents the server name, subdomain, and domain name (or IP address)of a URL, for instance http://www.javascriptstudytonight.com
port	Represents a string specifying the communication port that the server uses, for instance 80
pathname	Represents a String Portion of a URL, specifying how a particular resource can be accessed, for instance: order.cgi
search	Represents a string beginning with a question mark that specifies any query information in an HTTP URL, for instance batch=1
hash	Represents a string beginning with a hash(#), which specifies an anchor name in an HTTP URL, for instance #intro

Let’s take an example and get to know about the properties of Location object.

Location Properties

    <script>
        // Hostname
        let x = location.hostname;
        document.write(x +"<br>");
        // href
        x = location.href;
        document.write(x +"<br>");
        // protocol
        x = location.protocol;
        document.write(x +"<br>");
        // host
        x = location.host;
        document.write(x +"<br>");
        // pathname
        x = location.pathname;
        document.write(x +"<br>");
    </script>
</body>

Now let’s see the methods of the location object.

JavaScript Location Object Methods

Location Object methods refers to the functions created inside the location interface which can be used to perform various operations on the URL like reload it, change it, etc.

Method	Description
assign()	Loads a new Document in the Browser
reload()	Reloads the current document that is contained in location.href property.
replace()	Replaces the current document with the specified new one. In addition, you cannot navigate back to the previous document using the Browser’s back button.

To load a new document, We can use the assign() method of Location object. But in this example, we have used the href property and the replace() methods too. They all can be used to load a document.

Location Methods example

    <button onclick="load1()">visit studytonight.com</button>
    <button onclick="load2()">visit studytonight.com</button>
    <button onclick="load3()">visit studytonight.com</button>

    <script>
        // assign method
        function load1(){
            location.assign("https://www.studytonight.com");
        }

        // href
        function load2(){
            location.href="https://www.studytonight.com";
        }

        // replace()
        function load3(){
            location.replace("https://www.studytonight.com");
        }

    </script>
</body>

< prev

next >