javascriptの実行方法

作成日 2022.04.05
更新日 2022.11.07
javascript
javascript

javascriptの実行方法を記述してます。基本的にはブラウザで動作する言語なので、chromeやedgeなどのブラウザがあれば、簡単に実行することが可能です。ただし、ブラウザで動作するので古いブラウザや種類によっては、期待する動作にならないこともあります。

1. 環境
2. コードの記述
3. コンソールから直接実行
4. サンプルコードを実行

環境

OS windows11 home
ブラウザ chrome 107.0.5304.88

Javascript サンプル集はこちら

コードの記述

まずは、以下のメッセージをコンソールに表示するだけの簡単なコードを作成します。
ファイル名は「test.html」とします。

<script>
    console.log("hello world")
</script>

ファイル「test.html」を、作成したら、

ファイルをブラウザに直接ドラッグアンドドロップすれば、実行することが可能です。

ファイルを右クリックして、ブラウザで開くことも可能です。
※ちなみに、chromeの検証画面は「F12」を押下すれば開くことができます。

コンソールから直接実行

また、コンソールにコードを入力してエンターキーで直接実行することも可能です。

サンプルコードを実行

例えば、以下のコードを実行する場合は、さきほど作成した「test.html」にコードを貼り付けて、コードを保存して、再度ブラウザで開くことで、実行できます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<script>

  window.onload = () => {

    btn.onclick = () => { foo.innerHTML = "hello world" }

  }

</script>

<body>
  <div class="container mx-auto my-56 w-64 px-4">

    <div id="sample" class="flex flex-col justify-center">

      <h1 class="font-semibold text-neutral-500 text-lg mr-auto">実行結果</h1>

      <p id="foo" class="font-semibold text-lg mr-auto"></p>

      <button id="btn"
        class="mb-2 md:mb-0 bg-transparent hover:bg-lime-500 text-lime-700 font-semibold hover:text-white py-2 px-4 border border-lime-500 hover:border-transparent rounded">
        実行
      </button>

    </div>

  </div>
</body>

</html>

コードを貼り付けて、保存します。