ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptの基本的な出力と埋め込みの書き方チュートリアル_基礎知識

JavaScriptの基本的な出力と埋め込みの書き方チュートリアル_基礎知識

WBOY
WBOYオリジナル
2016-05-16 15:36:021194ブラウズ

JavaScript には印刷機能や出力機能がありません。
HTML では、HTML 要素を操作するために JavaScript がよく使用されます。
HTML 要素を操作する
JavaScript から HTML 要素にアクセスするには、document.getElementById(id) メソッドを使用できます。
HTML 要素を識別するには「id」属性を使用し、要素のコンテンツを取得または挿入するには innerHTML を使用してください:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>

上記の JavaScript ステートメント (3f1c4e4b6b16bbbd69b2ee476dc4f83a タグ内) は Web ブラウザーで実行できます:

  • document.getElementById("demo") は、id 属性を使用して HTML 要素を検索する JavaScript コードです。
  • innerHTML = "段落が変更されました。" は、要素の HTML コンテンツ (innerHTML) を変更するために使用される JavaScript コードです。

HTML ドキュメントへの書き込み
テスト目的で、HTML ドキュメントに JavaScript を直接記述することができます:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<script>
document.write(Date());
</script>

</body>
</html>

コンテンツをドキュメントに書き込む場合のみ document.write() を使用してください。
ドキュメントの読み込みが完了した後に document.write が実行されると、HTML ページ全体が上書きされます。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
document.write(Date());
}
</script>

</body>
</html>

コンソールに書き込む
ブラウザがデバッグをサポートしている場合は、console.log() メソッドを使用してブラウザに JavaScript 値を表示できます。
ブラウザで F12 を使用してデバッグ モードを有効にし、デバッグ ウィンドウで [コンソール] メニューをクリックします。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。