JavaScript
javaScript详细笔记，对初学者很友好，本文章详细记录的JavaScript知识点，文章较长，希望我的文章对大家有所帮助
JavaScript 详细
一.JavaScript简介
1.什么是JavaScript
简称为JS。它是由网景公司开发的一款在浏览器端执行的脚本语言。
需要嵌入到HTML当中才能运行。也是使用浏览器解析运行。
其中作用主要包括：
1.数据校验【指的对表单中用户输入的数据进行合法性验证】
2.操作网页，实现一些动态效果【结合网页事件，对静态资源进行改变或者与服务器进行交互】
3.访问浏览器内置对象，获得用户的浏览器信息。【浏览器版本，类型】
4.它是ajax核心技术。
2.JavaScript的组成部分
-
ECMAScript
ECMAScript 简称ES。是由网景公司的一个员工【布兰登 艾奇】开发的一种 脚本语言的规范，所有浏览器对象都遵循此规范。所以避免了浏览器兼容问题。 当前最新的规范为：ES6 -
DOM【重中之重】
主要定义了如何将html文档转换成一个DOM对象。 并且如何操作这个对象的方法。 -
BOM
浏览器的一些内置对象，用来操作窗口。 这些对象包括： windowdocumentscreenlocation...
二.第一个程序
1.程序的书写位置
HTML 中脚本必须位于<script> 与 </script> 标签之间
脚本可以放置在 HTML 页面的 <body> 与 <head> 标签中。
【示例：head标签】
<head>
<meta charset="utf-8">
<title></title>
<script>
//.....
</script>
</head>
【示例：body标签】
<body>
<script>
//.....
</script>
</body>
区别1：写在head中，作用在body里面div id=“app”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//操作节点
var app= document.getElementById('app');
console.log(app);
</script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
控制台输出null 。（游览器中按下F12 ,也可以右键->检查，点击Console查看控制台）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
</div>
<script>
var app= document.getElementById('app');
console.log(app);
</script>
</body>
</html>
控制台有输出：
浏览器解析脚本的顺序：
浏览器会从上之下，从左至右解析脚本。
所以在body没有被加载之前是无法对节点进行任何操作。
2.js的注释
js注解只有这两种，java注解分为单行、多行、文档注解。
// 单行注释
/**/ 多行注释
3.js的输出
-
控制台输出
console.log(message); 输出位置是：开发者选项的控制台。
-
通过js动态写入文档
document.write(message); 输出位置是：页面
4.引入外部JS文件
引入外部js就是引入第三方资源库。
会更容易扩展我们的脚本功能。
使用<script src=""></script> 引入外部js文件。
三.变量
1.声明变量
JS属于类C语言。
声明变量使用关键字 var.
变量名必须以字母或者_开头或者$开头。
不能使用js中的关键字作为变量名
js 关键词:break、delete、if、this、while、case、do、in、throw、
with、catch、else、instanceof、try、continue、finally、new、
typeof、for、return等。
2.变量类型
Java属于强类型语言，在强类型语言中，定义变量必须明确变量的类型。
变量创建之后类型不能改变。
JS属于弱类型语言，定义变量的时候，不需要明确其数据类型，只需要使用关键 var
修饰即可。
并且js定义的变量在运行过程中可以随时变化。
js的变量的类型由数据来决定。
可以使用 typeof 关键字来查看当前的数据类型。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a;
a = 10;
var $num; //正确
// var 12num; //非法
var age = 10,name="张三"; //合法
var a = b = c = 5; //合法
var age = 10;//合法
var name = "李四";//合法
</script>
</head>
<body>
</body>
</html>
四.数据类型
JS的数据类型分为两种：
1.基本数据类型
2.引用类型
1.基本数据类型
- number【数字类型】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//定义一个整型
var age = 18;
console.log(typeof age);//numver
//定义一个浮点型
var price = 12.8;
console.log(typeof price);//numver
//定义一个无穷大
var max = 1/0;
console.log(max);//Infinity
console.log(typeof max);//numver
//定义一个NaN
var num = parseFloat("abc");
console.log(num);//NaN
console.log(typeof num);//numver
</script>
</body>
</html>
- string【字符串类型】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var s1 = "双引号包裹的内容";
console.log(typeof s1);
var s2 = '单引号包裹的内容'
console.log(typeof s2);
var s3 = `引号包裹的内容`;
console.log(typeof s3);
</script>
</head>
<body>
</body>
</html>
- boolean【布尔类型】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var flag = true;
console.log(typeof flag);
if(flag){
console.log("111");
}
flag = 1;
console.log(typeof flag);
if(flag){
console.log("222");
}
</script>
</head>
<body>
</body>
</html>
- null【空类型】
<script>
var obj = null;
console.log(obj);
console.log(typeof obj);
</script>
- undefind【未定义类型】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var num;
console.log(num);//undefined
console.log(typeof num);//undefined
</script>
</head>
<body>
</body>
</html>
2.引用类型
- Function【函数对象类型】
- Array【数组类型】
- Math【数学类型】
- Date【日期类型】
- …
3.number
number类型即数字类型，包含：
整数型，
浮点型【小数】，
NaN【非数字】 Not A Number
Infinity【正负无穷大】
4.boolean类型
boolean类型只有两个值，true false
true表示真
false表示假
在js中非0的都是true
null为false
undefind为false
空字符串【``】为false
NaN为false
5.undefind类型
undefind只有一个值，就是undefind本身。
它代表变量未赋值，但是声明了。
6.string类型
string类型就是字符串类型，在JS中，使用单引号或者双引号或者``包裹的
内容都是字符串类型。
在JS中强烈建议使用 `` 作为字符串。
`` 在键盘中Tap键上方
7.null类型
null类型的值只有一个就是 null。
null表示一个空对象的指针。
五.数据类型的转换
数据类型分为两种：
1.隐似类型转换
2.强制类型转换
1.强制类型转换
JS中常见的3中强制类型转换
Number(value)-把给定的值转换成数字。【可以是整数或者浮点数】
Boolean(value)-把给定的值转换为boolean类型
String(value)-把给定的值转换成字符串
-
Number
var num = "123.12"; console.log(typeof num); num = Number(`123.12`); console.log(num);//123.12 console.log(typeof num); console.log(Number(`abc`));//NaN console.log(Number(`123.12abc`));//NaN -
Boolean
console.log(Boolean(-1));//true console.log(Boolean(0));//false console.log(Boolean(null));//false console.log(Boolean(undefined));//false console.log(Boolean(``));//false console.log(Boolean(NaN));//false -
String
var str = String(123); console.log(str);//"123" console.log(String(true));//"true" str = String(null); console.log(str)//null console.log(typeof str);//string console.log(String(undefined));//"undefined"
2.隐似类型转换
浏览器在解析JS的过程中，将一些如boolean类型 数值类型 字符串类型进行自动类型的转换。
boolean可以转换为数值类型。
字符串可以转换为数值类型。
数值类型可以转换为字符串类型。
-
boolean可以转换为数值类型
var num = 2 + true; console.log(num);// 3 num = 1 + false; console.log(num);//1 -
字符串可以转换为数值类型
var str = "123"; console.log(str - "23");//100 console.log(str * "2");//246 console.log(str / "2");//61.5 console.log(str % "2");//1 var str2 = "abc"; console.log(str2 - "23");// NaN var str3 = "123abc"; console.log(str3 - "23");// NaN -
数值类型可以转换为字符串类型
var num = 123; console.log(num + ``); num = num + ``; console.log(typeof num);//string
3.parseInt 和 parseFloat
-
parseInt
该方法强制将值转换为int类型。 console.log(parseInt("abc"));//NaN console.log(parseInt(123.12));//123 console.log(parseInt("abc123"));//NaN console.log(parseInt("123abc"));//123 var str = "123abc"; console.log(str - "23");//NaN var str2 = "123abc"; console.log(parseInt(str2) - "23");//100 -
parseFloat
强制将值转换为浮点型 console.log(parseFloat("abc"));//NaN console.log(parseFloat(123.123));//123.123 console.log(parseFloat("123.abc"));//123
六.弹出框
JS提供了3种弹出框：
1.警告框 用户体验感不好。 常用于debug，打跟踪。
2.问询框 返回用户输入的值，类型为string
3.确认框 返回一个true或者false
-
警告框
alter(message);
-
问询框
prompt(message);
按下确认，控制台输出 刚刚输入的内容
-
确认框
confirm(message);
控制台输出ture
七.表达式与运算符
运算符：
1.算术运算符 + - * / % ++ --
2.赋值运算符 = += -= /= %=
3.条件运算符 > >= < <= != ==
=== !==【强比较】
先比较类型，在比较值,只有当两者都相等才返回true。
4.逻辑运算符 && || !
5.三元运算符 条件表达式 ? 表达式1 : 表达式2
这里跟我们java运算一样，不过多介绍了。
八.选择结构
1.if语句
if(条件表达式){
执行语句
}else{
执行语句
}
2.switch
switch(条件表达式){
case 值1:
语句块;
break;
case 值2:
语句块;
break;
.....
default:
语句块;
}
九.循环
-
while
var i = 1; while(i <= 10){ console.log(i); i++; } -
do···while
var i = 1; do{ console.log(i); i++; }while(i <= 10); -
for
for(var i = 0; i < 10; i++){ console.log(i); } -
for in
var str = `welcome to china`; /* index为迭代的下标 */ for(var index in str){ //console.log(index); console.log(str[index]); }
-
break 和 contiune
当循环还未结束就已经处理完所有的任务。 就没有必要再继续让循环执行下去。 所以使用break和contiune来控制循环的跳转。 break： 结束/跳出循环。 contiune: 放弃此次循环，重新开始下一次循环。break
var sum = 0; for(var i = 1; i <= 10; i++){ sum+=i; if(sum > 20){ console.log('当前的累加次数：' + i); break; } } console.log(`累加值：` + sum);
contiune
//需求：累加偶数。
var sum = 0;
for(var i = 1; i <=10; i++){
if(i % 2 != 0){
console.log(i + '是奇数，不累加');
continue;
}
sum+=i;
}
console.log('累加值：' + sum);
十.数组
数组是JS中的一个复合数据类型。变量中保存单个数据，而数组则保存的是多个数据
的集合。
JS中的数组更像Java中的LinkedList。
JS提供了一个Array对象用来作为数组的对象。
JS数组长度随时可以变化。
注意：
JS没有集合，只有数组，所以一般情况下JS的数组可以当做集合使用。
1.创建数组的方式
方式一
var arr = new Array();
方式二
var names = [`Tom`,`Jerry`,`Andy`];
2.数组的长度
length属性返回数组的长度。
JS的数组其元素类型可以随时改变，长度也可以随时发生变化。但是不建议...
3.数组的常用方法
JS内部提供了很多数组操作的方法。
1.sort 排序
2.reverse 返转
3.join(ch) 按照指定ch进行拼接，返回的是字符串类型
4.push(obj...) 向数组的末尾添加一个或者多个元素
5.pop() 删除并返回数组的最后一个元素。
6.unshift(obj...) 向数组的开头添加一个或者多个元素。
7.shift() 删除并返回数组开头的元素。
8.concat(obj) 将其他数组连接到当前数组的末尾，返回一个新数组，原数组不变。
9.slice(index,index)从已有数组中返回第一个下标到第二个下标的子数组。
10.splice(index,len)从已有数组中返回第一个下标到len个长度的子数组。
11.toString() 将数组直接转换为字符串
12.indexOf(ch) 返回指定元素在数组中首次出现的位置。
13.forEach() 循环遍历数组
方法太多，大家可以自己一个个试一下。下面代码与上面一一对应
1.sort 排序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var num = [23, 66, 223, 643, 8656, 222, 5, 98, 345, 762, 96];
/*
默认排序规则按照首字符排序。
*/
console.log(`默认排序规则：` + num.sort());
/*
自定义排序
*/
num.sort(function(a, b) {
if (a > b) {
return -1;
} else {
return 1;
}
});
console.log("降序：" + num);
num.sort(function(a, b) {
if (a > b) {
return 1;
} else {
return -1;
}
})
console.log("升序：" + num);
/*
按照名字长度升序
*/
var names = ['Tom','Jerry','Andy','ken','Lee','Broce','弗拉基米尔','菲奥娜','剑魔'];
names.sort(function(a, b) {
if (a.length > b.length) {
return 1;
} else {
return -1;
}
})
console.log("排序后的数组：" + names);
</script>
</head>
<body>
</body>
</html>
2.reverse 返转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var names = ['Tom','Jerry','Andy','ken','Lee','Broce','弗拉基米尔','菲奥娜','剑魔'];
//反转
console.log(names.reverse());
</script>
</head>
<body>
</body>
</html>
3.join(ch) 按照指定ch进行拼接，返回的是字符串类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var names = ['Tom','Jerry','Andy','ken','Lee','Broce','弗拉基米尔','菲奥娜','剑魔'];
console.log("未拼接之前：" + names);
console.log("未拼接之前：" + typeof names);
var names2 = names.join("-");
console.log("拼接之后：" + names2);
console.log("拼接之后：" + typeof names2);
</script>
</head>
<body>
</body>
</html>
4.push(obj…) 向数组的末尾添加一个或者多个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var names = ['Tom','Jerry','Andy','ken','Lee','Broce','弗拉基米尔','菲奥娜','剑魔'];
/*
添加一个元素
*/
names.push("亚瑟");
console.log(names);
/*
添加多个元素
*/
names.push("阿克萨","小学生之手","乐芙兰");
console.log(names);
</script>
</head>
<body>
</body>
</html>
5.pop() 删除并返回数组的最后一个元素。
6.unshift(obj…) 向数组的开头添加一个或者多个元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var names = ['Tom','Jerry','Andy','ken','Lee','Broce','弗拉基米尔','菲奥娜','剑魔'];
/*
向素组的开头添加一个元素
*/
names.unshift("奥巴马");
console.log(names);
/*
向素组的开头添加多个元素
*/
names.unshift("好运姐","潘森","诺手");
console.log(names);
</script>
</head>
<body>
</body>
</html>
7.shift() 删除并返回数组开头的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var names = ['Tom','Jerry','Andy','ken','Lee','Broce','弗拉基米尔','菲奥娜','剑魔'];
var names = names.shift();
console.log(names);
</script>
</head>
<body>
</body>
</html>
8.concat(obj) 将其他数组连接到当前数组的末尾，返回一个新数组，原数组不变。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var names = ['Tom', 'Jerry', 'Andy', 'ken', 'Lee', 'Broce', '弗拉基米尔', '菲奥娜', '剑魔'];
var names2 = ['克烈', 'Timo', '基兰'];
var names3 = names.concat(names2);
console.log(names3);
console.log(names2);
console.log(names);
</script>
</head>
<body>
</body>
</html>
9.slice(index,index)从已有数组中返回第一个下标到第二个下标的子数组。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var names = ['Tom', 'Jerry', 'Andy', 'ken', 'Lee', 'Broce', '弗拉基米尔', '菲奥娜', '剑魔'];
var names2 = names.slice(3,6);
console.log(names2);
</script>
</head>
<body>
</body>
</html>
10.splice(index,len)从已有数组中返回第一个下标到len个长度的子数组。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var names = ['Tom', 'Jerry', 'Andy', 'ken', 'Lee', 'Broce', '弗拉基米尔', '菲奥娜', '剑魔'];
var names2 = names.splice(3,3);
console.log(names2);
</script>
</head>
<body>
</body>
</html>
11.toString() 将数组直接转换为字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var names = ['Tom', 'Jerry', 'Andy', 'ken', 'Lee', 'Broce', '弗拉基米尔', '菲奥娜', '剑魔'];
console.log(typeof names);//object
var str = names.toString();
console.log(typeof str);//string
</script>
</head>
<body>
</body>
</html>
12.indexOf(ch) 返回指定元素在数组中首次出现的位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var names = ['Tom', 'Jerry', 'Andy', 'ken', 'Lee', 'Broce', '弗拉基米尔', '菲奥娜', '剑魔'];
console.log(names.indexOf('Broce'));//5
console.log(names.indexOf('abc'));//-1
</script>
</head>
<body>
</body>
</html>
13.forEach() 循环遍历数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var names = ['Tom', 'Jerry', 'Andy', 'ken', 'Lee', 'Broce', '弗拉基米尔', '菲奥娜', '剑魔'];
/*
ES6提供的便于迭代的方法
*/
names.forEach(function(value, index) {
console.log(index,value);
});
</script>
</head>
<body>
</body>
</html>
745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
