はてなブログでjavascriptが書けることを知った
足し算するだけのコードを試しに書いてみた。
最近仕事でjavascriptを書く機会があったこともあり、ふと思った。普段書いてるブログってjavascript埋め込めたら結構色々なことできね?と。 調べたらはてなブログはjavascriptを埋め込むことができるらしい。 今回は実際に埋め込めるか試してみることにした。 今回はjqueryを使うので次のタグを最初に埋め込んでいる。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
次に、入力とかするためのinputタグ(html)を使って入力できるようしたものである。
+ =
上記のを表示するためのhtmlは以下
<input id='plus1' type=number> + <input id='plus2' type=number > = <span id='result_plus'></span><br> <input id='sum_button' type=button value='計算'>
数値を入力して計算ボタンを押せば、足し算された結果が表示される。(the サンプルプログラム)
※試しに書いただけのものなので入力チェックとかはしてません。
$(function() { let add = function(a, b) { return Number(a) + Number(b); }; $('#sum_button').click(function() { a = $('#plus1').val(); b = $('#plus2').val(); res = add(a, b) $('#result_plus').text(res); }); });
jqueryで入力された値を取得して、ボタンが押されたら足してそれを対象箇所に出力している。
やってみた感想
はてなブログは当たり前だがブログ用なのでプログラムを書くようには記事編集のところはできていない。 今回は簡単なものだったので直接打ち込んだが、プログラミングエディタではないので非常に面倒臭かった。 はてなブログに埋め込む用のスクリプトは別のところで書いて、出来上がったものを貼り付けるようにすれば楽だし色々できそうだ。 Tensorflow.jsなんてものも出てきてるし、無料ブログで機械学習みたいなこともできそうだ。
気が向いた時の知識のアウトプットだったはてなブログの楽しみが一つ増えた。