【HTML　×　CSS　×　 JavaScriptの関係性】Visual Studio Codeを使ったHellow world

HTMLとCSSとjavascriptの関係性についてまとめる。

以下のコードをコピペして、実行してみると上の関係性が理解できると思います。

最初に

まず空のフォルダを作成

以下のようなファルダを作成する。各ファイルは空のファイルで良いので拡張子は以下のようにする。

index.html
css
└ sample.css
js
└ sample.js

このフォルダをvscodeで開く。

次に

以下をコピペして各ファイルに張り付ける。 (コピペした後読みやすいように、説明はコードの中にコメントで記述。)

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  
  <!-- cssファイルを読み込む -->
  <!-- cssフォルダの下にsample.cssファイルを配置していることに注意 -->
  <link rel="stylesheet" href="css/sample.css"> 
 
</head>

<body class='position'>
  <div id='messeage1' class='position'>HTMLとCSSとJavascriptの基本です</div>
  <button id='button1' class='position'>推してください。</button>
　
  <!-- jsフォルダの下にsample.jsファイルを配置していることに注意 -->
  <script src='js/sample.js'></script>
</body>

</html>

sample.css

/* htmlファイルで'class'と指定した要素は、cssでは.***で指定する */
/* htmlファイルで'id'と指定した要素は、cssでは#***で指定する */
.position{
    position: absolute;
}

#messeage1{
    top: 20px;
    width: 300px;
    height: 200px;
    color: red;
}

#button1{
    top: 40px;
    width: 250px;
    height: 200px;
}

sample.js

//htmlファイルで作った'button1'のエレメントを取得する。
let button1Element = document.getElementById("button1");
　
//取得した'button'エレメントにclickされたときの処理を割り当てておく
button1Element.onclick = function() {

    //クリックされたら、ここに来る
    //以下、実行される
    alert('ありがとうございます。')
  };

ここまでできたら、vscodeでデバッグできるように設定する。

まず、vscodeにDebugger for Chromeをインストールする

f:id:nikumaro2:20191202202420p:plain — ①

次に、launch.jsonを自動作成する

f:id:nikumaro2:20191202202628p:plain — ②

launch.jsonを以下のように書き換える

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome Debugger",
            "file": "${workspaceFolder}/index.html"
        }
    ]
}

最後にブレークポイントを設定して処理を実行してみる

f:id:nikumaro2:20191202203806p:plain — ③

nikumaro2’s blog

webエンジニアです。HTML、CSS、Javascript、React.jsの開発についてまとめます。また、初心者英語TOEIC350点。音楽(ベース)、ゴルフなどもたまに、、