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

管理人

8年 ago

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

5,198 total views, 1 views today

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

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

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

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

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

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

1 現在の日時を表示
2 九九を表示
3 びよーん
4 まとめ

現在の日時を表示

文字列を表示する練習

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

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);

九九を表示

forループ文（繰り返し処理）を使う練習

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>