1.输入输出、数据类型与转换
大约 5 分钟学习笔记前端基础JavaScript
一、 JS 三种引用方式
1. 行内式
<input type="button" value="唐伯虎" onclick="alert('点秋香')">
注意:
- HTML 推荐使用 双引号,JS 推荐使用 单引号
2. 内嵌式
<script>
alert("我爱学习");
</script>
![](https://img.pupper.cn/img/20220726105406.png)
3. 外联式
HTML
<script src="./my.js"></script>
JS
alert("这是一个外联样式");
![](https://img.pupper.cn/img/20220726105427.png)
二、 JS 输入 输出语句
方法 | 说明 | 代码 | |
---|---|---|---|
alert(msg) | 浏览器弹出警告框 | ![]() | |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 | |
prompt(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 | ![]() |
<script>
prompt('请输入年龄。')
alert('这是一个错误。')
console.log('程序员')
</script>
三、 变量
1. 申明变量
使用
var
申明变量
// 1. 申明一个名为 age 的变量
// 2. 为 age 变量赋值为 18
// 3. 将 age 变量 输出
var age;
age = 18;
alert(age);
变量初始化:
var age = 18;
![](https://img.pupper.cn/img/20220726105535.png)
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<script>
var name = prompt("请输入姓名。");
alert(name);
</script>
</head>
<body></body>
</html>
![](https://img.pupper.cn/img/202112061141072-20220324163540488.gif)
变量扩展语法
var name = Pupper;
var age = 18;
var address = '杭州';
等价于:
var name = Pupper,
age = 18,
address = '杭州';
注意
- 多个变量同时创建是,变量之间需要用 **, ** 逗号 隔开;
- var 申明 只需要写一个;
申明变量的特殊情况
情况 | 说明 | 结果 |
---|---|---|
var age; console.log(age); | 只申明,不赋值 | undefined |
console(age) ; | 不申明,不赋值,直接使用 | 报错 |
age = 10; console.log(age); | 不申明, 只赋值 | 10 |
2. 变量的命名规范
- 由字母、数字、下划线、美元符号 组成;
- 区分大小写;
- 不能以数字开头;
- 不能是关键字;
- 变量名需要 见名知意;
- 遵循 驼峰法 命名;
四、 数据类型
JS 变量的数据类型 只有在程序运行过程中,根据等号右边的值来确定的
简单数据类型 | 说明 | 默认值 |
---|---|---|
Number | 数字型,包含 整形和浮点型 | 0 |
Boolean | 布尔类型,true 、false 等价于 1 和 0 | false |
String | 字符串类型,字符串都带引号 | "" |
Undefined | 变量没有赋值时,变量 = undefined | undefined |
Null | 变量为空 | null |
1. 数字型
JS 中的数字类型 可以是 整形,也可以是 浮点型
var num1 = 30,
num2 = 3.14;
8 进制:数字前加 0
表示 8 进制
16 进制: 数字前加 0x
表示 16 进制
JS 中的 最大 和 最小 数值:
alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324
三种特殊值:
代码 | 结果 | 含义 |
---|---|---|
alert(Infinity); | Infinity | 无穷大,大于任何数值 |
alert(-Infinity); | -Infinity | 无穷小,小于任何数值 |
alert(NaN); | NaN | 代表一个非数值 |
alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN
isNaN()
判断是否非数字
isNaN()
: 判断是否为 非数字,如果是非数字,返回 true ,如果是 数字,则返回 false
console.log(isNaN("你好")); // true
2. 字符串
用 引号 引起来的都是字符串,字符串嵌套时需要注意区分 内外引号
alert('这是一个字符串\n这里通过"转义字符"实现了换行');
①. 获取字符串长度(length)
var text = "这个字符串有多长";
alert(text.length); // 8
②. 字符串拼接
var text = '这个字符串有多长';
var num = text.length;
alert(text + num)
![](https://img.pupper.cn/img/20220726105750.png)
var text = 2021;
alert("今年是" + text + "年。")
![](https://img.pupper.cn/img/20220726105807.png)
案例 1
var age = prompt("请输入年龄。");
alert("你今年" + age + "岁了。");
![](https://img.pupper.cn/img/202112061745052-20220324163604187.gif)
3. 布尔型
布尔型 只有两个值,true 、flase
true 等价于 1
flase 等价于 0
console.log(1 + true); // 2
4. undefined 和 null
一个申明变量后没有赋值,那么他的默认值为 undefined
undefined 和 字符串相加 为字符串拼接,和数字相加,则判断为 不是数字。
var srt;
console.log(srt + "你好") // undefined你好
console.log(srt + 1) // NaN
null 和 字符串相加 为字符串拼接,和数字相加,结果为 数字。
var srt = null;
console.log(srt + "你好"); // null你好
console.log(srt + 1); // 1
5. 检测数据类型(typeof)
var srt1;
var srt2 = null;
var srt3 = 1;
var srt4 = "1";
console.log(typeof srt1); // undefined
console.log(typeof srt2); // object
console.log(typeof srt3); // number
console.log(typeof srt4); // string
五、 数据类型转换
1. 转换为 字符串
方式 | 说明 | 案例 |
---|---|---|
toString() | 转为字符串 | var num=1; alert(num.toString()); |
String() 强制转换 | 转为字符串 | var num=1; alert(String(num)); |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num=1; alert(num + "我是字符串"); |
2. 转换为 数字型
方式 | 说明 | 案例 |
---|---|---|
parseInt(string) 函数 | 将 string 类型转为整数数值型 | parseInt("78") |
parseFloat(string) 函数 | 将 string 类型转为浮点型 | parseFloat("78.21") |
Number() 强制转换函数 | 将 string 类型转为数值型 | Number("21") |
js 隐式转换( - * / ) | 利用算术运算隐式转为数值型 | '12' . 0 |
var num1 = "12.12";
var num2 = "120px";
console.log(parseInt(num1)); // 12
console.log(parseInt(num2)); // 120
console.log(parseFloat(num1)); // 12.12
console.log(Number(num1)); // 12.12
console.log(num1 - 0); // 12.12
注意
parseInt
和 parseFloat
不仅可以转换 取整,还可以去除 px 单位
案例 2
var age = prompt("请输入出生年份.");
var num = 2021 - age;
alert("你的年龄为:" + num + "岁。");
![](https://img.pupper.cn/img/202112061844247-20220324163614019.gif)
案例 3
var num1 = prompt("请输入第一个值。") - 0 ;
var num2 = prompt("请输入第二个值。.") - 0;
var sum1 = num1 + num2
alert("两个值的和为:" + sum1);
![](https://img.pupper.cn/img/202112061851285-20220324163631963.gif)
3. 转换为 布尔型
方式 | 说明 | 案例 |
---|---|---|
Boolean() 函数 | 其他类型转换为不饿挼 | Boolean("true") |
注
- 代表 空、否定的值 会被转换为 false,如:""、0、NaN、null、undefined
- 其余之都会被转换为 true
console.log(Boolean("")); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(null)); // false
console.log(Boolean("小白")); // true
console.log(Boolean(12)); // true
综合练习
var user_name = prompt("请输入你的姓名。");
var user_age = prompt("请输入你的年龄。");
var user_sex = prompt("请输入你的性别。");
alert(
"你的姓名为:" +
user_name +
"\n你的年龄为:" +
user_age +
"\n你的性别为:" +
user_sex
);