【零基礎】簡易JavaScript！學寫港鐵到站時間網頁 #4-利用JS更改HTML
JS和HTML是兩個不同的檔案，連結後要輸入什麼才會互動？
今次目標，在JavaScript（JS）檔寫入指令，更改原本存在的HTML內容。過程中會學到3個JavaScript指令。
本集重點：
- JavaScript 除錯方法-console.log()
- Html也有身份證id？簡介document.getElementById()
- Element.innerHTML/ innerText
JavaScript 除錯方法 — console.log()
要檢查JavaScript檔是否正確連結到HTML，可以直接在JavaScript輸入指令，然後在瀏覽器的DevTools-Console（開發者工具-控制台）看到所輸入的文字。
只要在JS 檔內輸入console.log()，括號「（）」內的東西就會顯示在Console之中。
這裏要簡單介紹資料類型，往後會再詳細介紹。
如果是英文或中文字的話，緊記要以單引號 (' ') 或雙(" ")包裹文字在內，這種類型叫String（字串），像純文字一樣。
如果沒有引號，JavaScript會以為它是一個variable（變數）名稱，就像數學計算 a=1 中的a。
如果你寫了a=1，再console.log(a)，那它就會出現1，沒有的話就會出現錯誤。
至於123這種沒有引號，JavaScript會直接當它是數字。
✅ console.log(123) -> 123❎ console.log(popo)✅ console.log(‘popo’) -> popopopo=1✅ console.log(popo) ->1
Html身份證id — 簡介document.getElementById
先簡介一個HTML TAG — <div>，老是常出現的<div>，其實是「一個籃子」，把其他東西裝在一起，把HTML TAG放在一起，讓CSS 和JS 辨認。它有一個特色，就是佔據一整行。
我們在<body></body>內輸入多個<div>：
<div>45678</div>
<div>45678</div>
<div id=“number”>45678</div>三個<div>的內容也一樣，但最後一個<div> 多了一個id
這是我們給它的一個身份證號碼，任意訂定，但需要獨一無二，今次給它的身份證就叫「number」。
id 命名如果多於一個英文字，會用 「 - 」分隔，例如 「first-number」。
然後在JS內，輸入 document.getElementById(‘number’)，這是一個JavaScript預設指令，document的意思是連結的檔案，getElementById是尋找一個HTML的id，括號內就放入我們要找的id。
所以整句句子的意思，就是「請在HTML檔內，找出id是number的HTML吧！」
利用console.log( document.getElementById(‘number’) ) ，從DevTools 就可以知道有拿到東西。
Element.innerHTML/ innerText
透過JavaScript抽出來的HTML，叫DOM或Element，可以有很多操作。現在先講解一個延伸操作 .innerHTML
Element.innerHTML 是指，把物件內的HTML抽出。剛才的例子中，如果我們寫上以下JavaScript，其實等如 45678：
document.getElementById(‘number’).innerHTML.innerHTML 是雙向，可以抽出，也可以放入，只要你在右邊加上等號，再寫上你要加的東西，就會放入這個HTML之中。以下JavaScript，畫面就會出現11111：
document.getElementById(‘number’).innerHTML=“11111”你也可以同時「抽出」，又同時放入。畫面就變成 原本的”45678"加上"11111"：
document.getElementById(‘number’).innerHTML=
document.getElementById(‘number’).innerHTML＋“11111”你也可以試試document.body.innerHTML會出現什麼。
.innerHTML 跟 .innerText 兩者很相似，但前者如果你在文字中加HTML Tag，會轉換成HTML，但後者就只會當成純文字處理。
document.getElementById(‘number’).innerHTML=“<p>1111</p>”看看有什麼分別？
[教學] JavaScript！學寫港鐵到站時間網頁系列
#1-安裝VS Code (前往）
#2-Chrome開發者工具 (前往）
#3-連結HTML、JS及CSS檔(前往)
#4-利用JS更改HTML(前往)
作者的話 (可以略過)「我要控制科技，而不是被科技控制我！」感謝您看我的文章。
我原本是一個新聞記者，但年近30，開始感到迷惘。
於是報讀了Coding Bootcamp，3個多月成功轉職「軟件工程師」。很多朋友問我到底難不難？
我嘗試運用記者經驗，將問題深入淺出，簡短地讓沒有經驗的你，感受一下Programming適不適合自己。另一個目的，我希望累積教學經驗。
日後有手足要幫忙，我可以幫到。
即使沒有財力開公司請人，也希望授之以漁。
所以有問題請留言，我也希望知道自己哪裏講得不夠好。▲▲香港 時代▲▲