JavaScript笔记（狂神说）
本⽂章根据b站狂神说javascript视频教程整理视频链接：
0、前端知识体系
想要成为真正的“互联⽹Java全栈⼯程师”还有很长的⼀段路要⾛，其中前端是绕不开的⼀门必修课。本阶段课程的主要⽬的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联⽹Java全栈⼯程师”再向前迈进⼀步。
0.1、前端三要素
HTML（结构）：超⽂本标记语⾔（Hyper Text Markup Language），决定⽹页的结构和内容
CSS（表现）：层叠样式表（Cascading Style Sheets），设定⽹页的表现样式。
JavaScript（⾏为）：是⼀种弱类型脚本语⾔，其源码不需经过编译，⽽是由浏览器解释运⾏，⽤于控制⽹页的⾏为
0.2、结构层（HTML）
太简单，略
0.3、表现层（CSS）
CSS层叠样式表是⼀门标记语⾔，并不是编程语⾔，因此不可以⾃定义变量，不可以引⽤等，换句话说就是不具备任何语法⽀持，它主要缺陷如下：
语法不够强⼤，⽐如⽆法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复⽤机制，使得逻辑上相关的属性值必须以字⾯量的形式重复输出，导致难以维护；这就导致了我们在⼯作中⽆端增加了许多⼯作量。为了解决这个问题，前端开发⼈员会使⽤⼀种称之为【CSS预处理器】的⼯具，提供CSS缺失的样式层复⽤机制、减少冗余代码，提⾼样式代码的可维护性。⼤⼤的提⾼了前端在样式上的开发效率。
什么是CSS预处理器
CSS预处理器定义了⼀种新的语⾔，其基本思想是，⽤⼀种专门的编程语⾔，为CSS增加了⼀些编程的特性，将CSS作为⽬标⽣成⽂件，然后开发者就只需要使⽤这种语⾔进⾏CSS的编码⼯作。转化成通俗易懂的话来说就是“⽤⼀种专门的编程语⾔，进⾏Web页⾯样式设计，再通过编译器转化为正常的CSS⽂件，以供项⽬使⽤”。
常⽤的CSS预处理器有哪些
SASS：基于Ruby ，通过服务端处理，功能强⼤。解析效率⾼。需要学习Ruby语⾔，上⼿难度⾼于LESS。
LESS：基于NodeJS，通过客户端处理，使⽤简单。功能⽐SASS简单，解析效率也低于SASS，但在实际开发中⾜够了，所以如果我们后台⼈员如果需要的话，建议使⽤LESS。
0.4、⾏为层（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 通信功能；
Ant-Design：阿⾥巴巴出品，基于React的UI框架
ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
BootStrap：Teitter推出的⼀个⽤于前端开发的开源⼯具包
AmazeUI：⼜叫“妹⼦UI”，⼀款HTML5跨屏前端框架
JavaScript构建⼯具
Babel：JS编译⼯具，主要⽤于浏览器不⽀持的ES新特性，⽐如⽤于编译TypeScript
WebPack：模块打包器，主要作⽤就是打包、压缩、合并及按序加载
注：以上知识点已将WebApp开发所需技能全部梳理完毕
0.5、三端同⼀
混合开发（Hybrid App）
主要⽬的是实现⼀套代码三端统⼀（PC、Android：.apk、iOS：.ipa）并能够调⽤到设备底层硬件（如：传感器、GPS、摄像头等），打包⽅式主要有以下两种：
云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
本地打包： Cordova（前⾝是 PhoneGap）
⼩程序
详见官⽹，这⾥就是介绍⼀个⽅便⼩程序UI开发的框架：WebUI
1、什么是Javascript
1.1、概述
javaScript是⼀门世界上最流⾏的脚本语⾔ Java，JavaScript 10天⼀个合格的后端⼈员，必须精通JavaScript
1.2、历史
见百度
ECMAScript它可以理解为JavaScript的⼀个标准最新版本已经到es6版本~ 但是⼤部分浏览器还只停留在⽀持es5代码上！开发环境–线上环境，版本不⼀致
2、快速⼊门
2.1、引⼊JavaScript
1、内部标签
<script>
//....
<script>
2、外部引⼊
hj.js
aert("hello,world");
test.html
<!--外部引⼊
注意：script必须成对出现
-->
<script src="js/hj.js"></script>
<!--不⽤显⽰定义type，也默认就是javaScript-->
<script type="text/javascript"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签内，写Javascript代码-->
<!--<script>
alert("hello,world");
</script>-->
<!--外部引⼊
注意：script必须成对出现
-->
<script src="js/hj.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 = 1 ;
//alert(num)
// 2. 条件控制
if (score > 60 && score < 70){
alert("60~70");
}else if(score > 70 && score < 80){
alert("70~80");
}else{
alert("other")
}
</script>
</head>
<body>
</body>
</html>
浏览器必备调试须知：
2.3、数据类型
数值，⽂本，图形，⾳频，视频
变量
var a
number
js不区分⼩树和整数，Number
123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN //not a number
Infinity // 表⽰⽆限⼤
字符串
‘abc’ “abc”
&& 两个都为真，结果为真
|| ⼀个为真，结果为真
! 真即假，假即真
⽐较运算符！！！重要！
=
1，"1"
== 等于（类型不⼀样，值⼀样，也会判断为true）
=== 绝对等于（类型⼀样，值⼀样，结果为true）
这是⼀个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
undefined
对象
对象是⼤括号，数组是中括号
每个属性之间使⽤逗号隔开，最后⼀个属性不需要逗号
// Person person = new Person(1,2,3,4,5);
var person = {
name:'Tom',
age:3,
tags:['js','java','web','...']
}
取对象值
person.name
> "Tom"
javascript全局数组person.age
> 3
2.4、严格检查格式use strict
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IDEA需要设置⽀持ES6语法
'use strict'；严格检查模式，预防JavaScript的随意性导致产⽣的⼀些问题必须写在JavaScript的第⼀⾏！
局部变量建议都使⽤let去定义~
-->
<script>
'use strict';
//全局变量
let i=1
//ES6 let
</body>
</html>
3、数据类型
3.1、字符串
1、正常字符串我们使⽤单引号，或者双引号包裹
2、注意转义字符 \
\'
\n
\t
\u4e2d \u> Unicode字符
\x41 Ascall字符
3、多⾏字符串编写
//tab 上⾯ esc下⾯
var msg =
`hello
world
你好呀
nihao
`
4、模板字符串
/
/tab 上⾯ esc下⾯
let name = 'Tom';
let age = 3;
var msg = `你好，${name}`
5、字符串长度
str.length
6、字符串的可变性，不可变
7、⼤⼩写转换
//注意，这⾥是⽅法，不是属性了
8、student.indexof(‘t’)
9、substring，从0开始
[)
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论