[JavaScript]TIL 7(211201)出力


HOW TO DISPLAY JavaScript


1. innerHTML property


前に見たように、document.getElementById()メソッドを使用してHTML要素を選択し、innerHTML属性を使用して要素の内容または属性値を変更します.
<!DOCTYPE html>
<html>
<body>
  
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>

<p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML = 5 +6;
</script>

</body>
</html>
起動すると次の画面が表示されます.

2. document.write() method


この方法は、最初にWebページにデータを出力するため、テストによく使用されます.
<!DOCTYPE html>
<html>
<body>
  
<h2>My Second Web Page</h2>
<p>My Second paragraph.</p>

<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>

<script>
  document.write(5+6);
</script>

</body>
</html>
起動すると次の画面が表示されます.

-HTMLドキュメントのロードが完了したdocument。Write()を使用すると、既存のHTMLがすべて削除されます。->WHY?


3. window.alert() method


ブラウザとは別のダイアログボックスでユーザーにデータを渡します.
これは最も簡単なデータを出力する方法です.
Windowsオブジェクトのすべてのメソッドまたはプロパティを使用する場合は、Windows接頭辞を省略できます.
<!DOCTYPE html>
<html>
<body>
  
<h2>My Third Web Page</h2>
<p>My Third paragraph.</p>

<script>
  window.alert(5+6);
</script>

</body>
</html>
実行すると、ダイアログボックスの下の画面が表示されます.

4. console.log() method


Webブラウザのコンソールからデータを出力します.
F 12を押し、メニューからコンソールをクリックすると、コンソール画面が表示されます.
デバッグに役立つように、ここでより詳細に出力します.
<!DOCTYPE html>
<html>
<body>

<h2>Activate Debugging</h2>

<p>F12 on your keyboard will activate debugging.<p>
<p>Then select "Console" in the debugger menu.</p>
<p>Then click Run again.</p>

<script>
  console.log(5+6);
</script>

</body>
</html>
Webブラウザで、F 12を押してコンソール画面を開き、実行すると、次の画面が表示されます.

JavaScript Print


window.print()


上記の方法で現在のウィンドウを印刷できます.
<!DOCTYPE html>
<html>
<body>
  
<h2>The window.print() Method</h2>
<p> Click the button to print the current page.</p>

<button onclick="window.print()">Print this page</button>

</body>
</html>
起動すると次の画面が表示されます.

ボタンをクリックして、印刷ウィンドウに移動します.

コメントサイト
- TCPSCHOOL.com
- w3schools.com