How JavaScript Works: JavaScript Location Object And How Protocols Work
This is post # 74 of the series, dedicated to exploring JavaScript and its building components. In the process of identifying and describing the core elements, we also share some rules of thumb we use when building SessionStack, a JavaScript application that needs to be robust and high-performing to help companies optimize the digital experience of their users.
Introduction
Since many people utilize JavaScript to create web-based applications, it is important to understand the dynamics of a URL (Uniform Resource Locator) that can also be called a location With hypertext and HTTP (Hyper Text Transfer Protocol), a URL (uniform resource loader) allows you to retrieve published resources from the web.
A URL is an address that points you to a unique page. It points to a unique resource from the web. For instance, you can retrieve images, web pages (HTML), and CSS documents by pointing to a valid URL. However, if you point to an invalid URL or where the resources have been moved, it will return an error.
URLs consist of a protocol (HTTP). And this is an application layer protocol that allows the transfer of information between devices. Here, the client, which is usually a web browser, sends requests called HTTP requests. Next, it communicates with the web server and fetches the requested resources.
Let’s explore JavaScript’s location object, its anatomy, and how protocols work — focusing on HTTP.
Anatomy of a URL
A URL consists of the complete information to create a web address. Think of a URL as a postal address. The postal address is the postal service you’ll want to use. The domain name represents the city or town where you live, the port is like the postal code, and the file path is like your house of residence. The query string parameters are the extra information like your building number.
Types of URL
There are two basic types of URLs, absolute and relative URLs. The difference between these URLs is their formation and usage. Let’s explore them.
Absolute URL
An absolute URL is a full URL. From the URL example above, we can see that we have a full URL, with the protocol, domain name, etc. Implicit domain names //developer.mozilla.org/en-US/docs/Learn are also classified as absolute URLs, since the browser will call that URL with the same protocol as the one used to load the document hosting that URL. Another example of an absolute URL is an implicit domain name /en-US/docs/Learn. This is mostly used within an HTML document.
Relative URL
A relative URL is not a full URL, since it contains only the path. However, this URL uses the same protocol, subdomain, and domain as the page it’s on since it only contains the URL path. A usage example of this URL is pointing to files in the same directory or loading HTML pages or associated files.
Protocol
The first part of a URL is the scheme. The scheme describes the protocol used for accessing the information from the web. For web resources, it can be an HTTP with or without SSL.
Domain Name
The next part of a URL is the authority. The authority is the domain name that points us to the web server or the represented authority — — from where information is retreived. Most times, the domain name can be a string. Sometimes, an IP address is used, although much less convenient.
Port Number
The port number of a web URL is used for identifying a network service or process. The port number is always associated with the URL authority (IP address/domain). Specific port numbers are reserved to identify specific services so that an arriving packet is forwarded easily to a running application. For instance, HTTP uses port 80, and port 443 is reserved for HTTPS.
Path
The file path is the location of the file on the web server. With this string, the server knows exactly where to fetch the file the client is requesting.
Query Parameters
The query parameter refers to extra parameters used by the webserver to do extra stuff. These parameters consist of key and value pairs that are separated by an (&) ampersand symbol. For instance, when trying to retrieve an image of a specific ID from a web server, you’ll get something like this.
?id1=image1&id2=image2
JavaScript Location Object
The location object is a property of the window and document object. The location object consists of properties that allow you to access and manage documents from a web resource. And in this section, we’ll explore the location object, its properties, and methods.
Properties
JavaScript properties involve the collection of values that are associated with a Javascript object. In this section, we’ll explore the location object’s properties.
AncestorOrigins
This property location.ancestorOrigin is a read-only property of the location interface that contains, in reverse order, the origins of all ancestor browsing contexts of the document associated with the given location object.
You can use this property to determine the behavior of the document based on what site or list of sites is framing it.
Hash
The hash location.hash of a URL returns the ID of the targeted page. When you use this property, it’ll return a hash followed by the ID of the page.
Host
The host property location.host returns the host of the URL. If the port number of the URL is non-empty, this property will also return a semicolon : and port number.
Port
With the location.port property, you can print only the port number of the URL. If the URL doesn’t contain an explicit port number, it’ll return an empty string ’’.
Hostname
If you want to access the hostname of a URL alone, you can use the hostname location.hostname property. Notice that this wouldn’t return the port number.
Href
The href property, allows you to view and manage a web URL. With the location.href property, you can access the full URL. You can also alter or change the value of href. For instance, you can use the location.replace() method to redirect href.
Origin
With the location.origin property, you can print the origin of the represented URL. This read-only property returns a string containing the Unicode serialization of the origin of the URL.
Pathname
The location.pathname property, allows you to access the pathname of your URL. If the pathname is empty, this will return an empty string ””.
Protocol
With the protocol property location.protocol, developers can manage the protocol scheme of the URL of interest.
Methods
JavaScript objects have a lot of methods, which lets managing and accessing objects straightforward. Here’s a list of JavaScript location methods.
Assign
The assign method assign(URL), allows the loading and display of the resource, at the specified URL. For example, when a user tries to navigate to a URL, the assign(URL) method is called, to load and display the document.
If the assignment isn’t successful, because of a security violation, a DOMException of the SECURITY_ERROR is thrown. This can happen if the origin of the script call is different from the origin of the page.
Reload
The reload() method reloads the current URL. This method is called when you hit the refresh button of the browser.
Replace
With the replace button replace(), developers can replace the current resource with that provided in the URL. The difference between this method and the assign(URL) method is that after using replace(), the current page won’t be saved in the history session.
toString
The toSting() method is a read-only alias to the location.href property. With this method, you can print a string of the complete URL of interest.
What is Internet Protocol
A protocol is a set of rules or procedures for transmitting data. Internet protocol is a type of protocol that governs how data communication and exchange is done over the Internet. To communicate properly anywhere, the sender and receiver must understand themselves properly. This also applies to communication over the Internet. Therefore, the sender and receiver should communicate with the same protocol over the internet.
In internet communication, data is broken down into data packets — smaller bits. And the reason for this is for faster data transmission, which won’t be possible when huge data is sent in lumps. Each network protocol specifies how these data packets are organized and sent across the internet. For instance, different networks around the world have different data transfer rates, it is the protocol that manages the rules for the data packet size to be sent across.
There are different types of internet protocols. The Internet protocol suite is commonly made up of three layers.
Application Layer
The application layer provides user services like formatting messages so that the message from the user is in the acceptable format for the receiver. It also facilitates file transfer over the Internet. Protocols classified under the application layer are as follows:
- HTTP (HyperText Transfer Protocol): This protocol is in-charge of hypertext transfer over the world wide web (www).
- File Transfer Protocol (FTP): The file transfer protocol governs the transfer of files between client and server over the network. For instance, this protocol governs the transfer of files like images, and documents, over physical devices like computers. Where one computer serves as the client and the other the server.
- SMTP (Simple Mail Transfer Protocol): The simple mail transfer protocol ensures the smooth transfer of electronic mail (emails). Therefore, when an individual sends or receives an email, they communicate with this protocol.
- HTTPS (HyperText Transfer Protocol Secure): This is an extension of HTTP, it uses the SSL/TLS protocol for authentication and encryption.
Although they’re other protocols classified under the application layer, like the terminal network (TELNET) and secure shell protocol (SSH), etc. Let’s explore the transport layer.
Transport Layer
The transport layer ensures that the data transfer is smooth and seamless. For instance, the transport layer implements flow control, which provides a mechanism for the receiver to control the transmission speed. This is to avoid overwhelming the receiving node with data from the transmitting node.
- TCP (Transmission Control Protocol): The transmission control protocol is connection-oriented, allowing data to be shared in both directions. This way, if an error occurs it’ll be propagated to the sender.
- UDP (User Datagram Protocol): The user datagram protocol is connectionless. This method doesn’t allow for error checking, it also reduces the workload of opening a connection and terminating a connection.
Internet Layer
The internet layer ensures the smooth transmission of network packets to the link layer. It makes this possible, by sending data across different networks via routing.
- Internet Protocol (IP): The internet protocol has two versions:v4 and v6. But v4 is the first version. The internet protocol addresses host interfaces and encapsulates data into datagrams.
Data Link Layer
A link layer is a group of methods and communication methods in the link that is physically connected a host. For example, the point-to-point (PPP) protocol is used to create a direct connection between two communicating devices.
Conclusion
In JavaScript, we have libraries to work with all kinds of network protocols. For instance, there’s the HTTP library that allows you to communicate with the HTTP server. JavaScript also allows you to communicate and manage data from the server using HTTP methods. We also have the WebSocket library, that allows developers to communicate with the web browser using a TCP connection.
In this article, we have explored JavaScript location objects. We’ve discussed the properties, methods of this object, and how to use them. Next, we explored the Internet protocol suite, the different layers, and the different protocols in each layer.
Transmitting and transferring data over the internet is a very delicate subject. And this is because, if not properly secured, intruders can eavesdrop on conversations or even steal information. If you want to learn more about cryptography and data security, read this article on cryptography and how to deal with man in the middle attack.
So if your application transfers data over the internet, you should make sure that proper security measures are taken to make your products provide a better experience for your users.
But even if you feel like the proper decisions have been made, it’s always necessary to verify that this is indeed true and your users have a great experience with your product.
For us at SessionStack, optimizing every bit of our code has been crucial.
The reason is that our library gets integrated into web apps and collects data from user sessions, such as user events, DOM changes, network data, exceptions, debug messages, and so on. Capturing this data without causing any performance impact has been a challenge that we’ve successfully solved.
This data is then processed and allows you to replay user journeys as videos to optimize product workflows, reproduce bugs, or see where users are stuck.
There is a free trial if you’d like to give SessionStack a try.
Interested in more about JavaScript? Check out all “How JavaScript works” publications here.
