MENU

    JavaScript　文字列を出力する方法

    PR
    JavaScript

    文字列をスクリプトから出力するにはどうしたらいいですか？

    textContentプロパティを利用すると場所も指定しながら文字列を出力することができます。

    目次

    受講者数No.1！初心者からプロへ導く信頼のスクール

      短期間で習得可能！未経験から実践力を磨く充実のプログラム

      テックアカデミー 公式ページへ ≫

      今なら無料相談でAmazonギフトカードがもらえる！

      textContentを使って文字列を出力する

      　JavaScriptを使用してHTMLの文書内に文字列を出力するには、HTML要素のtextContentプロパティを使用することができます。

      textContentプロパティは、HTML要素のテキストコンテンツを取得したり設定したりするために使用されます。

      document.getElementById(指定ID).textContent = 文字列;

      CHECK

      getElementByIdは、HTML文書内で指定されたid属性を持つ要素を取得するために使用されるJavaScriptの関数です。

      次のサンプルでは、HTMLのp要素にid属性が設定されており、そのid属性を使用して、JavaScriptでtextContentプロパティを操作しています。

      <!DOCTYPE html>
<html>
<body>

<h1>JavaScriptを使用した文字列の出力</h1>

<p id="demo">ここに文字列が出力されます。</p>

<script>
    document.getElementById("demo").textContent = "Hello, World!";
</script>

</body>
</html>

      上記の例では、HTML文書内のp要素を取得し、そのtextContentプロパティに文字列を設定しています。HTMLページが読み込まれると、p要素に「Hello, World!」という文字列が出力されます。

      指定したidの文字列を書き換えれるから表示位置は自由自在ってことですね！

      ワンポイント

      textContentプロパティは、HTML要素のテキストコンテンツを取得するときにも使用できます。次のようにして、HTML要素のテキストコンテンツを取得することができます。

      var text = document.getElementById(“demo”).textContent;

      アラートで文字列を出力する

      window.alertメソッドを利用すると文字列をダイアログボックスを出して表示することができます。

      window.alert(文字列);

      <!DOCTYPE html>
<html>
<body>

<h1>JavaScriptを使用した文字列の出力</h1>

<script>
    window.alert("Hello, World!");
</script>

</body>
</html>

      コンソールに文字列を出力する

      デバッグで文字列を出力したい場合はコンソールに出力することもできます。
      JavaScriptのコンソールに文字列を出力するには、console.log()関数を使用します。

      この方法では、Webブラウザの開発者ツールのコンソールタブで文字列を確認することができます。

      <!DOCTYPE html>
<html>
<body>

<h1>JavaScriptを使用した文字列の出力</h1>

<script>
    console.log("Hello, World!");
</script>

</body>
</html>
      Chromeのコンソール

      リスキリングでキャリアアップしてみませんか？

      リスキリング(学び直し)は、経済産業省が推奨しており、

      今だけ、最大７０％のキャッシュバックを受けることができます。

      リスキリング　給付金が出るスクール紹介

      最大70％の給付金が出るおすすめのプログラミングスクール！

      リスキリングで給付金が出るスクールを７つ紹介 ≫

      国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

      興味のある方はすぐに確認しましょう。

      「文字列を出力する方法」のまとめ

      JavaScriptの「文字列を出力する方法」のまとめです。

      • HTML要素のtextContentプロパティを設定することで、HTML要素に文字列を設定、取得することができます。
      • alert()関数を使用すると、HTMLの文書内にスクリプトを記述して、文字列をダイアログボックスで表示することができます。
      • console.log()関数を使用すると、JavaScriptのコンソールに文字列を出力することができます。

      HTML要素のtextContentプロパティ、alert()関数やconsole.log()関数を使用することで、HTMLの文書内に文字列を出力することができます。

      JavaScript
      JavaScript
      よかったらシェアしてね！
      • URLをコピーしました！
      • URLをコピーしました！
      目次