5,214 total views, 3 views today
最近、Android用のアプリを開発するために、Javaを勉強した。
ところで、Webページ上で何らかのインタラクティブな動作を実現するには、JavaScriptを使うのがスタンダードだということで、今度はJavaScriptを勉強することにした。
Javaを先に勉強したためか、JavaScriptは割とすんなり理解できた。記述の仕方も似ている部分が多々あった。
とはいえ、両者は全くの別物ということで、「カー」と「カーペット」の違いや、「ハム」と「ハムスター」の違いに例えられるくらい違うものらしい。
つまり、名前が似ている以外は、用途や文法が異なる全くの別物であるということだ。
JavaScriptを勉強した結果、以下のことができるようになった。
現在の日時を表示
文字列を表示する練習
この表示をするだけでも、ワードプレスの場合だとけっこう手こずった。
スポンサーリンク
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>
まとめ
- JavaとJavaScriptは似て非なるもの
- 文字列の表示ができるようになった
- forループ処理ができるようになった
- アニメーション表示ができるようになった