提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript 01 javaScript基础认知/数据类型/运算符

JavaScript基础 数据类型 01 运算符 认知
2023-09-27 14:26:50 时间

JavaScript 01

今日目标：javaScript基础认知、数据类型、变量&常量、运算符&表达式

一、javaScript基础认知

1.javaScript概念

负责网页的动效与交互，是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

作用：

  1. 网页特效 (监听用户的一些行为让网页作出对应的反馈)
  2. 表单验证 (针对表单数据的合法性进行判断)
  3. 数据交互 (获取后台的数据,渲染到前端)

组成结构：

在这里插入图片描述

DOM操作文档，对页面元素进行控制 BOM浏览器对象模型

2.javaScript书写位置

对比CSS
在这里插入图片描述

三种引入方式：

1.行内js 代码写在标签内部 vue阶段使用较多

<!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>

在这里插入图片描述

2.内部js用script标签中（不带src属性），写在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>
</head>
<body>
<script>
    alert('你好，欢迎看我的博客~')
</script>
</body>
</html>

在这里插入图片描述

3.外部js 通过script src引入（注意：引用外部的script中不能（在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>
</head>
<body>
    <!-- 外联 -->
    <script src="./my.js">
    	//下面这条命令不会被执行
       alert('你好，欢迎看我的博客~')
	</script>
</body>
</html>

在这里插入图片描述

3.js注释

单行 // 快捷键：ctrl+/ 块注释： / * */ 快捷键：alt+shift+a

注释的作用：方便程序员查看代码和理解代码，注释之后的内容不会被浏览器解析

4.javaScript结束符

符号是英文的； 代表语句的结束。

js引擎在执行语句代码时，默认是可以在一行显示，但是要以分号分隔。不打分号，我们要换行，js引擎解析时候会默认为;号

实际开发中可以加分号 也可以不加，需要按照团队进行判断和添加。

5.输入和输出语法

什么是语法：人和计算机打交道的规则约定

输出语句

语法1： 可以向body内输入内容 document.write（‘hello js’）

语法2：页面弹出提示框 alert(‘你必拿下’)

语法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>Document</title>
</head>
<body>
    <script>
        document.write('hello js');
        alert('你必拿下');
        console.log('控制台才可以看到');
    </script>
</body>
</html>

代码的执行先alert 才看的到页面中显示的hello js

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

语法1：在页面弹出对话框，提示用户输入内容 promet(‘在这里输入内容’)

<!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>
    <script>
        prompt('我们必将成功对不对！');
    </script>
</body>
</html>

在这里插入图片描述

二、数据类型

1.数据类型概念

因为js不能识别所有的数据类型,任何变成语言编译器不同。都有属于自己的数据类型，编译器会进行分类，分类之后的数据成为数据类型。

分类原因：更加充分和高效的利用内存

数据细分：

1.数字型 number类型 整数，小数，分数，正数。用于数据计算

2.字符串类型 string类型 ’‘ ‘’ ‘’ 包裹起来的字符串类型，引号可以是嵌套的

3.布尔类型boolean 只有true 与false(用于判断)

4.undefined 未定义 固定的值 表示没有值，值不存在

5.null空值

<!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>


    <script>
        //1. 数字型  number类型   整数，小数，分数，正数
        console.log(777);
        // 用于数据计算

        //2. 字符串类型 string类型 ’‘ ''  '' 包裹起来的字符串类型
        // 引号可以是嵌套的
        console.log("今天必须到23.30才'回去");
        console.log("111");

        //3. 布尔类型boolean  只有true 与false(用于判断)
        console.log(true);

        // 4.undefined 未定义 固定的值 表示没有值，值不存在
        console.log(undefined);

        //5.null空值
        console.log(null);

    </script>
</body>

</html>

控制台console中查看
在这里插入图片描述

2.通过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>
</head>

<body>
    <script>
        //1. 数字型  number类型   整数，小数，分数，正数
        console.log(typeof 777);
        // 用于数据计算


        //2. 字符串类型 string类型 ’‘ ''  '' 包裹起来的字符串类型
        // 引号可以是嵌套的
        console.log( typeof "今天必须到23.30才'回去");
        console.log( typeof "111");


        //3. 布尔类型boolean  只有true 与false(用于判断)

        // 使用 typeof 关键字检测数据类型
        // 用法1：
        console.log(typeof true);


        // 4.undefined 未定义 固定的值 表示没有值，值不存在
        console.log(typeof undefined);


        //5.null空值
        console.log(typeof null); 

    </script>
</body>

</html>

就是在输出前面加上typeof 即可查看数据的类型

在这里插入图片描述

三、常量&变量

1.变量是什么？

变量是计算机用来存储数据的容器

2.变量的基本使用

1.变量的使用：

先声明变量，后就可以对变量进行赋值操作

  • 声明变量：let 变量名

    两部分构成：声明关键字、变量名（标识）

  • 变量的赋值； 变量名=值 （值给变量）

变量的优化写法： let 变量名=值

2.变量的连写

let age = 18, sex = ‘女’, name = ‘坤坤’

中间用空格隔开即可，

推荐写法：

//一行定义一个变量

let age = 18

let sex = ‘女’

let name = ‘坤坤’

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>

</head>

<body>

    <script>

​        // 使用变量保存数据

​        // let name = prompt('请输入你的姓名')

​        // document.write(name)

​        // console.log(name);

​        while (true) {

​            // prompt('输入你的姓名')前加上+就是将输入的值转化为了数值型

​            let uname = prompt('请输入我们的暗号')

​            // 两个==代表输入内容相等的时候  ===代表全等的时候

​            if (uname === 123) {

​                document.write(`${uname}，暗号正确！`)

​                break

​            } else { 

​                alert('请输入正确的暗号！')

​            }

​        }

​    </script>

</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>

</head>

<body>

    <script>

// 作用原理:使用另外一个变量接受数据作为临时变量,之后将临时值赋值给需要变化的变量

let num1 = 10;

let num2 =20;

let temp =num1;

 num1 = num2;

 num2 = temp;

document.write(num1,num2)

​    </script>

</body>

</html>

常量是什么？

就是不可以变化，不可以被修改的量。在javaScript中用const代表常量。

举个第二天的例子

4.变量的命名和规范

规则：

  1. 不能用关键字(关键字：有特殊含义的字符)
    1.1 JavaScript 内置的一些英语词汇。例如：let、var、if、for等
  2. 只能用下划线、字母、数字、$组成，且数字不能开头
  3. 字母严格区分大小写，如 Age 和 age 是不同的变量
  4. 命名需要有语义化
  5. 推荐使用小驼峰命名法（连写单词，第二单词首字母大写）
拓展let 与 var 的区别（了解）

1.var可以先使用，再声明。let先使用会报错

2.var可以重复定义的。let不可重复重复变量

3.var没有块级作用域，let定义的变量有作用域

3.常量

常量概念：不能变化的值，是一个固定值

与变量的区别：常量的值无法改变，强制修改会报错
在这里插入图片描述
但是如果在for里面它是一个全新的块级作用域，const不会报错（javaSceipt 05 有这个例子）
在这里插入图片描述

<!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>

    <script>

​        // 变量可以重复修改值,常量不可变化

​        const c =3.1415926

​        // 最终导出的还是上面的值

​        c = 10

​        console.log(c)

​    </script>

</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>
</head>
<body>
    <script>
        let a = 10;
        // 数字相加
        console.log(a + 10);


    </script>
</body>
</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>
</head>

<body>
    <script>
        let name = prompt('请输入姓名')
        let age = prompt('请输入年龄')
        //书写格式：`${变量名}` (注意加上反引号``)
        document.write(`大家好,我叫${name},今年${age}岁了`)
    </script>
</body>

</html>
用户订单案例

注意：table是写在script标签里面，table标签外需要加上反引号``

<!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>

    <style>

​        table {

​            width: 500px;

​            margin: 100px auto;

​            /* 表格合并,表格重复的边框显示单个 */

​            border-collapse: collapse;

​            text-align: center;

​        }

​        table,

​        tr,

​        th,

​        td {

​            border: 1px solid #000;

​        }

​    </style>

</head>

<body>

    <script>

​        let price = prompt('请输入商品的价格:');

​        let amount = prompt('请输入商品的数量:');

​        let address = prompt('请输入所在地址');

​        let total = price * amount;

​        console.log(price.amount, address, total);

​        // document.write写多项数据使用反引号

​        document.write(`<table>

​        <caption>

​            <h2>商品订单</h2>

​        </caption>

​        <tr>

​            <th>商品名称</th>

​            <th>商品价格</th>

​            <th>商品数量</th>

​            <th>总价</th>

​            <th>收获地址</th>

​        </tr>

​        <tr>

​            <td>Macboobair M1</td>

​            <td>${price}</td>

​            <td>${amount}</td>

​            <td>${total}</td>

​            <td>${address}</td>

​        </tr>

​    </table> ` )

​    </script>

</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>
</head>
<body>
    <script>
        //赋值运算符 作用：快速的进行赋值操作 +=  -=  *=  /=  %=
        let number =10;
        number*=5//a= a*5
        console.log(number);
    </script>
</body>
</html>

3.一元运算符

概念：一个数参与运算，以此类推2个数参与运算就是二元，往后同理

作用：

1.自增 符号++

2.自减 符号–

隐藏操作 ++可前置也可以后置，单独使用没有任何区别

举个栗子

<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>

    <script>

​        let number = 1;

​        // number = number + 1;

​        // number+=1

​        // 一元写法

​        number++

​        console.log(number);

​        // 隐藏操作 ++可前置也可以后置，单独使用没有任何区别

​        // 前置先自增/自减后输出

​        let age = 10;

​        console.log(++age+1);//12

​         // 后置 先输出再自增/自减

​        // console.log(age+++1);//11

​        // console.log(age);//11

​    </script>

</body>

</html>
4.比较运算符（> < >= <= != !==）

使用场景：比较两个数据大小是否相等
返回结构：都是布尔型数据只有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>
</head>
<body>
    <script>
        // 使用场景：比较两个数据大小是否相等
        // 返回结构：都是布尔型数据只有true与false
        console.log( 1 > 2);//false
        console.log(150>= 100);//true

        // 一个等号是赋值
        // console.log(150 ='150');//报错
        // 两个等号是比较值
        console.log(150== '150' );//true
        // 三个等号是全等,看值和类型
        console.log(1 ==='1');//false


        //  !=比较的是值        !==比较的是值和类型
        console.log(12!==13);//true
        console.log(12!='12');//false
        console.log(12!=='12');//true

        // 拓展面试题:字符串比较的是ASCLL码
        // 小写的a为97大写的A为65,a-z递增

        // null 和 undefined的值相等，类型不相等
        console.log(null == undefined);//true
        console.log(null === undefined);//false


    </script>
</body>
</html>
5.逻辑运算符

使用场景：处理多重条件判断的时候

返回值：布尔类型 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>`

`</head>`

`<body>`

    <script>

​        `// 逻辑与&&      一假则假（全部满足）`

​        `console.log(true && false);//false`

​        `console.log(1 !='1' && 2 ==='2');//false`

​        `// 逻辑或||     一真则真（满足一个就可以）`

​        `console.log(false || true);//true`

​        `console.log('a' ==='a' || 2>5);//true`

​        `// 逻辑非！ 取反`

​        `console.log(!false);//true`

​    `</script>`

`</body>`

`</html>`

相关文章