Java之JavaScript详解(No.24)
1、JavaScript
JavaScript是一门流行的脚本语言,一个合格的后端编程人员,必须要精通JavaScript。
ECMAScript是JavaScript的一个标准。其目前最新版为ES6,但大部分浏览器还停留在只支持ES5版本代码(一般容易会出现“开发环境”与“上线环境”版本不一致的问题)。
使用JavaScript时,需熟练掌握并运用浏览器开发者工具中最常用四个功能模块。
2、两种JavaScript导入方式(Two JavaScript Import Methods)
2.1、JavaScript内部导入方式(JavaScript Internal Import Method)。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript内部导入方式</title>
<!--
JavaScript内部导入方式:JavaScript开放标签与闭合标签之间的都是JavaScript代码。
JavaScript标签必须成对存在,且其中type不用显示定义,默认就是“text/javascript”。
JavaScript标签代码中,可以使用全部用单引号(')括起来的字符串,也可以使用全部用双引号(")括起来的字符串,一般建议使用双引号。
-->
<script type="text/javascript">
alert("\"JavaScript内部导入方式!\"");
// alert('\'JavaScript内部导入方式!\'');
</script>
</head>
<body>
</body>
</html>
2.2、JavaScript外部导入方式(JavaScript External Import Method)。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript外部导入方式</title>
<!--
JavaScript外部导入方式:JavaScript开放标签与闭合标签之间的都是JavaScript代码。
JavaScript标签必须成对存在,其中src代表外部导入的JavaScript文件路径,且其中type不用显示定义,默认就是“text/javascript”。
-->
<script src="../../../javascript/JavaScript外部导入方式.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
其JavaScript示例代码,如下所示。
//JavaScript代码中,可以使用全部用单引号(')括起来的字符串,也可以使用全部用双引号(")括起来的字符串,一般建议使用双引号。
alert("\"JavaScript外部导入方式!\"");
// alert('\'JavaScript外部导入方式!\'');
3、JavaScript基本语法(JavaScript Basic Grammar)
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript基本语法</title>
<!--JavaScript严格区分大小写-->
<script>
//1、定义变量:变量类型 变量名=变量值
var score=90;
//2、条件控制
if(score>=0 && score<60){
alert("0~59");
}else if(score>=60 && score<90){
alert("60~89");
}else if(score>=90 && score<=100){
alert("90~100");
}else{
alert("不在0~100之间");
}
console.log(score);//在浏览器的控制台打印输出变量
</script>
</head>
<body>
</body>
</html>
4、JavaScript严格检查格式(JavaScript Strict Check Format)
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript严格检查格式</title>
<!--
严格检查格式的前提:IDEA需设置支持ES6版本语法
"use strict";代表“严格检查格式”,预防JavaScript的随意性导致的一些问题,
且必须写在JavaScript代码中的首行,其中局部变量建议都使用“let”定义
-->
<script>
"use strict";//严格检查格式
for (var i = 0; i < 10; i++) {
console.log(i + 1);
}
console.log(i + 1);//11
for (let j = 0; j < 10; j++) {
console.log(j + 1);
}
console.log(j + 1);//异常:Uncaught ReferenceError: j is not defined
</script>
</head>
<body>
</body>
</html>
5、JavaScript数据类型(JavaScript Data Type)
5.1、字符串(String)。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串</title>
</head>
<body>
<script>
//正常字符串可以使用用单引号(')包裹起来,也可以使用全部用双引号(")包裹起来,一般建议使用双引号包裹起来。
//1、转义字符,使用反斜杠符号\。
var escapeCharacter1="\'";//单引号字符
console.log(escapeCharacter1);
var escapeCharacter2="\r";//回车字符
console.log(escapeCharacter2);
var escapeCharacter3="\n";//换行字符
console.log(escapeCharacter3);
var escapeCharacter4="\t";//制表字符
console.log(escapeCharacter4);
var escapeCharacter5="\u4e2d";//Unicode字符,汉字“中”
console.log(escapeCharacter5);
var escapeCharacter6="\x43";//ASCII字符,字母“C”
console.log(escapeCharacter6);
//2、多行字符串,使用反单引号(即,反引号)符号`。
var multiLineString= `多
行
字
符
串`;
console.log(multiLineString);
//3、模板字符串,使用反单引号(即,反引号)符号`+美元符号$+花括号{}包裹。
var templateString="模板字符串";
var msg=`这是${templateString}`;
console.log(msg);
//4、字符串长度
var stringLength=msg.length;
console.log(stringLength);
//5、字符串的可变性:不可变。
console.log(msg[0]);
msg[0]="那";
console.log(msg[0]);
//6、字符串大小写转换,使用toUpperCase()与toLowerCase()方法。
var stringUpperCase="1aBcDe".toUpperCase();//转换为大写字符串
console.log(stringUpperCase);
var stringLowerCase="2AbCdE".toLowerCase();//转换为小写字符串
console.log(stringLowerCase);
//7、获取字符串中指定元素的下标位置,使用indexOf()方法。
var stringIndexOf="123456789".indexOf("1");
console.log(stringIndexOf);
//8、获取字符串中指定区间范围内的子字符串,使用substring()方法。
var stringSubstring1="123456789".substring(0);//获取字符串中从下标0开始到最大下标之间的子字符串
console.log(stringSubstring1);
var stringSubstring2="123456789".substring(0,3);//获取字符串中从下标0开始到下标2(即,3-1)之间的子字符串
console.log(stringSubstring2);
</script>
</body>
</html>
5.2、数组(Array)。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<script>
/**
* 数组:Array,可以包含任意的数据类型,且通过下标赋值与取值
* 特别注意:更改数组长度时,数组大小会发生变化,若赋值过小,其部分数组元素会丢失。
*/
//1、获取数组长度
var arr1 = [1, "1", null, false];
console.log(arr1.length);
var arr2 = new Array("1", 1, 5, 3, 9, 7, null, true);
console.log(arr2.length);
//2、获取数组中指定元素的下标位置,使用indexOf()方法。
var arrIndex = arr1.indexOf("1");
console.log(arrIndex);
//3、slice():截取数组的一部分,返回一个新数组,类似于字符串中的substring()。
var arr3 = arr2.slice(1, 7);//获取数组中从下标1开始到下标6(即,7-1)之间的子数组
console.log(arr3);
//push():压入指定元素至数组尾部(即,插入指定元素至数组尾部)
arr3.push(['push']);
console.log(arr3);
//pop():弹出数组尾部的一个元素(即,移除数组尾部的元素)
arr3.pop();
console.log(arr3);
//unshift():压入指定元素至数组头部(即,插入指定元素至数组头部)
arr3.unshift(['unshift']);
console.log(arr3);
//shift():弹出数组头部的一个元素(即,移除数组头部的元素)
arr3.shift();
console.log(arr3);
//sort():排序数组元素
arr3.sort();
console.log(arr3);
//reverse():反转数组元素
arr3.reverse();
console.log(arr3);
//concat():拼接指定的数组元素,并不会修改拼接前的原数组,而是返回一个拼接后的新数组
var arr4 = arr3.concat([8, 2, 6]);
console.log(arr4);
//join():指定连接字符串拼接数组元素
console.log(arr4.join('-').substring(1,arr4.join('-').length));
//多维数组
var arr5=[[1,'a'],[2,"b"],[3,false]];
console.log(arr5[1][1]);
var arr6=new Array([1,'a'],[2,"b"],[3,false])
console.log(arr6[1][1]);
</script>
</body>
</html>
5.3、对象(Object)。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象</title>
</head>
<body>
<script>
/*
* 对象:{......}表示一个对象,包含若干个键值对,每个键值对表示一个属性,多个属性之间使用逗号隔开,最后一个属性不加逗号。
* 特别注意:JavaScript对象中所有的键都是字符串,所有的值是任意对象。
* */
//1、定义对象
var person={
id:1,
name:"xueshanxuehai",
age:22,
mobilephone:"12345678901"
}
console.log(person);
//2、对象赋值
person.name="学山学海";
console.log(person);
//3、使用一个不存在的对象属性,不会报错,只会提示Undefined
console.log(person.job);
//4、动态的删减对象属性:通过delete删除对象的属性
delete person.name;
console.log(person);
//5、动态的添加对象属性:直接给新的属性添加值即可
person.job="Java后台";
console.log(person);
//6、判断对象属性或方法是否存在于这个对象中,其语法为:'对象属性或方法' in 对象。
console.log('name' in person);
console.log('job' in person);
console.log('toString' in person);
//7、判断对象属性或方法是否为这个对象自身拥有的:其语法为:对象.hasOwnProperty('对象属性或方法')。
console.log(person.hasOwnProperty('job'));
console.log(person.hasOwnProperty('toString'));
</script>
</body>
</html>
5.4、流程控制(Process Control)。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制</title>
</head>
<body>
<script>
//1、if判断
var age=22;
if(age>=0 && age<=59){
console.log("0~59");
}else if(age>=60 && age<=100){
console.log("0~59");
}else{
console.log("不在0~100之间");
}
//2、while循环:尽量避免死循环
age=20;
while(age<100){
age++;
console.log(age);
}
//3、do-while循环:尽量避免死循环
age=30;
do{
age++;
console.log(age);
}while(age<100);
//4、for循环:尽量避免死循环
for (let i = 0; i < 100; i++) {
console.log(i+1);
}
//5、for-Each循环:尽量避免死循环
var fe=[1,2,3,2,1];
fe.forEach(function (value) {
console.log(value);
})
fe.forEach(function (value, index, array) {
console.log(value, index, array);
});
//6、for-in循环:循环遍历的是对象属性,而不是数组索引,所以for-in可以遍历数组,也可以遍历对象。
for (const feKey in fe) {
if(fe.hasOwnProperty(feKey)){
console.log("数组自身拥有的元素:"+fe[feKey]);
}
}
var forIN={
id:1,
name:"For-In",
f1:"F1",
f2:"F2",
f3:"F3"
}
for (const forINKey in forIN) {
if(forIN.hasOwnProperty(forINKey)){
console.log("对象自身拥有的属性:"+forIN[forINKey]);
}
}
</script>
</body>
</html>
5.5、Map和Set。
Map和Set是ES6的新特性。
Map
是一组键值对的结构,具有极快的查找速度。
Set
和Map
类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set
中,没有重复的key。要创建一个Set
,需要提供一个Array
作为输入,或者直接创建一个空Set
。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Map和Set</title>
</head>
<body>
<script>
/**
* Map:是一组键值对的集合(即,无序不重复集合),具有极快的查找速度。
* Set:是一组key键的集合(即,无序不重复集合),但不存储value值。
*/
//1、Map集合
var mapCollection=new Map([['001',1],['005',5],['002',2],['001',4]]);
console.log(mapCollection);
console.log(mapCollection.get('001'));//通过key获取value
mapCollection.set('004',4);//新增或修改指定key与value
console.log(mapCollection);
mapCollection.delete('002');//删除指定key及其value
console.log(mapCollection);
console.log(mapCollection.has('004'));//是否包含指定key
//2、Set集合
var setCollection=new Set(['001','005','003','001']);
setCollection.add(1);//添加指定key
console.log(setCollection);
setCollection.delete('003');//删除指定key
console.log(setCollection);
console.log(setCollection.has(1));//是否包含指定key
</script>
</body>
</html>
5.6、Iterator。
Iterator是ES6的新特性。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iterator</title>
</head>
<body>
<script>
/**
* Iterator:使用Iterator迭代遍历数组、Map集合、Set集合。
*/
//1、遍历数组
var iterArr=[1,5,9,2,6];
for (const number of iterArr) {
console.log(number);
}
//2、遍历Map集合
var iterMap=new Map([['1',1],['5',5],[1,1],['3',3]]);
for (const iterMapElement of iterMap) {
console.log(iterMapElement);
}
//3、遍历Set集合
var iterSet=new Set(['1','7',5,3]);
for (const iterSetElement of iterSet) {
console.log(iterSetElement);
}
</script>
</body>
</html>
6、JavaScript函数(JavaScript Function)
6.1、函数定义(Function Definition)。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数定义</title>
</head>
<body>
<script>
//1、函数定义方式1:一旦执行到return代表函数结束,返回结果;若没有执行到return,函数执行完后也会返回结果“Undefined”。
function abs1(x) {
if(x>=0){
return x;
}else{
return -x;
}
}
console.log(abs1(11));//调用函数
console.log(abs1(-11));//调用函数
//2、函数定义方式2:是一个匿名函数,但可以把结果赋值给abs2,通过abs2就可以调用函数。
var abs2=function (x) {
if(x>=0){
return x;
}else{
return -x;
}
}
console.log(abs2(11));//调用函数
console.log(abs2(-11));//调用函数
/**
* JavaScript可以传递任意个参数,也可以不传递参数。
* 3、参数问题1:若不存在传递参数或传递参数类型不一致,如何避免?
*/
var abs3=function (x) {
//手动抛出异常判断
if((typeof x)!=='number'){
throw 'Not A Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
// console.log(abs3('a'));//调用函数
/**
* arguments关键字代表函数传递的所有参数,是一个数组(即,参数数组)。
* 4、参数问题2:若要使用多余的参数来进行附加操作,如何排除已定义参数?
* ES6新特性:...rest,代表已定义参数之外的所有参数,且...rest只能写在参数列表的最后面。
*/
var abs4=function (x,...rest) {
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
console.log(abs4(-11,1,2,3,['1',1],[2]));//调用函数
</script>
</body>
</html>
6.2、变量作用域(Variable Scope)。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量作用域</title>
</head>
<body>
<script>
/**
* JavaScript中,var定义变量实际是有作用域的。
*/
//1、在函数体中声明,则在函数体外不可使用(若一定要实现使用,后续可以研究一下”闭包“)
function f1() {
var x = 1;
}
//x++;//抛出异常:x is not defined
//2、若2个函数使用了相同的变量名,只要在函数内部,就不冲突
function f2() {
var x = 2;
return x;
}
function f2_1() {
var x = 3;
return x;
}
console.log(f2());
console.log(f2_1());
//3、内部函数可以访问外部函数的成员,反之则不行
function f3() {
var x = 4;
function f3_1() {
var y = x + 1;
return y
}
console.log(f3_1());
//var z=x+y;//抛出异常:y is not defined
return x;
}
console.log(f3());
//4、若内部函数变量和外部函数变量重名,会由内向外查找,即,内部函数会屏蔽外部函数的重名变量。
function f4() {
var x = 5;
function f4_1() {
var x = 5.1;
return x;
}
console.log(f4_1());
return x;
}
console.log(f4());
/**
* 5、提升变量作用域:JavaScript执行引擎,自动提升稍晚声明变量的声明,但不会提升稍晚声明变量的赋值。
* 特别注意:建议将所有的变量定义都放在函数的头部,便于代码维护管理,养成良好的编码规范。
*/
function f5() {
var x = "x" + y;
console.log(x);
var y = "y";
return y;
}
console.log(f5());
function f5_1() {
var y = "y", x = "x" + y;
console.log(x);
return y;
}
console.log(f5_1());
/**
* 6、全局作用域:全局变量、全局函数、全局对象(window)。
* 特别注意:
* 6.1、默认所有的全局变量都会自动绑定在全局对象(window)下;
* 6.2、JavaScript实际上只有一个全局作用域,任何变量(函数也可以视作变量),若没有在函数作用域内找到,就会向外查找,若在全局作用域都没有找到,则提示“Undefined”;
* 6.3、将所有代码全部放入自定义的唯一空间名字中,降低全局命名冲突的问题。
*/
var x = "全局变量";
function f6() {//全局函数
console.log(x);
}
f6();
console.log(x);
console.log(window.x);//默认所有的全局变量都会自动绑定在全局对象(window)下
// window.alert(x);
window.alert = function () {};//重新定义window对象的alert方法
window.alert(x);//提示“Undefined”
//定义唯一全局变量:唯一全局对象、唯一全局变量、唯一全局函数。
var myApp={};//唯一全局对象
myApp.name="xueshanxuehai";//唯一全局变量
myApp.add=function (a,b) {//唯一全局函数
return a+b;
}
console.log(myApp);
console.log(myApp.name);
console.log(myApp.add(1,2));
/**
* 7、局部作用域:定义局部作用域的变量时,土建使用let关键字(ES6新特性),可以解决var关键字的局部作用域冲突问题。
*/
function f7_1() {
for (var i = 0; i < 10; i++) {
console.log(i+1);
}
console.log(i+1);//异常结果:变量i出了for循环作用域还能使用
}
f7_1();
function f7_2() {
for (let i = 0; i < 10; i++) {
console.log(i+1);
}
// console.log(i+1);//正常结果:变量i出了for循环作用域不能使用,会提示异常“Uncaught ReferenceError: i is not defined”
}
f7_2();
/**
* 8、常量(const):ES6新特性,可以将变量定义为只读变量(即,不允许再赋值改变),推荐使用。
* 特别注意:ES6之前,统一要求只有全部大写字母命名的变量才是常量,不利于代码维护,不建议使用。
*/
var PI1="3.14159";
console.log(PI1);
PI1="3.14";
console.log(PI1);
const PI="3.1415";//常量(只读变量)
console.log(PI);
// PI="3.1";//提示异常"Uncaught TypeError: Assignment to constant variable."
// console.log(PI);
</script>
</body>
</html>
6.3、方法定义(Method Definition)。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方法定义</title>
</head>
<body>
<script>
/**
* 方法定义:方法就是把函数放到对象中,且对象只有两个东西“属性和方法”。
* 特别注意:
* 1、在JavaScript中,this是无法指向的,默认指向调用它的那个对象。
* 2、在JavaScript中,使用apply方法可以控制this指向。
*/
//方法定义方式1
var person1={
name:"xsxh",
birthYear:1991,
age:function () {
var nowYear=new Date().getFullYear();
return nowYear-this.birthYear;
}
};
console.log(person1.name);
console.log(person1.age());
//方法定义方式2
function getAge() {
var nowYear=new Date().getFullYear();
return nowYear-this.birthYear;
}
var person2={
name:"xsxh",
birthYear: 1991,
age:getAge
};
console.log(person2.name);
console.log(person2.age());
/**
* apply方法:在JavaScript中,使用apply方法可以控制this指向。
* 特别注意:在JavaScript中,this是无法指向的,默认指向调用它的那个对象。
*/
var person3={
name:"学山学海",
birthYear:2001,
age:getAge
}
console.log(getAge.apply(person2,[]));//this指向对象person2,参数为空
console.log(getAge.apply(person3,[]));//this指向对象person3,参数为空
</script>
</body>
</html>
7、JavaScript内部对象(JavaScript Internal Object)
7.1、标准对象(Standard Object)。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标准对象</title>
</head>
<body>
<script>
console.log(typeof 123);//number
console.log(typeof 123.321);//number
console.log(typeof '123.123');//string
console.log(typeof true);//boolean
console.log(typeof NaN);//number
console.log(typeof []);//object
console.log(typeof {});//object
console.log(typeof Math.abs);//function
console.log(typeof undefined);//undefined
</script>
</body>
</html>
7.2、Date对象(Date Object)。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date对象</title>
</head>
<body>
<script>
//1、基本使用
var nowDate = new Date();//当前日期时间
console.log(nowDate);
console.log(nowDate.getFullYear());//年份
console.log(nowDate.getMonth());//月份(0~11)
console.log(nowDate.getDate());//日
console.log(nowDate.getDay());//星期几
console.log(nowDate.getHours());//小时
console.log(nowDate.getMinutes());//分钟
console.log(nowDate.getSeconds());//秒
console.log(nowDate.getMilliseconds());//毫秒
console.log(nowDate.getTime());//时间戳,全世界统一,从1970/01/01 00:00:00开始的毫秒数
//2、基本转换
var timeStamp = nowDate.getTime();//时间戳,全世界统一,从1970/01/01 00:00:00开始的毫秒数
nowDate = new Date(timeStamp);//将时间戳转换为日期时间
console.log(nowDate);
console.log(nowDate.toLocaleString());//本地日期时间字符串
console.log(nowDate.toUTCString());//UFC日期时间字符串
</script>
</body>
</html>
7.3、JSON对象(JSON Object)。
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
在JavaScript中,一切皆为对象,任何JavaScript支持的类型都可以用JSON来表示。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON对象</title>
</head>
<body>
<script>
/**
* 在JavaScript中,一切皆为对象,任何JavaScript支持的类型都可以用JSON来表示
* JSON(JavaScript Object Notation,js对象简谱)对象
* 其语法格式为:
* 1、使用对象:值为字符串时,'{"key1":"value1","key2":"value2",...}',
* 值不为字符串时,'{"key1":value1,"key2":value2,...}';
* 2、使用数组:值为字符串时,'[{"key11":"value11","key12":"value12"},{"key21":"value21","key22":"value22"},...]',
* 值不为字符串时,'[{"key11":value11,"key12":value12},{"key21":value21,"key22":value22},...]';
* 3、使用键值对:值为字符串时,"key":"value",
* 值不为字符串时,"key":value。
*/
//1、JavaScript对象
var javaScriptObject={id:1,name:"JavaScript"};
console.log(javaScriptObject);
//2、JavaScript对象转换为JSON对象
console.log(JSON.stringify(javaScriptObject));
//3、JSON对象
var jsonObject='{"id":2,"name":"JSON"}';
console.log(jsonObject);
//4、JSON对象转换为JavaScript对象
console.log(JSON.parse(jsonObject));
//5、JavaScript数组
var javaScriptArr=[[{k11:"v11"},{k12:"v12"}],[{k21:"v21"},{k22:"v22"}]];
console.log(javaScriptArr);
//6、JavaScript数组转换为JSON数组
console.log(JSON.stringify(javaScriptArr));
//7、JSON数组
var jsonArr='[[{"k11":"v11"},{"k12":"v12"}],[{"k21":"v21"},{"k22":"v22"}]]';
console.log(jsonArr);
//8、JSON数组转换为JavaScript数组
console.log(JSON.parse(jsonArr));
</script>
</body>
</html>
8、JavaScript面向对象编程(JavaScript Object-Oriented Programming)
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript面向对象编程</title>
</head>
<body>
<script>
/**
* JavaScript面向对象编程本质:查看对象原型
*/
//1、原型继承:原型对象
var dog={
name:"小黄",
age:1,
run:function () {
console.log(this.name+","+this.age+",run");
}
};
var dog1={name:"小红"};
console.log(dog1);
dog1.___Proto___=dog;//对象dog1的原型对象为dog
console.log(dog1);
var bird={
fly:function () {
console.log(this.name+","+this.age+",fly");
}
}
//
dog1.___Proto___=bird;//对象dog1的原型对象为bird
console.log(dog1);
//2、class继承:ES6新特性
class Dog{//定义一个Dog类
constructor(name) {
this.name=name;
}
run(){
alert('Run');
}
}
class Dog1 extends Dog{//定义一个Dog1类,继承Dog类
constructor(name,age) {
super(name);
this.age=age;
}
getAge(){
alert('getAge');
}
}
var d1=new Dog("小红");
console.log(d1);
var d2=new Dog1("小黄",1);
console.log(d2);
</script>
</body>
</html>
9、JavaScript操作BOM对象(JavaScript Manipulate BOM Objects)
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript操作BOM对象</title>
</head>
<body>
<dl id="app">
<dt>HTML5</dt>
<dt>CSS3</dt>
<dt>JavaScript</dt>
</dl>
<script>
/**
* BOM(Browser Object Model,浏览器对象模型):主要用于Web开发中客户端浏览器的管理。
*/
//1、window对象:代表浏览器的窗口
// console.log(window.alert("window"));//弹窗
console.log(window.innerWidth);//返回窗口的文档显示区的宽度
console.log(window.innerHeight);//返回窗口的文档显示区的高度
console.log(window.outerWidth);//返回窗口的外部宽度
console.log(window.outerHeight);//返回窗口的外部高度
/**
* 2、navigator对象:封装了浏览器的信息
* 特别注意:大多数时候不会使用navigator对象,会被人为修改,所以不建议使用其属性判断及编写代码。
*/
console.log(navigator.appName);//浏览器的名称
console.log(navigator.appVersion);//浏览器的平台和版本信息
console.log(navigator.appCodeName);//浏览器的代码名
console.log(navigator.userAgent);//浏览器用于HTTP请求的用户代理头的值
console.log(navigator.platform);//运行浏览器的操作系统和(或)硬件平台
//3、screen对象:包含有关客户端显示屏幕的信息
console.log(screen.width);//显示浏览器的屏幕的宽度
console.log(screen.height);//显示浏览器的屏幕的高度
//4、location对象:包含有关当前URL的信息
// location.assign("https://www.baidu.com/");//设置当前网页的URL地址
//5、document对象:代表当前的页面(HTML的DOM文档树)
//5.1、获取或设置文档树标题
console.log(document.title);//当前文档的标题(HTML的title元素中的文本)
document.title="baidu";
console.log(document.title);//当前文档的标题(HTML的title元素中的文本)
//5.2、获取文档树节点
var mydl=document.getElementById("app");
console.log(mydl);
/**
* 5.3、获取文档树cookie
* 特别注意:会导致恶意软件劫持cookie,从而泄露重要信息,可以通过服务器端设置cookie:"httpOnly"来避免此漏洞.
*/
var mycookie=document.cookie;
console.log(mycookie);
//6、history对象:包含用户(在浏览器窗口中)访问过的URL
// history.back();//可加载历史列表中的前一个URL(如果存在),类似于前进
// history.forward();//可加载历史列表中的下一个URL,类似于后退
</script>
</body>
</html>
10、JavaScript操作DOM对象(JavaScript Manipulate DOM Objects)
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript操作DOM对象</title>
</head>
<body>
<p id="add">add</p>
<p id="append">Append</p>
<div id="div">div1</div>
<div id="father">
<h1>h1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
/**
* DOM(Document Object Model,文档对象模型):是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。
* 浏览器网页就是一个DOM树形结构,其主要有如下四个操作:
* 1、查找DOM节点;
* 2、更新DOM节点;
* 3、删除DOM节点;
* 4、添加DOM节点;
*/
//1、查找DOM节点
var h1=document.getElementsByTagName("h1");//类似于CSS选择器标签选择器
var p1=document.getElementById("p1");//类似于CSS选择器ID选择器
var p2=document.getElementsByClassName("p2");//类似于CSS选择器类选择器
var father=document.getElementById("father");//类似于CSS选择器ID选择器
var fatherNodes=father.children;//获取父节点下所有的子节点
console.log(fatherNodes);
//2、更新DOM节点
var div=document.getElementById("div");//类似于CSS选择器ID选择器
div.innerText="div";//设置表格行的开始和结束标签之间不包含HTML的内容
div.innerHTML="<Striong>DIV</Striong>";//设置表格行的开始和结束标签之间的HTML内容
div.style.color="red";//CSS样式:设置标签颜色
div.style.fontSize="20px";//CSS样式:设置标签字体大小
div.style.padding="2em";//CSS样式:设置标签内边距
/**
* 3、删除DOM节点:先获取指定节点的父节点,再通过父节点删除指定节点
* 特别注意:删除多个节点时,节点数及下标会动态变化。
*/
// father.removeChild(p1);
// father.removeChild(father.children[0]);
// father.removeChild(father.children[1]);
//4、添加节点
//4.1、追加节点:若指定追加节点不存在,则直接追加节点,否则追加节点存在,就不能这样操作,会产生覆盖
// var appendNode=document.getElementById("append");
// father.appendChild(appendNode);
//4.2、插入节点:先创建新的节点,再实现插入节点,使用insertBefore()方法
//创建P标签节点
var newPNode=document.createElement("p");
newPNode.id="newPNode";
newPNode.innerText="PNode";
// father.insertBefore(newPNode,h1.item(0));//将新节点“newPNode”插入到指定节点“p1”之前
// father.insertBefore(newPNode,p1);//将新节点“newPNode”插入到指定节点“p1”之前
father.insertBefore(newPNode,p2.item(0));//将新节点“newPNode”插入到指定节点“p2”之前
//创建js标签节点
var addNode=document.getElementById("add");
var newJavaScript=document.createElement("script");
newJavaScript.setAttribute("type","text/javascript");
newJavaScript.innerHTML="father.appendChild(addNode);";
document.getElementsByTagName("head")[0].appendChild(newJavaScript);//追加节点
//创建css标签
var newCSS=document.createElement("style");
newCSS.setAttribute("type","text/css");
newCSS.innerHTML="body{background-color:green}";//设置css标签内容
document.getElementsByTagName("head")[0].appendChild(newCSS);//追加节点
</script>
</body>
</html>
11、JavaScript操作表单(JavaScript Manipulate Form)
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript操作表单</title>
<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
1、表单绑定提交事件:onsubmit,若返回值为true则提交表单,否则返回值为false不提交表单
-->
<form action="https://www.baidu.com" method="post" onsubmit="return md5PWD()">
<p>
<span>用户名:</span>
<input type="text" id="username" name="username"/>
</p>
<p>
<span>密码:</span>
<input type="password" id="input-password" name="password">
</p>
<input type="hidden" id="md5-password" name="password">
<p>
<span>性别:</span>
<!--多选框的值,就是定义的value值-->
<input type="radio" name="sex" value="man" id="boy"/>男
<input type="radio" name="sex" value="women" id="girl"/>女
</p>
<!--
2、按钮绑定提交事件:onclick
-->
<button type="submit" onclick="md5PWD()">提交</button>
</form>
<script>
/**
* 表单:form DOM树,
* 表单目的:提交信息。
* 表单内容:文本框、下拉框、单选框、多选框、隐藏域、密码框...
* 特别注意:
* 1、表单绑定提交事件:onsubmit,若返回值为true则提交表单,否则返回值为false不提交表单,如<form action="https://www.baidu.com" method="post" οnsubmit="return md5PWD()">;
* 2、按钮绑定提交事件:onclick,如<button type="submit" οnclick="md5PWD()">提交</button>。
*/
var username_text = document.getElementById("username");
var boy_radio = document.getElementById("boy");
var girl_radio = document.getElementById("girl");
//获取输入框的值
console.log(username_text.value);
//修改输入框的值
username_text.value = "123";
//对于单选框、多选框等固定值,用其value属性只能获取到当前值
//获取指定单选框是否被选中
console.log(boy_radio.checked);
//设置指定单选框被选中
boy_radio.checked = true;
//获取用户名
var uid = document.getElementById("username");
console.log(uid.value);
//获取输入密码
var input_pwd = document.getElementById("input-password");
console.log(input_pwd.value);
//获取MD5密码
var md5_pwd = document.getElementById("md5-password");
console.log(md5_pwd.value);
//提交表单验证:在线MD5加密用户输入密码
function md5PWD() {
input_pwd.value = md5(input_pwd.value);//在线MD5算法加密
md5_pwd.value = input_pwd.value;
console.log(md5_pwd.value);
return true;//允许提交表单
// return false;//阻止提交表单
}
</script>
</body>
</html>
12、JQuery
一般称为“JQuery库”,其含有很多JavaScript函数,类似于“工具类”,在线帮助文档。
12.1、JQuery导入方式。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery导入方式</title>
<!-- <!–方式1、导入在线JQuery–>-->
<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>-->
<!--方式2、导入本地JQuery-->
<script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="import-jquery">使用JQuery</a>
<script>
/**
* JQuery基本语法:$(selector).action();
* JQuery选择器就是CSS选择器
*/
$('#import-jquery').click(function () {
alert("JQuery");
})
</script>
</body>
</html>
12.2、JQuery选择器。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery选择器</title>
<script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="">标签选择器</a>
<hr/>
<h id="id1">ID选择器</h>
<hr/>
<p class="class1">CLASS选择器</p>
<script>
/**
* JQuery基本语法:$(selector).action();
* JQuery选择器就是CSS选择器
*/
$("a").click(function () {
alert("标签选择器");
});
$("#id1").click(function () {
alert("ID选择器");
});
$(".class1").click(function () {
alert("CLASS选择器");
});
</script>
</body>
</html>
12.3、JQuery事件。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery事件</title>
<script src="../lib/jquery-3.6.0.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
移动鼠标试试
</div>
<script>
/**
* JQuery基本语法:$(selector).action();
* JQuery事件:如鼠标事件、键盘事件等,当网页元素加载完后,才会响应事件。
*/
$(function () {
$("#divMove").mousemove(function (e) {
$("#mouseMove").text("x:"+e.pageX+",y:"+e.pageY);
});
});
</script>
</body>
</html>
12.4、JQuery操作DOM。
其HTML示例代码,如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery操作DOM</title>
<script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
<ul id="ul1">
<li class="li1">JavaScript</li>
<li name="jquery">JQuery</li>
</ul>
<script>
/**
* JQuery基本语法:$(selector).action();
* JQuery操作DOM:
*/
//1、节点文本操作
console.log($("#ul1 li[name=jquery]").text());//获取文本内容
console.log($("#ul1 li[name=jquery]").text("JQUERY"));//设置文本内容
// console.log($("#ul1").html());//获取HTML内容
// console.log($("#ul1").html("JS"));//设置HTML内容
//2、操作CSS
$("#ul1 li[name=jquery]").css({"color":"blue"});
//3、元素的显示与隐藏:其本质为“diaplay:none”。
// $("#ul1 li[name=jquery]").show();//显示元素
$("#ul1 li[name=jquery]").hide();//隐藏元素
//4、其他测试
console.log($(window).width);
console.log($(window).height);
/**
* toggle事件:
* 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的click事件。
* 如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
*/
$("#ul1 li[name=jquery]").toggle();
//5、后续AJAX...
</script>
</body>
</html>
13、学习经验
巩固HTML+CSS:多模仿学习其它的优秀网站源码。
巩固JavaScript:多模仿学习JQuery源码与游戏源码。