Web page events & DHTML
If you click on the 'Run Pen' button on the right side, you'll notice the first thing the HTML page does is present the pop-up message
onload event -- associated with the loading of the HTML page -- declared in the HTML
<body> element. The
alert method which is used to present pop-up messages.
Next, you'll see an HTML
onmouseover events. The
onmouseover event is triggered when a user passes his mouse pointer over the
<img> element, while the
onmouseout event is triggered when a user moves his mouse pointer away from the
Finally, you can see an HTML
onclick event which is triggered when a user clicks on an element. In this last case, the
innerHTML attribute which corresponds to the element's HTML content (i.e. the one surrounded by
AJAX & DOM
onclick) are technically known as DOM events and a web page's HTML elements (e.g.
<h1>) are technically known to a browser as DOM nodes which have DOM methods & properties (e.g.
But as explosive as jQuery's usage has been to date, jQuery is still rooted on foundations from early web page design practices. The following example in listing 1-2 illustrates a web page with jQuery's main functionalities.
Listing 1-2. Web page with jQuery
The first important aspect of the jQuery example in listing 1-2 lies in the HTML elements (e.g.
id attribute that's used for identification purposes or a CSS class inside the
class attribute that can also be leveraged for identification purposes.
Once HTML elements have identifiers, it's possible to access them for the purpose of manipulation. Toward the bottom of the example and wrapped in the HTML
<script> element, you can see jQuery methods are prefixed with a
$ symbol, which is the default convention for jQuery methods. For example,
$("#button-action").on() specify actions -- set
on() event -- applied to HTML references declared in
$(""), such as
button.continue to indicate the HTML
button element with CSS class
#button-action to indicate the HTML element with
$.ajax method -- that also lives separately from its HTML element and relies on many references to do its work.
Now let's take a step back and look at the good, the bad and the ugly of this design in listing 1-2. The good part is the design is simpler and cleaner than using plain DOM. With jQuery, event handlers and logic are no longer sprinkled around with HTML elements, but instead are clearly separated. Another positive aspect of jQuery is how it accesses HTML elements. Instead of having to work directly with DOM methods and properties (e.g.
childNodes) that are difficult to master, jQuery supports simpler and more powerful methods to access HTML elements (e.g. by HTML element type, by
id attribute value, by CSS
class attribute value).
The bad part of jQuery's approach is that it can become overly complex to decipher and debug web pages with dozens or hundreds of elements & actions. So for example, it isn't the use of one or two AJAX calls in this format that presents a problem, but rather it's the use in web pages that require dozens or hundreds of AJAX interactions, where the management of references, data updates and error handling in this manner can quickly become difficult to understand.
The ugly part of jQuery's approach comes from the difficulty to express relationships between HTML elements and their actions. Notice how the example creates a reference to the
<div id="banner-message"> are spread out, instead of being grouped in a single location.
- Angular Material.- Developed by Google -- as part of their larger Angular initiative -- Angular Material is another strong contender in this space. However, unlike React, Angular Material is desgined with Angular in mind.
With the surge of AJAX, many designers realized it was possible to deliver a single web page and simulate the functionality of dozens of web pages via AJAX, giving the end user a cleaner experience rather than him jumping from web page to web page. This paved the way for Single Page Applications or as their also known by their acronym: SPA.
These design patterns consisting of things like web page routing (i.e. what page sequence to follow for a given task), business logic execution and data validation, are known by the broader name Model-View-Controller (MVC) architecture.
How do you left-pad a string in your favorite programming language ? In Java you can use the language's
String.format method, in Python you can use the language's
str.rjust method, in PHP you can use the language's