10 The power of JavaScript

The definition of dynamic in terms of websites has changed over time. In the early days of the web, a dynamic website was the one that could have user-generated content, server-side processing, and all the great features we developed in the previous chapter (like comments and contact forms). This definition changed with the advent of web applications that redefined “dynamic” as web pages that could update on the fly without explicitly reloading the entire content. These pages can fetch content in the background and provide real-time updates without manually triggering some action. This modern definition of a dynamic website is possible with client-side processing, where a script accompanies the website content and runs on the end-user machine. JavaScript is the standard programming language used on the browser frontend, and all frameworks, including Hugo, need to play nice with JavaScript to unlock additional features.

10.1 Why use JavaScript in a Hugo project?

10.2 Using JavaScript to control the page flow

10.2.1 Handling forms in JavaScript

10.2.2 Building and loading JavaScript using Hugo Pipes

10.3 Approaches for JavaScript handling

10.3.1 HTML as primary JavaScript as a utility

10.3.2 JavaScript as a separate layer to HTML

10.4 Converting JavaScript to a utility controlled by the HTML code

10.4.1 Enabling dynamic forms through JavaScript

10.4.2 Splitting JavaScript into multiple files

10.4.3 Passing variables when building JavaScript

10.5 Enabling client-side search