3.5. JavaScript and JQuery Tips

3.5.1. JavaScript Library Sources

3.5.2. JavaScript Library Sources

jQuery

Bootstrap4 apparently wants a specific version of jQuery:

jquery-3.3.1.min.js

It can be downloaded from the jQuery site (as of Feb 2020). Copy the file into the appropriate project directory. Currently that is:

./Food-Project-Inventory/fpiweb/static/fpiweb/

Popper

Bootstrap also wants to use a library called popper. The developers of this library strongly urge that it be downloaded and maintained using a version control system such as npm. The following are suggested steps for obtaining a current version of popper:

1. Install npm (or pnpm). Currently is is available via Homebrew. (See Pnpm site for other ways to obtain pnpm.)

brew install pnpm

#. If you already have a js repository go there. Otherwise move to an empty directory. Run this command to download and build popper.

pnpm install @popperjs/core

#. Go to the directory where the one file we need is located.

cd ./node_modules/@popperjs/core/dist/umd/

#. Copy the file “popper.min.js” into the appropriate project directory. Currently that is:

./Food-Project-Inventory/fpiweb/static/fpiweb/

The Three Levels of DOM Manipulation

There are 3 levels on which the page’s Document Object Model (DOM) may be manipulated.

1. Low-Level DOM manipulation

// Add a paragraph with text to a div
let div = document.getElementById('myDiv');
let p = document.createElement('p');
div.appendChild(p);
let text = document.createTextNode("Hello World");
p.appendChild(text);

// Search through children of div element (Only 1 level down in tree)
for(var i

2. Element-specific properties and methods

let field = document.getElementById('name');
field.value = "John";

3. JQuery manipulations

let allDivs = $('div');
allDivs.append('<p>hello</p>');