蓝旭工作室2023春季培训预习博客（四）

JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。

Javascript主要功能

嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。控制cookies，包括创建和修改等。
基于Node.js技术进行服务器端编程。

Javascipt语言组成

ECMAScript，描述了该语言的语法和基本对象。
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

Javascript语言特点

脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。
基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。
简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。
动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较倾向于使用JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性。

二. Javascript基本语法

一. JavaScript的使用

1. 标签引用

在HTML中在script标签中就可以编写JavaScript代码，以下是一个简单演示。

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

2. 文件引用

在一个单独的js文件中也可以编写JavaScript代码，然后在HTML文件中使用script标签进行引用

main.html

<script src="main.js"></script>

main.js

alert("Hello,World!");

二. JavaScript的输出

1. 页面输出

<script>
    document.write("Hello,World!");
</script>

2. 控制台输入

使用JavaScript向控制台输出一句话

<script>
    console.log("log");
    console.info("info");
    console.warn("warn");
    console.error("error");
</script>

3. 弹出窗口输出

使用JavaScript向弹出窗口输出一句话

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

三. JavaScript的注释

注释中的内容不会被解析器解析执行，但是会在源码中显示，我们一般会使用注释对程序中的内容进行解释。

JS中的注释和Java的的一致，分为两种：

单行注释（ //注释内容）
多行注释（ /*注释内容*/ ）

四. 标识符

用来标识类名、变量名、方法名、类型名、数组名及文件名的有效自读序列称为标识符，简单来说，表示符就是一个名字。

第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）
其它字符可以是字母、下划线、美元符号或数字
按照惯例，ECMAScript 标识符采用驼峰命名法
标识符不能是关键字和保留字符

关键字

保留字符

字面量

字面量实际上就是一些固定的值，比如：1、2 、3、true、false、null、NaN、“hello”，字面量都是不可以改变的，由于字面量不是很方便使用，所以在JavaScript中很少直接使用字面量，使用的而是变量。

变量

变量的作用是给某一个值或对象标注名称。比如我们的程序中有一个值123，这个值我们是需要反复使用的，这个时候我们最好将123这个值赋值给一个变量，然后通过变量去使用123这个值。

变量的声明：使用var关键字声明一个变量。

var BianLiang;

变量的赋值

BianLiang = 123;

声明和赋值同时进行

var BianLiang = 123;

五. 数据类型

数据类型决定了一个数据的特征，比如：123和”123”，直观上看这两个数据都是123，但实际上前者是一个数字，而后者是一个字符串。

对于不同的数据类型我们在进行操作时会有很大的不同。

JavaScript中一共有5种基本数据类型：

字符串型（String）
数值型（Number）
逻辑类型（Boolean）
undefined（Undefined型）
null型（Null型）

这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。

1. typeof运算符

使用typeof操作符可以用来检查一个变量的数据类型。

console.log(typeof 123);
console.log(typeof "Hello,World!");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);

2. String（字符类型）

常量：‘A'，’b‘，’?‘等，即用单引号括起的Unicode表中的一个字符。

转义字符

\n（换行）
\b（退行）
\t（水平制表）
\'（单引号）
\"（双引号）
\\（反斜线）

3. Number（数值型）

Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。

Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity。

最大值：+1.7976931348623157e+308
最小值：-1.7976931348623157e+308
0以上的最小值：5e-324

特殊的数字：

Infinity：正无穷
-Infinity：负无穷
NaN：非法数字（Not A Number）

其它的进制：

二进制：0b 开头表示二进制，但是，并不是所有的浏览器都支持
八进制：0 开头表示八进制
十六进制：0x 开头表示十六进制

4. Boolean（逻辑类型）

常量：true, false

布尔型只能够取真（true）和假（false）两种数值。

5. Undefined（Undefined类型）

Undefined 类型只有一个值，即特殊的 undefined。

在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。

6. Null（Null类型）

Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。

undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true。

六. 运算符

运算符也叫操作符，通过运算符可以对一个或多个值进行运算并获取运算结果。

1. 算术运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（求余数）
++	自增
–	自减

2. 关系运算符

设x=5

运算符	描述	比较	返回值
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

3. 赋值运算符

运算符	例子	等同于
=	x=y
+=	x+=y	x=x+y
-=	x-=y	x=x-y
*=	x*=y	x=x*y
/=	x/=y	x=x/y
%=	x%=y	x=x%y

4. 逻辑运算符

设x=6，y=3

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

&& 与：&&可以对符号两侧的值进行与运算并返回结果，运算规则如下：
- 两个值中只要有一个值为false，就返回false，只有两个值都为true时，才会返回true
- JS中的“与”属于短路的与，如果第一个值为false，则不会检查第二个值
- 非布尔值时：如果两个都为true，则返回第二个值，如果两个值中有false，则返回靠前的false的值
|| 或：||可以对符号两侧的值进行或运算并返回结果，运算规则如下：
- 两个值中只要有一个true，就返回true，只有两个值都为false，才会返回false
- JS中的“或”属于短路的或，如果第一个值为true，则不会检查第二个值
- 非布尔值时：如果两个都为false ，则返回第二个值，如果两个值中有true，则返回靠前的true的值
! 非：!可以用来对一个值进行非运算，所谓非运算就是对一个布尔值进行取反操作，true变false，false变true，运算规则如下：
- 如果对一个值进行两次取反，它不会变化
- 非布尔值时：先会将其转换为布尔值，然后再取反，所以我们可以利用该特点，来将一个其它的数据类型转换为布尔值，可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样

5. 条件运算符

比较运算符用来比较两个值是否相等，如果相等会返回true，否则返回false。

使用 == 来做相等运算
- 当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较
使用 != 来做不相等运算
- 不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
使用 === 来做全等运算
- 用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false
使用 !== 来做不全等运算
- 用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true

6. 运算符优先级

运算符优先级由上到下依次减小，对于同级运算符，采用从左向右依次执行的方法。

7. 条件语句

基本的条件语句：

if...else
switch...case

if语句

if语句是单条件单分支语句，即根据一个条件来控制程序执行的流程

if语句的表达式

if (表达式) {
    若干语句
}

if...else语句

if...else语句是单条件双分支语句，即根据一个条件来控制程序执行的流程

if...else语句的语法格式

if (表达式) {
    若干语句
}
else {
    若干语句
}

注意：在if...else语句中，其中的复合语句中如果只有一条语句，{}可以省略不写，但为了增强程序的可读性最好不要省略。

if...else if...else语句

if...else if...else语句是多条件分支语句，即根据多个条件来控制程序执行的流程。

if...else if...else语句的语法格式

if (表达式) {
    若干语句
}
else if (表达式){
    若干语句
}
.
.
.
else {
    若干语句
}

switch...case语句

switch…case是另一种流程控制语句。

switch语句更适用于多条分支使用同一条语句的情况。

语法格式：

switch (表达式)
{
    case 常量值1：
        若干语句
        break;
    case 常量值2：
        若干语句
        break;
    .
    .
    .
    case 常量值n：
        若干语句
        break;
    defalut:
        若干语句
}

8. 循环语句

基本的循环语句：

while
do...while
for

while语句

while语句的语法格式

while(条件表达式){
    语句...
}

do...while语句

do...while语句的语发格式

do{
    语句...
}while(条件表达式);

for语句

for语句的语法格式

for (初始化表达式 ; 条件表达式 ; 更新表达式){
    语句...
}

break和continue语句

break：结束最近的一次循环，可以在循环和switch语句中使用
continue：结束本次循环，执行下一次循环，只能在循环中使用

D1gnity_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫