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)

2018-04-26

文法

kotlin

３０分で覚えるKotlin文法 - Qiita
SwiftとKotlinの文法を比較してみた(基礎パート) - Qiita

1. 変数は可変がvar, 不変がval
2. ラムダ式は x -> x
3. タプルはPair, Triple
4. 辞書はmapOf, mutableMapOf
5. ログはprint(), prinln(), "xxx ${hoge} "で変数埋め込める

2018-04-25

Android及びWebViewの初歩

Android

1. AndroidのWebViewはLayoutで置く。
2. loadURLでURLの読み込み
3. AndroidManifestにの記述がいる。
4. AssetフォルダはNewのFolderから作れる。
5. Assetフォルダにはファイルをペーストで中に入れられる。
6. ローカルファイルの読み込みはwebView.loadUrl("file:///android_asset/hello.html")
7.javascriptを使えるようにする。 webView.settings.javaScriptEnabled(true)
8 urlの読み込み時を検知したい。

        webView.webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
                return super.shouldOverrideUrlLoading(view, request)
            }
            }
        }

9. webViewでjavascriptを実行するには

        val script = String.format("javascript:message('%s');", "Success!")
        webView.loadUrl(script)    }

2018-04-25

初歩的な事項

WKWebView

iOSWorksのWebAppTestにサンプルコードを作った。

初歩

0. import WebKitがいる。
1. 古いOSに対応させる場合、WKWebViewは直接生成する必要がある。
2. WKNavigationDelegateのnavigationActionのrequestでwebView側でURLが変更された際の情報が入ってくる。decisionHandlerで許可判断する。iOS側からは webView.load
3. URLはURLComponentsでURLを分解するとクエリなどが簡単に取得できる。
4. evaluateJavaScriptでjavascriptを実行できるので定義しておいた関数等を呼べる。
5. html等のファイルはBundle.main.path(forResource:でpathが取得できる。

html系

1. document.location = url でそのURLに切り替えられる。
2. encodeURIComponentでURLエンコーディングできる。
3.jqueryでidを$("#hoge")で取得.text等を変更などできる。

2018-04-25

ワークスペースに既存プロジェクトを追加する

XCode

ワークスペースのadd Filesで既存のプロジェクトファイルを選択し追加する。この時既存のプロジェクトは閉じていないとならない。

2018-04-24

データ共有

iOS

iOS8からAppGroup内で情報共有できる。つまり同じDeveloper内という制限がある。
Keychainを使わないでも良い。
Group IDを指定してNSUserdefault(suiteName)やNSFileManagerでデータを取得する。

Rodhos Soft

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

validationらしきもの

レイアウト作成続

テーブル

書いてみた

関数とコメント2

関数とコメント

フレックスで縦に並べる

初歩2

iOS8の注意

初歩

文法

Android及びWebViewの初歩

初歩的な事項

初歩

html系

ワークスペースに既存プロジェクトを追加する

データ共有