零基礎實戰javascript(1)-我直接在B站加上按鈕
效果：
在筆記本上加上一個按鈕（圖中橘色按鈕），作用是查單字。
適合誰學習：
想在網頁上自己加上一個自定義功能按鈕的人。
需要多久完成：
10分鐘。
需要準備什麼：
瀏覽器的ctrl+shift+j或f12（開發者工具）。
教學開始
首先來到B站，點開筆記本馬上來一個F12，會看到一隻可愛的蟲蟲。 不理他，我們馬上來寫第一行程式。
console.clear()
欸，蟲蟲不見了，沒錯我們第一行就是要殺蟲，留一個乾淨畫面。
接下來我們馬上建立一個按鈕。
document.createElement("button")
打到一半其實就可以直接選了，不需要完全打完，只要記document.createE到這，
這意思其實也很明白，就是在文件(document)中創造(create)一個元素(Element)。
後面需要給一個元素的屬性，因為我們要做按鈕，所以......
。
google後發現，按鈕英文是button（挖，誰說要懂英文才可以寫程式呢）。
因此我們就會打成：document.createElement("button")
這樣按鈕就已經建立好了，但無處安放，我們需要建立一個變數（空間），來擺放他。
所以我們就簡化button，採前、中、後的字母：btn當作我們這個按鈕的名字。
出來吧，btn。
下面跑出來這個html的標籤了，這代表我們成功啦！
只是東找找西找找，怎麼沒有在網頁中找到我們的按鈕呢？它躲去哪了？
原來是因為，我們雖然創造了元素，但我們沒有告訴電腦要把這個元素放哪邊。
就像訂foodXXXxx也要寫上地址，哪一棟哪一樓，或是給公寓的保全等。
我們需要有一個位置，來給我們創建的btn一個地方住。
這時候，我們利用開發者工具的功能：左邊這個小按鈕，是用來檢查網頁的元素。
點下去之後會發現，移動到網站上能看見奇怪的選取模式。
藍藍的地方就是選到不同元素。
找到一個適當的鄰居了，就是這裡，我想要讓按鈕住在這個地方。
點下去發現，右邊視窗跳到一堆html的原始碼中，而且有一行被選起來了。
就是他。
我們現在要用javascript表示他的位置來告訴電腦，讓電腦知道我們的元件要當他鄰居。
該怎麼表示這東西的位置呢？
我們對他按下右鍵來複製他JS的位置。
完全不需要寫半行程式碼阿......好失望。
但起碼地址get，我們完成任務了。
在上面元素的旁邊，點回來主控台，ctrl+v貼上這串地址，同時你會發現網頁中也有藍區塊顯示。
正確無誤，只剩下告訴電腦：「我的小btn想住在這地址旁邊。」
這時候需要寫什麼高深的代碼呢？
不用，我們直接低能英文開課，學一個新單詞：
原來如此，在某東西後面「附加」叫做append。
那我想要在這個「藍藍區塊」後面加上我的btn，應該就是告訴電腦，快給我APPEND！
由於這個「附加」是一個屬性，我們只需要打上一個點點。
然後括弧裡面告訴電腦這個新伙伴「btn」。
document.querySelector("#app > div.resizable-component.bili-note.active-note > div.note-drag-bar.drag-el > div.status-bar > div > span").append(btn)
天阿，才打上app三個字又出現答案了，開發者工具似乎很喜歡搶功勞。
奇怪怎麼還是沒有看到按鈕，怒！永邦的"原創曲"是抄襲鳥の詩！
原來是因為這個按鈕本身是空空如也的元素，我們必須給他一點靈魂。
例如文字。
那這個文字不是普通的文字，是在按鈕裡面的文字。
又從搜尋中學到了新的英文呢.....
這個跟上面「append 附加」一樣是一種「屬性」，所以我們也用點點。
所以打上：btn.innerText。
發現開發者工具又幫我們完成了，奇怪，怎麼文字也有！？
阿，那是我已經先輸入好了，所以被記憶起來>///<。
總之，btn.innerText="這是按鈕內文字"，輸入完，我們趕快按下Enter。
嗚嗚，居然出現了。
現在我們的btn已經寄生上流，在B站的筆記中佔有一席之地了。
日後想要在網頁中加入任何元素，都是一樣的操作：
1.
document.createElement("元素類型")
2.
document.querySelector("想要放入的地址").append(物件名稱)
3.
元素.innerText="加上文字"
複習完畢，記得要自己實驗看看當作練習哦！
完成了！無痛學會在任何網頁上狂加按鈕啦！
現在，讓我們來點下按鈕，好緊張，來看看會發生什麼事......疑？
什麼事情都沒有。
因為還沒告訴電腦我們「點擊」之後要發生什麼事情啊！
就像是打電話叫外賣，結果遲遲不說你想要吃什麼，電腦不會通靈，乾脆吃大便算了。
所以我們的下一步，就是告訴電腦我們要操作的事件。
詳情請見下集。
待續.....
創作內容
零基礎實戰javascript(1)-老子直接在B站加上按鈕（上）
推薦短篇精選 (0)
