零基础Javascript，Day 01就不废话，开战。

零基础实战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站的笔记中占有一席之地了。
日後想要在网页中加入任何元素，都是一样的操作：

document.createElement("元素类型")

document.querySelector("想要放入的地址").append(物件名称)

元素.innerText="加上文字"

复习完毕，记得要自己实验看看当作练习哦！

完成了！无痛学会在任何网页上狂加按钮啦！
现在，让我们来点下按钮，好紧张，来看看会发生什麽事......疑？

什麽事情都没有。

因为还没告诉电脑我们「点击」之後要发生什麽事情啊！
就像是打电话叫外卖，结果迟迟不说你想要吃什麽，电脑不会通灵，乾脆吃大便算了。
所以我们的下一步，就是告诉电脑我们要操作的事件。
详情明天知晓。