目录
一、JS基础
是什么：JavaScript 是一种运行在
客户端（浏览器）
的编程语言
组成：ECMAScript( 基础语法 )、web APIs （DOM、BOM）
JavaScript权威网站：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
（1）三种写法
1.行内式
<input type="button" value="点我试试" onclick="alert('hello World')"/>2.内部
<script>
alert('Hellow World');
</script>3.外部
<script src="my.js"></script>注意：
外部的两个script标签之间不能写代码，无效。
书写的位置尽量写到文档末尾 </body> 前面
约定所有JS里面的代码用单引号，和HTML区别开
（2）注释
4.单行注释 ctrl + /
5.多行注释shift + alt + a
（3）输入输出语句
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用 户，这便是一次输入和输出的过程
输入：prompt（‘请输入您的姓名：’） 出现对话框：
输出：document.write('网页输出内容')、alert('弹出警告对话框的内容')、console.log('控制台输出内容')
<script>
// 这是一个输入框
prompt('请输入您的年龄');
// alert 弹出警示框 输出的 展示给用户的
alert('计算的结果是');
// console 控制台输出 给程序员测试用的
console.log('我是程序员能看到的');
</script>
MASc注意r
alert() 和 prompt() 它们会跳过页面渲染先被执行
BOM
二、变量
用户输入的数据通过变量存储起来
本质：变量是程序在内存中申请的一块用来存放数据的空间。
变量在使用时分为两步：1.声明变量 2.赋值（字面量）
案例：
<script>
// 1.姓名
let uname = prompt('请输入姓名')
// 2.年龄
let age = prompt('请输入年龄')
// 3.性别
let gender = prompt('请输入性别')
document.write(uname, age, gender)
</script>注意：
1.JS可不写分号；
2.let比var好用，用let
3.变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是用来装东西的纸箱子
1 基础语法
let 变量名
let age = 18 (变量赋值 变量初始化)
= 这个符号我们也称为 赋值运算符
2 更新变量语法
注意： let 不允许多次声明一个变量。
3 交换变量案例
4 命名与规范
三、数组
arry: 将 一组数据存储在单个变量名下
注意：编号从0开始，数组字面量用[ ] 中括号表示
let arr = []术语：
元素：
数组中保存的每个数据都叫数组元素
下标：
数组中数据的编号
长度：
数组中数据的个数，通过数组的length属性获得
四、常量
概念：使用 const 声明的变量称为“常量”
使用场景：
当某个变量永远
不会改变
的时候，就可以使用 const 来声明，而不是let。
注意：
常量不允许重新赋值,声明的时候必须赋值（初始化）
小技巧：
不需要重新赋值的数据使用const
总结：
五、数据类型
分为两大类：基本数据类型、引用数据类型
基本数据类型：number string boolean undefined null
引用数据类型：object
(1)数字类型number：整数、小数、正数、负数
注意：
JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认
Java是强数据类型 例如 int a = 3 必须是整数
数学运算（算术运算符）：
加+ 减- 乘* 除/ 取模（取余数）%（
开发中经常作为某个数字是否被整除）
优先级：
优先级相同时以书从左向右执行
（1）* / % 优先级相同
（2）+ - 优先级相同
（3）* / % 优先级大于 + -
（4）使用（）可以提高优先级
总结： 先乘除后加减，有括号先算括号里面的
案例-计算圆的面积
<script>
// 1.页面弹出输入框
let r = prompt('请输入半径')
// 2.计算圆的面积
s = 3.14 * r * r
// 3.页面弹出输入框
document.write(s)
</script>
NaN错误类型
NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果
NaN 是粘性的。任何对 NaN 的操作都会返回 NaN
NaN不等于NaN
isNaN的使用
isNaN() 这个方法用来判断非数字 并且返回一个值 如果是数字返回的是 false 如果不是数字返回的是true
（2）字符串类型string
通过单引号（ ''） 、双引号（ ""）或反引号( ` ) 包裹的数据都叫字符串
，单引号和双引号没有本质上的区别，推荐使用
单引号
。
注意事项：
1. 无论单引号或是双引号必须成对使用
2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
3. 必要时可以使用转义符 \，输出单引号或双引号
字符串拼接
场景
： + 运算符 可以实现字符串的拼接。
口诀：数字相加，字符相连
模板字符串
//模板字符串用`反引号 内容用${}包裹变量
let age = 18
//使用场景
document.write('我今年' + age + '岁了')
//使用方式
document.write(`大家好，我今年${age}岁了`)案例-页面输出用户信息
<script>
let uname = prompt('请您输入姓名')
let age = prompt('请您输入年龄')
document.write(`大家好，我叫${uname}，今年${age}岁了`)
</script>（3）其他三种数据类型
1 布尔类型boolean
它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）
2 未定义类型（undefined）
未定义是比较特殊的类型，只有一个值 undefined。
只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。
工作中的使用场景：
我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来
3 空类型（null）
JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值
null 和 undefined 区别：
（1）undefined 表示没有赋值 （2）
null 表示赋值了，但是内容为空
null 开发中的使用场景：
官方解释：把 null 作为尚未创建的对象
大白话： 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null
//计算有区别
console.log(undefined + 1);//NaN
console.log(null + 1);//1（4）检测数据类型typeof
注意：prompt 取过来的值是字符型的。
通过 typeof关键字检测数据类型
typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：
1.
作为运算符：
typeof x
（常用的写法）
2.
函数形式： typeof(x)
换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用
运算符
的写法。
（5）数据类型转换
坑：
使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算
此时需要转换变量的数据类型。
通俗来说，就是
把一种数据类型的变量转换成我们需要的数据类型
分为隐式转换和显式转换
1 隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
规则：
（1）+ 号两边只要有一个是字符串，都会把另外一个转成字符串
（2）
除了+以外
的算术运算符 比如 - * / 等都会把数据转成数字类型
缺点：
转换类型不明确，靠经验才能总结
技巧：
（1）
+号作为正号解析可以转换成数字型
（2）
任何数据和字符串相加结果都是字符串
2 显示转换
编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。
为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换
自己写代码告诉系统该转成什么类型
（1）转换成数字型
Number （数据）
转换成数字类型
如果字符串有非数字，转换失败时结果为 NaN 不是一个数字
NaN 也是number类型数据 代表非数字
parseInt（数据）
只保留整数
parseFloat（数据）
可以保留小数
（2）转换为字符型
String（数据）
变量.toString（进制）
<script>
//let 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
// 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('120px')); // 120 会去掉这个px单位
console.log(parseFloat('rem120px')); // NaN
// 3. 利用 Number(变量)
let str = '123';
console.log(Number(str));
console.log(Number('12'));
// 4. 利用了算数运算 - * / 隐式转换
console.log('12' - 0); // 12
console.log('123' - '120');
console.log('123' * 1);
</script>用户订单信息案例
需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息
分析：
①：需要输入3个数据，所以需要3个变量来存储 price num address
②：需要计算总的价格 total
③：
页面打印生成表格，里面填充数据即可
④：记得最好使用模板字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户订单信息案例</title>
<style>
h2 {
text-align: center;
}
table {
/* 合并相邻边框 */
border-collapse: collapse;
/* 字体表格内居中显示 */
text-align: center;
height: 100px;
/* 表格在页面居中显示 */
margin: 0 auto;
}
th {
padding: 5px 30px;
}
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>订单样式</h2>
<script>
// 1.用户输入
let price = +prompt('请输入商品价格')
let num = +prompt('请输入购买数量')
let address = prompt('请输入收货地址')
// 2.计算总额
let total = price * num
// 3.页面打印渲染
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品总量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米手机青春PLUS</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>常见错误
const 声明的时候必须要赋值，进行初始化
输出变量名和声明的变量不一致引起的（简单说写错变量名了）
注意let 或者const 不允许多次声明同一个变量
常量不能被重新赋值
prompt 如果出现相加 记得要转为数字型，可以 利用 + 最简单
扫一扫
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
