HTML 基本チュートリアル

HTMLメディア

HTMLリファレンスマニュアル

HTML5 基本チュートリアル

HTML5 API

HTML5 メディア

HTML ビデオ（Video）再生 HTML カラーヴァリュー

HTML スクリプト

JavaScriptはHTMLページに強い動的性とインタラクティブ性を提供し、javascriptを使用してウェブページのエフェクトを実現できます。

オンラインサンプルデモ

スクリプトを插入する方法
スクリプトをHTMLドキュメントに挿入する方法

HTML <script>タグ

JavaScriptは、画像操作、フォーム検証、およびコンテンツの動的更新に最もよく使用されます。

以下のスクリプトはブラウザに"Hello World!"を出力します：

例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>　
</head>
<body>
<script>
document.write("Hello World!")
</script>　
</body>
</html>

テストしてみる ‹/›

HTML<noscript>タグ

ブラウザがスクリプトをサポートしていない場合やスクリプトが無効になっている場合に、<noscript>要素内の内容が表示されます：

例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>　
</head>　
<body>
<script>
document.write("Hello World!")
</script>
<noscript>申し訳ありません、あなたのブラウザはJavaScriptをサポートしていません！/noscript>
<p>JavaScriptをサポートしないブラウザは、<noscript>要素で定義された内容（テキスト）を使用して代替します。</p>
　
</body>
</html>

テストしてみる ‹/›

JavaScriptスクリプトの効果デモ

JavaScriptのサンプルコード:

JavaScriptは直接HTML出力に書き込むことができます:

例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
　　　　
<p>
JavaScriptはdocument.writeを使用して直接HTML出力ストリームに書き込むことができます：
</p>
<script>
document.write("<h1>これはH1タイトル/h1");
document.write("<p>これはP段落です。</p>");
</script>
<p>
HTML出力ストリーム内でのみ使用できます<strong>document.write</strong>。
ドキュメントが読み込まれた後に使用する場合（例えば、関数内で）、全体のドキュメントをオーバーライドします。
</p>
</body>
</html>

テストしてみる ‹/›

JavaScriptイベントリスナー:

例

<html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>　
</head>
<body>
<h1>初めてのJavaScriptスクリプト</h1>
<p　id="demo">
JavaScriptはイベントをトリガーできます、例えばボタンクリック時。</p>
<script>
function　test_js()
{
　　　　document.getElementById("demo").innerHTML="Hello　JavaScript(oldtoolbag.com)!";
}
</script>
<button　type="button"　onclick="test_js()">押す</button>
</body>
</html>

テストしてみる ‹/›

JavaScriptでHTMLスタイルを処理:

例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本チュートリアル(oldtoolbag.com)</title>　
</head>
<body>
　　　　
<h1>初めてのJavaScript</h1>
<p　id="demo">
JavaScriptはHTML要素のスタイルを変更できます(oldtoolbag.com)。
</p>
<script>
function　test_js()
{
　　　　x=document.getElementById("demo")　//　要素を見つける
　　　　x.style.color="#ff3300";　　　　　　　　　　//　スタイルを変更
}
</script>
<button　type="button"　onclick="test_js()">ここをクリック</button>
　　　　
</body>
</html>

テストしてみる ‹/›

HTML スクリプトタグ

タグ	説明
<script>	クライアントスクリプトを定義
<noscript>	スクリプトをサポートしないブラウザの出力テキストを定義

HTML ビデオ（Video）再生 HTML カラーヴァリュー