JavaScript - jQuery and Ajax: Please Pass the Data(xml, find method)

Head First jQuery
(O'Reilly Media)
Ryan Benedetti(著), Ronan Cranley(著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox, Google Chrome(Webプラウザ)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc.(GUI) (Text Editor)
• JavaScript (プログラミング言語)

Head First jQuery(Ryan Benedetti(著)、Ronan Cranley(著)、O'Reilly Media)のChapter 8(jQuery and Ajax: Please Pass the Data)、JQUERY CODE MAGNETS(No 4220)を解いてみる。

その他参考書籍

• Head First HTML and CSS
• Head First JavaScript Programming

JQUERY CODE MAGNETS(No 4220)

JavaScript(BBEdit, Emacs)

$(document).ready(function(){
    var getTime = function () {
        var a_p = "",
            d = new Date(),
            curr_hour = d.getHours(),
            curr_min,
            curr_sec;

        if (curr_hour < 12) {
            a_p = "AM";
        } else {
            a_p = "PM";
        }
        if (curr_hour === 0) {
            curr_hour = 12;
        } else {
            curr_hour = curr_hour;
        }
        if (curr_hour > 12) {
            curr_hour = curr_hour - 12;
        } else {
            curr_hour = curr_hour;
        }
        
        curr_min = d.getMinutes().toString();
        curr_sec = d.getSeconds().toString();
        
        if (curr_min.length === 1) {
            curr_min = "0" + curr_min;
        }
        if (curr_sec.length === 1) {
            curr_sec = "0" + curr_sec;
        }         
        $('#updatedTime').html(curr_hour + ":" + curr_min + ":" + curr_sec +
                               " " + a_p );        
    },
        getXMLRacers = function () {
            $.ajax({
                url: 'finishers.xml',
                chache: false,
                dataTye: 'xml',
                success: function (xml) {
                    $('#finishers_m').empty();
                    $('#finishers_f').empty();
                    $('#finishers_all').empty();
                    $(xml).find('runner').each(function () {
                        var info = '<li>Name: ' + $(this).find('fname').text() +
                            $(this).find('lname').text() + '. Time: ' +
                            $(this).find('time').text() + '</li>',
                            gender = $(this).find('gender').text();
                        
                        if (gender === 'm') {
                            $('#finishers_m').append(info);
                        } else if (gender === 'f') {
                            $('#finishers_f').append(info);
                        }
                        $('#finishers_all').append(info);
                    });
                    getTime();
                }    
            });          
        };
    
    getXMLRacers();
});

index4220.html