3分钟：第 3 章 Javascript
_05
Javascript
是什么？
JavaScript 是一种基于对象的脚本编程语言。更多详细内容请参考 维基百科 。
我们在上一章中了解了
CSS
。通过
CSS
，我们创建了
具有某种属性的某样东西
。现在，我们将告诉这个家伙
应该做些什么
。
_06 点击按钮时，弹出提示框。
HTML
<div class="button" id="id_button">Button</div>
CSS
<style>
.button {
background-color:green;
color:white;
width:auto;
height:auto;
}
</style>
Javascript
<script>
document.getElementById("id_button").addEventListener("click",function(){
alert("hello world");
});
</script>
将以上内容集合在一个
.html
文件中，如下所示。
<!Documen HTML>
<html>
<head>
<style>
.button {
background-color:green;
color:white;
width:auto;
height:auto;
}
</style>
</head>
<body>
<div class="button" id="id_button">Button</div>
<script>
document.getElementById("id_button").addEventListener("click",function(){
alert("hello world");
});
</script>
</body>
</html>
上述内容是一个示例，点击该
div
标签时，会显示
'hello world'
字符串。
使用 JavaScript，可以通过特定标签的
id
、
class
等为该标签赋予特定的动作。
不仅是点击，还可以赋予
mouseover
、
mouseout
等鼠标事件的动作。
_07 修改按钮的属性。
HTML
<div class="button" id="id_button">Button</div>
CSS
<style>
.button {
background-color:green;
color:white;
width:auto;
height:auto;
}
</style>
Javascript
<script>
// 将 id_button 的颜色改为红色。
document.getElementById("id_button").style.color="red";
</script>
_08 停用按钮的样式表。
HTML
<div class="button" id="id_button">Button</div>
CSS
<style id="btn_css">
.button {
background-color:green;
color:white;
width:auto;
height:auto;
}
</style>
Javascript
<script>
// 停用文档中 ID 为 btn_css 的样式。
document.getElementById("btn_css").disabled = true;
</script>
今天我们简单地了解了 JavaScript。请认为我所介绍的 JavaScript 并不是
学习
，而是一种
氛围
。
以下是关于 JavaScript 的简单学习资料。
实际上，JavaScript 是一种只有通过
学习
才能正确使用的脚本语言。当您学习 JavaScript 时，会听到
ECMAScript
这个词。
可以将该词简单理解为 JavaScript 的
标准化
脚本语言。
cf.
以后在编写 JavaScript 时，有时会看到脚本开头有use strict字样。
这表示该脚本遵循标准，遵循标准意味着它是为在多个浏览器中相同地运行而设计的脚本。
总结
- JavaScript 让 HTML 动起来。
- JavaScript 可以更改应用在
document
上的属性值。
- JavaScript 可以自主更改
document
的标签。
- 今天稍微体验到的 JavaScript 仅占 1%。剩下的 99% 非常广阔。
3 分钟剧透
- 如果想从头到尾学完 JavaScript 再使用的话，感觉太辛苦了，有没有更简单的使用方法呢？
AD