アーシの毎日インプット

毎日1つ以上学習する。学習した内容を公開する。を目標に自分のスキルアップを目指します。

hello world:ブログでプログラミング1

スポンサードリンク

今日からはてなブログを利用してプログラミングの勉強をしていきます。

 

web系のプログラミングはほとんど経験ありませんが、他の言語のプログラミングはいくつか経験しているので、なるべくサクサク学んでいきたいなと思っています。

 

今回はブログにボタンを設置して、そのボタンをクリック(タップ)すると「Hello World!」と表示されるようにしたいです。

そのボタンさえでき上がれば、「Hello World!」部分を他の文字列に置き換えることで、色々な文章を表示可能になります。

おそらくプログラミングを学ぶ人の多くが最初に挑戦する課題です。

 

【途中経過】

web系プログラミングといったらJavaScript

はてなブログJavaScriptが使用可能かどうかを調べてみました。

 

結果、下記のhtmlタグの間にJavaScriptのプログラムを書けば動くらしいとのこと。

 <script type="text/javascript"></script>

 

これで、プログラミングの準備は整いました。

 

ちなみに、単純に「<script type="text/javascript">document.write("Hellp World!");</script>」とプログラムをかいた場合・・・

<結果>

ただ、「Hello World!」が文字として表示されるだけです。

 

ということは、次はボタンの作り方を学ばないといけません。

 

ボタンの作り方を調べてみたところ、このhtmlタグが有効そうでした。

 <input id="id名" type="button" value="表示名" />

 

ボタンはhtml側で作って、処理を行うのはJavaScriptにお任せ!ということですね。

 

あとはボタンと処理を紐づけてあげましょう。

ボタン側のidをHelloWorldに設定し、JavaScript側は次の処理で待ち構えてあげましょう。

document.getElementById("HelloWorld").onclick = function() {
  document.write("Hello World!");
}

 

これで完成です。

 

【完成品はこちら!】

 

不便だという人が居ても、エンジニアは「仕様通りです。」と回答する不出来なプログラムです。

みなさんも、エンジニアに仕様を伝えるときは慎重に!!

 

表示の仕方については今後の課題ということで・・・

 

【アーシの原点】

【頭を鍛える迷路集】


スポンサードリンク