JS第一周学习

最新推荐文章于 2024-06-10 22:18:41 发布

BBsix666

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量835

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/BBsix666/article/details/128068879

版权

视频教学

一、JS简介

在这里插入图片描述

二、JS的Hello World

在这里插入图片描述

    <script>
        alert("弹出一个内容");
        document.write("在页面输出一个内容");
        console.log("向控制台输出一个内容，页面上不显示");
    </script>

三、JS编写位置

用于引入外部JS文件

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

注：一旦引入外部文件，script标签下不再可以编写代码。如果需要可以再创建一个script标签用于编写内部代码。

    <button onclick="alert('讨厌，你摸我干嘛');">我是达达，摸我屁屁</button>
    <a href="javascript:alert('你还摸！！');">我是达达，摸我屁屁</a>

四、JS基本语法

1.JS中严格区分大小写
2.JS中每一条语句以英文分号 ( ; ) 结尾
3.JS中会忽略多个空格和换行

五、常量和变量

常量可以直接使用，但是我们一般不直接使用常量
变量可以用来保存常量并对其进行描述，而且变量的值可以随意改变，变量更适合我们使用

在JS中使用var关键字来声明一个变量

    <script>
        var a;
        a = 100;
        alert(a);
    </script>

六、标识符

1.标识符可以包含字母、数字、下划线_、$
2.不能以数字开头
3.标识符不能是JS中的关键字或保留字
4.标识符一般使用驼峰命名法（首字母小写，每个单词的开头字母大写，其余字母小写，如helloWorld）
在这里插入图片描述

七、字符串

JS中有六种数据类型

基本数据类型：

String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义

引用数据类型：

Object 对象

String字符串需要用引号引起来
使用双引号和单引号都行，双引号里面不能放双引号，单引号里面不能放单引号，单引号里面可以放双引号。
        var str = "Hello";    
        alert(str);
在字符串中我们可以使用 \ 作为转义字符，当表示一些特殊符号时可以使用 \ 进行转义，当表示一些特殊符号时可以使用 \ 进行转义

var a = "达\"达帅\"飞了" ; document.write(a);

    var a = "达达\n帅\t飞了" ;        
    alert(a)

在这里插入图片描述

        var a = "达达<br>帅\t\t飞了" ;        
        document.write(a)
        document.write(typeof a);

在这里插入图片描述
注：document.write中的换行需要用 来完成

        var a = undefined;        
        document.write(a);
        document.write("</br>");
        document.write(typeof a);

在这里插入图片描述

八、Number

JS中所有数值都是Number类型，包括整数和浮点数（小数）
可以用 typeof 检查一个变量的类型

        var a = "123";    
        var b = 123;  
          
        document.write(typeof a);
        document.write(typeof b);

在这里插入图片描述

document.write(Number.MAX_VALUE); → 输出的最大值1.7976931348623157e+308
   									大于这个值显示为 ±Infinity

NaN是一个特殊的数字，表示Not A Number

        var b = Number.MIN_VALUE; → 输出的最小值5e-324 （大于0）
        							减去任何数都等于 0 - 任何数

如果使用JS进行浮点数计算，可能会得到一个不精确的结果，所以千万不要用JS进行对精确度比较高的计算。

九、布尔值

布尔值只有两个值 true / false

        var a = true;    
        document.write(a);
        document.write(typeof a);

在这里插入图片描述

十、Null和Undefined

Null的值只有一个，就是null。
null专门来表示空对象。
检查null值时，会返回object

        var a = null;    
        document.write(a);
        document.write(typeof a);

在这里插入图片描述
Undefined的值只有一个，就是undefined。
当声明一个变量，但未给变量赋值时，它的值就是undefined（未定义）。
检查undefined时，会返回undefined

        var a ;    
        document.write(a);
        document.write(typeof a);

在这里插入图片描述

十一、强制类型转换-String

方式一：调用被转换数据类型的 toString( ) 方法，
该方法不会影响到原变量，它会将转换的结果返回。
注：调用xxx的yyy( ) 方法，就是xxx.yyy( )
注：null和undefined这两个值没有tostring( ) 方法，如果调用他们的方法会报错。

        var a = 123; 
        var b = a.toString()       
        document.write(a);
        document.write("</br>");
        document.write(typeof a);
        document.write(typeof b);

在这里插入图片描述
方式二：调用String( ) 函数，并将被转换的数据作为参数传递给函数。
注：将null直接转换为“null”，将undefined直接转换为“undefined”。

        var a = undefined; 
        b = String(a);
        document.write(a);
        document.write("</br>");
        document.write(typeof a);
        document.write(typeof b);

在这里插入图片描述

十二、强制类型转换-Number

调用Number( ) 函数来将a转换为Number类型
使用Number( ) 函数
字符串 → 数字
    1.如果是纯数字的字符串，则将其直接转换为数字。
    2.如果字符串中有非数字的内容，则将其转换为NaN。
    3.如果字符串是一个空串或者一个全是空格的字符串，则转换为0.

a = "123ab"; document.write(typeof a); document.write(""); b = Number(a); document.write(a); document.write(""); document.write(b); document.write(""); document.write(typeof a); document.write(""); document.write(typeof b);

布尔值 → 数字
1.true转成1
2.false转成0

a = true; document.write(typeof a); b = Number(a); document.write(a); document.write(""); document.write(b); document.write(""); document.write(typeof a); document.write(""); document.write(typeof b);

Null → 数字

a = Number(a);

a = 0

undefined → 数字

a = "undefined"; document.write(typeof a); document.write(""); b = Number(a); document.write(a); document.write(""); document.write(b); document.write(""); document.write(typeof a); document.write(""); document.write(typeof b);

转换方式二：
  这种方式专门用于转换字符串
    parseInt( ) 把一个字符串转换为一个整数，将字符串中所有整数取出来，然后转换为Number
      注：从第一个数字开始，读到不是数字的字符停止，后面的不再读取，有局限性。

parseFloat( ) 把一个字符串转换为一个浮点数，可以读取小数，其余与parseInt( ) 一样

        a = "123px"; 
        document.write(typeof a);
        document.write("</br>");
        b = parseInt(a);
        document.write(a);
        document.write("</br>");
        document.write(b);
        document.write("</br>");
        document.write(typeof a);
        document.write("</br>");
        document.write(typeof b);

在这里插入图片描述

十三、其他进制的数字

十六进制的数字以 0x 开头，如：0x10 = 16 ， 0xff = 255
八进制的数字以 0 开头，如：070 = 56
二进制的数字以 0b 开头（但不是所有浏览器都支持使用二进制），如0b10 = 2
注：例如“070”这种字符串，一些浏览器按照十进制解析，一些按照八进制解析。

        b = parseInt(a,8);  → 令其按照八进制解析

十四、转换为Boolean

使用Boolean( ) 函教
  数字 → 布尔
    除了0和NaN，其余都是true
  字符串 → 布尔
    除了空串，其余都是true
  null 和 undefine 都转换为false
  有对象转换为true

十五、算数运算符

运算符又叫操作符
通过运算符可以对一个或多个值进行运算,并获取运算结果
比如: typeof就是运算符，可以来获得一个值的类型
+加法

当对非Number类型的值进行运算时，会将这些值转换为Number然后再运算
如果对两个字符串进行加法运算,则会做拼串，会将两个字符串拼接为一个字符串，并返回
任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作

我们可以利用这一特点，来将一个任意的数据类型转换为String
我们只需要为任意的数据类型＋一个"”即可将其转换为String
这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用String()函数

a = 123; document.write("a = " + a);

-减法

和加法大体相同

a = 100 - "1";

a = 100 - "da";

*乘法 / 除法

a = 40 / "8";

a = 40 / undefined;

a = 40 * null;

任何值做-*/运算时都会自动转换为Number
我们可以利用这一特点做隐式的类型转换
可以通过为一个值-1 * 1 / 1来将其转换为Number
原理和Number()函数一样,使用起来更加简单

%取余

9 % 4 = 1

十六、一元运算符

+正号不会对数字产生影响
-负号对数字取反数

对于非Number值会先转换为Number值，再运算

十七、自增和自减

通过自增可以使变量在自身基础上加1
一个变量自增之后，原变量的值会立即加1

a++ = a + 1
++a = a + 1

a++的值等于原变量的值（自增前的值）
++a的值等于原变量自增后的值

		var a = 10；
        document.write(a);
        a++;
        document.write(a);
        a++;
        document.write(a);
        a++;
        document.write(a);

在这里插入图片描述

        var a = 10;
        document.write(a);
        document.write(a++);
        document.write(a++);
        document.write(a++);

在这里插入图片描述

        var a = 10;
        document.write(a);
        document.write(++a);
        document.write(++a);
        document.write(++a);

在这里插入图片描述
自减和自增一样

十八、自增练习

十九、逻辑运算符

JS中有三种逻辑运算符
！非
对一个布尔值进行取反

var a = true; a = !a; document.write("a = " +a);

对一个非布尔值进行取反，会将其先转换为布尔值再取反

可以用 ! ! x 连续取反两次来将其他数据类型转换为布尔值。

&& 与
只要有false就返回false
var a = true && true; var b = true && false; var c = false && false; document.write("a = " +a); document.write(""); document.write("b = " +b); document.write(""); document.write("c = " +c);

第一个值为true会检查第二个值，第一个值是false不会检查第二个值。

true && alert("叮");

|| 或
只要有true就返回true
第一个值为false会检查第二个值，第一个值是true不会检查第二个值。

二十、非布尔值的与或计算

会先将其转换为布尔值再进行运算
与运算：

如果两个值都为true，则返回后面值
如果有false则返回false
如果两个false则返回前面值

或运算：
和与运算相反。
在这里插入图片描述

二十一、赋值运算符

a = a + 5
a += 5

a = a * 5
a *= 5

二十二、关系运算符

通过关系运算符比较两个值之间的大小关系
如果关系成立则返回true，否则返回false
在这里插入图片描述
非数值的情况：
先将其转换为数字，再进行比较

当两个字符串进行比较时，比较两个值的unicod编码。

比较字符编码时一位一位进行比较

如果两位一样，则比较下一位，所以借用它来对英文进行排序

比较中文时没有意义
如果比较两个字符串型的数字，可能会得到不能预期的结果。
注意:在比较两个字符串型的数字时，一定一定一定要转型

二十三、Unicode编码

在字符串中使用转义字符输出Unicode编码（十六进制）

\u四位编码
\u0011

在网页中使用Unicode编码 → &#编码（十进制）

二十四、相等运算符

相等运算符用于比较两个值是否相等，相等就是true，不等就是false
使用==来做相等运算

        var a = 10;
        document.write(a == 3);

在这里插入图片描述

可以通过isNaN( ) 判断一个值是不是NaN

        var a = NaN;
        document.write(isNaN(a));

在这里插入图片描述

二十五、条件运算符

条件运算符也叫三元运算符
语法：

条件表达式?语句1:语句2;

条件运算符在执行时,首先对条件表达式进行求值，
如果该值为true，则执行语句1，并返回执行结果。
如果该值为false，则执行语句2，并返回执行结果。

        var a = 30;
        var b = 20;
        var max = a < b ? b : a;
        alert("max = " +max);

如果条件的表达式的求值结果是一个非布尔值，会将其转换为布尔值，然后再运算。

二十六、运算符的优先级

使用，可以分割多个语句，一般可以在声明多个变量时使用

        var a = 30; b = 20; c = 40;

&&与运算的优先级高

        var a = 1 || 2 && 3; //输出1

在表中越靠上优先级越高，优先级越高越优先计算，
在这里插入图片描述

二十七、代码块

我们的程序是由一条一条语句构成的
在JS中可以使用 { } 来为语句进行分组,它们要么都执行，要么都不执行。
注：JS中的代码块,只具有分组的的作用，没有其他的用途

二十八、if语句（一）

在这里插入图片描述
通过流程控制语句可以控制程序执行流程，使程序根据一定条件执行。

条件判断语句：

        if(true)
            alert("ang");

if语句只能控制紧随其后的那个语句，如果希望if语句可以控制多个语句可以把它们放到代码块中。
注：在开发中尽量写上代码块。

        var a = 15;
        if(a > 10 && a <= 20){
            alert("a大于10且小于等于20");
        }

二十九、if语句（二）

在这里插入图片描述
注：该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句。

        var a = 70;
        if(a < 18){
            alert("未成年");
        }else if(a < 30){
            alert("青年");
        }else if(a < 60){
            alert("中年");
        }else{
            alert("老年");
        }

三十、练习

        var a = 40;
        var b = typeof a;
        alert(b);
        if(b == "number"){
            alert("输入的是数字");
        }else if(b == "string"){
            alert("输入的是字符串");
        }else if(b == "boolean"){
            alert("输入的是布尔值");
        }else if(b == "object"){
            alert("输入的是空对象");
        }else if(b == "undefined"){
            alert("输入的是undefined");
        }else{
            alert("输入的是其他");
        }