JavaScript基本小抄

查詢型態
typeof(查詢)

輸入IdName值
document.gerElementById(‘IdName’).textContent= inputvalue;

取出IdName型態
var para = document.gerElementById(‘IdName’).type;

取出IdName值 (為字串 運算要轉為數值)
var para = document.gerElementById(‘IdName’).text;

字串轉數值
num = parseInt(字串)

onclick事件
document.gerElementById(‘IdName’).onclick = function(){
}

Array陣列
var cornFiled=[]; (空array)
cornField=[2,3,5]
cornField.push(5);(由array最後面做新增)
cornField[0]=10;(更改array index 0 的值為10)
cornField.length (array的長度)

Object物件
var farm ={
key1:value1,
key2,value2,
key3=[array1,array2],
goDinner:function(){}
}

混合
var farm=[{a1:xxx},{}]
取值 farm[0].a1

farm.chick=15; (Object新增)
讀取值
para0 = farm.chick
para1 = farm.key3[0]

Array內放Object
呼叫Array內的Object
[]撈Array資料
.撈Object資料

比較運算子
== / !==
=== 嚴謹比較 1==’1' / 1 === ‘1’
> ≥ < ≤

邏輯運算子
&& And
|| OR
! NOT

流程控制判斷
if(條件式){}
if(條件式){}else{}
if(條件式){}else if (條件式){}else{} 前面滿足不跑後面
switch(prefer){
case’one’:
func();
break;
case’two’:
func();
break;
dedault:
func()
break;
}

for迴圈
for(var i=1;i< 3;i++){
console.log(i)
}

迴圈常與(陣列+物件)一同使用
for (var i=1;i<array.length;i++){console.log(array[0].objectkey)
}

for迴圈 if控制判斷一同使用，找出符合條件
for(var i=0;i<array.length;i++){
if(array[i].objectkey>100){
console.log(…)
}}

i=i+1同以下兩種
i+=1
i++

陣列內物件的屬性加總
var farmsTotal = farms.length;
var fruitTotal = 0;
for (var i=1;i<farmsTotal;i++){
fruitTotal = fruitTotal + frams[i].fruit;
}
console.log(fruitTotal)

for break運用
for條件滿足一個後面迴圈就不執行
例如活動要買50份餐點，只要for陣列中找到一個有能力供應50份餐點的供應商就可以，陣列後面的供應商不用再迴圈查下去

JSON介紹

JSON資料格式 等同 JavaScript Object物件格式
JSON view chrome套件：JSONView

簡單的方式
var data = json (copy from web via 無痕視窗)
高級的方式AJAX

var total = data.length;
for (var i=0;i<totalli++){if(data[i].Rainfall10mon>0){
var country=data[i].County;
var Township=data[i].Township;
var rain=data[i].Rainfall10min;
console.log(country+Township+’:’+rain);
}}

選定document位置的兩種方式，文字給值textContent

document.getElementById(“titleId”).textContent = ‘12345’ Id只有一個唯一Id

var el = document.getElementById(“titleId”);
var el = document.querySelector(‘#id_name’);新的選取方式 選取器
var el = document.querySelector(‘.class_name’);
var el = document.querySelector(‘.class_name em’); 其中的em標籤el.textContent = ‘12345’;這種兩段的方式可以寫短些

var el = document.querySelectorAll(‘.class_name’); 選取多個 返回陣列
分別給值
el[0].textContent=’12345’;
el[1].textContect=’123’;
迴圈給值
for (var i=0,i=el.length,i++){
el[i].textContent=i+”:”+’123’;
}

屬性給值setAttributr

設定標籤屬性el.setAttribute(“屬性”,”屬性的值或取代字串”)
val el=document.querySelector(“.classname a”);
el.setAttribute(“href”,”http://www.google.com”);

取出屬性的值getAttribute

var el2 =document.querySelector(“.classname a”).getAttribute(‘href’);

取出文字textContent

var el3 =document.querySelector(“.classname a”).textContent;

取出HTML標籤textContent

var el4 = document.querySelector(“.classname a”).innerHTML;

給值HTML標籤innerHtml

var el5 = documnet.getElementById(‘main’);
el5.innerHTML=’<h1>Hello</h1>’;
el5.innerHTML=’<h1 class=”blue”>Hello</h1>’; 內置於Html的單引號要改成雙引號，才不會被認為陳述結束。這個塞陣列或JSON在網頁列表時常用

innerHTML組字串的技巧:放入變數

html
<ul class=’list’></ul>
js
var el = document.querySelector(‘.list’);
var link = ‘https://ww.google.com’;
var company=’谷歌’;
el.innerHTML=’<li><a href=”’+link+’”>’+company+’</a></li>’;

innerHTML的for迴圈應用

html
<ul class=’list’></ul>
js
var el=document.querySelector(‘.list’);
var farmLen = farms.length;
var str = ‘’;
for (i=0;i<farmLen;i++){
var content = ‘<li>’+farms[i].farmer+’</li>’;
str+=content;
}
el.innerHTML = str;

creatElement在HTML元素下面動態增加子節點

先用creatElement方法建立HTML元素
var str = document.creatElement(‘em’);
str.textContent=’1234';
str.setAttributr(‘class’,’blue’);
再用appendChild掛上去在該節點之上
document.querySector(‘.title’).appendChild(str);
這個方法不會蓋過原本的文字或屬性，會將新的HTML加在最後面

creatElenebt的for迴圈應用

html
<ul class=”list”></ul>
js
var el = document.querySelector(‘.list’);
var farmLen = farms.length;
for(var=0;var<farmLen;i++){
var str = document.creatElement(‘li’);
str.textContent = farms[i].farmer;
el.appendChild(str);
}

Event事件e.target了解目前元素所在位置

html
<input type=”button” value=”click” class=”btn”>
js
var el = document.querySelector(‘.btn’);
el.onclick = function(e){
console.log(e);
}
e是事件產生的資訊 可以是任何變數例如event
e.target顯示點擊元素範圍
e.target.nodeName顯示點擊元素 >>後續可以用if先判斷點擊是我想點擊的東西，後續再做行為

三種HTML元素綁定Event的方式

js
function sayHello(){
alert(‘Hello’);
}
html
<input onclick = “sayHello()” type=”button” value=”click” class=”btn”>
<input onclick = “alert(‘hello’)” type=”button” value=”click” class=”btn”> onclick直接執行程式碼也行

var btn= document.querySelector(‘.btn’);選擇元素綁定
onclick只能綁定一個事件不能兩個
btn.onclick = function(){
alert(‘Hello’);
}

var btn= document.querySelector(‘.btn’);選擇元素綁定
addEventListener能綁定多個事件
btn.addEventListener(‘click’,function(){
alert(‘hello’);
}.false)

stopParpagation避免事件監聽互相衝突

重疊只執行自己，重疊只執行一次，只執行我有間聽到的
var el= document.querySelector(‘.box’);
el.addEventListener(‘click’,function(e){
e.stopPropagation();
…
}.false)

perventDefault取消HTML元素默認行為

Html
<a class=”link” href=”http://www.google.com”>menu icon</a>
js
var el= document.querySelector(‘.link’);
el.addEventListener(‘click’,function(e){
e.preventDefault();
…
}.false)
本來會連結到google現在不會

下拉式選單觸發change事件

html
<select id = “areaId”>
<option value=”azone”>A-zone</option>
<option value=”bzone”>B-zone</option>
</select>
<ul id=”list”></ul>
js
var area = document.getElementById(‘areaId’);
var list = document.querySelector(‘.list’);
var len=zone.lengyh;
function updateList(e){
var select=e.target.value;
var str=’’;
for(var i=1;i<len;i++){if (select==zone[i].place){
str+=’<li>’+zone[i].name+’</li>’;
}}
list.innerHTML=str;
}
area.addEventListener(‘change’,updateList,false);

觸發鍵盤keydown事件

var body = document.body;

function goRocket(e){
switch(e.keyCode){
case 49:
document.querySelector(‘.rocket-1’).style.bottom = ‘2000px’
break;
case 50:
document.querySelector(‘.rocket-2’).style.bottom = ‘2000px’
break;
case 51:
document.querySelector(‘.rocket-3’).style.bottom = ‘2000px’
break;
}
}

body.addEventListener(‘keydown’,goRocket,false)

觸發blur事件(離開focus的時候)

function checkContent(e){
var str = e.target.value;
if(str==’’){
alert(‘此欄位不可為空’)
}
}
var el = document.getElementById(‘countId’);
el.addEventListener(‘click’,count,false);

var ham = document.getElementById(‘hamNumId’);
ham.addEventListener(‘blur’,checkContent,false);
var coke = document.getElementById(‘cokeNumId’);
coke.addEventListener(‘blur’,checkContent,false);

觸發mousemove事件

var el = document.querySelector(‘.box’);
el.addEventListener(‘mousemove’,function(){
alert(‘1234’);
},false)

網頁三種座標

function getPosition(e) {
screenX.textContent = e.screenX;
screenY.textContent = e.screenY;
pageX.textContent = e.pageX;
pageY.textContent = e.pageY;
clientX.textContent = e.clientX;
clientY.textContent = e.clientY;
mouseImg.style.left =e.clientX+’px’; 螢幕跟著游標移動
mouseImg.style.top =e.clientY+’px’;
}

var el = document.body;
el.addEventListener(‘mousemove’, getPosition, false);

監聽的優化：由父元素監聽子元素的技巧

var list = document.querySelector(‘.list li’);
li有多個只會監聽第一個

var list = document.querySelector(‘.list’);說明：改監聽父元素
list.addEventListener(‘click’,checkName,false)
function checkName(e){
if(e.target.nodeName!==’LI’){return};說明：return空值程式將不執行
說明：if 才不會監聽到其他不想監聽到的元素
console.log(e.target.textContent);
}