< Return to all blogs
TheaterJS: How to Add and Use Javascript Libraries
A simple tutorial on how to use Javascript libraries in your web apps. I will be using TheaterJS as an example library.
I am working on getting some neat, open-source Javascript libraries ported into my website. I’m trying to teach myself how to incorporate the pleathorea of user contributed libraries into my site. Over the summer, I taught myself how to use NPM dependencies — elegeant packages of Javascript code that would perform preset functions. With the millions of NPM packages out there, I wanted to use it in my own site.
Unfortunately, I haven’t been able to build a compiler that would allow me to use NPM dependencies in my code. I’m still interested in using other people’s code in my apps so I’ve resorted to Javascript libraries. I came across a really cool one called TheaterJS. Here’s a quick demo
Turns out, the steps to import Javascript libraries are very straightforward and simple.
- Download the library
- Move the file into your source code. It doesn't matter where.
-
Link the '.min.js' file in the <\head> of your HTML file like so:
<script src="path/to/library/TheaterJS-2.0.1/dist/theater.min.js"></script> <!-- TheaterJS -->
-
Now you can use the library by calling the functions defined in the documentation. TheaterJS mimics a human chat transcript. An actual demo can be found on my landing page. Here's how to use TheaterJS's functions (this is the actual code I used on my landing page):
theater .addActor('kevin', { speed: 0.6, accuracy: 0.7 }) .addScene('kevin:Kevin Hou', 2000) .addScene('kevin:Welcome!', 1000) .addScene('kevin:Kevin Hou', 2000) .addScene(theater.replay.bind(theater))
Hope this helped!
Posted in Web Development with Javascript