Code for Ube

ホームページ勉強会（フロントエンドについて）

0.Web制作はフロントエンドとバックエンドに分けられる

・フロントエンド：ユーザーがボタンを押したり、入力したりする部分
・フロントエンド使用言語：HTML,CSS,JavaScript,Python,Java等
・バックエンド：入力されたデータの処理、保存、結果の出力などをする部分
・バックエンド使用言語：PHP,Ruby,Java,Perl,JavaScript,Python,MySQL等

１.ホームページがブラウザから見れる仕組みについて

・世界中のPCにIPアドレスが割り振られ、そのアドレスを元にPC内のファイルにアクセスできる。
・そのPC内にあるホームページ用データ（html,css,javascriptなど）をブラウザソフト（ex.Internet Explorer)で開くと、ホームページを閲覧することができる。

２.自分のPC内のフォルダにホームページ用データを作成し、ブラウザソフトで開いてみる

・適当な場所にフォルダを作成し、メモ帳などで、語尾を.htmlとしたtest.htmlファイルを作成する。
・test.html内に適当な文字（ex.aaaなど）を書いてみる。
・test.htmlをブラウザにドラッグ＆ドロップする。
・ブラウザに適当な文字が表示される。

３.ホームページ用データの種類について

・html：構造を書く
・css：装飾を書く
・javascript：動的な処理を書く

4.コードの書き方について

・html,css,javascriptを全て、htmlファイルに書く方法もある。
・それぞれファイルを分ける方法もある。
・コードが増えてきた場合、それぞれファイルを分けた方がコードが見やすく、管理しやすい。

以下にコードのサンプルを記す。

（１）.html,css,javascriptを同一ファイルに記載

main.html

<html>
  <head>
    <style type="text/css">
    .input-item{
      color:red;
      font-size:20px;
      background-color:#111;
    }
    #output{
      color:red;
      font-size:20px;
      background-color:#111;
    }

    </style>
  </head>

  <body>
  <div class="input-item">入力</div>
  <div>気温[℃]</div>
  <input id="input1" type="text" name="input1" size="30" maxlength="20">
  <div>湿度[%]</div>
  <input id="input2" type="text" name="input2" size="30" maxlength="20">
  <div></div>
  <div style="margin:10px;background-color:#444;"></div>
  <input type="button" value="計算" onclick="onButtonClick();" />
  <div style="margin:10px;background-color:#444;"></div>
  <div style="margin:10px;background-color:#444;"></div>
  <div class="input-item">出力</div>
  <div>鳥の数</div>
  <div id="output"></div>

  </body>

</html>

<script type="text/javascript" language="javascript">
  function onButtonClick() {
    var input1=0;
    var input2=0;
    var output=0;
        alert(input1);

    input1 = document.getElementById("input1").value;
    input2 = document.getElementById("input2").value;
    input1 = Number(input1);
    input2 = Number(input2);

        alert(input1);

    output=input1+input2;
    document.getElementById("output").innerText=output;
  }
</script>

（２）.html,css,javascriptを別ファイルに記載

main.html


<html>
  <head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript" src="main.js"></script>
  </head>



  <body>
  <div class="input-item">入力</div>
  <div>気温[℃]</div>
  <input id="input1" type="text" name="input1" size="30" maxlength="20">
  <div>湿度[%]</div>
  <input id="input2" type="text" name="input2" size="30" maxlength="20">
  <div></div>
  <div style="margin:10px;background-color:#444;"></div>
  <input type="button" value="計算" onclick="onButtonClick();" />
  <div style="margin:10px;background-color:#444;"></div>
  <div style="margin:10px;background-color:#444;"></div>
  <div class="input-item">出力</div>
  <div>鳥の数</div>
  <div id="output"></div>

  </body>

</html>

main.css

.input-item{
  color:red;
  font-size:20px;
  background-color:#111;
}
#output{
  color:red;
  font-size:20px;
  background-color:#111;
}

main.js


function onButtonClick() {
  var input1=0;
  var input2=0;
  var output=0;
      alert(input1);

  input1 = document.getElementById("input1").value;
  input2 = document.getElementById("input2").value;
  input1 = Number(input1);
  input2 = Number(input2);

      alert(input1);

  output=input1+input2;
  document.getElementById("output").innerText=output;
}

 $('#header .burger').click(function(){
     if($('#header .burger-nav').css('display')=='none')
     {
      $('#header .burger-nav').slideDown(200);
     }
     else
     {
       $('#header .burger-nav').fadeOut(200);
     }
   });

5．フロントエンドの動的処理にPythonを使ってみる

・今(2018年）流行りのPythonの使い方を学ぶ。
・JavaScriptとほぼ同じように使用することができる。
・JavaScriptよりコードが完結になる。