0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【1日目】ボタンを押したら何かが表示されるプログラムを作る

Posted at

0.はじめに

この記事はプログラミングの特訓をしている高専4年生(もうすぐ5年生)がその日勉強した内容を記録していきます。
何か月か続く予定。

1.本日の課題

今日はHTMLとJavaScriptを使ってボタンを押したら何かを表示させるプログラムを作成する。
HTMLもJavaScriptもあまり触ったことがなくネットを参考に自分なりに書いてみた。

<html>
 <body>
  <input type="button" value="test button" onclick="buttonClick()">
 <div id="id1"></div>
  <script>
   function buttonClick() {
   p = document.getElementById("id1");
   p.innerHTML = "表示されました!";
   }
  </script>
 </body>
</html>

このプログラムを先生に評価してもらったところ次の改善点を告げられた。


  • id名はどういった役割かの名前にする
  • 変数の前にletを付ける
  • 関数の名前

これらの改善点からプログラムを修正した↓

<html>

<body>
    <input type="button" value="test button" onclick="clickedButton()">
    <div id="output"></div>


    <script>
        function clickedButton() {
            let output = document.getElementById("output");
            output.innerHTML = "表示されました!";
        }
    </script>

</body>

</html>

2.本日の学んだこと

  • HTMLの基本的な使い方のおさらい、JavaScriptを少し理解することができた。
  • 関数やidの名前の付け方は意識してみる。
  • プログラムは結構見た目大事。

今日から本格的に就活に向けてのプログラミングの勉強を始めた。Qiitaに書き込むのもこれが初めてなので拙い点があればごめんなさい…

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?