Task 1: AJAX

In notebook:
FrontEndMasters Organising Javascript functionality
Created at:
JavaScript jQuery libraries DOM
We need the ​href​ for the AJAX request.
  $("[rel=js-controls]").on("click","> [rel^=js]",function(evt){

  // wrap it with $() to add jQuery methods (attr("href")
	var url = $(evt.target).attr("href");

  // specify dataType: "text": to preveny parsing
	$.ajax(url,{ dataType: "text" })

AJAX is very easy with jQuery. 
We still need to declare ​$modal​ (line#13)
  var $modal = $("[rel=js-modal]");
Insert it around (above) line#2. 

He prefixes all variables pointing to jQuery elements with ​$​. 

- What about using $(this)inside click handler? Instead of ​evt.target​?

It's not as reliable as you would expect. Because of event bubbling, ​this​ might not always point to what you want. jQuery makes sure, that ​evt.target​ always points to the element that got clicked on. More reliable. 

The ​.then​ in the AJAX is part of the jQuery API. It's not a promise. It's jQuery's thenable. 

Then explains callbacks - the function passed to ​.on()​.

This example shows mostly everything you will do with jQuery programming. 
handlers, chaining, ajax, update html, show element.
The JavaScript in this code is very simple. Most complexity is about jQuery. 

Again, he tries to avoid DOM, or HTML specific hooks in his code (i.e. tag names like ​a​).