JavaScriptを勉強してできるようになったこと

 5,408 total views,  3 views today

最近、Android用のアプリを開発するために、Javaを勉強した。


ところで、Webページ上で何らかのインタラクティブな動作を実現するには、JavaScriptを使うのがスタンダードだということで、今度はJavaScriptを勉強することにした。


Javaを先に勉強したためか、JavaScriptは割とすんなり理解できた。記述の仕方も似ている部分が多々あった。


とはいえ、両者は全くの別物ということで、「カー」と「カーペット」の違いや、「ハム」と「ハムスター」の違いに例えられるくらい違うものらしい。


つまり、名前が似ている以外は、用途や文法が異なる全くの別物であるということだ。


JavaScriptを勉強した結果、以下のことができるようになった。

現在の日時を表示

現在の日時は、2025年3月27日 15時58分25秒

この表示をするだけでも、ワードプレスの場合だとけっこう手こずった。

var d1 = document.getElementById('times');
  var now = new Date();
  var year = now.getFullYear();//年
  var month = now.getMonth()+1;//月
  var day = now.getDate();//日
  var hour = now.getHours(); // 時
  var min = now.getMinutes(); // 分
  var sec = now.getSeconds(); // 秒
  var date = '<BR>現在の日時は、' + year + '年' + month + '月' + day + '日' + ' ' + hour + '時' + min + '分' + sec + '秒';
  d1.insertAdjacentHTML('afterend', date);

九九を表示

01 02 03 04 05 06 07 08 09
02 04 06 08 10 12 14 16 18
03 06 09 12 15 18 21 24 27
04 08 12 16 20 24 28 32 36
05 10 15 20 25 30 35 40 45
06 12 18 24 30 36 42 48 54
07 14 21 28 35 42 49 56 63
08 16 24 32 40 48 56 64 72
09 18 27 36 45 54 63 72 81

var kuku = document.getElementById('kuku');  
    for(var i=9; i>0; i--){
      for(var j=9; j>0; j--){
       var ans = i*j;
       if (String(ans).length == 1) {
         kuku.insertAdjacentHTML('afterend', '0' + ans + ' ');
       } else {
         kuku.insertAdjacentHTML('afterend', ans + ' ');
       } 
      }
    kuku.insertAdjacentHTML('afterend', '<BR>');
    }

びよーん

アニメーション表示の練習
下のオレンジ色の部分にマウスポインタをのせるか、タップすると”びよーん”と横に伸びる。
伸びた後は、マウスポインタを外すか、オレンジ色の部分以外をタップすれば、元に戻る。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script type="text/javascript">
            function bigFunc() {
                jQuery(this).stop().animate({width: "730px"}, 300 , "swing");
            }
            function smallFunc() {
                jQuery(this).stop().animate({width: "70px"});
            }
            jQuery(function () {    
                jQuery("#animeTarget").hover(bigFunc, smallFunc);           
            });
        </script>
        <style type="text/css">
        <!--
            #animeTarget{
                                color:#FFF;
　　　　　　　　　　　　　　　　   text-align:center;
                                width:70px;
                height:30px;
                background-color:#F90;
            }
        -->
        </style>

まとめ

• JavaとJavaScriptは似て非なるもの
• 文字列の表示ができるようになった
• forループ処理ができるようになった
• アニメーション表示ができるようになった