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语句----------------
● 场景:一般用在循环语句内部;
● 作用:从循环语句中跳出,并继续循环的下一次执行
「结束当前当次循环」。