what-js-does-for-us.js

/**
 * Manipulate the DOM
 *
 * Therefor we have to find the element in the DOM and then we can change it
 */

// vanilla
var element = document.getElementById('my-id');
element.innerHTML = 'Hello World!';

// jquery
var element = $('#my-id')
element.text('some text');


/**
 * Listen for Events and react on them
 *
 * Therefor we have to create event listeners and pass them a function
 */

function myFunction(){
  alert('Hello World!');
}

// vanilla
var element = document.getElementById('my-id');
element.addEventListener('click', myFunction);

// jquery
var element = $('#my-id').click(myFunction);

/**
 * Loading data
 *
 * Therefor we have to make an ajax call and create a function to handle the new data
 */

// vanilla

var myApi = 'https://jsonplaceholder.typicode.com/posts';

function loadData() {

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };

  xhttp.open("GET", myApi + "/posts/1", true);

  xhttp.send();
};

var element = document.getElementById('my-id').addEventListener('click', loadData);


// jquery

function loadDataJq() {

  $.ajax({
    url: myApi + '/posts/1',
    method: 'GET',
    success: function(data) {
      $('#demo').text(JSON.stringify(data));
    }
  });

}


var element = $('#my-id').click(loadDataJq);