History of Web & Browser
In this, I have tried to summarize "Chapter 13: JavaScript And The Browser" of the book "Eloquent JavaScript".
Introduction
Web Technology has been decentralized from the start. Various browser vendors have added new functionality in ad-hoc. Due to this, it is empowering to not have a central party control over the system.
Presently, the resulting system is not exactly a shining example of internal consistency. Some parts of it are downright confusing and poorly conceived.
Networks and Internet
Generally, Networking is inferred as the connection between PC via a networking cable(viz. ethernet, HDMI, USB etc). However, the Internet is capable to connect all networking devices.
The computer can use this network to shoot with set another computer. The computers on both ends must know what the bits are supposed to represent. Any given sequence of bits depends entirely on the kind of thing that it is trying to express and on the encoding mechanism used.
Network protocol describes a style of communication over a network.
There are protocols for sending email, fetching email, etc. We have a hypertext transfer protocol (HTTP). It is a protocol briefing named resources of information such as web pages and picture specifies that side making of the request should start with lines like naming the resource and the version of the protocol it is trying to use:
GET /index.html HTTP/1.1
Most protocols are built on top of other protocol. HTTP treats the network as a stream like a device into which you can put bits and have them arrived at the correct destination in the correct order. TCP is the protocol that addresses this problem.
TCP: All Internet-connected devices "speak" it, and most communication on the internet, built on top of it.
In TCP, to be able to listen for different kinds of communication at the same time on a single machine each listener has a number(called port). Most protocols specify which port should be used by default.
Like when we want to send an email using, SMTP protocol, the machine through which we send it is expected to listen on port 25.
Another computer can then establish a connection by connecting to the target machine using the correct port number. If the target machine can be reached and listening on that port, with this the connection is successfully created.
The listening computer is called the server, and the connecting computer is called the client.
Such a connection acts as a two-way pipe through which bits can flow the machines on both ends can put data into it. Once the bits are successfully transmitted, they can be read out again by the machine on the other side. This is a convenient model.
TCP provides an abstraction of the network.
THE WEB
World Wide Web (not to be confused with the Internet as a whole) is a set of protocols and formats that allow us to visit web pages in a browser.
To become part of the Web, all you need to do is connect a machine to the Internet and have it listen on port 80 with the HTTP protocol so that other computers can ask it for documents. This document on the Web is named by a Uniform Resource Locator (URL), which looks something like this:
Here https:// tells us about encrypted HTTP, then comes the part that identifies which server we are requesting the document from. Last is a path string that identifies the specific document (or resource)
Machines connected to the Internet get an IP address, which is a number that can be used to send messages to that machine, and looks something like 149.210.142.219 or 2001:4860:4860::8888. But the numbers are hard to remember instead register a domain name for a specific address or set of addresses.
First, your browser has to find out what address eloquentjavascript.net refers to. Then, using the HTTP
protocol, it will make a connection to the server at that address and ask for the resource/13_browser.html. If all goes well, the server sends back a document, which your browser then displays on your screen.
HTML
HTML: Hypertext Markup language. It is a document format used for web pages. An HTML document contains text, as well as tags that give structure to the text, describing things such as links, paragraphs, and headings.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.</p>
<p>I also wrote a book! Read it
<a href="http://eloquentjavascript.net">here</a>.</p>
</body>
</html>
List of all HTML Tags, can be viewed in this page
HTML & JavaScript
The most important HTML tag in this whole book is <script></script>. This tag allows us to include a piece of JS in an HTML document.
<h1>Testing alert</h1>
<script src="code/hello.js"></script>
We can load ES modules in the browser by giving the script tag a type="module" attribute. Such modules can depend on other modules by using URLs relative to themselves as module names in import declarations.
Some attributes can also contain a JavaScript program. The tag shown next (which shows up as a button) has an onClick attribute. The attribute’s value will be run whenever the button is clicked.
<button onclick="alert('Boom!');">DO NOT PRESS</button>
In The Sandbox
The attraction of the Web is that you can browse it without necessarily trusting all the pages you visit. This is why browsers severely limit the things, a JavaScript program may do: it can’t look at the files on your computer or modify anything not related to the web page it was embedded in.
Isolating a programming environment in this way is called sandboxing.
The idea is that the program is harmlessly playing in a sandbox. The hard part of sandboxing is allowing the programs enough room to be useful yet at the same time restricting them from doing anything dangerous.
The browser developers respond by fixing the hole, and all is well again—until the next problem is discovered
Compatibility and the browser wars
At any point where a single browser was dominant, that browser’s vendor would feel entitled to unilaterally invent new features for the Web. Since most users used the most popular browser, websites would simply start using those features—never mind the other browsers.
This was the dark age of compatibility, often called the browser wars. Web developers were left with not one unified Web but two or three incompatible platforms. To make things worse, the browsers in use around 2003 were all full of bugs, and of course, the bugs were different for each browser. Life was hard for people writing web pages.
Now, new players are being more serious about standards and better engineering practices, giving us less incompatibility and fewer bugs. Microsoft, seeing its market share crumble, came around and adopted these attitudes in its Edge browser, which replaces Internet Explorer.
The latest versions of the major browsers behave quite uniformly and have relatively few bugs.