As I understand it, JNDI is like a shop assistant, showing the customers (the server and the web app) the way to the fruit aisle (the database), going past different food on the way (different resources). Is that about right?
Nice way of putting things together

...
JNDI is totally and entirely linked to the configurational side of the server. You won't be needing additional code to make beans on the webserver get shared across different applications. It behaves just like a TreeMap which has string vs an object. If you
lookup for a string, you will get the object.
Now when they say data source, what do they mean? What is its purpose? Also, I don't understand the text in green. Can someone err... thickify it for me?
A Datasource is like a wrapper to the connection. As you might know that there a lot of vendors working on creating datasources, at times they miss out on things in their drivers that can change the way your application interacts with your database. For example you might want to configure that a ConnectionFactory only passes 5 connections and not more than that at any point in time. It would become your headache to code that thing. Now what the containers have provided to you is the same thing but in an externalized manner (kind of property/xml file driven). They only say that you have the freedom to create database connections inside your application, but i have provided you an API via which you will be able to manage them outside of your application.
As far as the text in green is concerned, it just says that you need to make entries to your datasource to another file (usually server.xml) and just add a reference to it in your descriptor (usually web.xml). Then what it would do is that put an instance of the datasource object given by container to the TreeMap provided by JNDI and the string to access would be java:comp/env/<datasource_name> (something like java:comp/env/jdbc/myDatabaseName).
Hope that helps!!