The anatomy of a URL/I

Name Example(s) Purpose Notes
Protocol(location.protocol) file:///, http://, https://, git://, ftp://, ws://, ssh://, mailto:, tel: Determines the way in which the required resource is gained
  • You can sometimes combine them: git + ssh://
  • If you write a url in a page without specifying one (e.g. //test.com/test.js) then whatever protocol you're using to load the page will be used to retreive that resource
Domain Name(location.hostname) slides.com, amazon.co.uk This human-readable name maps to an external IP address (e.g. 74.125.224.72) held by machines called routers (in a routing table). It is like an 'address' for the servers to which you want to send the request. The routers use this address to direct your request to the right servers.
Port(location.port) :80, :443 Ports are like different doors to the server. Having ports means that a server can direct traffic and run multiple hostings and services at once
Path(location.pathname) /cats/about.html Specifies which particular resource you wish from that server
Parameters (alias: query string)(location.search) ?page=4&filter=persians Passes supplementary data for the server to use when processing your request.
Anchor (alias: hash)(location.hash)
  • Normal link to an id in the page: #about
  • Client side Routing: #players or #players/4/7

This part of the URL originaly referenced an id on your page. If there is a matching id your browser will jump the page to it. This is called deep linking.

Later on, this part of the URL was used for 'Client-side Routing'. This allows SPAs (Single Page Applications) to keep track of their state.

SPAs use a thing called html5mode to hide the hash. So you may see http://test.com/teams/15/players, but what you're actually looking at is http://test.com#teams/15/players.

There is an event you can listen to when the hash gets manipulated, called onHashChange.

As you can see from the first column, All of these properties are available to you in javascript via the location object (window.location).

Your browsing history is also viewable and manipulable through HTML5 History API and is available in the history object (window.history).

Both history and location case sensitive, so location, not Location. (The title-cased versions are the contructor functions for those objects.)