js1-25_注释js helloworld-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_72343101/article/details/128590521

这篇文章详细介绍了JavaScript的基础知识，包括JS简介、HelloWorld示例、代码位置、基本语法、数据类型（如String、Number、Boolean、Null、Undefined）、类型转换、运算符以及流程控制语句。特别强调了变量声明、字符串拼接、数字进制转换和逻辑运算符的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.JS简介
二.JS的helloworld（第一次代码）
三.JS代码编写的位置
四.JS基本语法
五.字面量和变量
- 5.1字面量和变量的简介
六. 标识符（变量的命名规则和规范）
七.数据类型
八.强制类型转换
九.其他进制的数字
十.运算符
十一.Unicode编码表
十二. 运算符的优先级
十三，代码块
十四.流程控制语句

一.JS简介

JavaScript，简称JS，实际上就是java的脚本语言，同时是一种编程语言。

计算机语言简介：
javascript的起源：

因为每次用户输入信息传输给服务器验证信息的正确性再传输回来太过浪费时间，所以有了js，可以让浏览器来验证信息，从而简化验证信息的流程。
直至今日，js的功能不止局限于前端验证，网页的动态效果也是用js来实现的。
现在js可以用在前端，也可以用在服务器上。

ECMAScript是一份标准，实际上就是一份文档，需要各个浏览器厂商去遵守这个标准。

这一部分就是不同浏览器所使用的不同js引擎，其中v8是最快的。

javascript包含ECMAScript和DOM和BOM

js特点
解释型语言：写完可以直接运行。

二.JS的helloworld（第一次代码）

JS代码需要编写到script标签中。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        JS代码
    </script>
</head>
<body>
    
</body>
</html>

就像css中的style标签。

alert()可以显示出一次警告。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert("这是我的第一行js代码");
    </script>
</head>
<body>
    
</body>
</html>

显示为：
在这里插入图片描述
document.write()可以向body中输出一个内容。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert("这是我的第一行js代码");
        document.write("这是一行文字")
    </script>
    
</head>
<body>
    
</body>
</html>

显示为：
请添加图片描述
可以看到，虽然body内没有任何东西，但还是显示出了文字。

console.log()可以向控制台输出一个内容。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log("这是一段描述")
    </script>
    
</head>
<body>
    
</body>
</html>

显示为：
请添加图片描述
可以看到，控制台内出现了这行文字。
JS的指令执行是从上到下执行的，会一条一条的执行指令，执行完第一条才会执行第二条。

总结：三条语句：alert()警告语句、document.write()向body中输出内容的语句、console.log()向控制台输出内容的语句。
这三条语句都是输出语句。

三.JS代码编写的位置

可以编写到script标签中
可以编写到标签的onclick的属性中（当我们点击后才会执行js代码）
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('这是一个警告')">
        这是一个按钮
    </button>
</body>
</html>

未点击时显示为：
在这里插入图片描述
点击后显示为：

可以编写到a链接的href属性中（点击链接后，就会执行js代码）
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="javascript:alert('这又是一个警告')">点我</a>
</body>
</html>

点击后显示为；
在这里插入图片描述

注意：这里的格式为href=“javascript:js代码内容”，即js代码内容是写在href属性中的javascript：之后的。

在这里插入图片描述

可以写在外部的js文件中，跟css一样，只不过后缀名是.js
js文件：

alert("我是js文件里的代码");

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./script.js">

    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
用法和css从外部引入有类似之处。js文件是在script标签中用src属性引入，而css文件是在link标签中用href属性引入。

执行顺序还是按照上下顺序，上面先执行，下面后执行。
例如：
script1为外部引入，script2为内部代码，
若顺序为
script1
script2，则先执行1，再执行2
若为；
script2
script1，则先执行2，再执行1。

四.JS基本语法

js注释，多行注释：/* 内容 */,和css是一样的。单行注释：//内容
js中严格区分大小写，和html不同，js中严格区分英语的大小写。
js中每一条语句以分号（;）结尾，和c语言类似。（如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，浏览器会加错分号，所以在开发中分号必须写）

五.字面量和变量

5.1字面量和变量的简介

字面量：就是一种常量，与c语言中的常量类似，是一些不可改变的值，像：1、2、“hello”等
变量：可以用来保存字面量，且变量的值是可以任意改变的，与c语言的变量类似。
声明变量

注：一般一个变量声明一次就行

在这里插入图片描述
用法：var 变量名；
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a;
    </script>
</head>
<body>
</body>
</html>

这样就声明了一个变量，与c语言中变量的定义类似，但又不同，这里的var即指代了整形又指代了浮点型的变量，比c语言方便了不少。
同样，也可以给变量赋值，默认值为：undefined。
例如；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a;
        a=100;
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

显示为；
在这里插入图片描述
可以看到，a的值变成了100.
-声明和赋值同时进行

与c语言类似。

六. 标识符（变量的命名规则和规范）

在这里插入图片描述

在这里重点强调第三点：
这里的关键字和保留字有：
请添加图片描述
就是变量或是其他能自主命名的标识符都不能命名为关键字和保留字符。
还有一些：

意思就是可以用中文，
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var 锄禾日当午=100;
        document.write(锄禾日当午);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
虽然可以这样用，但是不推荐。

七.数据类型

在这里插入图片描述

注：在ES6中出现了一种新的基本数据类型Symbol

描述一个类型时，通常都是首字母大写。

String：字符串
Number：数值
Boolean：布尔值
Null：空值
Undefined：未定义
Object：对象
Symbol：

7.1字符串（String）

在这里插入图片描述
例如；
var stn="hello"这里的"hello"就是字符串，像hello是变量，而"hello"是字面量，即字符串。
再例如：
var stn="hello'这样就是混着用了。
也不能这样用；

但是可以这样用：

同时

例如：
stn="我说：\"今天天气真不错\" "这其中，\"就表示了一个单纯的"而不是字符串。
这里的\t就相当于点了一次tab键，
例如：
这是一段（点了tab键）文字。
显示为：
这是一段文字。
再次强调：
在这里插入图片描述

7.2数值（Number）

在这里插入图片描述
与c语言不同，js中的数值只有Number一种类型，即Number可以表示所有的数值。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var 锄禾日当午=100;
        document.write(typeof 锄禾日当午);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
即，锄禾日当午的类型是number
js中数字的最大值就是
Number.MAX_VALUE

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var 锄禾日当午=100;
        document.write(Number.MAX_VALUE);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
这就是js中的最大值，即1.7976931348623157的308次方（科学计数法）。
超出这个最大值后，就会显示为：
Infinity（无穷的）正无穷

负无穷就是-Infinity。
且Infinity是一个字面量，数据类型是number

NaN是一个特殊的数字，表示：Not A Number，意为：不是数字类型。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a="aa"*"bb";
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

0以上的最小值就是Number.MIN_VALUE
值为：5e-324。
js中最小的正数

在这里插入图片描述

7.3布尔值（Boolean）

在这里插入图片描述

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=true;
        document.write(typeof a);
    </script>
</head>
<body>
</body>
</html>

显示为；
在这里插入图片描述

7.4Null（空值）和Undefined（未定义）

在这里插入图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=null;
        document.write(typeof a);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
再例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a;
        document.write(typeof a);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

7.5判断数据类型

在这里插入图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a='adnbasdns';
        console.log(typeof a);
    </script>
</head>
<body>
    
</body>
</html>

显示为：
在这里插入图片描述
即a的数据类型为string（字符串）

八.强制类型转换

在这里插入图片描述

8.1强制类型转换-Srting

在这里插入图片描述
例如：
调用a的toString（）方法就是：a.toString();

方法一：调用被转换数据类型的toString（）方法。

例如；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=123;
        var b=a.toString();
        document.write(typeof a);
        document.write("换行");
        document.write(typeof b);
    </script>
</head>
<body>
</body>
</html>

显示为；
在这里插入图片描述
可以看到，a的数据类型没有变化，还是number，而b的类型则由a.toString();从而变成了string。
即调用被转换数据类型的toString（）方法，只是将a.toString();的返回值转换成了string，而没有改变原变量的值。
也可以：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=123;
        a=a.toString();
        document.write(typeof a);

    </script>
</head>
<body>
</body>
</html>

显示为；
在这里插入图片描述
即先执行a.toString();语句，使得它的返回值的数据类型为string型，再将a.toString();的值赋值给a。
此外，null和undefined类型的值不能调用toString（）的方法来强制转换类型。

方式二：调用String（）函数

这里用String（）转换number和undefined类型时实际上还是从底层调用toString（）方法类进行转换。

8.2强制类型转换-Number

方式一：使用Number（）函数
用法与String（）函数相同。

这里的第三条，如果字符串是一个空串或者是一个全是空格的字符串，则会转换为0.

这里将字符串转化为number类型时，若字符串不是数字，则返回值会显示为：NaN（表示：Not A Number，意为：不是数字类型。）
undefined转换number也是同理，显示为：NaN（表示：Not A Number，意为：不是数字类型。）

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a="abc";
        a=Number(a);
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

布尔值（Boolean）转换为number时若值为true则转换为1，值为false时，则转换为0。与c语言中真假的值类似。
空值（Null）转换为number后，值为0.
方式二：parseInt（）和parseFloat（）（专门用来转换字符串）

在这里插入图片描述

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a="123.111px";
        a=parseInt(a);
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
在小数点之后的值都没有显示，如果a=123b3px，则显示为：123，即字母后的值也不会显示。
同理，parseFloat只会显示有效的浮点值。

8.3强制类型转换-Boolean

只有一种方式：使用Boolean（）函数。

将数字转换成Boolean值时，除了0和NaN之外，其余都是ture值。
例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=NaN;
        a=Boolean(a);
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
只有0和NaN为false。

将字符串转换为Boolean值时，除了空串（“”）其余值显示都是ture，（包括空格（" "））

对象（object）也会转换为ture。

九.其他进制的数字

注：一般情况下，还是采用10进制。

在这里插入图片描述
并且以10进制的方式输出。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=0x10;
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
16进制的10就是10进制的16。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=010;
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

显示为：
8
在这里插入图片描述
像”070“这种字符串，有些浏览器会当成8进制解析，有些浏览器会当作10进制解析。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a="070";
        a=parseInt(a,10);
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
即在parseInt中传递第二个参数，来指定数字的进制。
就像parseInt（a，10）；即a的进制为10进制。

十.运算符

在这里插入图片描述
typeof运算符就是会把运算这个值的的类型以字符串的形式返回。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=123;
        var b=typeof a;
        document.write(b);
        document.write("\n");
        document.write(typeof b);
    </script>
</head>
<body>
</body>
</html>

显示为；
在这里插入图片描述
即a的类型是number，而b的类型则是string。

注：运算符一般情况下都是不会对原变量产生影响

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=123;
        var b=a+1;
        document.write(a);
        document.write("\n");
        document.write(b);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
即a=123，而b=a+1=124。

算数运算符（二元运算符）

+可以对两个值进行加法运算，并将这个结果返回。
-可以对两个值进行减法运算，并将这个结果返回。
*可以对两个值进行乘法运算，并将这个结果返回。
/可以对两个值进行除法运算，并将这个结果返回。
%可以对两个值进行求余运算，并将这个结果返回。

除了运算符的加法除外。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=123;
        var b=a+1;
        b=true+1;
        document.write(b);
    </script>
</head>
<body>
</body>
</html>

显示为；
2

即true被转化成了1，1+1=2。

注：一些转化值：true—>1、false—>0、null—>0、NaN—>NaN、Undefined—>NaN。

在这里插入图片描述

例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=123;
        var b="这是"+"一段文字"
        document.write(b);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
可以看到拼在了一起。

写长字符串时可以用+号来拼接在一起，可以在代码里显示的更清楚。

再例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=123;
        var b=123321+"一段文字"
        document.write(b);
    </script>
</head>
<body>
</body>
</html>

显示为；
在这里插入图片描述
可以看到“123321”先变成了字符串，然后与“一段文字”拼接在了一起。

可以利用这个特性使变量的数据类型变为字符串。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=123;
        a=a+"";
        document.write(typeof a);
        document.write("\n");
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

显示为；
在这里插入图片描述
可以看到，a的类型变为string且数值没变。
即这两种方式本质上是一样的。
可以利用字符串拼串的特性来表达某些值。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=123;
        document.write("a="+a);
    </script>
</head>
<body>
</body>
</html>

显示为
在这里插入图片描述

这就是一道简单的题，首先，1+2=3，其次，3+"3"就会把3转化为 "3"然后再进行拼串，最后的答案就是result=33。
这个33为字符串。

这个的结果就是123。

注：字符串只有加法有拼串的性质的，其余像减法，乘除都是没有的，他们遵循把非number的数值的类型改为number的类型。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=100;
        document.write(a-"50");
    </script>
</head>
<body>
</body>
</html>

显示为：
50

即"50"转变为50（number）。
在这里插入图片描述

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a="100";
        a=a-0;
        document.write(typeof a);
        document.write("\ ");
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

显示为；
在这里插入图片描述
可以看到，a的类型变为了number且值没变。

在这里插入图片描述

10.1.一元运算符

在这里插入图片描述
且+，-的转换适用于任意数字类型。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a="100";
        a=+a;
        document.write("a="+a);
        document.write(typeof a);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

10.2.自增和自减

自增和自减也是一元运算符，与c语言的++，- -类似。
基本上是与c语言的自增自减相同的。
例题：

var d=20;
d=d++;
//可以这样看
e=d++；
d=e；
//所以，d=20.

在这里插入图片描述

10.3.逻辑运算符

js提供的逻辑运算符有：！（非）||（或）&&（与），与c语言也是类似。

！（非运算符）

非运算：
请添加图片描述

对非布尔值取反：
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a="100";
        a=!a;
        document.write("a="+a);
        document.write(" ");
        document.write(typeof a);
    </script>
</head>
<body>
</body>
</html>

显示为；
在这里插入图片描述
即先把a转换为布尔值，a=10，即转换ture，然后在进行取反，使ture变为false。

&&（与运算符）

这里的短路就是c语言中的逻辑短路，即在&&运算符中，若第一个值为假，则第二个值就不会运算。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=true;

        a&&alert("aaaaaaa")
        document.write("a="+a);
        document.write(" ");
        document.write(typeof a);
    </script>
</head>
<body>
</body>
</html>

显示为：
请添加图片描述

在这里插入图片描述
当把a转换成false时，
显示为：

即alert("aaaaaaa")这条语句没有执行。

||（或运算）

也是有逻辑短路的。
&&（与）和||（或）的非布尔值情况。
与运算
都是true的情况。

例如：
1&&2就会返回2，因为2在后面。
有一个false的情况

例如：
1&&0；就会返回0，因为0转换为布尔值后为false，1为true，所以会返回0.
0&&NaN就会返回0，因为0在前面。
NaN就会返回NaN,因为NaN在前面。
或运算

有点像逻辑短路。

10.4.赋值运算符

与c语言相同。
在这里插入图片描述

10.5.关系运算符

数值之间的比较
非数值之间的比较。

特殊情况

即在两个字符串进行比较时，不会将其转换为数字进行比较，而是比较字符串中的Unicode编码。
在这里插入图片描述
这里比较时也是遵循逻辑短路的，即当一位的比较能出结果时，后面的值就不会再比较。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       document.write("11"<"5");
    </script>
</head>
<body>
</body>
</html>

显示为；
true
即先将“11”中的“1”与“5”的Unicode编码相比，因为“5”Unicode编码>“1”Unicode编码，所以直接就显示为：true
在这里插入图片描述
这里的+“5”会把“5”转变为5（number）

10.6.相等运算符

在这里插入图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write(1==1);
    </script>
</head>
<body>
</body>
</html>

显示为；
true
在这里插入图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write("1"==1);
    </script>
</head>
<body>
</body>
</html>

显示为；
true

注：大部分请况下都会自动转换成数字。

这是一种特殊情况，没有转换成数字。

在这里插入图片描述

isNaN（）函数可以检查值是否为NaN，若是NaN，则返回true，若不是NaN，则返回false。

同上，不相等符号为！=，与c语言也是类似的。
在这里插入图片描述

全等（===），
请添加图片描述
不全等（! ==）
在这里插入图片描述

10.7.条件运算符

与c语言中的条件运算符也是类似的。
语法：
条件表达式？语句1：语句2；
在这里插入图片描述

十一.Unicode编码表

注：Unicode编码表的编码都是16进制。

如果想输出Unicode编码表中的符号，就需要使用\u这个转义字符。
在这里插入图片描述
例如：
输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       document.write("\u1C00");
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
证明浏览器不支持这种语言。
再比如
输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       document.write("\u2620");
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
证明浏览器支持这种文字。

在网页中使用：
在这里插入图片描述
16进制2620转换为10进制就是9760
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    </script>
</head>
<body>
    <p>&#9760;</p>
</body>
</html>

显示为：
请添加图片描述

十二. 运算符的优先级

与c语言类似

，运算符

例如：
这种方式在这里插入图片描述与这种方式是等价的。

运算符的优先级

运算符的优先级表：

案例：
在这里插入图片描述

十三，代码块

在这里插入图片描述

注：

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        {
            a=10;
        }
        document.write(a);
    </script>
</head>
<body>
</body>
</html>

显示为：
10
即代码块里的内容对代码块外的内容是完全可见的。

十四.流程控制语句

在这里插入图片描述

14.1条件判断语句

在这里插入图片描述
if语句

语法一：
if(条件表达式)
语句

与c语言类似，如果可以使用代码块（{}），就尽量使用代码块，这样可以让程序更加清晰。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=10;
        if(a>1)
        {
            alert("a大于1吗?");
            document.write("是的，a大于1");s
        }
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

语法2

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       var a=10;
        if(a>=10)
        {
            document.write("这个数大于等于10")
        }
        else
        {
            document.write("这个数小于10")
        }
    </script>
</head>
<body>
</body>
</html>

显示为；
这个数大于等于10

语法3

注：注意不要出现死代码的情况

14.2if练习

prompt（）函数
请添加图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       var a=prompt("请输入数字：")
       if(a<100&&a>80)
       {
        alert("good good")
       }
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

14.3条件分支语句（switch）

在这里插入图片描述
与c语言类似

switch语句执行流程
在这里插入图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       var a=prompt("请输入数字：");
        switch(a)
        {
            case 1:
                document.write("一");
                break;
            case 2:
                document.write("二");
                break;
            default:
                document.write("这不是数字")
                break;
        }
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
这不是数字。

14.4switch练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       var a=prompt("请输入成绩")
       if(a<=100&&a>=0)
    {
        switch(parseInt(a/10))
       {
        case 6:
        case 7:
        case 8:
        case 9:
        case 10:
            document.write("合格！")
            break;
            default:
                document.write("不合格！")
       }
    }
    else
    {  
        document.write("请输入正确的考试成绩！") 
    }
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

这是上述代码的简易情况。

14.5while循环

<br>网页里的换行标签
例如；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write("11111<br/>")
        document.write("222222<br/>")
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
while语句，也是与c语言类似。

死循环

也可以用break；来停止循环。

创建循环的三个步骤
在这里插入图片描述
do…while循环

这两个循环的特点

注：死循环尽量不要写，如果写在内部可能会出现bug，导致无法操作。

14.6while练习

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=prompt("请输入你的成绩");
        while(a<0||a>100)
        {
            alert("请输入有效的考试成绩！")
            a=prompt("请输入你的成绩");
        }
         alert("你的成绩为："+a);
    </script>
</head>
<body>
</body>
</html>