せっかく業務で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でいう
'<○○ style="">' → CSS ```
に引っ越しするイメージに近い
例として簡単なコードを用意
```html: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";
}
といった記述が可能です。
第一歩はこれで終了。
どんどん投稿していきます。