当前位置：首页 > news >正文

0基础学前端---JS【计算机基础、变量、数据类型】

news 来源：原创 2025/5/8 12:24:05

0基础学前端—JS【计算机基础、变量、数据类型】

视频参考：B站Pink老师
本节重点：计算机基础、变量、数据类型

本章目录

0基础学前端---JS【计算机基础、变量、数据类型】
计算机基础导读
- - 目标
  - - 1.1 编程
    - 1.2 计算机语言
    - 1.3 编程语言
    - 1.4 翻译器
    - 1.5 编程语言和标记语言区别
  - 2. 计算机基础
- 1. 初识JavaScript
- - 目标
  - - 1.1 历史（略-可自行搜索）
    - 1.2 JS是什么
    - 1.3 JS的作用
    - 1.4 html/css/js关系
    - 1.5 浏览器执行JS简介
    - 1.6 JS的组成
    - 1.7 JS初体验
    - 1.8 JS注释
- 2. JS输入输出语句
变量
- - 目标
  - 1. 变量
  - - 1.1 什么是变量
    - 1.2 变量在内存中的存储
  - 2. 变量的使用
  - 3. 变量的初始化
  - 案例---变量的使用
  - 4. 变量语法扩展
  - 5. 变量命名规范
  - 案例：课堂练习
  - 6. 小结
数据类型
- - 目标
  - 1. 数据类型简介
  - - 1.1 为什么需要数据类型
    - 1.2 变量的数据类型
    - 1.3 数据类型分类
  - 2. 简单数据类型
  - - 2.1 简单数据类型（基本数据类型）
    - 2.2 数字型Number
    - 2.3 字符串型String
    - 弹出网页警示框
    - 案例：显示年龄
    - 2.4 布尔型Boolean
    - 2.5 Undefined和Null
  - 3. 获取变量数据类型
  - - 3.1 获取检测变量的数据类型
    - 3.2 字面量--->是在源代码中一个固定值的表示法
  - 4. 数据类型转换
  - - 4.1 什么是数据类型转换
    - 4.2 转换为字符串
    - **4.3 转换为数字型（重点）**
    - 案例1：计算年龄
    - 案例2：简单加法器
    - 4.4 转换为布尔型
    - 课后作业

计算机基础导读

目标

能够说出什么是编程语言
能够区分编程语言和标记语言的不同
能够说出常见的数据存储单位及其换算关系
能够说出内存的主要作用及特点

1.1 编程

为解决某个问题而使用某种程序设计语言编写程序代码。
计算机程序：是计算机所执行的一系列指令集合。

1.2 计算机语言

包含机器语言、汇编语言、高级语言

1.3 编程语言

编程语言=汇编语言+高级语言
有固定格式和词汇来控制计算机的一系列指令

1.4 翻译器

可以将编写的源代码转换为机器语言

1.5 编程语言和标记语言区别

编程语言有很强逻辑性和行为能力。（主动）
标记语言（html）不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用于被读取的，是被动的。（被动）

2. 计算机基础

bit < B < KB < MB < GB < TB

1. 初识JavaScript

目标

能够说出JS是什么
能够知道JS的发展历史
能够说出浏览器执行JS的原理
能够说出JS由哪三个部分组成
能够写出JS3个输入输出语句

1.1 历史（略-可自行搜索）

1.2 JS是什么

JS是一种运行在客户端的脚本语言
脚本语言：无需编译，运行过程中由JS解释器逐行来进行解释并执行
现在也可以基于Node.js技术进行服务器端编程
JavaScript = JS

1.3 JS的作用

表单动态校验（密码强度检测）【JS最初目的】
网页特效
服务端开发（Node.js）
桌面程序（Electron）
App(Cordova)
控制硬件—物联网（Ruff）
游戏开发（cocos2d-js）

1.4 html/css/js关系

html、css描述类语言
js编程类语言

1.5 浏览器执行JS简介

浏览器分为2个部分：渲染引擎、JS引擎

渲染引擎：用来解析html和css,俗称内核。 e:chrome浏览器的blink,老版本的webkit。
js引擎：也成为JS解释器，读JS代码。 e: chrome浏览器的V8.
浏览器本身并不会执行JS代码，而是通过内置JS引擎来执行JS代码。
JS引擎执行代码是逐行解释每一句源码（转换为机器语言），然后计算机去执行。
所以JS语言归为脚本语言，会逐行解释执行。

1.6 JS的组成

JS包含：JS语法（ECMAScript）、页面文档对象模型（DOM）、浏览器对象模型（BOM）

1.7 JS初体验

JS有3种书写位置，分别为行内、内嵌和外部
（1）行内式JS

<input type='button' value='点我试试' onclick='alert('Hello World')'/>

可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：click
注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
可读性差
引号易错
特殊情况下使用

（2）内嵌式JS

<script>
	alert('Hello World');
</script>

可以将多行JS代码写到<script>标签中
内嵌JS是学习时常用的方式

（3）外部JS文件

<script src='my.js'>不要写代码</script>

利用html页面代码结构化，把大段JS代码独立到html页面之外，既美观，也方便文件级别的复用。
引用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况

参考代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 2.内嵌式的js -->
    <script>
        // alert('沙漠骆驼');
    </script>
    <!-- 外部js script 双标签 -->
    <script src="my.js"></script>
</head>

<body>
    <!-- 1.行内式的js 直接写到元素内部-->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>

</html>

my.js

alert('如果我是DJ，你还爱我吗？')

结果展示：
在这里插入图片描述

1.8 JS注释

单行： // 或 ctrl+/
多行：/**/ 或 ctrl+shift+/

2. JS输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //这是一个输入框
        prompt('请输入你的年龄');
        //alert弹出警示框 输出的 展示给用户的
        alert('计算的结果是');
        //console控制台输出 给程序员测试用的
        console.log('我是程序员能看到的');
    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述

变量

目标

能够说出变量的主要作用
能够写出变量的初始化
能够说出变量的命名规范
能够画出变量是如何在内存中存储的
能够写出交换变量案例

1. 变量

1.1 什么是变量

白话理解：变量就是一个装东西的盒子。
通俗理解：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。

1.2 变量在内存中的存储

本质：变量是程序在内存中申请的一块用来存放数据的空间
e: 类似于酒店房间，一个房间可以看作一个变量
在这里插入图片描述

2. 变量的使用

使用分为两步：1.声明变量 2.赋值

3. 变量的初始化

        var myname = 'pink老师';//声明一个变量并赋值，称为变量的初始化

知识点2、3的参考代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.声明了一个age的变量
        var age;
        // 2.赋值 把值存入变量中
        age = 18;// 给age这个变量赋值为18
        // 3.输出结果
        console.log(age);
        //4.变量的初始化
        var myname = 'pink老师';
        console.log(myname);
    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述

案例—变量的使用

案例1:查看变量内容
参考代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var myname = '旗木卡卡西';
        var address = '火影村';
        var age = 30;
        var email = 'kakaxi@itcast.cn';
        var gz = 2000;
        console.log(myname);
        console.log(address);
        console.log(age);
        console.log(email);
        console.log(gz);
    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述

案例2:弹出用户名
参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.用户输入姓名 存储到一个myname的变量里面
        var myname = prompt('请输入您的姓名');
        // 2.输出用户名
        alert(myname);
    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述

4. 变量语法扩展

1）更新变量
一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

  var age=18;
      age=81;//最后的结果就是81因为18被覆盖掉了

2）同时声明多个变量
同时声明多个变量时，只需要写一个var,多个变量名之间使用英文逗号隔开

var age=18;address=‘火影村’，gz=2000;

3）声明变量特殊情况

情况	说明	结果
var age;console.log(age);	只声明，不赋值	undefined
console.log(age);	不声明，不赋值	报错
age=10;console.log(age);	只赋值，不声明	10

参考代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.更新变量
        var myname = 'pink老师';
        console.log(myname);
        myname = '迪丽热巴';
        console.log(myname);
        // 2.声明多个变量
        // var age = 180;
        // var address = '火影村';
        // var gz = 2000;
        var age = 18,
            address = '火影村',
            gz = 2000;
        // 3.声明变量的特殊情况
        // 3.1只声明不赋值 结果是? 程序也不知道里面存的是什么 所以结果是undefined 未定义的
        var sex;
        console.log(sex);//undefined
        //3.2 不声明不赋值,直接使用某个变量会报错
        // console.log(tel);
        //3.3不声明直接赋值使用
        qq = 110;
        console.log(qq);
    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述

5. 变量命名规范

由字母（A-Z，a-z）、数字（0~9）、下划线（_）、美元符号（$）组成，如：usrAge,num01,_name
严格区分大小写。app和App是两个变量
不能以数字开头。18age是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。例如：age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：myFirstName

案例：课堂练习

要求：交换两个变量的值（实现思路：使用一个临时变量temp来做中间存储）
参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1.apple1给temp(临时变量)
        //2.apple2给apple1
        //3.从temp中的值给apple2
        var apple1 = '青苹果', apple2 = '红苹果', temp;
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1);
        console.log(apple2);
    </script>
</head>

<body>

</body>

</html>

结果展示：这个代码是基础代码就不详细解释了
在这里插入图片描述

6. 小结

为什么需要变量？---->因为有数据需要保存
变量是什么？—>是一个存放数据的容器
变量本质是什么？—>内存中的一块空间，用来存储数据
变量怎么使用的？—>声明之后赋值，本质是申请内存空间
什么是变量的初始化？—>声明变量并赋值
变量命名规则有哪些？—>看5
交换两个变量值的思路？—>看案例

数据类型

目标

能够说出5种简单数据类型
能够使用typeof获取变量的类型
能够说出1~2种转换为数值型的方法
能够说出1~2种转换为字符型的方法
能够说出什么是隐式转换

1. 数据类型简介

1.1 为什么需要数据类型

为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，定义了不同的数据类型。

1.2 变量的数据类型

JS是一种弱类型或者说是动态语言，这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

  var age=10;//这是一个数字型
  var areYouok='是的'//这是一个字符串

在代码运行时，变量的数据类型是由JS引擎根据等号右边变量值的数据类型来判断的，运行完毕后，变量就确定了数据类型。
JS拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x=6;//x为数字
var x='Bill';//x为字符串

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //int num=10;java
        // var num;//这里的num不确定属于那种数据类型的
        var num = 10;//num属于数字型
        //js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
        var str = 'pink';//str字符串型
        //js是动态语言 变量的数据类型是可以变化的
        var x = 10;//x是数字型
        x = 'pink';//x字符串型

    </script>
</head>

<body>

</body>

</html>

1.3 数据类型分类

JS把数据类型分为两类：

简单数据类型（Number、String、Boolean、Undefined、Null）
复杂数据类型（Object）

2. 简单数据类型

2.1 简单数据类型（基本数据类型）

简单数据类型	说明	默认值
Number	数字型（包含整数型和浮点型）	0
Boolean	布尔型（true、false）	false
String	字符串类型，要带引号	" "
Undefined	var a;声明但未赋值，此时a=undefined	undefined
Null	var a=null;声明变量a为空值	null

2.2 数字型Number

  var age=21; //整数
  var Age=21.37447; //小数

1）数字型进制
0o—>8进制 0x—>16进制
2) 数字型范围
MAX_VALUE(≈1.79)~MIN_VALUE（≈5e-324）
3) 数字型3个特殊值

特殊值	说明
Infinity	无穷
-Infinity	负无穷
NaN	非数值
参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = 10;
        var PI = 3.14;
        //1.八进制 0~7 我们程序里面数字前面加0o 表示八进制
        var num1 = 0o10;
        console.log(num1);
        var num2 = 0o12;
        console.log(num2);
        //2.十六进制 0-9 A-F数字前面加0x 表示16进制
        var num3 = 0x9;
        console.log(num3);
        var num4 = 0xa;
        console.log(num4);
        //3.数字型的最大/小值
        console.log(Number.MAX_VALUE);
        console.log(Number.MIN_VALUE);
        //4.无穷大
        console.log(Number.MAX_VALUE * 2);//Infinity
        //5.无穷小
        console.log(-Number.MAX_VALUE * 2);//-Infinity
        //6.非数值
        console.log('pink老师' - 100);

    </script>
</head>

<body>

</body>

</html>

结果展示：

4） isNaN()
用来判断一个变量是否为非数字的类型，true/false
isNaN(x):x是数字，返回false;x不是数字，返回true
参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //isNaN()这个方法用来判断非数字 并且返回一个值 是数字返回false 不是数字返回true
        console.log(isNaN(12));//false
        console.log(isNaN('pink'));//true


    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述

2.3 字符串型String

字符串引号嵌套（外双内单，外单内双）
字符串转义符

转义符	解释说明
\n	换行符，n=newline
\	斜杠
\ ’	单引号
\ "	双引号
\t	tab缩进
\b	空格 b=blank

参考代码：展示了\n的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //'pink' 'pink老师' '12' 'true'
        // var str = "我是一个'高富帅'的程序员";
        //字符串转义字符 都是用\开头 但是这些转义字符要写到引号里面
        var str = '我是一个"高富帅"的\n程序员';
        console.log(str);

    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述

弹出网页警示框

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert('酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。\n我审视四周，这里，是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声："收破烂啦～"')
    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述
3) 字符串长度
通过字符串length属性获取整个字符串的长度

 var str='my name is andy';
  console.log(str.length);

字符串拼接

使用+进行拼接字符串+任何类型=拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
+号总结：数字相加，字符相连

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1.检测获取字符串的长度length
        var str = 'my name is andy';
        console.log(str.length);//15
        //2.字符串拼接 + 只要有字符串和其他类型拼接 最后都是字符串
        console.log('沙漠' + '骆驼');
        console.log('pink老师' + 18);//pink老师18
        console.log('pink' + true);
        console.log(12 + 12);
        console.log('12' + 12);



    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述
5）字符串拼接加强

我们经常会将字符串和变量来拼接，因为变量可以很方便的修改里面的值
变量是不能加引号的，加引号会变成字符串
如果变量两侧都有字符串拼接，口诀：引引加加，删掉数字，变量写中间

e: console.log('pink老师'+age+'岁')

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log('pink老师' + 18);
        console.log('pink老师' + 18 + '岁');
        var age = 19;
        //变量不要写到字符串里 是通过和字符串相连的方式实现的
        console.log('pink老师' + age + '岁');
        //变量和字符串相连的口诀：引引加加'++'
        console.log('pink老师' + age + '岁');

    </script>
</head>

<body>

</body>

</html>

结果展示：（可以轻松修改age）
在这里插入图片描述

案例：显示年龄

需求：弹出一个输入框，需要输入年龄，之后弹出一个警示框显示‘您今年XX岁了’。
参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var age = prompt('请输入您的年龄');
        // alert('您今年' + age + '岁');
        //也可以分开写
        var str = '您今年' + age + '岁';
        alert(str);
    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述

2.4 布尔型Boolean

布尔类型有两个值：true和false，其中true表示真（1），false表示假（0）

console.log(true+1);//2
console.log(false+1);//1`在这里插入代码片`

2.5 Undefined和Null

一个声明后没有被赋值的变量会有一个默认值undefined（如果相连或相加，注意结果）
undefined+数字=NaN
一个声明变量给null值，里面存的值为空
null+数字=数字
2.4和2.5的参考代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var flag = true;//flag布尔型
        var flag1 = false;//flag布尔型
        console.log(flag + 1);//true参与加法运算当1来看
        console.log(flag1 + 1);//false 参与加法运算当0来看
        //如果一个变量声明未赋值 就是undefined 未定义数据类型
        var str;
        console.log(str);
        var variable = undefined;
        console.log(variable + 'pink');
        console.log(variable + 1);// undefined和数字相加 最后结果是NaN
        //null 空值
        var space = null;
        console.log(space + 'pink');
        console.log(space + 1);//空值+1=1




    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述

3. 获取变量数据类型

3.1 获取检测变量的数据类型

typeof可以用来获取检测变量的数据类型，也可以通过控制台输出颜色判断
参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = 10;
        console.log(typeof num);//number
        var str = 'pink';
        console.log(typeof str);//string
        var flag = true;
        console.log(typeof flag);//boolean
        var vari = undefined;
        console.log(typeof vari);//undefined
        var time = null;
        console.log(typeof time);//object
        //prompt取过来的值是字符型的
        var age = prompt('请输入你的年龄');
        console.log(age);
        console.log(typeof age);

    </script>
</head>

<body>

</body>

</html>

结果展示：
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/41a045dcfd614787a2f2e2d5b39747b2.png
注意：prompt取到的结果类型为字符型。

3.2 字面量—>是在源代码中一个固定值的表示法

通俗来说，就是字面量表示如何表达这个值，就是写在代码里的固定值

数字字面量：8，9，10
字符串字面量：‘黑马程序员’，’大前端‘
布尔字面量：true,false

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字面量</title>
    <script>
        console.log(18);
        console.log('18');
        console.log(true);
        console.log(undefined);
        console.log(null);
    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述

4. 数据类型转换

4.1 什么是数据类型转换

使用表单、prompt获取过来的数据默认为字符串类型，此时不能直接简单相加，需要转变量的数据类型，即把一种数据类型的变量转换为另一种数据类型。
我们通常会实现3中方式的转换：

转换为字符串类型
转换为数字型
转换为布尔型

4.2 转换为字符串

方式	说明	案例
toString()	转成字符串	var num=1;alert(num.toString());
String()强制转换	转成字符串	var num=1;alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1;alert(num+‘我是字符串’);

toString() 和String()的使用方式不一样
3种转换方式，我们常用第三种方法，已称为隐式转换

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转换为字符型</title>
    <script>
        //1.把数字型换为字符串型 变量.toString()
        var num = 10;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
        //2. String(变量)
        console.log(String(num));
        //3.利用拼接+字符串的方法实现转换效果 隐式转换
        console.log(num + '');

    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述

4.3 转换为数字型（重点）

方式	说明	案例
parseInt(string)函数	将string类型转成整数数值型	parseInt(‘78’);
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat(‘78.21’);
Number()强制转换函数	将string类型转成数值型	Number(‘12’);
js隐式转换（-*/）	利用算术运算隐式转换为数值型	’12‘-0

注意parseInt和parseFloat单词的大小写，2个为重点
隐式转换是我们再进行算术运算的时候，js自动转换了数据类型

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var age = prompt('请输入你的年龄');
        //1.parseInt(变量) 可以把字符型转换为数字型 得到的是整数
        console.log(parseInt(age));
        console.log(parseInt('3.14'));//3 取整
        console.log(parseInt('3.94'));//3 取整
        console.log(parseInt('120px'));//120 会去掉px单位
        console.log(parseInt('rem120px'));//NaN 尝试从字符串开头解析数字，但字符串以字母 "r" 开头，无法转换为有效数字，因此返回 NaN
        //2.parseFloat(变量) 可以把字符型转换为数字型 得到的是小数 浮点数
        console.log(parseFloat('3.14'));//3.14
        console.log(parseFloat('120px'));//120 会去掉px单位
        console.log(parseFloat('rem120px'));//NaN
        //3.利用number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));
        //4.利用了算术运算- * / 隐式转换
        console.log('12' - 0);
        console.log('123' - '120');
        console.log('123' * 1);



    </script>
</head>

<body>

</body>

</html>

结果展示：
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/b5d0d6808caa4d66924cd3a352c480be.png

案例1：计算年龄

要求在页面中弹出一个输入框，我们输入年份后，能计算出我们的年龄。
参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>年龄计算</title>
    <script>
        var birth = prompt('请输入您的出生年份');
        // console.log(typeof birth);
        var age = 2025 - birth;//birth取过来是字符串型 但这里用的是减法 使用了隐式转换
        alert('您的年龄为' + age + '岁');
    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述

案例2：简单加法器

计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出2个输入值相加的结果。
参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单加法器案例</title>
    <script>
        var num1 = prompt('请输入第一个数字');
        var num2 = prompt('请输入第二个数字');
        var result = parseFloat(num1) + parseFloat(num2);
        alert('结果为' + result);
    </script>
</head>

<body>

</body>

</html>

参考结果：
在这里插入图片描述

4.4 转换为布尔型

方式	说明	案例
Boolean()函数	其他类型转成为布尔值	Boolean(‘true’);

代表空、否定的之会被转换为false，如’ '、0、NaN、null、undefined
其余值都被转换为true

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log(Boolean(''));//false
        console.log(Boolean(0));//false
        console.log(Boolean(NaN));//false
        console.log(Boolean(null));//false
        console.log(Boolean(undefined));//false
        console.log(Boolean('123'));
        console.log(Boolean('你好吗'));
        console.log(Boolean(123));


    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述
JS为解释行语言，边解释边运行；编译语言Java,编译完再运行

课后作业

要求：依次询问并获取用户的姓名、年龄、性别并打印信息。
参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课后作业</title>
    <script>
        var name = prompt('请输入您的姓名');
        var age = prompt('请输入您的年龄');
        var sex = prompt('请输入您的性别');
        alert('您的姓名是：' + name + '\n' + '您的年龄是：' + age + '\n' + '您的性别是：' + sex);
    </script>
</head>

<body>

</body>

</html>

结果展示：
在这里插入图片描述
—————————————————————————————————————————
下面即将继续更新JS的相关内容，有什么问题都可以在评论区进行讨论哦！