2018-05-15

参照フォルダ

iOS

参照フォルダとして追加したいものをプロジェクトにドラッグして参照フォルダして登録、
Bundleをみるとフォルダごとアプルに入ることがわかる。よってパスはBundle.main.bundlePathを起点に相対パスを追加していけば良い。

2018-05-14

感想

typescript

1. InputEventは型定義を読み込んだ。
npm install @types/dom-inputevent
2. 定義されてないものはinputEvent["inputType"]で取れた。
3. 定義していないプロパティも input["oldValue"] = input.value;で代入できた。
4. childNodesはArray.prototype.forEach.callを使う必要があった。
5. webpack.config.jsは複数entryは entry: {
main:'./src/main.ts',
menu:'./src/menu.ts'},みたいに指定すればできた。
6. ビルドする必要があるのは若干面倒かも。

2018-05-14

typescript環境

typescript javascript

TypeScript

https://ics.media/entry/16329

インストール

typescript また、webpackで使用するために ts-loader もインストール

設定ファイル　

ルートにtsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "es2015" // 出力モジュール名
  }
}

webpackへの設定

webpack.config.jsを以下のように設定する

module.exports = {
  // or production
  mode: 'development',

  entry: './src/main.ts',

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      }
    ]
  },
  // for import
  resolve: {
    extensions: [
      '.ts'
    ]
  }
};

ビルド

npm run build

2018-05-14

webpackの使い方

webpack javascript

WebPack

https://webpack.js.org/

読み込んで使う。エントリーポイント

//spc/index.js
import bar from './bar';
bar();

読み込まれる側

//src/bar.js
export default function bar() {
  //
}

これを設定するにはwebpack.config.jsを作る。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

htmlで読み込む

<-- page.html -->
<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="dist/main.js"></script>
  </body>
</html>

変換する。

npx webpack

インストール

npm install webpack webpack-cli --save-dev

実行

npx webpack

distフォルダが作成され main.jsが作られる。これをhtmlで読み込む。

実行はnpmのスクリプトに設定しておく

"scripts": {
  "build": "webpack"
  "watch": "webpack -w"
}

設定

webpack.config.js

module.exports = {
  entry: `./src/index.js`,
  output: {
    path: `${__dirname}/dist`,
    filename: 'main.js'
  },
  module: {
    rules: {
      { test: /\.txt$/, use: 'hoge-loader' }
    }
  }
};

entry ビルドを開始するエントリーポイントのjs
output 出力
module test:に指定された拡張子のものは use:に指定されたローダーで変換をかけること。

技

https://ics.media/entry/12140

2018-05-14

基本

npm javascript

npm

　パッケージ管理スタート

npm init これでpackage.jsonが作成される。

ローカルインストールは /node_modules 内にインストールされる。 -gをつけるとグローバルインストール。

アンインストールは uninstall

パッケージのアップデートは update

パッケージのリストは list

npm scripts

"scripts": {
  "キー":      "シェル",
  "キー2": "シェル"
}

キーの予約語

意味合い

start
restart
stop
test

これらは npm start等で実行できる。

フック

publish npm publishの後
install npm installの後
uninstall npm uninstallの後
update npm updateの後

　予約されていないキーの実行

npm run-sctipt キー npm run キー

キーにプレフィックスつける

pre
post
フックのプレフィックス
prepublish
preinstall
postuninstall
preupdate

実行

npm-run-all
run-p A B 並列実行
run-s A B 直列実行

コンフィグ設定

configフィールドに設定

 "config": {
   "port": "8080"
 }

次のようにも設定できる

npm config set myapp:port 80

npm_package_config_portのように取り出せる。

DependenciesとdevDependencies

本番環境か開発環境かインストール時に-Dもしくは --save-devとするとPackageJSONにはdevDependenciesとして記録される。

uninstall時にpackega.jsonの本番環境から削除するなら--saveもしくは-S、開発環境から削除するなら--save-devもしくは -D

packege.jsonで一括インストール npm install

本番環境のみインストール npm install --production

2018-05-09

validationらしきもの

JavaScript

とっかかりをつくってみた。

const toStr = (t) => {
    if (t == null) {
        return "null";
    } else {
        return t.toString();
    }
}

/**
 * 
 * @param {Node} node 
 * @returns {string}
 */
function nodeDesc(node) {
    const list = [node.nodeName,
    node.nodeType,
    node.nodeValue,
    node.hasChildNodes()];
    const listStrings = list.map(x => toStr(x));
    return listStrings.join(",");
}

/**
 * 
 * @param {string} txt 
 */
function log(txt) {
    console.log(txt);
}


/**
 * @param {Node} node 
 * @returns {(txt:string) => void}
 */
var logNode = (node) => (txt) => log(txt + nodeDesc(node));

/**
 * 
 * @param {Node} e 
 * @returns {HTMLDivElement}
 */
const div = (e) => {
    if (e.nodeName == "DIV") {
        return e;
    }
    return null;
};

/**
 * 
 * @param {Node} e 
 * @returns {HTMLElement}
 */
const htmlElement = (e) => {
    if (e instanceof HTMLElement) {
        return e;
    }

    return e;
}

/*
    nodes.find(x => x.nodeName == nodeName)
*/

/**
 * 
 * @param {Node} node 
 * @return {(Node) => Node}
 */
var findTag = (node) => (tagFunc) => (index) => {
    let t = node.firstChild;
    let count = 0;
    do {
        const x = tagFunc(t);
        if (x != null) {
            if (count == index) {
                return x;
            }
            count++;            
        }
        t = t.nextSibling;
    } while (t != null);

    return null;
}

var findDiv = (node) => (index) => {
    return findTag(node)(div)(index);
}


/// IDを一括変更する
/**
 * 
 * @param {Node} node 
 */
var cloneNode = (node) => (index) => {
    const dc = node.cloneNode(true);
    changeID(dc, index);
    return dc;
};

/**
 * @param {Node} node 
 * @param {number} index 
 */
function changeID(node, index) {
    // console.log("node.id=",node.id);
    node.id = node.id +""+ index;
    // console.log(" => node.id=",node.id);
    for (let n of node.childNodes) {
        changeID(n,index);
    }
}


const id_cell = "cell";
const id_cell_title = "cell_title";
const id_cell_amount = "cell_amount";
const id_cell_icon = "cell_icon";

const id_listBox = "listBox";


const assertNonull = (o, msg) => {
    if (o!=null) {
        return true;
    }
    console.log("[Assert]"+msg);
    return false;
}



/**
 *  @type{HTMLTableElement}
 */
const listBox = document.getElementById(id_listBox);

console.log("listBox="+listBox);

/**
 *  @type{HTMLDivElement}
 */
const d = document.getElementById(id_cell);
assertNonull(d,"id_cell is null");
console.log(id_cell+"="+d);


for (let i = 0; i < 10; i++) {
    /// 複製
    const dc = cloneNode(d)(i);
    dc.style.visibility = "visible";    

    /// 
    listBox.appendChild(dc);

    /**
     * @type{HTMLImageElement}
     */    
    const icon = document.getElementById(id_cell_icon+i);
    icon.src = "menu/icon_" + ('00'+i).slice(-2) + ".png";    

    const title = document.getElementById(id_cell_title+i);
    if (title instanceof HTMLDivElement) {
        title.innerText = "hoge" + i;
    }
    const amount = document.getElementById(id_cell_amount+i);
    if (amount instanceof HTMLInputElement) {
        amount.value = "" + i;
        amount.innerText = "" + (i * 100) + "Yen";
        amount.oninput = (txt) => {
            if (txt instanceof InputEvent) {
                if (txt.inputType == "deleteContentBackward") {
                    console.log("delete....");
                    amount.oldValue = amount.value;
                } else {
                    console.log(amount.value + "=>+" + txt.data);
                    const reg = /^\d{0,6}$/;
                    if (amount.value.match(reg) != null) {
                       console.log("ok"); 
                       amount.oldValue = amount.value;
                    } else {
                        console.log("invalid");
                        console.log(txt);
                        const pos = amount.selectionStart;
                        amount.value = amount.oldValue;
                        amount.selectionStart = pos-1;
                        amount.selectionEnd = pos-1;
                    //    amount.value　= amount.value.slice(0,-1);
                    }
                }
            }
        }
    }
 


    // const found = findDiv(dc)(1);
    // if (found != null) {
    //     found.innerText = "hoge!";
    // }

}

クラスで指定できるようにした。








const toStr = (t) => {
    if (t == null) {
        return "null";
    } else {
        return t.toString();
    }
}

/**
 * 
 * @param {Node} node 
 * @returns {string}
 */
function nodeDesc(node) {
    const list = [node.nodeName,
    node.nodeType,
    node.nodeValue,
    node.hasChildNodes()];
    const listStrings = list.map(x => toStr(x));
    return listStrings.join(",");
}

/**
 * 
 * @param {string} txt 
 */
function log(txt) {
    console.log(txt);
}


/**
 * @param {Node} node 
 * @returns {(txt:string) => void}
 */
var logNode = (node) => (txt) => log(txt + nodeDesc(node));

/**
 * 
 * @param {Node} e 
 * @returns {HTMLDivElement}
 */
const div = (e) => {
    if (e.nodeName == "DIV") {
        return e;
    }
    return null;
};

/**
 * 
 * @param {Node} e 
 * @returns {HTMLElement}
 */
const htmlElement = (e) => {
    if (e instanceof HTMLElement) {
        return e;
    }

    return e;
}

/*
    nodes.find(x => x.nodeName == nodeName)
*/

/**
 * 
 * @param {Node} node 
 * @return {(Node) => Node}
 */
var findTag = (node) => (tagFunc) => (index) => {
    let t = node.firstChild;
    let count = 0;
    do {
        const x = tagFunc(t);
        if (x != null) {
            if (count == index) {
                return x;
            }
            count++;            
        }
        t = t.nextSibling;
    } while (t != null);

    return null;
}

var findDiv = (node) => (index) => {
    return findTag(node)(div)(index);
}


/// IDを一括変更する
/**
 * 
 * @param {Node} node 
 */
var cloneNode = (node) => (index) => {
    const dc = node.cloneNode(true);
    changeID(dc, index);
    return dc;
};

/**
 * @param {Node} node 
 * @param {number} index 
 */
function changeID(node, index) {
    // console.log("node.id=",node.id);
    node.id = node.id +""+ index;
    // console.log(" => node.id=",node.id);
    for (let n of node.childNodes) {
        changeID(n,index);
    }
}


const id_cell = "cell";
const id_cell_title = "cell_title";
const id_cell_amount = "cell_amount";
const id_cell_icon = "cell_icon";

const id_listBox = "listBox";


const assertNonull = (o, msg) => {
    if (o!=null) {
        return true;
    }
    console.log("[Assert]"+msg);
    return false;
}



/**
 *  @type{HTMLTableElement}
 */
const listBox = document.getElementById(id_listBox);

console.log("listBox="+listBox);

/**
 * 
 * @param {HTMLInputElement} input 
 * @returns {(inputEvent:Event) => void}
 */
const amountValidation = (input) => (inputEvent) => {
    if (inputEvent instanceof InputEvent) {
        if (inputEvent.inputType == "deleteContentBackward") {
            console.log("delete....");
            input.oldValue = input.value;
        } else {
            console.log(input.value + "=>+" + inputEvent.data);
            const reg = /^\d{0,6}$/;
            if (input.value.match(reg) != null) {
               console.log("ok"); 
               input.oldValue = input.value;
            } else {
                console.log("invalid");
                console.log(inputEvent);
                const pos = input.selectionStart;
                input.value = input.oldValue;
                input.selectionStart = pos-1;
                input.selectionEnd = pos-1;
            //    amount.value　= amount.value.slice(0,-1);
            }
        }
    }
}



/**
 *  @type{HTMLDivElement}
 */
const d = document.getElementById(id_cell);
assertNonull(d,"id_cell is null");
console.log(id_cell+"="+d);





for (let i = 0; i < 10; i++) {
    /// 複製
    const dc = cloneNode(d)(i);
    dc.style.visibility = "visible";    

    /// 
    listBox.appendChild(dc);

    /**
     * @type{HTMLImageElement}
     */    
    const icon = document.getElementById(id_cell_icon+i);
    icon.src = "menu/icon_" + ('00'+i).slice(-2) + ".png";    

    const title = document.getElementById(id_cell_title+i);
    if (title instanceof HTMLDivElement) {
        title.innerText = "hoge" + i;
    }

    // const found = findDiv(dc)(1);
    // if (found != null) {
    //     found.innerText = "hoge!";
    // }

}


// setValidation
const className_validation_amount = "validation_amount";
const ls = document.getElementsByClassName(className_validation_amount);
console.log("valid ls" + ls.length);
for (const l of ls) {
    console.log(l);
    if (l instanceof HTMLInputElement) {
        console.log(l);
        l.oldValue = l.value;
        let v = amountValidation(l);
        l.oninput = v;
    }
}

関数に出した。コメントで型が定義できるらしい。








const toStr = (t) => {
    if (t == null) {
        return "null";
    } else {
        return t.toString();
    }
}

/**
 * 
 * @param {Node} node 
 * @returns {string}
 */
function nodeDesc(node) {
    const list = [node.nodeName,
    node.nodeType,
    node.nodeValue,
    node.hasChildNodes()];
    const listStrings = list.map(x => toStr(x));
    return listStrings.join(",");
}

/**
 * 
 * @param {string} txt 
 */
function log(txt) {
    console.log(txt);
}


/**
 * @param {Node} node 
 * @returns {(txt:string) => void}
 */
var logNode = (node) => (txt) => log(txt + nodeDesc(node));

/**
 * 
 * @param {Node} e 
 * @returns {HTMLDivElement}
 */
const div = (e) => {
    if (e.nodeName == "DIV") {
        return e;
    }
    return null;
};

/**
 * 
 * @param {Node} e 
 * @returns {HTMLElement}
 */
const htmlElement = (e) => {
    if (e instanceof HTMLElement) {
        return e;
    }

    return e;
}

/*
    nodes.find(x => x.nodeName == nodeName)
*/

/**
 * 
 * @param {Node} node 
 * @return {(Node) => Node}
 */
var findTag = (node) => (tagFunc) => (index) => {
    let t = node.firstChild;
    let count = 0;
    do {
        const x = tagFunc(t);
        if (x != null) {
            if (count == index) {
                return x;
            }
            count++;            
        }
        t = t.nextSibling;
    } while (t != null);

    return null;
}

var findDiv = (node) => (index) => {
    return findTag(node)(div)(index);
}


/// IDを一括変更する
/**
 * 
 * @param {Node} node 
 */
var cloneNode = (node) => (index) => {
    const dc = node.cloneNode(true);
    changeID(dc, index);
    return dc;
};

/**
 * @param {Node} node 
 * @param {number} index 
 */
function changeID(node, index) {
    // console.log("node.id=",node.id);
    node.id = node.id +""+ index;
    // console.log(" => node.id=",node.id);
    for (let n of node.childNodes) {
        changeID(n,index);
    }
}


const id_cell = "cell";
const id_cell_title = "cell_title";
const id_cell_amount = "cell_amount";
const id_cell_icon = "cell_icon";

const id_listBox = "listBox";


const assertNonull = (o, msg) => {
    if (o!=null) {
        return true;
    }
    console.log("[Assert]"+msg);
    return false;
}



/**
 *  @type{HTMLTableElement}
 */
const listBox = document.getElementById(id_listBox);

console.log("listBox="+listBox);

/**
 * 
 * @typedef {(txt:String)=>boolean} Rule
 * @param {String} txt 
 * @returns {boolean}
 */
const numberRule6 = (txt) => {
    const reg = /^\d{0,6}$/;
    if (txt.match(reg) != null) {
        return true;
    }
    return false;
}

/**
 * 
 * @param {HTMLInputElement} input 
 * @returns {(rule:Rule) => (inputEvent:Event) => void}
 */
const amountValidation = (input) => (rule) => (inputEvent) => {
    console.log("amountValidation");
    if (inputEvent instanceof InputEvent) {
        if (inputEvent.inputType == "deleteContentBackward") {
            console.log("delete....");
            input.oldValue = input.value;
        } else {
            console.log(input.value + "=>+" + inputEvent.data);
            if (rule(input.value)) {
               console.log("ok"); 
               input.oldValue = input.value;
            } else {
                console.log("invalid");
                console.log(inputEvent);
                const pos = input.selectionStart;
                input.value = input.oldValue;
                input.selectionStart = pos-1;
                input.selectionEnd = pos-1;
            //    amount.value　= amount.value.slice(0,-1);
            }
        }
    }
}



/**
 *  @type{HTMLDivElement}
 */
const d = document.getElementById(id_cell);
assertNonull(d,"id_cell is null");
console.log(id_cell+"="+d);





for (let i = 0; i < 10; i++) {
    /// 複製
    const dc = cloneNode(d)(i);
    dc.style.visibility = "visible";    

    /// 
    listBox.appendChild(dc);

    /**
     * @type{HTMLImageElement}
     */    
    const icon = document.getElementById(id_cell_icon+i);
    icon.src = "menu/icon_" + ('00'+i).slice(-2) + ".png";    

    const title = document.getElementById(id_cell_title+i);
    if (title instanceof HTMLDivElement) {
        title.innerText = "hoge" + i;
    }

    // const found = findDiv(dc)(1);
    // if (found != null) {
    //     found.innerText = "hoge!";
    // }

}


// setValidation
const className_validation_amount = "validation_amount";
const ls = document.getElementsByClassName(className_validation_amount);
console.log("valid ls" + ls.length);
for (const l of ls) {
    console.log(l);
    if (l instanceof HTMLInputElement) {
        console.log(l);
        l.oldValue = l.value;
        let v = amountValidation(l)(numberRule6);
        l.oninput = v;
    }
}

2018-05-09

レイアウト作成続

html

flexを使うほうが調整が簡単なことがわかった。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <style type="text/css">

        .container {
            text-align: center;

        }
        
        .listBox {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cell {
            width: 330px;
            height: 70px; 
        }

        .cell_icon {
            flex-basis: 80px;
            flex-grow: 0;
        }

        .cell_title {
            flex-basis: auto;
            flex-grow: 1;
            text-align: left;
            padding-left: 20px;
        }

        .cell_amount {
            flex-basis: auto;
            flex-grow: 0;
            text-align: right;
            padding-right: 10px;
        }

        .cellBox {
                width: 320px;
                height: 66px;
                background: linear-gradient(#EEEEEE, #FFFFFF);                
               display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-content: center;
                align-items: center;
                border: #000000;
                border-width: 1px;
                border-radius:5px;
                border-style:solid;
        }
        body {
            background: linear-gradient(#0000CC, #0000FF);
            width: 800px;
            height: 800px;
        }
    </style>
</head>

<body>
    <div id="container" class="container">
        <div id="cell" class="cell" style="visibility:hidden;">
            <div id="cellBox" class="cellBox">            
                <div class="cell_icon"><img id="cell_icon" src="menu/icon_01.png"></div>
                <div class="cell_title" id="cell_title">hoge</div>
                <div class="cell_amount" id="cell_amount"></div>
            </div>
        </div>
        <div id="listBox" class="listBox"></div>
    </div>    
</body>
<script type="text/javascript" src="menu.js"> </script>

</html>

2018-05-09

テーブル

html

書いてみたが使わなくて良いみたい。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <style type="text/css">

        .listBox {
            
        }

        .cell {
                width: 320px;
                height: 66px;
                background: linear-gradient(#EEEEEE, #FFFFFF);                
                /* border: #000000; */
                /* border-width: 1px; */
               display: flex;
                flex-direction: row;
                align-content: center;
                align-items: center;
                /* border-radius:5px; */
                /* border-style:solid; */
        }
        body {
            background: linear-gradient(#0000CC, #0000FF);
            width: 400px;
            height: 800px;
        }
    </style>
</head>

<body>
    <div id="container">
        <table>
        <tr id="cell" class="cell" style="visibility:hidden;">            
            <td><img id="cell_icon" src="menu/icon_01.png"></td>
            <td id="cell_title">hoge</td>
            <td id="cell_amount"></td>
        </tr>
        </table>
        <table id="listBox" class="listBox"></table>
    </div>    
</body>
<script type="text/javascript" src="menu.js"> </script>

</html>

2018-05-09

書いてみた

html

まだぐしゃぐしゃだがやはりスタイルはまとめて他の場所に書くほうがすっきりするようだ。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <style type="text/css">
        .cell {
                width: 320px;
                height: 66px;
                background: white;
                border: black;
                display: flex;
                flex-direction: row;
                align-content: center;
                align-items: center;
                border-radius:10px;
        }
        body {
            background: linear-gradient(#0000CC, #0000FF);
            width: 400px;
            height: 800px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="cell" class="cell" style="visibility:hidden;">
            <img id="cell_icon" src="menu/icon_01.png">
            <div id="cell_title">hoge</div>
            <div id="cell_amount"></div>
        </div>
        <div id="listBox"></div>
    </div>
</body>
<script type="text/javascript" src="menu.js"> </script>

</html>

2018-05-08

関数とコメント2

JavaScript

更に色々書いてみた。

/**
 *  @type{HTMLDivElement}
 */
const listBox = document.getElementById("listBox");


const toStr = (t) => {
    if (t == null) {
        return "null";
    } else {
        return t.toString();
    }
}

/**
 * 
 * @param {Node} node 
 * @returns {string}
 */
function nodeDesc(node) {
    const list = [node.nodeName,
    node.nodeType,
    node.nodeValue,
    node.hasChildNodes()];
    const listStrings = list.map(x => toStr(x));
    return listStrings.join(",");
}

/**
 * 
 * @param {string} txt 
 */
function log(txt) {
    console.log(txt);
}


/**
 * @param {Node} node 
 * @returns {(txt:string) => void}
 */
var logNode = (node) => (txt) => log(txt + nodeDesc(node));

/**
 * 
 * @param {Node} e 
 * @returns {HTMLDivElement}
 */
const div = (e) => {
    if (e.nodeName == "DIV") {
        return e;
    }
    return null;
};

/*
    nodes.find(x => x.nodeName == nodeName)
*/

/**
 * 
 * @param {Node} node 
 * @return {(Node) => Node}
 */
var findTag = (node) => (tagFunc) => (index) => {
    let t = node.firstChild;
    let count = 0;
    do {
        const x = tagFunc(t);
        if (x != null) {
            if (count == index) {
                return x;
            }
            count++;            
        }
        t = t.nextSibling;
    } while (t != null);

    return null;
}

var findDiv = (node) => (index) => {
    return findTag(node)(div)(index);
}


/// IDを一括変更する
var cloneNode = (node) => (index) => {
    const dc = d.cloneNode(true);
    changeID(dc, index);
    return dc;
};

/**
 * @param {Node} node 
 * @param {number} index 
 */
function changeID(node, index) {
    // console.log("node.id=",node.id);
    node.id = node.id +""+ index;
    // console.log(" => node.id=",node.id);
    for (let n of node.childNodes) {
        changeID(n,index);
    }
}


const id_cell = "cell";
const id_cell_title = "cell_title";
const id_cell_amount = "cell_amount";
const id_cell_icon = "cell_icon";


/**
 *  @type{HTMLDivElement}
 */
const d = document.getElementById(id_cell);

/**
 *  @type{HTMLDivElement}
 */
for (let i = 0; i < 10; i++) {
    /// 複製
    const dc = cloneNode(d)(i);
    dc.style.visibility = "visible";    

    /// 
    listBox.appendChild(dc);

    /**
     * @type{HTMLImageElement}
     */    
    const icon = document.getElementById(id_cell_icon+i);
    icon.src = "menu/icon_" + ('00'+i).slice(-2) + ".png";    

    const title = document.getElementById(id_cell_title+i);
    title.innerText = "hoge" + i;
    const amount = document.getElementById(id_cell_amount+i);
    amount.innerText = "" + (i * 100) + "Yen";

    // const found = findDiv(dc)(1);
    // if (found != null) {
    //     found.innerText = "hoge!";
    // }

}

2018-05-08

関数とコメント

JavaScript

色々javascriptを書いてみた


/**
 *  @type{HTMLDivElement}
 */
const d = document.getElementById("cell");

/**
 *  @type{HTMLDivElement}
 */
const listBox = document.getElementById("listBox");


const toStr = (t) => {
    if (t == null) {
        return "null";
    } else {
        return t.toString();
    }
}

/**
 * 
 * @param {Node} node 
 * @returns {string}
 */
function nodeDesc(node) {
    const list = [node.nodeName,
    node.nodeType,
    node.nodeValue,
    node.hasChildNodes()];
    const listStrings = list.map(x => toStr(x));
    return listStrings.join(",");
}

/**
 * 
 * @param {string} txt 
 */
function log(txt) {
    console.log(txt);
}


/**
 * @param {Node} node 
 * @returns {(txt:string) => void}
 */
var logNode = (node) => (txt) => log(txt + nodeDesc(node));

/**
 * 
 * @param {Node} e 
 * @returns {HTMLDivElement}
 */
const div = (e) => {
    if (e.nodeName == "DIV") {
        return e;
    }
    return null;
};

/*
    nodes.find(x => x.nodeName == nodeName)
*/

/**
 * 
 * @param {Node} node 
 * @return {(Node) => Node}
 */
var findTag = (node) => (tagFunc) => (index) => {
    let t = node.firstChild;
    let count = 0;
    do {
        const x = tagFunc(t);
        if (x != null) {
            if (count == index) {
                return x;
            }
            count++;            
        }
        t = t.nextSibling;
    } while (t != null);

    return null;
}

var findDiv = (node) => (index) => {
    return findTag(node)(div)(index);
}



/**
 *  @type{HTMLDivElement}
 */
for (let i = 0; i < 10; i++) {
    const dc = d.cloneNode(true);
    dc.style.visibility = "visible";
    dc.id = "cell" + i;


    const found = findDiv(dc)(1);
    if (found != null) {
        found.innerText = "hoge!";
    }

    listBox.appendChild(dc);
}

2018-05-08

フレックスで縦に並べる

html

あっているかはわからない。

<div id="box" style="
                           width: 300px;
                           display:flex;
                           flex-grow: 1;
                           align-content: center;
                           align-items: center;
                           flex-direction: column;">
           <a href="http://localhost">
            <img src="./menu/01.png"/>
           </a>
           <a href="http://localhost">
               <img src="./menu/02.png"/>
           </a>
           <a href="http://localhost">
               <img src="./menu/03.png"/>
           </a>

       </div>

2018-05-07

初歩2

JavaScript

とほほのサイトに色々書いてある。

/*jshint esversion: 6 */

// import {hello_world} from "mymodule.js";

// http://www.tohoho-web.com/js/index.htm

//document.write("Hello World")
//alert("Hello world!!");
const id_container = "container";

/// DOM
const d = document.getElementById(id_container);
d.innerText = "aaaa";

/// Log
console.log("Hello World");
const date = new Date();
d.innerText = date.toLocaleDateString(); /// 2018/5/7

/// onload
window.onload = function() {

    function onFire() {
        let date = new Date();
        let d = document.getElementById(id_container);
        d.innerHTML = date.toLocaleString();
    }

    window.setInterval( onFire, 1000);
};

function onHelloClick() {
    alert("Hello world!!");
}

class Animal {
    constructor(name) {
        this.name = name;
    }

    hello() {
        console.log(this.name);
    }
}

test();



/// object一覧　http://www.tohoho-web.com/js/basic.htm

function test() {

    for (let i=0;i<10;i++) {
        console.log(i);
    }

    const x = 10;
    if (x==10) {
        console.log("10");
    } else {
        console.log("not 10");
    }
    
    const y = 10;
    switch (y) {
        case 1:
            console.log("case 1");
            break;
        default:
            console.log("case default:");
            break;
    }

    let k = 10;
    do {
        console.log("hello" + k)
        k--;
    } while (k>=0);

    const kk = ["A", "B", "C"];
    for (let o of kk) {
        console.log(o);
    }

    const set = new Set();
    set.add("A");
    set.add("B");
    for (let o of set) {
        console.log(o.toString());
    }

    let s = escape("asioduasd2!");
    console.log(s);

    // hello_world();

    let m = new Map();
    m.set("w",10);
    const w = m.get("w");

    const animal = new Animal("ANIMAL");
    animal.hello();
}

2018-05-07

iOS8の注意

UIKit

UINavigationController.delegateがassignからweakになっている。
つまり、weakと思っていたらiOS8はassignになっているので注意。。orz

2018-04-26

初歩

JavaScript

イマドキのJavaScriptの書き方2018 - Qiita

1. 関数はfunction() {}
2. window.onload = hogeFunction;で読み込み時に読まれる
3. DOM要素の取得 const myC = document.getElementById("myC");
4. 子要素にHTMLを入れる。 myC.insertAdjacentHTML("beforeend",vhtml)
5. 子要素にelementを入れる。 myC.insertAdjacentElement("beforeEnd", makeDiv("test",getHTML_CELL()))
6. DIV要素を作る。 const d = document.createElement("div")
7. 要素のHTMLを設定 d.innerHTML = html
8. 要素のIDを設定　 d.id = id
9. スタイルの設定　 #testはidの指定
10. スタイルの読み込み　
11. jqueryの読み込み　
12. スクリプトの設定　
13.フォームを作る。

        <form method="post" action="" id="InputForm">
            <p>その１: <input type="text" name="p1"></p>
            <p>その２:<input type="text" name="p2"></p>
            <p><input type="submit" value="確定"></p>
        </form>

14. submitボタンをフックする。

            document.getElementById("InputForm").onsubmit = onSubmit;

15. input要素に入力した値を取得する。(idをx1として)

           function onSubmit(event) {
               const x1 = document.getElementById("x1") // HTMLInputElement
               const x1Value = x1.value
               alert("x1" + x1Value)

Rodhos Soft

備忘録を兼ねた技術的なメモです。Rofhos SoftではiOSアプリ開発を中心としてAndroid, Webサービス等の開発を承っております。まずはご相談下さい。

参照フォルダ

感想

typescript環境

TypeScript

インストール

設定ファイル

webpackへの設定

ビルド

webpackの使い方

WebPack

インストール

実行

設定

技

基本

パッケージ管理スタート

npm scripts

キーの予約語

意味合い

フック

予約されていないキーの実行

キーにプレフィックスつける

フックのプレフィックス

実行

コンフィグ設定

DependenciesとdevDependencies

validationらしきもの

レイアウト作成続

テーブル

書いてみた

関数とコメント2

関数とコメント

フレックスで縦に並べる

初歩2

iOS8の注意

初歩