JS基础第二天
一、变量
1.变量是什么？
- 变量是计算机存储数据的“容器”，类比与一个盒子
- 注意：变量不是数据的本身，是存放数据的容器
2.变量的基本使用
-
声明变量
想要使用变量，首先要创建变量
-
语法
let 变量名=变量值（两部分：let为声明变量 let为固定的 不能变；变量名）
-
例子：let age=18; (创建变量 赋值)
document.write(age); （输出变量值）
声明变量的同时也可以赋值
-
变量更新
//变量更新 输出的为最后一个age1=19 let age1='18'; age1='19'; document.write(age1)//输出的结果为19注意：let不允许多次声明同一个变量
-
多个变量书写
//多个变量书写 用逗号隔开 输出写法用空格和+符号实现 let age2,name2,foods2; console.log(age2 + name2 + foods2) -
<!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;//创建变量名 name='xxx';//给变量赋值 console.log(name);//输出变量 注意输出的变量名无须加'' 不然不生效 无效果 let age;//创建变量名 age='26'//给变量赋值 console.log(age);//输出变量 let height;//创建变量名 height='180';//给变量赋值 console.log(height);//输出变量 let weight;//创建变量名 weight='120';//给变量赋值 console.log(weight);//输出变量 let foods='苹果';//声明变量的同时也可以赋值 //变量更新 输出的为最后一个age1=19 let age1='18'; age1='19'; //多个变量书写 用逗号隔开 输出写法用空格和+符号实现 let age2,name2,foods2; console.log(age2 + name2 + foods2) </script> </body> </html> -
小结
8.案例（交换变量值）
<!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',num2='20',temp//先设置三个变量值
temp=num1;//先让一个空变量等于num1
num1=num2;//再让num1等于num2
num2=temp;//再让num2等于已经赋值的temp变量
//注意顺序不能调换temp=num1 不然没有效果
console.log(num1);
console.log(num2);
</script>
</body>
</html>
二、变量本质
1.变量本质是什么
- 是程序在内存中申请的一块用来存放数据的小空间
三、变量命名规则与规范
1.规则
- 不能用关键字，有特殊含义的字符，js内置的一些英语词汇，例如：let、var、if、for等
- 只能用下划线、字母、数字、$组成，且数字不能开头
- 字母严格区分大小写，如 Age 和 age 是不同的变量
2.规范
- 起名要有意义
- 遵守小驼峰命名法 （推荐写法：第一个单词首字母小写，后面每个单词首字母大写。例：userName）
<!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 myName
let myAge
let mySex
myName=prompt('请输入您的姓名')
myAge=prompt('请输入您的年龄')
mySex=prompt('请输入您的性别')
document.write(myName + myAge + mySex)
</script>
</body>
</html>
3.小结
四、JS基本数据类型
1.数据类型
- 基本数据类型
- 引用数据类型
2.基本数据类型
- number 数字型
- string 字符串型
- Boolean 布尔型
- undefined 未定义型
- null 空类型
3.数字型（number）
1.JS中的正数、负数、小数等统一称为数字类型
2.注意：
- JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认
- Java是强数据类型 例如 int a = 3 必须是整数
- 如 let age=18 数字型 不能有 ' ' let age='18' 字符串型
4.字符串型（string）
-
let age='18' 字符串型
-
判断是否为字符串型：看有没有单引号、双引号、反引号包裹的数据，有的话就是字符串型（其中推荐使用单引号书写）
-
注意：
-
无论单引号或是双引号必须成对使用
-
单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
-
必要时可以使用转义符 \，输出单引号或双引号
-
let age='18'//字符型 判断是否为字符型 看有没有单双引号 let name='我是住在"珠江新城"'//单双引号要成对出现 如同时出现单双引号 要遵循（外单内双 或者 外双内单） 不可以自己嵌套自己
-
2.字符串拼接
1.字符串拼接，使用加号“+”，表示两段内容拼接
//字符串拼接 使用加号“+” 表示两段文字拼接
let num1=10;
let num2=20;
let sum=num1 + num2
console.log(num1+ num2)//做加法等于30
let userName='hahah';
let kill='sisisis';
let abc= userName + kill;
console.log(abc)
3.拼接作用
1.之前的拼接
2.现在的拼接（推荐的写法）
注意：
- 用反引号包裹拼接的内容``
- 用${}包裹变量
- 反引号和${}两个是一对的，要配套出现 这种模式称为模板字符串
3.小结
5.布尔类型（boolean）
1.表示肯定或否定在计算机中对应的是布尔类型
2.它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。
6.未定义型（undefined）
1.未定义是比较特殊的类型，只有一个值 undefined。
2.什么情况出现未定义类型？
- 只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。
- 如：let age； console.log(age) 控制台显示undefined
3.工作中的使用场景：
- 我们开发中经常声明一个变量，等待传送过来的数据。
- 如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。
7.空类型（null）
1.null表示值为空
-
如：
let obj=null; console.log(obj);//控制台输出为null
2.null 和 undefined 区别：
- undefined 表示没有赋值
- null 表示赋值了，但是内容为空
3.null 开发中的使用场景：
- 官方解释：把 null 作为尚未创建的对象
- 大白话： 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null
五、控制台输出语句和检测数据类型
1.typeof 检测数据类型标签
2.如
let age=18
console.log(typeof age);//控制台显示number
<!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 age=18;
let userName='张狗蛋'
let isSleep=true;
let height;
let sex=null;
console.log(typeof age);//number数字类型
console.log(typeof userName);//string 字符串类型
console.log(typeof isSleep);//boolean 布尔类型
console.log(typeof height);//undefined 未定义类型
console.log(typeof sex);//object 对象类型（空类型）
</script>
</body>
</html>
六、类型转换
-
JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。
-
坑： 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。
3.此时需要转换变量的数据类型。 通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。
1.隐式转换
1.某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
2.规则：
-
"+"号两边只要有一个是字符串，都会把另外一个转成字符串
-
除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
-
如：
let num1=1； let num2='2' console.log(num1 + num2);//输出为12 不是作加法3.比较常用的隐式转换法：
3.比较常用的隐式转换写法：
-
+号作为正号解析可以转换成Number
-
+号加在要转换并有字符串变量名的前面
let num1=1； let num2='2' let num3=+num2 console.log(num1 + num3);//输出为3 转换后作加法 输出为数字型
4.其他方式
作减法：
let num='123';
let num2='123'-0
5.转换成字符串
let str=123;
let str2=123 + ''
- 因为一个数字型加上一个字符串会转换成字符串
<!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 = 1; 数字类型
// let num2 = '2'; 字符串类型
console.log(num1+num2); // 但输出的结果为12 这是不对的 要的结果是3
// // 隐式转换
//"+"号两边只要有一个是字符串，都会把另外一个转成字符串 输出的结果也为字符串
// // console.log(num1+num2); // 但输出的结果为12 这是不对的
// let num3 = num2 - 0;
// console.log(typeof num3 ); // 输出的结果为2 类型是数字类型
//注意；除了“+”以外的运算符，比如-、*、/等都会把数据转换成数字类型
// 工作中 比较常用的隐式转换写法
let num2 = '2';
let num3 = num2 - 0; // num3 是一个数字类型
console.log(typeof num3);
// 最简洁的写法 //没有为什么 js内部就有这样的技巧 你知道会用即可
let num4 = +num2; // 也是可以的！
console.log(typeof num4);
</script>
</body>
</html>
2.显式转换
1.自己写代码告诉系统该转成什么类型
2.转换成数字型
- number（数据）
- 转成数字类型
- 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
- NaN也是number类型的数据，代表非数字
- parseInt(数据)
- 只保留整数
- parseFloat(数据)
- 可以保留小数
<!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 = 'abbcc';
// // 显示转换 转成 数字类型
let num2 = Number(num1);
// console.log( num2 ); // NaN num2 不是一个数字 字符串里不是数字会转换失败，显示NaN(NOT A Number 不是一个数字)
// 对于 其他类型 转成数字
// 1 成功 数字本身
// 2 失败 NaN (not a number)
// let num1 = 'aaaa';
// let num2 = +num1;//字符串转换成数字 首先字符串里一定是数字 不然转换失败
// console.log(num2);// NaN 因为num1不是数字 是字符串 不是数字会转换失败
let num3 = '9.9';
// parseInt取整数 只保留整数 integer
let num4 = parseInt(9.9); // 常用
console.log(num4);//输出为9
let num5 = parseFloat(num3); // 少
console.log(num5);//输出为9.9
// let num6 = +num3; // 常用
// 可以多层嵌套
console.log(Number(Number(Number(num1))));
</script>
</body>
</html>
3.转换成字符串型
- String(数据)
- 变量.toString(进制)
<!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=123
let num2=String(num1);//显示转换 常用
console.log(typeof num2)
let str= 123 + ''//隐式转换 常用
console.log(typeof str)
let str2=num1.toString();//显示转换 常用
console.log(typeof str2)
</script>
</body>
</html>
小结：
七、document.write补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>16-document.write补充.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 把内容 输出到 body标签中
// document.write("呵呵 我又来啦 😶");
// document.write(`<h1>大标题！ <h1/>`);
// let str =`<button>大大的按钮</button>`;
let str =`<input type="text" > <button>大大的按钮</button>`;
document.write(str)
// 反引号 还可以换行来写代码
// 如果换行了 那么就只能使用 反引号
// 如果不换行 用那种引号都可以
let str2 = `
<div>
<p>
<button>按钮又来啦</button>
</p>
</div>
`;
document.write(str2);
document.write('<h1>11111</h1>');
let name=`<a href="#">哈哈哈</a> `
document.write(name);
/*
1 document.write 可以把一个 标签形式的字符串 重新插入到body标签里
2 写标签字符串的时候
如果要换行 只能使用 反引号
没有换行 用哪种方式都可以
只要是写标签字符串 都可以使用反引号-模版字符串
3 不要直接在 字符串里面 一个一个字母写 标签
要现在 body标签中 使用 快捷键 先生成 标签 然后再复制回去
*/
</script>
</body>
</html>
