Javascript 0から1 ～最初の一歩～ #JavaScript

せっかく業務でJavascript
を触っているので自分の記事にして
まずはひとりごとから
普段知ったことやつまづきを
もくもくと外に吐き出そうかなと(^^♪

～Hello World! まで

まずは、やった感が一番わかりやすい
画面に描画するところまで！
準備するのは
○○.html
○○.js
○○.css
の3つ！
テキストを作成して拡張子を変更するだけでサクッと作成できますね(^^)

続いて,○○.htmlを編集します。
ダブルクリックでブラウザで開いちゃう場合は、右クリックから「編集」で

開いたら

greeting.html

<script>
    alert("Hello world!!");
</script>

を記入して保存っ！！

○○.html
をブラウザから開いてみると

完←

.js と.cssの活用

まぁこんだけシンプルな処理であれば、HTMLファイルだけでも完成でもいいのかもしれませんが、スクリプトの処理と見た目の設定と、表示する内容と...と一つに記載してしまうと、

どこかを修正時に必ずそのファイル更新されるため、直接関連のないタグまで差分確認やテストの対象となりかねない。
→役割別に分割していた方が管理しやすく修正もしやすい

HTMLだけではなくJavascript,CSSを活用して
役割分担すると複雑な処理を組む時に煩雑にならないし、何より実装を進めてからの修正しやすい！！
HTML,Javascript,CSS　の役割は

HTML：画面の描画内容
Javascript：処理全般
CSS：画面のデザイン（動作や見た目）

HTMLでいう
'<script>' 　Javascript '<○○ style="">' → CSS
に引っ越しするイメージに近い

例として簡単なコードを用意

greeting.html

<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
<script>
   var i = "2018/02/06";
   alert("Hello world!!" + i);
</script>
</head>
<body>
<div id="T1"></div>
</body>
</html>

このソースを↓に分解して

greeting.html

<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
</head>
<body>
<div id="T1" style="red">挨拶をしましょう</div>
</body>
</html>

greeting.js

   var i = "2018/02/06";
   alert("Hello world!!" + i);

greeting.css

   body #T1{
       font-color:"red";
   }

といった記述が可能です。
第一歩はこれで終了。
どんどん投稿していきます。