2016-11-28

insertBeforeで躓いた件

javascript jQuery

テーブル内の要素を上へもしくは下へ入れ替えが出来る画面を造っていたときにはまった。

入れ替えにはinsertBeforeで出来ると聞いて。

やり方はいろいろあれど、楽そうだったのでinsertBefore を使ってノードに挿入する手段を考えてみた。

作ってみたらうまく動かない。

単純なテーブルで書いてみたら動くときと動かないときがある。

<tbody id="tbody1">
  <tr>
    <td>
    <input type="text" value="1" />
    <i onclick="up(this);" class="fa fa-chevron-up"></i>
    <i onclick="down(this);" class="fa fa-chevron-down"></i>
    </td>
  </tr>
  <tr>
    <td>
    <input type="text" value="2" />
    <i onclick="up(this);" class="fa fa-chevron-up"></i>
    <i onclick="down(this);" class="fa fa-chevron-down"></i>
    </td>
  </tr>
  <tr>
    <td>
    <input type="text" value="3" />
    <i onclick="up(this);" class="fa fa-chevron-up"></i>
    <i onclick="down(this);" class="fa fa-chevron-down"></i>
    </td>
  </tr>
</tbody>

上に移動する処理(下へは省略)

function up(obj) {

  var tbody = document.getElementById("tbody1");
  var tr = obj.parentNode.parentNode;

  if(tr.previousSibling != null & tr.previousSibling.nodeName === "TR") {
    // 「tr」を上に挿入
    tbody.insertBefore(tr, tr.previousSibling);
  }

}

事象

tr.previousSiblingが#textだったりtrだったりする。

前の要素が#textになっているのはなぜ？と不思議に思い、
console.log(tr.previousSibling.nodeValue);
で値を出したら空白が表示されてた。

空白？

原因

htmlにtbody以下は空白は入れてはいけない。
見栄えよくするために空白を入れているとその空白も要素だと勘違いされるっぽい？？
とりあえず改行なし・空白なしで修正してみたら思ったとおりに動いた。

2016-11-25

git お勉強用

git

こわくない Git from Kota Saito

www.slideshare.net

k.swd.cc

2016-09-12

DEPTH_ZERO_SELF_SIGNED_CERT

Node.js上でサンプルコードを書いていざ実行してみたら
DEPTH_ZERO_SELF_SIGNED_CERT
で怒られた。

しらべたらサーバへ接続する際に自前のオレオレ証明書が原因で認証エラーになっていたので
POSTの前におまじないを唱えたらうまく流れました。

// 証明書エラー回避
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";

// リクエスト送信
request.post(
・・・

追記：
もしくは環境変数にセットできるならセットしたほうが楽かな。

export NODE_TLS_REJECT_UNAUTHORIZED=0

2016-08-17

Linux コマンド小技　mv

ファイルを別名にして避難させるときのrenameの小技

mv hoge{,.bk}
// hoge -> hoge.bk

2016-08-10

ソート、重複除く、などJavascript memo

javascript

昇順

  array.sort( function(val1,val2){
    if(val1.propety1< val2.propety1) return -1;
    if(val2.propety1< val1.propety1) return 1;
    return 0
  });

それ以外はこちら
JavaScript つい忘れてしまう配列のソート方法 - Qiita

オブジェクトの中身拝見

console.log(JSON.stringify(arrayObj));

重複除く

var hoge = foo.filter(function(x,i,self){return self.indexOf(x) ===i});

同じキーがあるかどうか

Object.keys(dataObj).filter(function(k) { return dataObj[k] == searchword})[0]
// ない場合 === undefined

金額のカンマ編集

1000.toString().replace(/(\d)(?=(\d{3})+$)/g , '$1,')

今日の日付を書式yyyymmdd（月と日を必要に応じて0埋め）で取得する。

var now = new Date();
var yyyymmdd = now.getFullYear()+
	( "0"+( now.getMonth()+1 ) ).slice(-2)+
	( "0"+now.getDate() ).slice(-2);
var tomorrow = now.getFullYear()+
	( "0"+( now.getMonth()+1 ) ).slice(-2)+
	( "0"+( now.getDate()+1) ).slice(-2);

配列→文字列

区切り文字列で結合

ary = ['hoge','foo','bar','piyo'];
str = ary.join(',');
console.log(str);
//=>hoge,foo,bar,piyo

文字列→配列

区切り文字列で配列にする。

str = 'hoge,foo,bar,piyo';
ary = str.split(',');
console.log(ary);
//=>["hoge", "foo", "bar", "piyo"]

小数点の編集

・切捨て

Math.floor(val)

・切り上げ

Math.ceil(val)

・四捨五入

Math.round(val)

2016-07-19

MEANスタックの環境をつくる（途中）

OS: CentOS 6.7

Node.jsとnpmをinstall

sudo yum install epel-release
sudo yum install nodejs
node -v

バージョンでたらインストール完了

yum install -y npm --enablerepo=epel

npm も入れとく

Expressいれる

npm install express

MVSサイト構築

express コマンドを使ってサイトの雛形生成からサイトの動作確認まで行う

mkdir dev

cd dev

express myapp -e ejs

cd myapp 

npm install

npm start

サーバーが立ち上がったらローカルホスト:3000 で確認。

参考：
Node.js モジュール追加（Express） - Qiita

bootstrapをいれる

見た目よくするためにbowerを使ってインストール。
インストールしたら初期化しておく。

npm install -g bower

bower init

初期化の質問は下記参照：
Bowerまとめ（概要・導入・コマンド一覧） - Qiita

作業DIR上でbootstrapインストール　※依存関係にあるjqueryも同時に入る

bower install bootstrap --save

あとはMongoとAngular入れてひと段落。