While jQuery is one example of a library, there are many others - many that implement specific functions. Combined with libraries that help you implement functions in JavaScript, Application Programmer Interfaces (APIs) in JavaScript and other languages can help you use JavaScript to make complex tasks easier. There are literally hundreds and hundreds of JavaScript Libraries and and APIs. Many APIs are RESTFul which we will discuss in the next unit, but basically means that they make web requests back and forth.

When using a library, you want to look for the CDN URL, which you can add to your HTML file directly like we did with jQuery. This will download and include the library from the CDN server. Every library has their own functions and syntax - I wish there was a “recipe”, but there isn’t. You’ll need to read the documentation for each library to understand what they do and how they work, but know that you can use regular JavaScript along with the specialized functions. Below are some examples of JavaScript libraries, mixed with regular JavaScript code.

Bootstrap Datepicker

This example uses the Bootstrap Datepicker library to create a form element with a built in calendar. Note that the CDN site is complicated, generally you’ll only need the first few items in the list to get started. Once the site is set up, the documentation can help you get set up and running quickly.

See the Pen Unit 9 - Bootstrap Date Picker by Mark Samberg (@mjsamberg) on CodePen.

Note that CodePen obscures the JS and CSS includes. The code to include this is:

With your CSS files:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" />

After your jQuery include:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>

MathJax

MathJax is a JavaScript library that converts LaTEX and math printing to HTML. This is more accessible and easier than the traditional approach of using images. LaTeX code is encapsulated in \( ... \) for the same line and $$ ... $$ for the math to appear on its own line. Online LaTEX Editors can help you generate the LaTeX code to be included.

See the Pen xxgKKoX by Mark Samberg (@mjsamberg) on CodePen.

It’s included using:

<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

ChartJS

ChartJS is a really neat library that allows you to make charts from JavaScript objects.

It’s included with

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js" integrity="sha512-SuxO9djzjML6b9w9/I07IWnLnQhgyYVSpHZx0JV97kGBfTIsUYlWflyuW4ypnvhBrslz1yJ3R+S14fdCWmSmSA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css" integrity="sha512-/zs32ZEJh+/EO2N1b0PEdoA10JkdC3zJ8L5FTiQu82LR9S/rOQNfQN7U59U9BC12swNeRAz3HSzIL2vpp4fv3w==" crossorigin="anonymous" />

And you can create charts using JavaScript objects:

See the Pen Unit 9 - Chart.js by Mark Samberg (@mjsamberg) on CodePen.

While these are hard-coded, you can take user input for this as well. While we can’t store input yet, we will be able to by the end of the next unit. But here’s an example that works similarly, without storage.

See the Pen Unit 9 - Chart.js Dynamic Example by Mark Samberg (@mjsamberg) on CodePen.