簡単にできると思っていた私が間違っていましたとも、えぇ・・・
最終的に、よくよく考えて見ると単純なところでつまづいていただけだったんだけど、その「よくよく考えて見ると単純なこと」と気付けるために、は、そう感じられる感性（の裏付けとなる知識）が必要だな、と強く強く実感した、なんとも学びの深いことでした。
ちなみにやりたかったことを簡単にいうと、
・Javascriptで日付を文字列にして取得
・HTMLのa href=”http:// ・・・xxx” <=このxxxの部分に文字列を入れたい
こんな話でした。
できたコードはいたって単純。
<html lang = “ja”>
<body>
<script type = “text/javascript”>
window.onload = function(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate();
var hour = ( d.getHours() < 10 ) ? ‘0’ + d.getHours() : d.getHours();
var min = ( d.getMinutes() < 10 ) ? ‘0’ + d.getMinutes() : d.getMinutes();
var sec = ( d.getSeconds() < 10 ) ? ‘0’ + d.getSeconds() : d.getSeconds();
var timestamp = new String(year + “-” + month + “-” + day + “-” + hour + “:” + min + “:” + sec);
var element = document.getElementById(“test”);
element.href = “boo” + timestamp;
}
</script>
<a id =”test” >
</body>
</html>
こんな感じです。
ちなみに、タイムスタンプの作り方は以下のサイトからコピペしm学びました。
コンパイル言語のC++と、スクリプト言語のJavascriptはちょっとした壁があった
ちなみに、上のコードがちゃんと動くのを確認するまで、かかった時間３時間・・・
たかだかこのくらいのコードにどんだけ時間かけてんだよ、という感じですが。
何がダメだったか、というと、
window.onload = function(){ }
このくだり。
これがないので、タイムスタンプがうまく作れない、という状態でした。
Qtを使ったことがあったのでよくよく考えたら、処理をするためのシグナルが必要だったんですけど、それに気づかず・・・
Javascriptの基本がなってないんだろう、と思い、ProgateのJavascrpt入門コースをやり、
うわー、JavaScriptって、セミコロンが必要なとこといい、newでインスタンス生成するところといい、C++と似てんじゃん、よゆ〜！
と思っていたのが、最初の１時間くらい。
その後、格闘しました。
<script type = “text/javascript”>
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate();
var hour = ( d.getHours() < 10 ) ? ‘0’ + d.getHours() : d.getHours();
var min = ( d.getMinutes() < 10 ) ? ‘0’ + d.getMinutes() : d.getMinutes();
var sec = ( d.getSeconds() < 10 ) ? ‘0’ + d.getSeconds() : d.getSeconds();
var timestamp = new String(year + “-” + month + “-” + day + “-” + hour + “:” + min + “:” + sec);
var element = document.getElementById(“test”);
element.href = “boo” + timestamp;
ずっと、このコードでなんでtimestampに、値が代入されないんだろう？
って思ってました。
で、使ったページがこれ。
CodePen！
すごく便利でした。
HTML, CSS, JSの３つを組み合わせたフロントエンド用のテストツールです。
いや、上の単純なコードだけだったんで、HTMLしか使わなかったんですけどね・・・
ただ、HTMLを直で編集して、ブラウザで開くのと違って、コードを書いてセーブすると、コンソールに反映される優れもの。
これは、開発速度とか、学習速度とか上がりますね。効率いい！
（プログラミング学習系のサイトを見ると大体そういう形式ですね）
で、コードを書きつつ、調べつつやっていたら、ふと気づいたんですよね。
[JavaScript] Aタグのリンク先URLを動的に変更する
<a id=“searchLink” href=“http://www.google.co.jp”>サイトへのリンク (Google)</a><br/> <hr /> <input type=“button” value=“Google” onclick=“button_click(0);” />
ボタンを押してURLと表示を変えるタイプのコードに、シグナルがあるの。。。
そう”button_click(0)”の部分。
あ、C++で使えるGUIフレームワークのQtはボタンなどのインタフェースと関数を、SIGNAL-SLOTで関連づけて動作するようにする仕組みなので、シグナルって勝手に言ってます。Javascriptでどういうのかはよくわかんなかった。
今回のコードは、ページが開かれた時にすぐ動作して欲しいやつだったので、それにあたるものは何か、というのを調べて出てきたのが、
window.onload = function( ){ }
のくだりでした。
こいつを入れて動いた時のちょっとした感動は、すごく初歩的な話ではあるんですが、初心を思い出す感動でしたね。
C++のシミュレーションプログラムだと、exeを起動すると上から順に処理されていくので、「起動」にあたるものを意識したことがなかった
C++で実験用のシミュレーションなどを書いていたのが主だったんですが、今回スクリプト言語で、プログラムを起動するきっかけになるものがどこかしらに必要で、それをきっかけに「動的な処理」が行われている、というのがわかりました。
さて、今回の最大の学びは、先人の言葉を借りたいと思います
生兵法は大怪我の元！
気軽に、やりますよって言ったのが怪我の元でございました。
が、やってみなければ、こう考えることもなく、プログラミングのモチベーションが上がることもなく、だったので、結果オーライ！
でも、次頼まれた時は、わからないふりをしてエンジニアに任せてしまおうかな・・・
フロントエンドも難しいですね。
結構楽しかったけどね！
昔はこれを買って、せっせとコードを書いていました。懐かしい。
今ならProgateとか、Paiza Learningとか、いい学習サービスがあるから楽しいですね。
- 作者: ハーバート・シルト,神林靖,トップスタジオ
- 出版社/メーカー: 翔泳社
- 発売日: 2010/10/20
- メディア: 大型本
- 購入: 8人 クリック: 14回
- この商品を含むブログ (3件) を見る
- 作者: 高橋和也,竹添直樹,里見知宏
- 出版社/メーカー: 翔泳社
- 発売日: 2013/07/02
- メディア: 大型本
- この商品を含むブログ (3件) を見る
＊おしまい＊
