我们知道写程序有个阶段就是一个输入、运算处理、输出
网页是由HTML、CSS、Javascript三个语言所组成
HTML 装着要呈现在网页上的资料，例如:文字、图片
CSS 可以修改资料的样式，例如:修改文字颜色、修改图片大小、一些网页动画
Javascript 可以对网页做动态地修改，例如:点击按钮将商品加入购物车、更客制化的网页动画
其中 Javascript 就会有很多运算的部分需要学习。
通常 HTML、CSS 都是写死的，也就是一开始就要设定好，按到网页的哪颗按纽，就会发生什麽事情。
而 Javascript 就可以比较有弹性，例如可以根据使用者点了哪个商品，就将那个商品加入购物车。
加入购物车这个功能，其实就是自动侦测我们点了那些商品，并且自动在网页的购物车页面画出我们点了什麽商品。
所以购物车页面，并不是写死的，而是透过 Javascript 自动在网页上画出来的。
那麽 Javascript 要如何自动修改网页、在网页上自己画东西出来呢?
可以透过 HTML DOM 来修改网页。
DOM(Document Object Model，文件物件模型)，就是将 HTML 以树状结构来表现的模型，组合起来的树状图，我们称之为「DOM Tree」
听起来很复杂，可以把他当作类似物件的东西。因为网页里面包含了很多复杂的资料，所以我们只要使用 DOM 里面提供的方法(也就是函式)，就可以更改网页的资料。
用起来的感觉就像这样
window.document.body.innerHTML="Hello World";
这个指令可以将网页全部的画面改成 "Hello World"
这个指令就是使用 innerHTML 这个方法将资料"Hello World"放进 document.body 这个地方
感觉就像我们使用方法修改了 document.body 这个物件。
那来一个简单的练习
可以使用其他编译器来练习，或者使用JS Bin这个网站
https://jsbin.com/
准备一个 HTML 档案，使用 button 标签写一个按纽叫做 Change
<html>
<head>
<script>
</script>
</head>
<body>
<button>Change</button>
</body>
</html>
接着我希望在我点击这个按钮就可以对网页做一些修改，我希望点下这个按钮之後就可以启动函式。
我准备一个 change 函式
<html>
<head>
<script>
function change(){
window.document.body.innerHTML="Hello World";
}
</script>
</head>
<body>
<button>Change</button>
</body>
</html>
我想修改的地方是 window.document.body
我修改的方法是 innerHTML
我要放的值是 "Hello World"
执行这个程序码後，网页画面就会变成 "Hello World"
那麽我们希望按下按钮後就启动函式，我们需要使用「事件处理」
在 button 标签，建立一个 click 事件
<button onclick="change();">Change</button>
<html>
<head>
<script>
function change(){
window.document.body.innerHTML="Hello World";
}
</script>
</head>
<body>
<button onclick="change();">Change</button>
</body>
</html>
这样就设定好了可以再按下按纽时启动 change() 函式
这样我们在网页中按下 button 标签，也就是 change 按钮，画面就会变成 Hello World
另一个范例
<html>
<head>
<script>
function change(){
}
</script>
</head>
<body>
<div>
Today is good day.
</div>
<button onclick="change();">Change</button>
</body>
</html>
现在我有一段文字 Today is good day.
我希望按下按钮後，可以替换里面的文字，将 good 替换成 bad。
我可以用一个标签将我想替换的范围包围起来
并且给这段标签加上 id 属性，给一个值 word
Today is <span id="word">good</span> day.
<html>
<head>
<script>
function change(){
}
</script>
</head>
<body>
<div>
Today is <span id="word">good</span> day.
</div>
<button onclick="change();">Change</button>
</body>
</html>
接着我就可以用 HTML DOM 提供的方法，去选取到我想修改的地方
我使用 document.getElementById() 方法，将 id 的值当作参数放进去
就会选取到我想修改的地方
我将我选取到的标签放进变数里
var target=window.document.getElementById("word");
接着我就可以使用 innerHTML 修改文字内容，将 good 替换成 bad
target.innerHTML="bad";
整段程序码看起来就会像这样
<html>
<head>
<script>
function change(){
var target=window.document.getElementById("word"); // 使用 id word 获取 span 标签
target.innerHTML="bad"; // 修改 span 标签内文
}
</script>
</head>
<body>
<div>
Today is <span id="word">good</span> day.
</div>
<button onclick="change();">Change</button>
</body>
</html>
<<: InnoDB的表格空间-Part2(各类型页面详细情况)
当要开发一个大型专案的时候，往往会落入一个错误的认知，就是认为投入的人数越多，开发越快。 软件开发需...
useContext useContext 本质上是 Context 的语法糖， 精简了 Conte...
第8话-料号版本 讲起版本这件事，肯定每间公司的进版规则都不一样 甚至是明明同一间公司，但在各地区(...
一切皆空，影片来源：YouTube 一般人以为佛教说的空，，等於什麽都没有，是消极并悲观的，其实不...
想先看 Code 或是 Demo 的由此去 Github Repo： ithelp-ui-demo...