DAY12-JavaScript（二）
前言：
昨天我们介绍了JavaScript几个最基本的用法，今天我打算来介绍JavaScript是如何跟网页做互动的！这里阿森来讲一下JavaScript在操作上给我的感觉好了，我觉得可以分成以下几个步骤：
抓到你想操控的部分→设定在哪种情况(event)下要做出什麽动作(handler)→设定这些动作(handler)
这样说起来很简单，可是当这些动作越来越复杂、互相牵扯的时候，你可能会发现你的coding和网页资料夹已经达到一个非常庞大的程度...但这都是要完成一个好网页要做出的牺牲！（对吧...）
那就让我们开始今天的介绍吧！
HTML的部分～：
在HTML里我们要先写出几个拿来操作的tag，我们就先写一个h1 tag当标题好了！再来为了演示event我们再加一个button tag吧！
<h1>Sen's Webpage</h1>
<ul class = "msg-list">
<li>msg 1</li>
<li>msg 2</li>
<li>msg 3</li>
<li>msg 4</li>
</ul>
<input class="input" type="text" />
<button class = "submit">submit</button>
所以这时候我们的body会变这样：
<body>
<h1>Sen's Webpage</h1>
<ul class = "msg-list">
<li>msg 1</li>
<li>msg 2</li>
<li>msg 3</li>
<li>msg 4</li>
</ul>
<input class="input" type="text" />
<button class = "submit">submit</button>
</body>
再来我们创建一个新的js档，取名为app.js，透过script tag把它引入，在把我们刚刚的tag分别加上几个class，这时候我们的body会变这样：
<body>
<h1>Sen's Webpage</h1>
<ul class = "msg-list">
<li>msg 1</li>
<li>msg 2</li>
<li>msg 3</li>
<li>msg 4</li>
</ul>
<input class="input" type="text" />
<button class = "submit">submit</button>
<script src="./app.js"></script>
</body>
当你看到页面变成这样时，html就大概完成了喔！
JavaScript & DOM：
在开始写JavaScript之前，我想先介绍一下一直提到的DOM到底是什麽，其实DOM就是所谓的文件物件模型（Document Object Model），它可以把html中的各种元素用树状结构方法表示出来，像下图这样：
更进一步来说，DOM 是拥有属性与函式节点、物件组成的结构化表示法。节点也可以附加事件处理程序，一旦触发事件就会执行处理程序，让我们可以更方便的让程序存取、改变文件架构、风格和内容。
介绍完了DOM就要来介绍今天最主要的部分啦，如何抓取这些元素呢？
这时候我们会用到几个javascript的指令：
const text = document.querySelector(".title");
简单来说就是透过document里面的querySelector来抓取我们的class，再指派一个const去代表这个元素，如此一来透过text我们就可以操作title这个class的元素了。
我们可以透过它来更改一些东西：
text.style.backgroundColor = "lightblue";
或是引入同一个目录下css档案里的某项选择器：
//in css
.text {
color: lightblue;
border: 12px solid darkblue;
font-size: 50px
}
//in JavaScript
text.classList.add("text")
也可以成功套用。
再来我们可以加一些事件的反馈：
const msgInput = document.querySelector(".input");
const submit = document.querySelector(".submit");
const msgList = document.querySelector(".msg-list");
submit.addEventListener("click", () => {
const newLi = document.createElement("LI");
const liContent = document.createTextNode(msgInput.value);
newLi.appendChild(liContent);
msgList.appendChild(newLi);
});
这时候我们网页就变这样：
我们可以输入测试讯息：
成功！
这样一来我们就成功对网页元素进行操作啦！
小结：
今天我们成功对网页DOM进行最基本的几个操作，相信这样大家对JavaScript的用法也有一定的了解，各位有兴趣也可以找网路上的影片或是document来看，越是熟练对之後的React就越容易上手，那今天就先这样，接下来阿森打算用JavaScript来写一个简单的网页小游戏，那我们就明天再见吧！
<<: Day 11 | Dart 非同步 - Stream
>>: [13th-铁人赛]Day 11:Modern CSS 超详细新手攻略 - Position (一)
DAY14:Toast显示讯息之简介
今天要来说到显示讯息，从我们使用电脑的过程中，很常会遇到跳出对话框让我们选择是或否或取消，或是当我们...
[Day 24] 实作-日期格式转换 字串长度限制
好的~ 昨天做好搜寻栏了，今天来做下面的列表 那一样需要先建一个子组件，可以参考 Day21，这边就...
Day 17：「我们，是好朋友哦～」- Vue 简介
嗨各位，Tailwind 篇结束了， 不知道会不会有人敲碗更多呢？ 还想知道更多的话也没有问题～ ...
Day02 - 安装 Docker
闲话家常 建议使用 docker 建构自己的测试环境，能最大的减少环境所产生的风险。虽然学习 doc...
JavaScript DOM | createElement()
接续昨天的 DOM 方法，JavaScript 常会出现:按一下某按钮，页面上会生出新的区块，这是怎...