no4
TRANSCRIPT
-
UIUX inopinop
2
-
jQuery
alert
alert('Hello, world');
console.log
console.log("Hello, world");
Safari!https://developer.apple.com/jp/technologies/safari/developer-tools.html
Chrome!http://gihyo.jp/dev/feature/01/devtools/0001
Firefox()!https://addons.mozilla.jp/refox/details/1843
-
Chrome
2.
3.
Windows: F12!Mac: option+command+i
1./
-
Chrome
!Elements !Sources CSSJavaScript!Console 21 1
-
Sources
Sources
!
-
Sources
localhost
-
Sources
localhost
index.html
index.html
localhosthtml
-
Sources
index.html
-
Sources
-
Sources
-
Sources
! ! ! !
!!!!!!!
-
Sources
Scope Variables
this!
-
!!!!
-
!!!html
-
Storage
-
WebStorage
sessionStorage / Web sessionStorage SESSION
-
WebStorage
sessionStorage
DATA sessionStorage.getItem(KEY);
DATAor sessionStorage.setItem(KEY, );
DATA sessionStorage.clear();
sessionStorage.removeItem(KEY);
sessionstorage/*.html
-
WebStorage
localStorage :http://www.localhost:80 M Cookie4KB
-
WebStorage
DATA localStorage.getItem(KEY);
DATAor localStorage.setItem(KEY, );
DATA localStorage.clear();
localStorage.removeItem(KEY);
localStorage
localstorage/*.html
-
geolocation
-
geolocation
geolocation
API
geolocation
MAP
http://caniuse.com/#feat=geolocation
-
geolocation
navigator.geolocation.getCurrentPosition(,,option)navigator.geolocation.watchPosition(,,option)
position
watchPositionwatchPositionid idclearWatch
navigator.geolocation.clearWatch(watchID)
-
geolocation
position.coords
coords.latitude
coords.longitude
coords.altitude
coords.accuracy
coords.altitudeAccuracy
coords.heading
coords.speed
position.coords
position.timestamp
position
-
geolocation
option
option.enableHighAccuracy ()GPS
option.timeout
option.maximumAge
error
error.code
1.2.3.
error.message
-
geolocation
!Chrome!Chrome!PC!GPS!
MAP!googleMAP!
!https://www.google.co.jp/maps!!Bing Maps!
!https://www.bing.com/maps/!Key
http://www.atmarkit.co.jp/ait/articles/1212/05/news008.html!
-
geolocation
googleMAPBing Maps!
-
geolocation
Google Map
head
// map = new google.maps.Map(document.getElementById(id"),{zoom : 15,center : new google.maps.LatLng(0,0),mapTypeId : google.maps.MapTypeId.ROADMAP});// marker = new google.maps.Marker({position: new google.maps.LatLng(0,0),map: map});
-
geolocation
Google Map
head
// map = new google.maps.Map(document.getElementById(id"),{zoom : 15,center : new google.maps.LatLng(0,0),mapTypeId : google.maps.MapTypeId.ROADMAP});// marker = new google.maps.Marker({position: new google.maps.LatLng(0,0),map: map});
-
geolocation
Google Map
function setMarker(lat, lon){var pos = new google.maps.LatLng(lat, lon);map.setCenter(pos);marker.setPosition(pos);
}
-
!Storage!MAP!HTML!!529()23:59:59!!
!MAP
-
web!http://www.atmarkit.co.jp/ait/articles/1212/19/news002.html!