Web初学-2022.11.6-12.02

最新推荐文章于 2023-04-07 17:31:42 发布

码上奉先

最新推荐文章于 2023-04-07 17:31:42 发布

阅读量753

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/intmain404/article/details/128055631

版权

第六周笔记（JavaScript简介）

1.简介（K1）

1.起源：JavaScript诞生于1995年，主要处理网页中的前端验证检查用户输入内容
前端验证;检查用户输入内容是否符合一定规则（如用户名\密码长度、邮箱格式）
在这里插入图片描述
2.实现：
1）各个厂商对实现ECMAScript的标准

2）完整的JavaScript（需要学习的三部分）

标准文档对象模型浏览器对象模型
3.JS特点：

解释型语言
类似于C和Java的语法结构
动态语言
基于原型的面向对象
2.< head>中基础的输出语句（K2）

1.alert：控制器弹出警告框
1）alert（“”）;
```
 <script>
        alert("嘎嘎嘎");
    </script>
```
2.document：让计算机在页面输出一个内容
1）document.write(“”);
向body中输出一个内容
```
 <script>
        alert("嘎嘎嘎");
        document.write("咕咕咕")
    </script>
```
3.console.log：向控制台输出一个内容
1）console.log（“”）;
```
   <script>
        alert("嘎嘎嘎");
        document.write("咕咕咕")
        console.log("芜湖芜湖")
    </script>
```
注：JS语言按照从上至下一行一行执行在某行执行后刷新可能无法继续（详看K8）

3.新的基础东西（K3）

1.< button></ button>按钮
```
<body>
    <button>无用的按钮</button>
</body>
```
1）可以将js编码写到标签的onclick属性中（点击事件）
```
<body>
    <button onclick="alert('龟龟，源石锭+3')">无用的按钮</button>
</body>
```
2）也可在href超链接中加入js代码
```
 <a href="javascript:alert('关卡：失控！')">龟龟，源石锭+2</a>
```
注：虽然以上可用，但属于结构与行为耦合，不推荐！！！
2.正规的外部文件
```
  <script src="js/D602.js"></script>
```
   注：写到外部文件中可以在不同页面中同时引用，也可以利用浏览器缓存机制
   注：同一script标签一旦引入外部文件，就不能再编写代码，即使编写也会忽略

4.script中的基本语法（K4）

1.注释
1）多行注释：/* */
2）单行注释：//
2.JS中严格区分大小写
3.JS中每一条语句以分号结尾
   注：如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，某时还会加错
4.JS中会忽略多个空格和换行所以可以利用空格和换行对代码进行格式化

5.字面量和变量（K5）

1.字面量，都是一些不可改变的量（常量/字面的意思）
2.变量，可以用来保存字面量，而且变量的值是可以任意改变的，变量更易使用
3.使用变量
1）声明：在js中使用var关键字来声明一个变量 var a；
2）为变量赋值 a = X；
3）复写声明：var b = X；
   注：在var声明后，填充声明内容无需var（还是要；嗷）

6.标识符（K6）

1.标识符：在JS中所有的可由自主命名的都可以称为是标识符
1）如变量名、函数名、属性名都属于标识符
2）命名一个标识符时需要遵守如下规则
a.标识符中可以含有字母、数字、_ 、$
b.标识符不能以数字开头
c.标识符不能是ES中的关键字或保留字

d.其他不建议使用的标识符

e.标识符一般采用驼峰命名法
         首字母小写，每个单词的开头字母大写，其他字母小写如helloWorld  xxxYyyZzz
   补充：JS底层保存标识符时实际上是采用的Unicode编码，理论上讲，所有utf-8含有内容都可作为标识符

7.数据类型（K7-K10）

1.数据类型指的就是字面量的类型
2.在JS中一共有六种数据类型
1）String  字符串
2）Number  数值
3）Boolean 布尔值
4）Null   空值
5）Undefined 未定义
           注：以上五种为基本数据类型
6）Object  对象
           注：Object属于引用数据类型
A.String字符串
       a.在JS字符串中需要使用引号引起来（直接写为变量）
```
<script type="text/javascript">
        var str = "hello";
        console.log(str);
    </script>
```
   奇怪的突发情况：

   原因：前面的“”被认定为字符串，后面的误认为非法标志符
       b.单双号都可以，但不可混用
       c.引号不嵌套，双引号中无双引，单引号中无单引（可成对异名嵌套使用）
       d.表示一些特殊字符时，可以使用\进行转义

   注：\“表示“ \‘表示’ \n表示换行 \t表示制表 \ \表示
      alert（“XXX”）；表示输出字符串XXX代表的内容
      alert（XXX）；    表示输出XXX
B.Number数值
       a.在JS中所有的数值都是Number类型，包括整数和浮点数（小数）
       b.可以用一个运算符typeof来检查一个变量的类型
```
        console.log(typeof X);
```
       c.JS中可以表示的数字最大值：Number.MAX_VALUE,实际值：1.7976931348623157e+308（+308为指数）
         如果使用Number表示的数字超过了最大值，则会返回一个Infinity，表示正无穷（Number类型）
         NAN是一个特殊数字，表示Not A Number
       d.JS中可以表示的零以上的数字最小值：Number.MIN_VALUE，实际值：5e-324（-324为指数）
       e.如果使用JS计算一个浮点元素计算，可能得到一个不精确的结果
         注：千万不要使用JS进行对精确度要求较高的运算
C.Boolean布尔值
       a.布尔值只有两个：true（真） false（假）
```
     var bool = true;
        console.log(typeof bool);
```
D.Null空值
       a.Null的类型只有一个，就是null，专门用来表示一个为空的对象
       b.使用typeof检查一个null值时，会返回object
E.Undefined未定义
       a.Undefined的类型只有一个，就是undefined
       b.当声明一个变量，但是并不给变量赋值时，它的值就是undefined
```
        var a;
```
c.使用typeof检查一个undefined时也会返回undefined

8.强制类型转换（K11——K12、K14）

1.含义：指将一个数据类型强制转换为其他的数据类型
即将其他的数据类型转化为String、Number、Boolean
1）将其他类型转变为String
原：
```
<script>
        var a = 123;
        console.log(typeof a);
        console.log(a);
    </script>
```
假变：声明时增加“”
```
 <script>
        var a = "123";
        console.log(typeof a);
        console.log(a);
    </script>
```
A真变：调用被转换数据类型的tostring（）方法
```
 <script>
        var a = "123";
        var b = a.toString();
        console.log(typeof a);![在这里插入图片描述](https://img-blog.csdnimg.cn/60d7b242fb4d4c47ab9a1cdf18ffd9b0.png#pic_center)

        console.log(a);
    </script>
```
a.该方法不会影响到原变量，它会将转换的结果返回（需要再声明var x =…）
b.注意，null和undefined两个值没有tostring（）方法，如果调用，会报错
注：调用xxx的yyy（）方法，就是xxx.yyy（）；
B真变：调用String函数（调用X函数写法：X（））
```
<script>
        var a = 123;
        a = String(a);
        console.log(typeof a);
        console.log(a);
    </script>
```
   注：使用String（）函数做强制类型转化时
       对于number和boolean实际上就是调用的tostring（）方法
       但对null和undefined，不会调用tostring（）方法，会将null直接转化为“null”
2）将其他类型转换为Number
            方法一：使用Number（）函数（方法如上B真）
             注：当转换内容不为数字时，显示NAN
                 当字符串是一个空串或者全是空格的字符串则转换为0
                 布尔转数字：true转为1   false转为0   Null也转为0   undefined转为NAN
                 Number（）函数有局限，不合规则显示NAN，如123px
```
<script>
        var a ="abc";
        a = Number(a);
        console.log(typeof a);
        console.log(a);
    </script>
```
            方法二：调用parseInt（）、parseFloat（）函数将a转换为Number
             注：该方法专门用来对付字符串
a.parseInt（）  把一个字符串转换为一个整数
```
 <script>
        a = "123px"
        a = parseInt(a);
        console.log(typeof a);
        console.log(a);
    </script>
```
parseInt（）可以将一个字符串中有效的整数内容取出来，然后转换为Number
b.parseFloat（）把一个字符串转换为一个浮点数
parseFloat（）与parseInt（）类似，但它可以获得有效小数
```
<script>
        a = "123.456px"
        a = parseFloat(a);
        console.log(typeof a);
        console.log(a);
    </script>
```
注：对非String使用parseInt（）或parseFloat（），会先将其转换为String，再操作
3）将其他类型转换为Boolean
方法一：调用Boolean（）函数
```
<script>
        var a = 123;
        a = Boolean(a);
        console.log(typeof a);
        console.log(a);
    </script>
```
             注：var a = 123; //true
                     a = -123; //true
                     a = 0; //false
                     a = Infinity //true
                     a = NAN //false
                     除了0和NAN，其余的都是true
                     字符串转布尔，除了空串，其余的都是true
                     null和undefined都是false
            方法二（K19）：对任意数据类型取两次非运算

9.其他数字的进制（K13）

1.在JS中，如果需要表示16进制的数字，则需要以0x开头
```
  <script>
        var a = 123;
        a = 0x10;
        var b = 123;
        b = 0xff;
        console.log(a);
        console.log(b);
    </script>
```
2.在JS中，如果需要表示8进制的数字，则需要以0开头
```
<script>
        var c = 123;
        c = 070;
        console.log(c);
    </script>
```
3.在JS中，如果需要表示2进制的数字，则需要以0b开头,但不是所有浏览器都支持
4.可以在parseInt（）中传递一个第二参数，来指定数字的进制
```
 <script>
        var c = 123;
        c = "070";
        c = parseInt(c,10);
        console.log(c);
    </script>
```
```
 <script>
        var c = 123;
        c = "070";
        c = parseInt(c,16);
        console.log(c);
    </script>
```
10.运算符（K15）

1.含义：运算符也叫操作符，可以对一个或多个值进行运算
如typeof就是运算符，可以用来获得一个值的类型
2.算数运算符：
1）+ 加法
```
 <script>
        var a = 123;
        var result = typeof a;
        result = a + 1;
        console.log(result);
    </script>
```
   result = 456 + 789 显示1245
   result = true + 1 显示2
   result = true + false 显示1
   result = “123“ + ”456” 显示123456，对两字符串加法运算，将拼接
   result = 1 + 2 + 3 显示33
   result = “1” + 2 + 3 显示123
             注：对非Number类型进行运算时，会将这些值转换为Number。任何与null相关都会变NAN
                 任何值和字符串做加法运算，都会先转换为字符串，再和字符串做拼串的操作
                 只需要对任意的数据类型 + 一个“ ”，即可转换为String
```
 <script>
        var c = 123;
        c = c + " "
        console.log(typeof c);
        console.log(c);
    </script>
```
骚操作：
```
 <script>
        var str ="锄禾日当午"+
        "汗滴禾下土"+
        "谁知盘中餐"+
        "粒粒皆辛苦"
        console.log(str);
    </script>
```
2）- 减法
   result = 100 - 5 显示95
   result = 100 - true 显示99
   result = 100 - “1” 显示99
3）* 乘法
   result = 2 * 2 显示4
   result = 2 * “8” 显示16
   result = 2 * undefined 显示NaN
   result = 2* null 显示0
4）/ 除法
             注：可以通过一个值-0 *1 /1将其转换为Number
5）%取模运算（取余数）

11.一元运算符（K16）
+（一元）正号不会对数字产生任何影响 ![在这里插入图片描述](https://img-blog.csdnimg.cn/fe5d3820bd7f4b039ae697a91bb6be49.png#pic_center)

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

在这里插入图片描述

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

-（一元）负号可以对数字进行负号的取反（取反后变number）
12.自增和自减（K17-K18）
自增：通过自增可以使变量在自身的基础上增加1

原：

在这里插入图片描述

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

自增：

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

1）通过自增可以使变量在自身的基础上增加1
2）对于一个变量自增以后，原变量的值会立即自增1
3）自增分两种：后++（a++）和前++（++a）都会使原变量自增1
不同的是：a++的值等于原变量的值，++a的值为原变量自增后的值
在这里插入图片描述

 <script>
        var d = 20;
        var result = d++ + ++d + d ;
        console.log("result = "+result);
    </script>

20+22+22
注：单独a++才是先增值，++a为先计算在增值

自减：
1）通过自增可以使变量在自身的基础上减少1
2）对于一个变量自增以后，原变量的值会立即自减1
3）自增分两种：后++（a++）和前++（++a）都会使原变量自减1
不同的是：a++的值等于原变量的值，++a的值为原变量自减后的值

13.逻辑运算符（K19-K20）

1.布尔情况下
！非可以用来对一个值进行非运算
```
<script>
        var a = true;
        a = !a;
        console.log("a = "+a);
    </script>
```
1）所谓非运算就是值对一个布尔值进行取反操作
2）如果对一个值进行两次取反，它不会变化
3）对非布尔值进行取反，会将其转换为布尔值，再取反
4）可以对任意一个数据类型取两次反，来将其转换为布尔值
&& 与可以对符号两侧的值进行与运算并返回结果

在这里插入图片描述

 <script>
        var result = true && true;
        console.log("result = "+result);
    </script>

在这里插入图片描述

  <script>
        var result = true && false;
        console.log("result = "+result);
    </script>

在这里插入图片描述

 <script>
        var result = false && false;
        console.log("result = "+result);
    </script>

1）只要有一个false，返回false
2）第一个值为true，会检查第二个

|| 或可以对符号两侧的值进行或运算并返回结果

在这里插入图片描述

  <script>
        result = false || false;
        console.log("result = "+result);
    </script>

在这里插入图片描述

 <script>
        result = true || false;
        console.log("result = "+result);
    </script>

在这里插入图片描述

 <script>
        result = false || true;
        console.log("result = "+result);
    </script>

1）两个值只要要一个true就返回true
2）两个值都是false才返回false
3）第一个值为false，则会检查第二个值
4）第一个值为true则不会检查第二个值
2.非布尔情况

|| &&
```
<script>
        var result = 1 && 2;
        console.log("result = "+result);
    </script>
```
1）非布尔值进行与或运算时，会将其转换为布尔值，然后进行运算，并返回原值
2）与运算，只要有一个true，则返回后边的
3）与运算，如果有false，返回靠前的false
4）或运算，如果第一个为true，则直接返回前一个值
5）或运算，如果第一个为false，则直接返回后一个值

14.赋值运算符（K21）
= 可以将符号右侧的值赋给符号左侧的变量

在这里插入图片描述

<script>
        var a = 123;
        console.log(a);
    </script>

+= X + = x 等价于 X = X + x

在这里插入图片描述

 <script>
        var a = 10;
        a += 5;
        console.log(a);
    </script>

-= 大致同上
/= 大致同上
*= 大致同上
15.关系运算符（K22-K23）

1.作用：可以比较两个值之间的大小关系，成立返回true，不成立返回false
> 大于号

在这里插入图片描述

 <script>
        var result = 5 > 4;
        result = 5 > 4;
        console.log("result = "+result);
    </script>

>= 大于等于
< 小于号
<= 小于等于
1）对于非布尔值进行比较，会先将其转换为数字再进行比较
2）任何值对NaN做比较，结果都是false
3）如果两侧都是字符串，不会转换为主子，而会分别比较字符串中的Unicode编码
4）如果两位一样，则比较下一位
5）注意，两个字符串类型为数字时，一定一定要转型
2.输入Unicode编码
1）在字符串中使用转义字符输入Unicode编码：\u四位编码
2）在网页中使用Unicode编码：&#编码；，需要十进制编码，看“计算机”

16.相等运算符（K24）

1.含义：比较两个值是否相等（==）
```
 <script>
        console.log(1 == 1);
    </script>
```
1）如果两值类型不同，自动类型转换为相同类型，再比较
2）undefined衍生自null，这两值做相等判断，会返回true
3）NaN不和任何值相等，包括它本身
2.可以通过isNaN（）函数来判断一个值是否是NaN
```
<script>
        var b = NaN;
        console.log(isNaN(b));
    </script>
```
3.判断不相等：！，不相等返回true，否则false
```
 <script>
        console.log(10 != 5);
    </script>
```
1）不相等也会对变量进行自动的类型转换，转换后相等也会返回false
4.=== 全等，用来判断两个值是否全等，和相等类似，但不会做自动类型转换
5.！== 不全等，用来判断两个值是否不全等，和不等类似，但不会做自动类型转换

17.条件运算符（三元运算符）（K25）

1.语法：条件表达式？：语句1：语句2；
2.执行的流程
1）在执行时，首先对条件表达式进行求值
值为true，执行语句1，并返回执行
值为false，执行语句2，并返回执行
```
        true?alert("语句1"):alert("语句2");
```
```
<script>
        var a = 30;
        var b = 20;
        a > b ? alert("a大"):alert("b大");
    </script>
```
```
 <script>
        var a = 30;
        var b = 20;
        var max = a > b ? a : b;
        console.log("max = "+max);
    </script>
```
```
 <script>
        var a = 30;
        var b = 20;
        var c = 50;
        var max = a > b ? a : b;
        max = max > c ? max : c;
        console.log("max = "+max);
    </script>
```
2）如果条件表达式的求值结果是一个非布尔值，会转化为布尔值，然后运算