js初识
javascript 是一种运行在客户端浏览器的编程语言
JavaScript组成部分
1 ECMAScript 规范 标准
2 web API（通过js来操作浏览器-网页标签）
js引入：
内部
代码：
<body>
<script>
// 可以在这个里面写js代码
alert('你好 js 我呸');
</script>
</body>
外部：
代码：
</style>
</head>
<body>
<script src="./js/弹出窗口.js"> </script>
</body>
</html>
另一个js文件：
代码：
alert('js初体验')
内联：
（不常用）
代码：
</style>
</head>
<body>
<!-- 不常用 编写代码的体验不好，很容易写错， 了解一下即可 -->
<button onclick="alert('js')">点击我 </button>
<button onclick='alert("js")'>点击我 </button>
<div onclick='alert("js")'>我来啦</div>
</body>
</html>
注意引号：1 外面单引里面双引
2 外面双引里面单引
js注释：
单行注释：ctrl+/
多行注释：alt+shift+/
输入输出语法：
一种输入，三种输出
代码：
<script>
// 直接在 body标签中书写内容
// document.write("通过js加进去的内容")
// 推荐 控制台 log
// console.log('控制台打印1');
// 输入
// prompt("请输入你的姓名")
// // 把用户输入的姓名 写在网页中
// document.write("用户的姓名")
// 获取 用户的输入的文字内容
// 可以自定义名称的一个变量(不要加引号) = 用户输入的内容
// 不能加引号 错误 'username' = prompt('请输入你的姓名');
// username = prompt('请输入你的姓名');
// username 就是一个盒子 里面装着 用户输入的姓名
// 输出
// document.write("用户的姓名")
// document.write('username'); // username 能不能加引号
// 获取用户的名称
username = prompt("请输入你的姓名");
// 打印出来 用户的名称
document.write(username);
alert(username);
console.log(username);
</script>
自定义的变量不能加引号
获取多个输入
</style>
</head>
<body>
<script>
// 1 你叫什么名字
username = prompt('你叫什么名字');
// 2 你家住哪里
address = prompt('你家住哪里');
// 3 你喜欢吃什么
foods = prompt('你喜欢吃什么');
// 4 你喜欢自己一个听音乐吗
music = prompt('你喜欢自己一个听音乐吗');
// 5 你喜欢运动
sports = prompt('你喜欢运动');
// 输入一下 到网页中
// console.log(username);
// console.log(address);
// console.log(foods);
// console.log(music);
// console.log(sports);
// 能不能在一行上直接输出 不要换行
// 使用 一个 + 表示连接
console.log(username + address + foods + music + sports);
</script>
变量：
定义：
计算机中用来存储数据的容器，简单理解是一个个的盒子
作用：
用来存放数据。变量指的是容器而不是数据
使用：
1 声明变量（var过时）
语法：
let 变量名
2 变量赋值：
定义一个变量后，在变量名之后跟上一个“=”，然后就是数值。（加上引号）
代码：
</style>
</head>
<body>
<script>
// 变量 我的姓名
let username; // 创建变量
username = 'Stephen'; // 变量赋值
console.log(username); // 变量的使用
// 变量 我的身高
let height; // 创建变量
height = '180'; // 变量赋值
console.log(height); // 变量的使用
// 变量 我的体重
let weight; // 创建变量
weight = '300'; // 变量赋值
console.log(weight); // 变量的使用
</script>
声明变量的同时可以赋值
语法：
let age = '18'
变量更新
语法：
let age = '18'
age = '19'
声明多个变量
语法：
let username1='18', height1='180', weight='130'
变量交换案例：
代码：
</style>
</head>
<body>
<script>
/*
1 有两个变量 实现交换他们的值
num1 = 10 num2 = 20
经过程序的运作
num1 = 20 num2 = 10
*/
// // 1 声明两个变量
// let num1 = 10,
// num2 = 20;
// // 2 错误的演示
// num1 = num2; // num1 和 num2 = 20
// num2 = num1; // num2 = num1
// console.log(num1);
// console.log(num2);
// 1 要创建三个变量
let num1 = 101,
num2 = 202,
temp;
// 2 设置 空的变量 存放num1的值
temp = num1;
// 3 设置num1 等于 num2
num1 = num2;
// 4 设置num2 等于之前num1的值(temp)
num2 = temp;
console.log(num1);
console.log(num2);
// 5 小结
// 思路在于 要多创建一个变量 来存放临时的数据 即可
</script>
变量的规则和规范
let height = '100';
// 如果变量单词比较多
let userName = '姓名'; // 推荐的
let userHeight = '100'; // 推荐的
let shoppingSupermarketShop = '111'; // 小驼峰 首字母小写
let ShoppingSupermarketShop = '111'; // 大驼峰 首字母大写
课堂案例：
代码：
<body>
<script>
let username=prompt('请输入您的名字');
weight=prompt('请输入你的体重')
console.log(username, weight)
</script>
</body>
</html>
数据类型
数字类型
1 数字类型外边一定不能加 ''
数字类型使用 + 表示数字相加
代码：
let money1 = 100;
let money2 = 200;
let sum = money1 + money2; // 300
// console.log(sum);
字符串类型
2 字符串类型 通过单引号（''）或者双引号（""）或者（``）遵循外双内单，外单内双
字符串类型使用 + 表示两端文字的拼接
代码：
<script>
// 数字类型
// let height=100; // 数字类型 外边一定不能够加 ''
// let weight='100';// 是数字类型吗 不是数字类型！！
// let msg ='我不是字符串类型哦' ;// 它就是 字符串类型 不用管里面装什么内容 就看有没有单引号和双引号
// // let userName='张三"; 错误的 单双引号 配套出现！！
// let address='我家住在"珠江新城对面的桥洞里" '; // 外单内双 或者 外双内单
// //
// console.log(' 我家 住在 "桥底" ');
// 数字类型和字符串类型
// 以上这两种类型 使用 加号 + 功能不一样
// 数字类型使用 + 表示数字的相加
// 字符串类型 使用加号 表示两段文字的 拼接
let userName = '奥特曼';
let skill = '打怪兽';
let msg = userName + skill;
console.log(msg);
</script>
字符串拼接：
代码：
<script>
// 早些时候 写代码 都是这样来拼接的 看起来不太直观
let every = '大家好';
let age=100;
console.log('你好-' + every + '-世界美好');
console.log('你好' + '-' + every + '-' + '世界美好');
// 你好-大家好-世界美好
// 使用 反引号的方式来拼接 字符串 推荐！！
console.log(`你好-every-世界美好`);
// 模版字符串
console.log(`你好-${every}-世界美好${age}`);// 变量 在反引号中 只能使用 ${every} 固定用法
// 错误的演示
console.log('你好-${every}-世界美好${age}');
// 反引号和 ${} 两个是一对 要配套出现
</script>
字符串拼接案例：
代码：（`` + ${} ）
<body>
<script>
// 1 用户名
let userName = prompt('您的姓名');
// 2 年龄
let age = prompt('你的年龄');
// 3 输出
document.write(`我的姓名是${userName}，我的年龄是${age}`);
</script>
</body>
</html>
布尔类型:
代码：
let isEat=true;
let isSleep=false;
undefind类型
（表示没有赋值）
代码：
<body>
<script>
let age;
console.log(age);
</script>
</body>
null类型
（表示赋值了，但内容为空）
代码：
<body>
<script>
let age=null
console.log(age)
</script>
</body>
null与undefined =>变量 没有拿到合适的值即可
获取变量的数据类型：
代码：
<body>
<script>
let num = 1;
let userName = 'Stephen';
let isRain = true;
let foods;
let money = null; // 后面继续讲解到 引用类型的时候去补充
// console.log("num是什么数据类型");// 能不能通过程序的方式 自动的输出当前变量的数据类型！！
// typeof
console.log(typeof num); // number 输出 num变量的类型
console.log(typeof userName); // string
console.log(typeof isRain); // boolean
console.log(typeof foods); // undefined
console.log(typeof money); // object 对象类型
</script>
数据类型转换：
+号两边只要有一个是字符串，都会把另外一个转换为字符串
除了+以外的算术运算符比如 -*/等都会把数据转换成数字类型
转为数据类型
隐式转换：
工作中比较常用的隐式转换写法：
代码：
<script>
// 工作中 比较常用的隐式转换写法
let num2 = '2';
let num3 = num2 - 0; // num3 是一个数字类型
console.log(typeof num3);
// 最简洁的写法 //没有为什么 js内部就有这样的技巧 你知道会用即可
let num4 = +num2; // 也是可以的！
console.log(typeof num4);
</script>
课堂案例：
简易计算器
代码：
转换数据类型
<script>
// 1 获取第一个数字
let num1 = +prompt('请输入1个数字');
// 2 获取第一个数字
let num2 = +prompt('请再输入1个数字');
console.log(num1 + num2);
</script>
显示转换：
代码1：
let num2 = Number(num1);
代码2：
取整
let num2 = parseInt(9.9)；
代码3：
浮点数
let num2 = parseFloat(num1)；
演示代码：
<script>
// 你把一个真正的 字符串 给我 转成数字，会失败！！
// let num1 = 'abbcc';
// // 显示转换 转成 数字类型
let num2 = Number(num1);
// console.log( num2 ); // NaN num2 不是一个数字 类似 确实 number类型
// 对于 其他类型 转成数字
// 1 成功 数字本身
// 2 失败 NaN (not a number)
// let num1 = 'aaaa';
// let num2 = +num1;
// console.log(num2);// NaN
let num1 = '9.9';
// 砍价 收个整数 9块 integer
// let num2 = parseInt(9.9); // 常用
// console.log(num2);
// let num2 = parseFloat(num1); // 少
let num2 = +num1; // 常用
console.log(num2);
console.log(Number(Number(Number(num1))));
</script>
转为字符串
隐式转换
代码：
let str=123+'';//常用
显示转换：
类型1：
let str=String（number1）；//常用
类型2：
let str=number1.toString（）；//常用
document.write补充：
1 document.write 可以把一个 标签形式的字符串 重新插入到body标签里
2 写标签字符串的时候
如果要换行 只能使用反引号
没有换行 用哪种方式都可以
只要是写标签字符串 都可以使用反引号-模板字符串
代码：
<script>
// 把内容 输出到 body标签中
// document.write("呵呵");
// document.write(`<h1>大标题！ <h1/>`);
// let str =`<button>大大的按钮</button>`;
// let str =`<input type="text" > <button>大大的按钮</button>`;
// 反引号 还可以换行来写代码
// 如果换行了 那么就只能使用 反引号
// 如果不换行 用那种引号都可以
let str = `
<div>
<p>
<button>按钮又来啦</button>
</p>
</div>
`;
document.write('<h1>11111</h1>');
/*
</script>
