JavaScript学习笔记

  • JavaScript学习笔记已关闭评论
  • 184 次浏览
  • A+
所属分类:Web前端
摘要

tips:js——从面向对象编程到面向监狱编程……开个玩笑!前端有很多需要学习的模块


《狂神说JS》课程笔记

tips:js——从面向对象编程到面向监狱编程……开个玩笑!

目录

JavaScript概述

前端有很多需要学习的模块

结构层HTML、表现层CSS、CSS预处理器(用于简化冗杂的CSS代码)、行为层JavaScript

JS的优点:适用范围广,实用性高

JS的缺点:高并发缺陷

JavaScript框架

  • jQuery:简化DOM操作
  • Angular:MVC模式、模块化开发
  • React:虚拟DOM的使用提高了前端的渲染效率,但是使用较为复杂,需要额外学习JSX语言
  • Axios:通讯框架、使用jQuery的AJAX通信功能与服务器交互

UI框架

  • Ant-Design:基于React的UI框架
  • ElementUI:基于Vue的UI框架
  • Bootstrap:前端开发的开源工具包
  • AmazeUI:HTML5跨屏前端框架

JavaScript构建工具

  • Babel:JS编译器,用于浏览器不支持ES新特性
  • WebPack:用于打包、压缩、合并以及按序加载

JavaScript的引入

和CSS样式表的引入相同,有HTML内部引用和外部引用

内部引用

在head标签或者body标签的尾部添加script标签,在其中添加JavaScript代码

按照网页的加载顺序来看,位置在body标点尾部实践最佳

外部引用

在head标签内用script的src属性引入js文件

要注意和link不同,script无论内部引用和外部引用都是双标签

JavaScript的基本语法

JavaScript的注释方式

和Java一样

//用于单行注释 /* * 用于多行注释 */ 

JavaScript的数据类型和运算符

Java中的四类八种部分在JavaScript中分为数值、文本、图形、音频、视频……

数值

整数、浮点数、科学计数法、负数、NaN(表示非数字)、Infinity(表示无穷大)

文本

'abc'、"abc"、"n"

布尔值

true和false

null和undefined

null即为空指针

undefined表示未定义

数组
var arr = [1,2.3,'abc',"abc",NaN,null,true]; //由于var可以说是通用的数据类型,所以定义上JavaScript的数组和Java是一样的——数组用于储存一组数据类型相同的数据 new Array(1,2.3,'abc',"abc",NaN,null,true); console.log(arr[10])-->undefined 

对象

逻辑运算符

&&简洁与、||简洁或、!非

比较运算符

在js中‘=’表示赋值、‘’仅仅会进行值的比较,相等即为true、‘=’会对值和类型同时进行比较,同时相等则为true

所以NaN和自己进行比较结果为false,调用isNaN() 方法即可;

数值运算符

和Java相同,同样对浮点数的运算会有精度的损失

JavaScript基本规范

  1. 不要在同一行中声明多个变量
  2. 使用‘=’以及‘!’来比较true和false以及数值
  3. 不要使用全局函数
  4. switch语句必须有default兜底
  5. 函数的返回值不应该时有时无
  6. for循环必须使用大括号
  7. if条件语句必须使用大括号
  8. 应当写注释!

JavaScript的严格检查模式

JavaScript语法非常随意,甚至用来避免因随意性导致错误的严格检查模式都用的随意,很像是ES6后随意加上去的……

严格检查模式

'use strict'; 
  1. 严格检查模式必须放在JavaScript的第一行
  2. IDEA中的JavaScript版本必须是ES6或者ES6+(虽然我现在不用IDEA)

严格检查模式下,let作为局部变量声明并不会报错,而var作为局部变量声明就会有下划线题示报错,所以最好

  • var通常用作全局变量
  • let通常用作局部变量

JavaScript基础知识详解

JavaScript是不是要吧随意诠释到底!

出现了一些无法理解的地方,太过随意导致代码写的多了连个错误都无法找到

String

"use strict" var str = "Hello,world!"; let string = str; let num = Math.random(); console.log(str); console.log(str+num); console.log(str+str); console.log(str[0]);//这个就难以置信!! console.log(str.indexOf('w')); console.log(str.length); console.log(str.toUpperCase()); console.log(str.substring(6,str.length-1)); 
Console:     Hello,world!     Hello,world!0.7754435203942351     Hello,world!Hello,world!     H     6     12     HELLO,WORLD!     world 

Array

var array = [6,5,9,1,3,4,7,6,2] console.log(array); console.log(array.length); array.length = 20; console.log(array); console.log(array.length); array[15]=10; console.log(array); console.log(array.length); array[50]=10; console.log(array); console.log(array.length); console.log(array.sort());//无语了…… console.log(array.length); console.log(array.slice(5,10)); console.log(array.length); array.push("abc",'cc'); console.log(array); console.log(array.length); array.pop(); console.log(array); console.log(array.length); array.unshift("giao"); console.log(array); console.log(array.length); array.shift(); console.log(array); console.log(array.length); array.reverse(); console.log(array); console.log(array.length); var arr = [[1,2],[3,4],[5,6]]; console.log(arr); 
Console:     (9) [6, 5, 9, 1, 3, 4, 7, 6, 2]     9     (20) [6, 5, 9, 1, 3, 4, 7, 6, 2, empty × 11]     20     (20) [6, 5, 9, 1, 3, 4, 7, 6, 2, empty × 6, 10, empty × 4]     demo3.html:29 20     (51) [6, 5, 9, 1, 3, 4, 7, 6, 2, empty × 6, 10, empty × 34, 10]     51     (51) [1, 10, 10, 2, 3, 4, 5, 6, 6, 7, 9, empty × 40]     51     (5) [4, 5, 6, 6, 7]     51     (53) [1, 10, 10, 2, 3, 4, 5, 6, 6, 7, 9, empty × 40, 'abc', 'cc']     53     (52) [1, 10, 10, 2, 3, 4, 5, 6, 6, 7, 9, empty × 40, 'abc']     52     (53) ['giao', 1, 10, 10, 2, 3, 4, 5, 6, 6, 7, 9, empty × 40, 'abc']     53     (52) [1, 10, 10, 2, 3, 4, 5, 6, 6, 7, 9, empty × 40, 'abc']     52     (52) ['abc', empty × 40, 9, 7, 6, 6, 5, 4, 3, 2, 10, 10, 1]     52     (3) [Array(2), Array(2), Array(2)]0: (2) [1, 2]1: (2) [3, 4]2: (2) [5, 6]length: 3[[Prototype]]: Array(0) 

对象

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>对象</title> 	</head> 	<body> 		<script type="text/javascript"> 		"use strict" 			var student = { 				name: "Pilo-pillow", 				age: 3, 				emile: "[email protected]", 				score: 60//最后一个不用加逗号 			} 			 		</script> 	</body> </html>  

JavaScript学习笔记

流程控制

var arr = [5,1,6,8,7,3,4,9]; arr.forEach(function(value){     console.log(value) }) /*-----------------------------*/ for(var num in arr){     console.log(arr[num]) } 

结果:

JavaScript学习笔记

Map和Set

Map

map储存数据分为

键和值一一对应

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title></title> 	</head> 	<body> 		<script> 			var map = new Map([['1','这是一个字符串1'],[1,'这是一个数字1']]); 			map.set(true,'这是一个布尔值1') 		</script> 	</body> </html> 

JavaScript学习笔记

Set

set和Java中的set集合一样,无序并且可以对数据进行去重

JavaScript学习笔记

iterator

JavaScript学习笔记

JavaScript函数

这里的函数和C里的很像

function 方法名称(参数){     执行处理     return 返回值; } 

var是全能声明……

var 变量名称 = function(参数){     执行处理     return 返回值; }//这个相当于Java里的匿名内部类 

arguments

arguments是js中内置的一个对象,所有的函数执行时都会将参数值储存在arguments中,arguments的使用和数组一样,但是定义上又不是数组

JavaScript函数中并没有重载函数的功能,但是arguments可以实现(模拟)重载,有些函数功能的实现借助于arguments将会变得更容易理解(相较于不适用arguments的时候)

rest参数

rest是为了处理除了已定义函数参数的其他参数,其本质是数组,储存的就是前面提的其他参数

function ways(num1,num2,...rest){//rest只能写在最后 console.log("num1=>"+num1); console.log("num2=>"+num2); console.log(rest); } 

JavaScript学习笔记

作用域

对于局部变量和全局变量在使用规范和习惯上都和Java一样

但是局部变量对于以下这种情况:

function test(){     var a = 1;     var b = 1;     console.log(a+b); } 

结果为:2

function test(){     var a = 1;     console.log(a+b);     var b = 1; } function test(){     console.log(a+b);     var a = 1;     var b = 1; } 

结果为:NaN

function test(){     console.log(a+b); } 

结果为:a is not defined

所以说在第二段程序中,js自动将a,b在函数开头就声明了,老特性了……

全局变量的规范

我们所有的全局变量都会绑定在window对象(就是网页窗口)上,这样多段js代码的全局变量就若是相同就会冲突,需要定义唯一全局变量

用let去定义局部变量,用var定义全局变量,用const定义常量,并且常量名称要全大写

方法调用和apply

apply的意思是申请,感觉JavaScript越来越放荡了……

function getName() {     return this.name; } var pillow = {     name: 'pillow',     age: 20 } getName.apply(pillow); 

JavaScript学习笔记

getName.apply(pillow);——方法指向对象的属性,this就是pillow对象

JavaScript常用对象介绍

对象判断使用typeof即可

JavaScript学习笔记

Date

获得有关时间的数据,像是现在的年、月、日、时、分、秒、周几、时间戳(从1970年1月1日00:00:00到现在的毫秒数)

其他的请发挥想象,你想的JavaScript都有……

JSON

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

JSON 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似,所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

Ajax

Ajax(Asynchronous JavaScript and XML,即异步 JavaScript 和 XML)技术用于与服务器交换数据并刷新部分页面,实现更好的用户体验。

JavaScript的面向对象编程??

JavaScript的继承可用proto实现

子类.__proto__=父类; 

略显诡异

"use strict" // 定义一个类 class Person {     constructor(name) {         this.name = name;     }     sayHello() {         console.log('hello!');     } } // 继承一个类 class Man extends Person {     constructor(name, age) {         super(name)         this.age = age;     }     sayAge(age) {         console.log(age + 'years old');     } } // 创建对象 var pillow = new Man("pillow",20); var haozhi = new Person('haozhidada'); 

使用相同,但是在浏览器中可以看到一直在‘Prototype’,就是一直在继承继承……

操作BOM对象!!

BOM?---->Browser Object Model

就是浏览器对象模型——将浏览器作为对象的模型,这么理解?

BOM由多个对象构成,其中代表浏览器窗口的window对象是BOM的顶层对象

BOM对象:

  • window对象——JS最顶层对象,直接代表浏览器窗口
    • document对象——文档对象,在JavaScript中,代表整个HTML文档,可以进行写入、访问、修改等等
    • location对象——浏览器当前URL信息,用于获得当前页面的地址,并把浏览器重定向到新的页面
      • 获取具体的文档树节点
      • 获取cookie
    • navigator——浏览器本身信息,可通过此得到浏览器名称、内核、版本、用户信息等等,可以知道浏览器客户端为手机端或者PC端等等
    • screen——客户端屏幕信息,像是屏幕大小(我的是1920*1080px)
    • history——浏览器访问历史信息!!

操作DOM对象!!

文档树?就是将HTML中标签的分级按照树型结构来看?

像是:

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>DOM学习</title> 	</head> 	<body> 		<div class="a"> 			<a href="#" class="b">链接</a> 			<h1 id="c">一级标题</h1> 			<ul> 				<li>Document</li> 				<li>Object</li> 				<li>Model</li> 			</ul> 		</div> 		<p>段落</p> 		<script> 			var a = document.getElementsByClassName('a'); 			var c = document.getElementById('c'); 			var li = document.getElementsByTagName('li'); 		</script> 	</body> </html> 

JavaScript学习笔记

JavaScript学习笔记

使用原生js选择很少,大都搭配jQuery封装使用

更新DOM节点

获得HTML节点后我们就可以对其进行操作了

JavaScript学习笔记

JavaScript学习笔记

删除DOM节点

若要删除此节点,要先获取此节点的父节点,然后移除掉此节点

JavaScript学习笔记

需要注意:更改文档后的页面是实时更新的,所以像上面移除掉ul.children[0]后下一个ul.children[0]就是原来第二个li,删除到没有的话就会报错

插入DOM节点

直接对DOM节点进行修改会覆盖掉原来的内容。所以一般我们会追加节点或者创造节点

移动节点

JavaScript学习笔记

JavaScript学习笔记

JavaScript学习笔记

创建节点并追加

JavaScript学习笔记

创建就是create……

追加就是创建并移动……

操作表单以及验证

表单:

  • 文本框text
  • 下拉框select
  • 单选框radio
  • 多选框checkbox
  • 隐藏域hidden
  • 密码框password以及MD5加密

value:值

checked:是否选中

jQuery

jQuery相当于Java中的工具类库,里面是封装的JavaScript的代码

可以下载jQuery到本地进行引用,也可以直接使用网络上的链接

jQuery的使用:

$(selector).action(function(){     alert(no no no) };) 

$美元符号相当于jQuery,selector是CSS选择器,action就是事件,内部是事件

基础选择器selector

  • id选择器:#id
  • 标签选择器:element
  • 类选择器:.class

常用事件action

点击click

鼠标mouse~~~

键盘key~~~

技巧

扒网页

找到想要的网页,然后将多余的代码删掉,只留下核心代码,然后下载去看,更换元素等等……从入门到入狱

巩固JS知识

多多看jQuery的源码,看看js游戏的源码……

巩固HTML,CSS知识

多看网页源码