目录
1.JavaScript介绍
什么是JavaScript？
JavaScript是一种运行在客户端（浏览器）的web编程语言，实现人机交互效果。
JavaScript的作用
1.网页特效（监听用户的一些行为让网页做出对应的反馈）
2.表单验证（针对表单数据的合法性进行判断）
3.数据交互（获取后台的数据，渲染到前端）
4.服务端编程（node.js）
JavaScript的组成
1.ECMAScript
规定了js的基础语法核心知识
2.Web APIS
BOM:操作浏览器
DOM:操作文档
JavaScript的书写位置
行内JavaScript
<body>
<button onclick="alert('笔芯')">点击我</button>
</body>内部JavaScript
<body>
<script>
alert("你好，我是内部JavaScript");
</script>
</body>外部JavaScript
<script src="./js/my.js"></script>JavaScript的书写位置和CSS的书写位置差不多
JavaScript的输入输出语法
输入语法
prompt('请输入您的年龄：')输出语法
// 1. 文档输出内容
document.write('我在页面输出')
// 2. 控制台打印输出
console.log('我在控制台')
// 3.页面弹出警示框
alert('我直接弹出')2.变量
什么是变量？
变量是计算机用来存储数据的一个‘容器’，可以让计算机变得有记忆，变量不是数据本身。
变量的基本使用
声明一个变量可以用var let const 但是var的问题很多，现基础用let，后面会说const
// 1. 声明一个变量 let（用于声明变量的关键字） age（变量名）
let age
// // 2. 赋值
age = 18
console.log(age)
// 3. 声明的同时直接赋值 变量的初始化
let age = 18变量可以一次声明多个变量
使用变量的小案例
声明两个变量并交换两个变量的值
let num1 = "成家";
let num2 = "立业";
let temp;
// 赋值的话都是把右边的值赋值给左边
temp = num1;
num1 = num2;
num2 = temp;
console.log(num1);
console.log(num2);
变量的命名规则与规范
1.规则
不能使用关键字。
关键字：有特殊含义的字符，JavaScript内置的一些英语词汇。例如：let，var，if等。
只能用下划线，字母，数字，$组成，且数字不能开头。
字母严格区分大小写。
2.规范
起名要有意义
遵守小驼峰命名法
数组
数组是有序的数据的集合，数组的下标从0开始。
//声明一个数组 数组[]
let arr = ['小红', '小明', '小芳', 10]
//使用数组 数组名[索引号]
console.log(arr[0]) // 小红
//数组长度=索引号+1
console.log(arr.length) // 43.常量
使用const声明的变量称为‘常量’
常量不允许重新赋值并且在声明的时候必须初始化（赋值）
命名规范和变量一致
当某个变量一直不会改变的时候，就可以用constr来声明。
4.数据类型
基本数据类型
number 数字型
平常使用的数字就是number数字型，可以是整数，小数，负数，正数。
数据类型的计算主要包括（+求和，-求差，*求积，/求商，%取余）
例如：求一个长为5m宽为2m的长方形的周长和面积
//声明这个长方形的长并赋值
let num1 = 5;
// 声明这个长方形的宽并赋值
let num2 = 2;
// 声明这个长方形的周长并求值
let sum = 5 * 2 + 2 * 2;
// 声明这个长方形的面积并求值
let area = 5 * 2;
console.log(sum); //14
console.log(area);//10string 字符串型
通过单引号（''）,双引号(""),反引号(``)包裹的数据都叫字符串型
console.log(11);//number型
console.log(`11`);//string型蓝色为number型 黑色为string型
模板字符串 使用反引号`` 里面包裹 ${} `${变量名} `
let uname = prompt('请输入您的姓名:')
let age = prompt('请输入您的年龄:')
// 输出
document.write(`大家好，我叫${uname}， 我今年${age}岁了`)boolean 布尔型
表示肯定或否定时在计算机中对应的是布尔类型数据
有两个固定的值一个是真（true）一个是假（fales），表示肯定的数据用true，表示否定的数据用false。
console.log(3 > 4);//fales
console.log(3 < 4);//true 
undefined 未定义型
只有一个值undefined。
在只声明变量，不赋值的情况下，变量的默认值为undefined。
let num;
console.log(num);//undefined 
null 空类型
JavaScript中的null仅仅是一个代表“无”，“空”或“值未知”的特殊值。
官方解释：null作为尚未创建的对象
let obj = null;
console.log(obj);//nullnull和undefined的区别：
null表示赋值了，但是内容为空。
undefined表示没有赋值
引用数据类型
object 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
//声明一个对象 声明关键字 对象名={}
let person={
firstname : "John",
lastname : "Doe",
id : 5566
};数据类型的转换
隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
+号两边只要有一个是字符串类型，都会把另外一个转换成字符串
除了+以外的算术运算符 比如- * / % 等都会把数据转成数字类型
+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串
显示转换
Number(数据) 转换成数字类型
parseInt(数据) 只保留整数
parseFloat(数据) 可以保留小数
String(数据) 转换成字符串类型
变量.toString(进制)
检测数据类型
typeof
typeof运算符可以返回被检查的数据类型。它支持两种语法形式：
1.作为运算符：typeof x（常用的写法）
2.函数的形式：typeof(x)
let num = 10;
console.log(typeof num);//number
let str = "pink";
console.log(typeof str);//string
let str1 = "10";
console.log(typeof str1);//string
let flag = false;
console.log(typeof flag);//boolean
let un;
console.log(typeof un);//undefined
let obj = null;
console.log(typeof obj);//object
综合案例
用户输入商品价格和商品数量，总价是自动计算
<!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>
<style>
h2 {
text-align: center;
}
table {
/* 合并相邻边框 */
border-collapse: collapse;
height: 80px;
margin: 0 auto;
text-align: center;
}
th {
padding: 5px 30px;
}
table,
th,
td {
border: 1px solid #000;
}
</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>Xiaomi 10</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`);
</script>
</body>
</html>
5.运算符
赋值运算符
对变量进行赋值的运算符。=，+=，-=，*=，/=，%=
let num = 1;
// num = num + 1 //2
// 采取赋值运算符 简化
num += 1;//2
console.log(num);一元运算符
目前常用的一元运算符：自增（i++）和自减（i--）
let i = 1;
i++;
console.log(i); //2
let sum = 5;
sum--;
console.log(sum);//4比较运算符
逻辑运算符
| 符号 | 名称 | 日常读法 | 特点 | 口诀 |
| && | 逻辑与 | 并且 | 符号两边都为true结果才为true | 一假则假 |
| || | 逻辑或 | 或者 | 符号两边有一个true就为true | 一真则真 |
| ！ | 逻辑非 | 取反 | true变false false变true | 真变假，假变真 |
判断闰年案例：用户输入一个年份，判断是否为闰年
<script>
let year = +prompt("请输入一个年份");
if ((year % 4 == 0 && year % 100 !== 0) || year % 400 === 0) {
alert(`${year}是闰年`);
} else {
alert(`${year}是平年`);
}
</script>运算符优先级
小括号>一元运算符>算术运算符>关系运算符>逻辑运算符
1444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
