[web] javascript学习笔记

程序员文章站 2022-03-27 20:22:58

本文章根据b站狂神说javascript视频教程以及其中一篇笔记整理文章链接：https://blog.csdn.net/pan_h1995/article/details/105974385视频链接：https://www.bilibili.com/video/BV1JJ41177di?from=search&seid=6715593633392022867因为javascript还算比较熟悉，所以暂且把整理过程当作一次复习，系统性的重新学习一下，整理时会根据自己的知识进行补充和删除....

本文章根据b站狂神说javascript视频教程以及其中一篇笔记整理
文章链接：https://blog.csdn.net/pan_h1995/article/details/105974385
视频链接：https://www.bilibili.com/video/BV1JJ41177di?from=search&seid=6715593633392022867

因为javascript还算比较熟悉，所以暂且把整理过程当作一次复习，系统性的重新学习一下，整理时会根据自己的知识进行补充和删除

0、前端知识体系

0.1、HTML

太简单，略

0.2、CSS

主要缺陷：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；

为了解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具，提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。

什么是CSS预处理器

CSS预处理器就是“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。

常用的CSS预处理器有哪些

SASS：基于Ruby ，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用LESS。

0.3、JavaScript

JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。

JavaScript框架

JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；
Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）
React：Facebook出品，一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；
Vue：一款渐进式 JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular（模块化）和React(虚拟 DOM) 的优点；
Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能；

UI框架

Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUI、iview、ice、layUI：饿了么出品，基于Vue的UI框架
BootStrap：Teitter推出的一个用于前端开发的开源工具包
AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架

JavaScript构建工具

Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载

0.4、三端同一

混合开发（Hybrid App）

主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：

云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
本地打包： Cordova（前身是 PhoneGap）

1、什么是Javascript

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

ECMAScript它可以理解为JavaScript的一个标准，最新版本已经到es6版本，但是大部分浏览器还只停留在支持es5代码上！

2、快速入门

2.1、引入JavaScript

内部标签

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

外部引入

<script src="js/hj.js"></script>
<!--不用显示定义type，也默认就是javaScript-->
<script type="text/javascript" src="js/hj.js"></script>

2.2、浏览器必备调试须知

[web] javascript学习笔记
Elements

用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息。

Console

控制台：用于打印和输出相关的命令信息，比如报错，打印console.log信息等

Sources

js资源页面：这个页面内我们可以找到当然浏览器页面中的js 源文件

Network

网络请求标签页：可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看

2.3、数据类型

简单数据类型

//变量
var a

//数字
123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN	//not a number
Infinity // 表示无限大

//字符串
'abc', "abc"

//布尔值
true，false

//逻辑运算
&& //两个都为真，结果为真
|| //一个为真，结果为真
! 	//真即假，假即真

//比较运算符
== //等于（类型不一样，值一样，也会判断为true）
=== //绝对等于（类型一样，值一样，结果为true）

null//空
undefined//未定义

js不区分小数和整数
== 和 === 的区别
NaN === NaN，这个与所有的数值都不相等，包括自己，只能通过isNaN（NaN）来判断这个数是否是NaN

精度问题

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

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

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

数组

Java的数组必须是相同类型的对象，JS中不需要这样

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
//第二种定义方法
new Array(1,2,3,4,5,'hello');

取数字下标：如果越界了，就会报undefined

对象

对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个属性不需要逗号

// Person person = new Person(1,2,3,4,5);
var person = {
	name:'Tom',
	age:3,
	tags:['js','java','web','...']
}

2.4、严格检查格式

[web] javascript学习笔记

‘use strict’;严格检查模式，预防JavaScript的随意性导致产生的一些问题必须写在JavaScript的第一行！
局部变量建议都使用let去定义

    <script>
        'use strict';
        //全局变量
         let i=1
        //ES6 let
    </script>

3、数据类型

3.1、字符串

1、正常字符串我们使用单引号，或者双引号包裹

2、注意转义字符 \

3、多行字符串编写

        var msg =
            `hello
            world
            你好呀
            nihao
            `

用tab键上面 esc键下面的那个引号，可以编写多行字符串

4、模板字符串

let name = 'Tom';
let age = 3;
var msg = `你好，${name}`//引号：tab 上面 esc下面

5、字符串的可变性，不可变，不能通过下标去赋值

6、其他方法

//长度
student.length
//大小写转换
student.toUpperCase();
student.toLowerCase();
//取下标
student.indexof('t')
//取字串
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)

3.2、数组

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

var arr = [1,2,3];//通过下标取值和赋值
//长度
arr.length

注意：假如给arr.lennth赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失


arr.indexOf(2)//indexOf，通过元素获得下标索引

arr.slice(1,3)//slice() 截取Array的一部分，返回的一个新数组，类似于String中substring

arr.push(2)//压入到尾部
arr.pop()//弹出尾部的一个元素

arr.unshift(2)//压入到头部
arr.shift()//弹出头部的一个元素

arr.sort()//排序

arr.reverse()//元素反转
var arr2=['A','B','C']
arr.concat(arr2)//[1,2,3,'A','B','C']

arr2.join('-')//"A-B-C"

注意：concat()并没有修改数组，只是会返回一个新的数组

3.3、对象

若干个键值对

var 对象名 = {
	属性名：属性值，
	属性名：属性值，
	属性名：属性值
}
//定义了一个person对象，它有四个属性
var person = {
	name:"Tom",
	age:3,
	email:"123456798@QQ.com",
	score:66
}

Js中对象，{…}表示一个对象，建制对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象！

1、对象赋值

person.name="qingjiang"

2、使用一个不存在的对象属性，不会报错！但会显示undefined

person.hh//undefined

3、动态的删减属性，通过delete删除对象的属性

4、动态的添加，直接给新的属性添加值即可

5、判断属性值是否在这个对象中！xxx in xxx

'age' in person //true
'toString' in person //true，继承关系

继承关系，age有toString方法

6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person.hasOwnProperty('toString')//false,这不是自身的属性
person.hasOwnProperty('age')//true

3.4、流程控制

forEach循环

var age=[1,2,3,4,5,6,7,8,9]
age.forEach(function (value){
	console.log(value)
})

for …in

var age=[1,2,3,4,5,6,7,8,9]
for(var index in age){//不是值，是下标
	console.log(age[index])
}

3.5、Map和Set(ES6的新特性)

Map

var map=new Map([['Tom',100],['Jack',90],['Alice',80]]);
var name=map.get('Tom');//通过key值获得value
map.set('Bob',60);//新增或修改
map.delete('Tom');//删除

Set

无序不重复的集合，可以去重

var set=new Set([1,1,2,2,3,3])//[1,2,3]
set.add(5);
set.delete(1);
set.has(3);//是否包含某个元素

3.6、iterator

遍历数组

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

for of 是遍历值，for in是遍历下标

遍历Map

var map=new Map([['Tom',100],['Jack',90],['Alice',80]]);
for(let x of map){
	console.log(x)
}

遍历set

var set=new Set([1,1,2,2,3,3])//[1,2,3]
for(let x of set){
	console.log(x)
}

4、函数

4.1、定义函数

定义方式

function abs(x){}
var abs=function(x){}

function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！
方式一和方式二等价！

参数问题：javaScript可以传任意个参数，也可以不传递参数，参数多或少都不报错

arguments

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

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

rest

以前：

if(arguments.length>2){
	for(var i=2;i<arguments.length;i++){
	//......
	}
}

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

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

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

4.2、变量的作用域

作用域

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

假设在函数体内声明，则在函数体外不可以使用（闭包）
内部函数可以访问外部函数的成员，反之则不行
假设，内部函数变量和外部函数变量，重名！

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

提升变量的作用域

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

结果：x undefined

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

相当于

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

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

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

全局变量

'use strict'
var x=1;
function f(){
	console.log(x);
}
f();//1
console.log(x);//1

x尽量加上var声明，且加上’use strict’

全局对象window

var x='xxx';
alert(x)//xxx
alert(window.x)//xxx,默认所有的全局变量都会绑定到window上

//alert() 这个函数本身也是一个window的变量；
window.alert(x);//xxx
var old_alert=window.alert;
old_alert(x);//xxx

window.alert=function(){};
window.alert(123);//发现alert失效了

window.alert=old_alert;
window.alert(456);//456

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

由于我们的所有变量都会绑定到window上，。如果不同的js文件，使用了相同的全局变量，就会产生冲突，如何减少这样的冲突 ----> 把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题

局部作用域

function aaa(){
	for(var i=0;i<100;i++){
		console.log(i);
	}
	console.log(i+1);//101
}

问题：i出了这个作用域还可以使用

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

ES6的let关键字，解决了局部作用域冲突的问题！建议大家都用let去定义局部作用域的变量；

常量

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

在ES6引入了常量关键字 const

var PI='3.14';
PI='213'//可以修改

const PI='3.14';
PI='213'// 会报错

4.3、方法

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

var kuang={
	name:'qingjiang',
	birth:2000,
	//方法
	age:getAge
}
function getAge(){
	var now=new Date().getFullYear();
	return now-this.birth;//this是无法指向的，是默认指向调用它的那个对象的；
}
//属性
kuang.name
//方法
kuang.age()

getAge()//NAN

apply

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

5、内部对象

5.1、标准对象

typeof 123; // 'number'
typeof NaN; // 'number'
typeof 'str'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Math.abs; // 'function'
typeof null; // 'object'
typeof []; // 'object'
typeof {}; // 'object'

5.2、Date

var date=new Date();//Sat Jan 04 2020 10:47:06 GMT+0800（中国标准时间）
date.setTime(1);//以毫秒数设置日期，这常常会改变整个日期对象
date.setFullYear(2012);//设置年份
date.setMonth(0);//设置月份
date.setDate(11);//设置月份中的天数

date.getFullYear();//年份
date.getMonth();//月份（0-11）
date.getDate();//天数（1-31）
date.getDay();//星期几（0-6）
date.getHours();//小时（0-23）
date.getMinutes();//分钟（0到59）
date.getSeconds();//秒（0-59）

date.getTime()//时间戳，全世界统一，从1970 1.1 0：00：00开始到现在的毫秒数

console.log(new Date(1578106175991))//时间戳转为时间

5.3、JSON

在javascript中，一切皆为对象，任何js支持的类型都可以用JSON表示，JSON格式如下：

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

JSON字符串和js对象转化

var user={
	name:"Bob",
	age:3,
	sex:'man'
}

//user的js对象：{"name":"Bob","age":3,"sex","man"}
//js对象转化为json字符串
var jsonUser=JSON.stringfy(user);

//user的json对象：'{"name":"Bob","age":3,"sex","man"}'
//json字符串转化为js对象
var obj=JSON.parse('{"name":"Bob","age":3,"sex","man"}');

5.4、AJAX

写法：

原生的：xhr异步请求
jQuery封装好的：$(#name).ajax("")
axios请求

6、面向对象编程

6.1、原型对象

javascript、java、c#------面向对象；但是javascript有些区别！

类：模板
对象：具体实例

在javascript中，需要大家转换一下思维方式！
原型：

var user={
	name:"Bob",
	age:3,
	run:function(){
		console.log(this.name+"run....");
	}
}

var xiaoming={
	name:"xiaoming"
}
xiaoming.run();//不可以执行

//原来的做法：给xiaoming指定原型为user
xiaoming._proto_=user;
xiaoming.run();//可以执行

6.2、class继承

class关键字，是在ES6引入的，可能某些浏览器不支持

<script>
	//以前定义一个类
	function Student(name){
		this.name=name;
	}
	//给Student新增一个方法
	Student.prototype.hello=function(){
		alert("Hello");
	};
	//ES6之后========================
	//定义一个学生的类
	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 XiaoStudent("xiaohong",1);
</script>

6.3、原型链

可参考：原型与原型链
[web] javascript学习笔记

7、操作BOM（浏览器对象模型）对象

1. window

window代表浏览器窗口

window.innerHeight
window.innerWidth
window.outerHeight
window.outerWidth

2. Navigator（不建议使用）

navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform

Navigator封装了浏览器的信息，大多数时候，我们不会使用navigator对象，因为会被人为修改。不建议使用这些属性来判断和编写代码

3. screen

代表屏幕尺寸

screen.width
screen.height

4. location

location代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/?tn=48021271_11_hao_pg"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign('https://www.taobao.com')

5. document（内容DOM）

document.title//网页标题
document.cookie

cookie容易被劫持，服务器端可以设置cookie为httpOnly，就可以防止劫持

6. history（不建议使用）

history.back()
history.forward()

8、操作DOM（文档对象模型）对象

用的太多了，已经很熟练了，不写了

9、操作表单

<!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>
        <!--表达绑定提交事件
			οnsubmit= 绑定一个提交检测的函数，true，false
			将这个结果返回给表单，使用onsubmit接收
		-->
        <form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()">
            <p>
            	<span>用户名：</span><input type="text" id = "username" name = "username"/>
        	</p>
            <p>
            	<span>密码：</span><input type="password" id = "password" />
        	</p>
            <input type = "hidden" id = "md5-password" name = "password"> 
            
            <!--绑定事件 onclick 被点击-->
            <button type = "submit">提交</button>
            
        </form>
        
        <script>
        	function aaa(){
                alert(1);
                var username = document.getElementById("username");
                var pwd = document.getElementById("password");
                var md5pwd = document.getElementById("md5-password");
                //pwd.value = md5(pwd,value);
                md5pwd.value = mad5(pwd.value);
                //可以校验判断表单内容，true就是通过提交，false就是阻止提交
                return false;
                
            }
        </script>
        
    </body>
</html>

10、JQuery

选择器

//jQuery css中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click;//class选择器

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

mousedown()(jQuery)----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移动
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)

节点文本操作

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

CSS的操作

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

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

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();

总结

花了整整一天时间，重新刷了一遍狂神的视频，然后对照着重新捋了一遍，最大的收获就是巩固了基础的知识，了解了不少底层的原理，而真正实践性的东西，例如操作DOM、操作表单以及JQuery因为自己用的比较多反而觉得没有什么需要记录的。后面准备再用一天时间整理一下html和css的东西，巩固一下基础。

本文地址：https://blog.csdn.net/qq_37574623/article/details/109269761

[web] javascript学习笔记

0、前端知识体系

0.1、HTML

0.2、CSS

0.3、JavaScript

JavaScript框架

UI框架

JavaScript构建工具

0.4、三端同一

混合开发（Hybrid App）

1、什么是Javascript

2、快速入门

2.1、引入JavaScript

2.2、浏览器必备调试须知

2.3、数据类型

简单数据类型

数组

对象

2.4、严格检查格式

3、数据类型

3.1、字符串

3.2、数组

3.3、对象

3.4、流程控制

forEach循环

for …in

3.5、Map和Set(ES6的新特性)

Map

Set

3.6、iterator

遍历数组

遍历Map

遍历set

4、函数

4.1、定义函数

4.2、变量的作用域

作用域

提升变量的作用域

全局变量

局部作用域

常量

4.3、方法

5、内部对象

5.1、标准对象

5.2、Date

5.3、JSON

5.4、AJAX

6、面向对象编程

6.1、原型对象

6.2、class继承

6.3、原型链

7、操作BOM（浏览器对象模型）对象

8、操作DOM（文档对象模型）对象

9、操作表单

10、JQuery

总结

JavaScript的instanceof运算符学习教程

Linux计划任务Crontab学习笔记（2）：基本组成与配置

Linux计划任务Crontab学习笔记（4）：crontab 的日志

java学习笔记(中级篇)—java实现高质量图片压缩

斜率优化dp学习笔记

ReWrite学习笔记小结

松软科技web课堂:JavaScript 事件

JavaScript学习教程之cookie与webstorage

web API ,net - .net core 对比学习-文件目录概述

jQuery学习笔记之jQuery原型属性和方法