关于javascript:JS的基本语法

javascript 根本介绍

JavaScript 的历史：

​ 在 95 年以前，就有很多上网的用户了，过后的带宽只有 28.8kb/s，用户要进行表单的验证时，点击提交按钮，间接就将数据发送到服务器了，受限于带宽的关系，浏览器和服务器的通信很慢，大略一次通信须要 30s 的工夫。

​ 这样，问题就呈现了，咱们平时注册一个用户，须要填写很多信息，当咱们将所有信息填写好，点击提交按钮后，期待 30s 当前，提醒咱们用户名被占用了，批改，提交，期待 30s，提醒用户名不符合规范，批改，提交，期待 30s，明码不符合规范，批改，期待。。。这样的用户体验感很差，给网民造成很大的懊恼。随着上网的用户越来越多，问题越来越重大。

​ 这时候，网景公司（Netscape，这是一家浏览器公司）下定决心要解决这个问题，并将这个问题交给布兰登·艾奇（Brendan Eich，1964 年～，过后在网景公司工作的一个程序员）来解决，他用了 10 个工作日的工夫，设计了一个门语言，叫做 LiveScript，专门用来解决客户端上的问题。网景公司和 Sun 公司单干，在公布的时候，改名为 Javascript，目标是为了利用 Java 这个因特网时尚词汇。JavaScript 从此变成了因特网的必备组件。

​ 因为 JavaScript 1.0 如此胜利，微软推出了 JScript 脚本语言，起初陆续有好几家公司都创立了本人的客户端脚本语言。

​ 此时，JavaScript 并没有一个规范来对立其语法或个性，随着互联网的倒退，分久必合的趋势越来越有必要，最终，1997 年，ECMA（欧洲计算机制造商协会）邀请了 Netscape、Sun、微软、Borland 等公司的一些程序员组成了 TC39，定义了规范，名为 ECMAScript。

​ ECMAScript 是一个规范，而 javascript 是语言。

js 概念

概念：反对面向对象的跨平台脚本语言。

了解：

1. 脚本语言：依赖别的语言能力运行

   html 必须在浏览器中能力运行，js 嵌套在 html 中能力运行

2. 跨平台：能够在不同的平台上运行

   windows、linux、安卓。。。

3. 反对面向对象

   应用面向对象的思维编程

利用场景：

1. 表单验证：标准用户输出数据，和后盾数据进行交互
2. 网页特效：给页面内容加行为，让页面动起来
3. 游戏开发：飞机大战、打砖块
4. 物联网：https://zhuanlan.zhihu.com/p/…

JS 和 H5 的关系

h5，是 html 的下一个版本，很弱小，就目前而言，咱们晓得的 h5 只是一些标签，并不能完满的展现出他的弱小之处，退出 js 后，能力激活这些标签深层次的性能。

随着 h5 利用越来越多，js 的应用形式和各种框架及插件也越来越多，甚至曾经从前端语言能够实现后盾服务器的性能。js 的倒退曾经成为一种潮流。

js 的组成

ECMAScript：根底语法

BOM：提供了操作浏览器对象的一套办法

DOM：核心内容，提供了操作文档对象的办法

编写 Js 及如何运行 JS

js 的书写地位

• 第一种 : 写在 script 标签中

<script>
  alert('Hello World!');
</script>

• 第二种 : 引入一个 js 文件

<script class="lazy" referrerpolicy="no-referrer" data-src="main.js"></script>

阐明：

1. script标签能够被放在网页的任何中央，然而咱们初学倡议放在 body 完结和 html 完结两头。
2. script标签应用 src 引入了 js 文件后，这个标签中不能再写 js 代码，写进去的代码是有效的。
3. 因为是嵌套在 html 中运行的，所以间接关上浏览器就能运行

js 的正文

正文代码不会被执行，仅仅起到一个提醒的作用。正文能够对简单的代码进行解释，不便前期的保护和开发。

单行正文：

// js 的单行正文是双斜杠

多行正文：

/*
js 的多行正文：结尾是斜杠星号
结尾是星号斜杠
*/

js 的输入

所谓输入，其实就是将内容显示在网页中，和 html 不同，js 代码不会被动显示在网页中，须要应用一些办法能力显示在网页中。

以弹窗的模式显示：

alert(11);

以文本的模式显示：

document.write(123456);

可输出内容的弹窗：

prompt(12345)

可判断的弹窗：

confirm(12345)

调试工具中输入：

console.log(123);

<font color=”red”> 留神：在 js 代码中，每行完结能够加分号，也能够不加分号，然而倡议加上。</font>

变量

咱们每天吃饭都用碗吃，碗外面的食物是每天都会扭转的，咱们代码中也有这样一种容器，叫变量。

概念

可变的量。

x + 1 = 2 -------- x = 1
x + 10 = 20------- x = 10

了解

变量是内存中的一个空间，用来寄存一些后果。

x = 1 ------- 内存中有一个空间，空间名字是 x，外面寄存了 1
x = 10 ------ 内存中有一个空间，空间名字是 x，外面寄存了 10

变量的命名规定

以字母、下划线结尾，前面跟数字、字母、下划线

m
m2
mp3
3m
user_id
_start
2_m

变量申明

var关键字，空格，前面跟变量名

// 申明变量
var x // 在内存中开拓了一个空间，给这个空间起名叫 x，外面没有放内容
var a,b // 一次性声名多个变量
// 申明变量并赋值
var y = 10 // 在内存中开拓了一个空间，这个空间的名字叫 y，把 10 存了进去
var a=1,b=2; // 一次性申明多个变量并赋值

阐明：

1. 变量名辨别大小写，也就是说小写 a 变量和大写 A 变量是两个不同的变量。
2. 能够一次性声名多个变量，应用一个 var 关键字，变量名用逗号隔开。
3. 变量声名省略掉 var 关键字也是能够的。叫做隐式申明，有 var 关键字的就叫做显式申明。

不能应用关键字作为变量名，关键字就是零碎曾经占用的名字。

<font color=”blue”> 思考：如何输入一句话？</font>

alert("你的头发还好吗？")
alert(123456)

输入一句话须要加引号，输入数字则不须要。因为一句话和数字的类型是不一样的。

房间是一个容器，外面放了床，就是卧室，用来睡觉的，外面放了猪，就是猪圈，用来养猪的，卧室和猪圈都是房间，然而类型不一样。变量是一个容器，外面放不同的货色，他的类型就不一样。

数据类型

应用 typeof(被检测的内容) 能够得出一个内容的类型。

console.log(typeof(-123456)); // 数字型
console.log(typeof("今天会更好")); // 字符串型
console.log(typeof(true)); // 布尔型
console.log(typeof(x)); // 布尔型
console.log(typeof([1,2,3])); // 对象
console.log(typeof({name:"张三",age:12})); // 对象
console.log(typeof(null)); // 对象

后果如下图：

多学一招：typeof(x) 能够写成 typeof x。应用小括号和空格都能够。

数字类型

在后果中能够看到应用 number 来代表数字类型。

不同进制的数字

咱们个别应用应用的数字是十进制的，然而在 js 中咱们还能够应用八进制和十六进制。

var a = 010; // 8 进制
var b = 0xA; // 16 进制
var c = 0xb; // 小写字母和大写字母都能够
console.log(a); // 8
console.log(b); // 10
console.log(c); // 11

后果：

NaN

var a = "abc";
var b = 2;
var c = a - b;
console.log(c); // NaN

后果：

NaN: not a number, 示意一个非数字

在 js 中，NaN 用来示意一个非数字的非凡值，当发现无奈进行运算时，js 不会报错，而是会返回一个 NaN

NaN 的注意事项：

• NaN 的类型是 number 类型的，示意一个非数字
• NaN 不等于任何值，包含 NaN 自身
• 通过 isNaN()能够判断是否是一个数字，返回 false 的时候，示意是一个数字。

var a = 123;
var b = "abc";
console.log(isNaN(a)); // false
console.log(isNaN(b)); // true

后果：

小数

• 迷信计数法

// 当一次数字很大的时候，能够用迷信计数法来示意
var num = 5e+5;  // 5 乘以 10 的 5 次方
var num = 3e-3;// 3 乘以 10 的 - 3 次方

• 浮点数精度失落问题

// 在进行浮点数运算的时候，可能会呈现精度失落的问题
0.1 + 0.2 = 0.30000000000000004;
0.2 + 0.2 = 0.4;
// 尽量少用浮点数进行运算，不要让浮点数进行比拟。解决办法 : 依据小数点前面的位数量 乘以对应的整数;
    0.1 + 0.2  ==> (0.1*10+0.2*10) / 10 = 0.3
0.01 + 0.02 呢?

数值范畴

最小值：Number.MIN_VALUE，这个值为：5e-324
最大值：Number.MAX_VALUE，这个值为：1.7976931348623157e+308
无穷大：Infinity    1/0
无穷小：-Infinity

字符串类型

在类型打印中，能够看到在后果应用 string 来代表字符串类型。

咱们说，字符串其实就是很多字符的汇合，用引号引起来，然而单引号和双引号也是字符，如果作为字符串的字符？

<font color=”blue”> 思考，如何打印以下内容：</font>

大家好, 我姓 "熏", 我叫孙悟空
抉择 "难看" 的表面，还 \ 是 '乏味' 的灵魂

剖析：

1. 引号能够嵌套，然而不能嵌套本人，须要穿插嵌套（单引号嵌套双引号或者双引号嵌套单引号）。
2. 应用本义符

console.log('大家好, 我姓" 熏 ", 我叫孙悟空');
console.log('抉择" 难看 "的表面，还 \\ 是 \' 乏味 \'的灵魂');

成果：

一些带有非凡含意的字符须要进行本义，例：

示例：

<font color=”red”>留神：js 能够输入标签，让页面中的元素具备标签的个性，然而在输入标签的时候肯定要将标签当做字符串输入。</font>

字符串外面的字符个数：字符串.length

对象类型

在浏览器的后果中应用 object 来代表对象类型。

null 代表一个空的对象，通常应用过的对象当前将不再应用，须要将它手动销毁的时候给它赋值为 null。

运算符

赋值运算一

在编程中 = 不叫“等于号”，叫“赋值符”，<font color=”red”>作用是将左边的值赋值给右边的变量，反过来讲，赋值符左边是值，右边是变量 </font>

var x = 1 // 将左边的数字 1 赋值给右边的变量 x 

其实就是将左边的数字 1 放到叫做 x 的那个内存空间中。

留神：变量是可变的，也就是说 <font color=”red”>同一个变量能够屡次赋值，前面的值笼罩后面的值</font>。

var x = 1; // 申明变量 x 并给他赋值 1
x = 10; // 给变量 x 从新赋值为 10
alert(x); // 当初 x 变量的值就是 10

第二次赋值的时候，是纯赋值操作，不是申明变量，所以就不必 var 关键字了。

算术运算

字符串的拼接运算

下面的+，如果两边都是数字，那进行的是数学中的加法运算。然而两边只有一边是字符串的话，那是将两边的值连接成一个。也就是所谓的字符串的拼接。

var a = 12345;
var b = "上山打老虎"
var c = a + b;
console.log(c); // 后果：12345 上山打老虎

也就是将 a 变量和 b 变量拼接在一块，组成一个新的字符串，赋值给了 c 变量。

拼接运算的 + 左右两边，只有有一边是字符串就进行拼接运算，具体情况有：数字 + 字符串、字符串 + 数字、字符串 + 字符串。

关系运算（比拟运算）

<font color=”red”> 关系运算最初的后果只有两种，一种是真，一种是假，也就是布尔型的 true 和false</font>

console.log(2>3); // false
var a = 2>1;
console.log(a); // true

后果

等于和全等于

var a = 123;
var b = "123";
console.log(a==b); // true
console.log(a===b); // false

后果

a 变量和 b 变量在内存中占用大小一样，外面的存的内容也一样，所以是相等的

但类型不一样，所以不全等。

赋值运算二

代码：

var a = 1;
a += 2; // 将 a 先加 2，失去后果 3，再将 3 赋值给 a
console.log(a); // 3

要了解下面的代码，首先了解给变量从新赋值。

var a = 1; // 先申明，给 a 赋值为 1
a = 3; // 给变量 a 从新赋值为 3
console.log(a); // 3

而后了解本人运算后再赋值给本人（回忆一下：赋值符右边是变量，左边是值）

var a = 1;
a = a + 2; // 本人加 2 后再赋值给本人
console.log(a); // 3

练习：最初的 a 变量是多少？

var a = 5;
a %= 3;
console.log(a); // 2

类型转换

强制转换

1. 转换为布尔型

   语法：Boolean(arg)

   • 非 0 数字转换为布尔型为 true，0 转换为布尔型为 false
   • 非空字符串转换为布尔型为 true，空字符串转换为布尔型为 false
   • undefined 转换为布尔型为 false
   • null 转换为布尔型为 false

2. 转换为字符串

   语法：String(arg)

   • true 转换为字符串仍为 true，false 转换为字符串仍为 false
   • null 转换为字符串扔为 null
   • undefined 转换为字符串仍为 undefined

3. 转换为数字

   语法：Number(str)

   • NaN 代表不是数字，然而他是数字类型（没有意义的数字）
   • 非数字字符串转换后都是 NaN（NaN 是一个不是数字的数字类型）
   • true 转为数字为 1，false 转为数字为 0
   • undefined 转换为数字为 NaN
   • null 转化为数字为 0

4. 应用函数强制转换为数字

   语法：parseInt(arg) # 强制转换为整数
       parseFloat(arg) # 强制转换为小数

   • 小数转换为整数只取整数，向下取整
   • 首位非数字的字符串强转为整数为 NaN，首位是数字的字符串强转为整数是首位的数字
   • 布尔型强转为 数字 为 NaN
   • undefined 强转为 数字 为 NaN
   • null 强转为 数字 为 NaN

5. 应用 toString() 办法强制转换为字符串，转换后果和 String()函数一样

   var a = 123456;
   b = true;
   var c = a.toString();
   var d = b.toString();
   console.log(c);
   console.log(typeof c);
   console.log(d);
   console.log(typeof d);

   留神：这个办法不能给 undefined 和 null 应用

隐形转换

数学运算时转换为数字型，例：

var str = "100"
var a = str%10; // 乘和除以及求余都行
var b = true + 1
console.log(a);
console.log(b);

比拟运算时产生隐形转换，例：

• 如果两个值都是字符串，则进行比拟编码值
• 如果有一个值为数字或布尔型，则转换为数字进行比拟
• 字符串进行比拟的时候首字符进行比拟，相等再进行前面的字符比拟。参照阿斯克码表。

拼接运算时产生字符串转换，例：

var a = "1";
console.log(a+12); // 112

下午

逻辑运算

逻辑运算个别用于判断多个关系运算，得出最初后果。

逻辑运算最初得出的后果也是布尔型。

例题：

模特的要求：年龄在 18 岁以上，30 岁以下。小红往年 20 岁，看看小红是否满足条件。

var age = 20; // 小红的年龄
var result = age > 18 && age < 30;
console.log(result); // true    阐明小红满足条件了

如果小红往年 31 岁呢？

var age = 20; // 小红的年龄
var result = age > 18 && age < 30;
console.log(result); // false    阐明小红不满足条件

小红嫁人：小红想嫁给小明。小明说：除非你身高 160cm 以上，或者你有 50000 元的嫁妆。小红身高 155cm，做模特攒了 100000 元。看看小红是否满足小明的条件。

var height = 155; // 小红的身高
var money = 100000; // 小红的钱
var result = height > 160 || money > 50000;
console.log(result); // true 阐明小红满足了小明的条件

如果小红只攒了 30000 元呢？

var height = 155; // 小红的身高
var money = 30000; // 小红的钱
var result = height > 160 || money > 50000;
console.log(result); // false 阐明小红不满足小明的条件

双重否定等于必定。

年龄小于 18 或年龄大于 30 都不满足小红嫁人的条件。

var age = 20; // 小红的年龄
var result = !(age < 18 || age > 30); // 不满足条件，再取反就满足了
console.log(result); // true   阐明这种表达方式也是能够的

小红身高小于 160cm，并且钱财小于 50000 元，就不满足小明的条件。

var height = 155; // 小红的身高
var money = 100000; // 小红的钱财
var result = !(height < 160 && money < 50000); // 不满足条件再取反表白满足
console.log(result); // true 阐明小红还是满足条件的

自增自减运算

符号：++ 示意让一个数字递增 1

var a = 1;
a++
console.log(a); // 2

++ 能够放在前面，也能够放到后面，示意的意思是一样的

var a = 1;
++a;
console.log(a); // 2

当递增运算碰到赋值或者输入的时候，++ 放在后面和后就有了区别：

放在前面

var a = 1;
console.log(a++); // 1
console.log(a); // 2
var b = 1;
var c = b++;
console.log(c); // 1
console.log(b); // 2

当 ++ 放在前面的时候，就最初进行递增运算，先进行输入或者赋值。

放在后面

var a = 1;
console.log(++a); // 2
console.log(a); // 2
var b = 1;
var c = ++b;
console.log(c); // 2
console.log(b); // 2

当 ++ 放在后面的时候，就先进行递增运算，后进行输入或赋值。

符号：– 示意让一个数字递加 1

应用办法和注意事项与递增一样。

<font color=”red”> 递增递加运算须要应用变量，不能应用具体数字 </font>