takataka430’s blog

.NET系を中心に勉強したことのまとめを書きます

JavaScript入門してみた（ローカル環境作成編）

JavaScript

以前から興味があったJavaScriptの勉強を始めたので、記録を残してみようと思います。

環境構築

エディタは普段ちょこちょこ使ってるVisual Studio Codeを選択。
インストール後、ローカルでWEBページを確認するため、「Live Server」というエクステンションを追加します。これを使うと、ソースコードを変更した時にWEBページも自動で更新してくれます。
（Visual Studio Codeがなくてもメモ帳などで代用できます）

コード

とりあえずHello,Worldしよう！と思ったのですが、それだけだと面白くないので「ボタンをクリックしたら数字が増えていく」ページを作りました。

index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>TestPage</title>
</head>
<body>
    <button id="add">1を足す</button>
    <p id="number"></p>
<script>
    'use strict';
    let num = 0 ;
    
    //数字を画面に表示する
    DisplayNumber(num);

    //「1を足す」ボタンがクリックされた時の動き
    document.getElementById("add").onclick = function(){
        num += 1;

        //数字を画面に表示する
        DisplayNumber(num);
    }

    //数字を画面に表示するファンクション
    function DisplayNumber(number){
        document.getElementById("number").textContent=number;
    }
</script>
</body>
</html>

実行

Visual Studio Codeでindex.htmlを右クリックし、Open with Live Serverを選択するとブラウザに表示されます。

f:id:takataka430:20200622032252g:plain

以上、ローカルで実行する方法でした。せっかくなのでこれをWeb上で見れるようにしたいと思います。続きは次回の記事で。

2020/6/24 追記

次回の記事を書きました。 takataka430.hatenablog.com