2021-03-28 【前端学习 JavaScript入门】

JavaScript

• JavaScript是一门世界上最流行的脚本语言
• ECMAScript可以理解为是JavaScript的一个标准

---

入门

1、引入JavaScript

1.1内部标签

<script>
	//........
</script>

---

1.2外部引入

<!--引入js文件-->
<script src=" "></script>

---

2、数据类型

书写格式规范

//'use strict': 严格检查模式，预防JavaScript的随意性导致产生一些问题
'use strict'
//放在第一行

---

2.1字符串

• 用单引号或双引号包裹
• 注意转义字符：\
• 多行字符串编写：``

var msg = 
            `12
             34
             56
            `

• 模板字符串

let num = 1;
let get = `这个数是，${num}`

• 字符串的一些属性，且字符串不可变
• 字符串的一些方法

---

2.2数组

• 数组的长度可变，如果赋值过小，则会使得部分元素丢失
• 常用方法

push()：压入到尾部
pop()：弹出尾部的一个元素
unshift()：压入到头部
shift()：弹出头部的
sort():排序
reverse()：元素反转
concat():拼接，没有修改数组，只是返回一个新数组
join()：打印拼接数组，并用特殊的符号连接

• 多维数组

---

2.3对象

//定义了一个person对象，属性之间用逗号隔开，冒号赋值属性
var person = {
    name: "person",
    age: 18,
    number: 123456
}

对象赋值

person.name = "person2"

使用一个不存在的对象属性，不会报错，会显示“undefined”

动态的删减属性

delete person.name
true
person
{age: 18, number: 123456}

动态的添加

person.new = "hahaha"
"hahaha"
person
{age: 18, number: 123456, new: "hahaha"}

判断属性值是否在对象中 “xxx” in xxxx

"new" in person
true

判断一个属性是否是这个对象自身拥有的（除去继承）

person.hasOwnProperty("new")
true

---

3.4流程控制

• if判断

• for循环

• iterator（迭代器）

  • forEach遍历

  var res = [1,5,32,6,78,12135,54,61,2]
  
  res.forEach(function (number) {
      console.log(number)
  })
  

  • for……in遍历(下标)（新增的数组的下标不显示）

  var res = [99,5,32,6,78,12135,54,61,2]
  
  for(var number in res){
      console.log(res[number])
  }
  

  • for……of遍历（数值）（可用来迭代Map和Set）

  var res = [99,5,32,6,78,12135,54,61,2]
  
  for (var number of res){
      console.log(number)
  }
  

• while循环

---

2.5Map和Set

js中的map和set

Set

//Set 我个人认为Set是多用来操作数组的
var array=[1,2,3,3,2,1];
//数组去重
var set=new Set(array);
console.log(set);  //{1,2,3}
//获取长度
set.size()  //3
//添加元素
set.add(4);//添加已有元素会将原来的元素覆盖，长度不变
console.log(set) //{1,2,3,4}
//删除元素
set.delete(4);
console.log(set) //{1,2,3}
//将set转换为数组对象
set=Array.from(set);
console.log(set);//[1,2,3]

---

Map

//Map
var map=new Map();
map.set("a",1);
map.set("a",3);//对一个key重复赋值时，会进行覆盖，取最近的赋值 a=3;
map.set("b",4);
console.log(map);//{a:3,b:4}
//删除元素
map.delete("a");
console.log(map)//{b:4}

原文链接：https://blog.csdn.net/qq_38880700/article/details/84822932

---

3、函数

3.1定义函数

• 绝对值函数

定义方式一

function abs(x){
    return -x;
}

如果没有传入数据，则函数返回值是NaN

定义方式二

var abs = function(x){
    return -x
}
//function(){……}是一个匿名内部内，但是可以将结果赋值给abs，通过abs就可以调用函数

---

• 调用函数

//
abs()

arguments

arguments可以获得传进来的所有参数

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

rest

rest可以获得除了已经定义的参数之外的所有参数

var aaa = function (a,b,c,...rest) {
    console.log("a:"+a)
    console.log("b:"+b)
    console.log("c:"+c)
    console.log(rest)
}

---

• 手动抛出异常

throw "..."

---

3.2变量的作用域

局部变量

• 函数内部定义的变量，仅可在该函数内使用，函数外不可使用
• 函数内部定义的变量，另外的函数定义同名的变量，两者互不相干
• 函数内部定义的变量，函数内部的函数仍可使用，但外部的函数不可使用内部定义的变量
• 函数内部定义的变量，内部函数定义同名的变量，有内到外进行访问变量，若碰到重名变量，内部函数会自动屏蔽掉外部函数重名的变量，同时外部的函数不可使用内部定义的变量
• 奇葩例子

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

//等价于，先声明了y这个变量，但是还未赋值

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

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

规范：所有的变量定义都放在代码的头部，便于代码的可读性和维护

---

全局变量

var a = "x";
function f2() {
    alert(a)
}
alert(a)

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

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，就会产生冲突。

所以产生一下解决方法：（还有JQuery）

var Xu = {};
Xu.name = 'xuguanming';
Xu.age = 20;
Xu.sexx = 'man';
Xu.add = function (a,b) {
    return a+b
}

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

---

局部作用域 let

建议使用let来定义局部作用域的变量

function f() {
    for (let i = 0; i < 50; i++) {
        console.log(i)
    }
    console.log(i+5)  //Uncaught ReferenceError: i is not defined
}

//如果用var

//从0开始遍历，并且最后50后中断遍历，但是i仍会继续++，所以下面的i为51
function f() {
    for (var i = 0; i < 50; i++) {
        console.log(i)
    }
    console.log(i)	//50 ???
    console.log(i+5)  //55
}

---

常量 const

const PI = 123;		//只读变量

---

3.3方法

定义方法

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

var Xu = {
    name: "xu",
    birth: 2000,
    age: function () {
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}
//属性
Xu.name
//方法
Xu.age()

function f() {
    var now = new Date().getFullYear();
    return now - this.birth;
}

var Xu = {
    name: "xu",
    birth: 2000,
    age: f
};

//Xu.age() 	 ok
//f()		NaN  因为无法获取this.birth这个属性

---

apply

• 在js中可以用apply控制this指向

function f() {
    var now = new Date().getFullYear();
    return now - this.birth;		//this.birth是对象 Xu 的属性
}

var Xu = {
    name: "xu",
    birth: 2000,
    age: f
};

var f1 = f.apply(Xu)

//apply（对象,参数）指向某一个对象，获取该对象中的参数

---

4、内部对象

标准对象

typeof 123
"number"
typeof true
"boolean"
typeof "name"
"string"
typeof name
"string"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof undefined
"undefined"
typeof Math.abs
"function"	//方法

4.1Date

基本的获取时间的函数调用

var now = new Date()
now.getFullYear()
now.getMonth()
now.getDate()
now.getDay()
now.getHours()
now.getMinutes()
now.getSeconds()
now.toLocaleDateString()
now.toLocaleTimeString()
now.toLocaleString()

now.getTime()       //时间戳  全世界统一，从1970.1.1-00：00：00 开始计时到现在的毫秒数
var time = new Date(now.getTime())  //通过时间戳来获取准确的时间

---

4.2初步了解JSON

JSON是什么

早期，所有的数据传输习惯都用xml文件

• JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
• 它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

我的理解是一种数据表示的规范，本质JSON是一个序列化的对象或数组。

JSON的语法规则

• 对象用{ }包裹
• 数组用[ ]包裹
• 所有的键值对都是key：value
• 字符串都用" "包裹

---

js和JSON的区别

var json = {"name":"xuguanming","age":18,"sex":"man"}
var js = {name: "xuguanming", age: 18, sex: "man"}

---

js和JSON彼此的转换

var user = {
    name: "xuguanming",
    age: 18,
    sex: "man"
}

//对象转化为json字符串
var jsonuser = JSON.stringify(user) //{"name":"xuguanming","age":18,"sex":"man"}
//json字符串转化为对象，参数为json字符串
var obj = JSON.parse(jsonuser)  //{name: "xuguanming", age: 18, sex: "man"}

---

5、面向对象编程（前端面试重点）

5.1原型对象

了解原型对象

• 我们需要先了解ES6之前的JavaScript是如何创建对象的

利用函数创建对象

//构造函数中的属性和方法我们称为成员，成员是可以添加的
function Person1(name,age) {
    //实例成员
    //实例化成员只能通过实例化对象来访问
    this.name = name;
    this.age = age;
    this.sing = function(){
        console.log("sing")
    }
}
var ldh = new Person1("刘德华",40);
ldh.sing()
console.log(ldh.name)

//静态成员
//静态成员只能通过构造函数来访问
Person1.sex = "man"
console.log(Person1.sex)

构造方法存在浪费内存的问题：

new了不同的对象，但是其中的方法都是一样的函数，那么他将会开辟对象数量的函数，造成内存的浪费

var ldh = new Person1("刘德华",40);
var zxy = new Person1("张学友",50);
console.log(ldh.sing === zxy.sing);		//false

所以以下方法将解决这一问题

---

原型对象 prototype对象

• 构造函数通过原型分配的函数是所有对象共享的
• 原型对象prototype

function Person1(name,age) {
    this.name = name;
    this.age = age;
}
Person1.prototype.sing = function(){
    console.log("sing")
}
var ldh = new Person1("刘德华",40);
var zxy = new Person1("张学友",50);
console.log(ldh.sing === zxy.sing);		//ture
ldh.sing()			//sing
zxy.sing()			//sing

---

__ proto __对象原型

• 对象原型__ proto __，它指向我们构造函数的原型对象 prototype
• __ proto __对象原型和原型对象prototype是等价的

console.log(ldh.__proto__ === Person1.prototype)	//true
//方法查找规则：
//首先查看构造函数中是否有sing这个方法，如果没有
//因为__ proto __指向我们构造函数的原型对象 prototype
//所以可以去构造函数原型对象身上查找sing这个方法

---

constructor构造函数

• constructor 属性返回对创建此对象的数组函数的引用

function Person1(name,age) {
    this.name = name;
    this.age = age;
}

Person1.prototype = {
    //如果我们修改了原来的原型对象，给原型对象赋值的是一个对象，则必须手动利用constructor指向原来的构造函数
    constructor: Person1,
    sing: function () {
        console.log("sing")
    },
    dance: function () {
        console.log("dance")
    }
}

---

构造函数、实例、原型对象三者之间的关系

---

原型链

这仅仅针对上述示例进行描述的原型链，对象示例到Object原型对象可能中间存在很多的原型对象

查找规则：向上查找，就近原则 个人感觉和继承、重写很像

---

原型对象的应用

扩展内置对象方法

//原型对象的应用，扩展内置对象方法
Array.prototype.sum = function () {
    var sum = 0;
    for (let i = 0; i < this.length; i++) {
        sum += this[i];
    }
    return sum;
}

var arr = [1,2,6,4,5];
console.log(arr.sum());

继承

• ES6之前并没有给我们提供extends继承。

• 我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承

  call（）

//call（）方法的使用
function fn(x,y) {
    console.log('你好你是傻逼');
    console.log(this);
}
var o = {
    name: 'mike'
}
//1.可以调用函数
fn.call();
//2.可以改变这个函数this的指向
fn.call(o,0,1);

//输出结果
你好你是傻逼
Window {window: Window, self: Window, document: document, name: "", location: Location, …}
你好你是傻逼
{name: "mike"}

---

利用父构造函数继承属性

//借用父构造函数继承属性
//1.父构造函数
function Father(name,age) {
    this.name = name;
    this.age = age;
}
//2.子构造函数
function Son(name,age,sex) {
    Father.call(this,name,age);
    this.sex = sex;
}

var son = new Son("我儿",10,'man');

利用原型对象继承方法

Father.prototype.money = function () {
    console.log("挣钱")
};

//通过将父类new出的对象赋值给子类，不会影响父类的原型对象
Son.prototype = new Father();
//同时需要利用constructor指回原来的原型对象
Son.prototype.constructor = Son;
//子构造方法不影响父类
Son.prototype.exam = function () {
    console.log("考试")
}

var son = new Son("我儿",10,'man');

---

5.2类

• ES6以后才有的新特性
• 本质上和原型对象一样，只不过是语法上更容易让人接受，并且与java的写法非常相似（语法糖）

class

class Student{
    constructor(name,age) {		//属性构造器
        this.name = name;
        this.age = age;
    }

    run(){						//自定义方法
        console.log("run----" + this.name)
    }
}

var xiaoming = new Student("xiaoming",20);
var jieke = new Student("jieke",21);

---

继承

class Person extends Student{
    constructor(name,age,sex) {
        super(name,age);
        this.sex = sex
    }

    fly(){
        console.log(this.sex + "fly--------" + this.name )
    }
}

var jieke = new Person("jieke",21,"man");

---

6、操作BOM对象（重点）

BOM是browser object model的缩写，简称浏览器对象模型 ，提供了独立于内容而与浏览器窗口进行交互的对象；

• window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；（常用）
• document对象，文档对象；（重点）
• location对象，浏览器当前URL信息；（重点）
• navigator对象，浏览器本身信息；
• screen对象，客户端屏幕信息；
• history对象，浏览器访问历史信息；

具体对象的属性和方法请自行查阅，此处不给予补充

具体可参考：https://www.w3school.com.cn/jsref/index.asp

---

7、操作DOM对象（重点）

7.1理解

• DOM即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。
• DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。
• 将HTML或XML文档转化为DOM树的过程称为解析(parse)。
• DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容

---

7.2DOM树

DOM树结点分为6种类别:标题类(TITLE)、正文类(CONTENT)、视觉类(VISION)、分块类(BLOCK)、超链类(LINK)和其他类(OTHER)，不同类的结点对Web信息提取的重要度不同。

• 标题类(TITLE):指HTML文档中标题标签的专有类别。
• 正文类(CONTENT):指包含网页正文内容的标签类别，如包含文字的〈td〉标签。
• 视觉类(VISION):指描述页面显示特性的标签类别，如〈b〉、〈strong〉等。
• 分块类(BLOCK):指用于网页内容分块的标签类别，如〈table〉、〈tr〉等。
• 超链类(LINK):指包含超链接的标签类别，如〈a〉。
• 其他类(OTHER):指不属于以上5种类别的标签类型。

---

7.3操作DOM对象

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

• 更新：更新Dom节点
• 遍历：得到Dom节点
• 删除：删除Dom节点
• 添加：添加新的Dom节点

要操作一个Dom节点，就必需先要获得这个Dom节点

得到Dom节点

document.getElementById('');
document.getElementsByClassName('');
document.getElementsByTagName('');
document.getElementById('').children;

---

更新Dom节点 innerHTML

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

<div id="father">
    456
<div id="id1">
123
</div>
</div>

<script>
    //先获取Dom节点
    var id1 = document.getElementById('id1');
    var father = document.getElementById('father');
    var p1 = document.getElementById('p1');
    //再对Dom节点进行更新
    id1.innerText='123' //修改文本的值
    id1.innerHTML='<strong style="color: lightgreen">456</strong>'  //可以解析HTML标签
    
    //也可以更新他的样式css
    id1.style.color = ''
    id1.style.fontsize = ''
    ......
</script>

---

删除Dom节点 remove

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

<div id="father">
    456
<div id="id1">
123
</div>
</div>
<script>
    //先获取Dom节点
    var id1 = document.getElementById('id1');
    var father = document.getElementById('father');
    var p1 = document.getElementById('p1');
    //自己删除自己
    id1.remove();
    //删除子节点
    father.removeChild(id1);
</script>

注意事项；删除是动态删除的，随时进行更新

---

追加Dom节点 append

var father = document.getElementById('father');
var p1 = document.getElementById('p1');
father.appendChild(p1);		//等于id1.append(p1);		不等于father.append(p1);
//id1.append(p1);
//father.append(p1);

---

创建Dom节点 document.createElement

var myp = document.createElement('p');
myp.setAttribute('id','myp');		//等价于myp.id = 'myp';
myp.innerText = 'myp';
father.append(myp);

//高阶玩法
//创建一个style标签
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
//选择body选择器设置背景颜色
myStyle.innerText = 'body{background-color: green}';
//在head标签里追加
document.getElementsByTagName('head')[0].appendChild(myStyle);

---

插入Dom节点 insert

var id1 = document.getElementById('id1');
var father = document.getElementById('father');
var p1 = document.getElementById('p1');
//前插
father.insertBefore(p1,id1);

---

8.操作表单（验证）

事件响应 & md5加密

<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js">
</script>

<!--
表单绑定提交事件
οnsubmit="return aaa()"
返回aaa()的结果
-->
<form action="#" method="post" onsubmit="return aaa()">
<p>
    <span>用户名：</span><input type="text" id="username" name="password">
</p>
<p>
    <span>密码：</span><input type="password" id="password">
</p>
    <!--通过隐藏加密密码提高用户体验-->
    <input type="hidden" id="md5-password" name="password">
<!--或者绑定事件  onclick 被点击后响应-->
<input type="submit">
</form>
<script>
    function aaa() {
        var username = document.getElementById('username');
        var password = document.getElementById('password');
        var md5password = document.getElementById('md5-password');

        console.log(username.value);
        console.log(password.value);
        console.log(md5password.value);

        //假装有md5加密
        md5password.value = md5(password.value);
        return false;
    };

</script>

9.JQuery

• JQuery库，里面存在大量的javascript函数，简化了js的语法
• 文档工具站：https://jquery.cuishifeng.cn/

cdn在线引用（也可以去JQuery下载本地引用）

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

JQuery公式介绍

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<input type="button" id="button" value="点我">

<script>
    //JQuery公式
    $('#button').click(function () {
        alert('sbsbsb')
    })
</script>

</body>

JQuery选择器

$('p').click()			//标签选择器
$('#id').click()		//id选择器
$('.class').click()		//类选择器

事件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid #6d35e6;
        }
    </style>
<!--要求：获取鼠标当前的一个坐标-->
</head>
<body>
mouse : <span id="mouseMove"></span>

<div id="divMove">
    移动鼠标试试
</div>
<script>

    //当网页元素加载完毕后，响应时间
    //$(document).ready(function () { })
    //简化
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY)
        })
    });

</script>
</body>
</html>

常用事件

• ready(fn)

• [blur([data],fn])

• [change([data],fn])

• [click([data],fn])

• [dblclick([data],fn])

• [focus([data],fn])

• [focusin(data],fn)

• [focusout(data],fn)

• [keydown([data],fn])

• [keypress([data],fn])

• [keyup([data],fn])

• [mousedown([data],fn])

• [mouseenter([data],fn])

• [mouseleave([data],fn])

• [mousemove([data],fn])

• [mouseout([data],fn])

• [mouseover([data],fn])

• [mouseup([data],fn])

• [resize([data],fn])

• [scroll([data],fn])

• [select([data],fn])

• [submit([data],fn])

• 等等……

---

利用 JQuery 操作 DOM

• 直接去 https://jquery.cuishifeng.cn/ 自己查
• 或者自己看看源码

完结！

提示：需要多练习，多扒取好看网站的代码，下周完成我的博客“奋进的叻叻”的前端，仅供入门参考