Learn Web Development – The Super Simple Way

To better learn web development, you need to also learn JavaScript. Don’t be intimidated by the name, It’s simply a way to manipulate the existing elements on the page, or to alert the end user with notifications.

In the body of your document, place the following code somewhere inside the <body></body> section.

<script>
alert('Hello World!');
</script>

Refresh the page and notice the alert box that pops up. And that’s the beginning of JavaScript.

jQuery

If you really want to learn web development, and make it easy for you, you should look into the jQuery library. It’s this amazing little library written for jQuery. It makes for really nice, and cross browser compatible functionality. Especially when it comes to AJAX. jQuery has been around for about a decade at the time of this writing. It has stood the test of time.

AJAX = Asyncronous JavaScript and XMLHttp. It should really be called AJaX.

Add these terms to your library to learn web development.

To add jQuery, simply put this in your <head>, or before the end of the <body> tag. I prefer in the head because then jQuery becomes available to the whole document without additional code complexity.

<script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>

Don’t forget to remove the alert from your document, or it will get irritating.

Even though we’re using two external resources, our document loads fairly quick.

We’ve loaded jQuery, but can’t see anything different on our page. In your <script> tag, where you remove the alert, add the following:

$.ajax({
    url: '/',
    success: function(data) {
        console.log(data);
    }
});

Let see what’s happening here.

  1. The first line is jQuery’s command for making an AJAX call. Learn more about AJAX here.
  2. The second line specifies what the URL for that call is. In this case, it’s the main page that we’re already looking at.
  3. The next line handles the aftermath if the data received is successful. In this case it will be the HTML that comes back in the AJAX request.

To really see what’s happening, on Chrome, hit the F12 key. This should open up the inspector. At the top of this inspector, you’ll see tabs for Elements, Network, Console, etc… The Elements tab shows us our rendered Document as HTML elements. This is our DOM, or Document Object Model. The next tab is the Network. This is the one we’re interested in. Click it. Initially it won’t show anything. Refresh your page and see what happens in the Network Panel.

4 different things should load. One is our document. The next thing is our font. Then it’s jQuery, and last, should be our AJAX request result.

Click the different items and see their results to the right, or below. Notice the data that came back to render our document.

This can get a bit complex if you don’t handle your JavaScript right, so code responsibly.

let’s make the AJAX call work when you click something. Replace your <script> tag with the following:

 <a href="#" id="my_ajax_call">Click me</a>
 <script>
   $(document).on('click', '#my_ajax_call', function(e) {
     e.preventDefault();
     $.ajax({
       url: '/',
       success: function(data) {
         console.log(data);
       }
     });
   });
 </script>

Let’s go through the code to understand what happens.

  1. The newly created <a> or anchor tag has been given an ID of my_ajax_call. This will create a reference of that element in your DOM. Only one ID can be used per document, otherwise it will not be a valid document.
  2. We added a “click” event on our newly created element. Basically, we told jQuery to traverse the DOM and look for our element with the ID of my_ajax_call. Then we told it that when it’s clicked, run the following function
  3. The e.preventDefault() call makes sure that the link click is actually trapped as to not go to the href specified in the anchor tag.
  4. This looks familiar. It’s our ajax call.

When refreshed, you will see in our Network Panel that the AJAX call is never called on page load, but when you click on the newly created link, you’ll notice the AJAX calls piling up in the Network Panel in the Chrome Inspector.