前言
教你学会JavaScript分成四大部分：
教你完全学会JavaScript（基础篇--更新中）
教你完全学会JavaScript（DOM篇--完结）
教你完全学会JavaScript（BOM篇--更新中）
教你完全学会JavaScript（jQuery篇--等待）
目录
一、JS的三种书写方式
1.行内式的js（直接写到元素的内部）
2.内嵌式的js
3.外部式js
二、JS注释
三、JS的输入输出
四、JS的变量
1.变量：用于存放数据的容器，通过变量名获取数据。
2.变量使用：声明变量——赋值
编辑3.变量的初始化
4.变量案例：
5.变量语法扩展
6.变量案例：交换两个变量
五、数据类型
1.简单数据类型
2.案例练习：字符串拼接
3. 布尔型，undefinded和null
4.获取变量的数据类型
5.数据类型转换
（1）转换成字符串
编辑 （2）转换成数字型
（3）转换成布尔型
（4）案例1：计算年龄
（5）案例2：加法
六、JavaScript运算符
（1）算数运算符和递增递减运算符
（2）前置运算符和后置运算符的练习
（3）比较运算符
（4）逻辑运算符
（5）运算符优先级
七、流程控制
1、分支流程控制if
2.进入网吧案例
3.if else分支语句
4.判断闰年
5.if else if分支语句
6三元表达式
7.switch分支语句
8.switch的注意事项
9.查询水果案例
八、循环
九、Math函数
1.猜数字游戏
然后就得到了 Math.floor(Math.random() * (max - min + 1)) + min
2.随机点名
3.Math的绝对值和三个取整方法
4.封装自己的数字对象
5.Math最大值
十、数组
1.创建数组
2.翻转数组（♥）＋检测是否为数组
3.添加或者是删除数组
4.筛选数组
一、JS的三种书写方式
1.行内式的js（直接写到元素的内部）
2.内嵌式的js
<>
alert('hello')
3.外部式js
html文件
<>
// alert('hello')
< src="js/xuexi.js">
js文件
alert('你是风儿，我是沙子')
二、JS注释
<>
//1.单行注释 ctrl+/
/*
2.多行注释 shift+alt+a
*/
三、JS的输入输出
<>
//这是一个输入框
prompt('请输入你的爱好')
// 弹出警示框
alert('你的爱好是')
// console 控制台输出 测试用的 按F12
console.log('我是能在F12的console中看到的')
四、JS的变量
1.变量：用于存放数据的容器，通过变量名获取数据Python中的所有运算符号。
2.变量使用：声明变量——赋值
<>
var age;//声明一个age的变量
var name;//声明一个name的变量
var hobby;//声明一个hobby的变量
var gander;//声明一个gander的变量
age=18;
name='小伦';
hobby='写代码';
gander='女';
console.log(age);
console.log(name);
console.log(hobby);
console.log(gander);
3.变量的初始化
<>
var age;//声明一个age的变量
var name;//声明一个name的变量
var hobby;//声明一个hobby的变量
var gander;//声明一个gander的变量
age=18;
name='小伦';
hobby='写代码';
gander='女';
console.log(age);
console.log(name);
console.log(hobby);
console.log(gander);
// 变量的初始化
var number='12345678'
console.log(number)
4.变量案例：
弹出一个输入框，提示用户输入姓名。弹出一个对话框，输出用户刚才输入的姓名。
<>
//用户输入姓名存储到myname的变量
var myname=prompt('请输入你的名字：');
// 输出用户名
alert('你的名字是：'+myname);
5.变量语法扩展
<>
// 更新变量（小伦变小罗）
var myname='小伦';
console.log(myname);
var myname='小罗';
console.log(myname)
// 声明多个变量
var age=18,
name='小伦',
hobby='写代码',
gander='女';
// 声明变量的特殊情况
// 1.声明变量不赋值 undefinded
var number;
console.log(number);
// 2.不声明直接赋值 可以用
qq=111;
console.log(qq);
// 3.不声明不赋值会报错
console.log(address);
6.变量案例：交换两个变量
<>
var temp;
var apple1='苹果1';
var apple2='苹果2';
temp=apple1;
apple1=apple2;
apple2=temp;
console.log(apple1);
console.log(apple2);
五、数据类型
数据类型的简介：不同的数据所需占用的存储空间是不同的。
1.简单数据类型
<>
var num=10;
var PI=3.14;
// 八进制 0-7在程序数字前面加0表示八进制
var num1=010;
// 010 转换成十进制 等于 8
console.log(num1);
var num2=012;
console.log(num2);
// 十六进制 0-9 a-f
var num3=0x9;//结果是9
console.log(num3);
var num4=0xa;//结果是10
console.log(num4);
//数字型的最大值
console.log(Number.MAX_VALUE);//1.7976931348623157e+308
//数字型的最小值
console.log(Number.MIN_VALUE);//5e-324
//无穷大
console.log(Number.MAX_VALUE*2);//Infinity
//无穷小
console.log(-Number.MAX_VALUE*2);//-Infinity
//非数字
console.log('小伦'-100);//NaN
//isNaN 用来判断一个变量是否为非数字的类型，返回true或者false
console.log(isNaN('小伦'));//true
console.log(isNaN(12));//false
//字符串型String 单引号和双引号里面的都是字符串型
var str1='12';
var str2='我是爱吃"臭豆腐"的小伦';
console.log(str1);
console.log(str2);
//转义符的作用
var str3='我\'是\"爱\\吃"臭豆腐"\n的小\t伦';
console.log(str3);
// 检测获取字符串长度 length
var str='my name is andy';
console.log(str.length);
//字符串的拼接
console.log('我是'+'小伦');
console.log('小伦'+18);
console.log('小伦'+true);
console.log(12+12);
console.log('12'+12);
2.案例练习：字符串拼接
<>
var age=prompt('请输入你的年龄：');
var str='你今年已经'+age+'岁';
alert(str);
3. 布尔型，undefinded和null
<>
var flag=true;
var flag1=false;
console.log(flag+1);//true参加加法运算当成1来看 2
console.log(flag1+1);//false参加加法运算当成0来看 1
// 如果一个变量声明没赋值 就是undefinded未定义数据类型
var str;
console.log(str);
//undefinded
var variable=undefined;
console.log(variable+'hello');//undefindedhello
console.log(variable+1)//NaN undefinded和数字相加最后的结果是NaN
//null空值
var space=null;
console.log(space+'hello');//nullhello
console.log(space+1);//1
4.获取变量的数据类型
<>
var num=10;
console.log(typeof num);//number
var str='hello';
console.log(typeof str);//string
var flag=true;
console.log(typeof flag);//boolean
var vari=undefined;
console.log(typeof vari);//undefinded
var timer=null;
console.log(typeof timer);//object
// 举个例子
var age=prompt('请输入你的年龄');
console.log(age);
console.log(typeof age);//string
5.数据类型转换
（1）转换成字符串
（2）转换成数字型
（3）转换成布尔型
<>
// (1)转换成字符串
//1.toString 把数字型转换为字符串型
var num=10;
var str=num.toString();
console.log(str);
console.log(typeof str);
//2.String 把数字型转换为字符串型
console.log(String(num));
// 3.加号拼接字符串 和字符串拼接的结果都是字符串
console.log(num+'');
//（2）转换成数字型
// 1.parseInt
var age=prompt('请输入你的年龄：');
console.log(parseInt(age));
console.log(parseInt('3.14'));//取整 3
console.log(parseInt('3.94'));//取整 3
console.log(parseInt('100px'));//去掉单位 100
// 2.parseFloat把字符型转换为数字型 得到小数 浮点数
console.log(parseFloat('3.14'));//3.14
console.log(parseFloat('3.94'));//3.94
console.log(parseFloat('100px'));//去掉单位 100
//3.利用Number
var str='12';
console.log(Number(str));
// 4.利用算数运算符-*/
console.log('123'-'120');//两个字符型的转换成数字型的
（4）案例1：计算年龄
<>
var year=prompt('请输入你的出生年份：');
var age=2023-year;
alert('你今年已经'+age+'岁了');
（5）案例2：加法
<>
var num1=prompt('请你输入第一个值：');
var num2=prompt('请你输入第二个值：');
// 因为上面取到的值是字符串型的，我们要把它们转换成数字型的才可以相加
var result=parseFloat(num1)+parseFloat(num2);
alert('相加的结果是:'+result);
六、JavaScript运算符
（1）算数运算符和递增递减运算符
<>
// 1.算数运算符
console.log(1+1);
console.log(1-1);
console.log(1/1);
console.log(1*1);
console.log(4%2);//0
console.log(3%5);//3
console.log(0.07+0.3);//浮点数精度有问题
// 2.表达式：是由数字、运算符、变量等组成的式子
console.log(1+1);//2就是返回值
// 3.递增和递减的运算符,(++)(--)放前面是前置运算符，放后面是后置运算符
console.log('3.前置后置运算符对比：')
//前置运算符：先自加一 然后返回值
var num1=10;
console.log(++num1 + 10);
//后置运算符：先放回原值 后自加一
var age=10;
console.log(age++ + 10);//先把原值返回10 +10，然后自加1
console.log(age);
（2）前置运算符和后置运算符的练习
<>
// 前置运算符
var a=10;
++a;//a=11
var b=++a + 2;//a=12
console.log(b);
//后置运算符
var c=10;
c++;//11
var d=c++ + 1;//c++=11 c=12
console.log(d); //13
var e=10;
var f=e++ + ++e;//e++=10 ++e=11 ==> 21 ==> 22
console.log(f);
（3）比较运算符
<>
// 双等符号与三等运算符
console.log(18=='18');//true
console.log(18==='18');//false
（4）逻辑运算符
短路运算（逻辑中断）：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值了。
<>
// 逻辑与短路运算:表达式1结果为真则返回表达式2
console.log(123 && 456);//除了0其他数字都是真的 456
console.log(0 && 456);//0
//逻辑或短路运算: 如果表达式1结果为真则返回表达式1;如果表达式1结果为假则返回表达式2;
console.log(123 || 456);//123
console.log(0 || 456);//456
（5）运算符优先级
七、流程控制
1、分支流程控制if
<>
// 1. if 的语法结构 如果if
// if (条件表达式) {
// // 执行语句
// }
// 2. 执行思路 如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句
// 如果if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码
// 3. 代码体验
if (3 < 5) {
alert('沙漠骆驼');
}
2.进入网吧案例
<>
// 弹出 prompt 输入框，用户输入年龄， 程序把这个值取过来保存到变量中
// 使用 if 语句来判断年龄，如果年龄大于18 就执行 if 大括号里面的输出语句
var age = prompt('请输入您的年龄:');
if (age >= 18) {
alert('go！');
}
3.if else分支语句
<>
// 1. 语法结构 if 如果 else 否则
// if (条件表达式) {
// // 执行语句1
// } else {
// // 执行语句2
// }
// 2. 执行思路 如果表达式结果为真 那么执行语句1 否则 执行语句2
// 3. 代码验证
var age = prompt('请输入您的年龄:');
if (age >= 18) {
alert('开开心心上网');
} else {
alert('滚不要来');
}
// 5. if里面的语句1 和 else 里面的语句2 最终只能有一个语句执行 2选1
// 6. else 后面直接跟大括号
4.判断闰年
<>
// 算法：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被 400 整除的就是闰年
// 弹出prompt 输入框，让用户输入年份，把这个值取过来保存到变量中
// 使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else里面的输出语句
// 一定要注意里面的且 && 还有或者 || 的写法，同时注意判断整除的方法是取余为 0
var year = prompt('请您输入年份：');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
alert('您输入的年份是闰年');
} else {
alert('您输入的年份是平年');
}
5.if else if分支语句
<>
// 伪代码 按照从大到小判断的思路
// 弹出prompt输入框，让用户输入分数（score），把这个值取过来保存到变量中
// 使用多分支 if else if 语句来分别判断输出不同的值
var score = prompt('请您输入分数:');
if (score >= 90) {
alert('宝贝，你是我的骄傲');
} else if (score >= 80) {
alert('宝贝，你已经很出色了');
} else if (score >= 70) {
alert('你要继续加油喽');
} else if (score >= 60) {
alert('孩子，你很危险');
} else {
alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
}
6三元表达式
<>
// 用户输入0~59之间的一个数字
// 如果数字小于10，则在这个数字前面补0,（加0 拼接） 否则 不做操作
// 用一个变量接受这个返回值，输出
var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
// 三元表达式 表达式 ？ 表达式1 ：表达式2
var result = time < 10 ? '0' + time : time; // 把返回值赋值给一个变量
alert(result);
7.switch分支语句
<>
// 1. switch 语句也是多分支语句 也可以实现多选1
// 2. 语法结构 switch 转换、开关 case 小例子或者选项的意思
// switch (表达式) {
// case value1:
// 执行语句1;
// break;
// case value2:
// 执行语句2;
// break;
// ...
// default:
// 执行最后的语句;
// }
// 3. 执行思路 利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句 如果都没有匹配上，那么执行 default里面的语句
// 4. 代码验证
switch (8) {
case 1:
console.log('这是1');
break;
case 2:
console.log('这是2');
break;
case 3:
console.log('这是3');
break;
default:
console.log('没有匹配结果');
}
8.switch的注意事项
<>
// switch注意事项
var num = 1;
switch (num) {
case 1:
console.log(1);
case 2:
console.log(2);
case 3:
console.log(3);
break;
}
// 1. 我们开发里面 表达式我们经常写成变量
// 2. 我们num 的值 和 case 里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1
// 3. break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case
9.查询水果案例
<>
// 弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。
// 将这个变量作为 switch 括号里面的表达式。
// case 后面的值写几个不同的水果名称，注意一定要加引号 ，因为必须是全等匹配。
// 弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。
// 将 default 设置为没有此水果。
var fruit = prompt('请您输入查询的水果:');
switch (fruit) {
case '苹果':
alert('苹果的价格是 3.5/斤');
break;
case '榴莲':
alert('榴莲的价格是 35/斤');
break;
default:
alert('没有此水果');
}
八、循环
（更新中）
九、Math函数
1.猜数字游戏
Math.random()给我们返回一个在0-1范围内的随机数。
但我们不想要一个随机的小数；我们想要一个任意随机数。我们可以通过我们的Math.random()的结果乘以任意数值区间得到它。举个例子，如果我们想要一个在0-10之间的随机数，我们需要乘以10，然后结果中的0.4会变成4。如果我们想要一个7-11的随机数，即(7,8,9,10,11)。
这个结果我们可以通过Math.random() * (max - min + 1)来得到它。
我们不仅仅想要一个小数，我们想要一个整数。Math.floor()用来砍掉小数后的数值，让3.14159变成了3。
这就是我们通过 Math.floor(Math.random() * (max - min + 1)).得到的。
现在我们得到了一个从0开始到我们定义的任意范围的数据。我们想要一个介于7-11的数值，但是现在只得到了0-5。为了把它变成7-10，我们只需要把任意我们得到的值加上7。7是我们的最小值。
然后就得到了 Math.floor(Math.random() * (max - min + 1)) + min
<>
// 猜数字游戏
// 1.随机生成一个1~10 的整数 我们需要用到 Math.random() 方法。
// 2.需要一直猜到正确为止，所以需要一直循环。
// 3.while 循环更简单
// 4.核心算法：使用 if else if 多分支语句来判断大于、小于、等于。
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 10);
while (true) { // 死循环
var num = prompt('你来猜？ 输入1~10之间的一个数字');
if (num > random) {
alert('你猜大了');
} else if (num < random) {
alert('你猜小了');
} else {
alert('你好帅哦，猜对了');
break; // 退出整个循环结束程序
}
}
// 要求用户猜 1~50之间的一个数字 但是只有 10次猜的机会
2.随机点名
<>
// 1.Math对象随机数方法 random() 返回一个随机的小数 0 =< x < 1
// 2. 这个方法里面不跟参数
// 3. 代码验证
console.log(Math.random());
// 4. 我们想要得到两个数之间的随机整数 并且 包含这2个整数
// Math.floor(Math.random() * (max - min + 1)) + min;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));
// 5. 随机点名
var arr = ['张三', '三丰', '疯子', '小路', '小礼帽', '小猪'];
// console.log(arr[0]);
console.log(arr[getRandom(0, arr.length - 1)]);
3.Math的绝对值和三个取整方法
<>
// 1.绝对值方法
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
console.log(Math.abs('hello')); // NaN
// 2.三个取整方法
// (1) Math.floor() 地板 向下取整 往最小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
// (2) Math.ceil() ceil 天花板 向上取整 往最大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
// (3) Math.round() 四舍五入 其他数字都是四舍五入，但是 .5 特殊 它往大了取
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.9)); // 2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // 这个结果是 -1
4.封装自己的数字对象
<>
// 利用对象封装自己的数学对象 里面有 PI 最大值和最小值
var myMath = {
PI: 3.141592653,
max: function() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
},
min: function() {
var min = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] < min) {
min = arguments[i];
}
}
return min;
}
}
console.log(myMath.PI);
console.log(myMath.max(1, 5, 9));
console.log(myMath.min(1, 5, 9));
5.Math最大值
<>
// Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
console.log(Math.PI); // 一个属性 圆周率
console.log(Math.max(1, 99, 3)); // 99
console.log(Math.max(-1, -10)); // -1
console.log(Math.max(1, 99, '小伦')); // NaN
console.log(Math.max()); // -Infinity
十、数组
1.创建数组
<>
// 创建数组的两种方式
// 1. 利用数组字面量
var arr = [1, 2, 3];
console.log(arr[0]);
// 2. 利用new Array()
// var arr1 = new Array(); // 创建了一个空的数组
// var arr1 = new Array(2); // 这个2 表示 数组的长度为 2 里面有2个空的数组元素
var arr1 = new Array(2, 3); // 等价于 [2,3] 这样写表示 里面有2个数组元素 是 2和3
console.log(arr1);
2.翻转数组（♥）＋检测是否为数组
<>
// 翻转数组
function reverse(arr) {
// if (arr instanceof Array) {
if (Array.isArray(arr)) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
} else {
return 'error 这个参数要求必须是数组格式 [1,2,3]'
}
}
console.log(reverse([1, 2, 3]));
console.log(reverse(1, 2, 3));
// 检测是否为数组
// (1) instanceof 运算符 它可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
// (2) Array.isArray(参数); H5新增的方法 ie9以上版本支持
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));
3.添加或者是删除数组
<>
// 添加删除数组元素方法
// 1. push() 在我们数组的末尾 添加一个或者多个数组元素 push 推
var arr = [1, 2, 3];
// arr.push(4, 'pink');
console.log(arr.push(4, 'pink'));
console.log(arr);
// (1) push 是可以给数组追加新的元素
// (2) push() 参数直接写 数组元素就可以了
// (3) push完毕之后，返回的结果是 新数组的长度
// (4) 原数组也会发生变化
// 2. unshift 在我们数组的开头 添加一个或者多个数组元素
console.log(arr.unshift('red', 'purple'));
console.log(arr);
// (1) unshift是可以给数组前面追加新的元素
// (2) unshift() 参数直接写 数组元素就可以了
// (3) unshift完毕之后，返回的结果是 新数组的长度
// (4) 原数组也会发生变化
// 3. pop() 它可以删除数组的最后一个元素
console.log(arr.pop());
console.log(arr);
// (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
// (2) pop() 没有参数
// (3) pop完毕之后，返回的结果是 删除的那个元素
// (4) 原数组也会发生变化
// 4. shift() 它可以删除数组的第一个元素
console.log(arr.shift());
console.log(arr);
// (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
// (2) shift() 没有参数
// (3) shift完毕之后，返回的结果是 删除的那个元素
// (4) 原数组也会发生变化
4.筛选数组
<>
// 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
// newArr[newArr.length] = arr[i];
newArr.push(arr[i]);
}
}
console.log(newArr);
5.数组排序
<>
// 数组排序
// 1. 翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);
// 2. 数组排序（冒泡排序）
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b) {
// return a - b; 升序的顺序排列
return b - a; // 降序的顺序排列
});
console.log(arr1);
6.获取数组元素索引
<>
// 返回数组元素索引号方法 indexOf(数组元素) 作用就是返回该数组元素的索引号 从前面开始查找
// 它只返回第一个满足条件的索引号
// 它如果在该数组里面找不到元素，则返回的是 -1
// var arr = ['red', 'green', 'blue', 'pink', 'blue'];
var arr = ['red', 'green', 'pink'];
console.log(arr.indexOf('blue'));//-1
// 返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.lastIndexOf('blue')); // 4