JavaScript 语言基础之二 | 青训营笔记

76 阅读3分钟

这是我参与「 第五届青训营 」伴学笔记创作活动的第 3 天。

前言

昨天,我跟随月影老师学习了 JavaScript 编码原则之各司其责、JavaScript 编码原则之组件封装、JavaScript 编码原则之过程抽象、Leftpad 事故背景引入以及 JavaScript 代码的质量优化之路等等。

由于我个人的基础比较薄弱,我主要聚焦在 JavaScript 的语言基础部分,并做了相应的笔记。昨天的笔记没有做完,今天再补充一点。

JavaScript 的标识符、关键字、保留字

JS 是大小敏感的语言,也就是说 A 和 a 是两个变量,大写字母是可以使用的。JS底层保存标识符的时候,是采用的 Unicode 编码。所以从理论上来说,在遵守命名规则的前提下,utf-8 中包含的所有内容都可以作为标识符。

关键字是 JS 本身已经使用了的单词,我们不能再用它们充当变量名、函数名等标识符。关键字在开发工具中会显示特殊的颜色。

ifelseswitchbreakcasedefaultforindowhilevarletconstvoidfunctioncontinuereturntrycatchfinallythrowdebuggerthistypeofinstanceofdeletewithexportnewclassextendssuperwithyieldimportstatictruefalsenullundefinedNaN

保留字实际上就是预留的“关键字”。它们虽然现在还不是关键字,但是未来可能会成为关键字。同样不能用它们当充当变量名、函数名等标识符。

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代码,当事件被触发时,这些代码将会执行。

代码书写步骤如下:

  1. 获取事件源:document.getElementById(“box”);
  2. 绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 };
  3. 书写事件驱动程序:关于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>