狂神说js学习笔记

saber_liluo

已于 2022-04-14 20:44:40 修改

阅读量931

点赞数 1

分类专栏：前端文章标签： javascript 学习前端

于 2022-03-16 17:52:24 首次发布

本文链接：https://blog.csdn.net/saber_liluo/article/details/123532065

版权

本文详细介绍了前端开发中的基础知识，包括前端三要素：HTML、CSS和JavaScript，强调了JavaScript的重要性和作用。讲解了JavaScript的定义、历史、数据类型、函数、内部对象，以及常用框架如jQuery、Angular、React和Vue。还提到了前端开发工具如CSS预处理器（SASS和LESS）、构建工具（Babel和Webpack）以及通信框架Axios。文章最后提及了面向对象编程、BOM和DOM操作，适合后台程序员学习前端知识。

摘要由CSDN通过智能技术生成

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 通信功能。
UI框架：
- Ant-Design：阿里巴巴出品，基于React的UI框架；
- ElementUI、iview、ice：饿了么出品，基于Vue的UI框架；
- BootStrap：Teitter推出的一个用于前端开发的开源工具包；
- AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架。
JavaScript构建工具：
- Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript。
- WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载。

0.5、三端同一

混合开发（Hybrid App）
主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：
- 云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
- 本地打包： Cordova（前身是 PhoneGap）

1、什么是JavaScript

1.1、概述

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

Java、JavaScript

开发历程10天~

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

1.2、历史

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

ECMAScript它可以理解为是JacaScript的一个标准

最新版本已经到se6版本~

但是大部分浏览器还只停留在支持es5代码上！

开发环境—线上环境，版本不一致

2、快速入门

2.1、引入JavaSciprt

1、内部标签

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

2、外部引入

abs.js

//。。。

test.html

<script src="abs.js"></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/qj.js"></script>
	
	<!-- 不用显示定义type,也默认就是jacascript -->
	<select type="text/jacascript">	
	</select>
  </head>
  <body>


<!-- 这里也可以存放 -->
  </body>
</html>

2.2、基本语法入门

<!-- JavaScript严格区分大小写！  -->
	<script type="text/javascript">
		// 1. 定义变量   变量类型  变量名 = 变量值；
		var score = 61; 
		// alert(num); 
		// 2.条件控制
		if(score>60 && score<70){
     
			alert("60~70");
		}else if(score>70 && score<800){
     
			alert("70~80");
		}else{
     
			alert("other");
		}
		
		// console.log(score)  在浏览器的控制台打印变量！  System.out.println();
		/* 多行注释
		asdf
		*/
	</script>

在这里插入图片描述

浏览器必备调试须知：

在这里插入图片描述

2.3、数据类型

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

变量

var 王者荣耀 = "倔强青铜"//高级符号和数字不能用来定义

number

js不区分小叔和整数，Number

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

字符串

‘abc’ “abc”

布尔值

true （真），false （空）

逻辑运算

&&  与， 两个都为正，结果为真

||  或 ， 一个为正，结果为真

！  非  ，真即假，假即真

比较运算符 ！！！！！重要！

=  赋值符号
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.000000001

null和undefined

null 空
undefined 未定义

数组

Java的数值必须列想通类型的对象，JS中不需要这样！

//保证代码的可读性，尽量使用【】
		var arr = [1,2,3,4,5,"hello",null,true];
		
		new Array(1,12,3,4,4,5,"hello");

取数组下标：如果越界了，就会

undefined

对象

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

每个属性之间使用逗号隔开，最后一个不需要添加

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

取对象的值

person.name
>"qingjiang"
person.age
>3

在这里插入图片描述

2.4、严格检查格式

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Title</title>
		
		<!-- 
		前提：IEDA 需要支持es6语法
		'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题 
		 必须写在JavaScript第一行
		 局部变量建议都使用let去定义~
		 -->
		<script>
			'use strict';
			// 全局变量
			let i = 1;
			// Es6 let	
		</script>
	</head>
	<body>
	</body>
</html>

3、数据类型

3.1、字符串

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

2、注意转义字符 \

\'  字符串
\n  换行
\t   tabe
\u4e2d  \u#### Unicode字符    中
\X41        Asc11字符

3、多行字符串编写

// tab上面，esc下面 `
			var msg = `hello
			world
			你好ya
			你好
			`

4.模板字符串

// tab上面，esc下面 `
let name = "qingjiang";
			let age = 3;
			let msg = `你好呀，${
     name}` //模板字符串 ${}

5、字符串长度

console.log(str.length)    //字符串长度为 3

6、字符串的可变性，不可变

在这里插入图片描述

7、大小写转换方法

//注意，这里是方法，不是属性了
console.log(student.toUpperCase())  //转换为大写
console.log(student.toLowerCase())  //转换为小写

8、student.indexOf(‘t’)

console.log(student.indexOf('t'))  //输出为1，输出t在字符中的第几个位置

9、substring

[)
console.log(student.substring(1))
//输出tudent，作用为截取字符第1个字符串到最后一个字符串
console.log(student.substring(1,3))
//输出tu  [1,3)从第一个字符串截取到第三个字符中间的字符（有第0个字符串）

3.2 数组

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

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

1、长度

arr.length
//输出为6
arr.length = 10
//输出为10，(10) [1, 2, 3, 4, 5, 6, 空 ×4]

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

2、indexOf，通过元素获得下标索引

arr = [1,2]
arr.indexof(2)
//输出为1,代表2在arr中是第一个位置。（数字1为0的位置）

字符串的“1”和数字 1 是不同的

arr = [1,2,3,4,5,6,"1","2"]
//(8) [1, 2, 3, 4, 5, 6, '1', '2']
arr.indexOf(1)
//0
arr.indexOf("1")
//6

3、slice（） 数组版的substring，截取Array的一部分，返回一个新数组

类似于String中的substring

arr = [1,2,3,4,5,6,"1","2"]
arr.slice(3)
//(5) [4, 5, 6, '1', '2']
arr.slice(1,5)
//(4) [2, 3, 4, 5]

4、push() : 压入到尾部，在数组的后面添加元素

pop ()：弹出尾部的一个元素，在数组的后面删除元素

(括号中添加数字效果不变)

arr
//(8) [1, 2, 3, 4, 5, 6, '1', '2']
arr.push('a','b')
//10
arr
//(10) [1, 2, 3, 4, 5, 6, '1', '2', 'a', 'b']
arr.pop()
//'b'
arr
//(9) [1, 2, 3, 4, 5, 6, '1', '2', 'a']
arr.pop(4)
//'a'
arr
//(8) [1, 2, 3, 4, 5, 6, '1', '2']
arr.pop('4')
//'2'
arr
//(7) [1, 2, 3, 4, 5, 6, '1']

5、unshif() ,shift() 头部

unshif() 压入到头部，在头部添加元素

shif() 弹出头部的一个元素，在头部弹出元素

arr
//(7) [1, 2, 3, 4, 5, 6, '1']
arr.unshift('a','b')
//9
arr
//(9) ['a', 'b', 1, 2, 3, 4, 5, 6, '1']
arr.shift()
//'a'
arr.shift()
//'b'
arr
//(7) [1, 2, 3, 4, 5, 6, '1']

6、排序 sort（）

arr
//(3) ['B', 'C', 'A']
arr.sort()
//(3) ['A', 'B', 'C']

7、元素反转 reverse（）

//(3) ['A', 'B', 'C']
arr.reverse()
//(3) ['C', 'B', 'A']

8、concat()

//(3) ['C', 'B', 'A']
arr.concat([1,2,3])
//(6) ['C', 'B', 'A', 1, 2, 3]
arr
//(3) ['C', 'B', 'A']

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

9、连接符 join

打印拼接数组，使用特定的字符串连接

//(3) ['C', 'B', 'A']
arr.join('-')
//'C-B-A'

10、多维数组

arr = [[1,2],[3,4],["5","6"]];
arr[1]

最低0.47元/天解锁文章

saber_liluo

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
狂神说js学习笔记

0、前端知识体系想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。0.1前端三要素HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容。CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。JavaScript（行为）：是一种
复制链接

扫一扫