这是我参与「 第五届青训营 」伴学笔记创作活动的第 3 天。
前言
昨天,我跟随月影老师学习了 JavaScript 编码原则之各司其责、JavaScript 编码原则之组件封装、JavaScript 编码原则之过程抽象、Leftpad 事故背景引入以及 JavaScript 代码的质量优化之路等等。
由于我个人的基础比较薄弱,我主要聚焦在 JavaScript 的语言基础部分,并做了相应的笔记。昨天的笔记没有做完,今天再补充一点。
JavaScript 的标识符、关键字、保留字
JS 是大小敏感的语言,也就是说 A 和 a 是两个变量,大写字母是可以使用的。JS底层保存标识符的时候,是采用的 Unicode 编码。所以从理论上来说,在遵守命名规则的前提下,utf-8 中包含的所有内容都可以作为标识符。
关键字是 JS 本身已经使用了的单词,我们不能再用它们充当变量名、函数名等标识符。关键字在开发工具中会显示特殊的颜色。
if、else、switch、break、case、default、for、in、do、while、
var、let、const、void、function、continue、return、
try、catch、finally、throw、debugger、
this、typeof、instanceof、delete、with、
export、new、class、extends、super、with、yield、import、static、
true、false、null、undefined、NaN
保留字实际上就是预留的“关键字”。它们虽然现在还不是关键字,但是未来可能会成为关键字。同样不能用它们当充当变量名、函数名等标识符。
enum、await
abstract、boolean、byte、char、double、final、float、goto、int、long、native、short、synchronized、transient、volatile、
arguments eval Infinity
# 以下关键字只在严格模式中被当成保留字,在ES6中是属于关键字
implements、interface、package、private、protected、public
JavaScript 数据类型
- 基本数据类型(值类型):String 字符串、Number 数值、BigInt 大型数值、Boolean 布尔值、Null 空值、Undefined 未定义、Symbol。基本数据类型在参数赋值的时候传数值。
- 引用数据类型(引用类型):Object 对象。引用数据类型在参数赋值的时候传地址。
传参数方式与 Java 类似。接下来,我会省略一些与其他编程语言类似的语法,着重完成JavaScript 独特之处的笔记。
事件
JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。事件是指文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说,事件的例子有:点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。
事件的三要素:事件源、事件、事件驱动程序。
- 事件源:引发后续事件的html标签。
- 事件:js已经定义好了(见下图)。
- 事件驱动程序:对样式和html的操作。也就是DOM。
也就是说,我们可以在时间对应的属性中写一些js代码,当事件被触发时,这些代码将会执行。
代码书写步骤如下:
- 获取事件源:document.getElementById(“box”);
- 绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 };
- 书写事件驱动程序:关于DOM的操作。
示例:点击box1,然后弹框
<body>
<div id="box1"></div>
<script type="text/javascript">
// 1、获取事件源
var div = document.getElementById("box1");
// 2、绑定事件
div.onclick = function () {
// 3、书写事件驱动程序
alert("我是弹出的内容");
}
</script>
</body>