js1-25

已于 2023-01-10 17:49:42 修改
阅读量536 收藏
点赞数
文章标签： javascript 前端 html
于 2023-01-07 14:30:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_72343101/article/details/128590521
版权

目录

一.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代码编写的位置

  1. 可以编写到script标签中
  2. 可以编写到标签的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>

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

  1. 可以编写到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：之后的。

在这里插入图片描述

  1. 可以写在外部的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>

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

三池丶
关注
october-25-nextjs1
02-12
Next.js +敏捷CMS 这是使用Agility CMS的示例Next.js入门站点，旨在成为使用Next.js和Agility CMS构建完全静态站点的基础。 Vercel现在支持NextJS预览！ 关于本网站 连接到样本Agility CMS实例以获取内容和页面 ...
WebGame:SSM 25-1
06-14
网页游戏 SSM 25-1 这项工作是使用 Node.js + Mongodb 进行的。 该网页是使用 ejs 模型工作的。
javascript案例25——求1~100之间偶数和
努力、拼搏、奋进
05-14 4536
一、案例描述 求1 - 100 之间所有偶数的和 二、案例效果演示 三、案例局部代码 js代码方法1： var i = 0,sumeven = 0; while (i <= 100) { if (i % 2 == 0) { sumeven += i } i++; } console.log(sumeven); js代码方法2： var sumeven = 0; for (var i = 0; i <= 100; i++) {
javascript 基础（0-25）
O_osange的博客
01-10 1047
java 基础（0-25）
JavaScript开发者应懂的33个概念js-33-concepts
han_xiao_xiao的博客
05-18 1274
原文出处：https://github.com/stephentian/33-js-concepts 参考学习用，作为一篇指南 目录 调用堆栈 原始类型 值类型和引用类型 隐式, 显式, 名义和鸭子类型 == 与 ===, typeof 与 instanceof this, call, apply 和 bind 函数作用域, 块级作用域和词法作用域 闭包 map, reduce, filter 等高阶函数 表达式和语句 变量提升 Promise 立即执行函数, 模块化, 命名空间 递归 算法 数据结构.
javaScript---内存管理
maidu_xbd的博客
02-04 3084
内存泄漏 内存泄漏：任何一个程序的运行都需要分配内存空间，而对于一个页面来说，如果一些不再需要使用的内存没有得到及时释放，我们称这种现象为内存泄漏。一次内存泄漏似乎不会有太大的影响，但内存泄漏堆积会造成内存溢出，内存溢出，简单来说就是我们所需要使用的内存空间大于可用内存，此时我们的程序就会出现内存溢出错误。 为什么要管理内存 （1）减少浏览器的负担：内存过大会让浏览器压力过大，导致浏览器卡顿 （2）Node端：内存如果不够，服务就会中断，而nodejs开启的服务，如果不管理内存，就会中断.
js获取1-100之间的随机整数
一只程序媛
03-18 7570
/* 获取随机整数 */ randomNum(m,n){ var num = Math.floor(Math.random()*(m - n) + n); return num; } /* 获取1-100之间的随机整数 */ var num=this.randomNum(1,101)； console.log( num ); ...
SheetJS---(js-xlsx)
热门推荐
marko_zheng的博客
03-06 2万+
SheetJS的使用（js-xlsx） 使用纯前端的方式实现对excel表格的读取和导出功能 github地址：https://github.com/SheetJS/js-xlsx 学习地址：https://www.jianshu.com/p/74d405940305 1.导入功能实现 下载js-xlsx到dist复制出xlsx.full.min.js引入到页面中 然后通过File...
Day.js -- 处理时间戳
i_Satan的博客
03-29 1603
在线文档 https://dayjs.fenxianglu.cn/ 安装 npm install dayjs 示例 import dayjs from "dayjs"; const myformat = "YYYY-MM-DD HH:mm:ss"; // -------------------------以字符串形式返回 当前时间 const data = dayjs().format(myformat); // => 2020-11-25 12:25:56 // -----
（1）(1.10) JSN-SR04T声纳
无人机开发（开源Ardupilot）
10-30 1万+
Ardupilot官网关于《Rangefinders》的翻译 —《(1.10) JSN-SR04T声纳》。
JavaScript(1)-JS变量、关键字、命名规范
weixin_46106512的博客
03-17 1923
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、JS变量、关键字、命名规范1.关键字 : 已经被JS内部使用了的2.保留字: 虽然暂时还未被使用, 但将来可能会被JS内部使用变量的命名规范JS数据类型JS运算符的使用 - 算术运算符总结 前言 提示：这里可以添加本文要记录的大概内容： JavaScript是一门脚本语言, 长期处于计算机语言排行榜的前10位, 且在脚本语言排行榜中长期处于领先地位直至今日, 它的发展前景可想而知. JavaScript一直伴随着互联网一.
JavaScript--数组的冒泡排序
yookooi
04-14 3151
一、冒泡排序的原理 冒泡排序（Bubble Sort），是一种计算机科学领域的较简单的排序算法。 思想： 依次比较相邻的两个数，将小数放在前面，大数放在后面。即首先比较第1个和第2个数，将小数放前，大数放后。然后比较第2个数和第3个数，将小数放前，大数放后，如此继续，直至比较最后两个数，将小数放前，大数放后。重复以上过程，仍从第一对数开始比较（因为可能由于第2个数和第3个数的交换，使得第1个数不再大于第2个数），将小数放前，大数放后，一直比较到最小数前的一对相邻数，将小数放前，大数放...
pos_v1-2019-6-13-7-40-25-697
03-11
熟悉JavaScript的基本语法； 熟悉JavaScript的基本逻辑语句及关键字； 需求描述 商店里进行购物结算时会使用收银机（POS）系统，这台收银机会在结算时根据客户的购物车（购物车）中的商品（项目）和商店折扣的优惠...
react-training-sep-25
05-16
length - 1 ] . focus ( ) } render ( ) { < form > { fields . map ( field => ( < input ref = { el => this . els . push ( el ) } / > < / div > ) ) } < / form > } } 该项目...
js-bdd-example
06-08
$ git clone https://github.com/hiraku/js-bdd-example.gitCloning into 'js-bdd-example'...remote: Counting objects: 25, done.remote: Compressing objects: 100% (20/20), done.remote: Total 25 (delta 1), ...
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 163
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
js有一个字符串'1-2-5, 23-25-6, 56-78-33, 55-43-9...' 提取中间的数字，得到结果 2-25-78-43
07-15
const str = '1-2-5, 23-25-6, 56-78-33, 55-43-9...'; const regex = /\d+-\d+-(\d+)/g; const matches = str.matchAll(regex); const result = Array.from(matches, match => match[1]).join('-'); console.log...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值