JavaScript - jQuery and APIs: Objects, Objects Everywhere(JSON)

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 11(jQuery and APIs: Objects, Objects Everywhere)、JQUERY, HTML, AND CSS CODE MAGNETS(No. 5724)を解いてみる。

その他参考書籍

• Head First HTML and CSS
• Head First JavaScript Programming

JQUERY, HTML, AND CSS CODE MAGNETS(No. 5724)

JavaScript(BBEdit, Emacs)

$(document).ready(function() {
    var map,
        initialize = function () {
            var latlng = new google.maps.LatLng(45.519098, -122.672138),
                mapOpts = {
                    zoom: 13,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                },
                map = new google.maps.Map(
                    document.getElementById('map_canvas'), mapOpts);
        },
        getAllSightings = function () {
            $.getJSON('service.php?action=getAllSightings', function (json) {
                if (json.length > 0) {
                    $('#sight_list').empty();
                    $.each(json.sightings, function () {
                        var info = 'Data: ' + this['date'] +
                                   ', Type: ' + this['type'],
                            $li = $('<li/>');
                        $li.html(info);
                        $li.addClass('sightings');
                        $li.attr('id', this['id']);
                        $li.appendTo('#slit_list');                        
                    });
                }
            });
        };    
    initialize();
    getAllSihgtings();
});

HTML5(BBEdit, Emacs)

<link rel="stylesheet" href="form5724.css">
<section class="ui-widget-content form_pad">
  <div id="map_canvas"></div>
  <nav id="sight_nav">
    <ul id="sight_list">
    </ul>
  </nav>
</section>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="maps5724.js"></script>

CSS3(BBEdit, Emacs)

#map_canvas {
    float: left;
    height: 450px;
    width:450px;
}
#sight_nav{
    float:left;
}

ul#sight_list {
    width: 150px;
    padding: 0px;
    margin:0px;    
}
li.sightings {
    padding: 4px;
    background: #787382;
    border: #000 solid;
    color: #fff;
    list-style:none;
}
.li.sightings:hover {
    background: #eee;
    color: #000;
}