Now you know how to write JavaScript code, and how to use functions like getElementById()
to make your webpage interactive.
This tutorial introduces JavaScript libraries, which lets you take advantage of code that’s already written by other people.
Remember that you can use the src
attribute of the <script>
tag to load JavaScript files into your webpage. Let’s say you have this file:
dom-tools.js
function createUlElement(items) {
const ulElement = document.createElement('ul');
for (const item of items) {
const liElement = createLiElement(item);
ulElement.appendChild(liElement);
}
return ulElement;
}
function createLiElement(text) {
const liElement = document.createElement('li');
liElement.appendChild(document.createTextNode(text));
return liElement;
}
You could load that JavaScript into your webpage using the <script>
tag with a src
attribute that pointed at your dom-tools.js
file:
<script src="dom-tools.js"></script>
And then you could write more JavaScript code that called the functions that were defined in your dom-tools.js
file.
Putting it all together, it would look like this:
<!DOCTYPE html>
<html>
<head>
<title>Referencing HTML Elements</title>
<script src="dom-tools.js"></script>
<script>
function addFavoriteAnimalList() {
const ulElement = createUlElement(['lions', 'tigers', 'bears']);
const animalContainer = document.getElementById('animal-container');
animalContainer.appendChild(ulElement);
}
</script>
</head>
<body onload="addFavoriteAnimalList();">
<p>These are my favorite animals:</p>
<div id="animal-container"></div>
</body>
</html>
You could also move the addFavoriteAnimalList()
function into its own separate JavaScript file.
This example is a little contrived, but the point is that you can split your JavaScript code between multiple files, and you can use a mix of <script>
tags that load files, <script>
tags that contain JavaScript code, and JavaScript inside your HTML. And after you load a JavaScript file, you can use the variables and functions defined in that file in subsequent JavaScript code.
And here’s the magic part that makes JavaScript libraries work: the JavaScript you load can be written by somebody else!
JavaScript libraries are a bunch of JavaScript code written by somebody else, and you can load them in your HTML to use the library’s code in your own code.
My personal favorite JavaScript library is p5.js.
p5.js is a JavaScript library that helps you create animated, interactive webpages. Here’s an example:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
<script>
function setup() {
createCanvas(500, 500);
background(32);
}
function draw() {
fill(random(255), random(255), random(255));
circle(random(width), random(height), 25);
}
</script>
</head>
<body>
<h1>My Sketch</h1>
</body>
</html>
See the Pen by Happy Coding (@KevinWorkman) on CodePen.
This file first loads the p5.js JavaScript library:
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
Then the file includes JavaScript that calls the functions defined by the p5.js library:
function setup() {
createCanvas(500, 500);
background(32);
}
function draw() {
fill(random(255), random(255), random(255));
circle(random(width), random(height), 25);
}
Notice that the code does not define functions like createCanvas()
or circle()
. Those are defined by the p5.js library! And because the file first loads the p5.js library, this code can then access those functions. You could also move this JavaScript code into its own JavaScript file.
You can see how the p5.js library works by visiting this file directly: https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js. The file is pretty big and contains some complicated syntax, but the idea is the same as what you’ve seen so far: this file defines some functions and variables, which you can then use in your own JavaScript code!
There are a ton of libraries out there. Don’t be afraid to search for them!
For example, let’s say you wanted to make the default dialog box that pops up when you call the alert()
function a little more interesting.
<html>
<head>
<script>
function sayHello() {
alert('Hello world!');
}
</script>
</head>
<body>
<button onclick="sayHello()">Click me!</button>
</body>
</html>
You might start by searching for things like “JavaScript alert library” or “JavaScript dialog library”. You’d probably find a few different options, like SweetAlert or Micromodal.js.
The best thing you can do is try a few different options out and see which one you like the best!
Here’s the same example using the SweetAlert library:
<html>
<head>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
function sayHello() {
swal('Hello world!');
}
</script>
</head>
<body>
<button onclick="sayHello()">Click me!</button>
</body>
</html>
See the Pen by Happy Coding (@KevinWorkman) on CodePen.
Even after you find a library, learning how to use it might seem a little overwhelming: how do you know what variables and functions are offered by a library? How do you know what code you should write to make something happen?
Figuring out the answers to those questions is a huge part of coding. So if you feel confused, that’s normal! Here are a few tips to help you through the process:
index.html
file on my dekstop that I use for testing smaller parts by themselves."Hello [your name]!"
.Learn about using libraries in JavaScript.
Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!
Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!