JS介绍
-
JavaScript和ECMAScript的关系
JavaScript的创造者Netscape公司，将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准，后来ECMA发布标准文件的第一版（ECMA-262），规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。该标准从一开始就是针对JavaScript语言制定的，之所以不叫JavaScript，有两个原因：一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标；二是想体现这门语言的制定者是ECMA，不是Netscape，有利于保证这门语言的开放性和中立性。
ECMAScript是一种语言标准，JavaScript是对ECMAScript的一种实现。
-
Javascript的三个组成部分
- 核心（ECMAScript）
- 变量
- 测试语句
- 数据类型
- 运算符
- 数据类型转换
- 流程控制
- 常用内置对象
- 文档对象模型（DOM）
- DOM节点
- 获取DOM节点的三种方式
- 值的操作
- 样式操作
- 属性操作
- DOM操作
- 浏览器对象模型（BOM）
- 浏览器的前进、后退、关闭、最小化等按钮
- 核心（ECMAScript）
引入Javascript
-
在页面内部可以直接编写JS代码，但是要用一对
<script></script>标签阔起来； -
外部引入JS代码在
<script>中加一个src属性引入js文件的路径，外部的JS代码不需要用<script></script>，直接编写JS代码即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 在这里编写JS代码
</script>
</head>
<body>
<!-- 外部引入JS -->
<script src="js/myjs.js"></script>
</body>
</html>
变量
定义变量需要在前面加上数据类型，但是要加一个 var关键字。
1. 基本数据类型
- Number
- String
- Boolean
- Undefind
- null（空对象）
// 用typeof 来检查数据类型
var pai = 3.1415;
alert(typeof pai);
// 结果
>>> Number
2. 引用数据类型
- Object
- Array
- Function
- --> (指针)
3. 深入了解变量
-
JS的变量都是保存在栈内存中的，基本数据类型的值直接在栈内存中存储，值与值之间是独立存在的，修改一个变量不会影响其他变量。
（堆内存与栈内存.ppt）
-
对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，而变量保存的是对象的内存地址（对象的引用）
数组
定义一个Javascript数组对象：
// 创建一个数组
var arr = ["value1", "value2", [1, 2]];
// 创建一个数组对象
var arr = new Array();
两种创建的方式是等价的。
1. 数组的内置方法
获取数组的长度
var array = ["red", "blue"];
alert(array.length);
>>> 2
判断一个对象是否为数组
var array = ["red", "blued"];
alert(Array.isArray(array));
>>> True
把一个数组转换成字符串
var array = ["red", "blue"];
var arrToStr = array.toString();
alert(arrToStr);
>>> red,blue
用指定的字符分割数组变成字符串
var array = ["red", "white", "black"];
var arrToStr = array.join("|");
alert(arrToStr);
>>> red|white|black
2. 数组排序
数组的排序规则是将数组元素转换成字符串，按照字符串顺序排序。
倒序
var array = ["red", "white", "black"];
array.reverse();
>>> array = ["black", "white", "red"]
升序
var numArray = [6, 2, 4, 0, 1, 9, 22,67];
numArray.sort();
>>> numArray = [0, 1, 2, 22, 4, 6, 67, 9]
# 为什么4会排在22后面呢？
# 因为sort()方法在对数组排序是依照对应ASCII码进行排序的，22它只会看成是"22"
# 首先查看几个数值的ASCII码
"1".charCodeAt();
"2".charCodeAt();
"22".charCodeAt();
"9".charCodeAt();
>>> 49
>>> 50
>>> 50
>>> 57
# 2和22对应的数值都是50，可知是由首字符获取对应ASCII码的，9对应的数值为57，故而排序在22后面
// 如果需要对数字列表进行正确排序，需要通过一个比值函数进行矫正
function compare (a, b){
if (a < b){
return -1;
}
else if (a > b){
return 1;
}
else{
return 0;
}
}
console.log(numArray.sort(compare));
>>> numArray = [1, 2, 4, 6, 9, 22, 67];
3. 数组的操作方法
数组合并、扩展
var color = ["red", "blue"];
// concat()参数可以是列表、对象、字符串
var newColor = color.concat({name: "hjd"}, ["white", "black"], "purple");
// 合并结果 列表并不会作为一个元素扩展，而是把里面的元素拆开
>>> newColor = ["red", "blue", {name: "hjd"}, "white", "black"]
切割数组
// 类似于字符串切片 顾头不顾尾
var array = ["green", "black", "red", "pink"];
var re = array.slice(1, 3);
// slice()不会对原数组进行切割修改
>>> re = ["black", "red"]
>>> array = ["green", "black", "red", "pink"]
删除、插入、替换
// 删除从起始下标到结束下标的数据（顾头顾尾）
array.splice("起始下标", "结束下标");
// 在指定的下标添加两个value 0表示不删除任何元素
array.splice("下标", 0, "value1", "value2");
// （替换）删除本身再插入一个新的值
array.splice(1, 1, "newValue");
4. 栈和队列方法
栈方法
栈是一种后进先出的数据结构
-
push() 往数组的最后一项添加内容
array = ["red"] array.push("blue"); // 没有返回值 >>> array = ["red", "blue"] -
pop() 从数组末尾删除最后一项
array = ["red", "pink", "blue"]; array.pop(); // 没有返回值 >>> arrat = ["red", "pink"]
队列方法
队列是一种先进先出的数据结构
-
unshift() 往数组里的第一位添加内容
// unshift()方法会返回添加数据后数组的长度 var array = ["red", "pink"]; var re = array.unshift("black"); // 用一个re接收返回值 >>> re = 3 >>> array = ["black", "red", "pink"] -
pop() 删除数组第一位数据
// shift()会返回删除后的数据 var array = ["green", "black", "red", "pink"] var re = array.shift(); // 用一个re接收返回值 >>> re = "green"
array = ["black", "red", "pink"]
##### 5. 数组的迭代方法
对数组元素进行过滤、相除、相加、遍历等
###### 过滤方法
```javascript
/* 过滤数组中大于10的元素 */
var numbers = [1, 2, 3, 6, 19, 40, 7];
/*
value: 数组的元素
index：元素的下标
array：数组
*/
var re = numbers.filter(function (value, index, array) {
# console.log("value：" + value);
# console.log("index：" + index);
# console.log("array：" + array);
return item > 10;
});
console.log(re);
>>> re = [19, 40];
map方法()
var numbers = [2, 4, 6, 8, 10, 12];
/* 将数组的每个元素 *2运算 */
var mapResult = numArr.map(function (value, index, array) {
return value * 2;
})
console.log(mapResult);
>>> mapResult = [4, 8, 12, 16, 20, 24];
遍历方法
var colors = ["red", "blue", "green", "pink"];
/* for 循环遍历 */
for (var i = 0; i < colors.length; i++){
console.log(colors[i]);
}
>>> red blue green pink
/* forEach() 方法遍历 */
colors.forEach(function (value, index, array) {
console.log(value);
});
>>> red blue green pink
map()方法的一个小应用
/* 假如有一个数组里面存放有多个对象 把多个对象的值迭代到新的数组中 */
var colors = [
{
color: "red",
value: "#12312",
},
{
color: "black",
value: "#FFFFF"
},
{
color: "white",
value: "#00000"
}
]
var newColor = colors.map(function (value, index, array) {
return value.color;
});
>>> newColor = ["red", "black", "white"];
字符串
JS的字符串用 "" 单双引号括起来，但是单双引号不能同时使用。
需要输出一个特殊的符号可以用转义字符：
/t /b // /" /'
1. 字符方法
var str = "hello world";
console.log(str.lenth); // 获取长度
>>> 11
console.log(str.charAt(1)); // 获取指定字符
>>> "e"
console.log(str.charCodeAt(1)); // 获取指定字符对应的ASCII码
>>> 101
2. 切片方法
var str = "hello world";
// 这两种方法顾头不顾尾 不会改变原字符串
console.log(str.slice(2));
console.log(str.substring(2, 7));
>>> "llo world"
>>> "llo w"
// 这种方法起始下标到结束下标都会打印出来
console.log(str.substr(2, 6);
>>> "llo wo"
3. 其他方法
var str = "hello world";
// 找到第一个指定出现的字符下标
console.log(str.indexOf("o"));
>>> 4
// 指定位置开始查找
console.log(str.indexOf("o", 6));
>>> 7
// 找到最后一个指定出现的字符下标
console.log(str.lastIndexOf("o"));
>>> 7
// 清除字符串的前后空格
var str = " hello world ";
var newStr = str.trim();
>>> hello world
// 字符大小写转换
var str = "Hello World";
console.log(str.toUpperCase()); // 转大写
console.log(str.toLowerCase()); // 转小写
>>> "HELLO WORLD"
>>> "hello world"
字符串和数值相互转换
1. 字符转数字
解析字符串中的数字
var strNum = "131312.123123";
console.log(parseInt(strNum)); // 解析遇到不是整数部分的就停止
console.log(parseFloat(strNum)); // 遇到不是数字或小数点的停止
>>> 131312
>>> 131312.123123
强转类型
var strNum = "12312a";
console.log(Number(strNum));
>>> NaN <==> Not a Number
// 可以通过isNaN()来判断字符串是否由数字组成
var re = Number(strNum);
console.log(isNaN(re));
>>> true
2. 字符串转数字
强制转换
var number = 1231.182312;
console.log(toString(number));
console.log(String(number));
>>> "1231.182312"
>>> "1231.182312"
// 保留小数点进位
console.log(number.toFiex(1)); // 保留1位小数
>>> "1231.2"
隐式转换
var number = 1231.182312;
console.log("" + number);
console.log("".concat(number));
>>> "1231.182312"
>>> "1231.182312"
条件判断
条件判断语句为 if 语句，其语法为：
if ("条件"){
alert("run this code");
}
else if ("条件"){
alert("run this code");
}
else{
alert("run this code");
}
switch
switch() 传入的值匹配上哪一个模块就会执行哪个模块的代码，如果找不到对应的代码，则执行 default 模块。
（如果case里面没有 break 语句，模块执行完毕后不会结束，会顺序往下执行）
var parameter = "A";
switch (parameter) {
case "A":
console.log("run this case A");
break;
case "B":
console.log("run this case B");
break;
case "C":
console.log("run this case C");
break;
default:
console.log("other");
break;
}
>>> run this case A
三元运算符
三元运算可以解决单个 if ...else 的结构体，从而使代码更加精简。
条件判断 ? 条件为真(run this code) : 条件为假(run this code);
// 例：如果1 < 2 结果为 true 否则结果为 false
var re = 1 < 2 ? "true" : "false";
>>> true
循环语句
1. for 循环
for (循环开始条件; 循环结束条件; 递增、减条件)
{
run this code;
}
for (;;){
“这是一个死循环的for”
}
2. while 循环
while ("条件判断语句"){
run this code;
}
3. do-while
先判断后执行（至少执行一次）
do{
run this code;
}while("循环的条件");
函数的定义
函数一般用来封装一些重复的代码，函数需调用才能执行。
function "函数名" ("形参")
{
run this code;
"函数体"
return "返回一个结果";
}
函数表达式
函数表达式就是一个没有名字的函数，但是要用一个变量去接收。通过变量名去调用函数。
var "变量" = function (){
run this code;
"函数体"
return "返回一个结果";
}
作用域
在函数内部定义的变量叫局部变量，只能在函数体内使用；
var name; // 全局变量
function myFunction (){
var parame; //局部变量 只能在函数内使用
}
Globle对象
1. 编码方法
encodeURI()
# 用于整个url 且改方法不会对特殊字符进行编码
var url = "http://www.test.com/test one.hml#frist";
console.log(encodeURI(url));
>>> http://www.test.com/test%20one.hml#frist
encodeURIComponent()
# 用于url的某一个片段，且会对任何非标准字符进行编码
url = "http://www.test.com/test one.hml#frist";
console.log(encodeURIComponent(url));
>>> http%3A%2F%2Fwww.test.com%2Ftest%20one.hml%23frist
2. 解码方法
decodeURI()
对应的解码是解encodeURI( ) 的反码。
decodeURIComponent()
对应解 encodeURIComponent() 可以解码任何特殊字符的编码。
[www.cnblogs.com/jjq-exchang…]:
对象Object
JS创建一个对象：
// 创建一个person对象， person有姓名、年龄、性别、爱好等属性
var person = {
name: "hjd",
age: 18,
sex: "男",
// 对象里面可以放函数，函数可以有传参、返回值
fav: function(){
alert("爱好前端");
}
}
// 输出一个对象
console.log(person);
// 获取对象的一个属性
conslole.log(person.name);
// 调用对象里的函数
console.log(person.fav());
日期对象
1. 创建一个日期对象
var date = new Date();
2. Date的常用方法
// Date()返回的只是一个对象 需要自己去构造格式化
var date = new Date();
var day = date.getDate(); // 获取日 1-31天
var month = date.getMonth(); // 获取月份 0-11月 操作数据的时候要+1
var year = date.getFullYear(); //获取年份
var toDay = date.getDay(); // 获取天 周一 - 周日
var hours = date.getHours(); // 获取小时
var minutes = date.minutes(); // 获取分钟
var seconds = date.seconds(); // 获取秒
3. 日期格式化方法
date.toDateString();
>>> Sat Aug 22 2020
date.toTimeString();
>>> 14:01:45 GMT+0800 (中国标准时间)
date.toLocaleDateString();
>>> 2020/8/22
date.toLocaleTimeString();
>>> 下午 2:01:45
date.toLocaleString();
>>> 2020/8/22 下午 2:01:45
Math数学对象
1. 属性
2. 数学对象的一些方法
最大最小值
var max = Math.max(1, 2, 14);
var min = Math.min(10, 100, 69);
>>> max = 14
>>> min = 10
/* 获取数组的最大最小值 */
var array = [10, 89, 566, 1];
// 常规写法
var max = Math.max(arr[0], arr[1], arr[2], arr[3]);
>>> max = 566
// 简写
var max = Math.max.apply(null, arr);
>>> max = 556
进位
var number = 24.8;
console.log(Math.ceil(num)); // 天花板函数 不管多少 总是进一位
>>> 25
console.log(Math.floor(number)); // 地板函数 不管多少 前面数值不会进位
>>> 24
console.log(Math.round(number)); // 四舍五入函数
>>> 25
随机数
// 随机数random() 是0 - 1的范围
var re = Math.random();
>> re = 0.33170895713993165
// 获取某个区间的随机整数
function random(startNumber, endNumber) {
var intNum = Math.floor(Math.random() * (endNumber - startNumber));
return intNum;
}
console.log(random(1, 88));
获取随机颜色
// 颜色的格式为 rgb(0~255, 0~255, 0~255)
function randomColor() {
// 使用上面的random()函数
var r = random(0, 256);
var g = random(0, 256);
var b = random(0, 256);
// 模版字符串（构造输出）
var re = `rgb(${r},${g},${b})`;
return re;
}
randomColor();
获取随机验证码
// 获取随机验证码
function creatCode() {
var code = "";
var randomCode = [1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F", "G",
"H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "L", "S", "T",
"U", "V", "W", "X", "Y", "Z"];
for (var i = 0; i < 4; i++){
var codeValue = random(0, 36);
code += randomCode[codeValue];
}
return code;
}
creatCode();
Windows对象
windows对象是一个全局对象，任何在网页中声明的变量、函数、数组对象等都变成windows的属性和方法。
window.alert("data"); // 弹出提示框
window.confirm("data"); // 有返回值的提示框, 确定(true), 取消(flase)
window.prompt("data"); // 弹出一个带有输入的提示框
