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中的值给apple2var 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 不是数字返回trueconsole.log(isNaN(12));//falseconsole.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.检测获取字符串的长度lengthvar str = 'my name is andy';console.log(str.length);//15//2.字符串拼接 + 只要有字符串和其他类型拼接 最后都是字符串console.log('沙漠' + '骆驼');console.log('pink老师' + 18);//pink老师18console.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);//numbervar str = 'pink';console.log(typeof str);//stringvar flag = true;console.log(typeof flag);//booleanvar vari = undefined;console.log(typeof vari);//undefinedvar time = null;console.log(typeof time);//object//prompt取过来的值是字符型的var age = prompt('请输入你的年龄');console.log(age);console.log(typeof age);</script>
</head><body></body></html>
结果展示：
注意：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.14console.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>
结果展示：
案例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(''));//falseconsole.log(Boolean(0));//falseconsole.log(Boolean(NaN));//falseconsole.log(Boolean(null));//falseconsole.log(Boolean(undefined));//falseconsole.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的相关内容，有什么问题都可以在评论区进行讨论哦！
