最初の JavaScript 実験

はじめに

こんにちは、LabEx へようこそ！この最初の実験（Lab）では、JavaScript の古典的な「Hello, World!」プログラムを学びます。

下の続けるボタンをクリックして、実験を開始してください。

こんにちは、JavaScript

JavaScript は、ウェブサイトにインタラクティブ性を追加することができるプログラミング言語です。動的でインタラクティブなウェブページを作成するために使用されます。オブジェクト指向の機能を持つインタプリタ型のプログラミング言語です。

ここでは、ボタンをクリックしたときにメッセージを表示する簡単なウェブページを JavaScript を使って作成します。

WebIDE で index.html が作成されています。これを開き、以下のコードを追加してください。

<!doctype html>
<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
    <h1 id="message">Click the button to display the message!</h1>

    <button onclick="displayMessage()">Click me</button>

    <script>
      function displayMessage() {
        document.getElementById("message").textContent = "Hello, JavaScript!";
      }
    </script>
  </body>
</html>

上記のコードは、ボタンがクリックされたときにメッセージを表示します。メッセージは、id が message の h1 要素に表示されます。

onclick 属性は、ボタンがクリックされたときに displayMessage() 関数を呼び出すために使用されます。displayMessage() 関数は、h1 要素のテキストコンテンツを「Hello, JavaScript!」に変更します。

次に、右下隅のGo Liveボタンをクリックします。これにより、ポート 8080 でローカルウェブサーバーが起動します。

これで、Web 8080タブに切り替え、更新ボタンをクリックすると、変更を確認できます。

まとめ

おめでとうございます！最初の LabEx 実験（Lab）を完了しました。

LabEx についてもっと詳しく知り、その使い方を学びたい場合は、サポートセンター をご覧ください。また、ビデオ を見て、LabEx についてもっと学ぶこともできます。

プログラミングは長い旅ですが、次の実験（Lab） はクリック一つです。始めましょう！