URL Types

When attaching an external JavaScript file to a web page, you need to specify a URL for the src attribute of the <script> tag.  A URL or Uniform Resource Locator is a path to a file—like another web page, a graphic, or a JavaScript file—located on the Web. There are three types of paths:

  • absolute path
  • rootrelative path
  • document-relative path

All three indicate where a web browser can find a particular file.  An absolute path is like a postal address–it contains all the information needed for a web browser located anywhere in the world to find the file.  An absolute path includes http://, the hostname, and the folder and name of the file.  For example: http://www.mojodigitalsolutions.com/scripts/site.js.  A root-relative path indicates where a file is located relative to a site’s top-level folder–the site’s root folder.  A root-relative path doesn’t include http:// or the domain name. It begins with a / (slash) indicating the site’s root folder–the folder the home page is in. For example, /scripts/site.js indicates that the file site.js is located inside a folder named scripts, which is itself located in the site’s top-level folder. An easy way to create a root-relative path is to take an absolute path and strip off the http:// and the host name. For example, http://www.mojodigitalsolutions.com/index.html written as a root-relative URL is just /index.html.

A document-relative path specifies the path from the web page to the JavaScript file. If you have multiple levels of folders on your website, you’ll need to use different paths to point to the same JavaScript file. For example, suppose you have a JavaScript file named site.js located in a folder named scripts in your website’s main directory. The document-relative path to that file will look one way for the home page–scripts/site.js–but for a page located inside a folder named about, the path to the same file would
be different; ../scripts/site.js–the ../ means climb up out of the about folder, while the /scripts/site.js means go to the scripts folder and get the file site.js.

Here are some tips on which URL type to use:

  • If you’re pointing to a file that’s not on the same server as the web page, you must use an absolute path. It’s the only type that can point to another website.
  • Root-relative paths are good for JavaScript files stored on your own site. Because they always start at the root folder, the URL for a JavaScript file will be the same for every page on your website, even when web pages are located in folders and sub folders on your site. However, root-relative paths don’t work unless you’re viewing your web pages through a web server—either your web server out on the Internet, or a web server you’ve set up on your own computer for testing purposes. In other words, if
    you’re just opening a web page off your computer using the browser’s File→ Open command,  the web browser
    won’t be able to locate, load, or run JavaScript files that are attached using a root-relative path.
  • Document-relative paths are the best when you’re designing on your own computer without the aid of a web server. You can create an external JavaScript file, attach it to a web page, and then check the JavaScript in a web browser simply by opening the web page off your hard drive. Document-relative paths work fine when moved to your actual, living, breathing website on the Internet, but you’ll have to rewrite the URLs to the JavaScript file if you move the web page to another location on the server.

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.