Tips for debugging code.

We all get stuck from time to time with broken code. We know what it needs to do, but don't know why it isn't doing what we expect.

Batch your work.

Don't write 20 or 30 lines of code without testing what you have written.

Batch your work into smaller units to understand what is going on.

Bugs are easier to find when they are small.

Read your error messages

Most error messages by your editor or browser point you to the exact line that is broken.

If you can't tell what's going on, copy and paste that into Google.

Take advantage of your tools

Use Google Chrome's Debugger

Find "linter"s for your editor

Remember Errors are opportunities to learn.

Example from Exercise 17...deconstruct your code in dev tools console

JSON

Stands for JavaScript Object Notation. It is object syntax that is standardized by the same organization that standardizes JavaScript.

JSON is frequently used to communicate data between programming languages. XML (extensible markup language) was primarily used before JSON.

A JSON file has the extension of .json. It is frequently used for configuration or smaller data sets.

Syntax

{
    "name": "Jon",
    "isAwake": true,
    "count": 3,
    "languages": ["JavaScript", "Java"],
    "job":{
        "field": "Development",
        "responsibilities": ["manager"],
        "boss": {
            "name": "Zac McCool",
            "title": "Senior Manager"
        }
    }

}
            

Must start and end with { } Must use quotation marks. Ticks don't work. Cannot have comments

JSON in JavaScript

            var jsonString = "{\"name\": \"Jon\"}";
            var jsonObj = JSON.parse(jsonString);

            console.log(jsonObj.name);
            

             var obj = {name: "Jon"};
            var jsonString = JSON.stringify(obj);

            console.log(jsonString); //"{\"name\": \"Jon\"}";
            

AJAX

• Asyncronous
• Javascript
• And
• Xml

JavaScript calls a url and the URL returns XML.

Most web services return JSON now a days.

$.ajax()

jQuery provides us a very easy and quick way to perform ajax calls.

        $.ajax({
            url:'',
            method:'GET|POST|PATCH|PUT|DELETE',
            success: function(response){},
            failure:function(response){}
        })
        

Method Types

• GET - Retrieve
• POST - Create
• PATCH - Modify
• PUT - Update
• DELETE - Delete

PATCH updates existing, PUT replaces altogether. Remember it as CRUD operations.

Difference between PATCH and PUT

$.ajax simplified

    $.get('blah.json', function(response){
    });

        

fiddle example

If you use jsfiddle and want to simulate ajax calls, use /echo

Appending and Prepending content

So far, this has been the primary method for adding content to an html element.

    var errors = $('.error');
    var currentHtml = errors.html();

    //Add to the end
    errors.html(currentHtml + '
new error
');

    //Adds to the beginning
    errors.html('
new error
' + currentHtml);
        
        

The jQuery Way

    var errors = $('.error');

    //Add to the end
    errors.append('
new error
');

    //Adds to the beginning
    errors.prepend('
new error
');
        
        

Performance

Do your best to not use these methods inside of a loop. Use them after a loop has completed. Why?

Don't

        for(var i = 0; i < errors.length;){
            $('error').append('This is an error');
        }
        

Do

        var errorList = ''
        for(var i = 0; i < errors.length;){
            errorList += 'This is my error';
        }
        $('error').append(errorList);
        

Example

See the Pen UA-ITR-jQuery-Append by Jon (@Middaugh) on CodePen.

Http POST Method

One of the primary methods for sending data from a website to a web server to be processed.

You have primarily seen POST requests on HTML forms.

We can create a better experience by using AJAX

jQuery $.post() method

    $.post('[url]', 'object to send' , function(response){
        //
    });
        

    $.post('api/user', {userName: 'Jon'} , function(response){
        //
    });
        

See the Pen BJXJbW by Jon (@Middaugh) on CodePen.

Exercise 18

There's lots of typos, issues with selectors, etc in part 1. These are on purpose to give you debugging practice.