JavaScript｜VB.NET-TIPS などプログラミングについて

2025/01/18

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CM

2019/07/11

JavaScript jQueryでAjaxを使いブロック領域を表示・非表示にする方法（css()メソッド、"display"属性）

最終的にブロック領域を表示・非表示にする方法を説明しますが、そのために使用する jQuery の css() メソッドについて説明します。
css() メソッドは要素の style 属性を設定をします。メソッドの引数の記述方法で、1個の属性のみと複数の属性の設定ができます。

// 1個のstyle属性のみ
$('要素').css('プロパティ', '設定値');
// 複数のstyle属性
$('要素').css({'プロパティ':'設定値', 'プロパティ':'設定値', ... });

例としてHTML要素で class 名が「class1」とした場合において、1個の場合は「color」属性を「red」に、複数の場合は「color」属性を「blue」、「font-weight」属性を「bold」に設定するには以下の様にします。

// 1個のstyle属性のみ
$('class1').css('color', 'red');
// 複数のstyle属性
$('class1').css({'color':'blue', 'font-weight':'bold'});

そこで、ブロック領域を表示・非表示の制御を行うには、「display」属性を「block」(表示)、または「none」(非表示)に設定します。
今回のデモ HTML ファイル側のソースを以下に示します。

■ブロック領域を表示・非表示にする

<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 表示・非表示関数
function setDisplay() {
    // チェック判定
    if($("#chkOnOff").prop("checked")){
        // 表示設定
        $(".msg1").css("display", "block");
        $("#area").css("display", "block");
    } else {
        // 非表示設定
        $(".msg1").css("display", "none");
        $("#area").css("display", "none");
    }
    return false;
}
</script>
</head>
<body>
    <h2>test display ON/OFF</h2>
    <label>
    <input id="chkOnOff" type="checkbox" onclick="setDisplay();" checked="checked" value="1" />
    表示ON/OFF
    </label>
    <br />
    <div id="area" style="display: block;">
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
        <p>11111111111222222222222222</p>
    </div>
    <p class="msg1" style="display: block;">テストメッセージ１</p>
    <p class="msg1" style="display: block;">テストメッセージ２</p>
    <p class="msg2" style="display: block;">テストメッセージ３</p>
</body>
</html>

".msg1" のセレクタで class="msg1" の p タグのみが制御され、 "#area" のセレクタで id="area" の div タグが制御されることが分かると思います。

PR

JavaScript
0CM

2019/07/10

JavaScript jQueryを使った checkbox の操作方法

今回は checkbox の操作方法について説明します。
先ずは checkbox がチェックされているかを設定・取得するための prop 関数の説明をします。
指定された要素に対して「属性名」のみを引数にすると、属性値が返されます。また、「属性名」「属性値」を引数にすると対象の「属性名」に指定した「属性値」設定されます。

var v = $('要素').prop('属性名');   // 属性値が返る

$('要素').prop('属性名', 属性値);   // 属性値の設定

これを使った例として以下に HTML ファイル側のソースを示します。

■prop を使った例

<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--script src="./jquery-3.4.1.min.js"></script--><!-- IEの場合はこちら -->
<script type="text/javascript">
// 初期処理
$(function(){
    // 全てのチェックボックスをOFF
    $('#chk1').prop('checked', false);
    $('#chk2').prop('checked', false);
    $('#chk3').prop('checked', false);
});
//ON/OFF関数
function getData() {
    var strMsg = "チェック内容\n";
    // 各チェック判定
    if($('#chk1').prop('checked')){
        // チェックONの場合、自分の親のオブジェクトのTEXT取得
        strMsg += $('#chk1').parent().text() + "\n";
    }
    if($('#chk2').prop('checked')){
        strMsg += $('#chk2').parent().text() + "\n";
    }
    if($('#chk3').prop('checked')){
        strMsg += $('#chk3').parent().text() + "\n";
    }
    alert(strMsg);
    return false;
}
</script>
</head>
<body>
    <h2>test checkbox</h2>
    <label><input id="chk1" type="checkbox" value="1" />チェック1</label>
    <label><input id="chk2" type="checkbox" value="2" />チェック2</label>
    <label><input id="chk3" type="checkbox" value="3" />チェック3</label>
    <br />
    <button onclick="getData();">状態取得</button>
</body>
</html>

9行目の $(function(){ ... }); の部分は JQuery で初期処理を記述する時の一般的な方法です。
この関数内に記述された処理が、全てのHTMLソース（DOM）を読込んだ後で実行されます。
この例では全ての checkbox の checked 属性を false に設定しています。

ボタンクリック時に全ての checkbox のチェック状態を取得し、チェックされている場合に各 checkbox の親の label の要素のテキストを取得しています。

各 checkbox は label タグで囲まれているのですが、これはチェックボックスの右側のテキスト（”チェック1”など）をクリックしてもチェックボックス自身をクリックしたことと同様に動作します。（四角いボックスだけしか効かないと不便なので）

チェックボックス3個の処理をべた書きしましたが、もう少し JQuery 的な方法で記述してみます。

■prop を使った例２

<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
    // 全てのチェックボックスをOFF
    $('input[type="checkbox"]').prop('checked', false);
});
//ON/OFF取得関数
function getData() {
    var strMsg = "チェック内容\n";
    // 選択済チェックボックス
    $('input[type="checkbox"]:checked').each(function() {
        strMsg += $(this).parent().text() + "\n";
    });
    alert(strMsg);
    return false;
}
</script>
</head>
<body>
    <h2>test checkbox</h2>
    <label><input id="chk1" type="checkbox" value="1" />チェック1</label>
    <label><input id="chk2" type="checkbox" value="2" />チェック2</label>
    <label><input id="chk3" type="checkbox" value="3" />チェック3</label>
    <br />
    <button onclick="getData();">状態取得</button>
</body>
</html>

初期処理のセレクタはタグ名が input でかつ type 属性が "checkbox" と一致するものが対象となります。
ON/OFF取得関数のセレクタはタグ名が input でかつ type 属性が "checkbox" でチェックされているものが対象となります。

セレクタの書き方を工夫すれば簡単な記述になります。パッと見は分かりづらいですが慣れだと思います。

JavaScript
0CM

2019/07/09

JavaScript jQueryでAjaxを使いPHPからデータを取得する方法その２（郵便番号からの住所取得）

前回の「Ajaxを使いPHPからデータを取得する方法」では例として郵便番号からの住所取得を挙げましたが、それのデモ的なものを示したいと思います。

先ずは郵便番号のCSVファイルを以下のサイトからダウンロードする必要があります。

⇒郵便番号データダウンロード

今回はデモなので東京都のデータのみを利用しました。

HTML ファイル側のソースですが以下の様になります。
Ajax からの正常戻りの関数で、 PHPからのデータが住所１，住所２，住所３を配列にしたものを返してくるので、分解してそれぞれの表示タグに設定しています。

■Ajaxを使いPHPからデータを取得するHTMLファイルその２

<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Ajax関数
function getData() {
    // マスタデータの取得
    $.ajax({
        type: "POST"
      , url: "./ajax2.php"
      , data: { zip: $("#zip").val() }
    }).done(function(res){
        // ajaxがOK
        // JSON形式から文字列に変換
        var data = JSON.parse(res);
        // [,]で分解
        var arr = (""+data).split(',');
        // 住所の表示
        $("#addr1").text(arr[0]);
        $("#addr2").text(arr[1]);
        $("#addr3").text(arr[2]);
    }).fail(function() {
        // 取得エラー
        alert('取得エラー');
    }).always(function() {
        // 後処理(処理することが在れば)
    });
    return false;
}
</script>
</head>
<body>
    <h2>test ajax json 2</h2>
    郵便番号("-"無し):<input type="text" id="zip" size="10" maxlength="7" /><br />
    <p id="addr1">テスト住所１</p>
    <p id="addr2">テスト住所２</p>
    <p id="addr3">テスト住所３</p>
    <button onclick="getData();">Ajax</button>
</body>
</html>

外部PHPファイル ajax2.php 及び 13TOKYO.CSV がこのHTMLファイルと同じディレクトリに存在することにします。

■外部PHPファイル ajax2.php

<?php
// 郵便番号CSVファイル読込、配列データで返す
// (KEY:郵便番号 => array(住所1, 住所2, 住所3) )
function getZipCsv($filename) {
    // ZIPデータ配列
    $arrZip = array();
    // ファイルを開く
    $fp = fopen($filename, 'r');
    // whileで行末までループ処理
    while (!feof($fp)) {
        // fgetsでファイルを読み込み、変数に格納
        $txt = fgets($fp);
        if ($txt == "") continue;
        // SJISからUTF8への文字コード変換
        $txt = mb_convert_encoding($txt, 'UTF-8', 'sjis-win');
        // ["]を省く
        $txt = str_replace('"', '', $txt);
        // [,]で配列に分解
        $arr = explode(',', $txt);
        // 3カラム目をキーにして住所1, 住所2, 住所3を配列で退避
        $arrZip[$arr[2]] = array($arr[6], $arr[7], $arr[8]);
    }
    // fcloseでファイルを閉じる
    fclose($fp); 
    // 郵便番号配列データを返す
    return $arrZip;
}

// 郵便番号の取得
$zip = "";
if (isset($_POST["zip"]) == true && $_POST["zip"] != "") {
    $zip = $_POST["zip"];
}

// 東京の郵便番号CSVファイルを変数に格納
$arrZipData = getZipCsv('./13TOKYO.CSV');

$arrRet = array( "", "", "");
if ($zip != "" && array_key_exists($zip, $arrZipData)) {
    // 郵便番号のキーが存在
    $arrRet = $arrZipData[$zip];
}

// 結果を返す
echo(json_encode($arrRet));

このPHPファイルの関数 getZipCsv は指定されたCSVファイルをオープンし、 1行毎に読込を行い、SJISからUTF8への文字コード変換を行った後で郵便番号をキーとした配列に住所データを格納しています。

POSTされた zip を取得し、その値をキーとして、郵便番号配列データから該当データを取得し JSON データに変換して echo 関数で返してやります。

今回は東京都のデータしかありませんが、本当ならば全国のデータに対応する必要があります。そのためにはこの様なCSVファイルを都度読込んで処理するには重すぎるので、データベースに郵便番号マスタを作成して、そこから取得するのが一般的だと思います。

JavaScript
0CM

2019/07/09

JavaScript jQueryでAjaxを使いPHPからデータを取得する方法

今回は jQuery で用意されている Ajax 関数を使って PHP からデータを取得する方法について説明します。
この例は、よくあるのですが、マスタテーブルからコードを指定しその内容を表示する場合に使う方法です。（例えば、郵便番号を入力し対応する都道府県名、市町村名、住所を表示する等です。）

先ずは Ajax 関数の使い方ですが、以下の様な感じです。

<ajax関数の例>
$.ajax({
    type: "POST",
    url:  "hoge.php",
    data: { 
        data1: "1111",
        data2: "222" ,
        ...
    }
}).done(function(data){
    // 正常処理
}).fail(function() {
    // 取得エラー
}).always(function() {
    // 後処理
});
<パラメータ>
・type：リクエストのタイプ("POST"または"GET")を指定します。
・url ：リクエストを送信するURLを指定します。
・data：サーバーへ送信するデータを指定します。
      ：{ キー値1: データ値1, キー値2: データ値2, キー値3: データ値3, ... }
<メソッド>
・done(function(data){}：ajax 処理が成功した場合に呼ばれる関数宣言。
・fail(function(){}    ：ajax 処理でエラーが発生した場合に呼ばれる関数宣言。
・always(function(){}  ：ajax 処理の最後に呼ばれる関数宣言。

HTML ファイル側のソースですが以下の様になります。

■Ajaxを使いPHPからデータを取得するHTMLファイル

<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Ajax関数
function getData() {
    // マスタデータの取得
    $.ajax({
        type: "POST"
      , url: "./ajax1.php"
      , data: { id: $("#id").val() }
    }).done(function(res){
        // ajaxがOK
        $("#msg").text(JSON.parse(res));
    }).fail(function() {
        // 取得エラー
        alert('取得エラー');
    }).always(function() {
        // 後処理(処理することが在れば)
    });
    return false;
}
</script>
</head>
<body>
    <h2>test ajax json</h2>
    ID:<input type="text" id="id" size="10" maxlength="10" /><br />
    <p id="msg">テストメッセージ</p>
    <button onclick="getData();">Ajax</button>
</body>
</html>

外部PHPファイル ajax1.php がこのHTMLファイルと同じディレクトリに存在することにします。

■外部PHPファイル ajax1.php

<?php
// 処理モードの取得
$id = -1;
if (isset($_POST["id"]) == true && $_POST["id"] != "") {
    $id = intval($_POST["id"]);
}
// マスタ風の仮のデータ
$arrData = array(
    0 => "@@@@@@"
   ,1 => "AAAAAA"
   ,2 => "BBBB"
   ,3 => "CCCCCCCC"
);

$strRet = "";
if (0 <= $id && $id <= 3) {
    $strRet = $arrData[$id];
}

// 結果を返す
echo(json_encode($strRet));

このPHPファイルは POST された id を取得し、その値をキーとして、マスタデータの仮の配列データから文字列を取得します。その文字列を JSON データに変換して echo 関数で返してやります。
返されたデータは、HTML側の done 関数の引数に渡されます。そこでその引数の値を JSON データから逆変換し、HTMLのタグに設定してやります。

実際にHTMLファイルをブラウザで表示し、IDを入力しボタンを押下すれば対応するデータが表示されると思います。

JavaScript
0CM

2019/04/18

JavaScript jQueryでJavascriptファイルを動的に変更する方法

通常、Javascriptの関数等をまとめた外部Javascriptファイル（JSファイル と略します）を、HTML内の head 内で指定しますが、別の外部JSファイルに入れ替えたい場合もあります。

そこで今回は、この外部JSファイルを別のファイルに変更する方法について説明します。

■外部JSファイルを使うHTMLファイル

外部JSファイル test-script-chg1.js がこのHTMLファイルと同じディレクトリに存在することにします。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test jQuery</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="test-script-chg1.js"></script>
</head>
<body>
<p>メッセージあああ</p>
<div>
    <p class="msgchg1">メッセージ１</p>
    <p class="msgchg2">メッセージ２</p>
    <p class="msgchg3">メッセージ３</p>
</div>
<p class="msgchg4">メッセージ６</p>
<button class="btn1">TEXT変更</button> 
<button class="btn2">SCRIPT変更</button>
</body>
</html>

■外部JSファイル：test-script-chg1.js

$(function () {
    //<button class="btn1">のクリックイベントの関数を宣言
    $(".btn1").click(function(){
        //<div>要素内の<p>の全てのTEXTを変更
        $("div p").text("ああああああああ");
    });
    //<button class="btn2">のクリックイベントの関数を宣言
    $(".btn2").click(function(){
        //最初のスクリプトを削除
        $("script[src='test-script-chg1.js']").remove();
        //別のスクリプトを生成
        var src = $("<script>").attr({
                      "type": "text/javascript",
                      "src":  "test-script-chg2.js"
                  });
        //スクリプト追加
        $("head").append(src);

        //以下の方法でもOK
        //$("<script>").attr("type","text/javascript").attr("src", "test-script-chg2.js").appendTo("head");

        //ボタンを不可設定
        $(".btn2").prop('disabled', true);
    });
});

このJSファイルは、.btn1 と .btn2 のクリックイベント関数を宣言しています。
.btn2 のクリックイベント関数で最初に読込んだJSファイル test-script-chg1.js を削除し、新しい test-script-chg2.js を読込んでいます。
JSファイルを削除するセレクタの指定がミソなのですが、このセレクタはHTML要素の script に対して script の引数が test-script-chg1.js であるものを示します。
これは属性フィルタと呼ばれるもので、以下の様に指定します。

$("[属性名='属性フィルタ値']")

「=」は演算子でこの場合は「属性フィルタ値」と完全に等しいものが対象になります。
演算子は「=」の他に以下の様なものが在ります。

!= ... 指定した「属性フィルタ値」と異なる要素
^= ... 指定した「属性フィルタ値」と前方一致する要素
$= ... 指定した「属性フィルタ値」と後方一致する要素
*= ... 指定した「属性フィルタ値」と部分一致する要素
~= ... 指定した「属性フィルタ値」と単語として一致する要素

実際に以下を動作させると、「SCRIPT変更」ボタン押下後は、「TEXT変更」ボタン押下時に div タグ内の全ての p タグのテキストが「いいいいいいい」に変わります。「ああああああああ」ではないことに注意して下さい。
⇒Javascriptファイルの動的に変更の例

■動的に読込まれる外部JSファイル：test-script-chg2.js

$(function () {
    //<button class="btn1">のクリックイベントの関数を宣言
    $(".btn1").click(function(){
        //<div>要素内の<p>の全てのTEXTを変更
        $("div p").text("いいいいいいい");
    });
});

JavaScript
0CM