5.7 jQuery vs. VanillaJS

  1. Motivations
    • There are pros and cons in using jQuery. It is easy to use jQuery, and coding becomes simple and short. But jQuery code is slower than plain JavaScript code.
    • Nowadays computer systems including mobile devices are fast. When we use jQuery for user interfaces and AJAX, we do not see any latency. But when we develop a library/framework or when we use web technologies in less powerful devices, e.g., IoT devices, we should not loose any efficiency in the code.
    • How can we use JavaScript for the works with which we can do with jQuery?
  2. VanillaJS
    • VanillaJS is a name to refer to using plain JavaScript without any additional libraries like jQuery.
    • What can we do with jQuery?
      • Selections
      • Registration of event listeners
      • AJAX
    • Selections with plain JavaScript
      • document.getElementById(id)
      • document.getElementsByClassName(class) - It returns an array of DOM objects.
      • document.querySelector("CSS selection, e.g., .testclass > p") - the first one; HTML DOM querySelector() Method
      • document.querySelectorAll(CSS selection) - It returns an array of DOM objects. HTML DOM querySelectorAll() Method
      • domobject.innerHTML; domobject.attributeproperty
      • domobject.style.cssproperty
      • window.getComputedStyle(domobject).cssproperty
      • domobject.parentElement
      • domobject.previousSibling
      • ...
    • Registration of event listeners with plain JavaScript
      • domobject.addEventListener()
      • ...
    • AJAX with plain JavaScript
      • In the previous section, 5.6, we learned how to use AJAX with plain JavaScript.
      • XMLHttpRequest
      • How to send form data? Read exampls in Sending form data.
        • Building an XMLHttpRequest manually - We studied this in the previous section 5.6.
        • Using XMLHttpRequest and the FormData object
        • Using FormData bounding to a form element - The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method.
          var formObject = document.getElementById("idform");
          formObject.addEventListener("submit", function(eventObject) {
              eventObject.preventDefault();  // Do not submit the form.
              
              const xhr = new XMLHttpRequest();
              xhr.addEventListener("load", function() {  // XMLHttpRequest events: readystatechange, load, error, ...
                  ...  // xhr.responseText
              });
              xhr.open("post", ...);
              xhr.send(new FormData(formObject));
          });
          
        • Trial 1: Let's to send the 'ListQuestions' command to TRUQA controller, using the POST method.


        • Can you write the table code in the client, not the server-side? Then how to send data to the client from the server?

  3. Some review questions and learning outcomes
    • Use of plain JavaScript instead of jQuery