6 - External Libraries: jQuery, Bootstrap, and Plotting Tools — Topics & Learning Outcomes

Module Topics

Introduction to External Libraries and CDN Integration

• What Are Third-Party External Libraries? — External libraries are pre-written collections of code created by other developers that you can include in your own web project to add functionality without building it from scratch.
• What Is a Content Delivery Network (CDN)? — A Content Delivery Network (CDN) is a geographically distributed network of servers that hosts and delivers files — such as library assets — to users from the server closest to them.
• Benefits of Using a CDN Over Local File Hosting — Loading libraries from a CDN offers several performance and maintenance advantages compared to downloading and hosting the library files yourself on your own server.
• Loading a JavaScript Library via a Script Tag — JavaScript libraries are loaded into a web page using the HTML <script> tag with a src attribute pointing to the CDN URL of the library file.
• Loading a CSS Library via a Link Tag — CSS-based libraries such as Bootstrap are loaded using the HTML <link> tag placed inside the <head> section of the page, referencing the CDN-hosted stylesheet.
• Versioning and Integrity When Using CDN Links — CDN URLs typically include a specific version number of the library, and modern best practices recommend using Subresource Integrity (SRI) hashes to verify that the file has not been tampered with.

jQuery Fundamentals and DOM Manipulation

• What is jQuery and Why Use It? — jQuery is a fast, lightweight JavaScript library designed to simplify common tasks like HTML document traversal, event handling, and DOM manipulation.
• Including jQuery via CDN — The easiest way to add jQuery to a project is by referencing it through a Content Delivery Network (CDN) link placed in the HTML document.
• Core jQuery Syntax: The $ Function — jQuery's primary interface is the $ function, which selects one or more HTML elements from the DOM and wraps them in a jQuery object for further manipulation.
• Selecting and Traversing DOM Elements — jQuery provides powerful selectors and traversal methods to locate specific elements within the page structure.
• Modifying Content and Attributes — jQuery makes it straightforward to read and update the text content, HTML, and attributes of selected page elements.
• Handling Events with jQuery — jQuery simplifies attaching event listeners to elements, enabling interactive responses to user actions such as clicks, key presses, and mouse movements.
• Manipulating CSS and Visibility — jQuery provides methods to dynamically change the styling and visibility of elements without directly editing the stylesheet.

jQuery Events and Dynamic Interactivity

• Binding Events with .on() — jQuery's .on() method is the primary way to attach event listeners to DOM elements, replacing older methods like .click() and .submit().
• Handling Click Events — Click events are the most common user interactions handled by jQuery, enabling buttons, links, and other elements to trigger dynamic behavior.
• Form Submission Events — jQuery makes it straightforward to intercept form submissions, validate input, and control whether data is sent to a server.
• Keyboard Input Events — jQuery provides keyboard events — keydown, keypress, and keyup — that let developers respond to user typing in real time.
• Event Delegation for Dynamic Elements — Event delegation attaches a listener to a parent element so that dynamically added child elements automatically respond to events without re-binding.
• The Event Object and Stopping Propagation — Every jQuery event handler receives an event object containing details about the interaction and methods to control how the event travels through the DOM.
• Common Interaction Patterns with jQuery — jQuery enables several recurring UI patterns — such as toggling visibility, tab switching, and live filtering — through concise combinations of event binding and DOM manipulation.

Bootstrap Layout and the Responsive Grid System

• What Is the Bootstrap Grid System? — Bootstrap's grid system is a flexible, 12-column layout framework that makes it straightforward to build structured, responsive web pages.
• Mobile-First Design Philosophy — Bootstrap is built with a mobile-first approach, meaning styles are defined for small screens by default and then scaled up for larger devices.
• Containers: The Foundation of Layout — Every Bootstrap grid layout must begin with a container element, which centers content and controls its maximum width.
• Rows and Columns Structure — Inside a container, rows and columns are the two building blocks that define how content is positioned and sized.
• Breakpoint Classes and Screen Size Tiers — Bootstrap defines five responsive breakpoints — xs, sm, md, lg, and xl — that correspond to specific minimum viewport widths.
• Offsetting and Ordering Columns — Bootstrap provides utility classes for offsetting columns and reordering them visually without changing the HTML source order.
• Nesting Grids for Complex Layouts — Bootstrap columns can contain their own nested rows and columns, enabling multi-level, complex responsive layouts within a single page.

Bootstrap UI Components and Styling

• Navigation Bars with Bootstrap — Bootstrap's navbar component provides a ready-made, responsive navigation bar that collapses gracefully on smaller screens.
• Bootstrap Button Styles — Bootstrap offers a comprehensive set of button classes that provide consistent, styled call-to-action elements across an application.
• Modal Dialogs — Bootstrap modals are overlay dialog boxes that display additional content or confirmation prompts without navigating away from the current page.
• Card Components — Bootstrap cards are flexible content containers with optional headers, footers, images, and body sections for displaying grouped information.
• Bootstrap Utility Classes — Utility classes are single-purpose CSS helpers in Bootstrap that apply spacing, color, typography, and layout adjustments directly in HTML without writing custom styles.
• Responsive Grid and Component Integration — Bootstrap's 12-column grid system works in tandem with its UI components to create professional, responsive page layouts rapidly.

Data Visualization with Chart.js

• What is Chart.js? — Chart.js is a free, open-source JavaScript library that enables developers to create interactive, animated charts directly in the browser using the HTML5 canvas element.
• Integrating Chart.js via CDN — The simplest way to add Chart.js to an HTML page is by linking to it through a Content Delivery Network, eliminating the need for a local installation or package manager.
• Setting Up the Canvas Element — Every Chart.js chart requires a dedicated HTML canvas element to serve as its drawing surface, identified by a unique id attribute.
• JavaScript Data Configuration — Chart.js charts are defined and configured entirely through a JavaScript object that specifies the chart type, the data to display, and visual options.
• Creating a Bar Chart — A bar chart is one of the most common chart types and is ideal for comparing discrete categories of data side by side.
• Creating Line and Pie Charts — Chart.js makes it straightforward to switch between chart types by changing a single property, allowing the same data configuration pattern to produce line or pie charts.
• Customizing and Enhancing Charts — Chart.js provides an extensive options API that lets you tailor the appearance, interactivity, and responsiveness of any chart to suit your project's needs.

Combining Libraries in a Complete Web Project

• Planning the Project Structure — Before writing any code, a well-organized project structure ensures that HTML, CSS, and JavaScript concerns are separated and that all external libraries are accounted for.
• Loading External Libraries in the Correct Order — The sequence in which CDN links appear in an HTML document determines whether each library is available when scripts that depend on it execute.
• Building the Responsive Layout with Bootstrap — Bootstrap's grid system and utility classes provide the scaffolding for the page, dividing it into regions for navigation, controls, and the chart display area.
• Adding Interactivity with jQuery — jQuery event handlers respond to user actions—such as button clicks or dropdown selections—and update the page or trigger chart changes dynamically.
• Rendering and Updating Charts with Chart.js — Chart.js uses a <canvas> element and a JavaScript configuration object to render charts, and its API allows datasets to be updated in place when driven by user interaction.
• Avoiding Library Conflicts — Multiple libraries operating on the same page can collide through shared global variables, CSS class names, or conflicting plugin behavior, so proactive conflict management is essential.
• Best Practices for Managing Dependencies — Consistently following dependency management best practices keeps the project maintainable, performant, and easier to update as library versions change.

Student Learning Outcomes

By the end of this module, students will be able to:

Course Outcomes (reference)

No course outcomes have been defined.