JavaScript语法基础(1)
1、JavaScript是什么？
1）定义：
JavaScript「JS」是一种高级的、动态的、
弱类型的、解释型的计算机编程脚本语言。
2）原理：
3）组成：
3大部分：
◆ ECMAScript： JS的语法核心
◆ DOM： Document Object Model；
文档对象模型；
提供访问和操作网页的方法和接口
◆ BOM： Browser Object Model；
浏览器对象模型；
提供与浏览器交互的方法和接口
4）总结：
JS是一种专门为网页交互而设计的、
简单而又复杂的脚本程序语言。
2、JS的发展简史是怎样的？
● 慢速的网络 + 表单提交 + 服务器验证 = 糟糕的体验；
● 1995年，Netscape「网景公司」，LiveScript；
● 为了跟风，更名为了JavaScript；
● "浏览器大战"时期，IE <=> Netscape Navigator；
● 由于语法和特性上没有标准化，
不同公司的浏览器实现不一样，
导致JS出现了一定程度的混乱；
● 欧洲计算机制造协会「ECMA」组织出现完成并定义了
ECMA-262这样一种名为ECMAScript的脚本语言标准；
● ECMAScript5「ES5」是最流行的版本；
ECMAScript6「ES6」是最新的版本；
● 各浏览器厂商基于ECMAScript的标准
完成了对各自浏览器的标准更新，实现统一；
● 微软借助Windows的垄断性在"浏览器大战"中战胜网景。
3、JS的使用场景有哪些？
1）HTML、CSS和JS三者的关系：
2）JS的使用场景：
最初的JS只用来支持网页表单数据的验证，
如今的JS广泛使用于如下各种场景：
◆ 网页/网游/页游；
◆ Electron.js框架和V8「JS渲染引擎」，制作桌面程序；
◆ React.js可以制作手机/移动端程序；
◆ Node.js用来作为后端运行环境。
3）为什么JS非常值得我们学习？
◆ 目前，全世界几乎所谓的网站都在使用JS；
◆ 几乎所有现代的浏览器都直接原生支持JS；
PC/手机/平板等几乎所有硬件设备也支持JS；
◆ 作为Web工程师和Java工程师，如果想制作漂亮的网页；
或者实现高效的动态验证，JS是必须的工具。
4、JS代码的怎样引入？
3种方式：
1）内联式：
<script type="text/javascript">
...JS代码
</script>
2）外部式：
格式：
<script src="*.js"></script>
注意：
● 外部JS文件后缀：.js；
● 在JS文件中不需要<script>标签，直接写JS代码即可；
● JS文件不能直接运行，需要嵌入到HTML文档中执行。
3）嵌入式「将JS代码嵌入标签作为属性；不推荐」：
4）补充·JS在页面中的位置：
理论上可以将JS代码置于HTML任意位置，但一般放在head或body部分：
◆ 放在<head>部分：
最常用方式；浏览器解析head部分时就会执行JS代码，
这样页面在被载入之前，脚本就已经被载入；
即：这样可以确保页面被载入之后，脚本已经准备好被调用；
通常用来放置一些函数代码；
◆ 放在<body>部分：
在页面被载入时脚本才会被载入并立即执行；
通常用来放置一些动态生成页面内容的代码。
特别注意：
● 因为浏览器解析存在顺序，所有前面的<script>将会先执行;
● 进行页面初始化操作的JS代码应该放在head中，
因为初始化的操作应该在页面载入之前完成；
● 但如果是通过事件调用的function，那么位置没有要求。
5、JavaScript-认识语句和符号：
1）意义：
JS的语句就是给浏览器的命名，
这些命名的作用是告诉浏览器要做的事情。
2）格式：
每条JS的语句格式：语句;
注意：
● 一行的结束被认为是语句的结束，通常结尾以;作为标记；
● 虽然;也可以不写，但我们要养成良好的编程习惯。
6、JavaScript-认识注释符
2种：
1）单行注释：
// 注释文字
2）多行注释：
/* * 注释文字 * 注释文字... */
7、JavaScript-变量
1）概念：
◆ 字面意思：可变的量；
◆ 编程角度：变量是用来存储某种/某些数据值的存储器；
◆ 简单来说：变量是一块内存区域，
用来临时性存放一些中转的数据，且存在数据类型。
2）定义：
使用var关键字声明，语法格式：
var 自定义变量名 = 值;
注意：
● 变量虽然也可以不声明直接使用，但不规范；
● JS是一种弱类型轻量级脚本语言，
不要求强制为变量指定一种类型「不同与Java/C」，
即：JS不严格限制变量使用的数据类型，
JS会自动推算它们的类型。
3）命名：
变量名可以任意取名，但要遵循如下命名规则：
◆ 组成：大写字母/小写字母、数字、下划线、美元符$、中文等；
建议：有意义的英文单词，多个单词首字母大写区分；
◆ 变量名严禁以数字开头；
◆ 变量名严禁使用JS关键字或保留字；
◆ 变量名严禁使用特殊符号；
◆ 变量名对大小写敏感。
4）特殊：
◆ 变量可以同时声明，以,隔开；
1 var a,b,c;
◆ 变量可以先声明，再赋值；
1 var a; 2 a = 10;
◆ 变量可以重复声明和赋值。
1 var a = 10; 2 3 var a = 5;
8、JavaScript-数据类型
1）什么是数据类型？
2）关于JS的数据类型：
◆ 说明：不同于Java/C等编程语言，强制要求定义变量的数据类型，
否则无法通过编译，JS为弱类型脚本语言，会智能推断数据类型，
即：数据类型无需强制定义；
◆ 注意：但是如果完全不定义类型，
有时JS也会帮助我们错误的设想一些类型，
从而造成一些不可预知的错误，
所以为了创建稳固的程序，
必须掌握JS的数据类型。
3）种类：
2类6种：
----基本数据类型----
◆ 数值型number： 保存整数/浮点数
◆ 字符串型string： 保存单个字符/字符串；''或""
◆ 布尔型boolean： 定义真假；true真或false假
◆ 空类型null： 空对象指针/引用；
一个变量后续需要引用具体对象，。
初始化时建议初始化为null
◆ 不明确型undefined： 一个变量没有初始化赋值，就是undefined
----对象数据类型----
◆ 对象型object： JS中的对象一组属性和方法的集合；
具体的关于对象创建方法和特性，后续详解
4）转型：
◆ Number()： 将数据值转为整数，可以用于任何数据类型
◆ parseInt()： 将数据值转为整数，用的比较多
◆ parseFloat()： 将数据值转为小数
◆ toString()： 转字符串
◆ String()： 转字符串「不确定要转换的变量的类型/值」
◆ Boolean()： 转布尔值
9、JavaScript-转义符
1）什么是转义符？
◆ 说明：JS包含很多不能直接输入的特殊字符，可以使用转义字符替代
2）转义符：\n , \t ,...用反斜杠改变其原有的含义
10、JavaScript·运算符
1）概念：
统指能够对数据进行操作「赋值/运算/比较...」的特殊符号。
2）分类：
7种：
◆ 算术运算符
◆ 赋值运算符
◆ 关系运算符
◆ 逻辑运算符
◆ 位逻辑运算符
◆ 位移运算符
◆ 三目运算符
3）运算符1·算术运算符：
9种：
+ 正号
- 负号
+ 加号
- 减号
* 乘号
/ 除号
% 取余/求模
++ 自增
-- 自减
4）运算符2·赋值运算符：
6种：
=
+=
-=
*=
/=
%=
注：
<op>=表变量初值对<op>=右边的值或结果进行<op>运算，
运算完成后将最终结果重新赋给变量。
5）运算符3·关系元素符：
7种：
> 大于
< 小于
>= 大于等于
<= 小于等于
== 等于「只比较值」
=== 全等于/恒等于「值和类型都比较」
!= 不等于「也作<>」
注：
返回值一定是boolean值。
6）运算符4·逻辑运算符：
3种：
&& 逻辑与
|| 逻辑或
！ 逻辑非
注：
逻辑运算符只能操作boolean值，返回值也是boolean值。
7）运算符5·位逻辑运算符：
4种：
~ 按位取反
& 按位与
| 按位或
^ 按位异或
注：
● 位逻辑运算符采用逻辑运算符运算思想对二进制数字进行运算；
● 操作数必须是整数；
● 数值在计算机中二进制的补码形式存放。
------------延伸知识：什么是原码、反码、补码？------------
Ⅰ、正数「三码合一」：
原码：二进制数本身
反码：二进制数本身
补码：二进制数本身
Ⅱ、负数「取反加1」：
正数的原码：二进制数本身
负数的原码：在正数原码基础上，修改最左边的符号位
注：计算机中0表正号，1表负号
负数的反码：在负数原码基础上，最左边的符号位不变，其他全变
负数的补码：在负数反码基础上，加1
8）运算符6·位移运算符：
3种：
<< 左移
>> 带符号右移
>>> 无符号右移
注：
● 操作数必须是整数；
● 运算法则：
<< :高位溢出 -> 舍去;低位空出 -> 直接补0;
>> :低位溢出 -> 舍去;高位空出 -> 补上符号位;
>>> :低位溢出 -> 舍去;高位空出 -> 直接补0。
思考:
为什么左移只有1种,而右移却有2种?
9）运算符7·三目运算符：
也称条件运算符/选择运算符
1种：
A ? B : C
注：
● A必须是boolean值；
● B和C的类型没有要求，且可以不一样。
10）补充·字符串拼接符：
注：
对字符或字符串变量使用+时，并不是对它们进行相加而是拼接。
11、JavaScript·语句
1）什么叫做程序的流程控制？
2）流程控制的方式：
3种：
◆ 顺序结构
◆ 选择结构
◆ 循环结构
3）流程控制的实现：
JS语句;
4）语句的分类：
6种：
◆ 表达式语句
◆ 空语句
◆ 标号语句
◆ 选择语句*
◆ 循环语句*
◆ 跳转语句*
5）语句1·表达式语句：
● 泛指：变量的赋值/运算符的操作/关系的判断...
● 特点：以;结尾。
6）语句2·空语句：
● 格式：;
● 意义：不执行任何实际操作。
7）语句3·标号语句：
● 格式：一般配合循环语句和跳转语句一起使用；
在循环语句外使用一个自定义的单词和一个冒号做一个标记；
后续配合跳转语句实现指定跳转。
8）语句4·选择语句：
2种句式：
--------------if...else if...else条件选择语句--------------
3种句型：
Ⅰ、
1 if (<boolean>) { 2 复合语句; 3 } 4 ...
5 boolean为true => 执行1次
6 boolean为false => 不执行
Ⅱ、
1 if (<boolean>) { 2 复合语句; 3 } 4 else { 5 复合语句; 6 } 7 8 if满足 => 执行1次if,else不执行 9 if不满足 => 直接执行else
Ⅲ、
1 if (<boolean>) { 2 复合语句; 3 } 4 else if (<boolean>) { 5 复合语句; 6 } 7 ... 8 else { 9 复合语句; 10 } 11 12 if满足 => 执行1次if,else if和else都不执行 13 if不满足 => 开始判断else if => 谁判断谁执行谁终止 14 if和else if都不满足 => 直接执行else
--------------switch...case开关/分支选择语句--------------
1 switch (value) { 2 3 case 值1: 4 复合语句; 5 6 case 值2: 7 复合语句; 8 9 ... 10 11 default: 12 复合语句; 13 }
case常量值==switch返回值 -> 执行该case及其下面的所有case和default;
case常量值!=switch返回值 -> 继续判断下一个case分支「从上往下依次」;
default分支 -> 所有case不满足时默认执行。
注：
● switch必须指定常量值或常量表达式；
● case也必须指定常量值或常量表达式，不能接undefined值；
● 所有case分支的值不能相同；
● case分支：1～n个；default分支：0～1个，且位置不固定。
9）语句5·循环语句：
3种：
-----------------while循环「先判断再执行」-----------------
while (<boolean>) { 复合语句; => 循环体 迭代语句; => ++ -- += -= }
boolean为true => 执行1次循环体 => ... => 条件表达式+迭代决定次数
boolean为false => 结束循环
----------------do...while循环「先执行再判断再执行-----------------」
do { 复合语句; => 循环体 迭代语句; => ++ -- += -= } while(<boolean>);
执行1次循环体 => boolean为true => ... 条件表达式+迭代决定次数
=> boolean为false => 结束循环
----------------for循环「最常用；穷举/遍历」----------------
2种：
Ⅰ、数值型for循环/普通for循环：
for (①变量表达式; ②条件表达式; ③迭代) {
复合语句; => 循环体
}
①变量表达式「执行1次」 => ②条件表达式为true => 执行1次循环体
=> ③迭代 => ②条件表达式... => ②条件表达式+③迭代决定次数
Ⅱ、对象型for循环/加强for循环/for-each循环：
for (①变量 in ②对象) {
复合语句; => 循环体
}
直接使用①变量保存②对象中的每个元素值「指针指向了每个数字值」。
----------------3种循环的总结----------------
Ⅰ、如果循环体只有一条语句，{}可以省略；
Ⅱ、3种循环的选择：
如果事先知道循环的次数 => for循环
eg：求1 - 3 + 5 - 7 + 9 - 11 + ...的前20项的结果。
如果事先不知道循环的次数 => while循环
eg：求1 - 3 + 5 - 7 + 9 - 11 + ... + n的结果，n让用户输入。
如果需要预先执行1次 => do...while循环
10）语句6·跳转语句：
● 为什么JS语法要引入跳转语句？
使程序的流程跳转到当前位置以外的部分「方法/switch/循环语句」。
● 句型：
3种：
特点 场景
return语句： 跳出+返回 方法「结尾」
break语句： 跳出+结束 switch/循环语句
continue语句： 跳出+继续 循环语句
----------------return语句----------------
● 场景：一般写在函数的结尾；
● 作用：使得主程序的流程从函数中跳出，并返回到调用该函数处。
----------------break语句----------------
● 场景:一般用在switch语句/循环语句内部；
● 作用：从上述语句中跳出，并且不再执行。
----------------continue语句----------------
● 场景:一般用在循环语句内部；
● 作用：从循环语句中跳出，并继续循环的下一次执行
「结束当前当次循环」。
