A big advantage of JS is that you can create responsive interfaces without having your web pages make calls back and forth to a server.
Adding JS to Your Page
You can embed JS directly on your HTML document or link it to an external file using the <script> element. There are lots of prebuilt JS libraries that contain functionality that you might want to use. As an example, Bootstrap builds JS directly into its framework to support functionality like image and video carousels, popovers, transitions, etc. You can use that functionality by incorporating the JS files from Bootstrap’s CDN.
For this course, we’ll stick with the out of the box JS functionality in Bootstrap. However, feel free to check out the resources and examples provided below for more information.
The <script> element can go anywhere, but the two most common places are in the <head> of the document and then at the very end before the closing </body> tag. It’s preferable to keep your JS script at the end for performance reasons as the browser needs to parse the document and its DOM structure for execution by the scripts.
Bootstrap 4 Carousel Example
Check out this carousel example on W3Schools. Select the Try It button to view the code. Create your own HTML page with the code and change some of the options and see what happens. You’ll see that the <script> in the <head> includes these links. They’ve already written the JS – you can take advantage of it!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Learn more about the Popper.js library.