HTML5、JavaScript、Android を勉強しよう

基本処理に関するJS(money.js)は以下の通り。

・money.jsファイル

// データベースの定義
var dbName = "pocketMoneyNotebook";//DBの名前
var version = "1.0";//DBのバージョン
var displayName = "お小遣い帳";//環境設定ダイアログの「セキュリティ→データベース」をクリックして表示されるデータベース一覧
var estimatedSize = 1024 * 1024;//データベースの見積りサイズをbyte単位で指定

//テーブル作成
var createTable1 = "create table if not exists money (date text not null, item text, price int, count int, sum int not null)";

//定数
var updateMessage = "最新版がリリースされました。\n更新しますか？";


//入力チェックメッセージ
var errMsg1 = "日付の形式を確認してください。\n西暦4桁-月2桁-日2桁\n（20YY-MM-DD）です。\n";
var errMsg21 = "日付は必須項目です。\n";
var errMsg25 = "価格は必須項目です。\n";
var errMsg3 = "単価は、数値を入力してください。\n";
var errMsg4 = "個数は、数値を入力してください。\n";
var errMsg5 = "価格は、数値を入力してください。\n";
var allErrMsg = "";

$(function() {
    
    updateConfirm();
    
    $('input[type=number]').iPhoneNumberInput(); //iphoneで同じ数値が連続して入力された際に、記号から数値に戻す
    
    //フォームのバックグラウンドをフォーカス時に白にする
    $('input').focus(function(){
        $(this).css("background-color", "#ffffff");
    })
    
    //価格と個数のロスとフォーカス時の処理
    $('#price,#count').blur(function(){
        var price = $("#price").val();
        var count = $("#count").val();
        if(!isNaN(price) && price != "" && !isNaN(count) && count != ""){
            $("#sum").val(price * count);
        }
    })


    var db = openDatabase(dbName, version, displayName, estimatedSize);
    if(db) {
        //初期処理:テーブルが無い場合、テーブルを作成する
        initDB();
        //DBからデータ一覧を取得
        selectDB();
        //////////////////////////入力ボタンクリック時////////////////////////
        $("#add").click(function() {
            addData();
        });
        
        //////////////////////////入力フォームの初期化処理など////////////////////////
        $("#msg").empty();
        var now = new Date();
        var month = now.getMonth()+1;
        if(month<10) {
            month = "0"+month;
        }
        var day = now.getDate();
        if(day<10) {
            day = "0"+day;
        }
        $("#date").val(now.getFullYear()+"/"+month+"/"+day); //日付のテキストボックスに現在日を初期値としていれる
        $("#date").datepicker(); //日付のテキストボックスをdatepickerに
        
        //////////////////////////タブの表示・非表示////////////////////////
        $("article:not(:first)").hide(0);
        $("nav a").click(function() {
            $("nav a").removeClass("choosed");
            $(this).addClass("choosed");
            var tg = this.href.split("#");
            $("article").hide(0);
            $("#"+tg[1]).show(0,function() {

            });
        });
    }
    
    function initDB() {
        db.transaction(function(tx) {
            tx.executeSql(createTable1);
        });
    }
    function addData() {
        var allErrMsg = ""; // エラーメッセージ用の変数を初期化
        
        //////////////////////////フォームの値を取得////////////////////////
        var date = $("#date").val();
        var item = $("#item").val();
        var price = $("#price").val();
        var count = $("#count").val();
        var sum = $("#sum").val();
        
        //////////////////////////入力チェック//////////////////////////
        if(!date) { allErrMsg += errMsg21; $('#date').css("background", "red");} //日付の必須チェック
        if(!date.match(/^20[0-9]{2}\/(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])$/)) { //日付の形式チェック
            allErrMsg += errMsg1;
            $('#date').css("background", "red");
        }
        if(isNaN(price)){ allErrMsg += errMsg3; $('#price').css("background", "red");} //単価の数値チェック
        if(isNaN(count)){ allErrMsg += errMsg4; $('#count').css("background", "red");} // 個数の数値チェック
        if(sum == "") { allErrMsg += errMsg25; $('#sum').css("background", "red");} //価格の必須チェック
        else if(isNaN(sum)){ allErrMsg += errMsg5; $('#sum').css("background", "red");} // 価格の数値チェック
        
        //エラーが無い場合
        if(!allErrMsg){
            var itemMsg = "";
            var priceMsg = "";
            var countMsg = "";
            if(item != ""){
                itemMsg = "\n商品:"+ item;
            }
            if(price != ""){
                priceMsg = "\n単価:"+price+"円";
            }
            if(count != ""){
                countMsg = "\n個数:"+count;
            }
            if(window.confirm("次の内容で登録します。よろしいですか。\n\n日付:"+date+itemMsg+priceMsg+countMsg+"\n価格:"+sum)) {
                writeDB(date,item,price,count,sum); //登録処理
            }
        //エラーがある場合
        }else{
            alert(allErrMsg);
        }
    }
    
    // 買い物登録
    function writeDB(date,item,price,count,sum) {
        db.transaction(function(tx) {
            tx.executeSql("INSERT INTO money VALUES (?,?,?,?,?)", [date,item,price,count,sum],
                function(tx, rs) {//トランザクション成功時
                    $("#msg").empty();
                    $("#msg").append("登録しました。
");
                    selectDB();
                },
                function(tx, error) {//トランザクション失敗時
                    alert(error.message);//トランザクションでのエラーメッセージをダイアログで表示
                }
            );
        });
    }
    
    // 買い物リスト取得
    function selectDB() {
        db.transaction(function(tx) {
            tx.executeSql("select * from money order by date DESC", [],
                function(tx, rs) {
                    $("#list").empty();
                    for(var i = 0; i < rs.rows.length; i++) {
                        var items = ""+rs.rows.item(i).date+""+rs.rows.item(i).item+""+rs.rows.item(i).sum+"";
                        $("#list").append(items);
                    }
                },
                function(tx, error) {//トランザクション失敗時
                    alert(error.message);//トランザクションでのエラーメッセージをダイアログで表示
                }
            );
        });
    }
    
    // アップデートの確認
    function updateConfirm(){
        cache = window.applicationCache;
        cache.addEventListener("updateready", function() {
            if (confirm(updateMessage)) { // アップデータを促す今ファームボタンを表示
                versionUp();//バージョンアップする
            }
        }, false);

    }
    
    // バージョンアップ実行
    function versionUp() {
        cache.swapCache();
        location.reload();
    }
});