2015年5月9日土曜日

開発環境

  • 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)、SHARPEN YOUR PENCIL(No. 5748)を解いてみる。

その他参考書籍

SHARPEN YOUR PENCIL(No. 5748)

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);

            getAllSihgtings();
        },
        getSingleSighting = function (id) {
            $.getJSON('service.php?action=getSingleSighting&id='+id,
                      function(json) {
                          if (json.sightings.length > 0) {
                              $.each(json.sightings, function() {
                                  var loc = new google.maps.LatLng(
                                      this['lat'], this['long']),
                                      my_marker = new google.maps.Marker({
                                          position: loc,
                                          map: map,
                                          title: this['type']
                                      });
                                  map.setCenter(loc, 20);
                              });
                          }
                      });
        },
        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.click(function() {
                            getSingleSighting(this['id']);
                        });
                        $li.appendTo('#slit_list');                        
                    });
                }
            });
        };    
    initialize();    
});

0 コメント:

コメントを投稿