全栈工程师开发手册（原创）(腾讯内推)

全栈工程师开发手册 （作者：栾鹏）快捷链接： js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算法全解 js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js系列教程8-事件全解 js系列教程9-表单元素全解 js系列教程10-canvas绘图全解 js系列教程

全栈工程师开发手册 （作者：栾鹏）快捷链接： js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算法全解 js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js系列教程8-事件全解 js系列教程9-表单元素全解 js系列教程10-canvas绘图全解 js系列教程

全栈工程师开发手册 （作者：栾鹏） js系列教程8-事件操作全解js中事件捕获和事件冒泡其实不仅在js中，在面向对象的编程语言中或多或少涉及到这个问题。js编程的事件全解，你可以到我的主页，这里给你重点讲一下js中的事件捕获和事件冒泡。事件捕获和冒泡的定义上图为网页事件的捕获和冒泡过程。冒泡型事件：子元素事件会向父元素传递，触发父元素的同类事件。事件按照从最特定的事件目标到最不特定的事件目标(

js中DOM, DOCUMENT, BOM, WINDOW 区别 全栈工程师开发手册 （作者：栾鹏） js系列教程6-BOM操作全解js中WINDOW对象中的navigator成员对象navigator`对象：包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用window.navigator.appCodeName //浏览器代码名window.

js中DOM, DOCUMENT, BOM, WINDOW 区别 全栈工程师开发手册 （作者：栾鹏） js系列教程6-BOM操作全解js中WINDOW对象中的navigator成员对象navigator`对象：包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用window.navigator.appCodeName //浏览器代码名window.navi

全栈工程师开发手册 （作者：栾鹏） js系列教程6-BOM操作全解js中WINDOW对象BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。1、Window对象Window 对象是 JavaScript层级中的顶层对象。 Win

全栈工程师开发手册 （作者：栾鹏） js系列教程6-BOM操作全解 js系列教程7-DOM操作全解js中DOM, DOCUMENT, BOM, WINDOW 区别DOM 全称是 Document Object Model，也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。针对XHTML和

全栈工程师开发手册 （作者：栾鹏） js系列教程5-数据结构和算法全解js排序算法详解-基数排序其实基数排序和桶排序挺类似的，都是找一个容器把属于同一类的元素装起来，然后进行排序。可以把基数排序类比成已知该序列的最高位，然后以除去相对来说的最低位（可能是个位，可能是十位）剩余的位数为桶数，这样一来步长就是10或者100了。但是基数排序相对桶排序又有多了一个亮点，那就是基数排序是先排最低位（个位）

全栈工程师开发手册 （作者：栾鹏） js系列教程5-数据结构和算法全解js排序算法详解-桶排序一看到这个名字就会觉得奇特，几个意思，我排序还要再准备几个桶不成？还真别说，想用桶排序还得真准备几个桶，但是此桶非彼桶，这个桶是用来装数据用的。其实桶排序和计数排序还有点类似，计数排序是找一个空数组把值作为下标找到其位置，再把出现的次数给存起来，这似乎看似很完美，但也有局限性，不用小编说相信读者也能明白

全栈工程师开发手册 （作者：栾鹏） js系列教程5-数据结构和算法全解js排序算法详解-计数排序计数排序就是遍历数组记录数组下的元素出现过多次，然后把这个元素找个位置先安置下来，简单点说就是以原数组每个元素的值作为新数组的下标，而对应小标的新数组元素的值作为出现的次数，相当于是通过下标进行排序。看代码：function countingSort(array) {　　var len = arra

全栈工程师开发手册 （作者：栾鹏） js系列教程5-数据结构和算法全解js排序算法详解-堆排序这种排序方式呢，理论性太强，看动图的时候满脸写着懵逼，多看几遍似乎明白了编者的意图，但是要把这种理论的概念写成代码却不容易，且看代码：function heapSort(array) {　　console.time('堆排序耗时');　　//建堆 　　var heapSize = array.le

全栈工程师开发手册 （作者：栾鹏） js系列教程5-数据结构和算法全解js排序算法详解-快速排序既然是快速排序，那顾名思义一定很快，快的连小编都被懵逼了好几圈！建议先不要看动图，先看第一种写法：6.1 抽象版快速排序function quickSort(array, left, right) {　　console.time('1.快速排序耗时');　　if (left < right) {

全栈工程师开发手册 （作者：栾鹏） js系列教程5-数据结构和算法全解js排序算法详解-归并排序归并排序其实可以类比二分法，二分法其实就是二等分的意思，简而言之就是不断和新序列的中间值进行比较。归并排序似乎有异曲同工之妙，什么意思呢，就是将一个原始序对等分为两部分，然后不断地对等分新的序列，直至序列的长度为1或者2，那么想，如果一个序列为1，那就没有比较的意义了，它本身就是之最，如果是两个呢，那

全栈工程师开发手册 （作者：栾鹏） js系列教程5-数据结构和算法全解js排序算法详解-希尔排序希尔排序，直接上图；像这个算法看图理解起来并不是很难，就像比赛一样，1-6一组，2-7一组，每差5为一组进行比较，之后再每差2为一组进行比较，最后就是两两比较，有点类似冒泡算法，但又比冒泡多了一层增量的概念。起初小编看到这个导图的时候感觉编程挺简单的，无非就是改变一下增量，这有何难？人呐，都是眼高手低

全栈工程师开发手册 （作者：栾鹏） js系列教程5-数据结构和算法全解js排序算法详解-插入排序插入排序的原理其实很好理解，可以类比选择排序。选择排序时在两个空间进行，等于说每次从旧的空间选出最值放到新的空间，而插入排序则是在同一空间进行。可以这么理解，在一个数组中我们不知道哪个是最小值，那么就假定第一个就是最小值，然后取第二个值与第一个值比较产排序后的序列，然后再取第三个值与排序后的序列进行比

全栈工程师开发手册 （作者：栾鹏） js系列教程5-数据结构和算法全解js排序算法详解-选择排序相对于冒泡排序还有一种类似的方法就是选择排序，顾名思义就是选择性排序，什么意思呢？这么来理解，假设在三伏天有一趟室内游泳课，教练说了先在露天场地等着，从你们当中先选取最大个先进去，然后再从剩余的人中选择最大个进去，依次类推。那么小个的就在想了，教练你TMD的脑子是不是被驴踢了。但是如果是冒泡排序那更有

全栈工程师开发手册 （作者：栾鹏） js系列教程5-数据结构和算法全解js十大排序算法详解js中原生自带的数据结构比较简单，主要有数组Array、映射Map、集合Set。我们可以根据这三个基本数据结构实现我们其他想要的数据结构类型。数组Arrayjs中的数组不区分元素类型，数组的使用在可以参考js系列教程1-数组操作全解映射Mapvar map = new Ma

全栈工程师开发手册 （作者：栾鹏） js系列教程5-数据结构和算法全解js中数据结构正则法则的应用正则表达式 = /pattern/flags 其中flags中g表示匹配全部，i表示不区分大小写，m表示匹配多行。 pattern包含 ([{\^$|)?*+.]}元字符，若匹配的字符串中包含元字符，使用\转义。 代码如下：var patter1 = /(.)u/gi;

全栈工程师开发手册 （作者：栾鹏） js系列教程4-函数、函数参数教程全解js中函数也是一种对象，因此有自己的原型对象，可以作为其他对象的属性，也可以作为其他函数的参数。函数方法【apply()和call()】　　每个函数都包含两个非继承而来的方法：apply()和call()。这两个方法的用途都是在特定的作用域中调用函数，实际上等于函数体内this对象的值　　要想以对象o的方法来调用函数f()，

全栈工程师开发手册 （作者：栾鹏） js系列教程4-函数、函数参数教程全解在js中，函数本身属于对象的一种，因此可以定义、赋值，作为对象的属性或者成为其他函数的参数。函数名只是函数这个对象类的引用。函数对象属性【length属性】　　在js函数参数文章中介绍过，arguments对象的length属性表示实参个数，而函数的length属性则表示形参个数function add(x,y){

全栈工程师开发手册 （作者：栾鹏） js系列教程4-函数、函数参数教程全解函数参数arguments　　javascript中的函数定义并未指定函数形参的类型，函数调用也未对传入的实参值做任何类型检查。实际上，javascript函数调用甚至不检查传入形参的个数function add(x){ return x+1;}console.log(add(1));//2console.lo

全栈工程师开发手册 （作者：栾鹏） js系列教程4-函数、函数参数教程全解js中的4种函数调用模式javascript一共有4种调用模式：函数调用模式、方法调用模式、构造器调用模式和间接调用模式。【1】函数调用模式　　当一个函数并非一个对象的属性时，那么它就是被当做一个函数来调用的。对于普通的函数调用来说，函数的返回值就是调用表达式的值function add(x,y){ return x

全栈工程师开发手册 （作者：栾鹏） js系列教程4-函数、函数参数教程全解函数返回值1、所有函数都有返回值，没有return语句时，默认返回内容为undefined，和其他面向对象的编程语言一样，return语句不会阻止finally子句的执行。function testFinnally(){ try{ return 2; }catch(error){

全栈工程师开发手册 （作者：栾鹏）快捷链接： js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算法全解 js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js系列教程8-事件全解 js系列教程9-表单元素全解 js系列教程10-canvas绘图全解 js系

全栈工程师开发手册 （作者：栾鹏） js系列教程3-字符串、正则表达式全解js中字符串正则表达式正则法则的应用正则表达式 = /pattern/flags 其中flags中g表示匹配全部，i表示不区分大小写，m表示匹配多行。 pattern包含 ([{\^$|)?*+.]}元字符，若匹配的字符串中包含元字符，使用\转义。 代码如下：var patter1 = /(.)u/gi;

全栈工程师开发手册 （作者：栾鹏） js系列教程3-字符串、正则表达式全解js中字符串类型转化其他类型转化为字符串： 代码如下：var num= 19; // 19var myStr = num.toString(); // "19"var myStr = String(num); // "19"var myStr = "" +n

全栈工程师开发手册 （作者：栾鹏）js系列教程1-数组操作全解js中数组遍历迭代serialize()序列化，将元素转化为xx=xx&xx=xx&xx=xx字符串形式，不仅能用于表单。代码如下：var boolresult = names.every(function(item,index,array){ //对数组中元素每一项进行布尔运算，返回false和true。every函数，全部元素返

全栈工程师开发手册 （作者：栾鹏）js系列教程1-数组操作全解js中数组反向、排序数组反向使用reverse函数，数组排序使用sort函数，排序函数可以传入比较函数，也可以修改数组圆形，自定义添加排序函数代码如下：names.reverse(); //数组取反names.sort();

全栈工程师开发手册 （作者：栾鹏）js系列教程1-数组操作全解js中数组原型、自定义原型函数每个数组都包含length、prototype、constructor属性。 通过在prototype原型中自定义数组原型函数，实现为所有数组添加功能。 这里以添加一个查询最大值函数为例： 代码如下：function array_max( ){ return Math.max.apply(M

全栈工程师开发手册 （作者：栾鹏）js系列教程1-数组操作全解js中数组定义js中数组的定义非常简单，包含以下5中方式。不过首先要明确的是数组是Array类型的。不是基本数据类型代码如下：var names=[]; //定义数组并初始化为空names = ["小明","小红","小刚"]; //赋值，可以在定义时赋值nam

全栈工程师开发手册 （作者：栾鹏）js系列教程1-数组操作全解js中数组增删查改代码如下：//元素增加var names=[]; //定义数组并初始化为空names = ["小明","小红","小刚"]; //赋值，可以在定义时赋值names[4]="小胡"; //通过赋值

前端制作动画的几种方式（css3，js）制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。1.css的transition。语法：transition: property duration timing-function delay;prope

全栈工程师开发手册 （作者：栾鹏）快捷链接： js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算法全解 js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js系列教程8-事件全解 js系列教程9-表单元素全解 js系列教程10-canvas绘图全解 js系列教程

var mycanvas = document.getElementById("mycanvas");if(mycanvas.getContext){ //判断浏览器是否支持 var context = mycanvas.getContext("2d"); //context是画布，getContext获取绘图上下文对象，也有名为WebG

myform = document.getElementById("myform");//acceptCharset服务器能够处理的字符集，action请求地址，elements表单字段input集合，enctype请求的编码类型，length表单控件数量，method请求方式，name名称，reset()表单恢复默认值，submit()表单提交，提交前触发，target请求发送和接收相应的窗口名

printf("===========事件绑定===========");//时间可以在h5代码中直接添加也可以在js代码中添加var input1=document.getElementById("input1");input1.onclick = function(event){ //事件也是元素对象的方法属性，可以直接设置和调用input1.onclick(),删除input1.on

全栈工程师开发手册 （作者：栾鹏）快捷链接： js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算法全解 js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js系列教程8-事件全解 js系列教程9-表单元素全解 js系列教程10-canvas绘图全解 js系列教程

全栈工程师开发手册 （作者：栾鹏）快捷链接： js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算法全解 js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js系列教程8-事件全解 js系列教程9-表单元素全解 js系列教程10-canvas绘图全解 js系列教程

全栈工程师开发手册 （作者：栾鹏）快捷链接： js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算法全解 js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js系列教程8-事件全解 js系列教程9-表单元素全解 js系列教程10-canvas绘图全解 ...

//自定义函数，函数声明，会优先加载。调用函数时会先在本机活动对象中查询，即当前js文件中查询，如果没有才会向上查询，所以在两个js文件中定义相同函数名，js文件内调用各自的函数，其他文件中调用最后声明的函数function printf(str){ //var hint = document.getElementById("hint"); //根据id获取元素 hin