ronpro2011f#09

790 views
747 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
790
On SlideShare
0
From Embeds
0
Number of Embeds
276
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ronpro2011f#09

  1. 1. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)N. Shimizu (chiko@sfc.keio.ac.jp)
  2. 2. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)•  (API) "   "   script "•  jQuery HTML "•  Google Map JavaScript API V3 "
  3. 3. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)jQuery•  JavaScript "   HTML "   2006 John Resig "   http://jquery.com/"•  HTML "
  4. 4. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski) livar items = document.getElementByTagName("li"); for(var i = 0; i < items.length; i = i + 1){ items[i].style.color = "red"; }
  5. 5. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)jQuery var items = document.getElementByTagName("li"); for(var i = 0; i < items.length; i = i + 1){ items[i].style.color = "red"; } $("li").css("color", "red");
  6. 6. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)jQuery•  script   script "   src jQuery URL<script src="http://ipl.sfc.keio.ac.jp/text/pro-2011-9/lib/jquery-1.7.1.min.js"></script>
  7. 7. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)<ul> <li>Hello, World</li> <li>Hello, SFC</li> <li>Hello, Fujisawa</li> </ul> <input type="button" value="Click me">
  8. 8. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)$( )•  HTML "   "   HTML "•  (selector)"   "   CSS
  9. 9. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)http://semooh.jp/jquery/api/selectors/ を参照のこと
  10. 10. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)var items; items = $("li"); items.css("color", "white"); items.css("font-size", "large"); items.css("background-color", "#333333");
  11. 11. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)$("li").css({ color: "white", bakcgroundColor:"#333333", fontSize: "large" });
  12. 12. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)09-1
  13. 13. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)<input type="text" id="input"> <script type="text/javascript"> var i = document.getElementById("input").value; </script> <input type="text" id="input"> <script type="text/javascript"> var i = $("#input").val(); </script>
  14. 14. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)<form> <input type="text" id="input"> <input type="button" value=" " onclick="addItem()"> </form> <ul id="#list"> </ul> <script src="http://ipl.sfc.keio.ac.jp/text/pro-2011-9/lib/jquery-1.7.1.min.js"></script>
  15. 15. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)function addItem(){ var i = $("#input").val(); var item = "<li>" + i + "</li>"; $("#list").append(item); }
  16. 16. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)HTML
  17. 17. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)function init(){ $("li").css("color", "red"); } $(document).ready(init);
  18. 18. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)function init(){ $("li").css("color", "red"); } $(init);
  19. 19. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)$(function(){ $("li").css("color", "red"); });
  20. 20. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)function f1(a){ return a + 1; } var f2 = function(a){ return a + 1; };
  21. 21. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski) "
  22. 22. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)$(function(){ $("li").css("color", "red"); });
  23. 23. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)function liClicked(){ $(this).css("color", "red"); } $(function(){ $("li").click(liClicked); }); http://jsdo.it/Noritada.Shimizu/lwMJ にデモがあります
  24. 24. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)$(function(){ $("li").click(function(){ $(this).css("color", "red"); }); });
  25. 25. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)http://semooh.jp/jquery/api/events/ を参照のこと
  26. 26. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)http://semooh.jp/jquery/api/events/ を参照のこと
  27. 27. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)09-2
  28. 28. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)Web
  29. 29. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)
  30. 30. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)<div id="map" style="width:300px;height:300px"></div> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://ipl.sfc.keio.ac.jp/text/pro-2011-9/lib/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ var latlng = new google.maps.LatLng(35.388276, 139.427348); // var opt = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; // var map = new google.maps.Map($("#map").get(0), opt); }); </script> http://jsdo.it/Noritada.Shimizu/r3zs にデモがあります
  31. 31. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)Google Map JavaScript API V3•  Google Map "•  "   http://code.google.com/intl/ja/apis/maps/documentation/ javascript/"   "  
  32. 32. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)04-3
  33. 33. N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski) panTovar map; $(function(){ // GoogleMap }); function updateMap(){ var center = new LatLng(35, 139); map.panTo(center); } http://jsdo.it/Noritada.Shimizu/8U7N

×