JavaScript是什么

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

JavaScript 的能做的事情:

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

• HTML: 网页的结构(骨骼)
• CSS: 网页的表现(皮囊)
• JavaScript: 网页的 行为(灵魂)

JavaScript 运行过程

编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).

双击 .html 文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向: 硬盘 => 内存)

浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作)

得到的二进制指令会被 CPU 加载并执行(数据流向: 内存 => CPU)

• 浏览器分成渲染引擎 + JS 引擎.
• 渲染引擎: 解析 html + CSS, 俗称 "内核"

• JS 引擎: 也就是 JS 解释器. 典型的就是 Chrome 中内置的 V8

JS 引擎逐行读取 JS 代码内容, 然后解析成二进制指令, 再执行.

JavaScript 的组成

ECMAScript(简称 ES): JavaScript 语法

DOM: 页面文档对象模型, 对页面中的元素进行操作

BOM: 浏览器对象模型, 对浏览器窗口进行操作

光有 JS 语法, 只能写一些基础的逻辑流程.

但是要想完成更复杂的任务, 完成和浏览器以及页面的交互, 那么就需要 DOM API 和 BOM API.

这主要指在浏览器端运行的 JS.

如果是运行在服务端的 JS , 则需要使用 node.js 的 API, 就不太需要关注 DOM 和 BOM

重要概念: ECMAScript

这是一套 “标准”, 无论是啥样的 JS 引擎都要遵守这个标准来实现.

啥叫标准? 车同轨, 书同文. 秦始皇最大的贡献之一, 就是制定了一套标准.

三流公司做产品, 一流公司做标准.

JavaScript 的书写形式

行内式

直接嵌入到 html 元素内部

<input type="button" value="点我一下" onclick="alert('thank u kobe')">

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

内嵌式

写到 script 标签中

<script>
    alert("thank u kobe");
</script>

外部式

写到单独的 .js 文件中

<script src="hello.js"></script>
alert("hehe");

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

适合代码多的情况.

输入输出

输入：promp

弹出一个输入框

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

输出：alert

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

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

输出：console.log

在控制台打印一个日志(供程序员看 在浏览器的开发者工具下查看console标签页即可查看)

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

注意: 在 VSCode 中直接输入 "log" 再按 tab 键, 就可以快速输入 console.log

敲黑板！！！

重要概念: 日志

日志是程序员调试程序的重要手段

去医院看病, 医生会让患者做各种检查, 血常规, 尿常规, B超, CT等… 此时得到一堆检测结果. 这些

结果普通人看不懂, 但是医生能看懂, 并且医生要通过这些信息来诊断病情.

这些检测结果就是医生的 “日志”

重要概念:console .

console 是一个 js 中的 “对象”

. 表示取对象中的某个属性或者方法. 可以直观理解成 “的”

console.log 就可以理解成: 使用 “控制台” 对象 “的” log 方法.(有点java内味儿)

语法概览

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 基本类似.

1. 作用域不同

var是函数作用域，let是块作用域。

在函数中声明了var，整个函数内都是有效的，比如说在for循环内定义的一个var变量，实>际上其在for循环以外也是可以访问的

而let由于是块作用域，所以如果在块作用域内定义的变量，比如说在for循环内，在其外面>是不可被访问的，所以for循环推荐用let

2. let不能在定义之前访问该变量，但是var可以。

let必须先声明，再使用。而var先使用后声明也行，只不过直接使用但没有定义的时>候，其值是undefined。var有一个变量提升的过程，当整个函数作用域被创建的时候，实际上var定义的变量都会被创建，并且如果此时没有初始化的话，则默认为初始化一个undefined

3.let不能被重新定义，但是var是可以的

理解 动态类型

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

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

随着程序运行, 变量的类型可能会发生改变.

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

基本数据类型

JS 中内置的几种类型

number: 数字. 不区分整数和小数.

boolean: true 真, false 假.

string: 字符串类型.

undefined: 只有唯一的值 undefined. 表示未定义的值.

null: 只有唯一的值 null. 表示空值.

number数字类型

特殊的数字值

Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.

-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.

NaN: 表示当前的结果不是一个数字.

注意:

1. 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity
2. ‘hehe’ + 10 得到的不是 NaN, 而是 ‘hehe10’, 会把数字隐式转成字符串, 再进行字符串拼接.
3. 可以使用 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);//结果是4
var b = '哈哈';
console.log(b.length);//结果是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 表示当前的变量未定义. (相当于连盒子都没有)

运算符

算术运算符

• +
• -
• *
• /
• %

赋值运算符 & 复合赋值运算符

=

+=

-=

*=

/=

%=

自增自减运算符

++: 自增1

- -: 自减1

比较运算符

<

>

<=

>=

== 比较相等(会进行隐式类型转换)

!=

=== 比较相等(不会进行隐式类型转换)

!==

逻辑运算符

用于计算多个 boolean 表达式的值.

&& 与: 一假则假

|| 或: 一真则真

! 非

位运算

& 按位与

| 按位或

~ 按位取反

^ 按位异或

移位运算

<< 左移

>> 有符号右移(算术右移)

>>> 无符号右移(逻辑右移)

条件语句

if 语句

基本语法格式

条件表达式为 true, 则执行 if 的 { } 中的代码

// 形式1
if (条件) {
    语句
}
// 形式2
if (条件) {
    语句1
} else {
    语句2 }
// 形式3
if (条件1) {
    语句1
} else if (条件2) {
    语句2   
} else if .... {
    语句...
} else {
    语句N
}  

三元表达式

是 if else 的简化写法.

条件 ? 表达式1 : 表达式2

条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值.

注意, 三元表达式的优先级是比较低的

switch

更适合多分支的场景.

switch (表达式) {
    case 值1:
        语句1;
        break;
    case 值2:
        语句2:
        break;
    default:
        语句N; }