DEV Community: Utibeabasi Umoren

DOM... What is it?

Utibeabasi Umoren — Tue, 07 May 2024 15:55:49 +0000

In the bygone eras of the web, before frameworks and libraries, there was a whisper... a murmur... a legend... DOM. For those brave souls who ventured into the uncharted territories of pure JavaScript, the DOM was both their weapon and their shield. But what exactly is this DOM you ask? Buckle up, young and brave developer, for we are about to embark on a journey to unveil its secrets!

DOM stands for Document Object Model. There are many ways to describe or define what exactly it is and I will list some of the common descriptions.

It is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
It's a programming interface for web documents. It represents the structure of HTML or XML documents as a tree-like model where each node represents a part of the document, such as elements, attributes, and text. All of these above descriptions are very much correct as long as it gives us one very important key point which is “accessing the document - be it HTML or XML.

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

Don’t fret, let me break it down.
Imagine a web page as a big tree. Each branch and leaf represents different parts like text, images, buttons, etc. The DOM (Document Object Model) is like a map of this tree. It helps programs (like JavaScript) understand and change what's on the page. So, if you want to move a leaf or add a new branch (like changing text or making a button do something when clicked), you can use the DOM to do it.
It's a programming interface for web documents. It represents the structure of HTML or XML documents as a tree-like model where each node represents a part of the document, such as elements, attributes, and text.

Below is a pictorial representation of what the DOM looks like.

In this tree:

The root element represents the entire HTML document, typically the <html> tag.
The branches represent elements within the document, such as <head>, <body>, headings (<h1>, <h2>), paragraphs (<p>), and more.
The leaves represent text content within the elements. Each element in the DOM tree has attributes that provide additional information, like the id or class of an element. These attributes are not typically shown in a basic DOM tree visualization but are important for styling and manipulating elements using JavaScript. The DOM tree structure reflects the hierarchical organization of an HTML document. By understanding the DOM, developers can manipulate and interact with the content and structure of a web page using languages like JavaScript.

The W3C DOM standard is separated into 3 different parts:

Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents What is the HTML DOM? The HTML DOM is a standard object model and programming interface for HTML. It defines:

So, for context, we will be using more HTML DOM.

The DOM Programming Interface
The HTML DOM can be accessed with JavaScript (and with other programming languages).
In the DOM, all HTML elements are defined as objects.

The programming interface is the properties and methods of each object.

A property is a value that you can get or set (like changing the content of an HTML element).
A method is an action you can do (like add or deleting an HTML element).

The following example changes the content (the innerHTML) of the

element with id="demo":

{ <html>
<body>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html> }

In the example above, getElementById is a method, while innerHTML is a property.

The getElementById method: the most common way to access an html element is to use the id of the element
The innerHTML property: the easiest way to get the content of an element is by using the innerHTMK property and it is used for getting and replacing the content of the html elements.

DOM SELECTORS
The selectors are used in the document (DOM) to manipulate web elements.

FEW EXAMPLES OF DOM SELECTORS

getElementsByTagName (""): as the name implies, it gets the element by its tag name. getElementByTagName("h1")
getElementsByClassName(""): gets the html documents by the class name given to a particular content.
getElementById(""): gets the Id class of an element.
Notice here that it is only in getElementById the word "Element" is singular because it has just one ID.
getElementById shows the full html content made for that id
in order to access the full content of the other dom selectors you do, getElementByClassName("you tag the classname")[o] - calling the zero index of the array

QUERY SELECTOR / QUERY SELECTOR ALL
document.querySelector ("the tag you want to select")
query selector selects only the first item that it finds. and on the other hand, document.querySelectorAll selects all the items on the tag
Get Attribute / Set Attribute
in document.getAttribute, you need to select the element first in order to be able to use the getAttribute method (that is, document.querySelector("").getAttribute("");)
brief example
document.querySelector("li").

So there you have it, intrepid developer! The mystery of the DOM is unveiled. We almost had to reveal the real secret behind the DOM but let's just keep that between us developers.
You've officially graduated from DOM newbie to DOM... well, maybe not quite a master, but at least you're no longer completely lost.
Now go forth and conquer those web pages, armed with the knowledge of this (not-so-magical) model. Shall we?

THE FASCINATING HISTORY OF THE INTERNET. PERKS: DNS, NETWORK PACKET, FTP, HTTP & HTTPS.

Utibeabasi Umoren — Tue, 09 Apr 2024 20:04:53 +0000

THE HISTORY OF THE INTERNET

Why was the internet created? In the 1950s and 60s, the United States was engaged in the Cold War with the Soviet Union. Each country was working to increase its science and technology capabilities in order to prevent nuclear attacks from the other, and also remain capable of attacking the other should the situation devolve. At that time, computers were much larger and more expensive than today's models. Mainframe computers took up entire rooms, and were only able to do specific tasks. Researchers needed to be able to use the computers to perform these tasks, but often had to travel long distances to find a computer to do a specific task. The proposed solution was a way to connect the computers so they could speak to each other, allowing researchers to share data without needing to travel to the location of the computer.

Mainframe computers were the first to be connected by the internet.

How was the internet created? The problem with having computers to communicate with each other was that the method of transferring data from one computer to another, circuit switching, took a long time and could easily be interrupted. All of the data had to be sent in one packet, and if the connection was interrupted at any time during the process, none of the data would get through. Scientists developed a different method called packet switching to overcome this problem. With packet switching, the data could be broken up into smaller segments, and each segment could be sent individually. The smaller amounts of data took less time to transfer, and if an interruption occurred, some of the data would have made it through and the process could be continued without having to start over completely. Once the data reached its destination, the packets were able to be re-assembled into a complete packet.
The evolution of the internet continued from here. Packet switching allowed computers to connect to each other over a network called ARPANET, the Advanced Research Projects Agency Network.

When did the internet start? In 1969, the first computers communicated over ARPANET from UCLA to SRI in California. This initial network only had four nodes, but more were added to allow research universities to share data and other resources. After ARPANET, other networks were developed, but the individual networks could not communicate with each other. In order to solve this problem, a set of rules called the Transmission Control Protocol and Internet Protocol were developed, known as TCP/IP. These rules allowed for universal communication across all networks, and made sure that packets sent over a network would be delivered to the correct destination.

This 1982 map shows the entire internet at the time; each oval is a network, and each rectangle is a router.

When was the internet introduced to the public? The World Wide Web was launched in 1991. The Web allows users from any connected computer to locate resources and web pages using Uniform Resource Locators, or URLs. The URL functions as an address that tells the computer where to find the resource on the internet. The Web also uses HTTP, Hypertext Transfer Protocol, to enable users to download linked resources, and HTML, Hypertext Markup Language, the formatting language for web pages. Although people often refer to the Web as the internet, it is actually a service that runs on the internet, not the internet itself.

Summary Of The History Of The Internet

The history of the internet is a fascinating journey spanning several decades, characterized by technological advancements, collaborations, and the evolution of communication. Here's a brief overview

1960s: The origins of the internet can be traced back to the 1960s when the United States Department of Defense's Advanced Research Projects Agency (ARPA) initiated a research project called ARPANET. The goal was to create a decentralized communication network that could withstand a nuclear attack.
1970s: ARPANET became operational in 1969, connecting four major universities in the United States. In the early 1970s, email was introduced, allowing users to communicate electronically over the network. As ARPANET expanded, it laid the foundation for the internet by developing protocols like TCP/IP (Transmission Control Protocol/Internet Protocol), which became the standard for data transmission.
1980s: The National Science Foundation (NSF) created NSFNET in 1986, a network linking supercomputing centers across the United States. This expansion significantly increased internet usage. Tim Berners-Lee invented the World Wide Web in 1989 while working at CERN, proposing the concept of hypertext to facilitate the sharing of information globally.
1990s: The 1990s witnessed exponential growth in internet usage and the commercialization of the web. Web browsers like Netscape Navigator and Internet Explorer made the internet more accessible to the general public. Companies began building websites, and e-commerce emerged. Search engines such as Yahoo!, AltaVista, and eventually Google revolutionized information retrieval.
2000s: The early 2000s saw the rise of social media platforms like MySpace, Facebook, and later Twitter, transforming how people connect and share information online. Broadband internet became more widespread, enabling faster connections and multimedia content consumption. The launch of smartphones and mobile internet further revolutionized internet usage, making it accessible on-the-go.
2010s: The 2010s witnessed the dominance of smartphones and the proliferation of mobile apps. Cloud computing became mainstream, facilitating the storage and access of data over the internet. Streaming services like Netflix and Spotify revolutionized entertainment consumption, while platforms like Uber and Airbnb transformed industries.
2020s: The internet continues to evolve rapidly, with advancements in artificial intelligence, blockchain technology, and the Internet of Things (IoT) shaping its future. Privacy concerns, cybersecurity threats, and debates over net neutrality remain significant challenges as the internet becomes increasingly intertwined with daily life worldwide.

Throughout its history, the internet has transformed communication, commerce, and culture, connecting people globally and reshaping how information is accessed and shared.

Ever Wondered What DNS Is?

DNS stands for Domain Name System. It's essentially like a phone book for the internet.
Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.

When you type a domain name (like www.example.com) into your web browser's address bar, your computer needs to know the IP address (a numerical label assigned to each device connected to a computer network) associated with that domain name in order to access the website. This is where DNS comes into play.

Each device connected to the Internet has a unique IP address which other machines use to find the device. DNS servers eliminate the need for humans to memorize IP addresses such as 192.168.1.1 (in IPv4), or more complex newer alphanumeric IP addresses such as 2400:cb00:2048:1::c629:d7a2 (in IPv6).

DNS translates domain names into IP addresses, allowing your computer to locate and connect to the correct web servers. It works by storing a distributed database of domain names and their corresponding IP addresses. When you enter a domain name into your browser, your computer sends a query to a DNS resolver, which then checks its local cache for the corresponding IP address. If the IP address is not found in the cache, the resolver sends a request to a series of DNS servers until it finds the correct IP address. Once the IP address is retrieved, your computer can establish a connection to the web server hosting the desired website.

In summary, DNS is a crucial component of the internet infrastructure that translates human-readable domain names into machine-readable IP addresses, enabling seamless communication and access to websites and other online resources.

What Is a Network Packet?

A network packet is a unit of data transmitted over a network. It contains both the actual data being transmitted and the necessary metadata for routing and delivery.

When data is transmitted over a network, it is broken down into smaller chunks called packets. Each packet typically consists of a header and a payload.

Header: The header contains metadata such as the source and destination IP addresses, port numbers, sequence numbers, checksums, and other control information necessary for routing and delivery of the packet. It provides instructions to network devices on how to handle the packet as it travels through the network.
Payload: The payload contains the actual data being transmitted, which could be anything from a part of a file to a segment of a web page, an email message, or any other type of digital content.

Network packets are the fundamental units of communication in computer networks, including the internet. They are transmitted from one network device (such as a computer, router, or server) to another, following a set of protocols and standards to ensure reliable and efficient data transmission. Packet switching is the method by which packets are routed through the network from the source to the destination, allowing for flexible and dynamic routing of data across complex networks.

What Is FTP?

FTP stands for File Transfer Protocol. It is a standard network protocol used for transferring files between a client and a server on a computer network, typically the internet.

Image credit: investopedia

FTP operates on a client-server architecture, where one computer acts as the FTP server and another computer (or multiple computers) acts as the FTP client(s). The client initiates a connection to the server, typically using TCP/IP as the underlying protocol, and authenticates itself using a username and password.

Once authenticated, the client can perform various file operations on the server, including:

Upload (put): Sending files from the client to the server.
Download (get): Retrieving files from the server to the client. 3.** List (ls)**: Listing the contents of directories on the server.
Delete (delete): Removing files from the server.
Rename (rename): Changing the names of files on the server.
Create directory (mkdir): Creating new directories on the server. 7.** Remove directory (rmdir)**: Deleting directories from the server.

FTP can be used with both graphical user interface (GUI) clients, which provide a user-friendly interface for managing files, and command-line clients, which allow users to interact with FTP using text commands.

While FTP is widely used for transferring files, it lacks built-in security features and sends data, including login credentials, in plain text, which makes it vulnerable to interception and unauthorized access. To address these security concerns, secure alternatives such as FTPS (FTP Secure) and SFTP (SSH File Transfer Protocol) have been developed, which encrypt data during transmission and provide stronger authentication mechanisms.

What Is HTTP?

HTTP stands for Hypertext Transfer Protocol. It is a protocol used for transmitting hypermedia documents, such as HTML files, over the World Wide Web. HTTP defines how messages are formatted and transmitted between web servers and web browsers, allowing for the retrieval and display of web pages, images, videos, and other resources.

Image credit: futurenow

HTTP operates on a client-server model, where a client, typically a web browser, initiates a request to a server, which hosts the desired resource. The server then processes the request and sends back a response containing the requested resource, along with status information indicating whether the request was successful or not.

Key features of HTTP include:

Statelessness: HTTP is stateless, meaning each request from a client to a server is independent and carries all necessary information for the server to fulfill the request. This simplifies communication between clients and servers but requires additional mechanisms (e.g., cookies, sessions) for maintaining state across multiple requests.
Request Methods: HTTP defines several request methods or verbs, including GET, POST, PUT, DELETE, HEAD, and OPTIONS, which indicate the desired action to be performed on a resource.
Headers: HTTP messages include headers, which contain metadata about the request or response, such as the content type, content length, caching directives, and authentication credentials.
Status Codes: HTTP responses include status codes, which indicate the outcome of the request. Common status codes include 200 (OK), 404 (Not Found), 500 (Internal Server Error), and others.
URLs (Uniform Resource Locators): HTTP uses URLs to specify the location of resources on the web. URLs consist of a scheme (e.g., http:// or https://), domain name or IP address, path, and optional query parameters.

HTTP has evolved over time, with newer versions introducing improvements in performance, security, and functionality. For example, HTTP/1.1 introduced features like persistent connections and content compression, while HTTP/2 introduced multiplexing and header compression to improve efficiency. Additionally, HTTPS (HTTP Secure) encrypts data transmitted over HTTP using Transport Layer Security (TLS) or its predecessor, Secure Sockets Layer (SSL), providing confidentiality and integrity for web communications.

What is HTTPS?

HTTPS stands for Hypertext Transfer Protocol Secure. It is an extension of HTTP, the protocol used for transmitting data over the World Wide Web, but with added security features. HTTPS encrypts the data transmitted between a web browser and a web server, ensuring that sensitive information such as login credentials, payment details, and personal data is protected from interception and tampering by malicious third parties.

Image credit: futurenow

HTTPS operates using Transport Layer Security (TLS) or its predecessor, Secure Sockets Layer (SSL), to encrypt data sent between the client and the server. This encryption process involves the following steps:

Handshake: The client initiates a connection to the server and requests a secure connection. The server responds by sending its digital certificate, which includes its public key and other information.
Authentication: The client verifies the authenticity of the server's digital certificate to ensure it was issued by a trusted Certificate Authority (CA) and has not been tampered with. This helps prevent man-in-the-middle attacks.
Key Exchange: The client and server negotiate a symmetric encryption key to be used for encrypting and decrypting data transmitted during the session. This key is securely exchanged using the server's public key.
** Data Transfer**: Once the secure connection is established, data transmitted between the client and server is encrypted using the symmetric encryption key, ensuring confidentiality and integrity.

By encrypting data in transit, HTTPS protects sensitive information from eavesdropping and unauthorized access, providing a secure browsing experience for users. Websites that use HTTPS display a padlock icon in the address bar of most web browsers, indicating that the connection is secure.

In addition to protecting user data, HTTPS also provides other benefits, such as:

Enhanced SEO: Search engines like Google prioritize secure websites in search results, giving HTTPS-enabled sites a ranking boost.
Trust and Credibility: HTTPS reassures users that their information is secure, enhancing trust in the website and its brand.
Compliance: Many regulations and standards, such as the General Data Protection Regulation (GDPR) and Payment Card Industry Data Security Standard (PCI DSS), require the use of HTTPS to protect sensitive data.

Overall, HTTPS is essential for ensuring the security and privacy of web communications in today's digital landscape.