├── README.md ├── ch01 └── ch01.pdf ├── ch02 └── ch02.pdf ├── ch03 └── ch03.pdf ├── ch04 └── ch04.pdf ├── ch05 └── ch05.pdf ├── ch06 └── ch06.pdf ├── ch07 └── ch07.pdf ├── ch08 └── ch08.pdf ├── ch09 └── ch09.pdf ├── ch10 └── ch10.pdf ├── ch11 └── ch11.pdf ├── ch12 └── ch12.pdf ├── ch13 └── ch13.pdf ├── ch14 └── ch14.pdf ├── ch15 └── ch15.pdf ├── ch16 └── ch16.pdf ├── ch17 └── ch17.pdf ├── ch18 └── ch18.pdf ├── ch19 └── ch19.pdf ├── ch20 └── ch20.pdf ├── ch21 └── ch21.pdf ├── ch22 └── ch22.pdf ├── ch23 └── ch23.pdf ├── ch24 └── ch24.pdf ├── ch25 └── ch25.pdf ├── ch26 └── ch26.pdf ├── ch27 └── ch27.pdf ├── ch28 └── ch28.pdf ├── ch29 └── ch29.pdf ├── ch30 └── ch30.pdf ├── ch31 └── ch31.pdf ├── ch32 └── ch32.pdf ├── ch33 └── ch33.pdf ├── ch34 └── ch34.pdf ├── lessons ├── LS01 │ ├── index.html │ └── js │ │ ├── demo01.js │ │ ├── demo02.js │ │ ├── demo03.js │ │ ├── demo04.js │ │ ├── demo05.js │ │ ├── demo06.js │ │ ├── demo07.js │ │ ├── demo08.js │ │ ├── demo09.js │ │ ├── demo10.js │ │ ├── demo11.js │ │ ├── demo12.js │ │ ├── demo13.js │ │ ├── demo14.js │ │ └── demo15.js ├── LS02 │ ├── index.html │ └── js │ │ ├── demo01.js │ │ ├── demo02.js │ │ ├── demo03.js │ │ ├── demo04.js │ │ ├── demo05.js │ │ ├── demo06.js │ │ ├── demo07.js │ │ ├── demo08.js │ │ ├── demo09.js │ │ ├── demo10.js │ │ ├── demo11.js │ │ └── demo12.js ├── LS03 │ ├── index.html │ └── js │ │ ├── demo13.js │ │ └── demo14.js ├── LS04 │ ├── index.html │ └── js │ │ ├── demo01.js │ │ ├── demo02.js │ │ ├── demo03.js │ │ ├── demo04.js │ │ ├── demo05.js │ │ ├── demo06.js │ │ ├── demo07.js │ │ ├── demo08.js │ │ ├── demo09.js │ │ └── demo10.js ├── LS05 │ ├── index.html │ └── js │ │ ├── demo11.js │ │ ├── demo12.js │ │ └── demo13.js ├── LS06 │ ├── index.html │ └── js │ │ ├── demo14.js │ │ ├── demo15.js │ │ ├── demo16.js │ │ └── demo17.js ├── LS07 │ ├── index.html │ └── js │ │ ├── demo01.js │ │ ├── demo02.js │ │ ├── demo03.js │ │ └── demo04.js ├── LS08 │ ├── index.html │ └── js │ │ ├── demo05.js │ │ ├── demo06.js │ │ └── demo07.js ├── LS09 │ ├── index.html │ └── js │ │ ├── demo08.js │ │ ├── demo09.js │ │ └── demo10.js ├── LS10 │ ├── index04_2.html │ ├── index05.html │ └── js │ │ ├── demo01.js │ │ ├── demo02.js │ │ ├── demo03.js │ │ ├── demo04_1.js │ │ ├── demo04_2.js │ │ └── demo05.js ├── LS11 │ ├── index07_1_2.html │ ├── index08.html │ ├── index09.html │ └── js │ │ ├── demo06.js │ │ ├── demo07_1.js │ │ ├── demo07_2.js │ │ ├── demo08.js │ │ ├── demo09.js │ │ └── demo10.js ├── LS12 │ ├── ClosureTest.html │ ├── index11.html │ ├── index16.html │ └── js │ │ ├── ClosureTest.js │ │ ├── demo11.js │ │ ├── demo12.js │ │ ├── demo13.js │ │ ├── demo14.js │ │ ├── demo15.js │ │ └── demo16.js ├── LS13 │ ├── index.html │ └── js │ │ ├── demo01.js │ │ ├── demo02.js │ │ ├── demo03.js │ │ ├── demo04.js │ │ └── demo05.js ├── LS14 │ ├── index.html │ └── js │ │ ├── demo06.js │ │ ├── demo07.js │ │ ├── demo08.js │ │ ├── demo09.js │ │ ├── demo10.js │ │ ├── demo11.js │ │ ├── demo12.js │ │ ├── demo13.js │ │ ├── demo14.js │ │ ├── demo15.js │ │ └── demo16.js ├── LS15 │ ├── index.html │ └── js │ │ ├── demo01.js │ │ ├── demo02.js │ │ ├── demo03.js │ │ ├── demo04.js │ │ ├── demo05.js │ │ └── demo06.js ├── LS16 │ ├── index.html │ └── js │ │ ├── demo01.js │ │ ├── demo02.js │ │ ├── demo03.js │ │ ├── demo04.js │ │ ├── demo05.js │ │ ├── demo06.js │ │ └── demo07.js ├── LS17 │ ├── index.html │ └── js │ │ ├── demo07.js │ │ ├── demo08.js │ │ ├── demo09.js │ │ ├── demo10.js │ │ └── demo11.js ├── LS18 │ ├── index.html │ └── js │ │ ├── demo01.js │ │ ├── demo02.js │ │ ├── demo03.js │ │ ├── demo04.js │ │ ├── demo05.js │ │ ├── demo06.js │ │ └── demo07.js ├── LS19 │ ├── index.html │ └── js │ │ ├── demo08.js │ │ ├── demo09.js │ │ └── demo10.js ├── LS20 │ ├── index.html │ ├── js │ │ ├── demo01.js │ │ ├── demo02.js │ │ ├── demo03.js │ │ ├── demo04.js │ │ ├── demo05.js │ │ ├── demo06.js │ │ ├── demo07.js │ │ ├── demo08.js │ │ ├── demo09.js │ │ └── demo10.js │ └── 正则表达式（思维导图）.jpg ├── LS21 │ ├── index.html │ └── js │ │ ├── demo11.js │ │ ├── demo12.js │ │ ├── demo13.js │ │ └── demo14.js ├── LS22 │ ├── index.html │ └── js │ │ └── demo01.js ├── LS23 │ ├── NodeJsonTest │ │ ├── NodeJsonTest.html │ │ ├── NodeJsonTest.js │ │ ├── NodeJsonTest.json │ │ └── jquery-2.2.2.js │ ├── index.html │ └── js │ │ ├── demo02.js │ │ ├── demo03.js │ │ ├── demo04.js │ │ └── demo05.js ├── LS24 │ └── index.html ├── LS25 │ ├── demo01.js │ ├── demo02.js │ ├── demo03.js │ ├── demo04.js │ ├── demo05.js │ ├── demo06.js │ ├── index01.html │ ├── index02.html │ ├── index03.html │ ├── index04.html │ ├── index05.html │ ├── index06.html │ └── style.css ├── LS26 │ ├── NodeAjaxTest │ │ ├── NodeAjaxTest01.html │ │ ├── NodeAjaxTest01.js │ │ ├── NodeAjaxTest02.html │ │ ├── NodeAjaxTest02.js │ │ ├── NodeJsonTest.html │ │ ├── NodeJsonTest.js │ │ ├── NodeJsonTest.json │ │ └── jquery-2.2.2.js │ ├── NodePackDemo │ │ ├── Person.js │ │ ├── test01.js │ │ └── test02.js │ ├── index.html │ └── js │ │ ├── demo01.js │ │ ├── demo02.js │ │ ├── demo03.js │ │ ├── demo04-ajax.js │ │ └── demo04-node.js ├── LS27 │ ├── index.html │ └── js │ │ ├── demo01.js │ │ ├── demo02.js │ │ ├── demo03.js │ │ ├── demo04.js │ │ ├── demo05.js │ │ ├── demo06.js │ │ └── demo07.js ├── LS28 │ ├── index.html │ └── js │ │ ├── demo09.js │ │ ├── demo10.js │ │ ├── demo11.js │ │ ├── demo12.js │ │ ├── demo13.js │ │ ├── demo14.js │ │ └── demo15.js ├── LS29 │ ├── index.html │ └── js │ │ ├── demo01.js │ │ ├── demo02.js │ │ ├── demo03.js │ │ ├── demo04.js │ │ └── demo05.js ├── LS30 │ ├── index.html │ └── js │ │ ├── demo06.js │ │ ├── demo07.js │ │ ├── demo08.js │ │ ├── demo09.js │ │ └── demo10.js ├── LS31 │ ├── index.html │ └── js │ │ ├── demo11.js │ │ ├── demo12.js │ │ ├── demo13.js │ │ ├── demo14.js │ │ └── demo15.js ├── LS32 │ ├── index.html │ └── js │ │ ├── demo01.js │ │ ├── demo02.js │ │ ├── demo03.js │ │ ├── demo04.js │ │ ├── demo05.js │ │ ├── demo06.js │ │ └── demo07.js ├── LS33 │ ├── demo01.js │ ├── demo02.js │ ├── demo03.js │ ├── demo04.js │ ├── demo05.js │ ├── demo06.js │ └── index.html └── LS34 │ └── index.html ├── materials ├── outline.doc ├── schedule.doc └── slides │ ├── ch01.pptx │ ├── ch02.pptx │ ├── ch03.pptx │ ├── ch04.pptx │ ├── ch05.pptx │ ├── ch06.pptx │ ├── ch07.pptx │ ├── ch08.pptx │ ├── ch09.pptx │ ├── ch10.pptx │ ├── ch11.pptx │ ├── ch12.pptx │ ├── ch13.pptx │ ├── ch14.pptx │ ├── ch15.pptx │ ├── ch16.pptx │ ├── ch17.pptx │ ├── ch18.pptx │ ├── ch19.pptx │ ├── ch20.pptx │ ├── ch21.pptx │ ├── ch22.pptx │ ├── ch23.pptx │ ├── ch24.pptx │ ├── ch25.pptx │ ├── ch26.pptx │ ├── ch27.pptx │ ├── ch28.pptx │ ├── ch29.pptx │ ├── ch30.pptx │ ├── ch31.pptx │ ├── ch32.pptx │ ├── ch33.pptx │ ├── ch34.pptx │ └── cha34.pptx └── tasks ├── 1.JS 数据结构与算法 ├── 1-1.数组 │ ├── 数组任务1.js │ ├── 数组任务2.js │ ├── 数组任务3.js │ └── 数组任务4.js ├── 1-2.链表 │ ├── 链表任务1.js │ ├── 链表任务2.js │ ├── 链表任务3.js │ ├── 链表任务4.js │ └── 链表任务5.js ├── 1-3.二叉树 │ ├── 二叉树任务1.js │ ├── 二叉树任务2.js │ ├── 二叉树任务3.js │ ├── 二叉树任务4.js │ └── 二叉树任务5.js ├── 1-4.哈希表 │ ├── 哈希表任务1.js │ ├── 哈希表任务2.js │ └── 哈希表任务3.js └── 1-5.排序 │ ├── 排序任务1.js │ ├── 排序任务2.js │ ├── 排序任务3.js │ ├── 排序任务4.js │ └── 排序任务5.js ├── 2.JS SICP训练营 └── 2-1.过程与运算 │ ├── 过程与运算任务1.js │ ├── 过程与运算任务2.js │ ├── 过程与运算任务3.js │ ├── 过程与运算任务4.js │ ├── 过程与运算任务5.js │ └── 过程与运算任务6.js └── 3.JS 初级挑战杯 ├── 3-1.趣味算法 ├── 趣味算法任务1.js ├── 趣味算法任务10.js ├── 趣味算法任务2.js ├── 趣味算法任务3.js ├── 趣味算法任务4.js ├── 趣味算法任务5.js ├── 趣味算法任务6.js ├── 趣味算法任务7.js ├── 趣味算法任务8.js └── 趣味算法任务9.js └── 3-2.趣味游戏 ├── 趣味游戏任务1.js ├── 趣味游戏任务2.js ├── 趣味游戏任务3.js ├── 趣味游戏任务4.js └── 趣味游戏任务5.js /ch01/ch01.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch01/ch01.pdf -------------------------------------------------------------------------------- /ch02/ch02.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch02/ch02.pdf -------------------------------------------------------------------------------- /ch03/ch03.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch03/ch03.pdf -------------------------------------------------------------------------------- /ch04/ch04.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch04/ch04.pdf -------------------------------------------------------------------------------- /ch05/ch05.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch05/ch05.pdf -------------------------------------------------------------------------------- /ch06/ch06.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch06/ch06.pdf -------------------------------------------------------------------------------- /ch07/ch07.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch07/ch07.pdf -------------------------------------------------------------------------------- /ch08/ch08.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch08/ch08.pdf -------------------------------------------------------------------------------- /ch09/ch09.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch09/ch09.pdf -------------------------------------------------------------------------------- /ch10/ch10.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch10/ch10.pdf -------------------------------------------------------------------------------- /ch11/ch11.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch11/ch11.pdf -------------------------------------------------------------------------------- /ch12/ch12.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch12/ch12.pdf -------------------------------------------------------------------------------- /ch13/ch13.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch13/ch13.pdf -------------------------------------------------------------------------------- /ch14/ch14.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch14/ch14.pdf -------------------------------------------------------------------------------- /ch15/ch15.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch15/ch15.pdf -------------------------------------------------------------------------------- /ch16/ch16.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch16/ch16.pdf -------------------------------------------------------------------------------- /ch17/ch17.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch17/ch17.pdf -------------------------------------------------------------------------------- /ch18/ch18.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch18/ch18.pdf -------------------------------------------------------------------------------- /ch19/ch19.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch19/ch19.pdf -------------------------------------------------------------------------------- /ch20/ch20.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch20/ch20.pdf -------------------------------------------------------------------------------- /ch21/ch21.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch21/ch21.pdf -------------------------------------------------------------------------------- /ch22/ch22.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch22/ch22.pdf -------------------------------------------------------------------------------- /ch23/ch23.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch23/ch23.pdf -------------------------------------------------------------------------------- /ch24/ch24.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch24/ch24.pdf -------------------------------------------------------------------------------- /ch25/ch25.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch25/ch25.pdf -------------------------------------------------------------------------------- /ch26/ch26.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch26/ch26.pdf -------------------------------------------------------------------------------- /ch27/ch27.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch27/ch27.pdf -------------------------------------------------------------------------------- /ch28/ch28.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch28/ch28.pdf -------------------------------------------------------------------------------- /ch29/ch29.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch29/ch29.pdf -------------------------------------------------------------------------------- /ch30/ch30.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch30/ch30.pdf -------------------------------------------------------------------------------- /ch31/ch31.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch31/ch31.pdf -------------------------------------------------------------------------------- /ch32/ch32.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch32/ch32.pdf -------------------------------------------------------------------------------- /ch33/ch33.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch33/ch33.pdf -------------------------------------------------------------------------------- /ch34/ch34.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/ch34/ch34.pdf -------------------------------------------------------------------------------- /lessons/LS01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS01 JS用法 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /lessons/LS01/js/demo01.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | 4 | */ 5 | 6 | //JavaScript与ECMAScript介绍 参见百度百科 7 | //修改 8 | //https://baike.baidu.com/item/javascript 9 | 10 | //https://baike.baidu.com/item/ECMAScript 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /lessons/LS01/js/demo02.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | /* 5 | console.log("i'm demo"); 6 | */ 7 | 8 | //demo01中定义，demo02中调用，尽量避免全局方法 9 | // function max (a,b) { 10 | // return a>b?a:b; 11 | // } 12 | 13 | 14 | //避免滥用全局变量,见demo2.js 15 | var x = 10; 16 | document.onclick = function () { 17 | //console.log("x = ",x); 18 | alert("x = "+x); 19 | }; 20 | 21 | 22 | /* 23 | //如何避免全局污染，使用IIFE函数立即执行表达式 24 | (function () { // 开始 25 | var x = 10; 26 | document.onclick = function () { 27 | //console.log("x = ",x); 28 | alert("x = "+x); 29 | }; 30 | })(); // 结束 31 | */ -------------------------------------------------------------------------------- /lessons/LS01/js/demo03.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | /* 5 | console.log("i'm demo "); 6 | //console.error("demo error"); 7 | console.trace(); 8 | */ 9 | // console.log("max = "+ max(2,3)); 10 | 11 | 12 | //(function(){ 13 | //避免滥用全局变量 14 | var x = 20; 15 | //}()); 16 | -------------------------------------------------------------------------------- /lessons/LS01/js/demo04.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //基本语法回顾 5 | var x;//变量声明 区分声明与定义（对比其他语言 JS的语言特点，动态类型、弱类型）语句 6 | x = 23;//表达式作为语句时（赋值表达式语句） 7 | 8 | //条件语句 9 | if(x>22){ 10 | x+=2; 11 | }else{ 12 | console.log("x 不大于 22"); 13 | } 14 | 15 | var xx = 234; 16 | if(234 == xx){ //为什么要反写？？？？？ 17 | console.log("相等"); 18 | } 19 | 20 | //思考 21 | console.log(a); 22 | if(true){ 23 | var a = 2; 24 | } 25 | console.log(a); 26 | 27 | console.log(b); 28 | if(false){ 29 | var b = 3; 30 | } 31 | console.log(b); 32 | 33 | 34 | //循环语句 35 | for(var i=0;i<3;i++){ 36 | console.log("i:",i); 37 | } 38 | console.log(i);//是否会报错，若不报错的话此时i为多少？？？？？ 39 | 40 | //函数定义及调用 提问：函数有几种定义方式？？？？？ 41 | function max(x,y) { 42 | return x>y?x:y; 43 | } 44 | console.log(max(2,3)); -------------------------------------------------------------------------------- /lessons/LS01/js/demo05.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/9/7. 3 | */ 4 | //复合运算符 5 | var a = 3; 6 | a+=5; 7 | console.log(a); 8 | 9 | //标识符规则一下哪个不合法 10 | // _str 11 | // num 12 | // $abc 13 | // 8def 14 | 15 | //保留字回顾 认识多少????? 16 | //arguments break continue typeof instanceof delete等等 17 | 18 | console.log(typeof NaN);//什么类型 19 | console.log(typeof Infinity); 20 | 21 | -------------------------------------------------------------------------------- /lessons/LS01/js/demo07.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/9/7. 3 | */ 4 | //布尔类型与逻辑运算符 5 | 6 | //逻辑与、或的基本理解 7 | console.log(2>1&&4<5); 8 | console.log(true&&(!2)); 9 | console.log(false&&("2" == 2)); 10 | console.log(false&&false); 11 | 12 | console.log(2>1||4<5); 13 | console.log(true||(!2)); 14 | console.log(false||("2" == 2)); 15 | console.log(false||false); -------------------------------------------------------------------------------- /lessons/LS01/js/demo08.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/9/7. 3 | */ 4 | //数字类型 5 | console.log(1===1.0); 6 | console.log(Number("xyz")); 7 | console.log(3/0); 8 | 9 | -------------------------------------------------------------------------------- /lessons/LS01/js/demo09.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/9/7. 3 | */ 4 | var a = 10; 5 | console.log(++a); 6 | 7 | var b = 20; 8 | console.log(b++); -------------------------------------------------------------------------------- /lessons/LS01/js/demo10.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/9/7. 3 | */ 4 | //字符串链接 5 | var a = "abc"; 6 | var b = "def"; 7 | var c = a+b; 8 | 9 | //字符串常用方法，字符串的方法源于String.prototype 10 | var str1 = "aaa".concat("bbb");//返回字符串 11 | var str2 = "abcdef".slice(2); 12 | var str3 = "abcdef".slice(2,5); 13 | var str4 = "abcdef".slice(-2); 14 | var str5 = "abcdef".slice(2,-2); 15 | 16 | var str6 = "abcdef".split("c");//返回数组 17 | var str7 = "abcdef".split("c",1); 18 | var str8 = "abcdef".split("c",2); 19 | 20 | var str9 = "abcdef".charAt(2); 21 | var str10 = "abcdefabcdef".indexOf("d",1); 22 | var str11 = "abcdefabcdef".indexOf("d",4);//从第4个开始找 23 | 24 | var str12 = " abc def \r\n ".trim();//返回已移除前导空格、尾随空格和行终止符的原始字符串 25 | 26 | //substr 与 substring的区别 27 | var str13 = "abcdefghijklmn"; 28 | var str14 = str13.substr(2,5);//后一个参数代表长度 29 | console.log(str13,str14);//str13 未受到破坏 30 | 31 | var str15 = str13.substring(2,5);//后一个参数代表第几个end 32 | console.log(str13,str15);//str13 未受到破坏 33 | -------------------------------------------------------------------------------- /lessons/LS01/js/demo11.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/9/7. 3 | */ 4 | //条件语句 switch 贯穿在后续课程中介绍 5 | 6 | //循环语句 7 | for(var i=0;i<10;i++){ 8 | console.log("i:",i); 9 | } 10 | console.log("out of for:",i);//此时为多少 11 | 12 | //break和continue 13 | //练习输出0到20之间的奇数 14 | -------------------------------------------------------------------------------- /lessons/LS01/js/demo12.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/9/7. 3 | */ 4 | //函数定义 注意分号 5 | function max(a,b) { 6 | return a>b?a:b; 7 | } 8 | console.log(max(2,3)); 9 | 10 | var min = function(a,b){ 11 | return ay?x:y; 32 | }(4,5)); 33 | 34 | var result = function min(x,y) { 35 | return x 2 | 3 | 4 | 5 | LS02 数据类型、值与变量 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lessons/LS02/js/demo01.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //类型检测 typeof 一般用于值类型检测 5 | console.log(typeof 123); 6 | console.log(typeof true); 7 | console.log(typeof "abc"); 8 | console.log(typeof null); 9 | console.log(typeof undefined); 10 | console.log(typeof {name:"Mike",age:20}); 11 | 12 | console.log(typeof function foo(){}); 13 | 14 | /* 15 | //课外思考 16 | console.log(typeof Array); 17 | console.log(typeof Function); 18 | console.log(typeof Date); 19 | console.log(typeof Number);//String、Boolean 20 | 21 | console.log(typeof Math); 22 | console.log(typeof JSON); 23 | */ 24 | 25 | //类型检测 instanceof （左侧操作数为对象，右侧操作数为原型链中的一个类型时，返回为true） 26 | var a = {name:"Mike",age:20}; 27 | console.log(a instanceof Object); 28 | 29 | var b = [12,34,{},""]; 30 | console.log(b instanceof Array);//思考console.log(b instanceof Object); 31 | 32 | var Person = function(){ 33 | //... 34 | }; 35 | var p1 = new Person(); 36 | console.log(p1 instanceof Person);//思考console.log(p1 instanceof Object); 37 | 38 | -------------------------------------------------------------------------------- /lessons/LS02/js/demo02.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | // 基本（原始）数据类型与引用（对象）类型的区别 内存分配方式不同 5 | // 内存的分配方式影响变量的生命周期 6 | // 函数局部变量中的值类型变量与引用类型变量 7 | 8 | function foo() { 9 | var n = 10; 10 | var m = true; 11 | var str = "Hello World"; // str:"Hello World"存在栈中 12 | 13 | // obj的引用存在栈中，{value:"Hello World"}存在堆中，通过栈中的变量名obj(访问地址)访问 14 | var obj = { value: "Hello World" }; 15 | }; 16 | foo(); 17 | 18 | //思考 a和b分配在那个区: 19 | var a = 23;//window.a 20 | var b = 34;//window.b 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lessons/LS02/js/demo03.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | 5 | (function () { 6 | //基本（原始）数据类型与引用（对象）类型的区别 赋值方式不同 7 | var str_a = "a"; // 8 | var str_b = str_a; // 原始类型直接访问值,是值赋值 9 | str_b = "b"; // str_b的值为"b",而str_a的值仍然是"a" 10 | console.log(str_a,str_b); 11 | 12 | var obj_a = {v:"a"}; // obj_a存的是引用，引用堆内存中存的对象:{v:"a"}; 13 | var obj_b = obj_a; // obj_b存的也是引用,引用了堆内存的值{v:"a"}；是引用赋值 14 | obj_b.v = "b"; // 通过obj_b访问(修改)堆内存的变量,这时候堆内存中对象值为:{v:"b"},由于obj_a和obj_b引用的是堆内存中同一个对象值， 15 | // 所以这时候打印都是{v:"b"} 16 | console.log(obj_a,obj_b); 17 | 18 | obj_b = {v:"c"}; // 注意：因为改的是整个对象，这里会在堆内存中创建一个新的对象值:{v:"c"},而现在的obj_b引用的是这个对象， 19 | // 所以这里打印的obj_a依旧是{v:"b"},而obj_b是{v:"c"}(两者在内存中引用的是不同对象了)。 20 | console.log(obj_a,obj_b); 21 | }()); 22 | 23 | //注意：是值赋值还是引用赋值取决于变量的类型，而不取决于变量分配在堆区还是栈区 24 | var obj_c = {x1:2,y1:3};//obj_c.x1在堆区还是栈区 25 | var obj_d = {x2:2,y2:3}; 26 | 27 | console.log(obj_c.x1 === obj_d.x2); 28 | console.log(obj_c === obj_d); 29 | 30 | console.log({m:1}==={m:1}); 31 | 32 | //经典案例 33 | // 34 | var a =123; 35 | function foo1(x){ 36 | x = 345; 37 | } 38 | foo1(a); 39 | console.log(a); 40 | 41 | // 42 | var a ={y:123}; 43 | function foo2(x){ 44 | x.y = 345; 45 | } 46 | foo2(a); 47 | 48 | console.log(a.y); 49 | 50 | // 51 | var a ={y:123}; 52 | function foo3(x){ 53 | x.y = 345; 54 | x = {y:456}; 55 | } 56 | foo3(a); 57 | console.log(a.y); 58 | 59 | // 60 | var a ={y:123}; 61 | function foo4(x){ 62 | x = {y:456}; 63 | x.y = 345; 64 | } 65 | foo4(a); 66 | console.log(a.y); 67 | -------------------------------------------------------------------------------- /lessons/LS02/js/demo04.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | (function () { //立即执行表达式开始 5 | //基本（原始）数据类型与引用（对象）类型的区别1 判等不同 6 | var a1 = 100; 7 | var b1 = 100; 8 | console.log(a1 == b1); 9 | console.log(a1 === b1); 10 | 11 | // 12 | var a2 = new Number(200); 13 | var b2 = new Number(200); 14 | console.log(a2 == b2); 15 | console.log(a2 === b2); 16 | 17 | // 18 | var a3 = new Number(200); 19 | var b3 = a3; 20 | console.log(a3 == b3); 21 | console.log(a3 === b3); 22 | 23 | b3 = new Number(200); 24 | console.log(a3 === b3); 25 | /* 26 | //思考 27 | var a4 = new Number(200); 28 | var b4 = 200; 29 | console.log(a4 == b4);//思考：是b4转换了，还是a4转换了 30 | console.log(a4 === b4); 31 | 32 | //思考 33 | var a5 = {x:1,y:2}; 34 | var b5 = {x:1,y:2}; 35 | console.log(a5 === b5); 36 | console.log(a5.x === a5.x);//对象属性如果是基本类型内存分配在哪，比较时是值比较还是引用比较 37 | */ 38 | }());//立即执行表达式结束 -------------------------------------------------------------------------------- /lessons/LS02/js/demo05.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | (function () {//立即执行表达式开始 5 | 6 | // 基本（原始）数据类型与引用（对象）类型的区别2 函数参数传递方式不同 7 | // 值传递 8 | var str_a = "Hello World"; 9 | function fn_a(arg){ 10 | console.log(arg); // #1 --> Hello World 11 | arg = "Hai"; 12 | console.log(str_a,arg); // #2 --> Hello World , Hai 13 | }; 14 | fn_a(str_a); 15 | console.log(str_a);// #3 这时候str_a:"Hello World" 16 | 17 | //从上面#1处可以看出，传入函数fn_a的是str_a的值 18 | //并且内存中分配了新的空间来保存函数参数和其值(函数运行后自动释放这部分内存) 19 | //所以在#2处打印的是2个不同的字符串。也正是因为传值时候对str_a值进行了值的复制，而这又是原始类型的值， 20 | //所以在#3处的str_a与早先声明的str_a保持一致 21 | 22 | 23 | // 引用传递 24 | var obj_a = {value:1}; 25 | function fn_a(arg){ 26 | arg.value=3; 27 | }; 28 | fn_a(obj_a); 29 | console.log(obj_a);// 这时候obj_a是{value:3} 30 | 31 | function fn_b(arg){ 32 | arg={value:2};//创建了一个新的对象，arg指向新对象 33 | }; 34 | fn_b(obj_a); 35 | console.log(obj_a);// 这时候obj_a是{value:3} 36 | 37 | // 上面这个问题也可以从内存角度去理解，两个函数都是传址，而这个址引用了obj_a在内存中对应的对象， 38 | // 所以两个函数中的arg起初都是引用和obj_a同一个内存中的对象值， 39 | // 而fn_a中访问的依旧是和obj_a同一个内存对象，所以fn_a修改是成功的， 40 | // 但是在fn_b中重新为arg赋值新的对象，arg指向新对象并不会影响obj_a 41 | 42 | }());//立即执行表达式结束 -------------------------------------------------------------------------------- /lessons/LS02/js/demo06.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | 5 | var a1 = 20; 6 | var a2 = 23.4; 7 | console.log(parseInt(a2));//如果是非数字，则先转换为字符串，然后在转成整型 8 | console.log(parseFloat("23.456xy"));//同上，结果为23.456 9 | //注意：parseInt和parseFloat都为全局方法，即window全局对象的方法 10 | console.log(parseInt === window.parseInt); 11 | console.log(parseFloat === window.parseFloat); 12 | //思考：函数、对象属性、对象方法之间的关系 13 | //思考：在node.js中全局对象是什么？ 14 | 15 | 16 | console.log(Math.ceil(a2)); 17 | console.log(Math.floor(a2)); 18 | console.log(Math.round(a2)); 19 | a3 = 5e2;//指数形式 20 | console.log(a3); 21 | console.log(typeof Math);//输出function 还是 object ？ 22 | 23 | //NaN 24 | var x = Number("xis021");//试着转成Number类型 25 | console.log(x);//NaN 26 | isNaN(x);//true 27 | typeof NaN; 28 | 29 | console.log(Math.log(-1));//NaN 30 | console.log(Math.acos(2));//NaN 31 | console.log(NaN === NaN);//false 32 | 33 | 34 | //Infinity与-Infinity 35 | var y1 = 2/0; 36 | console.log(y1);//Infinity 37 | var y2 = -2/0; 38 | console.log(y2);//-Infinity 39 | isFinite(y2);//false，非有限数 40 | isFinite(23);//true，有限数 41 | 42 | //0与-0 43 | var z1 = 1/Infinity; 44 | console.log(z1);//0 45 | var z2 = -1/Infinity; 46 | console.log(z2);//-0 47 | 48 | 49 | -------------------------------------------------------------------------------- /lessons/LS02/js/demo07.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //JavaScript字符串的编码方式，Unicode字符集和UTF-16编码方式，参考链接： 5 | //http://www.ruanyifeng.com/blog/2014/12/unicode.html 6 | 7 | //字面量 8 | var str = "abc_def_ghi_jkl_mn"; 9 | 10 | //转义字符 \n \" \' \\ 11 | console.log("abc\ndefghi\\\n\'mn\'"); 12 | 13 | //字符串常用操作 14 | var str = "abc_def_ghi_jkl_mn"; 15 | // str.split("_"); 16 | // str.split("_",2); 17 | // str.concat("_opq"); 18 | // str.substr(4,7); 19 | // str.substring(4,7); 20 | // str.slice(2); 21 | // str.slice(2,5); 22 | // str.slice(-2); 23 | // str.slice(2,-2); 24 | // 更多内容参见下一章节 25 | 26 | // str.bold(); 27 | // str.link(); 28 | // str.fontcolor("red"); 29 | // str.fontsize(50); 30 | 31 | 32 | //模式匹配，参加后续正则表达式章节 33 | -------------------------------------------------------------------------------- /lessons/LS02/js/demo08.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | 5 | //Bool类型的值只有两个 true、false 6 | 7 | //Undefined 的几种情况 8 | var a; 9 | console.log(a);//undefined 10 | //注意：分清未定义与未声明的区别 undefined与 undeclare 11 | //没有加var 直接使用a是否会报错？ 12 | 13 | function foo(x,y) { 14 | console.log(x,y);//1 undefined 15 | } 16 | foo(1); 17 | 18 | function fee() { 19 | //没有返回值的情况 20 | } 21 | var feeReturnValue = fee(); 22 | console.log(feeReturnValue);//undefined 23 | 24 | 25 | //null 需要注意的一点 26 | console.log(typeof null);//object 27 | -------------------------------------------------------------------------------- /lessons/LS02/js/demo09.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | 5 | //对象类型 简述 6 | var obj = {x:1,y:2};//obj的原型是Object.prototype,并且obj继承的属性和方法都源于这个原型 7 | console.log(obj.__proto__ === Object.prototype); 8 | console.log(Object.prototype); 9 | 10 | var arr = [1,2,3,4,5];//arr的原型是Array.prototype,并且arr继承的属性和方法都源于这个原型 11 | console.log(arr.__proto__ === Array.prototype); 12 | console.log(Array.prototype); 13 | console.log(arr.__proto__.__proto__ === Object.prototype); 14 | 15 | function foo() { //foo的原型是Function.prototype,并且foo继承的属性和方法都源于这个原型 16 | console.log("foo function!"); 17 | }; 18 | console.log(foo.__proto__ === Function.prototype); 19 | console.log(foo.__proto__.__proto__ === Object.prototype); 20 | 21 | console.log(obj instanceof Object); 22 | console.log(arr instanceof Object); 23 | console.log(foo instanceof Object); 24 | console.log(foo === window.foo); 25 | 26 | //思考：isa的关系 27 | 28 | //所有对象都有属性，如何查看对象的属性，ES5中查看属性相关的几种方法 29 | for(var k in obj){//只能遍历整个原型链上所有可遍历的属性 30 | console.log(k,obj[k]); 31 | } 32 | 33 | console.log(Object.keys(obj));//返回一个数组，包含自身所有可枚举的属性 34 | 35 | console.log("x" in obj);//能够检查整个原型连上的属性，包括不可遍历的属性 36 | 37 | 38 | //注意：以下实例只做了解，具体内容在对象属性特性章节和函数对象章节详细介绍 39 | //函数也是对象，也不例外，函数也有若干属性 查看foo函数都有哪些属性 40 | for(var k in foo){ 41 | console.log(k,foo[k]);//没有自身属性，所以没有输出 42 | } 43 | console.log("call" in foo);//true 44 | console.log("apply" in foo);//true 45 | console.log("arguments" in foo);//true 46 | 47 | -------------------------------------------------------------------------------- /lessons/LS02/js/demo10.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //包装对象 5 | var a = 123; 6 | var b = new Number(a); 7 | 8 | console.log(a == b); 9 | console.log(a === b);//true or false 为什么 10 | 11 | //临时包装对象 12 | var str = "abcde"; 13 | console.log(str.length);//5 临时包装成了String对象 14 | str.length = 1; 15 | console.log(str.length,str);//5 "abcde" 临时包装对象并不影响原始值 16 | 17 | var arr = [1,2,3,4]; 18 | console.log(arr.length);//4 19 | arr.length = 1; 20 | console.log(arr.length,arr);//1 [1] -------------------------------------------------------------------------------- /lessons/LS02/js/demo11.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //Part 1 5 | console.log(Boolean(undefined)); 6 | console.log(Boolean(null)); 7 | console.log(Boolean(0)); 8 | console.log(Boolean(NaN)); 9 | console.log(Boolean(1)); 10 | console.log(Boolean("")); 11 | console.log(Boolean("abc")); 12 | console.log(Boolean({})); 13 | 14 | if(new Boolean(false)){ 15 | console.log("执行"); 16 | } 17 | 18 | //Part 2 19 | console.log(Number(undefined)); 20 | console.log(Number(null)); 21 | console.log(Number(true)); 22 | console.log(Number(false)); 23 | console.log(Number("")); 24 | console.log(Number("abc")); 25 | console.log(Number("123.345xx"));// 26 | console.log(Number("32343,345xx")); 27 | console.log(Number({x:1,y:2})); 28 | 29 | console.log(parseFloat("123.345xx")); 30 | console.log(parseFloat("32343,345xx")); 31 | console.log(parseInt("123.345xx")); 32 | console.log(parseInt("32343,345xx")); 33 | 34 | //Part 3 35 | console.log(String(undefined)); 36 | console.log(String(null)); 37 | console.log(String(true)); 38 | console.log(String(false)); 39 | console.log(String(0)); 40 | console.log(String(234)); 41 | console.log(String({x:1,y:2})); -------------------------------------------------------------------------------- /lessons/LS02/js/demo12.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | // Part11111111 隐式类型转换 5 | //比较运算符 与 隐式类型转换 6 | var a = 3; 7 | var b = 4; 8 | console.log(typeof (a>b),a>b); 9 | console.log(typeof (a==b),a==b); 10 | console.log(typeof (a 2 | 3 | 4 | 5 | LS02 数据类型、值与变量 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lessons/LS03/js/demo13.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //Number构造器属性（静态属性） 5 | Number.MAX_VALUE 6 | Number.MIN_VALUE 7 | Number.NaN 8 | Number.NEGATIVE_INFINITY 9 | Number.POSITIVE_INFINITY 10 | 11 | //Number原型方法(Number对象继承的方法） 12 | // Number.prototype.toFixed(); 13 | // Number.prototype.toPrecision(); 14 | // Number.prototype.toString(); 15 | // Number.prototype.toExponential(); 16 | 17 | var n1 = 12345.6789; 18 | console.log(n1.toFixed(2)); 19 | console.log(n1.toPrecision(2)); 20 | console.log(n1.toString()); 21 | console.log(n1.toExponential(2)); 22 | 23 | // 24 | console.log(NaN === NaN); 25 | console.log(isNaN("12,3")); 26 | console.log(Math.floor(3.8)); 27 | console.log(Math.floor(-3.8)); 28 | console.log(Math.ceil(3.2)); 29 | console.log(Math.ceil(-3.2)); 30 | console.log(Math.round(-3.2)); 31 | console.log(Math.round(-3.5)); 32 | console.log(Math.round(-3.8)); 33 | 34 | //其余部分参见《深入理解JS》第11章 35 | 36 | -------------------------------------------------------------------------------- /lessons/LS04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS03 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /lessons/LS04/js/demo01.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //上一章数据类型知识点回顾 Part1~Part3 5 | //Part1 6 | var a = [1,2,3]; 7 | var b = a; 8 | console.log(a,b); 9 | b.pop(); 10 | console.log(a,b); 11 | b = [4,5,6]; 12 | console.log(a,b); 13 | 14 | //Part2 15 | function foo(x) { 16 | x.push(4); 17 | x = [5,6,7]; 18 | x.push(8); 19 | //console.log(x); 20 | } 21 | var a = [1,2,3]; 22 | foo(a); 23 | console.log(a); 24 | 25 | //Part3 26 | function foo(x) { 27 | x.push(4); 28 | //console.log(x); 29 | x.length = 0; 30 | x.push(5,6,7,8); 31 | //console.log(x); 32 | } 33 | var a = [1,2,3]; 34 | foo(a); 35 | console.log(a); 36 | 37 | 38 | 39 | 40 | //字面量 41 | var obj = {x:1,y:2}; 42 | var arr = [1,2,3,4,5]; 43 | 44 | //关键字知多少 arguments、break、continue... 45 | 46 | //表达式与语句 表达式语句 47 | var o = {x:1,y:2}; 48 | a>b; 49 | 50 | // 存在二义性的语句，要避免有二义性的语句 51 | var max = function (x,y) { 52 | return x>y?x:y; 53 | }; 54 | // 下述代码是对象还是语句块 55 | { 56 | foo:max(2,3) 57 | } 58 | 59 | // 存在二义性的语句 补充一 60 | var max = function (x,y) { 61 | return x>y?x:y; 62 | }; 63 | var x = { 64 | foo:max(2,3) 65 | } 66 | 67 | // 存在二义性的语句 补充二 68 | var max = function (x,y) { 69 | return x>y?x:y; 70 | }; 71 | { 72 | console.log(123); 73 | console.log(456); 74 | foo:max(2,3) 75 | } 76 | 77 | 78 | -------------------------------------------------------------------------------- /lessons/LS04/js/demo02.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //Part1111111111 不同类型的表达式 5 | 23;//其中的23为原始表达式 6 | obj = {x:2};// ={x:2}为对象初始化表达式 7 | arr = [1,2];// =[1,2]为数组初始化表达式 8 | var foo = function(){ // = function(){}为函数定义表达式 9 | console.log("foo"); 10 | }; 11 | obj.x;//obj.x为属性访问表达式 12 | foo();//foo()为函数调用表达式 13 | 2+3;//2+3为算数运算表达式 14 | 2>3;//2>3为关系运算表达式 15 | 1&&2;//1&&2为逻辑运算表达式 16 | 17 | 18 | //Part222222222 关于语句 19 | 2>3;//表达式语句 20 | //条件语句 21 | var a=2,b=3; 22 | if(a>b){ 23 | console.log("a > b"); 24 | }else{ 25 | console.log("a < b"); 26 | } 27 | 28 | //扩展知识在chrome中测试下述代码： var a,b; 与 var a=b; 谁是局部变量，谁是全局变量？ 29 | function foo(){ 30 | var a=b=3; 31 | } 32 | foo(); 33 | console.log("b:",b);//是否报错？输出几？为什么？ 34 | console.log("a:",a);//是否报错？ 35 | 36 | 37 | //循环语句 38 | for(var i = 0;i<5;i++){ 39 | console.log("in for ",i); 40 | } 41 | console.log("out for ",i); 42 | -------------------------------------------------------------------------------- /lessons/LS04/js/demo03.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //ES5 中没有块作用域 5 | { 6 | var a = 20; 7 | } 8 | console.log("大括号外依然能访问到a:",a); 9 | 10 | for(var i = 0;i<5;i++){ 11 | console.log("in for ",i); 12 | } 13 | console.log("out of for ",i);//报错么，输出啥？ 14 | 15 | if(true){ 16 | var a = 20; 17 | } 18 | console.log(a); 19 | 20 | // 思考：下边的例子是否报错，输出什么，相关知识参考预解析部分 21 | // 你是否能够区分undefined和undeclared 22 | if(false){ 23 | var b = 30; 24 | } 25 | console.log(b); 26 | 27 | //C、C++、C#、Java等语言中的块，在线编译网站上查看 28 | /* 29 | #include 30 | using namespace std; 31 | int main() 32 | { 33 | for(int i =0;i<5;i++){ 34 | cout<<"i = "<=60: 54 | alert('及格'); 55 | break; 56 | case i<60: 57 | alert('不及格'); 58 | break; 59 | default: 60 | alert('default'); 61 | } -------------------------------------------------------------------------------- /lessons/LS04/js/demo09.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | var i = 1;//i=2、3、4 5 | switch(i){ 6 | case 1: 7 | console.log("case 1"); 8 | case 2: 9 | console.log("case 2"); 10 | break; 11 | case 3: 12 | console.log("case 3"); 13 | //break; 14 | case 4: 15 | console.log("case 4"); 16 | default: 17 | console.log("default"); 18 | } 19 | 20 | 21 | // 利用switch的穿透性:求某月某日是一年中的第几天? 22 | var year = 2017, 23 | month = 5, 24 | date = 20, 25 | sum = 0; 26 | switch(month-1){ 27 | case 11: 28 | sum += 30; 29 | case 10: 30 | sum += 31; 31 | case 9: 32 | sum += 30; 33 | case 8: 34 | sum += 31; 35 | case 7: 36 | sum += 31; 37 | case 6: 38 | sum += 30; 39 | case 5: 40 | sum += 31; 41 | case 4: 42 | sum += 30; 43 | case 3: 44 | sum += 31; 45 | case 2: 46 | sum += year%4==0&&year%100!=0||year%400==0?29:28; 47 | case 1: 48 | sum += 31; 49 | default: 50 | sum += date; 51 | } 52 | console.log(sum); -------------------------------------------------------------------------------- /lessons/LS04/js/demo10.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | 5 | 6 | //for ... in 遍历数组 7 | var arr = [2,,"33"]; 8 | for(var i in arr){ 9 | console.log(i,arr[i]); 10 | } 11 | 12 | //for ... in 遍历对象 13 | var obj = {x:10,y:20,z:"30"}; 14 | for(var k in obj){ 15 | console.log(k,obj[k],typeof obj[k]); 16 | } 17 | // 18 | var obj1 = {x:1}; 19 | var obj2 = Object.create(obj1); 20 | obj2.y = 2; 21 | obj2.z = 3; 22 | for(var k in obj2){ 23 | console.log(k,obj2[k]); 24 | } 25 | 26 | -------------------------------------------------------------------------------- /lessons/LS05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS03 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /lessons/LS05/js/demo11.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | var a = 34; 5 | if(a = 45){ 6 | console.log("是否会输出？"); 7 | } 8 | 9 | var b = 34; 10 | if(45 == b){//为什么要这样写，有什么好处 11 | console.log("是否会输出？"); 12 | } -------------------------------------------------------------------------------- /lessons/LS05/js/demo12.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | console.log("1"+"2"); //"12" 5 | console.log("1"+2); //"12" 6 | console.log(1+{}); //"1[object Object]" 7 | console.log(true+true); //2 8 | console.log("5"-2); //3 9 | 10 | // 11 | var x = "1"; 12 | console.log(++x); //2 注意++和--的隐式类型转换 13 | var x = "1"; 14 | console.log(x+1);//11 15 | // 思考：+= 是转成字符串类型还是转成数字类型 16 | // 不同情况下转换的类型不同 17 | var x = "1"; 18 | console.log(x+=1); 19 | var x = 1; 20 | console.log(x+=1); 21 | 22 | //回顾++i 与 i++ 23 | var i=1; 24 | var y = ++i + ++i + ++i; 25 | console.log(y); 26 | -------------------------------------------------------------------------------- /lessons/LS05/js/demo13.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | 5 | //下例中有几个是false？（A:0个, B:1个, C:2个, D:3个），运行一下看看 6 | console.log(3===3); 7 | console.log(3==="3"); 8 | console.log(3=="3"); 9 | console.log(3==new String(3)); 10 | console.log(3===new String(3)); 11 | 12 | //下例中有几个是false？（A:0个, B:1个, C:2个, D:3个），运行一下看看 13 | var obj1 = new String("xyz"); 14 | var obj2 = new String("xyz"); 15 | console.log("xyz"===obj1); 16 | console.log(obj1 == obj2); 17 | console.log(obj1 === obj2); 18 | console.log(obj1 == new String("xyz")); 19 | 20 | 21 | //下例中有几个是false？（A:0个, B:1个, C:2个, D:3个），运行一下看看 22 | var obj1 = new String("xyz"); 23 | var obj2 = new String("xyz"); 24 | console.log("xyz"!=obj1); 25 | console.log(obj1 !== obj2); 26 | console.log(obj1 != obj2); 27 | console.log(obj1 != new String("xyz")); 28 | 29 | //注意 是引用类型转换到基本类型了？还是基本类型转换到引用类型了？ 30 | console.log(2 == 2); 31 | console.log(new Number(2) == new Number(2)); 32 | console.log(2 == new Number(2)); 33 | 34 | //存在二义性的代码，与预期的结果不一致 35 | var obj1 = {x:2,y:[1],z:false}; 36 | var obj2 = {x:2,y:[1],z:new Boolean(false)}; 37 | //var obj2 = {x:2,y:[1],z:Boolean(new Boolean(false))}; 38 | console.log(obj1.z == obj2.z); 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /lessons/LS06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS03 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /lessons/LS06/js/demo14.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //逻辑与、或的基本理解 5 | console.log(2>1&&4<5); 6 | console.log(true&&(!2)); 7 | console.log(false&&("2" == 2)); 8 | console.log(false&&false); 9 | 10 | console.log(2>1||4<5); 11 | console.log(true||(!2)); 12 | console.log(false||("2" == 2)); 13 | console.log(false||false); -------------------------------------------------------------------------------- /lessons/LS06/js/demo15.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //操作数非布尔类型，&&短路原则 5 | console.log(2&&4); 6 | console.log(0&&4); 7 | console.log({x:2}&&{name:"Jack"}); 8 | console.log(null&&"hello"); 9 | console.log({}&&"world"); 10 | 11 | //操作数非布尔类型，||短路原则 12 | console.log(2||4); 13 | console.log(0||4); 14 | console.log({x:2}||{name:"Jack"}); 15 | console.log(null||"hello"); 16 | console.log({}||"world"); 17 | 18 | //思考 所有对象转换为布尔类型 都为 true 19 | console.log((new Boolean(false))&&234); 20 | console.log((new Boolean(false))||234); 21 | -------------------------------------------------------------------------------- /lessons/LS06/js/demo16.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/21. 3 | */ 4 | var score = 76; 5 | if(score>90){ 6 | console.log("优"); 7 | }else if(score>75){ 8 | console.log("良"); 9 | }else if(score>60){ 10 | console.log("及格"); 11 | }else{ 12 | console.log("不及格"); 13 | } 14 | 15 | //通过&&和||的组合实现如上功能，注：小括号优先级最高 16 | console.log((score>90&&"优")||(score>75&&"良")||(score>60&&"及格")||"不及格"); -------------------------------------------------------------------------------- /lessons/LS06/js/demo17.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/21. 3 | */ 4 | var sum = function(a,b,c){ 5 | b = b||4; 6 | c = c||5; 7 | return a+b+c; 8 | }; 9 | console.log(sum(1,2,3)); 10 | console.log(sum(1,2)); 11 | console.log(sum(1)); 12 | // console.log(sum(1,0,0)); 13 | 14 | //优化改造版本 15 | var sum = function(a,b,c){ 16 | if(b!=false){b = b||4;}//(b!=false)&&(b=b||4); 17 | if(c!=false){c = c||5;}//(c!=false)&&(c=c||5); 18 | return a+b+c; 19 | }; 20 | console.log(sum(1,2,3)); 21 | console.log(sum(1,2)); 22 | console.log(sum(1)); 23 | console.log(sum(1,0,0)); -------------------------------------------------------------------------------- /lessons/LS07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS04 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lessons/LS07/js/demo01.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //函数定义 函数声明方式 5 | function max(a,b){ 6 | return a>b?a:b; 7 | } 8 | max(2,3); 9 | 10 | //函数定义 函数表达式方式 等号右侧可以是匿名函数也可以是非匿名函数 11 | var max = function (a,b){ //匿名函数 12 | return a>b?a:b; 13 | }; 14 | max(2,3); 15 | 16 | /* 17 | //略讲：非匿名函数便于调用栈追踪 测试使用匿名和非匿名函数的区别 18 | var foo = function max(a,b){ 19 | console.trace(); 20 | return console.log(a>b?a:b); 21 | }; 22 | foo(2,3); 23 | 24 | foo = function min(a,b){ 25 | console.trace(); 26 | return console.log(a>b?b:a); 27 | }; 28 | foo(2,3); 29 | */ 30 | 31 | //函数定义 Function构造函数方式 32 | var max = new Function("a","b","return a>b?a:b"); 33 | max(2,3); 34 | 35 | //理解 new Function 36 | -------------------------------------------------------------------------------- /lessons/LS07/js/demo03.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //实参数大于形参数 5 | function test() { 6 | console.log(arguments); 7 | console.log(test.arguments==arguments,arguments); 8 | // console.log(arguments.length); 9 | // console.log(typeof arguments); 10 | // console.log(arguments instanceof Array);//false 11 | // console.log(arguments instanceof Object); 12 | console.log(Array.prototype.slice.call(arguments)); 13 | var s = ""; 14 | for (var i = 0; i < arguments.length; i++) { 15 | s += arguments[i]; 16 | } 17 | return s; 18 | } 19 | test("hello,", "world!");//"hello,world!" 20 | 21 | 22 | //实参数小于形参数 23 | var sum = function(a,b,c){ 24 | b = b||4; 25 | c = c||5; 26 | return a+b+c; 27 | }; 28 | console.log(sum(1,2,3)); 29 | console.log(sum(1,2)); 30 | console.log(sum(1)); 31 | -------------------------------------------------------------------------------- /lessons/LS07/js/demo04.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | 5 | //值传递 6 | var a = 1; 7 | function foo(x) { 8 | console.trace("a:",a," x:",x); 9 | x = 2;//step 2222 10 | console.trace("a:",a," x:",x);//step 3333 11 | } 12 | 13 | console.trace("a:",a); 14 | foo(a);// step 1111 15 | console.trace("a:",a); // step 4444 a仍为1 16 | 17 | 18 | 19 | //引用传递 20 | var obj = {x:1}; 21 | function fee(o){ 22 | console.trace("obj.x :",obj.x," o.x :",o.x); 23 | o.x = 3;// step 2222 24 | console.trace("obj.x :",obj.x," o.x :",o.x);// step 3333 25 | } 26 | 27 | console.trace("obj.x :",obj.x); 28 | fee(obj);// step 1111 29 | console.trace("obj.x :",obj.x);//step 4444 obj.x被改写为3 30 | 31 | //打开index.html 学习chrome的Sources调试 32 | document.onclick = function () {//测试Event Listener Breakpoints 33 | alert("click"); 34 | //var body = document.getElementsByName("body"); 35 | }; -------------------------------------------------------------------------------- /lessons/LS08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS04 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lessons/LS08/js/demo05.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | 5 | function foo(){} 6 | console.log(foo); // 7 | console.log(typeof foo); // 8 | console.log(foo instanceof Object); // 9 | console.log(foo instanceof Function); // 10 | console.log(foo === window.foo); // 11 | 12 | 13 | console.log(typeof Function);// 14 | console.log(typeof Array); // 15 | console.log(typeof Date); // 16 | console.log(typeof Error); // 17 | console.log(typeof Math); // 18 | console.log(typeof JSON); // 19 | 20 | 21 | //思考： 22 | console.log(typeof new Function());// function or object 23 | console.log(typeof new Array()); // function or object 24 | console.log(typeof new Date()); // function or object 25 | 26 | //补充思考： 27 | console.log(Function instanceof Function); 28 | console.log(Function instanceof Object); 29 | 30 | console.log(Array instanceof Function); 31 | console.log(Array instanceof Object); 32 | 33 | console.log(Date instanceof Function); 34 | console.log(Date instanceof Object); 35 | 36 | console.log(Math instanceof Function); 37 | console.log(Math instanceof Object); 38 | 39 | console.log(JSON instanceof Function); 40 | console.log(JSON instanceof Object); 41 | 42 | -------------------------------------------------------------------------------- /lessons/LS09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS04 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lessons/LS09/js/demo09.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //词法作用域 与调用形式无关 详细内容参见作用域部分 5 | var name = "Jack"; 6 | function echo() { 7 | console.log(name); 8 | } 9 | function foo() { 10 | var name = "Bill"; 11 | echo(); 12 | } 13 | foo();//Bill or Jack 14 | 15 | 16 | 17 | 18 | //全局变量与局部变量 19 | var x = "outside f1"; 20 | var f1 = function () { 21 | //var x = "inside f1";//如果没有这行，则两次输出都为outside 22 | console.log(x); 23 | }; 24 | f1(); 25 | console.log(x); 26 | 27 | 28 | //若函数内未加var 则相当于创建了全局变量 29 | var f2 = function () { 30 | var y = "局部"; 31 | //y = "全局"; 32 | console.log(y); 33 | }; 34 | f2(); 35 | console.log(y);//若函数内有var此行报错，若函数内没有var则此行输出全局变量y值 36 | 37 | //ES5中无块作用域 38 | if(true){ 39 | var z = 23; 40 | } 41 | console.log(z);//正常输出 42 | 43 | if(true){ 44 | (function () { //IIFE start 45 | var z = 23; 46 | }()); //IIFE end 47 | } 48 | console.log(z);//报错 -------------------------------------------------------------------------------- /lessons/LS09/js/demo10.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | if(true){ 5 | var i = 0; 6 | } 7 | 8 | function foo(){ 9 | console.log("j:",j);//undefined 10 | var j = 10; 11 | console.log("j:",j);//10 12 | } 13 | foo(); 14 | 15 | console.log("i:",i);//0 16 | console.log("j:",j);//报错 17 | 18 | //上边代码等价于 19 | var i; 20 | if(true){ 21 | i = 0; 22 | } 23 | 24 | function foo(){ 25 | var j; 26 | console.log("j:",j);//undefined 27 | j = 10; 28 | console.log("j:",j);//10 29 | } 30 | foo(); 31 | 32 | console.log("i:",i);//0 33 | console.log("j:",j);//报错 -------------------------------------------------------------------------------- /lessons/LS10/index04_2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /lessons/LS10/index05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /lessons/LS10/js/demo01.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //全局作用 5 | var a = 10, 6 | b = 20; 7 | function fn() { 8 | //fn局部作用域 9 | var a = 100, 10 | c = 200; 11 | //console.log(a,b,c,d); 12 | function bar() { 13 | //bar局部作用域 14 | var a = 500, 15 | d = 600; 16 | console.log(a,b,c,d); 17 | } 18 | bar(); 19 | } 20 | fn(); 21 | //console.log(a,b,c,d); 22 | 23 | 24 | -------------------------------------------------------------------------------- /lessons/LS10/js/demo02.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //JS 词法作用域 5 | 6 | var name = "Jack"; 7 | function echo() { 8 | console.log(name); 9 | } 10 | echo(); 11 | 12 | 13 | //词法作用域 与调用形式无关 实例一 14 | var name = "Jack"; 15 | function echo() { 16 | console.log(name); 17 | } 18 | function foo() { 19 | var name = "Bill"; 20 | echo(); 21 | } 22 | foo();//Bill or Jack 23 | 24 | 25 | 26 | //词法作用域 与调用形式无关 实例二 27 | var name = "Jack"; 28 | function echo() { 29 | console.log(name); 30 | } 31 | function foo() { 32 | var name = "Bill"; 33 | function fee(){ 34 | var name = "Lucy"; 35 | echo(); 36 | } 37 | fee(); 38 | } 39 | foo();//Bill or Jack 40 | 41 | 42 | //通过new Function实例化的函数对象，不一定遵从静态词法作用域 43 | var scope = "g"; 44 | function foo(){ 45 | var scope = "l"; 46 | return new Function("console.log(scope);") 47 | } 48 | foo()(); -------------------------------------------------------------------------------- /lessons/LS10/js/demo03.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //ES5中无块作用域 5 | { 6 | var a = 4; 7 | } 8 | console.log(a); 9 | 10 | 11 | //变量污染、变量共享问题,尤其是异步执行的情况下。如果是两个单独的文件的情况下，更容易造成变量污染 12 | var userId = 123; 13 | document.onclick = function () { 14 | console.log("userId = ",userId); 15 | //alert("userId = "+userId); 16 | }; 17 | //一长串代码后，假如看不见上述代码了 18 | var a=2,b=3; 19 | if(a 2 | 3 | 4 | 5 | Title 6 | 39 | 40 | 41 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /lessons/LS11/index08.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /lessons/LS11/index09.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 38 | 39 | 40 | 41 | 42 |
43 |
44 | 导航0 45 | 导航1 46 | 导航2 47 | 导航3 48 |
49 |
50 |
导航0内容
51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /lessons/LS11/js/demo06.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | 5 | //立即执行表达式 常见形式 6 | (function max( x,y){ 7 | console.log("the max is",x>y?x:y); 8 | }(2,3)); 9 | 10 | (function (x,y){ //可以没有函数名 11 | console.log("the min is",xb?a:b; 32 | }(5,9); 33 | 34 | 35 | !function(x,y){ 36 | return x==y?true:false; // === 返回什么 37 | }("5",5); 38 | 39 | //思考 !function(){return 2; }( ); 与 !function(){return 0; }(); -------------------------------------------------------------------------------- /lessons/LS11/js/demo07_1.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/30. 3 | */ 4 | /* 5 | //文件内的变量污染问题,尤其是异步执行的情况下 6 | var userId = 123; 7 | document.onclick = function () { 8 | console.log("userId = ",userId); 9 | //alert("userId = "+userId); 10 | }; 11 | 12 | //一长串代码后，假如看不见上述代码了 13 | (function () { 14 | var a=2,b=3; 15 | if(a max){ 31 | console.log(x); 32 | } 33 | }; 34 | (function (f) { 35 | var max = 100; 36 | f(15); 37 | })(fn); -------------------------------------------------------------------------------- /lessons/LS12/ClosureTest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ClosureTest 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /lessons/LS12/index11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /lessons/LS12/index16.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 14 | 15 | 16 | 17 | 18 |
    19 | 20 |
21 | 22 | -------------------------------------------------------------------------------- /lessons/LS12/js/ClosureTest.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/9/27. 3 | */ 4 | //将demo12、demo13中的部分代码复制到下边，然后进行断点调试 5 | //加深对闭包的理解 -------------------------------------------------------------------------------- /lessons/LS12/js/demo12.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //Part 11111111111111////////////////// 5 | var tmp = 100;//注意：词法作用域,形成的闭包是否包含此行的变量tmp？ 6 | function foo(x) { 7 | var tmp = 3;//注意：词法作用域，思考：若屏蔽此行，会输出什么？foo之外的tmp是否为闭包的一部分？ 8 | return function (y) { 9 | console.log(x + y + (++tmp)); 10 | } 11 | } 12 | var fee = foo(2); // fee 形成了一个闭包 13 | fee(10);// 14 | fee(10);// 15 | fee(10);// 16 | 17 | 18 | //闭包嵌套，扩展知识（了解即可），思考下述代码中存在几个闭包，设置断点调试 19 | function f1(m){ 20 | var z = 100; 21 | function f2(x) { 22 | return function (y) { 23 | console.log(x + y + (++z));//设置断点，查看有几个闭包 24 | } 25 | } 26 | return f2(m); 27 | } 28 | var f3 = f1(2); 29 | f3(10); 30 | f3(10); 31 | //思考有几个闭包，x和z分别属于哪个闭包 32 | 33 | 34 | //Part 2222222222222////////////////// 35 | function foo(x) { 36 | var tmp = 3; 37 | return function (y) { 38 | x.count = x.count ? x.count + 1 : 1; 39 | console.log(x + y + tmp,x.count); 40 | } 41 | } 42 | var age = new Number(2); 43 | var bar = foo(age); //和相关作用域形成了一个闭包 44 | bar(10); //输出什么？ 45 | bar(10); //输出什么？ 46 | bar(10); //输出什么？ 47 | 48 | 49 | // Part 33333333333 50 | function fn() { 51 | var max = 10;//若屏蔽此行，则输出为多少？ 52 | return function bar(x) { 53 | if(x > max){ 54 | console.log(x); 55 | }else { 56 | console.log(max); 57 | } 58 | } 59 | } 60 | var f1 = fn(); 61 | var max = 100; 62 | f1(15); -------------------------------------------------------------------------------- /lessons/LS12/js/demo13.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //闭包实例 Part 1111111111111111 5 | function counter() { 6 | var n = 0; 7 | return { 8 | count:function () {return ++n;}, 9 | reset:function () {n = 0;return n;} 10 | } 11 | } 12 | var c = counter(); 13 | var d = counter(); 14 | console.log(c.count()); 15 | console.log(d.count()); 16 | console.log(c.reset()); 17 | console.log(c.count()); 18 | console.log(d.count()); 19 | 20 | 21 | -------------------------------------------------------------------------------- /lessons/LS12/js/demo16.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/9/26. 3 | */ 4 | 5 | //配合index16.html 实现函数相关知识的综合练习（闭包、IIFE、作用域） 6 | window.onload = function () { 7 | var btns = document.getElementsByClassName("btn"); 8 | function closureExample(objID) { 9 | var ol = document.getElementById(objID); 10 | // var li = document.createElement("li");//闭包，单例模式 11 | // ol.appendChild(li);//闭包，单例模式 12 | return function () { 13 | var li = document.createElement("li"); 14 | ol.appendChild(li); 15 | li.innerHTML = "列表内容"; 16 | }; 17 | } 18 | var foo = closureExample("orderList"); 19 | for(var i=0;i<3;i++){ 20 | (function (j) { 21 | btns[j].onclick = function () { 22 | //console.log(new Date()); 23 | setTimeout(foo,(3*j+2)*1000); 24 | }; 25 | }(i)); 26 | } 27 | }; 28 | 29 | -------------------------------------------------------------------------------- /lessons/LS13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS06 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /lessons/LS13/js/demo01.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //JS对象 5 | var obj = { 6 | num:10, 7 | str:"Hi", 8 | show:function(){ 9 | console.log(this.str); 10 | } 11 | }; 12 | console.log(obj.num);//10 13 | console.log(obj.str);//Hi 14 | obj.show(); //Hi 15 | 16 | //练习：写一个JS对象，包括自己的姓名、年龄，和一个方法，调用这个方法 -------------------------------------------------------------------------------- /lessons/LS13/js/demo05.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | var obj = {}; 5 | obj.x = 2;//直接添加属性 6 | console.log(obj.x);//通过.访问属性 7 | obj.x = 5;//设置属性 8 | console.log(obj["x"]);//通过[]访问属性 9 | delete obj.x;//删除属性 10 | console.log(obj.x); 11 | 12 | //访问属性的for循环练习 13 | var obj2 = { 14 | id_1:2, 15 | id_2:4, 16 | id_3:6, 17 | id_4:8, 18 | id_5:10 19 | }; 20 | 21 | //思考obj3 和 obj4 内容是什么？为什么？ 22 | var obj3 = {}; 23 | for(var i=0;i<10;i++){ 24 | obj3.i = i; 25 | } 26 | 27 | var obj4 = {}; 28 | for(var i=0;i<10;i++){ 29 | obj4[i] = i; 30 | } -------------------------------------------------------------------------------- /lessons/LS14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS06 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /lessons/LS14/js/demo06.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | var objProto = { 5 | z:3 6 | }; 7 | 8 | var obj = Object.create(objProto); 9 | obj.x = 1; 10 | obj.y = 2; 11 | 12 | console.log(obj.x);//1 13 | console.log(obj.y);//2 14 | console.log(obj.z);//3 15 | 16 | console.log(obj.toString);//原型链上有toString属性 17 | 18 | for(var k in obj){//通过for...in遍历所有原型链上的属性 19 | console.log(k,obj[k]);//是否能遍历到toString？ 20 | } -------------------------------------------------------------------------------- /lessons/LS14/js/demo07.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //修改obj属性的特性 5 | var obj = { 6 | x:1, 7 | y:2 8 | }; 9 | //Object.defineProperty(obj,"x",{writable:false,value:11,enumerable:false,configurable:true}); 10 | Object.defineProperty(obj,"x",{enumerable:false}); 11 | for(var k in obj){ 12 | console.log(k,obj[k]); 13 | } 14 | 15 | //思考：如果只更改writable特性的话，enumerable特性是否被修改 16 | 17 | -------------------------------------------------------------------------------- /lessons/LS14/js/demo08.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | var person = {name:"Jack"}; 5 | Object.defineProperty(person,"name",{ 6 | writable:false,//改成true会如何 7 | configurable:false,//改成true会如何 8 | enumerable:true, 9 | value:"Mike" 10 | }); 11 | console.log(person.name);//输出什么？ 12 | person.name = "Lucy"; 13 | console.log(person.name);//输出什么？ 14 | delete person.name; 15 | console.log(person.name);//输出什么？ 16 | 17 | -------------------------------------------------------------------------------- /lessons/LS14/js/demo09.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //Part 111111111111111 5 | var obj = { 6 | x:1, 7 | y:2 8 | }; 9 | //直接添加的属性，其所有特性默认都是true 10 | obj.z = 3; 11 | for(var k in obj){ 12 | console.log(k,obj[k]); 13 | } 14 | 15 | //Part 2222222222222222 16 | 17 | var obj = { 18 | x:1, 19 | y:2 20 | }; 21 | //直接添加的属性，其所有特性默认都是true 22 | obj.z = 3; 23 | 24 | //通过Object.defineProperty方法添加的属性，除了手动修改，其所有特性默认都是false 25 | Object.defineProperty(obj,"w",{value:456,configurable:true});//writable,enumerable没有指定，所以默认为false 26 | for(var k in obj){ 27 | console.log(k,obj[k]); 28 | } 29 | //console.log(obj.w);//有w，但上边for...in遍历不到 30 | 31 | 32 | //通过属性特性描述符来查看某一对象属性的特性 -------------------------------------------------------------------------------- /lessons/LS14/js/demo10.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //通过Object.defineProperty来添加和改变的get /set的属性特性 5 | //添加访问器 6 | var obj1={ 7 | _name:"Lucy" 8 | }; 9 | Object.defineProperty(obj1,"name",{ 10 | get:function (){//只定义了get 特性，因此只能读不能写 11 | return this._name; 12 | } 13 | }); 14 | console.log(obj1.name);//"Lucy" 15 | obj1.name="jack";//只定义了getter访问器，因此写入失效 16 | console.log(obj1.name);//"Lucy" 17 | 18 | //改变访问器属性特性 注意添加访问器和修改访问器特性的写法的区别 19 | var obj2={ 20 | _name:"Lucy", 21 | set name(val){this._name = val;}, 22 | get name(){return this._name;} 23 | }; 24 | Object.defineProperty(obj2,"name",{ 25 | get:function (){ 26 | return this._name+"_hihi"; 27 | }, 28 | set:function (val) { 29 | this._name = val+"_haha"; 30 | } 31 | }); 32 | console.log(obj2.name);// 33 | obj2.name="jack"; 34 | console.log(obj2.name);// 35 | -------------------------------------------------------------------------------- /lessons/LS14/js/demo11.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | var person = {_name:"Jack"}; 5 | Object.defineProperty(person,"name",{ 6 | configurable:false,//若为true会如何 7 | enumerable:true, 8 | set:function(val){this._name = val}, 9 | get:function(){return this._name} 10 | }); 11 | console.log(person.name); 12 | person.name = "Lucy"; 13 | console.log(person.name); 14 | delete person.name;//delete person.name; 15 | console.log(person.name); -------------------------------------------------------------------------------- /lessons/LS14/js/demo12.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //属性特性描述符 5 | var obj = {x:5}; 6 | Object.defineProperty(obj,"y",{ 7 | configurable:false, 8 | writable:false, 9 | enumerable:true, 10 | value:6 11 | }); 12 | Object.defineProperty(obj,"z",{ 13 | configurable:false, 14 | value:7 15 | }); 16 | Object.getOwnPropertyDescriptor(obj,"x"); 17 | //Object.getOwnPropertyDescriptor(obj,"y"); 18 | //Object.getOwnPropertyDescriptor(obj,"z"); -------------------------------------------------------------------------------- /lessons/LS14/js/demo14.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //属性特性的继承特点 5 | var o1 = {}; 6 | Object.defineProperty(o1,"x",{ 7 | value:12, 8 | //writable:true 9 | });//思考configurable和writable是true还是false 10 | o1.x = 34; 11 | console.log(o1.x); 12 | 13 | var o2 = Object.create(o1); 14 | o2.x = 56;//是在o2上添加了新属性x，还是修改了o1的x属性，还是前两者都不是？ 15 | console.log(o2.x);//输出多少？若o1的x的writable特性为true又会如何？ 16 | 17 | //访问器属性特性的继承特点 18 | var o3 = {_x:21}; 19 | Object.defineProperty(o3,"x",{ 20 | get:function(){return this._x} 21 | }); 22 | o3.x = 34; 23 | console.log(o3.x);//输出21还是34 24 | 25 | var o4 = Object.create(o3); 26 | Object.defineProperty(o4,"x",{ 27 | set:function (val) { 28 | this._x = val; 29 | }, 30 | get:function () { 31 | return ++this._x; 32 | } 33 | }); 34 | o4.x = 56; 35 | console.log(o4.x);//输出多少 36 | 37 | 38 | //全局变量的属性特性是如何的呢？ 39 | //{value: 23, writable: true, enumerable: true, configurable: false} 40 | var a = 23; 41 | console.log(Object.getOwnPropertyDescriptor(window,"a")); 42 | delete a;//等效delete window.a; 43 | 44 | -------------------------------------------------------------------------------- /lessons/LS15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS07 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lessons/LS15/js/demo01.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | 5 | //测验 使用3种方式来创建对象 6 | var obj1,obj2,obj3; 7 | //obj1通过字面量方式创建，并创建自身属性x 8 | //obj2通过Object静态方法创建，obj2的原型为obj1，并创建自身属性y 9 | //obj3通过构造函数来创建，构造函数为Obj3 10 | 11 | //通过字面量的方式创建 JS对象 12 | var obj = { 13 | num:10, 14 | str:"Hi", 15 | show:function(){ 16 | return this.str; 17 | } 18 | }; 19 | console.log(obj.num); 20 | console.log(obj.str); 21 | console.log(obj.show()); 22 | 23 | //通过Object工场方法创建JS对象,注：JS对象是通过原型链的方式实现的对象继承 24 | var newObj = Object.create(obj); 25 | newObj.age = 23; 26 | console.log(newObj.num); 27 | console.log(newObj.str); 28 | console.log(newObj.show()); 29 | console.log(newObj.age);//自有属性 30 | 31 | var empty = {}; 32 | var obj2 = Object.create(empty,{ 33 | x:{value:1}, y:{value:2,enumerable:true} 34 | }); 35 | console.log(obj2); 36 | console.log(obj2.hasOwnProperty("x")); 37 | 38 | //构造函数的方式创建JS对象 此处略讲，详情参照后续面向对象编程 注：JS对象是通过原型链的方式实现的对象继承 39 | function Person(name,age){ 40 | this.name = name; 41 | this.age = age; 42 | } 43 | Person.prototype.sayName = function(){ 44 | console.log("hello,i'm",this.name,this.age,"years old"); 45 | }; 46 | 47 | var person1 = new Person("Mike",21); 48 | person1.sayName(); 49 | -------------------------------------------------------------------------------- /lessons/LS15/js/demo02.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | var obj = { 5 | num:10, 6 | str:"Hi", 7 | show:function(){ 8 | return this.str; 9 | } 10 | }; 11 | //console.log(obj.__proto__); 12 | console.log(obj.__proto__ === Object.prototype); 13 | 14 | var newObj = Object.create(obj); 15 | var newObj2 = Object.create(obj);//思考：多个对象同一个原型的情况 16 | newObj.age = 23; 17 | 18 | console.log(newObj.__proto__ === obj); 19 | console.log(newObj2.__proto__ === obj); 20 | 21 | //JavaScript的继承方式 是对象-对象的继承，对象要实现继承首先要有原型对象 22 | console.log(newObj.__proto__.__proto__);//Object.prototype 23 | console.log(newObj.__proto__.__proto__.__proto__);//null -------------------------------------------------------------------------------- /lessons/LS15/js/demo03.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | ///////////Part1 原型链综述//////////// 5 | var proObj = { 6 | z:3 7 | }; 8 | 9 | var obj = Object.create(proObj); 10 | obj.x = 1; 11 | obj.y = 2; 12 | 13 | console.log(obj.x);//1 14 | console.log(obj.y);//2 15 | console.log(obj.z);//3 16 | 17 | console.log("z" in obj);//true 18 | console.log(obj.hasOwnProperty("z"));//false 19 | 20 | ///////////Part2 原型链属性操作//////////// 21 | obj.z = 5; 22 | 23 | console.log(obj.hasOwnProperty("z")); 24 | console.log(obj.z); 25 | console.log(proObj.z); 26 | 27 | obj.z = 8; 28 | console.log(obj.z); 29 | 30 | delete obj.z;//true 31 | console.log(obj.z); 32 | 33 | delete obj.z;//true 34 | console.log(obj.z);//still 3 35 | 36 | //如何删除原型上的属性 37 | delete obj.__proto__.z;//或者delete proObj.z; 38 | console.log(obj.z);//此时彻底没有z了 39 | 40 | //注意：hasOwnProperty是原型方法 41 | //调用的主体为obj,先在自身上找该方法，找不到的话去原型链上去找 42 | //区别与Object.keys(obj)这种静态方法 -------------------------------------------------------------------------------- /lessons/LS15/js/demo04.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | function Person(age,name) { 5 | this.name = name; 6 | this.age = age; 7 | } 8 | Person.prototype.sayHi = function () { 9 | console.log("Hi,i'm "+this.name); 10 | }; 11 | var p1 = new Person(20,"Jack"); 12 | console.log(p1.name); 13 | console.log(p1.age); 14 | p1.sayHi(); -------------------------------------------------------------------------------- /lessons/LS15/js/demo05.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | function Person(name) { 5 | this.name = name; 6 | this.age = 21; 7 | } 8 | Person.prototype.sayHi = function () { 9 | console.log("Hi,i'm ",this.name,this.age,"years old!"); 10 | }; 11 | 12 | var p1 = new Person("Mike"); 13 | console.log(p1.name); 14 | console.log(p1.age); 15 | p1.sayHi(); 16 | //name和age属性是定义在p1上了，还是定义在p1的原型上了 17 | //sayHi方法是定义在p1上了，还是定义在p1的原型上了 18 | //分析一下访问和调用的过程是怎样的 19 | 20 | 21 | //分析：属性和方法定义在构造函数中和写在prototype上这两种情况有什么不同? 22 | //没有私有属性情况下，常将方法添加到构造函数的prototype属性上，实现方法共享 23 | //而属性根据情况来确定是定义在构造函数中,还是定义在构造函数的prototype（即实例化对象的原型上）属性上 24 | 25 | console.log(p1.__proto__ === Person.prototype); 26 | 27 | 28 | -------------------------------------------------------------------------------- /lessons/LS15/js/demo06.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | function MyObj() { } 5 | MyObj.prototype.z = 3; 6 | 7 | var obj = new MyObj(); 8 | obj.x = 1; 9 | obj.y = 2; 10 | 11 | console.log(obj.x);//1 12 | console.log(obj.y);//2 13 | console.log(obj.z);//3 14 | 15 | console.log("z" in obj);//true 16 | console.log(obj.hasOwnProperty("z"));//false 17 | 18 | ///////////Part2 原型链属性操作//////////// 19 | obj.z = 5; 20 | 21 | obj.hasOwnProperty("z"); 22 | console.log(obj.z); 23 | console.log(MyObj.prototype.z); 24 | 25 | obj.z = 8; 26 | console.log(obj.z); 27 | 28 | delete obj.z;//true 29 | console.log(obj.z); 30 | 31 | delete obj.z;//true 32 | console.log(obj.z);//still 3 33 | 34 | //如何删除原型上的属性 35 | delete obj.__proto__.z;//或者delete MyObj.prototype.z; 36 | console.log(obj.z);//此时彻底没有z了 -------------------------------------------------------------------------------- /lessons/LS16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS08 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /lessons/LS16/js/demo01.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | function thisTest(){ 5 | console.log(this === window); 6 | } 7 | thisTest(); 8 | 9 | var a = 10,b = "Hi"; 10 | function thisTest2(){ 11 | this.a = 20; 12 | delete this.b; 13 | this.c = "新添加属性"; 14 | } 15 | thisTest2(); 16 | console.log(a,c); 17 | console.log(b);//依然能输出b，为什么，查看window对象b属性的属性特性 18 | 19 | /* 20 | var point = { 21 | x:0, 22 | y:0, 23 | moveTo:function(x,y){ 24 | function moveToX(x){ 25 | this.x = x; 26 | }; 27 | function moveToY(y){ 28 | this.y = y; 29 | } 30 | moveToX(x); 31 | moveToY(y); 32 | } 33 | }; 34 | */ -------------------------------------------------------------------------------- /lessons/LS16/js/demo02.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | function thisTest() { 5 | "use strict" 6 | console.log(this); 7 | } 8 | thisTest(); 9 | 10 | //严格模式检测 11 | //"use strict" 12 | function isStrictMode() { 13 | return this == undefined?true:false; 14 | } 15 | isStrictMode(); -------------------------------------------------------------------------------- /lessons/LS16/js/demo03.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | var point = { 5 | x:0, 6 | y:0, 7 | moveTo:function (x,y) { 8 | this.x = x; 9 | this.y = y; 10 | } 11 | }; 12 | point.moveTo(1,1);//this绑定到当前对象，即point对象上 13 | console.log(point); 14 | 15 | //私有属性 闭包 16 | var Person = function(name,age){ 17 | var namePrivate = name; 18 | var agePrivate = age; 19 | this.showMe = function(){ 20 | console.log(namePrivate,agePrivate); 21 | } 22 | } 23 | var p1 = new Person("Mike",23); 24 | p1.showMe(); 25 | 26 | -------------------------------------------------------------------------------- /lessons/LS16/js/demo04.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | function Point(x,y) { 5 | this.x = x; 6 | this.y = y; 7 | } 8 | var p = new Point(2,3); 9 | console.log(p); 10 | 11 | //思考：直接调用Point方法会是什么样的情况 12 | Point(5,6);//结果是什么情况 13 | console.log(window.x,window.y); -------------------------------------------------------------------------------- /lessons/LS16/js/demo05.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //call 实例1 5 | objA = {name:"AA",x:1}; 6 | objB = {name:"BB",x:5}; 7 | objA.test = function () { 8 | console.log(this.name,this.x); 9 | }; 10 | 11 | objA.test();//AA 1 12 | objA.test.call(objB);//BB 5 13 | 14 | //call 实例2 15 | var bird = { 16 | name:"polly", 17 | fly:function(m,n){ 18 | console.log("i'm:"+this.name+" i can fly ___",m,n); 19 | } 20 | }; 21 | 22 | var me = { 23 | name:"QL" 24 | }; 25 | bird.fly(5,6); 26 | bird.fly.call(me,7,8); 27 | -------------------------------------------------------------------------------- /lessons/LS16/js/demo07.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | // Part1 构造函数中函数嵌套 this缺陷 5 | function Point(x,y) { 6 | this.x = x; 7 | this.y = y; 8 | this.moveXY = function (x,y) { 9 | function moveX(x) { 10 | this.x+=x; 11 | } 12 | function moveY(y) { 13 | this.y+=y; 14 | } 15 | moveX(x); 16 | moveY(y); 17 | } 18 | } 19 | var p = new Point(2,3); 20 | p.moveXY(1,1); 21 | console.log(p);//输出为Point{x:2,y:3}没有移动 22 | 23 | 24 | 25 | // Part2 构造函数中函数嵌套 this缺陷 解决方案 26 | function Point(x,y) { 27 | this.x = x; 28 | this.y = y; 29 | this.moveXY = function (x,y) { 30 | var that = this;//此处that为实例化出来的p对象 31 | function moveX(x) { 32 | that.x+=x;//this改为that 33 | } 34 | function moveY(y) { 35 | that.y+=y;//this改为that 36 | } 37 | moveX(x); 38 | moveY(y); 39 | } 40 | } 41 | var p = new Point(2,3); 42 | p.moveXY(1,1); 43 | console.log(p);//输出为Point{x:3,y:4}，移动了(1,1) 44 | 45 | //思考：试着通过call/apply方法和bind两种方法解决上边的问题 46 | 47 | 48 | //思考：下述代码 49 | var obj = { 50 | name:"obj", 51 | x:23, 52 | test:function(){ 53 | console.log(this.x,this); 54 | } 55 | }; 56 | var fun1 = function () { 57 | return function fun2() { 58 | return this.x;//若改为 return this; 59 | } 60 | }; 61 | obj.fun3 = fun1; 62 | obj.fun4 = fun1(); 63 | console.log(obj.fun3());//输出什么 64 | console.log(obj.fun3()());//输出什么 65 | console.log(obj.fun4());//输出什么 -------------------------------------------------------------------------------- /lessons/LS17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS07 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lessons/LS17/js/demo07.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //通过Object.create静态方法创建的对象的原型共享问题 5 | var superObj = { 6 | x:1, 7 | y:2 8 | }; 9 | var subObj_First = Object.create(superObj); 10 | var subObj_Second = Object.create(superObj); 11 | subObj_First.__proto__.x = 5;//若此行写为subObj_First.x = 5;结果又是如何？ 12 | console.log(subObj_Second.x); 13 | -------------------------------------------------------------------------------- /lessons/LS17/js/demo09.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //JS实现继承的形式 一 5 | function Person(name,age){ 6 | this.name = name; 7 | this.age = age; 8 | }; 9 | Person.prototype.showName = function(){console.log(this.name);}; 10 | function Student(name,age,id){ 11 | Person.call(this,name,age); 12 | this.id = id; 13 | } 14 | Student.prototype.__proto__ = Person.prototype; 15 | var s1 = new Student("xxx",22,2017001); 16 | var s2 = new Student("www",23,2017002); 17 | 18 | 19 | //JS实现继承的形式 二 20 | function Person(name,age){ 21 | this.name = name; 22 | this.age = age; 23 | }; 24 | Person.prototype.showName = function(){ 25 | console.log(this.name); 26 | }; 27 | function Student(name,age,id){ 28 | Person.call(this,name,age); 29 | this.id = id; 30 | } 31 | Student.prototype = Object.create(Person.prototype); 32 | // console.log(Person.prototype.constructor); // 33 | // console.log(Student.prototype.constructor); // 34 | Student.prototype.constructor = Student; 35 | var s1 = new Student("xxx",22,2017001); 36 | var s2 = new Student("www",23,2017002); -------------------------------------------------------------------------------- /lessons/LS17/js/demo10.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //静态方法实例与原型方法实例 5 | var BaseClass = function() {}; 6 | BaseClass.prototype.f2 = function () { 7 | console.log("This is a prototype method "); 8 | }; 9 | BaseClass.f1 = function(){//定义静态方法 10 | console.log("This is a static method "); 11 | }; 12 | BaseClass.f1();//This is a static method 13 | var instance1 = new BaseClass(); 14 | instance1.f2();//This is a prototype method 15 | 16 | 17 | //思考下述案例 实例方法 原型方法 18 | var BaseClass = function() {}; 19 | BaseClass.prototype.method1 = function(){ 20 | console.log("1 This is a method in Base.prototype"); 21 | }; 22 | var instance1 = new BaseClass(); 23 | instance1.method1(); 24 | 25 | instance1.method1 = function(){ 26 | console.log("2 This is a method in instance1"); 27 | }; 28 | instance1.method1();//访问的哪一个method1？ 29 | 30 | 31 | // 思考下述实例 32 | /* 33 | var BaseClass = function() { 34 | this.method1 = function(){ 35 | console.log('1 Defined by the "this" in the instance method'); 36 | } 37 | }; 38 | var instance1 = new BaseClass(); 39 | instance1.method1 = function(){ 40 | console.log('2 Defined directly in the instance method'); 41 | }; 42 | BaseClass.prototype.method1 = function(){ 43 | console.log('3 Defined by the prototype instance method '); 44 | }; 45 | instance1.method1();//Defined directly in the instance method 46 | */ -------------------------------------------------------------------------------- /lessons/LS18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS09 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /lessons/LS18/js/demo02.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | // Part11111111 5 | //增删改查 6 | var a = ["hello"]; 7 | a[1] = 3.14;//增：直接添加数组元素，通过方法添加元素参见后续章节 8 | a[2] = "world"; 9 | console.log("删除a[2]前的数组a",a); 10 | delete a[2];//删：思考此时数组长度是2还是3？如何彻底删除？直接修改length与pop方法 11 | console.log("删除a[2]后的数组a",a); 12 | a[0] = "XX";//改：修改数组元素a[0] 13 | console.log(a[0]);//查:看数组中的元素，索引从0开始 14 | 15 | //思考 16 | var i=2,b=[]; 17 | b[i]=3; 18 | b[i+1]="YY"; 19 | b[b[i]] = b[0]; 20 | console.log(b);//输出什么？ 21 | 22 | // Part22222222 23 | var a = []; 24 | a[-1.23] = true; //创建一个名为“-1,23”的属性 25 | a["100"] = 0; // 数组的第101个元素 26 | a[1.00] = "Hi"; //和a[1]相当 27 | console.log(a.length); 28 | console.log(a); -------------------------------------------------------------------------------- /lessons/LS18/js/demo03.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | var a1 = [,"abc"]; 5 | console.log(a1.length); 6 | 7 | for(var i in a1){ 8 | console.log(i,a1[i]);//输出几个元素 9 | } 10 | console.log(0 in a1,1 in a1); 11 | 12 | var a2 = new Array(3); 13 | console.log(a2.length); 14 | console.log(a2); 15 | 16 | //注意： 17 | var a3 = [,,]; 18 | console.log(a3.length); 19 | 20 | console.log(["a","b"].length); 21 | console.log(["a","b",].length); 22 | console.log(["a","b",,].length); -------------------------------------------------------------------------------- /lessons/LS18/js/demo04.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | // 多维数组 实例一 矩形数组和交错数组 5 | var table = new Array(5); 6 | for(var i=0;i 2 | 3 | 4 | 5 | LS09 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /lessons/LS19/js/demo08.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //UTC 协调世界时间 Coordinated Universal Time 5 | //GMT 格林尼治时间 （北京时间是正8时区） Greenwich Mean Time 6 | var date1 = new Date(2017,9,18,12,34,1);//注意：月0-11，日：1-31，时：0-23，分：0-59，秒：0-59，毫秒：0-999 7 | console.log(date1); 8 | 9 | var date2 = new Date(17,9,18,12,34,1);//若years为2位的话自动加1900 10 | console.log(date2); 11 | 12 | var date3 = new Date("2017-08-09");//注意日期的格式 此处的08代表8月还是9月，对比上一个创建形式 13 | console.log(date3); 14 | 15 | //var date4 = new Date(0); //1970-01-01:00:00:00 16 | var date4 = new Date(1000); //1970-01-01:00:00:01 17 | console.log(date4);//逆运算是date4.getTime(); 18 | 19 | var date5 = new Date();//new Date(Date.now()); 20 | console.log(date5); 21 | 22 | //补充：无效日期 23 | var date6 = new Date(NaN); 24 | console.log(date6);//Invalid Date 25 | 26 | //有无new的区别 27 | var d1 = new Date(); 28 | var d2 = Date(); 29 | console.log(d1,typeof d1);//object 30 | console.log(d2,typeof d2);//string 31 | 32 | //补充思考 33 | var n1 = new Number("123"); 34 | var n2 = Number("123"); 35 | console.log(n1,typeof n1); 36 | console.log(n2,typeof n2); 37 | 38 | -------------------------------------------------------------------------------- /lessons/LS19/js/demo09.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | // Date 方法参考链接 5 | // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date 6 | //Date静态方法（Date构造器函数对象的方法）GMT 格林尼治时间 7 | console.log(Date.now());//以毫秒为单位返回当前时间（从1970年1月1日00:00:00开始计算） 8 | console.log((new Date()).getTime()); 9 | 10 | console.log(Date.parse("1970-01-01"));//dateTimeString字符串转换成毫秒 11 | console.log(Date.parse("1970-01-02")); 12 | 13 | console.log(Date.UTC(2017,9,1));//将给定的日期转换成毫秒,解释为UTC 协调世界时间 14 | 15 | 16 | //Date原型方法 getter和setter相关 17 | var d = new Date("1978-11-25"); 18 | console.log(d.getFullYear(),d.getMonth(),d.getDay(),d.getDate(),d.getHours()); 19 | console.log(d.getTimezoneOffset()); 20 | d.setDate(11); 21 | console.log(d.getFullYear(),d.getMonth(),d.getDay(),d.getDate(),d.getHours()); 22 | d.setFullYear(1999,5,3); 23 | console.log(d.getFullYear(),d.getMonth(),d.getDay(),d.getDate(),d.getHours()); 24 | 25 | //Date原型方法 转成字符串相关 26 | var d = new Date(2012,3,21,15,7,23,234); 27 | console.log(d.toTimeString(),"___",d.toLocaleTimeString()); 28 | console.log(d.toDateString(),"___",d.toLocaleDateString()); 29 | console.log(d.toJSON()); 30 | 31 | // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date 32 | 33 | -------------------------------------------------------------------------------- /lessons/LS19/js/demo10.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //日期格式实例 5 | // YYYY-MM-DDTHH:mm:ss.sssZ 6 | console.log(Date.parse("2010-01-01 11:12:23.111")); 7 | console.log(new Date("2010-01-01 11:12:23.111")); 8 | console.log(new Date().toISOString()); 9 | 10 | console.log(Date.parse("2010-01-01T11:12:23.111Z")); 11 | console.log(new Date("2010-01-01T11:12:23.111Z")); 12 | console.log(new Date().toISOString()); 13 | 14 | //日期格式（无时间） 15 | console.log(new Date("2001")); 16 | console.log(new Date("2001-02")); 17 | console.log(new Date("2001-02-22")); 18 | 19 | //日期和时间格式 20 | console.log(new Date("1999-11-22T13:17")); 21 | console.log(new Date("1999-11-22T13:17:11")); 22 | console.log(new Date("1999-11-22T13:17:11.111")); 23 | console.log(new Date("1999-11-22T13:17:11.111Z")); 24 | 25 | //时间的比较和运算，内部转换为数字进行比较和运算（从1970年1月1日00:00:00开始计算） 26 | console.log(new Date("1970-01-01").getTime()); 27 | console.log(new Date("1970-01-02").getTime()); 28 | console.log(new Date("1960-01-02").getTime()); 29 | console.log(new Date("1970-01-02") > new Date("1970-01-01")); 30 | console.log(new Date("1970-01-02") - new Date("1970-01-01")); 31 | console.log(new Date((new Date("1970-01-01").getTime())+86400000)); 32 | 33 | //时间运算 和 时间综合练习 输出50天后是几月几号，星期几？ 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /lessons/LS20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS10 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /lessons/LS20/js/demo01.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/10/20. 3 | */ 4 | //正则案例 练习 查看编辑器如何使用正则 5 | console.log("moon2xyz".replace(/o/,"ab"));//mabon2xyz 6 | console.log("moon2xyz".replace(/o/g,"ab"));//mababn2xyz 7 | console.log("moon2 ooxyz".replace(/\bo/g,"ab"));//moon2 aboxyz 8 | console.log("moon2xyz".replace(/\dx/,"_"));//moon_yz 9 | console.log("moon2xyz".replace(/[xyz]/g,"ab"));//moon2ababab 10 | console.log("m2on2x2z".replace(/\d[zo]/g,"ab"));//mabn2xab 11 | console.log("m2on2x2z".replace(/2[x-z]/g,""));//m2on 12 | 13 | //将下列文章中 单独的大写C统一改为大写D，要求其他的c不受影响 14 | /* 15 | Chaude and Cold 16 | 　　A patron in Montreal cafe turned on a tap in the washroom and got scalded. "This is an outrage," he complained. "The faucet marked C gave me boiling water." 17 | 　　"But, Monsieur, C stands for chaude - French for hot. You should know that if you live in Montreal." 18 | 　　"Wait a minute," roared the patron. "The other tap is also marked C." 19 | 　　"Of course," said the manager, "It stands for cold. After all, Montreal is a bilingual city." 20 | */ 21 | 22 | //正则对象的创建方式一 通过字面量直接创建 23 | var reg1 = /[bcf]at/gi; 24 | 25 | //正则对象的创建方式二 通过RegExp构造函数来实例化正则对象 26 | var reg2 = new RegExp(/[bcf]at/,"gi");//常见形式 27 | var reg3 = new RegExp("[bcf]at","gi"); 28 | 29 | console.log("a fAt bat ,a faT cat".match(reg1));//["fAt", "bat", "faT", "cat"] 30 | console.log("a fAt bat ,a faT cat".match(reg2));//["fAt", "bat", "faT", "cat"] 31 | console.log("a fAt bat ,a faT cat".match(reg3));//["fAt", "bat", "faT", "cat"] 32 | 33 | //正则工具 34 | //http://www.iteye.com/news/29859 -------------------------------------------------------------------------------- /lessons/LS20/js/demo02.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/10/23. 3 | */ 4 | //在控制台上测试，了解两点 5 | // 一、g全局、i大小写、m换行 修饰符的作用 6 | // 二、正则对象的两种基本使用方式 1.字符串.字符串方法（正则对象） 2.正则对象.正则方法（字符串） 7 | var regExp = /ab/i; 8 | var matchResult = "xxAbcaaBbxyz".match(regExp); 9 | console.log(matchResult); 10 | 11 | var regExp = /ab/gi; 12 | var matchResult = "xxAbcaaBbxyz".match(regExp); 13 | console.log(matchResult); 14 | 15 | var regExp = /a*b/gi; //注意*和.的区别 ，参见在线分析工具 https://regexper.com或https://jex.im/regulex 16 | var matchResult = "xxAbcaaBbxyz".match(regExp); 17 | console.log(matchResult); 18 | 19 | var regExp = /a.b/gi;//注意*和.的区别 ，参见在线分析工具 https://regexper.com或https://jex.im/regulex 20 | var matchResult = "xxAbcaaBbxyz".match(regExp); 21 | console.log(matchResult); 22 | 23 | //test初步了解 24 | var regExp = /a/i; 25 | console.log(regExp.test("ab")); 26 | console.log(regExp.test("ab")); 27 | console.log(regExp.test("ab")); 28 | console.log(regExp.test("ab")); 29 | 30 | var regExp = /a/gi;//思考如果加了g，循环了若干次后是true还是false，这是为什么？test中的lastIndex 31 | console.log(regExp.test("ab"));//true 32 | console.log(regExp.test("ab"));//false 为什么？ 33 | console.log(regExp.test("ab"));//true 34 | console.log(regExp.test("ab"));//false 为什么？ 35 | 36 | /* 37 | while (regExp.test("aaa")){ 38 | console.log(regExp.lastIndex);//每次执行后从哪开始重新匹配？ 39 | } 40 | */ -------------------------------------------------------------------------------- /lessons/LS20/js/demo05.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/10/20. 3 | */ 4 | //贪婪模式和非贪婪模式 5 | "12345678".replace(/\d{3,6}/,'X');//默认为贪婪模式 X78 6 | 7 | "12345678".replace(/\d{3,6}?/,'X');//设置为非贪婪模式 在量词后加？X45678 8 | 9 | "12345678".replace(/\d{3,6}?/g,'X');//返回什么？ 10 | 11 | //正则表达式的分组 12 | console.log("NameNameName_11111".replace(/Name{3}/,"X")); 13 | console.log("NameNameName_11111".replace(/(Name){3}/,"X")); 14 | 15 | console.log("a1b2c3d4e5".replace(/[a-z]\d{3}/,"X")); 16 | console.log("a1b2c3d4e5".replace(/([a-z]\d){3}/,"X")); 17 | console.log("a1b2c3d4e5".replace(/([a-z]\d){3,4}/,"X")); 18 | console.log("a1b2c3d4e5".replace(/([a-z]\d){3,4}?/,"X")); 19 | 20 | // 与分组相关的 或 21 | "abcdefghijk".replace(/abcde|fghijk/g,"X"); 22 | "abcdefghijk_abcdehijk_abcfghijk".replace(/abc(de|fg)hijk/g,"X"); 23 | 24 | //练习： 25 | //将"xxabccxxdexx"替换为"yyabccxxdeyy" 26 | 27 | //"xx11xx".replace(/(\bxx)|(xx\b)/g,"mm"); 28 | 29 | 30 | -------------------------------------------------------------------------------- /lessons/LS20/js/demo06.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //分组的 反向引用 5 | //如何将2017-10-23转成10/23/2017 6 | "2017-10-23".replace(/(\d{4})-(\d{2})-(\d{2})/,"$2/$3/$1"); 7 | 8 | //分组的 忽略分组 （？：） 9 | "2017-10-23".replace(/(?:\d{4})-(\d{2})-(\d{2})/,"$2/$3/$1"); 10 | 11 | //注意括号的转义字符，第一个相当于做了分组 12 | console.log(/^(ab)$/.test("(ab)")); 13 | console.log(/^\(ab\)$/.test("(ab)")); 14 | 15 | //正则前瞻，了解即可 判断后边是否满足断言 16 | console.log("a23*4vv".replace(/\w(?=\d)/g,"X"));//XX3*4vv 正项前瞻 17 | console.log("a23*4v8".replace(/\w(?=\d)/g,"X"));//XX3*4X8 18 | console.log("a23*4v8".replace(/\w(?!\d)/g,"X"));//a2X*XvX 负项前瞻 19 | -------------------------------------------------------------------------------- /lessons/LS20/js/demo07.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | var reg1 = /\w/; 5 | var reg2 = /\w/gi; 6 | console.log(reg1.global,reg1.ignoreCase,reg1.multiline,reg1.lastIndex,reg1.source); 7 | console.log(reg2.global,reg2.ignoreCase,reg2.multiline,reg2.lastIndex,reg2.source); 8 | 9 | //思考reg1的global属性是定义在谁身上，是否可修改，它的属性特性描述符是什么？ 10 | 11 | console.log(reg2.lastIndex); 12 | reg2.test("abc23def"); 13 | console.log(reg2.lastIndex); 14 | reg2.test("abc23def"); 15 | console.log(reg2.lastIndex); 16 | 17 | while (reg2.test("abc23def")){ 18 | console.log(reg2.lastIndex); 19 | } 20 | 21 | var reg3 = /\w/gi; 22 | var str = "slfls3r3sfsf"; 23 | var returnArray1 = reg3.exec(str); 24 | console.log(reg3.lastIndex,returnArray1); 25 | 26 | var returnArray2 = reg3.exec(str); 27 | console.log(reg3.lastIndex,returnArray2); 28 | /* 29 | var returnArray3; 30 | while (returnArray3 = reg3.exec(str)){ 31 | console.log(reg3.lastIndex,returnArray3); 32 | } 33 | */ 34 | 35 | //RegExp静态属性 36 | console.log(RegExp.$_); 37 | console.log(RegExp.lastMatch); -------------------------------------------------------------------------------- /lessons/LS20/js/demo08.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //Part111 RegExp.prototype.test 方法 5 | var regExp = /a/i; 6 | console.log(regExp.test("ab")); 7 | console.log(regExp.test("ab")); 8 | console.log(regExp.test("ab")); 9 | console.log(regExp.test("ab")); 10 | 11 | var regExp = /a/gi;//思考如果加了g，循环了若干次后是true还是false，这是为什么？test中的lastIndex 12 | console.log(regExp.test("ab"));//true 13 | console.log(regExp.test("ab"));//false 为什么？ 14 | console.log(regExp.test("ab"));//true 15 | console.log(regExp.test("ab"));//false 为什么？ 16 | /* 17 | while (regExp.test("aaa")){ 18 | console.log(regExp.lastIndex);//每次执行后从哪开始重新匹配？ 19 | } 20 | */ 21 | 22 | 23 | //Part222 RegExp.prototype.exec 方法 可以获得更为详细的信息，返回一个有属性的数组， 24 | //属性index表示匹配到的位置 25 | //对于非全局模式下返回第一个匹配的和所有的分组项，正则对象的lastIndex不起作用 26 | var execExp = /\d{1,2}(\d)(\d)/; 27 | var retExp = execExp.exec("12s342dsfsf233s"); 28 | console.log(retExp instanceof Array,retExp,execExp.lastIndex); 29 | console.log(retExp instanceof Array,retExp,execExp.lastIndex); 30 | 31 | //对于全局模式下 每检测一次lastIndex增加一次，再次用此正则对象匹配时，匹配的起始点为上一次的lastIndex 32 | var execExp2 = /\d{1,2}(\d)(\d)/g; 33 | var ts = "12s342dsfsf233s"; 34 | console.log(execExp2.exec(ts),execExp2.lastIndex);//lastIndex为 6 35 | console.log(execExp2.exec(ts),execExp2.lastIndex);//lastIndex为 14 36 | /* 37 | var ret2; 38 | while (ret2 = execExp2.exec(ts)){ 39 | console.log(execExp2.lastIndex);//每次执行后从哪开始重新匹配？ 40 | } 41 | */ -------------------------------------------------------------------------------- /lessons/LS20/js/demo09.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/10/20. 3 | */ 4 | //String.prototype.search 注意search忽略 全局g 5 | console.log("a1b2c3d4".search(/1/));//返回index 1 6 | console.log("a1b2c3d4".search(/f/));//返回index -1 没找到 7 | console.log("a1b2c3d4".search(/\d/g));//返回index 1 忽略全局 8 | console.log("a1b2c3d4".search(/\d\w/g));//返回index 1 忽略全局 9 | 10 | //String.prototype.match 如果匹配不到返回null 匹配到了返回数组 11 | // 包含的信息有index 原始字符串 有没有g影响很大 12 | console.log("a1b2c3d4".match(/1/));//[ '1', index: 1, input: 'a1b2c3d4' ] 13 | console.log("a1b2c3d4".match(/f/));//null 14 | console.log("a1b2c3d4".match(/\d/));//[ '1', index: 1, input: 'a1b2c3d4' ] 15 | console.log("a1b2c3d4".match(/\d/g));//[ '1', '2', '3', '4' ] 16 | 17 | // String.prototype.replace 18 | console.log("a,b,c,d".replace(",","X")); 19 | console.log("a2b3c4d".replace(/[2-3]/,"X")); 20 | console.log("a2b3c4d".replace(/[2-3]/g,"X")); 21 | 22 | //String.prototype.split 23 | console.log("a,b,c,d".split(",")); 24 | console.log("a2b3c4d".split(/\d/)); 25 | 26 | "abcdef21313sfsflsf1223jlnsa".match(/[a-h]/); 27 | "abcdef21313sfsflsf1223jlnsa".match(/[a-h]/g); 28 | "abcdef21313sfsflsf1223jlnsa".match(/[123efsa]/g); 29 | "abcdef21313sfsflsf1223jlnsa".match(/[^123efsa]/g); 30 | "abcdef21313sfsflsf1223jlnsa".match(/[1-2a-d]/g); 31 | "hello world Hi you".match(/hello|world/); 32 | "hello world Hi you".match(/hello|world/g); 33 | "world Hi you".match(/hello|world/); 34 | "THat hot hat".match(/h.t/); 35 | "THat hot hat".match(/h.t/g); 36 | "THat hot hat".match(/h.t/gi); 37 | 38 | -------------------------------------------------------------------------------- /lessons/LS20/正则表达式（思维导图）.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/lessons/LS20/正则表达式（思维导图）.jpg -------------------------------------------------------------------------------- /lessons/LS21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS10 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /lessons/LS21/js/demo12.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | window.onload = function () { 5 | window.Foo = function () { 6 | var inputValue = document.getElementById("inputID").value; 7 | try{ 8 | var n = parseInt(inputValue); 9 | var a= new Array(n);//定义一个数组 传3试试、再传-5试试 10 | for(var i=0;i 2 | 3 | 4 | 5 | LS11 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /lessons/LS23/NodeJsonTest/NodeJsonTest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSON-Node-测试 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 47 | 48 | -------------------------------------------------------------------------------- /lessons/LS23/NodeJsonTest/NodeJsonTest.js: -------------------------------------------------------------------------------- 1 | var fs = require("fs"); 2 | var http = require("http"); 3 | var url = require("url"); 4 | 5 | http.createServer(function (req, res) { 6 | var getDataObj = url.parse(req.url,true).query;//parse第二参数决定了是否转成对象 7 | //console.log(getDataObj); 8 | var arrayIndex = getDataObj.id-1; 9 | //console.log(typeof arrayIndex,arrayIndex); 10 | fs.readFile("./NodeJsonTest.json", function readData(err, data) { 11 | var jsonArr=JSON.parse(data); 12 | //console.log("jsonArr:",jsonArr[arrayIndex]); 13 | 14 | //res.writeHead(200, {"Content-Type": "text/plain", 15 | res.writeHead(200, {"Content-Type": "application/json", 16 | "Access-Control-Allow-Origin":"*", 17 | "Access-Control-Allow-Methods": "GET, POST" 18 | }); 19 | 20 | res.end(JSON.stringify(jsonArr[arrayIndex])); 21 | }); 22 | 23 | }).listen(8080,"127.0.0.1"); 24 | console.log("start server!"); 25 | 26 | 27 | /* 28 | var readableStream = fs.createReadStream("./NoseJsonTest.txt"); 29 | var data = ""; 30 | readableStream.on("data", function(chunk){ 31 | data += chunk; 32 | }); 33 | readableStream.on("end", function(){ 34 | console.log(data,typeof data); 35 | }); 36 | */ -------------------------------------------------------------------------------- /lessons/LS23/NodeJsonTest/NodeJsonTest.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "index": "111111", 4 | "id": "2010015001", 5 | "name": "aaaaa", 6 | "score": "60" 7 | }, 8 | { 9 | "index": "222222", 10 | "id": "2010015002", 11 | "name": "bbbbb", 12 | "score": "76" 13 | }, 14 | { 15 | "index": "333333", 16 | "id": "2010015003", 17 | "name": "ccccc", 18 | "score": "63" 19 | }, 20 | { 21 | "index": "444444", 22 | "id": "2010015004", 23 | "name": "ddddd", 24 | "score": "74" 25 | }, 26 | { 27 | "index": "555555", 28 | "id": "2010015005", 29 | "name": "eeeee", 30 | "score": "72" 31 | }, 32 | { 33 | "index": "66666", 34 | "id": "2010015006", 35 | "name": "fffff", 36 | "score": "76" 37 | }, 38 | { 39 | "index": "77777", 40 | "id": "2010015007", 41 | "name": "ggggg", 42 | "score": "83" 43 | } 44 | ] -------------------------------------------------------------------------------- /lessons/LS23/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS11 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /lessons/LS23/js/demo02.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | // JS中一切都是对象（如何理解这句话），任何支持的类型都可以通过对象来表示 5 | // JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串 6 | // JSON 可以以字符串的形式表示 JS基本数据类型变量和对象（引用）类型变量 7 | 8 | var obj1 = "xxx"; 9 | var obj2 = 23; 10 | var obj3 = false; 11 | var obj4 = { x: 1, y: 2, a: [1, 3, 5], b: "xyz" }; 12 | var obj5 = [123, 345]; 13 | var obj6 = [{ z: 3 }, [1, 2]]; 14 | var obj7 = {x:true}; 15 | 16 | var json1 = '"xxx"'; 17 | var json2 = '23'; 18 | var json3 = 'false'; 19 | var json4 = '{"x":1,"y":2,"a":[1,3,5],"b":"xyz"}'; 20 | var json5 = '[123,345]';//注意区别于：'["123","345"]' 21 | var json6 = '[{"z":3},[1,2]]'; 22 | var json7 = '{"x":true}';//注意区别于：'{"x":"true"}' 23 | 24 | // 在线测试工具 http://www.json.cn/ 25 | //练习：写几个json对象，数组，对象，数字，字符等等 26 | var j1 = '[{"name":"jack","obj":{"x":1,"y":2},"arr":[1,2,"3"]},2]'; 27 | var j2 = '{"x":1,"y":"2"}'; 28 | 29 | //查看一下 api.github.com 返回的json数据 30 | 31 | //思考：以上实例传递的都是属性，方法如何传递？回顾Function构造函数和创建函数的3种方式 32 | var foo = new Function("x","y","return x>y?x:y;"); 33 | foo(2,3); 34 | 35 | 36 | //var jf = '["x","y","return x 2 | 3 | 4 | 5 | 待补充 6 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/LS25/demo01.js: -------------------------------------------------------------------------------- 1 | // 2 | window.onload = function () { 3 | console.log("window onload"); 4 | var div2 = document.getElementById("div2"); 5 | //思考：将下述7到11行代码写在window.onload回调函数外会怎样 6 | div2.onclick = function () { 7 | console.log("div2 click"); 8 | } 9 | // div2.onmouseover = function () { 10 | // console.log("div2 mouseover"); 11 | // } 12 | } 13 | function div1click() { 14 | console.log("div1 click"); 15 | //console.log("this:", this); 16 | } 17 | 18 | -------------------------------------------------------------------------------- /lessons/LS25/demo02.js: -------------------------------------------------------------------------------- 1 | // 2 | window.onload = function (e) { 3 | // console.log("window onload"); 4 | // console.log("e:", e); 5 | // console.log(e.target); 6 | var div1 = document.getElementById("div1"); 7 | var div2 = document.getElementById("div2"); 8 | var eventHandler = function (e) { 9 | // 测试0 10 | console.log(e.type); 11 | console.log(e.target);//思考target和this此时是否一样？ 12 | //所有情况都一样么?有没有某种情况不一样呢？后边讲事件流时再告诉你 13 | 14 | // 测试1 15 | // console.log(e.clientX,e.clientY); 16 | // console.log(this, "-----", e.target.id); 17 | 18 | // 测试2 19 | // console.log(e); 20 | // console.log(e.__proto__); 21 | // console.log(e.__proto__.__proto__); 22 | // console.log(e.__proto__.__proto__.__proto__); 23 | // console.log(e.__proto__.__proto__.__proto__.__proto__); 24 | 25 | // 测试3 26 | // for(var k in e){ 27 | // console.log(k,e[k]); 28 | // } 29 | // for(var k in e.__proto__){ 30 | // console.log(k); 31 | // } 32 | // for(var k in e.__proto__.__proto__){ 33 | // console.log(k); 34 | // } 35 | // for(var k in e.__proto__.__proto__.__proto__){ 36 | // console.log(k); 37 | // } 38 | } 39 | div1.onclick = eventHandler; 40 | div2.onclick = eventHandler; 41 | 42 | //自定义事件监听、事件分发 43 | // document.addEventListener("xx",function(){console.log("11")}); 44 | // document.dispatchEvent(new Event("xx")); 45 | } 46 | 47 | -------------------------------------------------------------------------------- /lessons/LS25/demo04.js: -------------------------------------------------------------------------------- 1 | 2 | window.onload = function (e) { 3 | var div1 = document.getElementById("div1"); 4 | var div2 = document.getElementById("div2"); 5 | 6 | div1.addEventListener("click",function (e) { 7 | console.log("div1 click"); 8 | e.stopPropagation(); 9 | },false);//第3个参数可以不写，默认为false 10 | 11 | div2.addEventListener("click",function (e) { 12 | console.log("div2 click"); 13 | },false); 14 | 15 | document.addEventListener("click",function (e) { 16 | console.log("document click"); 17 | },false); 18 | 19 | document.body.addEventListener("click",function (e) { 20 | console.log("body click"); 21 | },true); 22 | } 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /lessons/LS25/demo06.js: -------------------------------------------------------------------------------- 1 | //再谈事件对象与事件流 2 | window.onload = function (e) { 3 | var div1 = document.getElementById("div1"); 4 | var div2 = document.getElementById("div2"); 5 | 6 | div1.addEventListener("click",function (e) { 7 | console.log("div1 click--red"); 8 | console.log("target:",e.target); 9 | console.log("this:",this); 10 | console.log(e.bubbles,e.cancelable,e.cancelBubble); 11 | //e.stopPropagation(); 12 | },false);//改成true会怎样 13 | 14 | div2.addEventListener("click",function (e) { 15 | console.log("div2 click--yellow");// 16 | this.style.backgroundColor='black'; 17 | //和this.hidden = true;//e.target.hidden = true;有什么区别？为什么？ 18 | //this.hidden = true; 19 | 20 | //e.stopPropagation(); 21 | },false);//改成true会怎样 22 | 23 | div3.addEventListener("click",function (e) { 24 | console.log("div3 click--blue"); 25 | //e.stopPropagation(); 26 | },false);//改成true会怎样 27 | 28 | /* 29 | document.addEventListener("click",function (e) { 30 | console.log("document click"); 31 | },false);//若第3个可选参数为true的话会怎样，理解冒泡和捕获的顺序 32 | //第3个参数默认是false使用的是冒泡方式，若改为true的话则为捕获方式 33 | 34 | document.body.addEventListener("click",function (e) { 35 | console.log("body click"); 36 | },false);//若第3个可选参数为true的话会怎样，理解冒泡和捕获的顺序 37 | */ 38 | 39 | 40 | //阻止默认事件行为 41 | document.getElementById("aId").addEventListener("click",function (e) { 42 | e.preventDefault();//阻止默认事件，阻止了链接跳转 43 | console.log("a click"); 44 | }); 45 | } 46 | -------------------------------------------------------------------------------- /lessons/LS25/index01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 事件及事件对象 7 | 8 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /lessons/LS25/index02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Html事件响应 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /lessons/LS25/index03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Html事件响应 7 | 8 | 9 | 10 | 11 | 12 | 13 | 18 | 19 | 20 |
21 |
22 |
23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /lessons/LS25/index04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 事件流 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 |
20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /lessons/LS25/index05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 事件流-阻止冒泡-阻止默认响应 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /lessons/LS25/index06.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 事件流-阻止冒泡-阻止默认响应 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 |
25 | 百度 26 | 27 | 28 | -------------------------------------------------------------------------------- /lessons/LS25/style.css: -------------------------------------------------------------------------------- 1 | #div1{ 2 | width: 200px; 3 | height: 200px; 4 | background-color: red; 5 | margin: 0px; 6 | padding: 0px; 7 | } 8 | 9 | #div2{ 10 | width: 100px; 11 | height: 100px; 12 | background-color: yellow; 13 | padding: 0px; 14 | margin: 50px; 15 | position: absolute; 16 | } 17 | 18 | #div3{ 19 | width: 50px; 20 | height: 50px; 21 | background-color: blue; 22 | padding: 0px; 23 | margin: 25px; 24 | position: absolute; 25 | } 26 | -------------------------------------------------------------------------------- /lessons/LS26/NodeAjaxTest/NodeAjaxTest01.js: -------------------------------------------------------------------------------- 1 | var http = require("http"); 2 | var url = require("url"); 3 | 4 | http.createServer(function (req, res) { 5 | //console.log(Object.keys(req),"___",Object.keys(res)); 6 | //console.log("req.url：",req.url); 7 | // var getDataObj = url.parse(req.url,true).query;//parse函数中第二个参数为true的话返回一个对象 8 | var getDataStr = url.parse(req.url).query;//parse函数中第二个参数为true的话返回一个对象 9 | 10 | res.writeHead(200, { 11 | "Content-Type": "text/plain", 12 | // res.writeHead(200, {"Content-Type": "application/json", 13 | "Access-Control-Allow-Origin":"*", //在后端支持跨域访问的设置，响应头中的设置 14 | "Access-Control-Allow-Methods": "GET, POST" 15 | }); 16 | setTimeout(function () { 17 | res.end("你好，我已收到你发的信息："+getDataStr); 18 | },20000*Math.random()); 19 | //res.end("你的输入信息是："+getDataStr); 20 | }).listen(8080,"127.0.0.1"); 21 | console.log("start server!"); -------------------------------------------------------------------------------- /lessons/LS26/NodeAjaxTest/NodeAjaxTest02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 11 | 12 | 45 | 46 | -------------------------------------------------------------------------------- /lessons/LS26/NodeAjaxTest/NodeJsonTest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JSON-Node-测试 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 47 | 48 | -------------------------------------------------------------------------------- /lessons/LS26/NodeAjaxTest/NodeJsonTest.js: -------------------------------------------------------------------------------- 1 | var fs = require("fs"); 2 | var http = require("http"); 3 | var url = require("url"); 4 | 5 | http.createServer(function (req, res) { 6 | var getDataObj = url.parse(req.url,true).query;//parse第二参数决定了是否转成对象 7 | //console.log(getDataObj); 8 | var arrayIndex = getDataObj.id-1; 9 | //console.log(typeof arrayIndex,arrayIndex); 10 | fs.readFile("./NodeJsonTest.json", function readData(err, data) { 11 | var jsonArr=JSON.parse(data); 12 | //console.log("jsonArr:",jsonArr[arrayIndex]); 13 | 14 | //res.writeHead(200, {"Content-Type": "text/plain", 15 | res.writeHead(200, {"Content-Type": "application/json", 16 | "Access-Control-Allow-Origin":"*", 17 | "Access-Control-Allow-Methods": "GET, POST" 18 | }); 19 | 20 | res.end(JSON.stringify(jsonArr[arrayIndex])); 21 | }); 22 | 23 | }).listen(8080,"127.0.0.1"); 24 | console.log("start server!"); 25 | 26 | 27 | /* 28 | var readableStream = fs.createReadStream("./NoseJsonTest.txt"); 29 | var data = ""; 30 | readableStream.on("data", function(chunk){ 31 | data += chunk; 32 | }); 33 | readableStream.on("end", function(){ 34 | console.log(data,typeof data); 35 | }); 36 | */ -------------------------------------------------------------------------------- /lessons/LS26/NodeAjaxTest/NodeJsonTest.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "index": "111111", 4 | "id": "2010015001", 5 | "name": "aaaaa", 6 | "score": "60" 7 | }, 8 | { 9 | "index": "222222", 10 | "id": "2010015002", 11 | "name": "bbbbb", 12 | "score": "76" 13 | }, 14 | { 15 | "index": "333333", 16 | "id": "2010015003", 17 | "name": "ccccc", 18 | "score": "63" 19 | }, 20 | { 21 | "index": "444444", 22 | "id": "2010015004", 23 | "name": "ddddd", 24 | "score": "74" 25 | }, 26 | { 27 | "index": "555555", 28 | "id": "2010015005", 29 | "name": "eeeee", 30 | "score": "72" 31 | }, 32 | { 33 | "index": "66666", 34 | "id": "2010015006", 35 | "name": "fffff", 36 | "score": "76" 37 | }, 38 | { 39 | "index": "77777", 40 | "id": "2010015007", 41 | "name": "ggggg", 42 | "score": "83" 43 | } 44 | ] -------------------------------------------------------------------------------- /lessons/LS26/NodePackDemo/Person.js: -------------------------------------------------------------------------------- 1 | function Person(name,age) { 2 | this.name = name; 3 | this.age = age; 4 | } 5 | Person.prototype.show = function(){ 6 | console.log("i'm",this.name,",i'm ",this.age,"years old!") 7 | } 8 | module.exports = Person; 9 | 10 | //任务：创建一个Student.js文件 11 | //创建一个Student模块，实现导出、导入和模块使用 -------------------------------------------------------------------------------- /lessons/LS26/NodePackDemo/test01.js: -------------------------------------------------------------------------------- 1 | // 2 | var a = "a"; 3 | var b = 123; 4 | var foo = function () { 5 | console.log(a,b); 6 | return 0; 7 | } 8 | module.exports.a = a; 9 | module.exports.b = b; 10 | module.exports.c = foo; 11 | -------------------------------------------------------------------------------- /lessons/LS26/NodePackDemo/test02.js: -------------------------------------------------------------------------------- 1 | // var test01 = require("./test01"); 2 | // console.log(test01.a); 3 | // console.log(test01.b); 4 | // console.log(test01.c()); 5 | 6 | var Person = require("./Person"); 7 | var p = new Person("jack",23); 8 | p.show(); -------------------------------------------------------------------------------- /lessons/LS26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS12 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /lessons/LS26/js/demo01.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //理解JS中的相关概念的理解（线程、异步、阻塞、并行） 5 | //Part111111111111 异步的案例 6 | //情形一 平时作业 7 | // 老师 （JS单线程）：留作业 - ************ - 老师判作业 8 | // 学生1（IO 线程）：****** - 学生完成作业 - ********** 9 | // 学生2（IO 线程）：****** - 学生完成作业 - ********** 10 | // 学生3（IO 线程）：****** - 学生完成作业 - ********** 11 | 12 | 13 | // 情形二 银行营业厅 （一个专员的情景，后端是同步处理的情况下） 14 | // 许多客户（许多前端用户） 营业员（后端服务） 15 | // 客户1 取号 |（ 其他事务 ）| 完成业务 16 | // 客户2 取号 | （ 其他事务 ） |完成业务 17 | // 客户3 取号| （ 其他事务 ） |完成业务 18 | 19 | // 专员1 -- |处理业务1-----| |处理业务2-----| |处理业务3-----| 20 | 21 | 22 | //情形三 银行营业厅 多个专员时 （后端是同步处理多线程情况下，线程是有限的） 23 | // 许多客户（许多前端用户） 营业员（后端服务） 24 | // 客户1 取号 |（ 其他事务 ）| 完成业务 25 | // 客户2 取号 | （ 其他事务 ）|完成业务 26 | // 客户3 取号| （ 其他事务 ） |完成业务 27 | 28 | // 专员1 -- |处理业务1-----| |处理业务3-----| 29 | // 专员2 -- |处理业务2-----| 30 | 31 | 32 | //情形四 银行营业厅 （后端的是单线程异步事件驱动的形式） 33 | // 客户1 取号 | （ 其他事务 ） | 完成业务 34 | // 客户2 取号 | （ 其他事务 ） |完成业务 35 | // 客户3 取号| （ 其他事务 ） |完成业务 36 | 37 | // 客服 |受理| |分发| |通知| 38 | 39 | // 业务员1 -- |处理业务1-----| 40 | // 业务员2 -- |处理业务2-----| 41 | // 业务员3 -- |处理业务3-----| 42 | 43 | //Part2222222222 思考企业组织结构,总经理发布任务后就去忙别的了，是异步的 44 | // 副总经理将任务分发后也去忙自己的去路，也是异步的 45 | // 总经理 ---副总经理1 --助理11 46 | // --助理12 47 | // --助理13 48 | // ---副总经理2 --助理21 49 | // --助理22 50 | // --助理23 51 | 52 | //Part3333333333 思考车站售票窗口排队等候的人是同步还是异步，阻塞还是非阻塞 53 | 54 | //Part4444444444一个线程是否可以同时完成两个任务，如何理解任务的并发 55 | //一个人，同时画一个圆和一个矩形 56 | -------------------------------------------------------------------------------- /lessons/LS26/js/demo03.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //发布订阅 实例///////////////////// 5 | 6 | var Subject = function(){ 7 | var _observer = []; 8 | this.attach = function(observer){ 9 | _observer.push(observer); 10 | }; 11 | this.detach = function(){ 12 | _observer.pop(); 13 | }; 14 | this.notify = function(msg){ 15 | for(var i=0;i<_observer.length;i++){ 16 | _observer[i].update(msg); 17 | } 18 | }; 19 | this.print = function(){ 20 | console.log(_observer.length); 21 | console.log(_observer); 22 | }; 23 | }; 24 | var Observer = function(name){ 25 | this.update = function(msg){ 26 | console.log('i am '+name+',and i get the message: '+msg); 27 | }; 28 | }; 29 | var sub = new Subject() 30 | sub.attach(new Observer('a')); 31 | sub.attach(new Observer('b')); 32 | sub.notify('hello'); 33 | //sub.print(); 34 | 35 | setTimeout(function(){ 36 | var c = new Observer('c'); 37 | sub.detach(); 38 | sub.attach(c); 39 | sub.notify('world'); 40 | //sub.print(); 41 | },5000); 42 | 43 | //Promise 参见ES6部分/////////////////////// 44 | -------------------------------------------------------------------------------- /lessons/LS26/js/demo04-ajax.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //XMLHttpRequest Get 请求 5 | //后端代码参见参见NodeAjaxTest01.js 6 | //实例一 7 | var xhr = new XMLHttpRequest(); 8 | xhr.onreadystatechange = function () { 9 | //console.log(xhr.readyState,xhr.status); 10 | if (xhr.readyState == 4) { 11 | //表示服务器的相应代码是200；正确返回了数据 12 | if (xhr.status == 200) { 13 | var message = xhr.responseText; 14 | console.log(message); 15 | } 16 | } 17 | }; 18 | xhr.open("get", "http://127.0.0.1:8080?getInfo=MyGetInformation", true); 19 | //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//post需增加 20 | xhr.send(); 21 | 22 | 23 | 24 | 25 | // 域名检测 26 | // http://panda.www.net.cn/cgi-bin/check.cgi?area_domain=qq.com 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /lessons/LS26/js/demo04-node.js: -------------------------------------------------------------------------------- 1 | var http = require("http"); 2 | var url = require("url"); 3 | 4 | http.createServer(function (req, res) { 5 | //console.log(Object.keys(req),"___",Object.keys(res)); 6 | //console.log("req.url：",req.url); 7 | // var getDataObj = url.parse(req.url,true).query;//parse函数中第二个参数为true的话返回一个对象 8 | var getDataStr = url.parse(req.url).query;//parse函数中第二个参数为true的话返回一个对象 9 | 10 | res.writeHead(200, { 11 | "Content-Type": "text/plain", 12 | // res.writeHead(200, {"Content-Type": "application/json", 13 | "Access-Control-Allow-Origin":"*", //在后端支持跨域访问的设置，响应头中的设置 14 | "Access-Control-Allow-Methods": "GET, POST" 15 | }); 16 | setTimeout(function () { 17 | res.end("你好，我已收到你发的信息："+getDataStr); 18 | },20000*Math.random()); 19 | //res.end("你的输入信息是："+getDataStr); 20 | }).listen(8080,"127.0.0.1"); 21 | console.log("start server!"); 22 | -------------------------------------------------------------------------------- /lessons/LS27/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS13 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /lessons/LS27/js/demo01.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | 5 | //例1 通过var定变量 ES5中没有块作用域{ }外可以访问{ }内变量 6 | { 7 | var a = 23; 8 | } 9 | console.log(a);//由于没有块作用域，a可以正常输出 10 | 11 | //例2 12 | for(var i=0;i<5;i++){ 13 | //do somethings 14 | } 15 | console.log("i:",i);//此处i依然存在 16 | 17 | 18 | //例3 通过var声明的变量，由于没有块作用域，容易造成变量污染 19 | var userId = 123; 20 | document.onclick = function () { 21 | console.log("userId = ",userId); 22 | //alert("userId = "+userId); 23 | }; 24 | 25 | //一长串代码后，假如忘记上边定义了userID，容易重复定义造成变量污染 26 | var a=2,b=3; 27 | if(a 2 | 3 | 4 | 5 | LS13 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /lessons/LS28/js/demo11.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //字符串也可以解构赋值 5 | const [a, b, c, d, e] = 'hello';//相当于将'hello'转成了["h","e","l","l","o"]后解构 6 | console.log(a); // "h" 7 | console.log(b); // "e" 8 | console.log(c); // "l" 9 | console.log(d); // "l" 10 | console.log(e); // "o" 11 | 12 | //类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。 13 | let {length : len} = 'hello'; 14 | console.log(len); // 5 15 | 16 | 17 | //解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。 18 | let {toString: s1} = 123; 19 | console.log(s1); // 20 | //s1 === Number.prototype.toString // true 21 | 22 | let {toString: s2} = true; 23 | console.log(s2); // 24 | //s2 === Boolean.prototype.toString // true 25 | 26 | //上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。 27 | 28 | //解构赋值的规则是，只要等号右边的值不是对象，就先将其转为对象。 29 | // 由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。 30 | // let { prop: x } = undefined; // TypeError 31 | // let { prop: y } = null; // TypeError 32 | 33 | -------------------------------------------------------------------------------- /lessons/LS28/js/demo12.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | function add([x, y]){ 5 | return x + y; 6 | } 7 | add([1, 2]); // 3 8 | 9 | ///// 10 | [[1, 2], [3, 4]].map(function([a, b]){return a + b;}); 11 | // [ 3, 7 ] 12 | //箭头函数表示形式 [[1, 2], [3, 4]].map(([a, b]) => a + b); 13 | 14 | ///// 15 | //函数参数的解构也可以使用默认值,下例中用了两次的解构赋值 16 | function move1({x = 0, y = 0} = {}) { 17 | return [x, y]; 18 | } 19 | console.log(move1({x: 3, y: 4})); // [3, 4] 20 | console.log(move1({x: 3})); // [3, 0] 21 | console.log(move1({})); // [0, 0] 22 | console.log(move1()); // [0, 0] 23 | 24 | /////// 25 | //注意，下面的写法会得到不一样的结果。 26 | function move2({x, y} = { x: 0, y: 0 }) { 27 | return [x, y]; 28 | } 29 | console.log(move2({x: 3, y: 8})); // [3, 8] 30 | console.log(move2({x: 3})); // [3, undefined] 31 | console.log(move2({})); // [undefined, undefined] 32 | console.log(move2()); // [0, 0] 33 | //上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。 34 | 35 | 36 | //undefined就会触发函数参数的默认值 37 | [1, undefined, 3].map(function(x = 'yes') {return x;}); 38 | // [ 1, 'yes', 3 ] 39 | //箭头函数表示形式 [1, undefined, 3].map((x = 'yes') => x); 40 | -------------------------------------------------------------------------------- /lessons/LS28/js/demo13.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | // 1 交换变量的值 5 | var [x,y] = ["a","b"]; 6 | [x, y] = [y, x]; 7 | console.log(x,y);//b,a 8 | //上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。 9 | 10 | // 2 从函数返回多个值 11 | // 函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。 12 | // 有了解构赋值，取出这些值就非常方便 13 | 14 | // 返回一个数组 15 | function example() { 16 | return [1, 2, 3]; 17 | } 18 | var [a, b, c] = example(); 19 | 20 | // 返回一个对象,解构所有属性 21 | function example() { 22 | return { 23 | foo: 1, 24 | bar: 2 25 | }; 26 | } 27 | var { foo, bar } = example(); 28 | 29 | // 3 函数参数的定义 30 | //解构赋值可以方便地将一组参数与变量名对应起来。 31 | // 参数是一组有次序的值 32 | function f([x, y, z]) { 33 | console.log(x); 34 | console.log(y); 35 | console.log(z); 36 | } 37 | f([1, 2, 3]); 38 | 39 | // 参数是一组无次序的值 40 | function f({x, y, z}) { 41 | console.log(x); 42 | console.log(y); 43 | console.log(z); 44 | } 45 | f({z: 3, y: 2, x: 1}); -------------------------------------------------------------------------------- /lessons/LS28/js/demo14.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | // 4 提取JSON数据 5 | //解构赋值对提取JSON对象中的数据，尤其有用。 6 | var jsonData = { 7 | id: 42, 8 | status: "OK", 9 | data: [867, 5309] 10 | }; 11 | let { id, status, data: number } = jsonData; 12 | console.log(id, status, number); 13 | // 42, "OK", [867, 5309] 14 | //上面代码可以快速提取JSON数据的值。 15 | 16 | //5 函数参数的默认值 17 | jQuery.ajax = function (url, { 18 | async = true, 19 | beforeSend = function () {}, 20 | cache = true, 21 | complete = function () {}, 22 | crossDomain = false, 23 | global = true, 24 | // ... more config 25 | }) { 26 | // ... do stuff 27 | }; 28 | //指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。 29 | 30 | //6 遍历Map结构 Map相关内容参见Map Set章节 31 | // 任何部署了Iterator接口的对象，都可以用for...of循环遍历。 32 | // Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值就非常方便。 33 | var map = new Map(); 34 | map.set('first', 'hello'); 35 | map.set('second', 'world'); 36 | for (let [key, value] of map) { 37 | console.log(key + " is " + value); 38 | } 39 | // first is hello 40 | // second is world 41 | //如果只想获取键名，或者只想获取键值，可以写成下面这样。 42 | // 获取键名 43 | for (let [key] of map) { 44 | // ... 45 | } 46 | // 获取键值 47 | for (let [,value] of map) { 48 | // ... 49 | } 50 | 51 | // 7 输入模块的指定方法 52 | //加载模块时，往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。 53 | const { SourceMapConsumer, SourceNode } = require("source-map"); 54 | -------------------------------------------------------------------------------- /lessons/LS28/js/demo15.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | // 5 | // 以下三种解构赋值不得使用圆括号。 6 | //（1）变量声明语句中，不能带有圆括号。 7 | // 全部报错 8 | var [(a)] = [1]; 9 | var {x: (c)} = {}; 10 | var ({x: c}) = {}; 11 | var {(x: c)} = {}; 12 | var {(x): c} = {}; 13 | var { o: ({ p: p }) } = { o: { p: 2 } }; 14 | //上面三个语句都会报错，因为它们都是变量声明语句，模式不能使用圆括号 15 | 16 | //（2）函数参数中，模式不能带有圆括号 17 | //函数参数也属于变量声明，因此不能带有圆括号。 18 | // 报错 19 | function f([(z)]) { return z; } 20 | 21 | //（3）赋值语句中，不能将整个模式，或嵌套模式中的一层，放在圆括号之中 22 | // 全部报错 23 | ({ p: a }) = { p: 42 }; 24 | ([a]) = [5]; 25 | //上面代码将整个模式放在圆括号之中，导致报错。 26 | // 报错 27 | [({ p: a }), { x: c }] = [{}, {}]; 28 | //上面代码将嵌套模式的一层，放在圆括号之中，导致报错。 29 | 30 | //可以使用圆括号的情况：赋值语句的非模式部分，可以使用圆括号。 31 | [(b)] = [3]; // 正确 32 | ({ p: (d) } = {}); // 正确 33 | [(parseInt.prop)] = [3]; // 正确 34 | // 上面三行语句都可以正确执行,它们的圆括号都不属于模式的一部分。 35 | // 第一行语句中，模式是取数组的第一个成员，跟圆括号无关 36 | // 第二行语句中，模式是p，而不是d 37 | // 第三行语句与第一行语句的性质一致 38 | // 即括号扩的是值而不是模式时可以使用括号，但建议能不用括号的尽量不用，避免产生歧义 -------------------------------------------------------------------------------- /lessons/LS29/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS14 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /lessons/LS29/js/demo01.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | // ES6为字符串添加了遍历器接口，使得字符串可以被for...of循环遍历 5 | for (let codePoint of 'foo') { 6 | console.log(codePoint) 7 | } 8 | // "f" 9 | // "o" 10 | // "o" 11 | 12 | for (let key in 'foo') { 13 | console.log(key); 14 | } 15 | 16 | //提供新的方法用于查找、判断和生成字符串 17 | var s = 'Hello world!'; 18 | s.startsWith('Hello'); // true 19 | s.endsWith('!'); // true 20 | s.includes('o'); // true 21 | 22 | //第二个参数，表示开始搜索的位置 23 | var s = 'Hello world!'; 24 | s.startsWith('world', 6); // true 25 | s.endsWith('Hello', 5); // true 26 | s.includes('Hello', 6); // false 27 | 28 | //repeat方法返回一个新字符串，表示将原字符串重复n次。 29 | 'x'.repeat(3); // "xxx" 30 | 'hello'.repeat(2); // "hellohello" 31 | 'na'.repeat(0); // "" 32 | //参数如果是小数，会被取整。 33 | 'na'.repeat(2.9); // "nana" 34 | //如果repeat的参数是负数或者Infinity，会报错。 35 | 'na'.repeat(Infinity); 36 | // RangeError 37 | 'na'.repeat(-1); 38 | // RangeError -------------------------------------------------------------------------------- /lessons/LS29/js/demo02.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //在ES5中，RegExp构造函数的参数有两种情况。 5 | //第一种情况是，参数是字符串，这时第二个参数表示正则表达式的修饰符（flag）。 6 | var regex = new RegExp('xyz', 'i'); 7 | // 等价于 8 | var regex = /xyz/i; 9 | //第二种情况是，参数是一个正则表示式，这时会返回一个原有正则表达式的拷贝。 10 | var regex = new RegExp(/xyz/i); 11 | // 等价于 12 | var regex = /xyz/i; 13 | //但是，ES5不允许此时使用第二个参数，添加修饰符，否则会报错。 14 | var regex = new RegExp(/xyz/, 'i'); 15 | // Uncaught TypeError: Cannot supply flags when constructing one RegExp from another 16 | 17 | //ES6改变了这种行为。如果RegExp构造函数第一个参数是一个正则对象，那么可以使用第二个参数指定修饰符。 18 | // 而且，返回的正则表达式会忽略原有的正则表达式的修饰符，只使用新指定的修饰符。 19 | new RegExp(/abc/ig, 'i').flags// "i" 20 | 21 | 22 | //（粘连sticky）修饰符 23 | var s = 'aaa_aa_a'; 24 | var r1 = /a+/g; 25 | var r2 = /a+/y; 26 | r1.exec(s); // ["aaa"] 27 | r2.exec(s); // ["aaa"] 28 | r1.exec(s); // ["aa"] 29 | r2.exec(s); // null 30 | //上面代码有两个正则表达式，一个使用g修饰符，另一个使用y修饰符。 31 | // 这两个正则表达式各执行了两次，第一次执行的时候，两者行为相同，剩余字符串都是_aa_a。 32 | //由于g修饰没有位置要求，所以第二次执行会返回结果，而y修饰符要求匹配必须从头部开始，所以返回null。 33 | 34 | var r = /hello\d/y; 35 | r.sticky // true 36 | 37 | // ES5的source属性 38 | // 返回正则表达式的正文 39 | /abc/ig.source 40 | // "abc" 41 | 42 | // ES6的flags属性 43 | // 返回正则表达式的修饰符 44 | /abc/ig.flags 45 | // 'gi' 46 | -------------------------------------------------------------------------------- /lessons/LS30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS14 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /lessons/LS30/js/demo06.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //////////////////////////////// 5 | var f = function (v) { 6 | return v + 1; 7 | }; 8 | f(2);//返回3 9 | 10 | //使用箭头函数，上述代码等效如下,只有一个参数和一条语句 11 | var f = v => v + 1; //单参数可以不用（），单语句可以不用return关键字 12 | //var f = (v) => {return v + 1;}; 13 | f(2);//返回3 14 | 15 | 16 | /////////////////////////////// 17 | //没有参数和有多个参数的情况下，需要使用小括号来表示参数，如果有多条语句则需要有大括号表示函数体 18 | var f = () => 5; 19 | // 等同于 20 | var f = function () { 21 | return 5 22 | }; 23 | 24 | var foo = (num1, num2) => { 25 | if (num1 > num2) { 26 | return num1 * 2; 27 | } else { 28 | return num2 * 2; 29 | } 30 | }; 31 | //foo(2,3); 32 | //foo(3,2); 33 | // 等同于 ES5的写法 34 | var foo = function (num1, num2) { 35 | if (num1 > num2) { 36 | return num1 * 2; 37 | } else { 38 | return num2 * 2; 39 | } 40 | }; 41 | //foo(2,3); 42 | //foo(3,2); 43 | 44 | /////////////////////////////////// 45 | var max = function (a, b) { 46 | return a > b ? a : b; 47 | }; 48 | 49 | //箭头函数可以与变量解构结合使用 50 | const full = ({ first, last }) => last + ' ' + first; 51 | full({first:"Ming",last:"Li"}); 52 | 53 | // 等同于 54 | function full({ first, last }) { 55 | return last + ' ' + first; 56 | } 57 | full({first:"Ming",last:"Li"}); 58 | 59 | -------------------------------------------------------------------------------- /lessons/LS30/js/demo08.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | // ES5 中实现函数参数默认值的方法 5 | var sum = function(a,b,c){ 6 | b = b||4; 7 | c = c||5; 8 | return a+b+c; 9 | }; 10 | console.log(sum(1,2,3));//1+2+3 11 | console.log(sum(1,2));//1+2+5 12 | console.log(sum(1));//1+4+5 13 | console.log(sum(1,0,0));//本应为1+0+0，但此处为1+4+5，代码有问题需优化，优化如下 14 | 15 | //优化改造版本 16 | var sum = function(a,b,c){ 17 | if(b!=false){b = b||4;}//(b!=false)&&(b=b||4); 18 | if(c!=false){c = c||5;}//(c!=false)&&(c=c||5); 19 | return a+b+c; 20 | }; 21 | console.log(sum(1,2,3));//1+2+3 22 | console.log(sum(1,2));//1+2+5 23 | console.log(sum(1));//1+4+5 24 | console.log(sum(1,0,0));//1+0+0 25 | 26 | 27 | // ES6 中实现函数参数默认值的方法 ,使用babble查看ES5的写法 28 | var sum = function(a,b=4,c=5){ 29 | return a+b+c; 30 | }; 31 | console.log(sum(1,2,3));//1+2+3 32 | console.log(sum(1,2));//1+2+5 33 | console.log(sum(1));//1+4+5 34 | console.log(sum(1,0,0));//1+0+0 35 | 36 | //默认值案例 37 | function fetch(url, { body = '', method = 'GET', headers = {} } = {}) { 38 | console.log(url); 39 | console.log(body); 40 | console.log(method); 41 | console.log(headers); 42 | } 43 | 44 | fetch('http://example.com') 45 | 46 | //回顾解构赋值传参时，默认参数案例 -------------------------------------------------------------------------------- /lessons/LS30/js/demo09.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | // Part 11111 5 | function foo(x=5){ 6 | let x = 1;//报错 7 | const x = 2;//报错 8 | var x = 3;//正常 9 | } 10 | foo(); 11 | 12 | 13 | // Part 222222 14 | //默认值顺序，参数一般有顺序，有默认值的参数应该是尾参数 15 | //否则无法使有默认值的用默认值，没有默认值的用传递的参数 16 | function f(x = 1,y) { 17 | return [x,y]; 18 | } 19 | f();//[1,undefined] 20 | f(2);//[2,undefined] 21 | //f(,3);//报错，无法使x用1，y用3 22 | 23 | 24 | //所以有默认值的参数在最后 25 | function f(x,y = 1) { 26 | return [x,y]; 27 | } 28 | f();//[undefined, 1] 29 | f(2);//[2, 1] 这样就可以x为传递的参数，y为默认的值 -------------------------------------------------------------------------------- /lessons/LS30/js/demo10.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | // Part1111111111111 5 | // ES5中 实参数大于形参数量时，可以通过arguments来获得所有参数 6 | function test() { 7 | console.log(arguments);//console.log(test.arguments); 8 | } 9 | test("a","b","c");// 10 | 11 | //...Rest 相当于合并若干参数为一个数组，主要用于函数定义时，代替 arguments，组解决arguments的弊端 12 | function f(...y){ 13 | console.log(y); 14 | } 15 | f("a","b","c");//输出 ["a","b","c"] 16 | 17 | function add(...values) { 18 | let sum = 0; 19 | for (var val of values) { 20 | sum += val; 21 | } 22 | return sum; 23 | } 24 | add(2, 5, 3) // 10 25 | 26 | //比arguments使用更加灵活,比如只想看从第二个开始之后的参数 27 | function f(x,...y){ 28 | console.log(x,y); 29 | } 30 | f("a","b","c","d");//输出 "a",["b","c","d"] 31 | //思考：f("a",["b","c","d"]);//输出 "a",[["b","c","d"]] 32 | f("a");//输出 "a",[] 33 | f();//输出 undefined,[] 34 | //思考function f(x,...y，z){console.log(y);}//此时y输出是什么 35 | 36 | 37 | // Part2222222222222 38 | //...Spread 扩展操作符 相当于解数组为分散的参数，主要用于函数调用时，...Rest的逆运算 39 | function f(x,...y){ 40 | console.log(x,y); 41 | } 42 | f("a",...["b","c"]);//等价于f("a","b","c"); 43 | f("a");//输出 "a",[] 44 | f();//输出 undefined,[] 45 | 46 | 47 | //Part333333333333 扩展知识 call与apply的转换 两者之间的区别 课通过...Rest和...Spread转换 48 | function abc(...v){ 49 | console.log(v) 50 | } 51 | o1 = {}; 52 | abc.call(o1,...[1,2,3]);//等效于 abc.apply(o1,[1,2,3]); 53 | 54 | //函数定义和调用时的 合并元素为数组（...Rest） 与 拆分数组为各个元素(...Spread) 55 | 56 | 57 | -------------------------------------------------------------------------------- /lessons/LS31/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS14 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /lessons/LS32/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LS15 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /lessons/LS32/js/demo04.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //Part11111111111111111111111111111111111111111111111 5 | //类的prototype属性相当于实例的原型，所有在类中定义的方法，都会被实例继承。 6 | //如果在一个方法前，加上static关键字， 7 | //就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。 8 | class Foo { 9 | static classMethod() { 10 | return 'hello'; 11 | } 12 | } 13 | Foo.classMethod(); // 'hello' 14 | var foo = new Foo(); 15 | foo.classMethod();// TypeError: foo.classMethod is not a function 16 | // 上面代码中，Foo类的classMethod方法前有static关键字，表明该方法是一个静态方法， 17 | // 可以直接在Foo类上调用（Foo.classMethod()），而不是在Foo类的实例上调用。 18 | // 如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法 19 | // 注意，如果静态方法包含this关键字，这个this指的是类，而不是实例。 20 | 21 | class Foo { 22 | static bar () { 23 | this.baz(); 24 | } 25 | static baz () { 26 | console.log('hello'); 27 | } 28 | baz () { 29 | console.log('world'); 30 | } 31 | } 32 | Foo.bar(); // hello 33 | // 上面代码中，静态方法bar调用了this.baz，这里的this指的是Foo类， 34 | // 而不是Foo的实例，等同于调用Foo.baz。 35 | // 另外，从这个例子还可以看出，静态方法可以与非静态方法重名。 36 | 37 | 38 | //思考下边的例子 39 | class Foo { 40 | static baz () { 41 | console.log('hello'); 42 | } 43 | baz () { 44 | console.log('world'); 45 | Foo.baz();// 46 | } 47 | static fun1(o){ 48 | // this.fun2();//报错 49 | o.fun2(); 50 | } 51 | fun2(){ 52 | console.log("fun2") 53 | } 54 | } 55 | var a = new Foo(); 56 | a.baz();//world hello 57 | 58 | Foo.fun1(a);//fun2 59 | 60 | -------------------------------------------------------------------------------- /lessons/LS32/js/demo05.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qile on 2017/8/14. 3 | */ 4 | //静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。 5 | class Foo { 6 | } 7 | Foo.prop = 1; 8 | Foo.prop // 1 9 | //上面的写法为Foo类定义了一个静态属性prop。 10 | //目前，只有这种写法可行，因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。 11 | 12 | /* 13 | // 以下两种写法都无效 14 | class Foo { 15 | // 写法一 16 | prop: 2 17 | 18 | // 写法二 19 | static prop: 2 20 | } 21 | 22 | Foo.prop // undefined 23 | */ 24 | 25 | //目前有一个静态属性的提案，对实例属性和静态属性都规定了新的写法 26 | class MyClass { 27 | static myStaticProp = 42; 28 | constructor() { 29 | console.log(MyClass.myStaticProp); // 42 30 | } 31 | } 32 | // 同样的，这个新写法大大方便了静态属性的表达，ES6暂不支持 33 | // 老写法 34 | class Foo { 35 | // ... 36 | } 37 | Foo.prop = 1; 38 | 39 | // 新提案的写法 ES6暂不支持 40 | class Foo { 41 | static prop = 1; 42 | } 43 | // 上面代码中，老写法的静态属性定义在类的外部。整个类生成以后，再生成静态属性。 44 | // 这样让人很容易忽略这个静态属性，也不符合相关代码应该放在一起的代码组织原则。 45 | // 另外，新写法是显式声明（declarative），而不是赋值处理，语义更好 -------------------------------------------------------------------------------- /lessons/LS33/demo04.js: -------------------------------------------------------------------------------- 1 | 2 | //Promise静态方法 Promise.resolve 3 | 4 | //Promise.resolve参数3种情况 5 | //Promise.resolve(value); //返回的Promise对象状态为fulfilled(例外：错误对象)，并且将该value传递给对应的then方法 6 | //Promise.resolve(promise); //直接返回这个Promise对象 7 | //Promise.resolve(thenable); //返回的Promise对象的最终状态由then方法执行决定 8 | 9 | // 10 | Promise.resolve("Success").then(function (value) { 11 | console.log(value); // "Success" 12 | }, function (value) {}); 13 | 14 | var promise1 = Promise.resolve([1, 2, 3]); 15 | promise1.then(function (value) { 16 | console.log(value); 17 | }); 18 | 19 | // 20 | Promise.resolve(new Promise((resolve,reject)=>{ 21 | setTimeout(reject,2000,"bbb"); 22 | })).then( 23 | (val)=>{console.log("val:",val)}, 24 | (err)=>{console.log("err:",err)} 25 | ) 26 | 27 | // 28 | var original = Promise.resolve('xxxxx'); 29 | var cast = Promise.resolve(original); 30 | cast.then(function (value) { 31 | console.log('value: ' + value); 32 | }); 33 | console.log('original === cast ? ' + (original === cast)); 34 | 35 | 36 | ////Promise静态方法 Promise.reject 37 | //Promise.reject() 38 | var p = Promise.reject("reject reason"); 39 | p.then( 40 | (v)=>{console.log("v:",v)}, 41 | (e)=>{console.log("e:",e)} 42 | ) 43 | 44 | -------------------------------------------------------------------------------- /lessons/LS33/demo05.js: -------------------------------------------------------------------------------- 1 | //Promise静态方法 Promise.all 2 | const p1 = new Promise((resolve, reject) => { 3 | resolve('hello'); 4 | }).then(result => result); 5 | 6 | const p2 = new Promise((resolve, reject) => { 7 | resolve('world');//若都是resolve，则返回所有Promise对象成功时的传值 8 | //reject("error!");//若有reject，则返回reject传的值 9 | }).then(result => result); 10 | 11 | Promise.all([p1, p2]) //数组里若不是Promise对象的话，会调用resolve转成Promise对象 12 | .then(result => console.log("xx",result)) 13 | .catch(e => console.log("yy",e)); 14 | 15 | //Promise静态方法 Promise.race 16 | var p1 = new Promise((resolve,reject)=>{setTimeout(resolve,Math.random()*5000,"aaa")}); 17 | var p2 = new Promise((resolve,reject)=>{setTimeout(reject,Math.random()*5000,"bbb")}); 18 | var p3 = Promise.race([p1,p2]).then( 19 | (val)=>{console.log("val:",val)}, 20 | (err)=>{console.log("err:",err)} 21 | ); 22 | 23 | -------------------------------------------------------------------------------- /lessons/LS33/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 待补充 6 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lessons/LS34/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 待补充 6 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /materials/outline.doc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/outline.doc -------------------------------------------------------------------------------- /materials/schedule.doc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/schedule.doc -------------------------------------------------------------------------------- /materials/slides/ch01.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch01.pptx -------------------------------------------------------------------------------- /materials/slides/ch02.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch02.pptx -------------------------------------------------------------------------------- /materials/slides/ch03.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch03.pptx -------------------------------------------------------------------------------- /materials/slides/ch04.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch04.pptx -------------------------------------------------------------------------------- /materials/slides/ch05.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch05.pptx -------------------------------------------------------------------------------- /materials/slides/ch06.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch06.pptx -------------------------------------------------------------------------------- /materials/slides/ch07.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch07.pptx -------------------------------------------------------------------------------- /materials/slides/ch08.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch08.pptx -------------------------------------------------------------------------------- /materials/slides/ch09.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch09.pptx -------------------------------------------------------------------------------- /materials/slides/ch10.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch10.pptx -------------------------------------------------------------------------------- /materials/slides/ch11.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch11.pptx -------------------------------------------------------------------------------- /materials/slides/ch12.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch12.pptx -------------------------------------------------------------------------------- /materials/slides/ch13.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch13.pptx -------------------------------------------------------------------------------- /materials/slides/ch14.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch14.pptx -------------------------------------------------------------------------------- /materials/slides/ch15.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch15.pptx -------------------------------------------------------------------------------- /materials/slides/ch16.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch16.pptx -------------------------------------------------------------------------------- /materials/slides/ch17.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch17.pptx -------------------------------------------------------------------------------- /materials/slides/ch18.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch18.pptx -------------------------------------------------------------------------------- /materials/slides/ch19.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch19.pptx -------------------------------------------------------------------------------- /materials/slides/ch20.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch20.pptx -------------------------------------------------------------------------------- /materials/slides/ch21.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch21.pptx -------------------------------------------------------------------------------- /materials/slides/ch22.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch22.pptx -------------------------------------------------------------------------------- /materials/slides/ch23.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch23.pptx -------------------------------------------------------------------------------- /materials/slides/ch24.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch24.pptx -------------------------------------------------------------------------------- /materials/slides/ch25.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch25.pptx -------------------------------------------------------------------------------- /materials/slides/ch26.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch26.pptx -------------------------------------------------------------------------------- /materials/slides/ch27.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch27.pptx -------------------------------------------------------------------------------- /materials/slides/ch28.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch28.pptx -------------------------------------------------------------------------------- /materials/slides/ch29.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch29.pptx -------------------------------------------------------------------------------- /materials/slides/ch30.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch30.pptx -------------------------------------------------------------------------------- /materials/slides/ch31.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch31.pptx -------------------------------------------------------------------------------- /materials/slides/ch32.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch32.pptx -------------------------------------------------------------------------------- /materials/slides/ch33.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch33.pptx -------------------------------------------------------------------------------- /materials/slides/ch34.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/ch34.pptx -------------------------------------------------------------------------------- /materials/slides/cha34.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/edu2act/course-javascript-advanced/2787c7abb468f6fdaf2aea267122570e146d339e/materials/slides/cha34.pptx -------------------------------------------------------------------------------- /tasks/1.JS 数据结构与算法/1-1.数组/数组任务1.js: -------------------------------------------------------------------------------- 1 | /////任务一///// 2 | // 请实现find_data_index_from_array函数，该函数的需求如下: 3 | // 在数组data_array中查找一个元素（data），找到后返回它的index(也就是他是数组中的第几个数据）。 4 | // 如果该元素不存在于数组中，则返回-1 5 | 6 | function find_data_index_from_array( data_array, data ) 7 | { 8 | //在这里写入代码 9 | var index; 10 | for(var i=0;i data) 33 | { 34 | binary_tree_node.left = this._insert_data_to_tree(binary_tree_node.left, data);//递归调用 35 | } 36 | return binary_tree_node; 37 | }; 38 | 39 | //测试代码如下 40 | var bt = new BinaryTree(); 41 | bt.insert_data_to_tree(5); 42 | bt.insert_data_to_tree(8); 43 | bt.insert_data_to_tree(3); 44 | bt.insert_data_to_tree(2); 45 | bt.insert_data_to_tree(4); 46 | bt.insert_data_to_tree(7); 47 | bt.insert_data_to_tree(6); 48 | bt.insert_data_to_tree(9); 49 | console.log(bt); 50 | 51 | 52 | -------------------------------------------------------------------------------- /tasks/1.JS 数据结构与算法/1-3.二叉树/二叉树任务3.js: -------------------------------------------------------------------------------- 1 | /////任务三///// 2 | // 本节通过上一节学习的向二叉树中插入数据来创建一棵二叉树。将一个数组传入到函数中， 3 | // 然后按照数组index的顺序不断插入根节点来完成二叉树的创建。 4 | // 请在create_tree_from_array中添加创建二叉树的代码，函数的参数是要生成二叉树的数组，函数返回二叉树对象。 5 | 6 | function BinaryTreeNode(data, left, right) 7 | { 8 | this.data = data; 9 | this.left = left; 10 | this.right = right; 11 | return this; 12 | } 13 | function BinaryTree() 14 | { 15 | this.root = null; 16 | } 17 | BinaryTree.create_tree_from_array = function(data) 18 | { 19 | var binary_tree = new BinaryTree(); 20 | //在这里写入代码 21 | for(var i=0;i data) 38 | { 39 | binary_tree_node.left = this._insert_data_to_tree(binary_tree_node.left, data);//递归调用 40 | } 41 | return binary_tree_node; 42 | }; 43 | //测试代码 44 | var bt = BinaryTree.create_tree_from_array([5,8,3,2,4,7,6,9]); 45 | console.log(bt); -------------------------------------------------------------------------------- /tasks/1.JS 数据结构与算法/1-4.哈希表/哈希表任务1.js: -------------------------------------------------------------------------------- 1 | /////任务一///// 2 | // 本课学习的是哈希表的一种，他是由数组组成，每个数组元素指向一个用于存储数组。 3 | // 请在create_hash_table中添加代码，函数的参数为哈希表，函数返回哈希表对象。 4 | function HashTable() { 5 | this.table = null; 6 | } 7 | 8 | HashTable.create_hash_table = function(hash_size) 9 | { 10 | //在这里写入代码 11 | var ht = new HashTable(); 12 | ht.table = new Array(hash_size); 13 | for(var i=0;i= 0 && temp < this.desc_sort[j]){ 25 | this.desc_sort[j+1] = this.desc_sort[j]; 26 | j--; 27 | } 28 | this.desc_sort[j+1] = temp; 29 | } 30 | return this; 31 | }; 32 | //测试代码 33 | var arrSort = new ArraySort([7,5,3,4,1,9,2,6,8]); 34 | // var arrSort = new ArraySort("753419268"); 35 | console.log(arrSort.desc_sort); 36 | arrSort.insert_sort(); 37 | console.log(arrSort.desc_sort); -------------------------------------------------------------------------------- /tasks/1.JS 数据结构与算法/1-5.排序/排序任务2.js: -------------------------------------------------------------------------------- 1 | /////任务二///// 2 | // 本课学习冒泡排序，他的工作原理如下： 3 | // 它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。 4 | // 走访数列的工作是重复地进行直到没有再需要交换后完成排序。 5 | // 在bubble_sort中添加代码，函数返回排序对象，排序结果存放在desc_sort中， 6 | // 按照升序（从小到大）排序。 7 | function ArraySort(data) 8 | { 9 | this.desc_sort = data.concat(); 10 | return this; 11 | } 12 | ArraySort.prototype.bubble_sort = function () 13 | { 14 | for(var i = 0 ; i= 1) { 25 | this._sort_gap_length(this.desc_sort,gap); 26 | gap = (gap-1)/3; 27 | } 28 | return this; 29 | }; 30 | ArraySort.prototype._sort_gap_length = function(sort_data,gap) 31 | { 32 | for (var i = gap; i < this.desc_sort.length; i++) { 33 | for (var j = i; j >= gap && this.desc_sort[j] < this.desc_sort[j-gap]; 34 | j -= gap) { 35 | this._swap_data(sort_data, j, j-gap); 36 | } 37 | } 38 | }; 39 | ArraySort.prototype._swap_data = function (swap_data,i,j) { 40 | var temp = swap_data[i]; 41 | swap_data[i] = swap_data[j]; 42 | swap_data[j] = temp; 43 | }; 44 | //测试代码 45 | var arrSort = new ArraySort([7,5,3,4,1,9,2,6,8]); 46 | // var arrSort = new ArraySort("753419268"); 47 | console.log(arrSort.desc_sort); 48 | arrSort.shell_sort(); 49 | console.log(arrSort.desc_sort); -------------------------------------------------------------------------------- /tasks/1.JS 数据结构与算法/1-5.排序/排序任务5.js: -------------------------------------------------------------------------------- 1 | /////任务五///// 2 | // 本课学习快速排序，快速排序使用分治法策略来把一个串行分为两个子串行，工作原理如下： 3 | // 1.从数列中挑出一个元素，称为 "基准"， 4 | // 2.重新排序数列，所有元素比基准值小的摆放在基准前面，所有元素比基准值大的摆在基准的后面（相同的数可以到任一边）。 5 | // 在这个分区退出之后，该基准就处于数列的中间位置。这个称为分区（partition）操作。 6 | // 3.递归地把小于基准值元素的子数列和大于基准值元素的子数列排序。 7 | // 在quick_sort中添加代码，函数返回排序对象，排序结果存放在desc_sort中，按照升序（从小到大）排序。 8 | function ArraySort(data) 9 | { 10 | this.desc_sort = data.concat(); 11 | return this; 12 | } 13 | ArraySort.prototype.quick_sort = function() 14 | { 15 | this.desc_sort = this._quick_sort(this.desc_sort); 16 | return this; 17 | }; 18 | ArraySort.prototype._quick_sort = function(sort_data) 19 | { 20 | if (sort_data.length == 0) return []; 21 | var left_data = [], right_data = []; 22 | var start_data = sort_data[0]; 23 | 24 | for (var i = 1; i < sort_data.length; i++) { 25 | if (sort_data[i] < start_data) { 26 | left_data.push(sort_data[i]); 27 | } 28 | else { 29 | right_data.push(sort_data[i]); 30 | } 31 | } 32 | return this._quick_sort(left_data).concat(start_data,this._quick_sort(right_data)); 33 | }; 34 | //测试代码 35 | var arrSort = new ArraySort([7,5,3,4,1,9,2,6,8]); 36 | // var arrSort = new ArraySort("753419268"); 37 | console.log(arrSort.desc_sort); 38 | arrSort.quick_sort(); 39 | console.log(arrSort.desc_sort); 40 | -------------------------------------------------------------------------------- /tasks/2.JS SICP训练营/2-1.过程与运算/过程与运算任务1.js: -------------------------------------------------------------------------------- 1 | //任务一 2 | // 在factorial函数中填入代码，实现n的的阶乘。 所谓n的阶乘就是，1 X 2 X 3 .... X ( n -1 ) X n 3 | // 4 | // 举例来说 5 | // 1的阶乘是 1 6 | // 2的阶乘是 1 X 2 = 2 7 | // 3的阶乘是 1 X 2 X 3 = 6 8 | function factorial(n){ 9 | var result = n; 10 | for(var i=n-1;i>0;i--){ 11 | result*=i 12 | } 13 | return result; 14 | } 15 | //思考0的阶乘是多少，上述代码是否还正确？如何修改？ 16 | 17 | var factorial = function(n){ 18 | if (n <= 0) 19 | return 1; 20 | else 21 | return n * func(n - 1); 22 | //return n * arguments.callee(n - 1); 23 | }; 24 | console.log(factorial(4)); 25 | 26 | //优点，可以是匿名函数 27 | (function(n){ 28 | if (n <= 0) 29 | return 1; 30 | else 31 | return n * arguments.callee(n - 1); 32 | }(4)); -------------------------------------------------------------------------------- /tasks/2.JS SICP训练营/2-1.过程与运算/过程与运算任务3.js: -------------------------------------------------------------------------------- 1 | //任务三// 2 | // 假定有1美分,5美分,10美分,25美分,50美分的零钱无限多，试把任意钱换成零钱， 3 | // 写一个函数计算有多少种换法。 4 | // 请将代码写在count_change函数里，返回有多少种换算方法。 5 | // 该函数有一个参数，传入的是一个数字，单位是美分，比如，1美元，传入的是100美分。 6 | 7 | function count_change(amount,n){ 8 | var m = n || 5; 9 | if(amount === 0) return 1; 10 | if(amount < 0 || n === 0) return 0; 11 | return count_change(amount, m - 1) + count_change(amount - value_of_currency(m), m); 12 | } 13 | 14 | function value_of_currency(n){ 15 | if (n === 1) return 1; 16 | if (n === 2) return 5; 17 | if (n === 3) return 10; 18 | if (n === 4) return 25; 19 | if (n === 5) return 50; 20 | } 21 | count_change(123); 22 | -------------------------------------------------------------------------------- /tasks/2.JS SICP训练营/2-1.过程与运算/过程与运算任务4.js: -------------------------------------------------------------------------------- 1 | // 任务四 2 | // 写一个f函数,满足下面的需求: 3 | // 如果 n < 3，那么f(n) = n 4 | // 如果 n >= 3, 那么 f(n) = f(n-1)+2f(n-2)+3f(n-3) 5 | 6 | //使用断点调试测试下述代码 7 | function f(n){ 8 | if(n<3){ 9 | return n; 10 | }else{ 11 | return f(n-1)+2*f(n-2)+3*f(n-3); 12 | } 13 | } -------------------------------------------------------------------------------- /tasks/2.JS SICP训练营/2-1.过程与运算/过程与运算任务6.js: -------------------------------------------------------------------------------- 1 | //任务5// 2 | // 实现gcd函数，用欧几里得法求两个参数的最大公约数 这一算法基于下面的观察， 3 | // 如果r是a和b的余数，那么a和b的公约数正好也是b和r的公约数，因此我们可以借助等式 4 | // gcd(a,b) = gcd(b,r) 5 | // 把一个gcd的计算问题连续的归约到越来越小的整数对的gcd的计算问题。例如 6 | // gdc(206,40) = gcd(40,6)= gcd(6,4) = gcd(4,2) = gcd(2,0) = 2 7 | // 可以证明，从任意两个正整数开始，反复执行这种归约，最终会产生一对数，其中的第二个是0， 8 | // 此时最大公约数就是另一个数。 9 | // 这个算法被称为欧几里得算法 10 | 11 | function gcd(num1, num2){ 12 | if(num2 === 0) return num1; 13 | return gcd(num2,num1%num2); 14 | } -------------------------------------------------------------------------------- /tasks/3.JS 初级挑战杯/3-1.趣味算法/趣味算法任务1.js: -------------------------------------------------------------------------------- 1 | //任务一// 2 | // 本节我们通过著名的"百钱百鸡"问题学习用js写算法 3 | // 一只公鸡值五钱，一只母鸡值三钱，三只小鸡值一钱，现在要用一百钱买一百只鸡，请问公鸡、母鸡、小鸡各多少只？ 4 | // 声明一个数组变量arr_result，统计所有的满足条件的方案，并将这些方案以对象的形式存到变量arr_result中，数组中对象的格式如下： 5 | // 6 | // {cock:10,hen:10,chicken:10} 7 | // //cock、hen、chicken分别为公鸡、母鸡、小鸡，表示对象的三个键 8 | // //键对应的数值，分别为不同种类鸡的个数 9 | // 根据以上描述完成函数hundred_hundred_chickens() 10 | 11 | /* 12 | //C 语言实现 13 | #include 14 | void main() 15 | { 16 | int a,b,c; 17 | for(a=0;a<20;a++) //公鸡可能的只数 18 | for(b=0;b<(100-5*a)/3;b++) //母鸡可能的只数 19 | { c=100-a-b; //总数为100时，小鸡的只数 20 | if(c%3==0 && a*5+b*3+c/3==100) //若小鸡只数是3的倍数，且总价为100 21 | printf("a=%d\tb=%d\tc=%d\n",a,b,c); 22 | } 23 | getch(); 24 | return 0; 25 | } 26 | */ 27 | function hundred_hundred_chickens() 28 | { 29 | var arr_result = []; 30 | for(var a=0;a<20;a++){//公鸡可能的只数 31 | for(var b=0;b<(100-5*a)/3;b++)//母鸡可能的只数 32 | { 33 | var c=100-a-b;//总数为100时，小鸡的只数 34 | if(c%3==0 && a*5+b*3+c/3==100){//若小鸡只数是3的倍数，且总价为100 35 | //console.log(a,b,c); 36 | arr_result.push({cock:a,hen:b,chicken:c}); 37 | } 38 | } 39 | } 40 | return arr_result; 41 | } 42 | hundred_hundred_chickens(); -------------------------------------------------------------------------------- /tasks/3.JS 初级挑战杯/3-1.趣味算法/趣味算法任务2.js: -------------------------------------------------------------------------------- 1 | //任务二// 2 | // 本节写一个算法，题目是：借书方案知多少 3 | // 问题描述：小明有5本新书，要借给A、B、C这三位学生， 4 | // 若每人每次只能借一本（不允许任何两个人同时借一本书），则可以有多少种不同的借法？ 5 | // 声明数组变量arr_result，统计所有满足条件的借法， 6 | // 将这些借法以对象的形式存到变量arr_result中，数组中对象的格式如下： 7 | // {A:1,B:2,C:3} 8 | // //A、B、C分别为A、B、C三位同学，表示对象的三个键 9 | // //键对应的数值，分别为这三个同学借得第几本书（值为：1-5） 10 | // 根据以上描述完成函数borrow_books_schema() 11 | 12 | function borrow_books_schema() 13 | { 14 | var arr_result = []; 15 | let a,b,c; 16 | let count = 0; 17 | for(a = 1;a <= 5;a++) //a，b，c，分别从一号书借到五号书 18 | { 19 | for(b = 1;b <= 5;b++) 20 | { 21 | for(c = 1;c <= 5;c++) 22 | { 23 | if(0 != (a - b) * (b - c) * (c - a)) 24 | { 25 | count++; 26 | arr_result.push({A:a,B:b,C:c}) 27 | } 28 | } 29 | } 30 | } 31 | return arr_result; 32 | } -------------------------------------------------------------------------------- /tasks/3.JS 初级挑战杯/3-1.趣味算法/趣味算法任务4.js: -------------------------------------------------------------------------------- 1 | //任务四// 2 | // 本节完成"抓交通肇事犯"的算法 3 | // 一辆卡车违反交通规则，撞人后逃跑。现场有三个人目击该事件，但是都没记住车牌号，只是记下车牌号的一些特征 4 | // 甲说：牌照的前两位数字是相同的；乙说：牌照的后两位数字是相同的，但是与前两位不同；丙是数学家，他说：四位数的车号刚好是一个整数的平方 5 | // 声明一个变量car_number，根据以上三个目击者的描述，计算出肇事车牌号，赋值给变量car_number 6 | // 根据以上描述完成函数catch_traffic_accidents_make()，函数的返回值为变量car_number 7 | 8 | function catch_traffic_accidents_make() 9 | { 10 | var car_number; 11 | var i,j,k,c; 12 | for(i=1;i<=9;i++) //i:车号前二位的取值 13 | for(j=0;j<=9;j++) //j:车号后二位的取值 14 | if(i!=j) //判断二位数字是否相异 15 | { 16 | k=i*1000+i*100+j*10+j; //计算出可能的整数 17 | //console.log(k); 18 | for(c=31;c<100;c++){ //判断该数是否为另一整数的平方 19 | if(c*c==k){ 20 | car_number = k; 21 | } 22 | } 23 | } 24 | return car_number; 25 | } 26 | catch_traffic_accidents_make(); -------------------------------------------------------------------------------- /tasks/3.JS 初级挑战杯/3-1.趣味算法/趣味算法任务5.js: -------------------------------------------------------------------------------- 1 | //任务五// 2 | // 用js完成"兔子产子问题"，计算每个月兔子的总个数 3 | // 有一对兔子，从出生后的第3个月起每个月都生一对兔子。 4 | // 小兔子长到第3个月后每个月又生一对兔子，假设所有的兔子都不死， 5 | // 问30个月内每个月的兔子总数分别为多少？ 6 | // 声明数组变量arr_rabbit_count，根据上面的描述， 7 | // 计算出这30个月内，每个月兔子的总个数，并把它保存到数组变量arr_rabbit_count中 8 | // 数组arr_rabbit_count中第一个元素对应的是第一个月兔子的数量 第n个元素对应着第n个月兔子的数量 9 | // 根据以上描述完成函数number_of_rabbit_child()，返回值为数组arr_rabbit_count 10 | 11 | //完成下述代码 12 | function number_of_rabbit_child() 13 | { 14 | //var arr_rabbit_count = [1,1]; 15 | 16 | var rabbitNum = 1; 17 | function getRabbitLiveMoth(){ 18 | 19 | } 20 | 21 | for(var month=2;month<30;month++ ){ 22 | if(month > 0 && month < 3){ 23 | //arr_rabbit_count.push(1); 24 | return rabbitNum; 25 | } else { 26 | return getRabbitNum(month - 1) + getRabbitNum(month - 2); 27 | } 28 | } 29 | //return arr_rabbit_count; 30 | } 31 | 32 | /* 33 | public int getRabbitNum(int month) { 34 | int rabbitNum = 1; 35 | if(month > 0 && month < 3){ 36 | return rabbitNum; 37 | } else { 38 | return getRabbitNum(month - 1) + getRabbitNum(month - 2); 39 | } 40 | } 41 | */ -------------------------------------------------------------------------------- /tasks/3.JS 初级挑战杯/3-1.趣味算法/趣味算法任务6.js: -------------------------------------------------------------------------------- 1 | //任务六// 2 | // 本节练习用js完成"牛顿迭代法求方程根"的算法 3 | // 编写用牛顿迭代法求方程根的函数。方程为 a*x*x*x+b*x*x+c*x+d=0， 4 | // 系数为a，b，c，d，这四个系数为函数的参数。求x在1附近的一个实根。 5 | // 函数f(x)=a*x*x*x+b*x*x+c*x+d，f(x)的导数为f'(x)，f'(x)=3*a*x*x+2*b*x+c 6 | // 牛顿迭代法的公式是：x = x0 - f(x0)/f'(x0)，设定迭代到|x-x0|<=0.00001时结束 7 | // 根据以上描述完成函数roots_newton_solve_equation(a,b,c,d)， 8 | // 参数为：方程式的系数，返回值为：方程式的根 9 | 10 | function roots_newton_solve_equation(a,b,c,d) 11 | { 12 | let x1=1,x,f,f1; 13 | //迭代 14 | do 15 | { x=x1; 16 | f=((a*x+b)*x+c)*x+d;//原函数 17 | f1=(3*a*x+2*b)*x+c;//求导之后的函数 18 | x1=x-f/f1; 19 | } while(Math.abs(x1-x)>=0.00000001); 20 | return x1; 21 | } 22 | 23 | /* 24 | describe('practice-1-6', function () { 25 | it("根据牛顿迭代法求方程的根", function () { 26 | var root_x1 = roots_newton_solve_equation(2,-4,3,-6); 27 | console.info('root_x1:'+root_x1); 28 | expect(root_x1.toFixed(2)).toBe("2.00"); 29 | 30 | var root_x2 = roots_newton_solve_equation(4,-2,3,-8); 31 | console.info('root_x2'+root_x2); 32 | expect(root_x2.toFixed(2)).toBe("1.22"); 33 | 34 | var root_x3 = roots_newton_solve_equation(2,-5,3,-3); 35 | console.info('root_x3'+root_x3); 36 | expect(root_x3.toFixed(2)).toBe("2.13"); 37 | }); 38 | }); 39 | */ 40 | -------------------------------------------------------------------------------- /tasks/3.JS 初级挑战杯/3-1.趣味算法/趣味算法任务7.js: -------------------------------------------------------------------------------- 1 | //任务七// 2 | // 本节练习完成"最佳存款方案"的算法 3 | // 假设银行整存零取的月息为0.63%。现在某人手中有一笔钱， 4 | // 他打算在今后的5年中的每年年底取出1000元，到第5年时刚好取完，请算出他存钱时应存入多少？ 5 | // 由上面描述可以得到如下结果： 6 | // 7 | // 第5年年初的存款 = 1000/(1 + 12*0.0063) 8 | // 完成函数best_deposit_scheme()，函数返回值为：存入的钱 9 | function best_deposit_scheme() 10 | { 11 | let i; 12 | let money = 0.0; 13 | for(i = 0; i < 5; i++) 14 | { 15 | money = (money + 1000) / (1 + 12 * 0.0063); 16 | } 17 | //console.log("%0.2f \n",money); 18 | return money; 19 | } 20 | 21 | 22 | // (function main() 23 | // { 24 | // let i; 25 | // let money = 0.0; 26 | // for(i = 0; i < 5; i++) 27 | // { 28 | // money = (money + 1000) / (1 + 12 * 0.0063); 29 | // } 30 | // console.log("%0.2f \n",money); 31 | // return 0; 32 | // }()); -------------------------------------------------------------------------------- /tasks/3.JS 初级挑战杯/3-1.趣味算法/趣味算法任务8.js: -------------------------------------------------------------------------------- 1 | // 任务八// 2 | function bubble_sort(arr_number) 3 | { 4 | for(var i = 0 ; i