JavaScript学习笔记-Underscore Arrays
Array FunctionsNote: All array functions will also work on the arguments object. However, Underscore functions are not designed to work on “sparse” arrays.
first _.first(array, [n]) Aliases: head, takeReturns the first element of an array. Passing n will return the first n elements of the array.
_.first([5, 4, 3, 2, 1]);=> 5
initial_.initial(array, [n])Returns everything but the last entry of the array. Especially useful on the arguments object. Pass n to exclude the last n elements from the ...
JavaScript学习笔记-Underscore Collections
Installation
Node.js npm install underscore
Meteor.js meteor add underscore
Require.js require(["underscore"], ...
Bower bower install underscore
Component component install jashkenas/underscore
collections 工具map/filter和Array的map()与filter()类似，但是underscore的map()和filter()可以作用于Object。当作用于Object时，传入的函数为function (value, key)，第一个参数接收value，第二个参数接收key：
var obj = { name: 'bob', school: 'No.1 middle school', address: 'xueyuan road'};var ...
JavaScript学习笔记-jQuery Selector
jQuery selector选择器是jQuery的核心。一个选择器写出来类似$(‘#dom-id’)。
对于原生JS，选择器：
// 按ID查找：var a = document.getElementById('dom-id');// 按tag查找：var divs = document.getElementsByTagName('div');// 查找<p class="red">：var ps = document.getElementsByTagName('p');// 过滤出class="red":// TODO:// 查找<table class="green">里面的所有<tr>：var table = ...for (var i=0; i<table.children; i++) { // TODO: 过滤出<tr>}
jQuery 的选择器就是帮助我们快速定位到一个或多 ...
JavaScript学习笔记-jQuery Descendant Selector
层级选择器 Descendant Selector 如果两个DOM元素具有层级关系，就可以用 $('ancestor descendant') 来选择，层级之间用空格隔开。
<!-- HTML结构 --><div class="testing"> <ul class="lang"> <li class="lang-javascript">JavaScript</li> <li class="lang-python">Python</li> <li class="lang-lua">Lua</li> </ul></div>
$('ul.lang li.lang-javascript'); // [<li class="lang-javascript&quo ...
JavaScript学习笔记-jQuery
使用jQuery在<script> 标签内引用src 属性
<!doctype html><html><head> <meta charset='utf-8'></meta> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script></head> <body> <button type='button' onclick="alert('jQuery版本：' + $.fn.jquery)">获取版本号 </button> </body></html>
$ 符号 jQuery 把所有功能全部封装在一个全局变量 jQuery 中，而 $ 也是一个合法的变量名，它是变量 jQuery 的别名：
window.jQuery; // jQuery(sel ...
JavaScript学习笔记-删除DOM元素
删除一个DOM节点就比插入要容易得多。要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：
/ 拿到待删除节点:var self = document.getElementById('to-be-removed');// 拿到父节点:var parent = self.parentElement;// 删除:var removed = parent.removeChild(self);removed === self; // true
当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新
试验：
<!-- HTML结构 --><ul id="test-list"> <li>JavaScript</li> <li>Swift</li> <li>HTML</li> <li>ANSI C&l ...
JavaScript学习笔记-添加DOM元素
appenChild
insertBefore parentElement.insertBefore(newElement, referenceElement);
createElement
setAttribute
试验：
<!Doctype><html><head><meta charset="utf-8"></meta><title>js test</title><script>function change(id,is){ var js=document.getElementById(id); var ls=document.getElementById(is); ls.appendChild(js)}function append(){ var list=document.getElementById("list"); var haskell=document.createElement(' ...
JavaScript学习笔记-更改DOM元素
更新DOM修改节点的文本，方法有两种：
修改innerHTML属性这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：
// 获取<p id="p-id">...</p>var p = document.getElementById('p-id');// 设置文本为abc:p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>// 设置HTML:p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';// <p>...</p>的内部结构已修改
修改innerText或textContent属性这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：// 获取<p id="p-id&qu ...
JavaScript学习笔记-操作DOM
DOM 节点选择document.getElementById()document.getElementsByTagName()document.getElementsByClassName()
由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。
// 返回ID为'test'的节点：var test = document.getElementById('test');// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：var trs = document.getElementById('test-table').getElementsByTagName('tr');// ...
JavaScript学习笔记- window对象
windowsget the inner size of browser:windows.innerWidthwindows.innerHeight
get the global size of browser:windows.outerWidthwindows.outerHeight
navigatorget information of browsernavigator.appName:浏览器名称；navigator.appVersion:浏览器版本；navigator.language:浏览器设置的语言；navigator.platform:操作系统类型；navigator.userAgent:浏览器设定的User-Agent字符串。
screenuse screen to get screen information:screen.width:screen.height:screen.colorDepth:
locationfor a url=http://www.example.com:8080/path/index.html?a=1&b=2#TOP
l ...
JavaScript学习笔记-Class(ES6)
之前的原型继承关系可以看出，JS在实现继承时还是很麻烦的，需要大量代码。但是，class出现了。
classclass从ES6开始正式被引入到JavaScript中,目的就是让定义类更简单。
先前的类方法：
function Student(name){ this.name=name;}Student.prototype.hello= function(){ alert("Hello, "+this.name); }
用class 构建：
class Student{ constructor(name){ this.name=name; } hello(){ alert('Hello, '+this.name); }}
实例化：
var xiaoming = new Student('小明');xiaoming.hello();
class继承利用class继承非常方便，直接通过 extends 来实现：
class ...
JavaScript学习笔记-Inherits
原型继承c++,python,java继承的本质是扩展一个已有的Class，并生成新的Subclass。JavaScript由于采用原型继承，我们无法直接扩展一个Class，因为根本不存在Class这种类型。
JavaScript 的原型继承实现方式：
定义新的构造函数，并在内部用 call() 调用希望“继承”的构造函数，并绑定 this ；
借助中间函数 F 实现原型链继承，最好通过封装的 inherits 函数完成；
继续在新的构造函数的原型上定义新方法。
inherits 方法构造function inherits(Child,Parent){ var F=function(){}; F.prototype=Parent.prototype; Child.prototype=new F(); Child.prototype.constructor=Child; }//实例function Student(props){ this.name=props.name || 'unnamed'; ...
JavaScript学习笔记-JSON
jsonJSON是JavaScript Object Notation的缩写，它是一种数据交换格式。2002年，雅虎的高级架构师道格拉斯·克罗克福特（Douglas Crockford）发明了JSON这种超轻量级的数据交换格式。
数据类型
number：和JavaScript的 number完全一致；
boolean：就是JavaScript的 true或 false；
string：就是JavaScript的 string；
null：就是JavaScript的 null；
array：就是JavaScript的Array表示方式——[]；
object：就是JavaScript的 { ... }表示方式。
and …
字符集必须是 UTF-8;
JSON 的字符串规定必须用双引号 ""，Object 的键也必须用双引号 ""。
序列化使用JSON.stringify()方法。把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON格式的字符串，这样才能够通过网络传递给其他计算机。
var ...
JavaScript学习笔记-Regular Expression
JS 正则
\d 可以匹配一个数字
\w 可以匹配一个字母或数字
\s 可以匹配一个空格
. 可以匹配任意字符
* 表示任意个字符（包括 0 个）
+ 表示至少一个字符
? 表示 0 个或 1 个字符
{n} 表示 n 个字符
{n,m} 表示 n-m 个字符
[] 表示范围
[0-9a-zA-Z\_] 可以匹配一个数字、字母或者下划线
[0-9a-zA-Z\_]+ 可以匹配至少由一个数字、字母或者下划线组成的字符串，比如’a100’，’0_Z’，’js2015’等等；
[a-zA-Z\_\$][0-9a-zA-Z\_\$]* 可以匹配由字母或下划线、$开头，后接任意个由一个数字、字母或者下划线、$组成的字符串，也就是JavaScript允许的变量名；
[a-zA-Z\_\$][0-9a-zA-Z\_\$]{0, 19} 更精确地限制了变量的长度是1-20个字符（前面1个字符+后面最多19个字符）。
A|B可以匹配A或B，所以(J|j) ...
JavaScript学习笔记-prototype
原型 prototypevar Student={ name:'robort', height:1.2, run:function(){ return console.log(this.name+" is running..."); } } var xm=Object.create(Student); xm.name='xiaoming' xm.name//"xiaoming" xm.run()//"xiaoming is running..." xm.height//1.2 xm.__proto__===Student; //true
构造prototype除了直接用{ … }创建一个对象外，JavaScript还可以用一种构造函数的方法来创建对象。它的用法是，先定义一个构造函数：
function Student(name,age){ this.name=name; this.age=age; this.hello=funct ...
JavaScript学习笔记-变量作用域与解构赋值
变量作用域
如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量;
如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响;
JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行;
JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。
变量提升JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部
'use strict';function foo() { var x = 'Hello, ' + y; alert(x); var y = 'Bob';}foo();
虽然是strict模式，但语句var x = ‘Hello, ‘ + y;并不报错，原因是变量y在稍后申明了。但 ...
JavaScript学习笔记-Function
定义函数方法1function abs(x) { if (x >= 0) { return x; } else { return -x; }}
function指出这是一个函数定义；
abs是函数的名称；
(x)括号内列出函数的参数，多个参数以,分隔；
{ ... }之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。
函数体内部的语句在执行时，一旦执行到return时，函数就执行完毕，并将结果返回。因此，函数内部通过条件判断和循环可以实现非常复杂的逻辑。
如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined。
方法2var abs = function (x) { if (x >= 0) { return x; } else { return -x; }};
和第一种形式等价，末尾要加 ;。在 ...
JavaScript学习笔记-对象的方法
定义给xiaoming绑定一个age()方法:
>var xiaoming={ name:'xiaoming', birth:1990, age: function(){ var y= new Date().getFullYear() // return y-this.birth } }>xiaoming.age//function(){// var y= new Date().getFullYear()// return y-this.birth// }>xiaoming.age() //28
方法内部，this是一个特殊变量，它始终指向当前对象，也就是xiaoming这个变量。所以，this.birth可以拿到xiaoming的birth属性。类似于python class 方法中的 self 参数
看一些例子：
function getAge() { va ...
JavaScript学习笔记-Map&Reduce
高阶函数一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
function add(x, y, f) { return f(x) + f(y);}var x = add(-5, 6, Math.abs); // 11alert(x);//等价于var x = Math.abs(-5)+ Math.abs(6)
map由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果：
var arr=[1,2,3,4,5,6];function f(x){ return x*x};var xx=arr.map(f); //[1, 4, 9, 16, 25, 36]//等价于var f = function (x) { return x * x;};var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];var result = [];for (var i=0; i<a ...
JavaScript学习笔记-Array
基本操作>var arr=[1,2,3,'hjh']1,2,3,"hjh">arr.length4>arr.indexOf(3)2>arr.indexOf('no') //不存在返回-1-1
可以通过索引把对应的元素修改为新的值，因此，对Array的索引进行赋值会直接修改这个Array：
var arr = ['A', 'B', 'C'];arr[1] = 99;arr; // arr现在变为['A', 99, 'C']arr[5] = 'x';arr; // arr变为['A', 99, 'C', undefined, undefined, 'x']
大多数其他编程语言不允许直接改变数组的大小，越界访问索引会报错。然而，JavaScript的Array却不会有任何错误。在编写代码时，不建议直接修改Array的大小，访问 ...
