Realize Interaction: How JavaScript Executes on the Web

Chutong Wang

Abstract

Click the plus button to add some game cards to your shopping cart, press the Play button to start a song, scroll down the web page to enjoy dynamic web transition, play a weird web game … We browse on the web every day. It has become a daily part of modern life, just like we brush our teeth every day.  But interestingly, unlike everyone can explain the reason why we have to brush our teeth and how toothbrushes help us to clean remnants, most people can hardly illustrate how we realize these interactions. That is because these interactions are based on numerous layers of abstraction and numerous technological black-boxes. Among these black-boxes, JavaScript is the one which directly affects the web interaction and user experience. In this essay, I will focus this essential part of web development – how JavaScript makes the webs come “alive” to accept our requests and return the results we want.

Client, Server, Browser and Internet

To understand how JavaScript enhances our experience of web browsing, we could start at a quick glance of the working principle of the web.

The first web page – World Wide Web (WWW), was invented by Tim Berners-Lee in 1989. The original purpose of building this web was to sharing information between scientists in universities and institutions around the world. To achieve this goal, Tim also created HyperText Markup Language (HTML) to provide the structure of a web page and identify links for rendering other web pages so we can jump through different web pages easily; web browser for collecting requests from the client and displaying documents from the server; and HyperText Transfer Protocol (HTTP) for transferring the request and service between the server and the browser through internet. This mode is known for the client-server architecture (see Figure 1) and we still follow this pattern today.

Figure 1: Client-server architecture. Files are stored in the server, waiting for requests from the client side. HTML for structuring the whole web page, define what is title, subtitle, paragraph and etc. CSS for styling, define the font, font-size, color and etc. JavaScript for making animation and interaction on the web page. [From https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works]

Client and Server: Computers connected to the web through internet are called clients or servers. The tablets, PCs, and smartphones we use every day are all clients. While servers, on the other hand, are computers that store web pages. For example, if I click a hypertext called “For More Information”, a new web page will pop up to show more of what I am searching for. This action from the client side will send a request to the server, and the server will find the site or html file mapped with “For More Information” and send back to the client. The process is much like when you borrow a book from a librarian and the librarian brings you the one you want out of thousands of books. A server can locate anywhere in the world, we can send request to different servers just like we can borrow books from different libraries all around the world.  

Browser: Firefox, Safari, IE or Google Chrome, almost all of us have at least one web browser installed on our computers. Browsers are installed on the client computer and all the web browsers function as client, they play an essential role on building connection.  Browser can simply be regarded as an interface. It fulfills the client-server architecture so we, as clients, have a place to send requests and servers have a place to show the results. This process is controlled by the browser render engine inside the browser, which could turn the HTML documents it receives into commands for the operating system and the operating system will display the content on the screen.

Internet: Internet is a link that connects all the servers and clients together. If using the same analogy of borrowing books from the library, the Internet is the road from home to the library, while the HTTP could be regarded as traffic regulation.

<!– fail to embed the video here–>

Video: How the internet works. [From: https://www.youtube.com/watch?v=7_LPdttKXPc]

A Brief Introduction of JavaScript

As mentioned in Figure 1, while HTML and CSS are for structuring and styling, JavaScript is for making animation and interaction on the web page to engage the users. Most dynamic elements we could see on the web these days are written by JavaScript.

However, the first web browser created by Tim Berners-Lee can’t support any client-side scripting, which means the visual effects of web pages rendered by this browser are simple and monotonous to some extent. But HTML is a markup language could “easily be extended to support passing program code to a web browser”.

So in order to achieve client-side scripting, Netscape Communications released JavaScript in 1995 and developed Navigator 2.0 beta 3 browser with the ability of reading and executing JavaScript codes. It became so popular that it gradually phased out other scripting languages, and no other scripting language ever took its special place. Today, it is still one of the most popular languages in the world, widely used in web development, building web server, creating web and mobile application, game development and etc.

There are several factors that make this language so successful. First, it is the only programming language native to the web and can be used in both the front-end and back-end. Second, there is an incredibly low threshold to get start. It is easy to insert a piece of JavaScript codes in the HTML document with a <script> tag. And the browser with a JavaScript engine (all the mainstream web browsers have JavaScript engine) could then parse these codes and make them work. Third, the snowball effect makes JavaScript a language difficult to be replaced temporarily. Programmers developed numerous frameworks and libraries that helped developers to create excellent web interactions quickly. This makes the language very supportive since it already has a mature and vibrant community worldwide.

 

Interaction: Examples of How JavaScript Manipulate HTML Tags

Let’s use a piece of codes in W3Schools as example to explain how JavaScript works on the web:

Figure 2: Example of JavaScript Object Properties from https://www.w3schools.com/js/js_object_properties.asp . The left part is an HTML document with JavaScript in the <script> tag, and the right part is the corresponding web page.

The first line of the code <! DOCTYPE html> is a Document Type Declaration. It informs the web browser that “Hey! This is an HTML file” so the browser render engine will start to work to turn HTML text and tags into commands to the operating system and then display the web page on the screen. Every HTML tag has a close tag with slash to demarcate the range of this tag. <body> tag includes all the content that will show on the web page. Everything in the right part of Figure 2 is all belongs to <body>. And tags like <p> and <h2> are for identifying the function of the text, <p> for paragraph and <h2> for subtitle (abbreviation of heading 2). What’s more, there is a <p> tag with an id which could make this paragraph different from others. Each HTML file can contain many ids, but each id name must be unique. We can see although there is nothing inside the <p id = “demo”> </p>, the final web page still shows a line of text said “John is 50 years old.” That is because the JavaScript is taking charge of this part.

As we mentioned before, we could simply insert JavaScript codes in HTML document by using <script> tag. So, the code between <script> and </script> is JavaScript code. The “var” stands for variables. Variables are used for storing data values. If the code goes like:

        var person = “John Doe”;

Then we can say “person” is a variable. However, in this example, there is a set of variables. We have variables named “firstname”, “lastname”, “age” and “eyecolor” inside the “person”. Thus, we called “person” an object. In JavaScript, object stands for variables with many data values. Object is easy to use when we have to define a set of features. For example, a gallery website might need an object called “work” or “artwork” or whatever you what to name it with a set of variables like “artisit”, “size”, “creatingDate” and “price”. This makes the content more structured and saves a lot of time for boring repetitive coding.

Below our object “person”, we have a line – ‘document.getElementById(“demo”).innerHTML’. This is one of the most adorable part of JavaScript. The syntax of JavaScript is quite beginner-friendly compared to other programming languages since the semantic meaning of many JavaScript components are quite obvious. This line basically means grab the element with the id “demo” in the HTML document. And here the manipulation starts. JavaScript controls the element in HTML file with id “demo”, to make it display the “firstname” in object “person”, followed by string “ is ”, followed by “age” in object “person” and then followed by string “ years old.”. In this way, JavaScript accomplish its goal of making change in HTML file.

This example seems have nothing to do with interaction or animation. Although it uses JavaScript to display a line of text which is not existed in HTML, it is still displaying text, which doesn’t enhance our user experience at all! But if we think deeper of this example, this actually shows us an exciting function – JavaScript could change the appearance of HTML content readily and could insert programs in plain HTML web page. We all know that programming languages are able to make mind-blowing effect. HTML can’t make lovely animation, but we could make animations by JavaScript since it is a programming language, and insert them on the heading, next to a button or anywhere we want.

I will take JavaScript libraries using as example to further illustrate the interactions made by JavaScript. Libraries can be regarded as small programs already written by other programmers. What we have to do is to copy and paste code from the library to initiate functions in the library. In this website(https://ustaobao.glitch.me/), I insert two JavaScript libraries – AOS and Shine.js in the head of the html file, so the libraries could be loaded in advance and I could use the functions inside the libraries wherever I call them (see Figure 3).

Figure 3: HTML head of https://glitch.com/~ustaobao. Line 15is the CDN link of AOS, which is used for triggering animation when you scroll down. All the animations in this web page are created by AOS. Line 18 is the CDN link of Shine.js, which is used for making creative font style.

Then I initiate them in JavaScript file:

Figure 4: initiate shine.js in JS file.

Since AOS is a JavaScript library for creating quick CSS animation with simple principles, we could add it directly on the HTML tags:

Figure 5: Part of the HTML tags with AOS.

While shine.js, on the other hand, need more specific description of what I want what to do. So I use getElementById as the previous example (see Figure 4, line 81), to endow the element <h1 id=“tryshine”> with Shine.js function (see Figure 5, line 48) make the sentence looks like this:

In this example, I create scroll down animation and cool font style easily with JavaScript. Whether it’s a complex effect or a simple style, referencing methods are basically the same in JavaScript.

How Browser Understand JavaScript Code

Figure 6: Process of executing JavaScript code. [From: https://medium.com/@mustafa.abdelmogoud/how-the-browsers-understand-javascript-d9699dced89b]

Since JavaScript is written in human-readable way, we need to make the browser understand JavaScript code as we do. So, just like the HTML is understood by the browser through browser render engine, JavaScript could be parsed through JavaScript engine inside the browser. The first step is tokenization, engine maps each element of code to a token and an array of tokens of the JavaScript file. The second step is to convert this array of tokens into an Abstract Syntax Tree. The Tree represents the logic of our code and turn them into byte code. In this process, the engine analyzes data types (categorize what this data is used for) and hot functions (functions that appears many time in the code) to optimize the code through optimization complier in the engine (see Figure 6). And finally, translated into machine code by the complier (see Figure 7).

Figure 7: Transfer JavaScript code to Machine code. [From https://medium.com/@mustafa.abdelmogoud/how-the-browsers-understand-javascript-d9699dced89b]

A Side Note of Web Design

Although JavaScript can bring a lot of great visual effects to our websites, the reality is that overly complex visual design doesn’t improve the user experience. Conversely, miscellaneous interaction design may cause key information to be ignored or visual fatigue. How to ensure that the content of the website is modest and attractive without cluttered interaction is a problem that web developers often need to face.

The interactions that we take for granted today are actually carefully designed. Throughout human history, human interaction with the media has been largely one-sided [KGPDM1976]. From writing on slate or paper in ancient times to watching TV shows today, input and output are usually unilateral. Thus, web designers don’t have many direct patterns to draw from. Instead, all these designs have to borrow from the ways we use sign and symbol systems. When you click a button, the button will change the light and shade slightly just like when you press a button in real world. That’s a visual sign we detected for assuring valid click. Plus symbol for adding items, trash can icon for deleting. These are symbols refer to specific meanings. How to use these signs and symbols to make the appropriate interaction effect is crucial to the performance of the web page.

Conclusion

Thanks to the development of JavaScript, it has become easier and easier to add diverse interactions to the websites. But when it comes to web design, there’s a risk of putting the cart before the horse when it comes to flashy effects. Therefore, familiarity with JavaScript is almost as important as mastery of design concepts in building a website.


References: 

Aaron. (2009, February 19). How the Internet Works in 5 Minutes. https://www.youtube.com/watch?v=7_LPdttKXPc

Alen Kay and Adele Goldberg, (March 1977). “Personal Dynamic Media” in Computer, vol. 10, no. 3, pp. 31-41, doi: 10.1109/C-M.1977.217672.

Client/Server, the Internet, and WWW. (n.d.). Retrieved December 13, 2020, from http://www.robelle.com/www-paper/paper.html#servers

How the Web works. (n.d.). MDN Web Docs. Retrieved December 13, 2020, from https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works

Martin Irvine, Introduction to Symbolic-Cognitive Interfaces: History of Design Principles 

Martin Irvine, (new) From Cognitive Interfaces to Interaction Designs with Touch Screens

Mustafa Abdelmogoud, (2019, September 27). How the Browsers Understand JavaScript. Medium. https://medium.com/@mustafa.abdelmogoud/how-the-browsers-understand-javascript-d9699dced89b

Mustafa Abdelmogoud, (2019a, September 27). How the browser renders HTML & CSS. Medium. https://medium.com/@mustafa.abdelmogoud/how-the-browser-renders-html-css-27920d8ccaa6

Peter J. Denning and Craig H. Martell, (2015). Design in Great Principles of Computing. The MIT Press. 

Ron White, (2008). How Computer Works, 9th edition. Que Publishing. 

Shan Plourde, (2019, March 19). Why are we creating a JavaScript-only World Wide Web? ITNEXT. https://itnext.io/why-are-we-creating-a-javascript-only-world-wide-web-db8c3a340b9