How to use Lodash in Browser with HTML and Javascript

Lodash is a javascript library that provides a very useful and cool handy function that helps to automate your web development process. It is a widely used javascript library out there. As it is a Javascript library, you can use it any of your web development flavors. In this tutorial, we will learn How to use Lodash in Browser with HTML and Javascript.

You can also use Lodash with any Javascript framework or in the console on the top of NodeJS. But in this tutorial, we will display content modified by Lodash in the browser window using pure HTML and Javascript

Lodash in Browser with HTML and Javascript

To use Lodash, either you can use Lodash CDN from any available repository or you can download the source file (a Javascript file for Lodash) from the official site of Lodash. After downloading the file;

  • Keep the lodash.js file in the current directory where your HTML file resides.
  • Create the HTML file and paste the below code. Notice the below code, I already included the lodash source file in the head section.
  • Now the HTML file in your browser. You should get back Hello World in full uppercase. If it happens, then the Lodash library is working.

Code Explanation

  • We have included the lodash.js file in the head section for accessing all the lodash functions.
  • You also can use Lodash CDN instead of downloading it. To use CDN, replace the <script src="lodash.js"></script> with <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
  • In the body tag, we have created another Javascript file. We have declared a variable of a string with value initialized hello world all lowercase.
  • Then we have targeted the id ‘original from the HTML element for showing the variable of the text.
  • Right then we have used our first lodash function _.toUpper() for uppercasing the text of text variable.
  • We have passed the text variable as the parameter of the _.toUpper() function.
  • The function will uppercase of the text string then keep into result variable.
  • Finally, we have targeted another id for showing the uppercase string converted by Lodash.
  • That’s all.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="lodash.js"></script>
  <title>Lodash</title>
</head>
<body>
  <h2>The original text is: <span id="original"></span></h2>
  <h2>Upper text using Lodash: <span id="upper"></span></h2>
  <script>
    var text = 'hello world';
    document.getElementById("original").innerHTML = text;
    
    //using lodash to make upper text
    var result = _.toUpper(text);
    //putting the upper text value in result var

    document.getElementById("upper").innerHTML = result;
  </script>
</body>
</html>

Now run the file in your favorite browser, You should get something like this:

use Lodash in Browser with HTML and Javascript

You can use all the functions provided by Lodash in the same approach to use in the browser in pure javascript rather than any framework.

Posted in