<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var person={
name:'jerry',
height:'177'
};
document.write(person.hasOwnProperty('name'));
</script>
</body>
</html>
- 9月 17 週日 201700:52
物件是否含有某屬性，hasOwnProperty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var person={
name:'jerry',
height:'177'
};
document.write(person.hasOwnProperty('name'));
</script>
</body>
</html>
- 9月 16 週六 201718:45
匿名函式與立即函式，不取名直接執行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: #a00;
}
</style>
</head>
<body>
<h2>greet1：<span id="greet1"></span></h2>
<h2>greet1.language：<span id="greet1_lan"></span></h2>
<h2>greet2：<span id="greet2"></span></h2>
<h2>greet3：<span id="greet3"></span></h2>
<h2>greet4：<span id="greet4"></span></h2>
<script type="text/javascript">
/*函式也是物件，可以定義屬性*/
function greet1(name){
document.getElementById('greet1').innerHTML='Hi '+name;
}
greet1('john');
greet1.language='English';
document.getElementById('greet1_lan').innerHTML=greet1.language;
/*匿名函式*/
var greet2=function(name){
document.getElementById('greet2').innerHTML='Hi '+name;
}
greet2('mike');
/*直接執行匿名函式*/
var greet3=function(name){
document.getElementById('greet3').innerHTML='Hi '+name;
}('peter');
/*直接執行匿名函式並不幫函式命名*/
(function(name){
document.getElementById('greet4').innerHTML='Hi '+name;
}('frank'));
</script>
</body>
</html>
- 9月 15 週五 201712:13
google map api設定道路顏色、標示顏色、icon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#map{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
function init(){
//位置
var pinLocation = new google.maps.LatLng(23.563397,120.472856);
//設定
var ROADMAP ={
center: pinLocation,
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:15,
panControl:false, //不可水平移動
zoomControl:true, //有縮放鈕
zoomControlOptions:{
style:google.maps.ZoomControlStyle.SMALL,//小按鈕 可選LARGE
position:google.maps.ControlPosition.TOP_RIGHT //放右上方
},
mapTypeControl:true, //可以切換街道和衛星
mapTypeControlOptions:{
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU ,//下拉式選單
//可選：HORIZONTAL_BAR和DEFAULT
position:google.maps.ControlPosition.TOP_LEFT //放左上方
},
scaleControl:true,//顯示地圖刻度
scaleControlOptions:{
position:google.maps.ControlPosition.TOP_CENTER //上方中間
},
streetViewControl:false, //不可拖拉小橘人到地圖
overviewMapControl:false, //不顯示較大區域的縮圖
styles:[
{
stylers:[
{hue:'#00ff6f'}, //色相
{saturation:-50} //飽和度
]
},{
featureType:'road',//我要設定道路
elementType:'geometry',//幾何/線條的部分
stylers:[
{lightness:100},
{visibility:'simplified'} //道路細節精簡
]
},{
featureType:'transit',//我要設定大眾運輸
elementType:'geometry',//幾何/線條的部分
stylers:[
{hue:'#ff6600'},
{saturation:+80}
]
},{
featureType:'transit',//我要設定大眾運輸
elementType:'labels',//標示的部分
stylers:[
{hue:'#ff0066'},
{saturation:+80}
]
},{
featureType:'poi',//搜尋點
elementType:'labels',//標示的部分
stylers:[
{visibility: "off"}
]
},{
featureType:'poi.park',//搜尋點
elementType:'labels',//標示的部分
stylers:[
{visibility: "on"}
]
},{
featureType:'water',//搜尋點
elementType:'geometry',//幾何/線條的部分
stylers:[
{hue: "#c4f4f4"}
]
},{
featureType:'road',//道路
elementType:'labels',//標示的部分
stylers:[
{visibility: "off"}
]
}
]
};
//定位在畫面的哪裡，設定參考
var venueMap = new google.maps.Map(document.getElementById('map'),ROADMAP);
//定位點的標示
var startPosition= new google.maps.Marker({
position:pinLocation,
map:venueMap,
icon:'https://cdn3.iconfinder.com/data/icons/food-set-3/91/Food_C223-128.png'
});
};
</script>
<script src="http://maps.googleapis.com/maps/api/js?callback=init"></script>
</body>
</html>
- 9月 14 週四 201723:52
google map api針對縮放、衛星、地圖刻度、小橘人、較大地區縮圖的設定（物件的值）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#map{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
function init(){
var ROADMAP = new google.maps.Map(document.getElementById('map'),{
center: new google.maps.LatLng(23.563397,120.472856),
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:13,
panControl:false, //不可水平移動
zoomControl:true, //有縮放鈕
zoomControlOptions:{
style:google.maps.ZoomControlStyle.SMALL,//小按鈕 可選LARGE
position:google.maps.ControlPosition.TOP_RIGHT //放右上方
},
mapTypeControl:true, //可以切換街道和衛星
mapTypeControlOptions:{
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU ,//下拉式選單
//可選：HORIZONTAL_BAR和DEFAULT
position:google.maps.ControlPosition.TOP_LEFT //放左上方
},
scaleControl:true,//顯示地圖刻度
scaleControlOptions:{
position:google.maps.ControlPosition.TOP_CENTER //上方中間
},
streetViewControl:false, //不可拖拉小橘人到地圖
overviewMapControl:false, //不顯示較大區域的縮圖
})
};
</script>
<script src="http://maps.googleapis.com/maps/api/js?callback=init"></script>
</body>
</html>
- 9月 14 週四 201723:36
使用google.maps物件的MAP方法，傳入含有定位點、地圖類型、縮放尺寸等資訊的物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#map{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
function init(){
var ROADMAP = new google.maps.Map(document.getElementById('map'),{
center: new google.maps.LatLng(23.563397,120.472856), //double latitude, double longitude
mapTypeId:google.maps.MapTypeId.ROADMAP,
// satellite：衛星 hybrid：混合
zoom:13
})
};
</script>
<script src="http://maps.googleapis.com/maps/api/js?callback=init"></script>
</body>
</html>
- 9月 14 週四 201721:13
實作上一頁下一頁，history物件的back、forward方法、length屬性
<!-- 檔案：0914-10a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="0914-10b.html">去b</a>
<button id="back">上一頁</button>
<button id="forward">下一頁</button>
<h2>目前歷史紀錄共<span id="length"></span>筆</h2>
<script src="0914-10.js"></script>
</body>
</html>
- 9月 14 週四 201719:45
Modernizr，確認瀏覽器是否支援
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>
<body>
<script type="text/javascript">
if(Modernizr.geolocation){
document.getElementsByTagName('body')[0].innerHTML+='<h2>支援geolocation</h2>';
}
if(Modernizr.canvas){
document.getElementsByTagName('body')[0].innerHTML+='<h2>支援canvas</h2>';
}
if(Modernizr.flash){
document.getElementsByTagName('body')[0].innerHTML+='<h2>支援flash</h2>';
}
</script>
</body>
</html>
- 9月 14 週四 201719:19
換頁也存著資料，localStorage/sessionSrorage的key、setItem、getItem方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">按我</button>
<div id="result"></div>
<a href="http://www.google.com">先去一下google再回來按</a>
<script type="text/javascript">
if(!localStorage['clickcount']){
var i =0;
}else{
i=localStorage['clickcount'];
}
document.getElementById('btn').onclick=function(){
i++;
localStorage.setItem('clickcount',i);
for (var j = 0; j < localStorage.length; j++) {
document.getElementById('result').innerHTML='<h2>localSotorage的「'+localStorage.key(j)+'」欄位紀錄的資料是「'+localStorage.getItem(localStorage.key(j))+'」</h2>';
}
}
</script>
</body>
</html>
- 9月 14 週四 201718:43
取的經緯度位置，使用navigator物件的geolocation屬性的getCurrentPosition方法，產生的事件物件的coords屬性產生latitude與longitude屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<button id="btn">取得位置</button>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
document.getElementById('content').innerHTML=
'你的位置緯度是：'+position.coords.latitude+'<br>'+
'你的位置經度是：'+position.coords.longitude;
});
}else{
document.getElementById('content').innerHTML='不支援喔'
}
}
</script>
</body>
</html>
- 9月 14 週四 201715:11
JSONP，使用網址列後面加callback方式叫出JSON物件
1.伺服端建立資料代理程式（代理proxy）：
伺服端語言：asp.net、php、nodejs、ruby
伺服器架設 (1)