JavaScript 基础核心知识点闯关练习

初识 JavaScript

JavaScript 是什么

JavaScript (简称 JS)

是世界上最流行的编程语言之一
是一个脚本语言，通过解释器运行
主要在客户端 (浏览器) 上运行，现在也可以基于 node.js 在服务器端运行.

JavaScript 最初只是为了完成简单的表单验证 (验证数据合法性), 结果后来不小心就火了.当前 JavaScript 已经成为了一个通用的编程语言

JavaScript 的能做的事情:

网页开发 (更复杂的特效和用户交互)
网页游戏开发
服务器开发 (node.js)
桌面程序开发 (Electron, VSCode 就是这么来的)
手机 app 开发

发展历史

JavaScript 之父布兰登 * 艾奇 (Brendan Eich)

曾经的布兰登

现在的布兰登

1995 年，用 10 天时间完成 JS 的设计 (由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript 写出来的程序混乱不堪)最初在网景公司，命名为 LiveScript,一般认为，当时 Netscape 之所以将 LiveScript 命名为 JavaScript, 是因为 Java 是当时最流行的编程语言，带有 "Java" 的名字有助于这门新生语言的传播。

其实 Java 和 JavaScript 之间的语法风格相去甚远。

JavaScript 发展历史可以参考阮一峰大神的博客 http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html

JavaScript 和 HTML 和 CSS 之间的关系

JavaScript 运行过程

编写的代码是保存在文件中的，也就是存储在硬盘 (外存上).
双击.html 文件浏览器 (应用程序) 就会读取文件，把文件内容加载到内存中 (数据流向：硬盘 => 内存)
浏览器会解析用户编写的代码，把代码翻译成二进制的，能让计算机识别的指令 (解释器的工作)
得到的二进制指令会被 CPU 加载并执行 (数据流向：内存 => CPU)

浏览器分成渲染引擎 + JS 引擎

渲染引擎：解析 html+CSS, 俗称 "内核"
JS 引擎：也就是 JS 解释器，典型的就是 Chrome 中内置的 V8JS 引擎逐行读取 JS 代码内容，然后解析成二进制指令，再执行.

JavaScript 的组成

ECMAScript (简称 ES):JavaScript 语法
DOM: 页面文档对象模型，对页面中的元素进行操作
BOM: 浏览器对象模型，对浏览器窗口进行操作

光有 JS 语法，只能写一些基础的逻辑流程.但是想要完成更复杂的任务，完成和浏览器以及页面的交互，那么久需要 DOM API 和 BOM API.这主要指在浏览器端运行的 JS, 如果是运行在服务端的 JS, 则需要使用 node.js 的 API, 就不太需要关注 DOM 和 BOM

重要概念：ECMAScript

这是一套 "标准", 无论是啥样的 JS 引擎都要遵守这个标准来实现.啥叫标准？车同轨，书同文，秦始皇最大的贡献之一，就是制定了一套标准.三流公司做产品，一流公司做标准.

前置知识

第一个程序

复制代码

<script>
    alert("你好!");
</script>

JavaScript 代码可以嵌入到 HTML 的 script 标签中.

JavaScript 的书写形式

行内式直接嵌入到 html 元素内部

注意: JS 中字符串常量可以使用单引号表示，也可以使用双引号表示.HTML 中推荐使用双引号，JS 中推荐使用单引号！

内嵌式写到 script 标签中
<script> alert("haha"); </script>
外部式写到单独的.js 文件中
<script src="hello.js"></script>
// hello.js文件内容
alert("hehe");

注意：这种情况下 script 标签中间不能写代码，必须空着 (写了代码也不会执行).适合代码多的情况.

注释

单行注释 //（建议使用）
多行注释 /* */

// 我是单行注释
/*
我是多行注释
我是多行注释
我是多行注释
*/

使用 ctrl + / 切换注释.多行注释不能嵌套，形如这种代码就会报错:

复制代码

/*
/*
    我是多行注释
    我是多行注释
*/
*/

输入输出

输入: prompt

弹出一个输入框

复制代码

// 弹出一个输入框
prompt("请输入您的姓名:");

输出: alert

弹出一个警示对话框，输出结果

复制代码

// 弹出一个输出框
alert("hello");

输出: console.log

在控制台打印一个日志 (供程序员看)

复制代码

// 向控制台输出日志
console.log("这是一条日志");

注意：在 VSCode 中直接输入log再按 tab 键，就可以快速输入console.log需要打开浏览器的开发者工具 (F12) => Console 标签页才能看到结果.

这样的输出一般不是给普通用户看的，而是程序员来看的.

重要概念：日志

日志是程序员调试程序的重要手段去医院看病，医生会让患者做各种检查，血常规，尿常规，B 超，CT 等... 此时得到一堆检测结果。这些结果普通人看不懂，但是医生能看懂，并且医生要通过这些信息来诊断病情.这些检测结果就是医生的 "日志"PS: 相比于医生来说，程序猿多一个终极大招，"重启下试试".

重要概念:

console 是一个 js 中的 "对象"
. 表示取对象中的某个属性或者方法，可以直观理解成 "的"
console.log 就可以理解成：使用 "控制台" 对象 "的" log 方法.

语法概览

JavaScript 虽然一些设计理念和 Java 相去甚远，但是在基础语法层面上还是有一些相似之处的.有了 Java 的基础很容易理解 JavaScript 的一些基本语法.

前置知识

第一个程序

复制代码

<script>
    alert("你好!");
</script>

JavaScript 代码可以嵌入到 HTML 的 script 标签中.

JavaScript 的书写形式

行内式直接嵌入到 html 元素内部

注意: JS 中字符串常量可以使用单引号表示，也可以使用双引号表示.HTML 中推荐使用双引号，JS 中推荐使用单引号！

内嵌式写到 script 标签中
<script> alert("haha"); </script>
外部式写到单独的.js 文件中
<script src="hello.js"></script>
// hello.js文件内容
alert("hehe");

注意：这种情况下 script 标签中间不能写代码，必须空着 (写了代码也不会执行).适合代码多的情况.

注释

单行注释 //（建议使用）
多行注释 /* */

// 我是单行注释
/*
我是多行注释
我是多行注释
我是多行注释
*/

使用 ctrl + / 切换注释.多行注释不能嵌套，形如这种代码就会报错:

复制代码

/*
/*
    我是多行注释
    我是多行注释
*/
*/

输入输出

输入: prompt

弹出一个输入框

复制代码

// 弹出一个输入框
prompt("请输入您的姓名:");

输出: alert

弹出一个警示对话框，输出结果

复制代码

// 弹出一个输出框
alert("hello");

输出: console.log

在控制台打印一个日志 (供程序员看)

复制代码

// 向控制台输出日志
console.log("这是一条日志");

注意：在 VSCode 中直接输入log再按 tab 键，就可以快速输入console.log需要打开浏览器的开发者工具 (F12) => Console 标签页才能看到结果.

这样的输出一般不是给普通用户看的，而是程序员来看的.

重要概念：日志

重要概念:

console 是一个 js 中的 "对象"
. 表示取对象中的某个属性或者方法，可以直观理解成 "的"
console.log 就可以理解成：使用 "控制台" 对象 "的" log 方法.

语法概览

JavaScript 虽然一些设计理念和 Java 相去甚远，但是在基础语法层面上还是有一些相似之处的.有了 Java 的基础很容易理解 JavaScript 的一些基本语法.

提取

变量的使用

基本用法

创建变量 (变量定义 / 变量声明 / 变量初始化)

复制代码

var name = 'zhangsan';
var age = 20;

var 是 JS 中的关键字，表示这是一个变量。
= 在 JS 中表示 "赋值"，相当于把数据放到内存的盒子中。= 两侧建议有一个空格
每个语句最后带有一个 ; 结尾。JS 中可以省略；但是建议还是加上。
注意：此处的 ; 为英文分号。JS 中所有的标点都是英文标点。
初始化的值如果是字符串，那么就要使用单引号或者双引号引起来。
初始化的值如果是数字，那么直接赋值即可。

使用变量

复制代码

console.log(age);  // 读取变量内容
age = 30;          // 修改变量内容

为啥动漫中的角色都是要先喊出技能名字再真正释放技能？就是因为变量要先声明才能使用。

代码示例：弹窗提示用户输入信息，再弹窗显示.

复制代码

var name = prompt("请输入姓名:");
var age = prompt("请输入年龄:");
var score = prompt("请输入分数:");
alert("您的姓名是: " + name);
alert("您的年龄是: " + age);
alert("您的分数是: " + score);

也可以把三个输出内容合并成一次弹窗

复制代码

var name = prompt("请输入姓名:");
var age = prompt("请输入年龄:");
var score = prompt("请输入分数:");
alert("您的姓名是: " + name + "\n" + "您的年龄是: " + age + "\n" + "您的分数是: " + score + "\n");

+ 表示字符串拼接，也就是把两个字符串首尾相接变成一个字符串。
\n 表示换行

JavaScript 中还支持使用 let 定义变量，用法和 var 基本类似。用法上的差异此处暂时不讨论。

理解动态类型

JS 的变量类型是程序运行过程中才确定的 (运行到 - 语句才会确定类型)

var a = 10; // 数字
var b = "hehe"; // 字符串
随着程序运行，变量的类型可能会发生改变。

var a = 10; // 数字
a = "hehe"; // 字符串

这一点和 C Java 这种静态类型语言差异较大。C, C++, Java, Go 等语言是静态类型语言。一个变量在创建的时候类型就确定了，不能在运行时发生改变。如果尝试改变，就会直接编译报错。

基本数据类型

JS 中内置的几种类型

number: 数字。不区分整数和小数。
boolean: true 真，false 假。
string: 字符串类型。
undefined: 只有唯一的值 undefined。表示未定义的值。
null: 只有唯一的值 null。表示空值。

number 数字类型

JS 中不区分整数和浮点数，统一都使用 "数字类型" 来表示。

数字进制表示

计算机中都是使用二进制来表示数据，而人平时都是使用十进制。因为二进制在使用过程中不太方便 (01 太多会看花眼)。所以在日常使用二进制数字时往往使用八进制和十六进制来表示二进制数字。

复制代码

var a = 07;   // 八进制整数，以 0 开头
var b = 0xa;  // 十六进制整数，以 0x 开头
var c = 0b10; // 二进制整数，以 0b 开头

注意:

一个八进制数字对应三个二进制数字
一个十六进制数字对应四个二进制数字。(两个十六进制数字就是一个字节)

各种进制之间的转换，不需要手工计算，直接使用计算器即可。

特殊的数字值

Infinity: 无穷大，大于任何数字。表示数字已经超过了 JS 能表示的范围。
-Infinity: 负无穷大，小于任何数字。表示数字已经超过了 JS 能表示的范围。
NaN: 表示当前的结果不是一个数字。

var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);

注意:

负无穷大和无穷小不是一回事。无穷小指无限趋近与 0，值为 1 / Infinity
'hehe' + 10 得到的不是 NaN，而是 'hehe10'，会把数字隐式转成字符串，再进行字符串拼接。
可以使用 isNaN 函数判定是不是一个非数字。

console.log(isNaN(10)); // false
console.log(isNaN('hehe' - 10)); // true

string 字符串类型

基本规则

字符串字面量需要使用引号引起来，单引号双引号均可。

复制代码

var a = "haha";
var b = 'hehe';
var c = hehe;  // 运行出错

如果字符串中本来已经包含引号咋办？

复制代码

var msg = "My name is "zhangsan"";       // 出错
var msg = "My name is \\"zhangsan\\"";  // 正确，使用转义字符。"\\" 来表示字符串内部的引号。
var msg = "My name is 'zhangsan'";      // 正确，搭配使用单双引号
var msg = 'My name is "zhangsan"';      // 正确，搭配使用单双引号

转义字符

有些字符不方便直接输入，于是要通过一些特殊方式来表示。

\n
\\
\'
\"
\t

求长度

使用 String 的 length 属性即可

复制代码

var a = 'hehe';
console.log(a.length);

var b = "哈哈";
console.log(b.length);

4
2

单位为字符的数量

字符串拼接

使用 + 进行拼接

复制代码

var a = "my name is ";
var b = "zhangsan";
console.log(a + b);

注意，数字和字符串也可以进行拼接

复制代码

var c = "my score is ";
var d = 100;
console.log(c + d);

注意，要认准相加的变量到底是字符串还是数字

复制代码

console.log(100 + 100);   // 200
console.log('100' + 100); // 100100

boolean 布尔类型

表示 "真" 和 "假"boolean 原本是数学中的概念 (布尔代数)。在计算机中 boolean 意义重大，往往要搭配条件 / 循环完成逻辑判断。

Boolean 参与运算时当做 1 和 0 来看待。

复制代码

console.log(true + 1);
console.log(false + 1)

这样的操作其实是不科学的，实际开发中不应该这么写。

undefined 未定义数据类型

如果一个变量没有被初始化过，结果就是 undefined，是 undefined 类型

复制代码

var a;
console.log(a)

undefined 和字符串进行相加，结果进行字符串拼接

复制代码

console.log(a + "10");  // undefined10

undefined 和数字进行相加，结果为 NaN

复制代码

console.log(a + 10);

null 空值类型

null 表示当前的变量是一个 "空值"。

复制代码

var b = null;
console.log(b + 10);  // 10
console.log(b + "10"); // null10

注意:null 和 undefined 都表示取值非法的情况，但是侧重点不同。

null 表示当前的值为空。(相当于有一个空的盒子)
undefined 表示当前的变量未定义。(相当于连盒子都没有)

JavaScript 基础核心知识点闯关练习

初识 JavaScript

JavaScript 是什么

发展历史

JavaScript 和 HTML 和 CSS 之间的关系

JavaScript 运行过程

JavaScript 的组成

重要概念：ECMAScript

前置知识

第一个程序

JavaScript 的书写形式

注释

输入输出

输入: prompt

输出: alert

输出: console.log

重要概念：日志

重要概念:

语法概览

前置知识

第一个程序

JavaScript 的书写形式

注释

输入输出

输入: prompt

输出: alert

输出: console.log

重要概念：日志

重要概念:

语法概览

变量的使用

基本用法

代码示例：弹窗提示用户输入信息，再弹窗显示.

理解 动态类型

基本数据类型

number 数字类型

数字进制表示

特殊的数字值

string 字符串类型

基本规则

转义字符

求长度

字符串拼接

boolean 布尔类型

undefined 未定义数据类型

null 空值类型

理解动态类型