adding figure callouts for ch1-5

MayaGans · MayaGans · commit 81a13625abf7 · 2019-11-09T08:32:37.000-08:00
diff --git a/basics.tex b/basics.tex
@@ -512,7 +512,7 @@ \section{Modules}\label{s:basics-modules}
 \end{aside}
 
 Since we're going to build command-line programs before doing anything in the browser,
-we will introduce Node's module system first.
+we will introduce Node's module system first (\figref{f:basics-require}).
 We start by putting this code in a file called \texttt{utilities.js}:
 
 \begin{minted}{js}
diff --git a/htmlcss.tex b/htmlcss.tex
@@ -15,7 +15,7 @@ \section{Formatting}\label{s:htmlcss-formatting}
 and a corresponding closing tag \texttt{\htmltag{/tagname}} (with a leading slash) shows where it ends.
 If there's nothing between the two, we can write \texttt{\htmltag{tagname/}} (with a trailing slash).
 
-A document's elements must form a \gref{g:tree}{tree},
+A document's elements must form a \gref{g:tree}{tree} (\figref{f:htmlcss-tree}),
 i.e.,
 they must be strictly nested.
 This means that if Y starts inside X,
@@ -306,7 +306,7 @@ \section{Tables}\label{s:htmlcss-tables}
 
 \section{Links}\label{s:htmlcss-links}
 
-Links to other pages are what make HTML hypertext.\index{link!in HTML page}
+Links to other pages are what make HTML hypertext (\figref{f:htmlcss-links}).\index{link!in HTML page}
 Confusingly,
 the element used to show a link is called \texttt{a}.
 The text inside the element is displayed and (usually) highlighted for clicking.
@@ -542,7 +542,7 @@ \section{Bootstrap}\label{s:htmlcss-bootstrap}
 One of the most popular is \hreffoot{https://getbootstrap.com/}{Bootstrap}\index{Bootstrap}
 (which is what we're using to style this website).
 Here's the entire source of a page that uses Bootstrap
-to create a two-column layout with a banner at the top:
+to create a two-column layout with a banner at the top (\figref{f:htmlcss-bootstrap}):
 
 \begin{minted}{html}
 <html>
diff --git a/oop.tex b/oop.tex
@@ -103,7 +103,7 @@ \section{Classes}\label{s:oop-classes}
 Building every object by hand and calling \texttt{thing.function(thing)} is clumsy.
 JavaScript solved these problems using \grefdex{g:prototype}{prototypes}{prototype},
 which also turned out to be almost as clumsy as our hand-rolled solution (\secref{s:legacy-prototypes}).
-Most object-oriented languages use \grefdex{g:class}{classes}{class!in JavaScript} instead;
+Most object-oriented languages use \grefdex{g:class}{classes}{class!in JavaScript} instead (\figref{f:oop-memory});
 these were added to JavaScript in ES6,
 and we will use them instead of prototypes throughout.
 Here's how we create a class that defines the properties of a square,
