Javascript 0から1 ～環境構築～

- 2月 06, 2019

Javascript 0から1 ～環境構築～:

せっかく業務で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"; 
   }

といった記述が可能です。

第一歩はこれで終了。

どんどん投稿していきます。

このブログを検索

IT音痴アラフィフおやじのストック記事倉庫