ronpro2011f#09

N. Shimizu (chiko@sfc.keio.ac.jp / @chikoski)

N. Shimizu (chiko@sfc.keio.ac.jp)


•  (API) "
  "
  script "

•  jQuery HTML "
•  Google Map JavaScript API V3 "


jQuery

•  JavaScript "
  HTML "
  2006 John Resig "
  http://jquery.com/"

•  HTML "


li

var items = document.getElementByTagName("li");
for(var i = 0; i < items.length; i = i + 1){
items[i].style.color = "red";
}


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


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>


<ul>
<li>Hello, World</li>
<li>Hello, SFC</li>
<li>Hello, Fujisawa</li>
</ul>
<input type="button" value="Click me">


$( )

•  HTML "
  "
  HTML "

•  (selector)"
  "
  CSS


http://semooh.jp/jquery/api/selectors/ を参照のこと


var items;
items = $("li");
items.css("color", "white");
items.css("font-size", "large");
items.css("background-color", "#333333");


$("li").css({
color: "white",
bakcgroundColor:"#333333",
fontSize: "large"
});


09-1


<input type="text" id="input">
<script type="text/javascript">
var i = document.getElementById("input").value;
</script>

var i = $("#input").val();
</script>


<form>
<input type="button" value=" " onclick="addItem()">
</form>
<ul id="#list">
</ul>
<script src="http://ipl.sfc.keio.ac.jp/text/


function addItem(){
var i = $("#input").val();
var item = "<li>" + i + "</li>";
$("#list").append(item);
}


HTML


function init(){
}

$(document).ready(init);


function init(){
}

$(init);


$(function(){
});


function f1(a){
return a + 1;
}

var f2 = function(a){
return a + 1;
};


"


function liClicked(){
$(this).css("color", "red");
}
$(function(){
$("li").click(liClicked);
});

http://jsdo.it/Noritada.Shimizu/lwMJ にデモがあります


$(function(){
$("li").click(function(){
$(this).css("color", "red");
});
});


http://semooh.jp/jquery/api/events/ を参照のこと


09-2


Web


<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/
$(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 にデモがあります


Google Map JavaScript API V3

•  Google Map "
•  "
  http://code.google.com/intl/ja/apis/maps/documentation/
javascript/"
  "


04-3


panTo

var map;
$(function(){
// GoogleMap
});
function updateMap(){
var center = new LatLng(35, 139);
map.panTo(center);
}

http://jsdo.it/Noritada.Shimizu/8U7N

ronpro2011f#09

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (14)

Plus de Noritada Shimizu

Plus de Noritada Shimizu (20)

ronpro2011f#09