JavaScript（总结完毕）2021.3.7

概述

1.什么是JavaScript

JavaScript是一门世界上最流行的脚本语言

一个合格的后端人员，必须精通JavaScript

1.1历史

https://blog.csdn.net/kese7952/article/details/79357868

2 快速入门

2.1 引用JavaScript

首先创建一个普通java项目名字为JavaScript,j建一个html编写JavaScript

1.内部标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--script标签内，写JavaScript代码--><script>alert('hello,world');
</script>
<!--不用显示定义type，默认也是JavaScript--><script type="text/javascript"></script>
</head>
<body><!--这里也可以存放-->
</body>
</html>

2.外部引入

创建一个js文件夹，建一个js做外部引用

alert('hello,javascript');

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--外部引入-->
<!-- 注意：script，必须成对出现--><script src="js/lwh.js"></script>
<!--不用显示定义type，默认也是JavaScript--><script type="text/javascript"></script>
</head>
<body><!--这里也可以存放-->
</body>
</html>

2.2基本语法入门

浏览器必备调试须知：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--JavaScript严格区分大小写 --><script>//1.定义变量  变量类型  变量名 = 变量值；var score=80;//  alert(num);//2.条件控制if (score>60 && score<70){}else if (score>60 && score<=80){alert("及格")}else if (score>80 && score<=100){alert("优秀")}else {alert("bad boy");}//console.log(score) 在浏览器控制台打印变量，等于java的sout</script></head>
<body></body>
</html>

debug

2.3数据类型

数值：文本，图形，音频，视频。。。

变量: var

number：js不区分整数和小数

字符串：‘abc’ “abc”

布尔值：true,false

逻辑运算

比较运算符

浮点数问题：

console.log((1/3)===(1-2/3))

尽量避免使用浮点数运算，存在精度问题

console.log((1/3)===(1-2/3))

Math.abs(1/3-(1-2/3))<0.0000000001

null和undefined

null 空
undefined 未定义

数组

对象

对象是大括号，数组是中括号

每个属性之间使用逗号隔开，最后一个不需要添加
   //Person person=new person(1,2,3,4,5);var person={name:"lwh",age:3,tags:['js','java','web']}

取对象的值

person.age
3

2.4严格检查模式

<!--前提：idea需要设置支持es6语法'use strict'；严格检查模式，预防javascript的随意性导致产生的一些问题必须写在javascript的第一行！局部变量使用let去定义
-->
</head>
<body>
<script>'use strict'//全局变量let i=1;
</script>

3.数据类型

3.1字符串

4.模板字符串

<script>'use strict';let name="lwh";let age = 3;let msg=`你好呀,${name}`
</script>

console.log(msg)
VM111:1 你好呀,lwh
undefined
var student="student"
undefined
console.log(student.length)
VM173:1 7

5.字符串的可变性，不可变

student[0]=1
1
console.log(student)
VM228:1 student
undefined

6.大小写转换

//注意，这里时方法，不是属性要（）
console.log(student.toUpperCase)
VM286:1 ƒ toUpperCase() { [native code] }
undefined
console.log(student.toUpperCase())
VM296:1 STUDENT
undefined
console.log(student.toLocaleLowerCase())
VM359:1 student
undefined

7.字符串下标

console.log(student.indexOf(‘u’))

8.字符串截取

console.log(student.substring(1)//从第一个截取到最后一个字符串
console.log(student.substring(1,3)) // [1,3)含头不含尾

3.2数组

Array可以包含任意的数据类型

var arr=[1,2,3,4,5,6] //通过下标取值和赋值
arr[0]
arr[0]=1

1.长度

arr.length

注意：加入arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

2.indexOf,通过元素获得下标索引

3.3对象

若干个键值对

var 对象名 ={属性名：属性值，属性名：属性值，属性名：属性值
}//定义了一个对象他有四个属性var person ={name:"lwh",age:3,
email:"sssssssss",score:55}

JavaScript中所有的键都是字符串，值是任意对象

3.4流程控制

if判断

        var age = 3;if (age>3){alert("hhh");}else {alert("hhh~");}

while循环，避免程序死循环

  while (age<100){age=age+1;console.log(age)}

for循环

        var age = 3;for (let i = 0; i <100 ; i++) {console.log(i)}

forEach循环

5.1引入

  var age = [1,212,12,2,12,12,12,12,5555];age.forEach(function (value){console.log(value)})

for in

    var age=[121,2,1,212,12,22];
for (var num in age){if (age.hasOwnProperty(num)){console.log("存在")console.log(age[num])}
}

3.5Map和Set

es6新特性

//es6 Map// 学生的成绩和学生的名字var map=new Map([['tom',200],['jack',100],['hhh',88]]);var  name = map.get('tom');//通过key获得valuemap.set("admin",1212212);
console.log(name);

Set:无序不重复的集合

   set.delete(1);set.add(5);
console.log(set.has(3));//是否包含某个元素

3.6 iterator

遍历数组

    var arr=[3,4,5]for (var x of arr){console.log(x);}

遍历map

    var map =new Map([['tom',100],['kk',200],               ['ddd',5565]]);for (let x of map){console.log(x);}

遍历set

  var set =new Set([5,6,7]);for (let x of set){console.log(x)}

4.函数

4.1 定义函数

定义方式一

绝对值函数

function abs(x){if(x>=0){return x;}else{return -x;}
}

public 返回值类型 方法名（）{
return 返回值
}

一旦执行return代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果 undefined

定义方式二

var abs = function(x){if(x>=0){return x;
}  else{return -x;
}
}

arguments

arguments是js免费赠送的关键字

代表传递进来的所有的参数，是一个数组！

    var  abs=function (x){console.log("x=>"+x);for (var i=0;i<arguments.length;i++){console.log(arguments[i]);}if (x>=0){return x;}else{return -x;}}

rest参数只能写在最后面，必须用…标识

4.2 变量的作用域

定义在函数外就是全局定义

var全局变量 let局部变量 const常量

在JavaScript中，var定义变量实际是有作用域的

假设在函数中声明，则在函数外不可使用（非要想实现的话可以研究一下闭包）

 'use strict'function lwh(){var x=1;x=x+1;}x=x+2;//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

    function lwh(){var x=1;x=x+1;}function lwh1(){var x="a";x=x+1;}

提升变量作用域

  function lwh(){var x="x"+y;console.log(x);var y='y';}

结果：xundefined

说明：js执行引擎，自动提升了y的声明，但是不会提升y的赋值

全局函数

    'use strict'
//全局变量x=1;function lwh(){console.log(x);}
lwh()console.log(x);

全局对象Window

var x='xxx';alert(x);alert(window.x); //默认所有所有的全局变量都会自动绑定在window中

alert()这个函数本身也是一个window的变量

var x='xxx';window.alert(x);var old_alert=window.alert;//old_alert(x);
window.alert=function (){}
//发现alert失效了
window.alert(123);//恢复window.alert=old_alert;window.alert(456);

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错ReferenceError

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件,使用相同的全局变量，冲突-》如果能减少冲突？

    //唯一全局变量var liangwh={};//定义全局变量liangwh.name="lwh";liangwh.add=function (a,b){returna+b;}

把自己的代码全部放入自己唯一空间名字中，降低全局命名冲突的问题

jQuery

局部作用域

function aaa(){for (var i = 0; i < 100; i++) {console.log(i)}console.log(i+1);//i出了这个作用域还能用
}

es6 let关键字，解决局部作用域冲突

function aaa(){for (let i = 0; i < 100; i++) {console.log(i)}console.log(i+1);//i出了这个作用域还能用
}//Uncaught ReferenceError: i is not defined

建议大家都使用let去定义作用域的变量

常量const

4.3 方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

    var liangwh={name:'梁伟浩',birth:1998,//方法age:function (){//今年减去出生年月
var now=new Date().getFullYear();return now-this.birth;}}//属性liangwh.name
//方法，一定要带（）
liangwh.age（）

this.代表什么？拆开上面的代码看看

function getAge(){//今年-出生的年月日var now=new Date().getFullYear();return now-this.birth;}var liangwh={name:'梁伟浩',birth:1998,//方法age:getAge}

this是无法指向的，是默认指向调用它的那个对象

apply

在js可以控制this指向

    function getAge(){//今年-出生的年月日var now=new Date().getFullYear();return now-this.birth;}var liangwh={name:'梁伟浩',birth:1998,//方法age:getAge};
getAge.apply(liangwh,[]);//this指向了laingwh，参数为空
console.log()

5 内部对象

标准对象

5.1 Date

基本使用

   var now=new Date();now.getFullYear();//年now.getMonth();//月  0-11月now.getDate();//日now.getDay();//星期几now.getHours();//时now.getMinutes();//分now.getSeconds();//秒now.getTime();//时间戳 全世界统一

5.2 json

josn是什么

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在javascript一切皆为对象、任何js支持的类型都可以用json来表示

格式：

对象都用{}
数组都用[]
所有的键值对都是用 key:value

json字符串和js对象的转化

<script>var user={name:"qingjaing",age:3,set:"男"}//对象转化为json字符串var jsonUser= JSON.stringify(user)//json 字符串转化为对象 参数为json 字符串 var obj= JSON.parse('{"name":"qingjaing","age":3,"set":"男"}')
</script>

里面的""和’'必须错开

很多人搞不清楚，json和js对象的区别

var obj={a:'hello',b:'hellob'}
var jso='{"a":"hello","b":"hellob"}'

6 面向对象

javascript、java、c#…面向对象；javascript有哪些区别！

类：模板原型对象

对象：具体的实例

在JavaScript这个需要大家换一下思维方式！

原型：

    var user={name:"lwh",age:5,run:function (){console.log(this.name+"run...");}};var xiaoming={name:"xiaoming"};var Bird={fly:function (){console.log(this.name+"fly....")}}//小明的原型是studentxiaoming.__proto__=Bird;原型：function student(name){this.name=name;}//给student新增一个方法student.prototype.hello(){alert('hello')}

class继承

class关键字，是在es6引入的

1.定义一个类，属性，方法

  //es6 之后才出来//定义一个学生的类class student{constructor(name) {this.name=name;}hello(){alert('hello')}}var xiaoming=new student("xiaoming")var xiaohong=new student("xiaohong")

    class student{constructor(name) {this.name=name;}hello(){alert('hello')}}class smallstudent extends student{constructor(name, grade) {super(name);this.grade=grade;}myGrade(){alert('我是小学生')}}var xiaoming=new student("xiaoming");var xiaohong=new smallstudent("xiaohong",1);

本质：查看对象原型

原型链

proto

7. 操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器关系？

JavaScript诞生就是为了能让他在浏览器中运行！

BOM：浏览器对象模型

ie6~11
Chrome
Safari
FireFox

三方

qq浏览器
360浏览器

Window

Window代表浏览器窗口

screen

代表屏幕尺寸

screen.width
1920 px
screen.height
1080 px

location

location代表当前页面的url信息

host: "localhost:63342"
hostname: "localhost"
hostname: "localhost"
href: "http://localhost:63342/JavaScript/study/dom.html?_ijt=njeo675ro9al2a0a0pci04tt29"
origin: "http://localhost:63342"
pathname: "/JavaScript/study/dom.html"
port: "63342"
location.reload()//刷新网页
location.assign('https://kuangstudy.com/')//设置新的地址

document

document代表当前的页面，html dom文档树

document.title
"百度一下，你就知道"
document.timeline
DocumentTimeline {currentTime: 62949.511}
document.title='梁伟浩'
"梁伟浩"

获取具体的文档树借点

<dl id="app"><dt>java</dt><dt>javase</dt><dt>javaee</dt>
</dl><script>var dl= document.getElementById('app');</script>

获取cookie

document.cookie
""

劫持cookie原理

www.taobao.com

<script></script>
恶意人员，获取你的cookie，上传到他的服务器

服务器端可以设置cookie：HTTPOnly

history（不建议使用）

history代表浏览器的历史记录

history.back()//后退
history.forward()//前进

8.操作Dom对象（重点）

DOM:文档对象模型

核心

浏览器网页就是一个Dom树形结构！

更新dom节点
遍历dom节点：得到dom节点
添加：添加一个新的节点

要操作一个dom节点，就必须先获得这个dom节点

获得dom节点

<div id="father">
<h1>标题一</h1>
<p id="p1">梁伟浩</p>
<p class="p2">卡卡罗特</p>
</div>
<script>//对应css选择器var h1= document.getElementsByName('h1');var p1=document.getElementById('p1');var p2=document.getElementsByClassName('p2');var father=document.getElementById('father')var childrens=father.children[index];//获取父节点下的所有子节点// father.firstChild// father.lastChild

这是原生代码，之后我们都尽量使用jquery（）；

更新节点

<div id="id1">
</div>
<script>var id1=document.getElementById('id1');
</script>

操作文本

id1.innerText=‘121212’
“121212”`修改文本的值
id1.innerHTML='<strong>123</strong>'加粗，html代表可以超文本编辑，可以解释html标签

操作css

id1.style.fontSize='30px' //-转驼峰命名
id1.style.color='red' //属性使用''字符串包裹
id1.style.padding='2em'

删除节点

删除节点步骤：先获取父节点，在通过父节点删除自己

<div id="father">
<h1>标题一</h1>
<p id="p1">梁伟浩</p>
<p class="p2">卡卡罗特</p>
</div><script>
var self=document.getElementById('p1')
var father=p1.parentElement;
father.removeChild(self)
</script>//删除是一个动态的过程
father.removeChild(p1)
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意~

插入节点

我们获得了某个dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个dom节点已经存在元素了，我们就不能这么干了！会产生覆盖

追加

<p id="js">javaScript</p>
<div id="list"><p id="se">javase</p><p id="ee">javaee</p><p id="me">javame</p>
</div>
<script>var js=document.getElementById('js');var list=document.getElementById('list')list.appendChild(js) //追加到后面
</script>

效果：

创建一个新的标签，实现插入

<script>var js=document.getElementById('js'); //已存在的节点var list=document.getElementById('list');//通过js 创建一个新的节点var newP=document.createElement('p');//创建一个p标签newP.id='newP';newP.innerText='hello,laingwh';list.appendChild(newP);//创建一个标签节点var myScript = document.createElement('script');myScript.setAttribute('type','text/javascript');// var body = document.getElementsByTagName('body');// body.style.backgroundColor="#5398af";//可以创建一个style标签var myStyle=document.createElement('style');//创建了一个style标签myStyle.setAttribute('type','text/css');myStyle.innerHTML='body{background-color: #366f64;}';//设置标签内容document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>

insertBefore

<script>
var ee= document.getElementById('ee');
var js=document.getElementById("js");
var list=document.getElementById("list");
//要包含的节点  insertBefore（newNode，targetNode）
list.insertBefore(js,ee);
</script>

9.操作表单（验证）

表单是什么 form DOM树

文本框 text
下拉框
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password

表单的目的：提交信息

获得要提交的信息

<form action="post"><p><span>用户名：</span> <input type="text" id="username"></p><!--  多选框的值，就是定义好的value --><p><span>性别：</span><input type="radio" name="sex" value="boy" id="boy">男<input type="radio" name="sex" value="girl" id="girl">女</p></form>
<script>var sb=document.getElementById('username');var boy=document.getElementById('boy');var girl=document.getElementById('girl');//得到输入框的值sb.value//修改输入框的值sb.value="5466"//对于单选框，多选框等等固定的值boy.value只能取到当前的值boy.checked;//查看返回的结果是否为true，为true就是被选中girl.checked=true;//可以通过这个默认你所要选中的框
</script>

提交表单。md5加密密码，表单优化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--md5工具类--><script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body><!--表单绑定提交事件
onsubmit=绑定一个提交监测的函数，true false
将这个结果返回给表单，使用onsubmit接受！
onsubmit="return sb()"
-->
<form action="#" method="post" onsubmit="return sb()">
<p><span>用户名：</span><input type="text"  id="username" name="username">
</p>
<p><span>密码：</span><input type="password" id="input-password">
</p><input type="hidden" id="md5-password" name="password"><!--绑定事件 onclick被点击--><button type="submit">提交</button>
</form><script>function sb(){alert(1);var uname = document.getElementById('username');var pwd = document.getElementById('input-password');var md5pwd=document.getElementById('md5-password');//pwd.value=md5(pwd.value); 这个提交会显示一大串md5加密码，用户提交可以看见，体验感不好md5pwd.value=md5(pwd.value);
//可以校验判断表单内容，true就是通过提交，false阻止提交return true;}</script>
</body>
</html>

10.jQuery

$(selector).action()

JavaScript

juery库的，里面存在大量的JavaScript函数

获取jquery

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!-- 在线引入cdn -->
<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>--><!-- 直接下载压缩包导入项目   --><script src="lib/jquery.3.4.1.js"></script>
</head>
<body>
<a href="" id="text-jquery">点我</a><script>//选择器就是css选择器$('#text-jquery').click(function (){alert('hello,jqiery');})
</script></body>
</html>

选择器

<script>//原生js，选择器少，麻烦不好记//标签document.getElementsByTagName()//iddocument.getElementById()//类document.getElementsByClassName()//jquery  css中的选择器他全部都能用！$('p').click();//标签选择器$('#id1').click();//id选择器$('.p2').click() //class选择器
</script>

文档工具站：https://jquery.cuishifeng.cn/

事件

鼠标事件，键盘事件，其他事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/jquery.3.4.1.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>
<!--当网页元素加载完毕之后,响应事件-->
$(function (){$('#divMove').mouseenter(function (e){$('#mouseMove').text('x:'+e.pageX+'y'+e.pageY)})
});
</script></body>
</html>

操作dom

节点文本操作

  $('#test-ul li[name=python]').text(); //获得值$('#test-ul li[name=python]').text('设置值');//设置值$('#test-ul').html();//获得值

css的操作

 $('#test-ul li[name=python]').css('color','red');

元素的显示和隐藏：本质display:none

$('#test-ul li[name=python]').show();//显示
$('#test-ul li[name=python]').hide();//隐藏

娱乐

前端网页修改大法

可以copy别人的网站，删除不影响主页面的代码，剩下的简洁代码，自己就可以拿来作为自己的网查娜修改