章母全端成長日記

innerHTML -方法：組完字串後，傳進語法進行渲染 -優點：效能快 -缺點：資安風險，要確保資料來源沒問題 craeteElement -方法 ：以DOM節點來處理 -優點：安全性高 -缺點：效能差 XSS(跨站指令攻擊)：蓄意用HTML標籤與JavaScript埋一些惡意程式碼來攻擊的動作 <textarea name="" id="content" cols="30" rows="10"></textarea> <input type="button" id="send" value="送出"> <div id="main"></div> document.querySelector('#send').onclick= function(){ var str = document.querySelector('#content').value; document.querySelector('#main').innerHTML = str; } 如在表單駭客可自行利用JavaScript的語法載入，例如在表單上打<script>alert('你被入侵了');</script>，可偷資料庫也可攻擊能力用JavaScript的語法去改寫成能載入的檔案進去，能亂塞JavaScript的語法，所以innerHTML盡量不要作成表單.可信任的資料如Open data等等可以使用innerHTML codepen

終於將高雄資訊旅遊完成，做的過程蠻煎熬因為不停的想不停的看別人怎做的，畢竟自己的還沒做過題目高手都蠻多的， 雖然煎熬但是一個題目真的可以學到東西，蠻充實的..一開始還好但是碰到一個頁數監聽跟熱門監聽還有表單的監聽要融合起來真的蠻頭痛，熱門跟表單還好。就差在頁數監聽卡兩天的時間， 想一想不行找codepen看前輩們是怎麼做的模式，看到好幾個真的看得不是很懂，有一個的模式蠻特別以函式為順序先監聽在一個一個函式寫將每筆生成陣列最後顯現渲染，顯現渲染是一個函式這個函式也是共用，也在熱門監聽跟表單監聽做融合 然後再這兩個裡面放頁數監聽，後來才解決頁數的問題。因為真的不知道監聽裡面還可以放監聽而且函式可以共用也就是說熱門監聽跟表單監聽可以用一個函式來融合。真的感恩這位 大大的程式碼 完成

在這裡與innerHTML的差異在於，innerHTML要用字串在for迴圈累加，累加後再以innerHTML將累加後的字串全都渲染出來。 createElement的for迴圈不需要字串，在for迴圈每一次跑一次迴圈就增加一次。在前一個[DOM]-9.createElement寫法有提過不會像innerHTML將先前的資料刪除。 <h1>每個農場的農夫名字</h1> <ul class="list"> </ul> var farms =[ { farmer:'卡斯伯', dog:['張姆仕','龐德'] }, { farmer:'查理', dog:['皮皮'] } ]; var el = document.querySelector('.list'); var farmLen = farms.length; for(var i=0; i<farmLen; i++){ var str = document.createElement('li'); str.textContent = farms[i].farmer; el.appendChild(str); } codepen

以DOM節點來處理，先以createElement來新增html的元素再以textContent寫入內容， 再以setAttribute新增元素掛入父元素加入子節點，在這裡不會像innerHTML會將先前的資料都刪除(同元素的標籤)， 但是這裡的寫法會比較長安全性高。 <h1 class="title"></h1> var str =document.createElement('em'); str.textContent ='123'; //增加子節點 str.setAttribute('class','blue'); document.querySelector('.title').appendChild(str); .blue{ color: blue; } codepen

<h1>每個農場的農夫名字</h1> <ul class="list"></ul> var farms =[ { farmer:'卡斯伯', dog:['張姆仕','龐德'] }, { farmer:'查理', dog:['皮皮'] } ]; var el = document.querySelector('.list'); var farmLen = farms.length; var str =''; for(var i=0; i<farmLen; i++){ var content ='<li>'+farms[i].farmer+'</li>'; str +=content; } el.innerHTML=str; 如沒有用空字串累加是沒辦法列出兩筆li的資料，原因是innerHTML渲染之前會刪除原本的資料，利用空字串是累加完一次渲染出來 codepen

<ul class="list"></ul> var el = document.querySelector('.list'); var link ='http://www.google.com.tw'; var name = '查理'; el.innerHTML ='<li><a href="'+link+'">'+name+'</li>'; 1.如href以及文字內容設為變數，在寫入字串到innerHTML的字串裡面加入href以及文字內容需要加入'+變數+' codepen

<div id="main"></div> var el = document.getElementById('main'); var str = '<h1 class="blue">1234</h1>'; el.innerHTML = str+str; .blue{ color: blue; } 1.如在html的id="main"文字加Hello使用innerHTML會清空 2.Element html標籤拉進去在裡面使用innerHTML 3.textContent是新增文字的節點 codepen

用JavaScript操控HTML的方法 innerHTML -方法：組完字串後，傳進語法進行渲染 -優點：效能快 -缺點：資安風險，要確保資料來源沒問題 craeteElement -方法 ：以DOM節點來處理 -優點：安全性高 -缺點：效能差

1.setAttribute來修改a元素的href <h1 class="titleClass"><a href="#">title</a></h1> var el = document.querySelector('.titleClass a'); el.setAttribute('href','http://www.google.com.tw'); 2.setAttribute來修改div元素的Id <div class="str">hello</div> #strId{ color: blue; font-size: 48px; } var el =document.querySelector('.str'); el.setAttribute('id','strId'); 3.getAttribute來取出a元素的href的值，getAttribute可改成textContent來取出文字內容。 或者使用innerHTML來取出資料 <h1 class="titleClass"><a href="#">title</a></h1> var el = document.querySelector('.titleClass a').getAttribute('href'); console.log(el); condepen1 condepen2 condepen3

<h1 class="titleClass1"><em></em></h1> <h1 class="titleClass1"><em></em></h1> <h1 class="titleClass2"><em></em></h1> <h1 class="titleClass2"><em></em></h1> 1.為什麼原本的方式不能選取多個元素,原因是querySelector只讀取單一的元素 var el1 = document.querySelector('.titleClass1'); el1.textContent = '12345'; 2.從這個寫法就是querySelectorAll選取多個元素形成陣列的寫法 var el1 = document.querySelectorAll('.titleClass1 em'); el1[0].textContent ='123'; el1[1].textContent ='123'; 3.在上個for迴圈章節老師有提到for迴圈跟陣列是朋友可以搭配,利用for迴圈將整個陣列的元素一次將同一個資料列出來 var el2 = document.querySelectorAll('.titleClass2 em'); var el2Len = el1.length; for(var i=0; i<el2Len; i++){ el2[i].textContent='12345'; }

這個部分屬於如果說Json格式本身外面有一個陣列蛋如果說最裡面還有一個陣列的話怎去完整地抓取(名字一項項的列出li),用一個for迴圈是能整個抓不過只要有一個陣列放在li會將整個陣列掛在li。這裡用巢狀迴圈內外迴圈各有if的判斷式，這兩個判斷式用typeof去判斷，判斷是否為Object以及string。 在這裏使用createElement以防innerHTML在每一次 <h1>列出農夫名字</h1> <ul class="list"></ul> var farms =[ { farmer:'查理' }, { farmer:'卡斯伯' }, { farmer:['喬丹','迪奧'] } ]; var farmLen = farms.length; var el = document.querySelector('.list'); var str =''; for(var i=0;i<farmLen;i++){ var farmerLen = farms[i].farmer.length; if(typeof(farms[i].farmer)=='string'){//判斷string var content = '<li>'+farms[i].farmer+'</li>'; str +=content; el.innerHTML =str; console.log(farms[i].farmer); } for(var j=0;j<farmerLen;j++){//跑Json裡面的陣列 if(typeof(farms[i].farmer)=='object'){//判斷object var content = '<li>'+farms[i].farmer[j]+'</li>'; str +=c

1.前面章節幾乎都使用getElementById取ID的方式更改文字內容 <h1 id="title">title</h1> var el1 = document.getElementById('title'); el1.textContent = '123'; 2.querySelector很像Css的＃，再ID名稱前面加# <h1 id="titleId">title</h1> var el2 = document.querySelector('#titleId'); el2.textContent = '1234'; 3.querySelector也可用class，在class名稱前面加. <h1 class="titleClass1">title</h1> var el3 = document.querySelector('.titleClass1'); el3.textContent = '12345'; 4.querySelector也可用html標籤，titleClass2為父元素em為子元素，但這裡是運用querySelector('.titleClass2 em')是要取出em <h1 class="titleClass2"><em>12</em></h1> var el4 = document.querySelector('.titleClass2 em'); el4.textContent = '12356'; codepen

1.瀏覽器在解析網頁結構的時候會去產生一個document。 2.document裡面的話就會依序解析裡面的html標籤。 3.標籤裡面有哪些元素例如:body裡面有h1、a連結。   (1).<h1>Header</h1>   (2). <a href="#">MyLink</a> 4.練了這章節顧名思義就是JavaScript可以控制標籤、ID、class取出裡面的值或是給予裡面的值。 5.Element代表一個網頁的元素,取ID就可以取出裡面的值，textContnet就是透過這樣的方式更改文字內容。    (1).document.getElementbyId('ID').textContent ="內容"; 5.下方為樹狀圖

1.經過上一次的頁數總結還是有問題，在於點擊頁數時會點到父元素讓筆數產生空值。 2.另外一個假設點到不是頁數卻還是數字生成筆數的迴圈會再亂跑，以防萬一在這裡設一個判斷式。 3.在生成for迴圈的頁數裡面的a設一個class為page，之後在監聽裡面加一個判斷式，判斷點擊不是page的時候執行return。 4.讓點擊頁數時不會出現空值或是筆數亂跳。 //利用for迴圈印出每六筆為一頁數 for(var i = 1; i<=pages; i++){ var a = '<a href="#" class="page">'+i+'</a>'; page_str +=a; container_page.innerHTML=page_str; } container_page.addEventListener('click',function(e){ var button_page_className = e.target.className; console.log(button_page_className);//測試用 if(button_page_className !== 'page'){//點擊到父元素執行return console.log('偵測到別的元素'); return; } }); codepen

上了六角學院筆記已經上到Event,還是會很想要看一下後面章節,看到老師給的作業要抓取Json格式資料要做成頁數。 還是有一直的嘗試有什麼方法能將頁數做出來,假日的時間和朋友一起學習JavaScript在吃晚餐的時候和朋友講述自己在做的頁數。 第一頁為1~6筆、第二頁為7~12筆、第三頁13~18筆,讓我有些靈感不斷的想全域變數去控制for迴圈之後真的成功了 只是一個模擬,希望後面能做出來完整的Json格式的頁數。 <div class="str"></div>//生成的頁碼 <div class="str1"></div>//6筆資料 var content = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18']; var el = document.querySelector('.str');//頁數父元素 var el1 = document.querySelector('.str1');//筆數父元素 var contentLen = content.length; var pages =contentLen/6;//頁數生成六筆為一頁 var str ='';//頁數字串 var str1 ='';//筆數字串 var contentMin = 0; var contentMax = 6; var contentTall =3;//可透過修改頁數去模擬點擊頁數之後會用event的方法去做 if(contentTall){//點擊模擬更改全域變數 contentMax*= contentTall;//最大 contentMin = contentMax-6;//最小 } //利用全域變數控制for

抓取頁數的事件,以target.innerText來抓取a元素的內容 <ul class="list"> <li><a href="">13</a></li> </ul> var el = document.querySelector('.list'); el.addEventListener('click',function(e){ var innerText = e.target.innerText; if(innerText ==13){ console.log('成功'); } }); codepen

不斷的測試到現在都天亮了，舒服... 其實就3個重點:  1.利用for迴圈生成頁數，以陣列的長度除以6。因為6筆為1頁，再將這個6筆為1頁以for迴圈來跑。假設總共有18筆內容，再將18除以6宣告為頁數的變數，再以for迴圈1跑到3。 2.初始筆數內容就比較簡單，以for迴圈0跑到6。 3.跟前面寫的JavaScript-頁數模擬利用全域變數來控制迴圈有點類似，但是在這裡以監聽點擊頁數事件來進行。以偵測內容來進行判斷。 <div class="container_page"></div>//生成的頁碼 <div class="container_content"></div>//6筆資料 .str{ width: 70px; } a{ padding: 0 8px; } em{ margin: 50px 50px; } var content = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18']; var container_page = document.querySelector('.container_page');//頁數父元素 var container_content = document.querySelector('.container_content');//筆數父元素 var contentLen = content.length;//陣列長度 var pages =contentLen/6;//頁數生成六筆為一頁 var page_str ='';//頁數字串 var start_content_str ='';//初始筆數字串 //利用for迴圈印出每六