文字列をスクリプトから出力するにはどうしたらいいですか？
textContentプロパティを利用すると場所も指定しながら文字列を出力することができます。
textContentを使って文字列を出力する
JavaScriptを使用してHTMLの文書内に文字列を出力するには、HTML要素のtextContentプロパティを使用することができます。
textContentプロパティは、HTML要素のテキストコンテンツを取得したり設定したりするために使用されます。
document.getElementById(指定ID).textContent = 文字列;
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>
リスキリングでキャリアアップしてみませんか？
リスキリング(学び直し)は、経済産業省が推奨しており、
今だけ、最大７０％のキャッシュバックを受けることができます。
最大70％の給付金が出るおすすめのプログラミングスクール！
国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！
興味のある方はすぐに確認しましょう。
「文字列を出力する方法」のまとめ
JavaScriptの「文字列を出力する方法」のまとめです。
- HTML要素の
textContentプロパティを設定することで、HTML要素に文字列を設定、取得することができます。 alert()関数を使用すると、HTMLの文書内にスクリプトを記述して、文字列をダイアログボックスで表示することができます。console.log()関数を使用すると、JavaScriptのコンソールに文字列を出力することができます。
HTML要素のtextContentプロパティ、alert()関数やconsole.log()関数を使用することで、HTMLの文書内に文字列を出力することができます。
コメント