Libraries!
Goals:
- Extend the functionality of JavaScript by importing 3rd-party scripts
Coding Snippets:
- Use the jQuery
getScript
method to download and execute the script located at the address referenced by the variablesrc
. - Like most I/O functions,
$.getScript
functions asynchronously—hence the use ofawait
/defer
.
Math and Computer Concepts:
- Each library has its own rules and syntax for use, formally referred to as the application programming interface, or API.
- You can find a library's API on the public repository where the source code is located and/or on a site dedicated to the library. For example, the Chart.xkcd library is documented at the npm code repository, npmjs.com, and at the author's website, timqian.com.
- One option for using libraries is to download them to the server hosting the website and to install them using special software known as a package manager. However, this is not an option for us, since we do not control the Pencil Code server! But not to worry: most libraries can be loaded directly into our programs from a third-party content delivery network, or CDN. For example, as with most packages on the npm respository, Chart.xkcd can be obtained from jsdelivr.com.
Activities:
Save each of the following in a folder called Libraries.
- Celebration: use the canvas-confetti library to add joyous fanfare to the end of a TurtleRace or some other script.
- GraphingMadeEasy: create a graph of some data of your choice using the powerful (and complicated) ChartJS library or the more whimsical (and more straightforward) Chart.xkcd. Follow the links to find the API!
- Rough.js is a small graphics library that lets you draw in a sketchy, hand-drawn-like style. Get creative, and come up with a cool HandDrawnDesign of your choice! Note: like most libraries, Rough.js uses HTML coordinates (i.e., with 0,0 in the top left corner).
- Chroma.js provides powerful tools for manipulating and mixing colors. Explore it and see if you can come up with a cool application of your own. (If you do draw a blank, you can always use it to come up with a better Rainbow.)