[JavaScript]Bloggerブログに動的なプログラミング言語を導入する

投稿者：Y

ラベル：blogger

公開：2020年6月4日

更新：2021年5月18日

誕生日から年齢を計算する

コード

<form id="form1" method="post" name="form1">
    <table>
        <tbody><tr>
            <th>誕生日</th>
            <td>
                <select name="year">
                    <option value="1950">1950</option>
                    <option value="1951">1951</option>
                    <option value="1952">1952</option>
                    <option value="1953">1953</option>
                    <option value="1954">1954</option>
                    <option value="1955">1955</option>
                    <option value="1956">1956</option>
                    <option value="1957">1957</option>
                    <option value="1958">1958</option>
                    <option value="1959">1959</option>
                    <option value="1960">1960</option>
                    <option value="1961">1961</option>
                    <option value="1962">1962</option>
                    <option value="1963">1963</option>
                    <option value="1964">1964</option>
                    <option value="1965">1965</option>
                    <option value="1966">1966</option>
                    <option value="1967">1967</option>
                    <option value="1968">1968</option>
                    <option value="1969">1969</option>
                    <option value="1970">1970</option>
                    <option value="1971">1971</option>
                    <option value="1972">1972</option>
                    <option value="1973">1973</option>
                    <option value="1974">1974</option>
                    <option value="1975">1975</option>
                    <option value="1976">1976</option>
                    <option value="1977">1977</option>
                    <option value="1978">1978</option>
                    <option value="1979">1979</option>
                    <option value="1980">1980</option>
                    <option value="1981">1981</option>
                    <option value="1982">1982</option>
                    <option value="1983">1983</option>
                    <option value="1984">1984</option>
                    <option value="1985">1985</option>
                    <option value="1986">1986</option>
                    <option value="1987">1987</option>
                    <option value="1988">1988</option>
                    <option value="1989">1989</option>
                    <option value="1990">1990</option>
                    <option value="1991">1991</option>
                    <option value="1992">1992</option>
                    <option value="1993">1993</option>
                    <option value="1994">1994</option>
                    <option value="1995">1995</option>
                    <option value="1996">1996</option>
                    <option value="1997">1997</option>
                    <option value="1998">1998</option>
                    <option value="1999">1999</option>
                    <option value="2000">2000</option>
                    <option value="2001">2001</option>
                    <option value="2002">2002</option>
                    <option value="2003">2003</option>
                    <option value="2004">2004</option>
                    <option value="2005">2005</option>
                    <option value="2006">2006</option>
                    <option value="2007">2007</option>
                    <option value="2008">2008</option>
                    <option value="2009">2009</option>
                    <option value="2010">2010</option>
                    <option value="2011">2011</option>
                    <option value="2012">2012</option>
                    <option value="2013">2013</option>
                    <option value="2014">2014</option>
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                </select>年
                <select name="month">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>月
                <select name="days">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                </select>日
            </td>
        </tr>
        <tr>
            <th>年齢</th>
            <td><input name="age" type="text" value="" /></td>
        </tr>
    </tbody></table></form>
  
<script>
var formObj = '';
 
var zeroFormat = function(v, n) {
    vl = String(v).length;
    if (n > vl) {
        return (new Array((n - vl) + 1).join(0)) + v;
    } else {
        return v;
    }
};
 
var ageCalculator = function(year, month, day) {
    var dateObj  = new Date(),
        today    = parseInt('' + dateObj.getFullYear() + zeroFormat(dateObj.getMonth() + 1, 2) + zeroFormat(dateObj.getDate(), 2)),
        birthday = parseInt('' + year + zeroFormat(month, 2) + zeroFormat(day, 2));
 
    formObj.age.value = parseInt((today - birthday) / 10000);
};
 
var changeDate = function(mode) {
    var tYear   = formObj.year,
        tMonth  = formObj.month,
        tDays   = formObj.days,
        selectY = tYear.options[tYear.selectedIndex].value,
        selectM = tMonth.options[tMonth.selectedIndex].value,
        selectD = tDays.options[tDays.selectedIndex].value,
        dateObj,
        gDate,
        i;
 
    if (mode === 'date') {
        dateObj = new Date(selectY, selectM, 0);
        gDate   = dateObj.getDate();
 
        tDays.length = 0;
 
        for (i = 1 ;i <= gDate; i++) {
            tDays.options[i] = new Option(i, i);
        }
 
        tDays.removeChild(tDays.options[0]);
 
        if (selectD > tDays.length) {
            tDays.options[tDays.length - 1].selected = true;
        } else {
            tDays.options[selectD - 1].selected = true;
        }
    }
 
    ageCalculator(selectY, selectM, selectD);
};
 
formObj = document.form1;

formObj.year.onchange = function() {
    changeDate('date');
};
 
formObj.month.onchange = function() {
    changeDate('date');
};

formObj.days.onchange = function() {
    changeDate('age');
};
</script>

表示

誕生日

1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 年 1 2 3 4 5 6 7 8 9 10 11 12 月 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 日

年齢

解説

formタグ

入力・送信フォームを作る。

method属性でpostを指定すると、

ウェブサーバーへの送信方法がURLではなく本文となる。

文章を認識する

コード

<script>
        var flag_speech = false;
        var speech_recognition;

        function startRec() {

            flag_speech = true;

            initSpeech();

            speech_recognition.start();
        }

        function initSpeech() {
            speech_recognition = new webkitSpeechRecognition();

            speech_recognition.lang = 'ja-JP';
            speech_recognition.continuous = true;

            speech_recognition.addEventListener('start', function (event) {
            }, false);

            speech_recognition.addEventListener('result', function (event) {
                var results = event.results;
                for (var i = event.resultIndex; i < results.length; i++) {
                    if (results[i].isFinal) {
                        document.getElementById('result_text').innerHTML += results[i][0].transcript + "\n";
                    }
                    else {
                    }
                }
            }, false);
        }
</script>

<div>
        <input onclick="startRec();" type="button" value="音声認識開始" />
</div>
        <textarea class="textContent" id="result_text"></textarea>

表示

解説

Web API(Application Programming Interface)の

SpeechRecognitionを利用して音声を認識しています。

文章を読み上げる

コード

<script>
        var speech;
        var speech_uttr;
    
        function initSpeak() {
            speech = window.speechSynthesis;
            speech_uttr = new SpeechSynthesisUtterance();
            speech_uttr.lang = 'ja-JP';
            speech_uttr.rate = 1;    
            speech_uttr.addEventListener('start', function () {
            });    
            speech_uttr.addEventListener('end', function () {
            });
        }
    
        initSpeak();
    
        function start() {
            speech_uttr.text = document.getElementById("speak_text").value;    
            speech_uttr.pitch = document.getElementById("my_pitch").value;
            speech_uttr.rate = document.getElementById("my_rate").value;    
            speech.speak(speech_uttr);
        }   
    </script>

        <div>・下のエリアに読み上げたい文章を入力してください。</div>
        <textarea id="speak_text"></textarea>
        <input type="button" onclick="start();" value="start">
        <input type="button" onclick="speech.cancel();" value="cancel">
        <input type="button" onclick="speech.pause();" value="pause">
        <input type="button" onclick="speech.resume();" value="resume">
        <div> 以下の設定はcancel後のstartで反映されます。</div>
              <div> ・高さ
                <input id="my_pitch" type="number" value="1"></div>
              <div> ・速さ
                <input id="my_rate" type="number" value="1"></div>

表示

・下のエリアに読み上げたい文章を入力してください。

 

以下の設定はcancel後のstartで反映されます。

・高さ

・速さ

解説

Web API(Application Programming Interface)の

SpeechSyntesisを利用して合成音声を取得しています。

文字数をカウントする

コード

<textarea onkeyup="document.getElementById('count').value=this.value.length">

</textarea>

<div><input type="text" id="count"> 文字</div>

表示

・下のエリアにカウントする文字を入力してください。

文字

解説

全角も半角もスペースも改行も1カウントとみなす

textareaオブジェクト

複数行のテキスト入力欄を作成する

onkeyupイベント

ユーザーがキーを離した時にイベントが発生する

document.getElementById()

指定したid値を持つ要素を返す

目次をつくる

コード

<script type="text/javascript"><!--

function contents( CParent , CChild ){

ECParent = document.getElementById( CParent );

ECChild = document.getElementById( CChild ).style;

if (ECChild.display == "none"){

ECChild.display = "block";

ECParent.innerHTML = ECParent.innerHTML.replace( "[開く]" , "[閉じる]" );

}else{

ECChild.display = "none";

ECParent.innerHTML = ECParent.innerHTML.replace( "[閉じる]" , "[開く]" );

}

}

// --></script>

<div id="CP" onclick="contents( 'CP' , 'CC' )">目次 [開く]</div>

<div style="margin-left: 2em;">

<div id="CC" style="display: none;">

<div>目次をつくる</div>

<div>最終更新日を表示する</div>

<div>アクセス解析に用いるcookie情報を表示する</div>

</div>

</div>

表示

・下の動画では実際に動く様子が見られます。

・下の目次をクリックしてみてください。

目次 [開く]

目次をつくる

最終更新日を表示する

アクセス解析に用いるcookie情報を表示する

解説

function関数

contents( CParent , CChild )を定義する

document.getElementById()

指定したid値を持つ要素を返す

if/else構文

指定された条件が、

真なら文を実行/偽ならもう一方の文を実行

replace()

ECParent内HTMLの[開く]と[閉じる]を置換する

onclick属性

「目次 [開く]」をクリックした時に

contents( 'CP' , 'CC' )を実行する

最終更新日を表示する

コード

<script type="text/javascript"><!--

LMD = new Date( document.lastModified );

Y = LMD.getFullYear();

M = LMD.getMonth() + 1;

D = LMD.getDate();

LMYMD = "最終更新日： " + Y + "年" + M + "月" + D + "日";

document.write( LMYMD );

// --></script>

表示

解説

new Date()

document.lastmodifiedから与えられた日付をLMDと定義する

getFullyear()

与えられた「年」の数を返す

×getYear()

→与えられた「年」の数から1900を引いた数を返す

getMonth()

与えられた「月」の数を0を起点として返す

(0-11の値を取得するため、+1が必要)

getDate()

与えられた「日」の数を返す

document.write()

LMYMDに定義されたものを記述する

アクセス解析に用いるcookie情報を表示する

コード

<script type="text/javascript"><!--

document.write( document.cookie );

// --></script>

表示

※環境によって表示されない場合があるようです。

解説

document.write()

document.cookieの情報を記述する

・_gaという名前のcookie

・cookieのバージョン.cookieのドメイン情報.ランダム数列.初回訪問時のタイムスタンプ

・ユーザーを区別するために使用する

・有効期限は2年間