web前端学习（JavaScript篇）

var map = new Map([['tom' ,100],['jack ' ,90], [ 'haha',80]]);

var name = map. get( 'tom');//通过key获得value
map. set( 'admin ',123456);//新增或修改
map.delete( "tom"');//删除

set.add(2);//添加

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

iterator

遍历数组

//通过for of / for in下标

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

遍历map

var map = new Map([["tom" ,100],["jack",90],["haha",80]]);

for (let x of map){
console.log(x)

}

遍历set

var set = new set([5,6,7]);

for (let x of set) {
console.log(x)
}

函数

定义函数

定义方式一

绝对值函数

function abs(x){

if(x>=0){

return x;

}else{

return -x;

}

}

一旦执行到return代表函数结束，返回结果
如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

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

}else{
return -x;
}
}

function(x) ....}这是一个匿名函数。但是可以把结果赋值给abs，通过abs就可以调用函数

调用函数

abs(10)//10
abs(-10)//10

参数问题: JavaScript可以传任意个参数，也可以不传递参数

var abs = function(x){
//手动抛出异常来判断
if (typeof x!== 'number ') {
throw 'Not a Number ';
}
if(x>=0){
return x;

}else{
return -x;
}
}

arguments

arguments是一个JS免费赠送的关键字;
代表传递进来的所有的参数，是一个数组

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

}else{
return -×;
}

问题: arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数

rest

ES6引入的新特性，获取除了已经定义的参数之外的所有参数

function aaa(a,b){

console.log("a=>"+a);

console.log("b=>"+b);

console.log(rest);

}

变量的作用域

在javascript中, var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用(非要想实现的话，后面可以研究一下闭包)

function qj {
var x =1;

x = x +1;
}
x =x +2; //Uncaught ReferenceError: x is not defined

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

function qj() {
var x = 1;
x=x+1;
}
function qj2(){
var x = 'A';

x=x+1;
}

内部函数可以访问外部函数的成员，反之则不行

function qj() {
var x = 1;
//内部函数可以访问外部函数的成员，反之则不行function qj2 {
var y =x + 1; // 2
}
var z = y + 1; // Uncaught ReferenceError: y is not defined
}

假设，内部函数变量和外部函数的变量重名

function qj (){
var x = 1;
function qj2(){
var x = 'A';
console.log( 'inner'+x); // outer1
}
console.log( 'outer'+x); // innerA

qj2()
}
qj()

假设在JavaScript中函数查找变量从自身函数开始，由"内"向“外”查找.假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function qj() {
var x = "x" + y;

console.log(x);

var y = 'y';
}

结果: xundefined
说明;js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值';

function qj2 (){
var y;
var x= "x" + y;

console.log(x);

y = 'y ';
}

这个是在JavaScript建立之初就存在的特性。养成规范:所有的变量定义都放在函数的头部，不要乱放，便于代码维护

function qj2() {
var x = 1，
y =x +1，
z ,i,a; //undefined
//之后随意用
}

全局函数

//全局变量x = 1;
function f() {
console.log(x);
}
f();
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 实际上只有一个全局作用域，任何变量（函数也可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的 window上。如果不同的js文件，使用了相同的全局变量，冲突->如何能够减少冲突?

//唯一全局变量
var KuangApp = {};
//定义全局变量
KuangApp. name = 'kuangshen ';

KuangApp. add = function (a,b) {
return a + b;
}

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

局部作用域let

function aaa() {
for (var i = 0; i < 100;i++） {
console.log(i)
}
console.1og(i+1);//问题:i 出了这个作用域还可以使用
}

ES6 let关键字，解决局部作用域冲突问题

function aaa(){
for (let i = 0; i < 100;i++) {
console.log(i)
}
console.log(i+1);//uncaught ReferenceError: i is not defined

建议大家都是用let去定义局部作用域的变量

常量const

在ES6之前，怎么定义常量:只有用全部大写字母命名的变量就是常量;建议不要修改这样的值

var PI = '3.14';
console.log(PI);
PI = '213';//可以改变这个值console.log(PI);

在ES6引入了常量关键字const

const PI = '3.14'; //只读变量

console.log(PI);
PI = '123'; // TypeError: Assignment to constant variable

方法

定义方法

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

var kuangshen = {

name: '秦疆',

bitrh: 2000,

//方法

age: function(){

//今年–出生的年

var now = new Date().getFullYear();

return now-this.bitrh;

}

}

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

apply

在js中可以控制this指向

function getAge() {
//今年–出生的年
var now = new Date().getFullYear();

return now-this.bitrh;
}
var kuangshen = {
name:'秦疆'，

bitrh: 2000,

age: getAge
};
//kuangshen.age() ok

getAge.apply(kuangshen,[ ]);// this，指向了kuangshen，参数为空

内部对象

Date

基本使用

var now = new Date(); //sat Jan 04 2020 10:47:06 GMT+0800(中国标准时间)now. get.FullYear(); //年
now. getMonth(); //月 0~11 代表月

now. getDate();//日
now. getDay();//星期几

now. getHours();//时

now. getMinutes();//分

now. getSeconds();//秒
now.getTime();//时间戳全世界统一 1970 1.1 0:00:00 毫秒数
console.log(new Date(1659768799532)) //时间戳转为时间

转换

now = new Date(1659768799532)
Sat Aug 06 2022 14:53:19 GMT+0800 (中国标准时间)
now.toLocalestring // 注意，调用是一个方式，不是一个属性!

f toLocalestring(){ [native code] }
now.toLocaleString()
'2022/8/6 14:53:19'

now.toGMTString()
'Sat, 06 Aug 2022 06:53:19 GMT'

JSON

什么是JSION

早期，所有数据传输习惯使用XML文件

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

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

格式：

对象都用{ }

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

JSON字符串和JS对象的转化

var user = {

name:"qinjiang",

age : 3,

sex: '男'

}

//对象转化为json字符串 {"name " : "qinjiang" , "age" : 3 , "sex":"男"}

var jsonuser = JSON.stringify(user);

//json字符串转化为对象参数为json字符串

var obj = JSON.parse('{"name":"qinjiang","age":3, "sex":"男"}');

JSON 和JS对象的区别

var obj = {a: 'hello',b:'hellob'};
var json = '{"a": "he11o" , "b" : "hellob"}'

Ajax

原生的js写法 xhr 异步请求
jQuey封装好的方法$("#name").ajax(" ")
axios请求

面向对象编程

什么是面向对象

javascript、Java、c#。。。。面向对象;javascript有些区别!

类:模板
对象:具体的实例

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

原型

var user = {

name:"qinjiang",

age : 3,

run:function(){

console.log(this.name+"run...")

}

}

var xiaoming = {

name: "xiaoming"

};

xiaoming._proto__ = Student;

var Bird = {

fly : function () {

console.log( this.name + "f1y....");

}

};

//小明的原型是Student

xiaoming._proto_ = Bird;

function Student(name){

this.name = name;

}

//给student新增一个方法

Student.prototype.hello = function(){

alert("Hello")

}

class继承

class关键字，是在ES6引入的

定义一个类，属性，方法

class Student{

constructor(name){

this.name = name;

}

hello(){

alert("hello")

}

}

var xiaoming = new student("xiaoming");

var xiaohong = new student("xiaohong");
xiaoming.hello(）

继承

//定义一个学生的类
class Student{
constructor(name){
this.name = name;}
hello(){
alert('hello')}
}
class xiaoStudent extends Student{
constructor(name.grade){
super(name)
this.grade=grade;}
myGrade(){
alert('我是一名小学生')}}
var xiaoming = new Student("xiaoming")
var xiaohong = new Student("xiaohong")

操作BOM对象

浏览器介绍

JavaScript和浏览器的关系？
JavaScript的诞生为了在浏览器中运行

BOM：浏览器对象模型

E 6~11

Chrome

Safari

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
754
window.innerWidth
876
window.outerHeight
824
window.outerWidth
1536

Navigator

Navigator封装了浏览器的信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36 Edg/103.0.1264.77'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36 Edg/103.0.1264.77'
navigator.platform
'Win32'

大多数时候，不会使用navigator对象，因为会被人为修改

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width
1536 px
screen.height
864 px

location

代表当前页面的URL信息

host: "https://www.baidu.com"
href: "https://www.baidu.com"
protocol: "http:"
reload: ƒ reload()//重新加载
//设置新的地址
location.assign('https://www.bilibili.com/video/BV1JJ41177di?p=19&vd_source=aa04dfefd1d4c4be247a705b194b06c2')

document

代表当前的页面，HTML，DOM文档树

ocument.title
'Title'
document.title='ply'
'ply'

获取具体的文档树节点

<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>

劫持cookie原理

<script src="aa.js"></script>

服务器端可以设置cookie:httpOnly

history

代表浏览器的历史记录

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

操作DOM对象

DOM：文档对象模型

核心

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

更新:更新Dom节点
遍历dom节点:得到Dom节点

删除:删除一个Dom节点

添加:添加一个新的节点

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

<div id="father">

<h1>标题一</h1>

<p id="p1">p1</p>

<p class="p2">p2</p>

</div>

<script>

//对应css选择器

var h1 = document.getElementsByTagName("h1");

var p1 = document.getElementById("p1");

var p2 = document.getElementsByClassName("p2");

var father = document.getElementById("father");

var childrens = father.children;//获取父节点下的所有子节点

//father.firstChild

//father.lastChild

这是原生代码，之后我们尽量都是用jQuery()

更新节点

<div id="id1">

</div>

<script>

var id1 = document.getElementById("id1");

</script>

操作文本

id1.innerText = "435";//修改文本的值

id1.innerHTML = "<h2>345</h2>"; //可以解析HTML文本标签

操作js

id1.style.color = "red";

id1.style.fontSize = "50px";

id1.style.padding = "2em";

删除节点

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

<div id="father">

<h1>标题</h1>

<p id="p1">p1</p>

<p class="p2">p2</p>

</div>

<script>
//删除节点
//删除节点步骤：先获取父节点，再通过父节点删除自己
var h1 = document.getElementsByTagName("h1");
var p1 = document.getElementById("p1");
var p2 = document.getElementsByClassName("p2")
var father = document.getElementById("father");

father.removeChild(p1);

删除是一个动态的过程
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);

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

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

var js = document.getElementById("js");

var list = document.getElementById("list");

//通过js创建一个新的标签
var newP = document.createElement("p");//创建一个p标签
newP.id = "newP";
newP.innerText = "Hello Massimo";
list.appendChild(newP);

//创建一个标签节点（通过这个属性，可以设置任意的值）
var myScript = document.createElement("script");
myScript.setAttribute("type" , "text/javascript");
list.appendChild(myScript);

//创建一个style标签
var myStyle = document.createElement("style");
myStyle.setAttribute("type" , "text/css");
myStyle.innerHTML = "body{background-color:chartreuse;}";
document.getElementsByTagName("head")[0].appendChild(myStyle);

insert

var p1 = document.createElement("p");
p1.id = "p1";
p1.innerText = "前端";
var ee = document.getElementById("ee");
list.insertBefore(p1,ee);

操作表单

表单是什么 form DOM树

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

表单的目的：提交信息

<form action="">
<p>
<span>用户名：</span><input type="text" id="username">
</p>


<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>

<script>
var input_text = document.getElementById("username");
//得到输入框的值
input_text.value;

//修改输入框的值
input_text.value = "2334325";

var boy_radio = document.getElementById("boy");
var girl_radio = document.getElementById("girl");
//对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值

//查看返回的结果，是否为true，如果为true，则被选中
boy_radio.checked;
</script>

提交表单

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> </head>

<form action="#" method="post">
<p>
<span>用户名：</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span><input type="password" id="password" name="password">
</p>


<button type="submit" οnclick="aaa()">提交</button>
</form>

<script>
function aaa() {
var uname = document.getElementById("username");
var pwd = document.getElementById("password");
console.log(uname.value);
console.log(pwd.value);
//MD5算法
pwd.value = md5(pwd.value);
console.log(pwd.value);
}
</script>

表单绑定提交事件
onsubmit = 绑定一个提交检测的函数，true，false
将这个结果返回给表单，使用onsubmit函数
onsubmit = "return aaa()"

JQuery

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

获取JQuery

JQuery官网

公式： $(selector).action()

<script src="lib/jquery-3.6.0.js"></script>

</head>

<body>

<a href="" id="test-jquery">点我</a>

<script>

document.getElementById('id');

//选择器就是css的选择器

$('#test-jquery').click(function () {

alert("Hello JQuery");

})

</script>

</body>

JQuery选择器

JQuery能够使用css中的所有选择器

<script>

//标签

document.getElementsByTagName();

//id

document.getElementById();

//类

document.getElementsByClassName();

$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//class选择器
</script>

文档工具站： jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

事件

<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').mousemove(function (e) {

$('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY)

})

});

</script>

jQuery操作Dom元素

节点文本操作

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

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

$('#test-ul').html();

$('#test-ul').html("<span>js</span>");//设置为html格式的值