向新旅程进攻

最新推荐文章于 2024-06-10 22:18:41 发布
最新推荐文章于 2024-06-10 22:18:41 发布
阅读量414 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GJ_straysoul/article/details/128088137
版权

目录

前言

简史

·JavaScript是由网景公司发明,起初命名为LiveScript,后来由于SUN公司的介入更名为了JavaScript。
·1996年微软公司在其最新的IE3浏览器中引入了自己对JavaScript的实现JScript。
·于是在市面上存在两个版本的JavaScript，一个网景公司的JavaScript和微软的JScript。
·为了确保不同的浏览器上运行的JavaScript标准一致，所以几个公司共同定制了JS的标准名命名为ECMAScript。

实现

在这里插入图片描述

JavaScript

组成

一个完整的JavaScript由三个部分组成：
ECMAScript （标准） , DOM （文档对象模型） , BOM （浏览器对象模型）

特点

-解释型语言
-类似于C和Java的语法结构
-动态语言
-基于原型的面向对象

操作

1.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>JavaScript</title>
    <!-- JS代码需要编写到script标签中 -->
    <script type="text/javascript"> 
        /*
        *控制浏览器弹出一个警告窗
        */
    alert("这是我的第一行JS代码");
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2.document.write

<!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>JavaScript</title>
    <!-- JS代码需要编写到script标签中 -->
    <script type="text/javascript"> 
        /*
        *控制浏览器弹出一个警告窗
        */
    /*
    *alert("这是我的第一行JS代码");
    */
   document.write("我的第二段代码");
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
3.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>JavaScript</title>
    <!-- JS代码需要编写到script标签中 -->
    <script type="text/javascript"> 
        /*
        *控制浏览器弹出一个警告窗
        */
    /*
    *alert("这是我的第一行JS代码");
    * document.write（）可以向body中输出一个内容
    */
   /*
   *向控制台输出内容
   */
  console.log("第三段代码")
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
注意：按照从上到下的顺序一行一行的执行代码

4.按钮

<!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>
    <!-- 当点击按钮时，JS代码才执行 -->
</body>
</html>

在这里插入图片描述
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>
</head>
<body>
    <a href="javascript:alert('让你点你就点！！')">你也点我一下</a>
    <a href="javascript:;">点就点</a>  <!-- 无反应 -->
</html>

在这里插入图片描述
(注意格式)
（虽然可以将JS写在超链接的href属性中，但他们属于结构和行为耦合，不方便维护，不建议使用）

（ 可以将js代码编写到script标签中
< script type= " text/javascript " > < /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>
</head>
<body>
    <!-- 可以将外部JS文件通过script标签引入 -->
    <script type="text/javascript" src="03.js"></script>
</html>

在这里插入图片描述
(写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制，推荐使用)
（script标签一旦用于引入外部文件，就不能在内部编写代码，即使编写浏览器也会忽略。如果需要，可以再创建一个新的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>
</head>
<body>
    <!-- 可以将外部JS文件通过script标签引入 -->
    <script type="text/javascript" src="03.js"></script>
    <script type="text/javascript" >alert("内部代码")</script>
</html>

基本语法

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 type="text/javascript">
    /*
    JS注释
    多行注释，注释内容不会被执行，但是可以在源代码中查看
    */
   //单行注释：只识别后面的内容
   //可以通过注释来对代码进行一些简单的调试
</script>
</head>
<body>
    
</html>

2.语法注意点

  • 1.JS中严格区分大小写
  • 2.JS中每一条语句以分号(；)结尾 -如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，浏览器会加错分号，所以在开发中分号必须写
  • 3.JS中会忽略多个空格和换行对代码进行格式化

2.字面量和变量

1.字面量：一些不可改变的值，可以直接使用
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 type="text/javascript">
/*
   //声明变量：在JS中使用var关键字来声明变量。
   var a;

   //为变量赋值
   a = 123;
*/

   //声明赋值同时进行
   var a = 456;
   console.log(a);
   
   //可以通过变量对自变量进行描述
   var age = 100;

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

3.标识符

在JS中所有的可以由我们自主命名的都可以称为是标识符
例如：变量名、函数名、属性名都属于标识符。

命名一个标识符时需要遵守如下的规则：

1.标识符中可以含有字母、数字、_、$。

2.标识符不能以数字开头。

3.标识符不能是ES中的关键字或保留字。

4.标识符一般都采用驼峰命名法。( 规范 )
（驼峰命名法：首字母小写，每个单词的开头字母大写，其余字母小写
例如：helloWorld ）

注：JS底层保存标识符时实际上是采用的 Unicode 编码。
所以理论上，所有的utf-8中含有的内容都可以作为标识符。
最好不要用中文标识数字。
在这里插入图片描述

在这里插入图片描述

4.数据类型

数据类型指的就是字面量的类型。

在JS中一共有六种数据类型 ：
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象
(其中String，Number ，Boolean， Null， Undefined 是基本数据类型，而Object属于引用数据类型 )

string字符串

在JS中字符串需要使用引号引起来
使用双引号或单引号都可以，但是不要混着用
引号不能嵌套，双引号内不能放双引号，单引号内不能放单引号
可以外面单引号，内面双引号

在字符串中我们可以使用 \ 作为转义字符，当表示一些特殊符号时可以使用 \ 进行转义，例如：str = "我说：“今天天气真不错！” "；
\ " 表示 "
\ ’ 表示 ’
\n 表示换行
\t 表示制表符
\ 表示
\\ 表示 \\

<!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 type="text/javascript">
alert("str")
//输出字面量 字符串 str
</script>
</head>
<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 type="text/javascript">

alert(str)
//输出变量 str

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

在这里插入图片描述

var : 表示声明，相同自定义变量名前出现一次即可。
（如：var str1 = 122 ）

Number数值

1.在JS中所有的数值都是Number类型，包括整数和浮点数（小数）

var a= 123;
//数字123
var b=123
//字符串123

可以运用一个运算符 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 type="text/javascript">

        var a = 123.321;
        var b = "123.321";
        console.log(a);
        console.log(b);
        console.log(typeof a);
        console.log(typeof b);
        
</script>
</head>
<body>
    
</html>

在这里插入图片描述

2.js中可以表示的最大的数字：Number.MAX_VALUE（1.7976931348623157e+308）

如果使用Number表示的数值超过最大值，则会返回一个 Infinite 表示正无穷

<!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 type="text/javascript">

        var c = Number.MAX_VALUE;
        var d = Number.MAX_VALUE * Number.MAX_VALUE;
        console.log(c);
        console.log(d);
 
</script>
</head>
<body>
    
</html>

在这里插入图片描述

3.js中可以表示的无穷小：Number.MIN_VALUE（5e-324）

如果使用Number表示的数值小于最大值，则会返回一个 0

<!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 type="text/javascript">

        var e = Number.MIN_VALUE;
        var f = Number.MIN_VALUE * Number.MIN_VALUE;
        console.log(e)
        console.log(f)

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

在这里插入图片描述
4.NAN 是一个特殊数字，表示 not a number
使用 typeof 检查 infinite 和 nan 时都会返回一个 number

5.在js中整数的运算基本可以保证精确
如果使用js进行浮点数运算，可能得到一个不精确的结果

Boolean 布尔值

布尔值只有两个：
true（逻辑真）
false（逻辑假）

<!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 type="text/javascript">

        var a = true;
        var b = false;
        console.log(a)
        console.log(typeof a)
        console.log(b)
        console.log(typeof b)
    </script>
</head>

<body>
    
</html>

在这里插入图片描述

Null 空值

Null 类型的值只有一个，就是null
null这个值专门用来表示一个为空的对象
注意：使用typeof检查null时返回的是 object

<!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 type="text/javascript">

        var a = null;
        console.log(a)
        console.log( typeof a)
        
    </script>
</head>
<body>
    
</html>

在这里插入图片描述

Undefined 未定义

Undefined 类型的值也只有一个，就是undefined
当不给一个变量赋值时，他的值就是undefined
注意：使用typeof检查undefined 时返回的也是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 type="text/javascript">

        var b;
        console.log(b);
        console.log( typeof b);
        
    </script>
</head>
<body>
    
</html>

在这里插入图片描述

5.强制类型转换-string

强制类型转换 指的是将一个数据类型强制转换为其他的数据类型

类型转换主要指的是，将其他数据类型，转换为：string / number / boolean

将其他数据类型转换为 string

方法一：调用被转换数据类型的toString()
该方法不会影响到原变量，它会将转换的结果返回
注意：null和undefined 这两个值没有 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 type="text/javascript">

        var a = 123;
        console.log(a);
        console.log(typeof a);

        a = a.toString();
        console.log(a);
        console.log(typeof a);

        var b = a.toString();
        console.log(b);
        console.log(typeof b);

        var c = true;
        c = c.toString()
        console.log(c);
        console.log(typeof c);

        var d = null;
        d = d.toString()
        console.log(d);
        console.log(typeof d);

        var e = undefined;
        e = e.toString()
        console.log(e);
        console.log(typeof e);
    </script>
</head>

<body>
    
</html>

在这里插入图片描述

方法二 : 调用String()函数，并将被转换的数据作为参数传递给函数
使用 String() 函数做强制类型转换时，对于我们的Number 和Boolean 实际上就是调用 toString() 的方法
但是对于 null 和 undefined ，就不会调用 toString() 的方法，他会直接将 null 直接转换为"null"（将 undefined 直接转换为 " 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 type="text/javascript">

        var a = 123;
        a = String(a);
        console.log(a);
        console.log(typeof a);

        var b = null;
        b = String(b);
        console.log(b);
        console.log(typeof b);

        var c = undefined;
        c = String(c);
        console.log(c);
        console.log(typeof c);
        
    </script>
</head>
<body>
</html>

在这里插入图片描述

6.强制类型转换-Number

方法一：调用Number() 函数
将string转换为number
1.如果该字符串是纯数字，则直接将其转换为数字
2.如果该字符串含有非数字内容，则转换为NaN
3.如果该字符串是空字符串或者全是空格的字符串，则转换为0

<!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 type="text/javascript">

        var a = "1e+2";
        a = Number(a);
        console.log(a);
        console.log(typeof a);

        var b = "abc";
        b = Number(b);
        console.log(b);
        console.log(typeof b);

        var c = "   ";
        c = Number(c);
        console.log(c);
        console.log(typeof c);
 
    </script>
</head>
<body>
</html>

在这里插入图片描述
其余三种基本数据类型的 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 type="text/javascript">

        var d = true;
        d = Number(d);
        console.log(d);
        console.log(typeof d);

        var e = false;
        e = Number(e);
        console.log(e);
        console.log(typeof e);

        var f = null;
        e = Number(f);
        console.log(f);
        console.log(typeof f);

        var g = undefined;
        g = Number(g);
        console.log(g);
        console.log(typeof g);
    </script>
</head>

<body>
</html>

在这里插入图片描述
方法二：parseInt() 和 parseFloat()
parseInt() 把一个字符串转换为一个整数（可以利用这个方法取整数）
parseInt() 可以将一个字符串中有效的整数内容取出来然后转换为Number

parseFloat() 把一个字符串转换为一个浮点数
parseInt() 可以将一个字符串中有效的浮点数内容取出来然后转换为Number

可以在 parseInt() 中传递第二个参数，来指定数字进制
如果对非 string 使用 parseInt() 和 parseFloat() 它会先将其转换为 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 type="text/javascript">

        var a = "123.123m123";
        a = parseInt(a);
        console.log(a);
        console.log(typeof a);

        var b = "123.123m123";
        b = parseFloat(b);
        console.log(b);
        console.log(typeof b);
    </script>
</head>
<body>
</html>

在这里插入图片描述
8.转换为Boolean
方法：使用 Boolean() 函数
1.我们如果将Number 转为Boolean 时，除了 0 和 NaN 是false，其余的都是true

2.我们如果将String 转为Boolean 时，除了空串是 false，其余的都是true

3.Null 和 Undefined 转换为 Boolean 时，都是 false

4.对象也会转换为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 type="text/javascript">

    var a = 2;
    a = Boolean(a);
    console.log(a);
    console.log(typeof a);

    var b = 0;
    b = Boolean(b);
    console.log(b);
    console.log(typeof b);

    var c = "";
    c = Boolean(c);
    console.log(c);
    console.log(typeof c);

    var d = NaN;
    d = Boolean(d);
    console.log(d);
    console.log(typeof d);

    var e = null;
    e = Boolean(e);
    console.log(e);
    console.log(typeof e);

    var f = undefined;
    f = Boolean(f);
    console.log(f);
    console.log(typeof f);
</script>
<body>
</body>

</html>

在这里插入图片描述

7.运算符

通过运算符可以对一个或多个值进行运算，并获取运算结果
比如：typeof 就是运算符，可以获得一个值的类型，它会将该值的类型以字符串的方式返回（number string boolean undefined boject）

（1）算术运算符

ber 类型的值进行运算时，会将这些值转换为 Number 然后再运算（字符串加法除外）

任何值与NaN 做运算都得NaN

1.如果对两个字符串进行加法运算，则会做拼串（将两个字符串拼接在一起，并返回）
2.任何值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串操作
3.可以利用 ② 的特点，来将任意的数据类型转换为String，只要给该数据 +“” 即可，实际上也是调用 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 type="text/javascript">

    var a = 123;
    a = a + "";
    console.log(a);
    console.log(typeof a);

    var b = 456;
    console.log("b = "+b);

    var c = 1 + 2 + "3";
    console.log(c);
    
</script>
<body>
</body>
</html>

在这里插入图片描述
当对非 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 type="text/javascript">

    var a = 100;
    a = a - "5";
    console.log("a = "+a);
    console.log(typeof a);

    var b = 100;
    
    b = b - "abc";
    console.log("b = "+b);
    b = 100 - "";
    console.log("b = "+b);
    b = 100 - null;
    console.log("b = "+b);
    b = 100 - true;
    console.log("b = "+b);
    b = 100 - false;
    console.log("b = "+b);
    b = 100 - undefined;
    console.log("b = "+b);
    
</script>
<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 type="text/javascript">

    var a = 10;
    a = a % 3;
    console.log("a = "+a);

    var b = "abc";
    b = b % 3;
    console.log("b = "+b);
</script>

<body>
</body>
</html>

在这里插入图片描述
任何值做 - * / 运算时都会自动转换为Number
可以利用这一特点进行类型转换（-0 *1 /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 type="text/javascript">
      
    var a = "123";
    a = a - 0;
    console.log("a = "+a);
    console.log(typeof a);
    
    var b = "abc";
    b = b - 0;
    console.log("b = "+b);
    console.log(typeof b);

    var c = null;
    c = c - 0;
    console.log("c = "+c);
    console.log(typeof c);

    var d = true;
    d = d - 0;
    console.log("d = "+d);
    console.log(typeof d);

    var e = false;
    e = e - 0;
    console.log("e = "+e);
    console.log(typeof e);

    var f = undefined;
    f = f - 0;
    console.log("f = "+f);
    console.log(typeof f);
</script>
<body>
</body>
</html>

在这里插入图片描述

（2）一元运算符

只需要一个操作数

当对非 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 type="text/javascript">

    var a = 5;
    a = +a;
    console.log("a = "+a);

    var b = true;
    b = b + 1 + + "abc";
    console.log("b = "+b);

    var c = true;
    c = c + 1 + "1";
    console.log("c = "+c);
    c = true + 1 + + "1";
    console.log("c = "+c);
</script>

<body>
</body>
</html>

在这里插入图片描述

-负号
类似于 一元运算符中的 + 正号

自增
自增分两种：
1.先++（++a）即先自增再赋值
2.后++（a++）即先赋值再自增

!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 type="text/javascript">

    var a1 = 1;
    a1++;
    console.log("a1 = "+a1);

    var a2 = "5";
    a2++;
    console.log("a2 = "+a2);

    var a3 = "abc";
    a3++;
    console.log("a3 = "+a3);

    var a4 = true;
    a4++;
    console.log("a4 = "+a4);

    var a = 1;
    b = a++;
    console.log("b = "+b)
</script>

<body>
</body>
</html>

在这里插入图片描述
自减
类似于 自增

（3）逻辑运算符

js含有三种逻辑运算符

！非
对一个值进行非运算
1.如果对布尔值进行非运算，则会对布尔值进行取反
2.如果对非布尔值进行非运算，则会将其转换为布尔值，再进行布尔值取反
3.可以利用该特点，来将一个其他的数据类型转换为布尔值（取反两次，即 ！！）

&& 与（且）
类似 c

1.如果两个值都为 true ，则返回后边的值
2.如果两个值都为 false ，则返回前面的值
①②用短路逻辑理解，第一个值为true则返回第二个值，第一个值为false则返回第一个值

<!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 type="text/javascript">

    var a;
    a = 'abc' && 3 ;
    console.log("a = "+a);
    a = 3 && 'abc' ;
    console.log("a = "+a);
    a = 0 && true;
    console.log("a = "+a);
    a = '' && 0 ;
    console.log("a = "+a);
    a = NaN && 0 ;
    console.log("a = "+a);
</script>

<body>
</body>
</html>

在这里插入图片描述
|| 或
类似 c

如果第一个值为 true ，则返回第一个值
如果第一个值为 false ，则返回第二个值

（4）赋值运算符
（5）关系运算符

如果关系成立它会返回 true ，如果关系不成立则返回 false

对非数值进行比较时，会将其先转换为数字在进行比较
1.任何值与 NaN 进行任何比较，返回值都是false
2.如果两边都是字符串，比较的是字符串的字符编码 Unicode（ASCII码）
3.字符串的比较是一位一位的进行比较，如果两个一样才进行下一位的比较
注意：在比较两个字符串型色数字时，一定一定一定一定要转型

<!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 type="text/javascript">

    var a = true ;
    a = a + 1 + +'11';
    console.log("a = "+a);
</script>

<body>
</body>
</html>

在这里插入图片描述

（6）相等运算符

用来比较两个值是否相等
如果相等返回 true ，如果不等返回 false
用 == 来表示相等运算
用 ! = 来表示不等运算

注意：如果使用 == 或 ! = 来比较两个值时，如果类型不同，则会自动进行类型转换，将其转换为相同的类型
1.如果将 Undefined 与 Null 进行比较则会返回 false
2.NaN不与任何值相等，包括他本身

如果要判断一个变量是否为 NaN
可以引用 isNaN() 函数

=== ：全等（不会进行自动进行类型转换，如果两个值不等，则直接返回false，如果两个值相等，则直接返回true）
! == ：不全等（不会进行自动进行类型转换，如果两个值不等，则直接返回true，如果两个值相等，则直接返回false）

<!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 type="text/javascript">

    console.log("\u2620\t\u2654")
    var a = NaN,b = 'abc',c = 1;
    a = isNaN(a);
    b = isNaN(Number(b));
    c = isNaN(c);
    console.log("a = "+a);
    console.log("b = "+b);
    console.log("c = "+c);
    b = Number(b);
    console.log("b = "+b);
</script>
<body>
</body>
</html>

在这里插入图片描述
（7）条件运算符（三元运算符）
语法：
条件表达式 ? 语句1 : 语句2
条件运算符在执行时，首先对条件表达式进行求值
1.如果该值为true，则执行语句1，并返回执行结果
2.如果该值为false，则执行语句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 type="text/javascript">

	var max , a , b ;
    a = 1; b = 2;
	max = a > b ? a : b ;
	console.log("max = "+max);
</script>

<body>
</body>
</html>

在这里插入图片描述

8.Unicode 编码表

在字符串中使用转义字符输入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 type="text/javascript">

	console.log("\u2620\t\u2654")
</script>

<body>
</body>
</html>

在这里插入图片描述
在网页中使用Unicode 编码
在这里插入图片描述

GJ_straysoul
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
远行旅程网页模板
01-23
远行旅程网页模板
欢乐旅程信息网页模板
01-22
欢乐旅程信息网页模板
新概念4 中英对照
DMLTZY的专栏
11-16 8583
----------1----------Why are legends handed down by storytellers useful?We can read of things that happened 5,000 years ago in the Near East, where people first learned to write. But there are some parts of the word where even now people cannot write. The
撩人心弦！九型人格测试API接口的奇幻旅程
2401_84654664的博客
05-04 451
九型人格测试属于一种自我测试。九型人格测试主要用于帮助你有效地掌握个人的行为习惯，测试中所回答的问题答案没有好与坏之分、没有正确与错误之别，它仅反映你自己的个性和你的世界观。
探索Windows内核的暗黑艺术：《Win32进攻手册》
gitblog_00018的博客
06-07 217
探索Windows内核的暗黑艺术：《Win32进攻手册》 项目地址:https://gitcode.com/matthieu-hackwitharts/Win32_Offensive_Cheatsheet 在网络安全的阴影领域，有这样一本秘籍，它专为渗透测试者和红队成员打造——《Win32进攻手册》。这是一份由安全研究界的精英@UVision和@RistBS共同编纂的宝典，旨在揭示Win32及其内...
红队 入门_我穿越网络安全红队的硕士证书的旅程
weixin_26741563的博客
09-06 780
红队 入门August 26 BY Kaavyaa.A 8月26日，Kaavyaa.A This is my personal experience with the one-of-a-kind program powered by HackerU, Isreal’s Premier Cyber Security Training Provider and Jigsaw Academy, Ind...
写在博士旅程之前|博士第一年|博士第三年|博士第四年
qq_41854911的博客
10-16 2471
转载于知乎 YY硕在完成RoboMaster 2018总决赛和参与Mavic 2发布会后，我离开了在大疆创新的岗位，8月27日开始在卡内基梅隆大学的机器人学院攻读机械工程和机器人学的博士学位。读博士这件事，想法一直都有。2015年硕士毕业前去西雅图参加ICRA2015，顺路跟着导师李泽湘到他年轻时的好基友沈向洋先生家做客。导师站在沈向洋先生的豪宅前开玩笑地说：“看一下以后奋斗的目标。”而逛了一圈，我印象最深的是他书房里最显眼的位置挂着的博士学位证书。Doctor of Philosophy in Robot
新手乍到，虚心求学
ITxiaoliu的博客
12-01 489
2015年12月1日，一个菜鸟初来乍到。这是我第一次使用博客，首先说说我为什么突发奇想要来写博客。就在前两天，即11月29日。我的偶像--Kobe Bryant官方宣布退役，哎，我科要走了，所以我在想业余时间NBA看得少了，总要找点事来做。刚好今天JAVA老师推荐我们写博客，于是我就找了CSDN这个我平时了解多一点的网站注册了一下，准备在今后的日子多写一些专业技能的知识。一.不让剩余的两年大学时光
探索安全世界：Go语言引领的新里程
gitblog_00096的博客
05-25 262
探索安全世界：Go语言引领的新里程 项目地址:https://gitcode.com/PacktPublishing/Security-with-Go 在这个数字化时代，安全性已经成为软件开发的核心要素之一。而Go（Golang）以其高效、简洁的语法和强大的网络功能，正逐渐成为安全专家的首选语言。今天，我们向您推荐一本独特的开源书籍——《Security with Go》的代码仓库，这是一个综合性...
redis rce漏洞安全_从重新定位到RCE：我从广告到网络安全的旅程
weixin_26753891的博客
09-06 576
redis rce漏洞安全My decision to attend a bootcamp for cybersecurity was a surprise for many around me. 我决定参加网络安全训练营的决定令我周围的许多人感到惊讶。 My parents didn’t get why I’d give up on a steady high-paying job, espe...
植物大战僵尸杂交版最新2.0.88手机+电脑+苹果+修改器
ehviwer23的博客
06-08 1263
在这个充满奇妙的平行宇宙中，植物和僵尸竟然能够和谐共存！是的，你没听错！一次意外的实验，让这两个看似对立的生物种类发生了基因杂交，创造出了全新的生物种类——它们既能够进行光合作用，也具备僵尸的移动能力。这种神奇的杂交物种，让我这个游戏设计师兼内容创作者眼前一亮！🌱🧟‍♂️🌿
用户洞察：麦肯锡_塑造消费者决策新旅程.pdf
05-19
"用户洞察：塑造消费者决策新旅程" 以下是根据给定的文件信息生成的知识点： 一、消费者决策旅程的变革 * 消费者决策旅程是指消费者在购买产品或服务时的整个过程。 * 传统的“漏斗”模型认为消费者对已知的品牌...
旅程定制服务响应式网站模板
01-21
旅程定制服务响应式网站模板
我的旅程响应式网页模板
01-22
我的旅程响应式网页模板
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 329
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 504
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
最新发布
乐闻世界
06-10 1212
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 518
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
用户旅程拆解法UJM模型
05-05
用户旅程拆解法（User Journey Mapping，简称UJM）是一种设计和分析用户体验的方法。它通过将用户在使用某个产品或服务时的各个行为、感受和观点以时间顺序的方式进行整理，从而帮助设计师和产品经理更好地了解用户体验和需求，进而优化产品设计和用户体验。 UJM模型主要分为以下几个步骤： 1. 定义用户旅程：首先需要明确用户在使用产品或服务时的整个过程，包括用户的目标、行为和情感状态。 2. 制定用户旅程地图：制定用户旅程地图是UJM模型的核心环节，它通过图形化的方式展示用户在不同时间点的行为、情感和观点。这个过程需要细心地记录用户在每个时间点的行为和情感状态，并将其与产品设计方案进行匹配和比较。 3. 分析用户旅程：在分析用户旅程时，需要考虑用户的需求、期望和痛点，以及产品所提供的解决方案是否能够满足用户的需求。分析用户旅程的目的是找出产品或服务的不足之处，以便进行改进或优化。 4. 优化产品设计：通过分析用户旅程，可以了解到用户的需求和痛点，以及产品设计的不足之处。在此基础上，可以针对性地进行产品设计和改进，以提高用户体验和满意度。 总之，UJM模型是一种非常实用的用户体验设计方法，它可以帮助设计师和产品经理更好地了解用户需求和痛点，从而优化产品设计和用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值