201709

古人学问无遗力，少壮工夫老始成。 —— 陆游《冬夜读书示子聿》

Do what you say, say what you do.

2017/09/28/周四

泰克新示波器【线下研讨会】准备制作
- 由于之前安装的PS、CC等打开设计稿直接报告无反应，强制关闭，遂在设计师的推荐下，安装最新款2017CC，删除之前所有的PS旧版本，也清除了相关注册表
- 优点：针对 window10 速度快，顺滑，功能强大，界面简洁，舒服；重点：速度快
- 缺点：强大功能的背后，就是性能的消耗；打开一个 130M 大小的设计稿，内存消耗竟可高达 1700M，对于8G内存，着实有些吃不消
- 总结：在不考虑内存的情况下，强烈推荐
HTML5 canvas 属性了解：
- event.clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标
- event.clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标
- fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式
- fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色
- clearRect() 方法清空给定矩形内的指定像素
- strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
- sqrt() 方法可返回一个数的平方根。
- atan() 方法可返回数字的反正切值
HTML5 Particles.js移动节点粒子链
HTML5 Canvas粉尘态粒子引力效应动画特效

2017/09/27/周三

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend事件：当手指从屏幕上离开的时候触发。
touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。
touch 跟踪属性
- touches：表示当前跟踪的触摸操作的touch对象的数组。
- targetTouches：特定于事件目标的Touch对象的数组。
- changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含的属性

属性	属性说明
clientX	触摸目标在视口中的x坐标
clientY	触摸目标在视口中的y坐标
identifier	标识触摸的唯一ID
pageX	触摸目标在页面中的x坐标
pageY	触摸目标在页面中的y坐标
screenX	触摸目标在屏幕中的x坐标
screenY	触摸目标在屏幕中的y坐标
target	触目的DOM节点目标

resize() 方法，当调整浏览器窗口的大小时，发生 resize 事件。resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目
pointer-events: none; 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。其他值只能应用在SVG上
关于CSS的will-change属性的介绍
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用

2017/09/26/周二

整理《JavaScript经典实例》（第2版）
- 专门开设一个项目，在首页增加了学习书籍类

2017/09/24/周日

1.8 使用命名实体来替代HTML标签
- 使用正则表达式把尖括号(<>)转换为命名的实体：<和>

var pieceOfHtml = "<p>This is a <span>paragraph</span></p>";
pieceOfHtml = pieceOfHtml.replace(/</g, "&lt;");
pieceOfHtml = pieceOfHtml.replace(/>/g, "&gt;");
console.log(pieceOfHtml); //&lt;p&gt;This is a &lt;span&gt;paragraph&lt;/span&gt;&lt;/p&gt;

1.9 ISO 8610格式的日期转换为Date对象可接受的一种形式

var dtstr = "2014-3-04T19:35:32Z";
dtstr = dtstr.replace(/\D/g, " ");
console.log(dtstr);  //2014 3 04 19 35 32
var dtcomps = dtstr.split(" ");
//在基于1的ISO 8610月份和基于0的日期格式之间转换
dtcomps[1]--;

var convdt = new Date(Date.UTC.apply(null, dtcomps));
console.log(convdt.toString());  //Wed Mar 05 2014 03:35:32 GMT+0800 (中国标准时间)

1.10 使用带有定时器的函数闭包 *使用一个匿名函数作为setInterval()或setTimeout()方法调用的第一个参数

var intervalId = null;
document.getElementById("redbox").addEventListener('click', startBox, false);
function startBox() {
    if(intervalId == null) {
        var x = 100;
        intervalId = setInterval(function() {
            x += 5;
            var left = x + "px";
            document.getElementById("redbox").style.left = left;
        }, 500);
    } else {
        clearInterval(intervalId);
        intervalId = null;
    }
}

1.11 记录两个事件之间消耗的时间
- 在第一个事件发生的时候，创建一个Date对象，当第二个时间发生的时候，创建一个新的Date对象，并且从第二个对象中减去第一个对象。两者之间的差以毫秒表示的，要转换为秒，就除以1000
- 两个日期可以相减，但是相加就成了拼接字符串

var firstDate = new Date();
setTimeout(function() {
    doEvent(firstDate);
}, 25000);

function doEvent() {
    var secondDate = new Date();
    var diff = secondDate - firstDate;
    console.log(diff);   //25001
}

1.12 十进制数转化为十六进制值
- 使用Number对象的 toString() 方法

var num = 255;
console.log(num.toString(16));  //ff

1.13 想要将表中一列的所有数字加和
- 遍历表中包含了数字值的列，将其转换为数字，并加和
- querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素
- 如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代
- 全局函数 parseInt() 和 parseFloat() 都把字符串转化为数字

var sum = 0;
//使用querySelectorAll找到第二列的所有单元格
var cells = document.querySelectorAll("td:nth-of-type(2)");
for(var i=0, l=cells.length; i<l; i++) {
    sum += parseFloat(cells[i].firstChild.data);
}

2017/09/23/周六

1.6 找到并突出显示一个模式的所有实例
- RegExp exec() 方法用于检索字符串中的正则表达式的匹配
- RegExpObject.exec(string)
- 返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null

var searchString2 = "Now is the time and this is the time and that is the time";
var parttern = /t\w*e/g;  //\w 匹配任何单词字符
var matchArray;

var str = "";

//用regexp exec检查模式，如果不为空，处理它
while((matchArray = parttern.exec(searchString2)) != null) {
	str += "at " + matchArray.index + " we found " + matchArray[0] + "\n";
}
console.log(str);
// at 7 we found the
// at 11 we found time
// at 28 we found the
// at 32 we found time
// at 49 we found the
// at 53 we found time

//实例1-1
document.getElementById("searchSubmit").onclick = function() {

    //获取模式
    var pattern = document.getElementById("pattern").value;
    var re = new RegExp(pattern, "g");
    //获取字符串
    var searchString = document.getElementById("inComing").value;

    var matchArray;
    var resultString = "<pre>";
    var first = 0;
    var last = 0;

    //找到每一个匹配
    while((matchArray = re.exec(searchString)) != null) {
    	last = matchArray.index;

    	//获取所有匹配的字符串，将其连接起来
    	resultString += searchString.substring(first, last);

    	//使用class，添加匹配的字符串
    	resultString += '<span class="found">' + matchArray[0] + '</span>';
    	first = re.lastIndex;
    }

    //完成字符串
    resultString += searchString.substring(first, searchString.length);
    resultString += "</pre>";

    //插入页面
    document.getElementById("searchResult").innerHTML = resultString;

}

1.7 使用捕获圆括号交换一个字符串中的单词
- 交换名称，让姓氏先出现
- 解决：使用捕获圆括号和一个正则表达式在字符串中找到并记住他们的名字，然后互换他们
- replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

字符	替换文本
$1、$2、...、$99	与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
$&	与 regexp 相匹配的子串。
$`	位于匹配子串左侧的文本。
$'	位于匹配子串右侧的文本。
$$	允许替换中有一个字面值美元符号($)
$n	插入使用RegExp的第n次捕获圆括号的值

var myName = "Tao Yang";
var nameRe = /^(\w+)\s(\w+)$/;
var myNewName = myName.replace(nameRe, "$2 $1");
console.log(myNewName);  //Yang Tao

2017/09/21/周四

1.3 检查一个存在的、非空的字符串
- 想要验证一个变量已经定义了，是一个字符串，并且它不为空

if(typeof unknowVariable === 'string' && unknowVariable.length > 0) {...}

1.4 插入特殊字符
- 想要向字符串中插入一个特殊字符，例如一个换行
- 转义序列都以一个反斜杠 开始（\）
1.5 使用新字符串替换模式
- 使用String对象的replace方法和一个 正则表达式
- replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
正则表达式特殊字符

字符	匹配	例子
^	匹配输入的开头	/^This/ 匹配This is...
$	匹配输入的结束	/end$/ 匹配This is the end
*	匹配0次或多次	/se*/ 匹配s seeee或se
?	匹配0次或1次	/ap?/ 匹配apple and and
+	匹配1次或多次	/ap+/ 匹配apple 但是不匹配and
{n}	严格匹配n次	/ap{2}/ 严格匹配apple 但是不匹配apie
{n,}	匹配n次或多次	/ap{2,}/ 匹配apple中的p，但是不匹配apie中的p
{n,m}	至少匹配n次，之多匹配m 除换行以外的任何字符	/ap{2,4}/ 匹配apppppple中的4个p /a.e/ 匹配ape和axe
[...]	方括号中的任何字符	/a[px]e/ 匹配ape axe 但是不匹配apxe
[^...]	除了方括号以外的任何字符	/a[^px]/ 匹配ale 但是不匹配ape axe
\b	匹配单词边界	/\bno/ 匹配nono中的第一个no
\B	匹配非单词边界	/\Bno/ 匹配nono中的第二个no
\d	数字0到9	/\d{3}/ 匹配Now in 123 中的123
\D	匹配任何非数字字符	/\D{2,4}/ 匹配Now in 123 中的Now in
\w	匹配任何单词字符（字母、数组和下划线	/\w/ 匹配javaScript中的j
\W	匹配任何非单词字符（非字母、数组和下划线）	/\W/ 匹配100%中的%
\n	匹配一个换行
\s	一个单个的空白字符
\S	一个单个的非空白字符
\t	一个制表符
(x)	捕获括号	记住匹配的字符

var searchString = "Now is the time, this is the tame";
var re = /t\w{2}e/g;
var replacement = searchString.replace(re, 'place');
console.log(replacement);  //Now is the place, this is the place

2017/09/18/周一

学习《JavaScript经典实例》（第2版）
第1章
1.1 JavaScript对象、基本类型和字面值之间的区别
- 5种基本类型：字符串、数值、布尔值、null、undefined，有3个有对应的构造方法对象:string、Number、Boolean
- 基本类型变量严格等于字面值，而对象实例则不会，因为基本类型是按值来比较的，而值是字面值

var num1 = 123;
var num2 = new Number(123);
console.log(typeof num1);  //number
console.log(typeof num2);  //object

1.2 从字符串提取一个列表
- 提取之前：This is a list of items: cherries, limes, oranges, apples.
- 提取之后：['cherries','limes','oranges','apples']
- indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
- substring() 方法用于提取字符串中介于两个指定下标之间的字符。
- split() 方法用于把一个字符串分割成字符串数组。


var sentence = 'This is one sentence. This is a sentence with a list of items: cherries, oranges, apples, bananas. That was the list of items.';
var start = sentence.indexOf(':');
var end = sentence.indexOf('.', start+1);
var listStr = sentence.substring(start+1, end);
var fruits = listStr.split(',');
console.log(fruits);  //[" cherries", " oranges", " apples", " bananas"]

//取出空格等
fruits.forEach(function(elmnt,indx,arry) {
    arry[indx] = elmnt.trim();
});
console.log(fruits);  //["cherries", "oranges", "apples", "bananas"]

2017/09/11/周一

开始重温学习《JavaScript DOM编程艺术（第2版）》
命名
- 字母、数字、美元符号、下划线
- 变量名多用 下划线 my_val
- 函数名、方法名、对象属性名多用 驼峰法 myFunction()
数据类型 、数组、对象、操作、条件语句、循环语句、函数
节点 --- 每一个节点都是一个对象
- 元素节点--文本节点--属性节点
获取元素
- document.getElementById(id)
- document.getElementsByTagName(tag) 返回一个对象数组
- document.getElementsByClassName(class)

//getElementsByClassName模拟函数
//node (搜索起点)  classname (要搜索的class名称)
function getElementsByClassName(node, classname) {
  if(node.getElementsByClassName) {
    return node.getElementsByClassName(classname);
  } else {
    var results = new Array();
    var tag = node.getElementsByTagName("*");
    for(var i=0,l=tag.length; i<l; i++) {
      if(tag[i].className.indexOf(classname) != -1) {
        results[results.length] = tag[i];
      }
    }
    return results;
  }
}

获取和设置属性
- object.getAttribute(attribute)
- object.setAttribute(attr, value)
DOM 属性
- node.childNodes
- node.nodeType
- node.nodeValue
- node.firstChild == node.childNodes[0]
- node.lastChild == node.childNodes[node.childNodes.length-1]

function showNode(which) {
  var source = which.getAttribute("href");
  var placeholder = document.getElementById("nodeTest");
  placeholder.setAttribute("href", source);
  var text1 = which.nodeValue;  //null
  var text = which.childNodes[0].nodeValue;  //元素本身的nodeValue属性是一个空值，所以要找到它的第一个子节点的nodeValue属性值
  console.log(text);
}

2017/09/06/周三

怎么学 JavaScript？

HOME

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

201709

Do what you say, say what you do.

2017/09/28/周四

2017/09/27/周三

2017/09/26/周二

2017/09/24/周日

2017/09/23/周六

2017/09/21/周四

2017/09/18/周一

2017/09/11/周一

2017/09/06/周三

Clone this wiki locally