HTML CSS JavaScript 学习
平台学习笔记
文章目录
HTML
超文本标记语言，标准通用标记语言下的一个应用，提供网页的结构，提供网页的内容.
CSS
层叠样式表,用来美化网页。
JavaScript
一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，可以用来控制网页内容，给网页添加动态的效果。
JavaScript 的组成
ECMAScript - JavaScript 的核心
ECMA 欧洲计算机制造联合会
网景：JavaScript
微软：JScript
定义了JavaScript的语法规范。
JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了语言的标准于具体实现无关。
BOM-浏览器对象模型（工具）
一套操作浏览功能的 API。
通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等…
DOM-文档对象模型（工具）
一套操作页面元素的API。
DOM可以把HTML看作是文档树，通过DOM提供的API可以对树的节点进行操作。
变量
什么是变量
— 什么是变量:
变量是计算机内存中存储的标识符，根据变量名可以获取到内存中存储的数据。
— 为什么要使用变量:
使用变量可以方便的获取或者修改内存中的数据。
如何使用变量
— var声明变量：
格式： var 变量名; ==》 例 ： var name;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<script>
var num1 = 15;
var num2 = 20;
//alert(num1 + num2); //窗口弹出
console.log(num1 + num2);//控制台输出结果
var msg = 'hello javascript'; //字符串赋值
console.log(msg);
var num; //变量声明
num = 100; //变量赋值
console.log(num); //控制台输出结果
var n1,n2,n3; //同时定义多个变量
n1 = 1; //单个变量变量赋值
n2 = 2; //单个变量变量赋值
n3 = 3; //单个变量变量赋值
console.log(n1); //变量单个输出
console.log(n2); //变量单个输出
console.log(n3); //变量单个输出
console.log(n1,n2,n3); //多个变量一次性输出
var s1 = 1, s2 = 2 , s3 = 3; //声明变量的同时赋值
console.log(s1,s2,s3);
</script>
</head>
<body>
</body>
</html>
变量命名规则和规范
规则 - 必须遵守的，不然会报错
— 由字母、数字、下划线、$符号组成，不以数字开头；
— 不能是关键字和保留字，例如： for 、while 、var …
— 区分大小写。
规范 - 建议遵守
— 变量名必须有意义，方便编程
— 遵守驼峰命名法，首字母小写，后面单词的首字母需要大写。例如：userName、userPhone、userPassword、userLocaltion …
数据类型
简单的数据类型
Number,String,Boolean,Undedined,Null
Number 类型
数值字面量：数值的固定值的表示法
整数、浮点数
数值判断 --> NaN : not a number
--> isNaN : is not a number
String 类型
字符串字面量： ‘abc’ , ‘ABC’ 单引号 引起来
字符串长度：length属性用来获取字符串的长度
var str = ‘abcdef’;
console.log(str.length);
字符串拼接：字符串拼接使用加号 + 连接
console.log(‘hello’ + ‘javascript’);
注意： 如果两边只要有一边是字符串，那么 + 号就是字符串拼接功能；
如果两边都是数字，则进行算术运算。
Boolean 类型
- Boolean字面量： true 和 false ，区分大小写；
- 计算机内部存储：true 为 1， false 为 0 。
Undefined 和 Null
1、undefined 表示一个声明了没有赋值 的变量，变量只声明的时候值默认是undefined；
2、null 表示一个空，变量的值如果想为null，必须手动设置。
复杂数据类型
Object（对象） 、 数组
获取变量的类型
typeof
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>获取变量的类型typeof</title>
<script>
var variable = 'zhangsan';
var num = 121;
console.log(typeof variable)
console.log(typeof num);
</script>
</head>
<body>
</body>
</html>
字面量
在源代码中一个固定值的表示法。
数值字面量：1，2，3
字符串字面量：‘zhangsan’ 、‘lisi’ 、…
布尔字面量：true 、 false
注释
单行注释 //
多行注释 /**/
数据类型的转换
转换成字符串类型
1.调用 toString() 方法；
2.String() 方法； null 和 undefined 没有toStrin()方法
3.字符串拼接(拼接一个空字符串)；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>转换成字符串类型</title>
<script>
var num = 18;
var isRigth = true;
console.log(typeof(num + ' '));
console.log(typeof(isRight + ' '));
</script>
</head>
<body>
</body>
</html>
转换成字符串类型1 --> Number() 、 parseInt()
Number()把字符串转换成数值类型的时候，如果字符串中有一个字符不是数字，返回NaN。
parseInt()无法将布尔类型转换成数值类型 返回的结果是NaN；
parseInt()在转换字符串的时候，字符串以数字开头，遇到数字就会转换数字，如果遇到非数字就会返回；
parseInt()如果字符串中的第一个字符是非数字，则返回NaN。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>转换成字符串类型</title>
<script>
//1.Number()
var variable = 'zhangsan';
var str = '123'; //
console.log(Number(variable));//返回NaN
console.log(Number(str));//将数字字符串转换成数值
console.log(Number('123456abcd'));//返回NaN
//2.parseInt()
var st = '123456';
var isRight = false;
var zfc = 'abc';
console.log(parseInt(st));//将数字字符串转换成数值
console.log(parseInt(isRight));//返回NaN
console.log(parseInt(zfc));//返回NaN
console.log(parseInt('123456abcdef'));//数字开头，遇到数字则返回数字，遇到非数字就返回
console.log(parseInt('avbdsaf123456'));//字符串第一个是非数字，此时返回NaN
</script>
</head>
<body>
</body>
</html>
转换成字符串类型2 --> parseFloat()
parseFloat()把字符串转换成浮点数
parseFloat() 和 parseInt() 相似，
不同之处在于parseFloat会解析第一个小数点，遇到第二个小数点或非数字结束；
如果解析的内容只有整数，则解析成整数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>转换成字符串类型parseFloat()</title>
<script>
var str = '123.98';
var isRight = true;
console.log(parseFloat(str));
console.log(parseInt(str));//返回123
console.log(parseFloat(isRight)); //parseFloat 无法转换布尔类型 ，返回值是NaN
</script>
</head>
<body>
</body>
</html>
转换成字符串类型3 --> 取正或者取负
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>转换成字符串类型3: 取正或者取负</title>
<script>
var num = -56;
console.log(num); //输出-56
var str = '12345';
console.log(+str); //数值字符串转正数
console.log(-str); //数值字符串转负数
var isTrue = true;
var isFalse = false;
console.log(+isTrue); //返回+1
console.log(-isTrue); //返回-1
console.log(+isFalse); //返回0
console.log(-isFalse); //返回0
//如果一边是数值类型一边是字符串，会先把字符串转换成数值类型再进行数值的减法运算
//如果字符串转换成数值类型失败，则返回的是NaN。
console.log('123456' - 0); //返回数字123456
// 加号(+) 如果一边是数值类型一边是字符串，会先把数值类型转换成字符串，再进行字符串的拼接
console.log('123456' + 0); //加0 起到拼接的效果，输出的是字符串'1234560'
</script>
</head>
<body>
</body>
</html>
转换成字符串类型4 --> 转换布尔类型
- Boolean()
- 0 、 ’ ’ 、 null 、undefined 、NaN会转换成false ，其他都会转换成true。
操作符
运算符 operator
表达式 组成 操作数和操作符
算术运算符
加、减、乘、除、取余（+、—、* 、/ 、%）
一目运算符
一元运算符：只有一个操作数的运算符。++ 、- -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//前置++
var num = 10;
//表达式 先num自身加1 然后再返回表达式的结果
console.log(++num); //结果是 11
console.log(--num);
//后置++
var n = 2;
//表达式 先返回表达式结果，然后再对n 自身 +1
console.log(n++); //结果为2
console.log(n);//结果为3
</script>
</head>
<body>
</body>
</html>
逻辑运算符
- && 与 两个操作数同时为true ,结果为true，否则为false；
- || 或 两个操作数有一个为true，结果为true,否则为false；
- ! 非 取反。
关系运算符
-
< > >= <= == != === !==
-
== 与 === 的区别 ： ==只进行值的比较， === 类型和值同时相等，则相等.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var result = '20' == 20; //返回 true console.log(result); var result = '4' === 4; //返回false ，值相等，类型不相等 console.log(result); var result = 6 === 6; //返回 true console.log(result); </script> </head> <body> </body> </html>赋值运算符
- = += -= *= /= %=
运算符的优先级
优先级从高到底
- （） 优先级最高
- 一元运算符 ++ 、- - 、！
- 算数运算符 先 * / % 后 + -
- 关系运算符 > >= < <=
- 相等运算符 == != === !==
- 逻辑运算符 先&& 后 ||
表达式和语句
- 表达式
一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。 - 语句
语句可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序有很多个语句组成，一般情况下，分割一个一个的语句。
流程控制
程序的三种基本结构
顺序结构
- 从上往下执行的代码就是顺序结构
- 程序默尔就是由上往下顺序执行的
分支结构（选择结构）
根据不同的情况，执行对应的代码。
分支结构语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//分支结构
//第一种（if else 语句）
//1、单分支
if(/*条件表达式*/){
//所要执行的语句
}
//2、双分支
if(/*条件表达式*/){
//满足条件条件表达式的，所要执行的语句
}else{
//不满足条件表达式的，所要执行的语句
}
//3、多分支
if(/* 条件一 */){
//满足条件一，所要执行的语句
}else if(/* 条件二 */){
//满足条件二，所要执行的语句
}else if(/* 条件三 */){
//满足条件三，所要执行的语句
}else{
//最后为不满足所有条件，默认执行的语句
}
//第二种分支（switch 语句）
//语法格式：
switch(expression){
case 常量1:
语句;
break;
case 常量2:
语句;
break;
case 常量3:
语句;
break;
...
case 常量n:
语句;
break;
default:
语句;
}
</script>
</head>
<body>
</body>
</html>
switch语句案例一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//输入一个数字，打印对应的星期
// == 比较的是值是否相等， === 比较值和数据类型是否相等
//switch 语句中的判断使用的是 ===
var day = 3;
switch(day){
case 1:
console.log('星期一');
break;
case 2:
console.log('星期二');
break;
case 3:
console.log('星期三');
break;
case 4:
console.log('星期四');
break;
case 5:
console.log('星期五');
break;
case 6:
console.log('星期六');
break;
console.log('星期七');
break;
default:
console.log('输入的值不在星期范围');
break;
}
</script>
</head>
<body>
</body>
</html>
switch语句案例二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//把100分制的成绩转换为ABCDE等级
var score = 70;
score = parseInt( score / 10 );//先取出score / 10个位的数值，再进行强制取整
switch(score){
case 10:
case 9:
console.log('A');
break;
case 8:
console.log('B');
break;
case 7:
console.log('C');
break;
case 6:
console.log('D');
break;
default:
console.log('E');
break;
}
</script>
</head>
<body>
</body>
</html>
循环结构
循环结构：重复做一件事
在JavaScript中，循环语句有三种，while、do…while 、for循环。
while循环
基本语法：
- 当循环条件为 true 时，执行循环体
- 当循环条件为 false 时，退出(结束)循环
while(循环条件){
//循环体;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//打印1 - 100 之间的所有数字
var i = 1;
while(i<= 100){
console.log(i);
i++;
}
</script>
</head>
<body>
</body>
</html>
do…while循环
do…while循环和while循环先相似，二者经常可以相互替代，但是do…while的特点时不管条件是否成立，循环体都会被执行一次。
基本语法：
do{
//循环体；
}while
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//1 - 100 之间所有数字的和
var i = 1;
var sum = 0;
do{
sum += i;
i++;
}while(i <= 100)
console.log(sum);
</script>
</head>
<body>
</body>
</html>
for循环
while 和 do…while 一般用来解决无法确定次数的循环。for 循环一般在循环次数确定的时候比较方便。
for 循环语法：
//for循环的表达式之用的是 ; 分号隔开的
for(初始化表达式1 ; 条件表达式2 ; 自增表达式3){
//循环体
}
执行顺序：先1243 – > 243 --> 243 …（直到循环条件不满足，变成false）
- 1、初始化表达式
- 2、判断表达式
- 3、自增表达式
- 4、循环体
使用循环打印方形图案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var str = '';
for(i=0;i<5;i++){
for(j=0;j<=5;j++){
str = str + '*';
}
str += '\n';
}
console.log(str + '\n');
</script>
</head>
<body>
</body>
</html>
使用外层循环控制行数
打印直角三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var str = '';
for(i=0;i<5;i++){
for(j=i;j<5;j++){
str = str + '*';
}
str += '\n';
}
console.log(str + '\n');
</script>
</head>
<body>
</body>
</html>
打印九九乘法表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//外层循环 控制输出行数
var str='';
for(var i=1; i<=9;i++){
//内层循环 控制每一行有多少内容
for(var j=i;j<=9;j++){
str += i + '*' + j + '=' + i * j + '\t';
}
str += '\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html>
continue 和 break
- break ：立即跳出整个循环，即循环结束，开始助兴循环后面的内容（直接跳出整个循环）
- continue ：立即跳出当前循环，继续下一次循环（未跳出循环）
三元运算符
-
表达式1 ？ 表达式2 ： 表达式3；
-
当表达式1 成立 ，返回表达式2的值
-
当表达式1不成立，返回表达式3的值
-
是对 if…else 语句的一种简写
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> //两个数比较大小 var num1 = 20; var num2 = 40; console.log(num1 > num2 ? num1 : num2); var max = num1 > num2 ? num1 : num2; console.log(max); </script> </head> <body> </body> </html>
布尔类型的隐式转换
流程控制语句中条件部分会把后面的值隐式转换成布尔类型。
- 转换为true --> 非空字符串 非0数字 任何对象
- 转换为false --> 空字符串 0 NaN null undefined
调试 debug
调试的目的是确定错误的原因和位置，并解决错误。
- 错误
- 语法错误
- 逻辑错误 - 过去调试JavaScript的方式
- alert()
- console.log() - 断点调试
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停止，然后就可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
数组
-
数组：是一种数据类型
-
数组可以同时存储不同的数据类型（不推荐这样使用）
-
数组的长度：数组中元素的个数 --> 数组名.length
-
获取数组中的最后一个元素 --> 数字名[ 数组名.length - 1 ] ;
-
数组的长度可以动态改变，可以重新对相应的数组索引进行重新赋值
-
清空数组 --> 数组名.length = 0;
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> //数组可以存储多项，有索引，是一个集合 //数组的字面量 [] var names = ['zhangsan','lisi','wangwu'];//声明数组 //通过索引/下标数组的第一项的索引是从0开始，获取数组中的数据 console.log(names[0]);//获取数组的第一项 console.log(names[1]);//获取数组的第二项 console.log(names[2]);//获取数组的第三项 console.log(names[3]);//越界：超出了数组的索引范围 </script> </head> <body> </body> </html>-
获取数组中的每一项（数组的遍历）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> //数组可以存储多项，有索引，是一个集合 //数组的字面量 [] var names = ['zhangsan','lisi','wangwu'];//声明数组 for(var i=0; i<names.length;i++){ console.log(names[i]); } </script> </head> <body> </body> </html>
-
-
反向遍历数组，先打印最后一项
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> //数组可以存储多项，有索引，是一个集合 //数组的字面量 [] //反向遍历数组 var names = ['zhangsan','lisi','wangwu'];//声明数组 for(var i=names.length-1; i>=0;i--){ console.log(names[i]); } </script> </head> <body> </body> </html>
数组案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//求一组数中的所有和 和 平均值
var numbers = [1,2,3,4,5,6,7,8,9];
var sum = 0; //求和
var avg; //求平均值
for(var i = 0; i < numbers.length ; i++){
sum += numbers[i]; // sum = sum + numbers[i];
}
console.log(sum);//输出求和的结果
console.log(sum/numbers.length);//输出平均值
//求一组数中的最大值和最小值，以及所在的位置（索引 + 1）
var nums = [10,2,5,6,76,87,10,45,100,3,5,7];
// var max = nums[0]; //假设nums[0]是数组中最大值
// for(var i = 1; i < nums.length; i++){
// if(max < nums[i]){
// max = nums[i];
// }
// }
// console.log(max); //输出最大值
//
// var min = nums[0]; //假设nums[0]是数组中的最小值
// for(var i = 1; i < nums.length; i++){
// if(min > nums[i]){
// min = nums[i];
// }
// }
// console.log(min);
//同时求出最大值和最小值
var max = nums[0];//假设nums[0]是最大值
var min = nums[0];//假设nums[0]是最小值
var maxIndex = 0;//最大值索引
var minIndex = 0;//最小值索引
for(var i= 1; i < nums.length; i++){
if(max < nums[i]){//找到数组中的最大值
max = nums[i];
maxIndex = i;//最大值索引
}
if(min > nums[i]){//找到数组中的最小值
min = nums[i];
minIndex = i;//最小值的索引
}
}
console.log('最大值：'+max,'最小值：'+min);
console.log('最大值索引：'+maxIndex,'最小值索引：'+minIndex);
//将字符串用 | 隔开
var strArray = ['zhangsan','lisi','wangwu','zhaoliu','shengqi'];
var seperator = '|';//分隔符
var str = strArray[0];
for(var i= 1; i < strArray.length; i++){
str += seperator + strArray[i]; //str = str + seperator + strArray[i];
}
console.log(str);
//筛选数组
//要求将数组中的0项去掉，将不为0的值存入一个新的数组中，生成新的数组
var numArray = [1,6,8,0,7,0,7,67,0,34,0,67,0];
var newArray = [];//空数组，用于存储非0的值 newArray.length初始长度为0
for(var i = 0; i < numArray.length; i++){
if(numArray[i] !== 0){
newArray[newArray.length] = numArray[i];
}
}
console.log(newArray);
//反转（翻转）数组：1，2，3 --> 3,2,1
var numberArray = [1,3,5,7,9];
var newNumbers = []; //用于存储反转数组
for(var i = numberArray.length - 1; i >= 0; i--){
newNumbers[newNumbers.length] = numberArray[i];
}
console.log(numberArray); //反转前：原数组
console.log(newNumbers); //反转后：新数组
//冒泡排序
var numArr = [2,56,4,36,34,2,3,467,8,5,3,2,12];
//外层循环控制趟数，每一趟找到一个最大值
for(var i = 0; i< numArr.length - 1; i++){
//内层循环：控制比较次数，并且判断两个数的大小，把大的数往后移动，小的数往前移
for(var j = 0; j < numArr.length-1-i; j++){
//两两比较，从小到达排序
if(numArr[j] > numArr[j+1]){
//交换位置
var tmp = 0;//中间变量，用于交换数值
tmp = numArr[j];
numArr[j] = numArr[j+1];
numArr[j+1] = tmp;
}
}
}
console.log(numArr);
</script>
</head>
<body>
</body>
</html>
函数
函数：把一段相应独立的具有特定功能的代码块封装起来，形成一个独立实体，完成某一操作的行为功能。
函数的作用是封装一段代码，用于后来重复调用。
函数声明
- 函数声明
function 函数名(){
//函数体
} - 函数表达式
var func = function(){
//函数体
} - 特点：
声明函数的时候，函数体不会执行，只要当函数被调用的时候才会被执行。
定义的函数一般用来完成一件事。
函数的调用
-
调用函数的语法：
函数名(); -
特点：
函数体只有在调用的时候才会被执行；
函数可以被多次调用。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script> //函数定义的两种方式 //1、函数声明 function speakHello(){ //函数体 console.log('Hello JavaScript.'); } //调用函数 speakHello(); //2、函数表达式 var speakHi = function(){ console.log('Hello World.'); } speakHi(); </script> <body> </body> </html>
函数的参数
- 函数内部是一个封闭的执行环境，可以通过参数的方式，把外部的值传递给函数内部。
语法：
-
带参数的函数声明
function 函数名(形参1,形参2,形参3,…){
函数体;
} -
带参数函数的调用
函数名(实参1,实参2,实参3); -
形参和实参
1、形式参数：在声明一个函数的时候，为了函数的功能更加灵活，有些值是不能固定的，对于这些不能设置固定的值，我们可以给函数设置参数，这个参数没有具体的值，仅仅起到一个占位的作用，通常称为形式参数，简称形参。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <script> //写一个函数，计算两个数的和 function getSum(num1,num2){ console.log(num1 + num2); } var a = 100; var b = 120; getSum(a,b); //求圆的半径 function getArea(ridus){ var pi = 3.1415926; console.log(pi * ridus *ridus); } getArea(10); //判断一个数是不是质数（能被1和自身整除的数） function PrimeNumber(number){ //先假设number 是一个质数 var isPrimeNumeber = true; for(var i =2 ; i < number ;i++){ //判断是否能被number整除的数 if(number % i === 0){//执行此处，说明不是质数 isPrimeNumeber = false;//设置标记为false break; } } if(isPrimeNumeber){ console.log('输入的是一个质数。'); }else{ console.log('输入的不是一个质数。'); } } PrimeNumber(13); //质数 PrimeNumber(24); //非质数 </script> <body> </body> </html>
函数的返回值
-
函数返回值：当函数执行的时候，并不是所时候都要把结果打印出来。可以让函数返回一些东西，也就是返回值。函数通过return返回一个返回值。
-
返回值语法
//声明一个带返回值的函数
function 函数名(形参1，形参2，形参3…){
//函数体；
return 返回值；
} -
可以通过变量来接收函数的返回值
var 变量名 = 函数名(实参1，实参2，实参3…)；<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <script> // 求阶乘 function getJieCheng(number){ var result = 1; for(var i = 1; i <= number; i++){ result = result * i; } return result; } var num = getJieCheng(5); console.log(num); //求1！+ 2！+ 3！+ ... + n! function JieCheng(number){ var result = 1; for(var i = 1; i <= number; i++){ result = result * i; } return result; } function getJieChengSum(n){ //求1-n之每一个数的阶乘的累加 var sum = 0; for(var i = 1; i <= n;i++){ //累加的是每一个数的阶乘 sum += JieCheng(i); } return sum; } console.log(getJieChengSum(10)); </script> <body> </body> </html>
arguments的使用
-
JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参，arguments是一个伪数组，因此可以进行遍历。
-
可以通过arguments获取函数调用的时候的实参。
-
arguments非常像数组，但不是数组。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <script> //求任意个数的最大值 function getMax(){ var max = arguments[0]; for(var i = 1;i < arguments.length;i++){ if(max < arguments[i]){ max = arguments[i]; } } return max; } var max = getMax(12,34,565,78,9,0,90,56,79,123); console.log(max); //求任意个数的和 function getSum(){ var sum = 0; for(var i = 0; i < arguments.length;i++){ sum += arguments[i]; } return sum; } var sum = getSum(1,2,3,4,5,6,7,8,9,10); console.log(sum); </script> <body> </body> </html>
函数案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//求斐波那契数列中的第n个数是多少？ 1 1 2 3 5 8 13 21 ...
function getFib(n){
var n1 = 1;
var n2 = 1;
var n3;
for(var i = 3; i <= n; i++ ){
n3 = n1 + n2;
n1 = n2;
n2 = n3;
}
return n3;
}
var n = getFib(5);
console.log(n);
//反转数组，返回一个新数组
function reverse(numberArray){
var newArray = [];
for(var i = numberArray.length - 1; i >= 0; i-- ){
newArray[newArray.length] = numberArray[i];
}
return newArray;
}
var arr = [1,2,3,4,5,6,7,8,9,10]; //原数组
var newArr = reverse(arr);//调用函数并赋给newArr变量
console.log(newArr);
//对数组排序从小到大--冒泡排序
function sort(array){
//外层循环，控制排序趟数
for(var i = 0;i <array.length - 1;i++){
//假设排好序
var isSort = true; //标记：用于判断是否数组排好序
//内层循环，控制两两比较
for(var j = 0; j < array.length - 1 - i; j++){
if(array[j] > array[j+1]){
//没有排好序
isSort = false;
var tmp = array[j];
array[j] = array[j+1];
array[j+1] = tmp;
}
}
//判断是否排好序
if(isSort){
break;
}
}
return array;
}
var arr = [1,4,3,6,7,5,9,3];
var order = sort(arr);
console.log(order);
//输入一个年份，判断是否为闰年（能被4整除并且不能被100整除，或者能被400整除的证书）
function isLeap(year){
//假设不是闰年
var result = false;
if((year % 4 === 0 && year % 400 !== 0) || (year % 400 ===0)){
result = true;
}
return result;
}
var year = isLeap(2006);
console.log(year + "闰年");
//输入某年某月，判断这一天是这一年的第几天。
function isLeapYear(year){ //判断特殊月份2月份是否为闰年
//假设不是闰年
var result = false;
if((year % 4 === 0 && year % 400 !== 0) || (year % 400 ===0)){
result = true;
}
return result;
}
function getDays(year,month,day){
//计算总共有多少天
var days = day; //当前月份的天数
for(var i = 1; i < month; i++){
switch(i){
case 1: //先写31天数的月份
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
days += 31;
break;
case 4:
case 6:
case 9:
case 11:
days += 30;
break;
case 2:
//判断2月份是否是闰年29天；平年28天
if(isLeapYear()){
days += 29;
}else{
days += 28;
}
break;
default:
console.log("ERROR");
break;
}
}
return days;
}
var fate = getDays(2021,9,4);
console.log("当前月份所在年的天数：" + fate + " 天");
</script>
</head>
<body>
</body>
</html>
函数其他
匿名函数
-
匿名函数：没有函数名的函数。
-
匿名函数的使用
1、将匿名函数赋值给一个变量，就可以通过变量进行调用；
2、匿名函数自调用。 -
自调用函数
匿名函数不能通过直接调用来执行，因此可以通过匿名函数的自调用的方式来执行。 -
函数是一种数据类型
– 函数是一种数据类型，所以可以作为另一个函数的参数。
– 函数可以作为另一个函数的返回值。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> // //1、函数声明 -- 命名函数 -->> 语法 // function func(){ // // } // // //2、函数表达式 --匿名函数 -->> 语法 // var fun = function(){ // // } // //3、自动用函数 -- 当函数书写完成后立即被调用 -->> 语法 (function(){ console.log("自调用函数"); })() //4、函数也是一种数据类型 function 也是一种数据类型 var func = function(){ console.log("函数作为参数"); } // console.log(typeof func); //返回函数的数据类型 function testFunc(fun){ fun(); } testFunc(func); //调用testFunc函数 //函数可以作为另一个函数的返回值 function test(a){ var b = 5; return function(){ console.log(a + b); } } var func = test(10); //该函数返回的结果是一个函数 func(); </script> </head> <body> </body> </html>
作用域
作用域：变量可以起作用的范围
全局变量和局部变量
- 全局变量
在任何地方都可以访问到的变量，对应全局作用域。 - 局部变量
只在规定的代码片段中可访问到的变量，如函数内部，对应的是局部作用域（函数作用域）。
1、不用var声明的变量是全局变量，不推荐不建议使用。
2、变量退出作用域之后会被销毁，全局变量关闭网页或浏览器才会销毁。
块级作用域（在ECMAScript中没有块级作用域）
任何花括号{ }中的语句集都属于一个块，在{ }中定义的所有变量在代码块外是不可见的，称之为块级作用域。
作用域链
-
只有函数可以制造作用域结构，只要是代码，就至少有一个作用域，即全局作用域，代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就有又可以形成一个作用域。
-
将上述的所有的作用域列出来，可以有一个结构：函数内指向函数外的链式结构，称为作用域链。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>作用域链</title> <script> //作用链例子 function func_1(){ function func_2(){ } } var number = 60; function func_3(){ function func_4(){ } } </script> </head> <body> </body> </html>
预解析
对象概念
- 现实生活中的对象：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。
JavaScript中的对象
- JavaScript中的对象其实就是生活中对象的一种抽象
- JavaScript的对象是无序属性的集合。
其属性可以包含基本属性、对象或函数。对象就是一组没有顺序的值。可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。 - 对象的行为和特征：
特征--------属性
行为--------方法
对象字面量
-
方法一：使用对象字面量创建对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> // 创建对象 :例如创建一只动物 // 属性：name 昵称,type 品种,age 年龄,color 颜色 // 方法：bark,eat var dog = { name:'jack', type:'柴犬', age: 4, color:'yellow', bark:function(){ // 在方法中用 this 关键字 使用属性的值， this 在该方法中 // 代表的是当前对象 dog console.log(this.name + '汪汪汪'); }, eat:function(){ console.log(this.name + '啃骨头'); } } // 如何访问属性 对象.属性名 console.log(dog.name); console.log(dog.color); // 如何访问方法 对象.方法名 dog.bark(); dog.eat(); // 属性的另外一种访问方式 console.log(dog['name']); console.log(dog['color']); console.log(dog['age']); // 函数和方法 // 函数：独立存在 用函数名调用 // 方法：属于对象的函数 调用 -->> 对象.方法名 -->> 调用方法 </script> </head> <body> </body> </html>-
方法二使用 new Obiect() 创建对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> // 使用 **new Obiect()** 创建对象 // Object 是一个构造函数 // new 的方式来调用构造函数 // new Object() 调用构造函数 var hero = new Object(); // 创建一个空对象 //属性 hero.name = 'heroName'; hero.weapon = 'heroWeapon'; hero.equipment = ['heroEquipment']; hero.blood = 100; //方法 hero.attack = function(){ console.log(this.name + ' Attack'); } hero.run = function(){ console.log(this.name + ' Running'); } //遍历对象 for (var key in hero){ console.log(key + ':' + hero[key]); } </script> </head> <body> </body> </html> -
方法三使用工厂方法创建对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> // 工厂方式创建对象 function createHero(name,weapon,equipment,blood){ var hero = new Object();//创建一个空对象 //属性 hero.name = name; hero.weapon = weapon; hero.equipment = equipment; hero.blood = blood; //方法 hero.attack = function(){ console.log(this.name + ' Attack'); } hero.run = function(){ console.log(this.name + ' Running'); } return hero; } var hero_1 = createHero('hero_1','weapon_1',['equipment_1]','equipment_2'],100); var hero_2 = createHero('hero_2','weapon_2',['equipment_1]','equipment_2'],100); for (var key in hero_1){//遍历对象 console.log(key + ':' + hero_1[key]); } for (var key in hero_2){//遍历对象 console.log(key + ':' + hero_2[key]); } </script> </head> <body> </body> </html> -
自定义构造函数 来创建对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> // 自定义构造函数 来创建对象 function Hero(name,weapon,equipment,blood){ // this 动态的增加成员 // this 指向当前对象 this.name = name; this.weapon = weapon; this.equipment = equipment; this.blood = blood; this.attack = function(){ console.log(this.name + ' attacking'); } this.run = function(){ console.log(this.name + ' running'); } } // 自定义函数使用 var hero_1 = new Hero('HeroName_1','HeroWeapon_1',['HeroEquipment_1','HeroEquipment_2'],100); var hero_2 = new Hero('HeroName_2','HeroWeapon_2',['HeroEquipment_1','HeroEquipment_2'],100); for (var key in hero_1){//遍历对象 console.log(key + ':' + hero_1[key]); } for (var key in hero_2){//遍历对象 console.log(key + ':' + hero_2[key]); } </script> </head> <body> </body> </html>
-
遍历对象和删除对象属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var obj = {
name : 'zhangsan',
age : 12,
gender : '男',
speak : function(){
console.log(this.name + ' Hello');
}
}
// for in 可以遍历对象成员
for (var key in obj){
console.log(key + ':' + obj[key]);
}
//删除对象属性
console.log(obj.gender); //未删除前
delete obj.gender;
console.log(obj.gender); //删除后 删除成功会输出 undefined
console.log(obj.speak); //未删除前
delete obj.speak;
console.log(obj.speak);//删除后 删除成功会输出 undefined
</script>
</head>
<body>
</body>
</html>
内置对象
- JavaScript 中的对象有三种：自定义对象，内置对象，浏览器对象
- ECMAScript中的对象：自定义对象，内置对象
- 内置对象：Math、Array、Date …等等，查文档：MDN
- 更多的内置函数需要自己去了解
静态成员和实例成员
- 静态成员–> 直接使用对象来调用
- 实例成员–> 构造函数中的成员是实例成员
1063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
