Basic

[rainit2006]

MDN page
https://developer.mozilla.org/ja/docs/Web/JavaScript/Language_Resources

JavaScriptはなぜトレンドが毎年変わると思われていたのか
http://qiita.com/shibukawa/items/31fa572ba48728054720

ECMAScript 2016 (第 7 版)

JavaScriptのスタイルガイドまとめ(おすすめ4選)
https://qiita.com/takeharu/items/dee0972e5f39bfd4d7c8

Nodejs编程规范
http://ourjs.com/detail/546c4b3fbc3f9b154e00004a
使用单引号: 只有在JSON文件中才使用双引号.
JavaScript中单引号（ ' ）和双引号（ " ）没有任何语义区别，两者都是可用的。我们建议一律统一为单引号，因为JSON、XML都规定了必须是双引号，这样便于无转义地直接引用。

[rainit2006]

• 代码的本地管理
  https://qiita.com/chihiro/items/09282c06850598000d0c

• JS内存泄漏 和Chrome 内存分析工具简介（摘）
  http://www.cnblogs.com/snowwhite/p/6067571.html
  一个未声明变量的引用会在全局对象中创建一个新的变量。为了防止这种错误的发生，可以在你的 JavaScript 文件开头添加 'use strict'; 语句。这个语句实际上开启了解释 JavaScript 代码的严格模式，这种模式可以避免创建意外的全局变量。

• JS API参考, 可以实际环境上调试动作
  https://www.w3schools.com/jsref/jsref_split.asp

• 检查JS工程里的依赖文件
  https://www.npmjs.com/package/dependency-check
  dependency-check parses your module code starting from the default entry files (e.g. index.js or main and any bin commands defined in package.json) and traverses through all relatively required JS files, ultimately producing a list of non-relative modules。
  $ dependency-check ./package.json

[rainit2006]

'Express' is not recognized command (windows)
解决： npm install express-generator -g

req.body empty on posts
原来是form里的各个元素（比如textbox，password）里只有id没有name。
而post的时候传递的是name内容而不是id。

启动redis server时提示：Creating Server TCP listening socket 127.0.0.1:6379: bind: No error
http://www.jianshu.com/p/7199eb788485
解决方法，依次输入以下命令
redis-cli.exe
shutdown
exit
redis-server.exe

[rainit2006]

自动加载项目依赖的库文件
cd 该项目目录后，执行“npm install”

[rainit2006]

• シンプルな(X)HTMLのCSSレイアウトサンプル全15種
  http://partisan.wwwxyz.jp/reference/css-layout.php

[rainit2006]

多維数组处理

• 创建object队列：
  Create an array of object like this:

var positionSet = [];
positionSet.push({"X": value1, "Y": value2});
return positionSet;

[rainit2006]

csv数据处理
数据例:

[rainit2006]

window.requestAnimationFrame() メソッド
アニメーション実装時など、再描画が頻繁に行われる処理に使えるメソッドになります。
window.requestAnimationFrame() メソッドは、ブラウザにアニメーションを行いたいことを知らせ、指定した関数を呼び出して次の再描画の前にアニメーションを更新することを要求します。このメソッドは、再描画の前に呼び出されるコールバック 1 個を引数として取ります。

window.requestAnimationFrame(callback);
// callback: 次の再描画でアニメーションを更新する時に呼び出す関数を指定します。

setTimeoutやsetIntevalと比較されることが多いですが、主に以下のような違いがあります。
requestAnimationFrameの特徴:

1. ブラウザの描画更新単位と同じ単位で呼び出される
2. 次の再描画が行われる前に次のアニメーションをする関数を呼び出す
3. タブが非アクティブの時はFPSを落とす

setInteval、setTimeoutの特徴:

1. ブラウザで準備ができていなくても必ず実行
2. タブが非アクティブの状態でも常に実行

setTimeoutやsetIntevalはタブが非アクティブの状態でも動き続けるため、使い方によってはメモリリークの原因となります。
その点、requestAnimationFrameは非アクティブの状態だとFPSを落とすようになっており、メモリの消費を抑えることができます。

[rainit2006]

类
https://www.w3cschool.cn/nodejs/node-js-class.html
Javascript的类都声明为函数:

function Shape () {/*from www.w3cschool.cn*/
    this.X = 0;
    this.Y = 0;

    this.move = function (x, y) {
        this.X = x;
        this.Y = y;
    }
    this.distance_from_origin = function () {
        return Math.sqrt(this.X*this.X + this.Y*this.Y);
    }
}

var s = new Shape();
s.move(10, 10);
console.log(s.distance_from_origin());

[rainit2006]

• JavaScript で File API を使用してファイルを読み取る
  https://www.html5rocks.com/ja/tutorials/file/dndfiles/

ファイル選択にフォーム入力を使用する

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

[rainit2006]

字符串处理

• 字符串分割
  https://www.ajaxtower.jp/js/string/index1.html

var str = "山田一郎, 20, 東京都";
var data = str.split(",");

document.write("私の名前は"+ data[0] + "です。年齢は" + data[1] 
    + "です。出身地は" + data[2] + "です");

• 字符串数组里查找某个文字所在的index ： indexOf()

// Create an array. (The elements start at index 0.)
var ar = ["ab", "cd", "ef", "ab", "cd"];
// Determine the first location of "cd".
document.write(ar.indexOf("cd") + "<br/>");
// Output: 1

// Find "cd" starting at index 2.
document.write(ar.indexOf("cd", 2) + "<br/>");
// Output: 4

[rainit2006]

日付/時間の処理
https://hakuhin.jp/js/date.html
http://yut.hatenablog.com/entry/20111015/1318633937

UNIX 時間とは、協定世界時(UTC)の 1970年01月01日 00:00:00 から開始して、経過した秒数です。
GMT:　Greenwich Mean Time. グリニッジ標準時.
日本標準時(JST) = 協定世界時(UTC) + 9時間

timestampをdate型に変換

var ts = 1318518000;
var d = new Date( ts * 1000 );
var year  = d.getFullYear();
var month = d.getMonth() + 1;
var day  = d.getDate();
var hour = ( d.getHours()   < 10 ) ? '0' + d.getHours()   : d.getHours();
var min  = ( d.getMinutes() < 10 ) ? '0' + d.getMinutes() : d.getMinutes();
var sec   = ( d.getSeconds() < 10 ) ? '0' + d.getSeconds() : d.getSeconds();
print( year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec );
//結果 2011-10-14 00:00:00

1). javascript获取当前时间：
var now = new Date(); // Wed Dec 14 2016 18:22:12 GMT+0800 (中国标准时间)

2). javascript时间转化为时间戳：
var timestamp = Date.parse(new Date()); // 1481710793000
var timestamp = (new Date()).valueOf(); // 1481710890340
var timestamp=new Date().getTime()； // 1481710918902
第一种：获取的时间戳是把毫秒改成000显示，
第二种和第三种是获取了当前毫秒的时间戳。

3). 时间戳转换为时间：
function timeStampToTime(timestamp){ //时间戳转为时间
var date = new Date(timestamp);
Y = date.getFullYear() + '-';
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
D = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
var time = Y+M+D+h+m+s;
return time;
}
timeStampToTime(1481710918902); // 2016-12-14 18:21:58

4). 计算前n分钟时间：
function desendMinutes(date,minutes)
{
minutes=parseInt(minutes);
var interTimes=minutes601000;
interTimes=parseInt(interTimes);
return new Date(Date.parse(date)-interTimes);
}
desendMinutes(timeStampToTime(1481710918902),10); //Wed Dec 14 2016 18:11:58 GMT+0800 (中国标准时间)

5). 计算后n分钟时间：
function addMinutes(date,minutes)
{
minutes=parseInt(minutes);
var interTimes=minutes601000;
interTimes=parseInt(interTimes);
return new Date(Date.parse(date)+interTimes);
}
addMinutes(timeStampToTime(1481710918902),10); //Wed Dec 14 2016 18:31:58 GMT+0800 (中国标准时间)

后面还有自定义时间格式的例子（略）
https://www.jianshu.com/p/9cd155c2a97d

[rainit2006]

• JavaScript 字符串与数字的相互转换
  https://www.jianshu.com/p/7962deab3cea

[rainit2006]

• Javascript变量类型
  http://weizhifeng.net/arguments-of-function-in-JavaScript.html
  JavaScript中的变量有5个基本数据类型（Undefined, Null, Boolean, Number, String）和引用数据类型（Object，Function，Array等）。
  类型 | 可能的值
  Undefined | 只有undefined，比如：var message; alert(message == undefined)//true
  Null | 只有null
  Boolean | true和false
  Number | 整数或者浮点数，例如：1或者3.14e10
  String | 任何字符串，例如：var a = "string"

基本类型和引用类型的变量声明方式是一样的。
二者的区别主要在于对变量内容保存的方式，基本类型的变量中存储的就是简单的数据段，而引用类型变量存储的是指向对象的引用。

在JavaScript中无论是基本类型还是引用类型，函数参数都是按值传递的。
基本类型的参数传递复制的是具体的值，而引用类型的参数传递复制的是这个引用变量存储的对对象的引用。

• 类型判断
  assert(typeof path === ’string’, 'path must be a string.');

[rainit2006]

模块化实现
https://garafu.blogspot.jp/2016/11/how-to-use-nodejs-module.html

• 複数メソッドのモジュール化
  単純に作成した複数メソッドをモジュール化する例を以下に載せます。 複数のオブジェクトやメソッドを１つのモジュールにする場合、 exports の プロパティ を増やして追加することで出力ができます。

foo.js

var circle = require("./circle.js");
console.log(`半径 4 の 円の面積 は ${circle.area(4)}`);
_______________________
circle.js

const PI = Math.PI;
 
exports.area = function (r) {
    return PI * r * r;
}
 
exports.circumference = function (r) {
    return 2 * PI * r;
}

• 単一オブジェクトのモジュール化
  単一のメソッドやクラスを出力する場合、 module.exports に対して出力したいメソッドやクラスを設定します。 先の例であげた exports に設定しても出力できません。

foo.js

var Square = require("./square.js");
var o = new Squre(2);
console.log(`1辺 が 2 の 正方形の面積 は ${o.area()}`);

___________________________
square.js

var Square = function (width) {
    this.width = width;
};
 
Square.prototype.area = function () {
    return this.width * this.width;
};
 
module.exports = Square;

https://gywbd.github.io/posts/2014/11/using-exports-nodejs-interface-design-pattern.html

模块之间传值
http://blog.csdn.net/momDIY/article/details/78702857
要想在使用node模块（文件）之间互相传值，有以下几种方法。

1. global
2. module.exports
   使用module.exports可以将文件中的某个模块（函数或是变量）暴露出去让外部调用

[rainit2006]

变形 ,旋转,移动的
请利用svg或CSS3 transform 属性
#10

[rainit2006]

== 等価演算子
数値と文字列を比較するとき、文字列は数値に変換されます。
=== 厳密等価演算子
オペランド同士が、型を変換することなく(上に示した通り)厳密に等しいならば真を返します。

var a = "1";
var b = 1;

console.log(a==b);
結果：true
console.log(a===b);
結果:false

[rainit2006]

Immediately-Invoked Function Expression (IIFE, 即時実行関数式)

IIFE イディオム内部の変数が、グローバルスコープの汚染と同様にアクセスされるのを防ぎます。

(function () { 
    var aName = "Barry";
})();
// 変数名はスコープ外からアクセスできません
aName // "Uncaught ReferenceError: aName is not defined" を投げます

IIFE 有两个比较经典的使用场景，一是类似于在循环中定时输出数据项，二是类似于 JQuery/Node 的插件和模块开发。

for(var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000);
}

上面的输出并不是你以为的0，1，2，3，4，而输出的全部是5，这时 IIFE 就能有用了：

for(var i = 0; i < 5; i++) {
    (function(i) {
      setTimeout(function() {
        console.log(i);  
      }, 1000);
    })(i)
}

而在 JQuery/Node 的插件和模块开发中，为避免变量污染，也是一个大大的 IIFE：

(function($) { 
        //代码
 } )(jQuery);