WebLabs 03 | Interactive Design with JavaScript

coding-01

JavaScript (JS) is a client-side scripting language that adds interactivity to websites. From our previous labs, you know that HTML provides structure to our site, CSS provides formatting, and JS adds behavior. Any elements, attributes or text can be accessed by scripts using a DOM (Document Object Model). You can also write scripts that react to user input resulting in changes to page content, styling or behavior.

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.

JavaScript is reliant on the users’ browser settings and capabilities. Even though “Java” is in the name, JS has nothing to do with the server-side programming language, Java. JS is a dynamic programming language, which means that it doesn’t need to be compiled for the browser to run the code. JS is also a loosely typed language, meaning that it can interpret variables based on their values. You don’t have to tell JS that 10 is a number.

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.

Script Placement

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.

Resources:

Bootstrap JavaScript Documentation

W3Schools JavaScript Examples

JavaScript Foundations (free mini-course from Gymnasium)