Main content
Course: Computer programming - JavaScript and the web > Unit 6
Lesson 7: Using JS libraries in your webpageWhere are JS libraries hosted?
When we included the slideshow JS library in our webpage in the previous talk-through, we typed this URL:
That URL is an absolute URL, which means that it includes the protocol and domain. When we include JS libraries in the Khan Academy environment, we must use an absolute URL so that the environment knows the full path to the library.
If you were working on a webpage on your own computer and you had all the files downloaded, then you could use a relative URL instead, like simply "slideshow.js" or "lib/slideshow.js" if it was inside a folder named "lib". When you're working locally, open your browser's network panel to make sure it found all the local resources like your JS files and CSS files. If the browser couldn't find a resource, you'll see a 404 and you can debug the URL and file location.
Now, back to this URL:
The protocol "https" means that it’s a secure URL. We only allow you to bring in secure resources in Khan Academy webpages, and that's a best practice in web development. Not all servers have HTTPS enabled yet, however, so you may sometimes have to start URLs with "http" in your projects.
The server "cdn.jsdelivr.net" is an example of a content delivery network (CDN). CDNs are optimized for serving static files like JS libraries and serving them very quickly. There are a few big CDNs that host multiple JS libraries (like Google's CDN and cdnjs), and there are some libraries that have their own dedicated CDN.
When you bring a JS library into your webpage from a CDN—or any server that's not your own—you should not trust that server. A malicious server could replace the JS library with code that stole your user's data and sent it somewhere, and you certainly don't want that to happen!
On Khan Academy, we use a security mechanism called CSP in our webpage environment to make sure that you can only bring in resources from servers we trust: bootstrapcdn.com, googleapis.com, jsdelivr.net, and cdnjs.com.
On your own websites, you'll need to make the decision whether to serve the JS library from your own server or include it from an external CDN. Most big websites decide to host libraries on their own server, because they can have more control and make optimizations like combine multiple libraries into a single JS file for better loading performance. It's up to you—just keep in mind everything we talked about here!
Want to join the conversation?
- Is it illegal to use JS libraries to build a commercial/subscription website?(14 votes)
- It depends on each library's terms and conditions. This can be a complex legal matter in certain cases.(30 votes)
- How do you add your own library to a certain CDN? (Hopefully someone hasn't asked the same question)(10 votes)
- The idea with CDN is that we "mortal people" are forbidden from adding our own libraries to a certain CDN, because there is no guarantee that the code is adequate and secure, therefore it could not be trusted.
Ask yourself, can you ensure, that your code is: stable, reliable, high-speed, useful, so that it deserves to be uploaded to a CDN? If the answer is "yeees!", then nothing is stopping you from sending your code for approval to a CDN responsible person (:(16 votes)
- How do I import the khan academy functions to my own web page?
What is the link?
How do I type it in? like do I do import (link)?(5 votes)- Hi,
If you're referring to the Intro to JS lessons, you might find this interesting: https://www.khanacademy.org/computer-programming/processingjs-inside-webpages-template/5157014494511104(5 votes)
- What do you recommend to do? CDN or our own server.(2 votes)
- You're ultimately not in control of what happens on the CDN.
You are (hopefully) in control of your own server. So that's safer.(10 votes)
- Maybe you should allow this one. I really want to learn Machine Learning with JavaScript here on Khan. For now, I will make a GitHub and post it there.
https://unpkg.com/ml5@0.0.3/dist/ml5.min.js
I'm also going to post it in the community place.(5 votes)- It's possible to bring in ml5.js from this CDN: https://cdn.jsdelivr.net/npm/ml5@0.2.1/dist/ml5.min.js
KA's picky about what website you bring scripts from.(2 votes)
- Is there any (extra) code i would have to use to add proccessing.js?(2 votes)
- Isn't using these libraries plagiarism?(2 votes)
- Most libraries are intended to be used by others. Be sure to check what attribution each library wants. Many, like jQuery and P5.js, do not require attribution.(2 votes)
- Is Angular safe? Has someone here tried it?(2 votes)
- What's the best CDN to store your libraries on? RawGit (that was used in this example) is being depreciated, so I'm looking for other alternatives.(2 votes)
- is javascript tough to learn? because when I was learning it, I found the codes and challenges very difficult whereas when I was learning CSS and HTML it was really fun to learn! easy codes were there plus challenges were crystal clear, but in js, I find it more difficult to solve the challenges they were very complicated and frustrating. is there any difference like HTML is easy all the time or is it complicated further? why I find HTML very easy is HTML that easy?
by the way, I am 13 years old and I love to write codes.
and since I have found khan academy I learn new codes new ideas every day.(1 vote)- JS isn't tough to learn, it's tough to master. As with any new thing, using it takes practice. The HTML intro course was an intro. HTML/CSS/JS is meant to be more advanced. You will complete the course if you set your mind to it. We are here to help you when you are in need of it. Just sit down, read the articles, watch the videos, and practice the actual code.
Best of luck,
Hunter(2 votes)