最新のWeb開発のチュートリアル
×

JS チュートリアル

JS HOME JS 導入 JS どこへ JS 輸出 JS 構文 JS ステートメント JS 注釈 JS 変数 JS 演算子 JS 算術 JS 割り当て JS データの種類 JS 機能 JS オブジェクト JS 範囲 JS イベント JS ストリング JS 文字列メソッド JS 数字 JS 数のメソッド JS 数学 JS 日付 JS 日付形式 JS 日付の方法 JS 配列 JS アレイ方式 JS ブール値 JS 比較 JS 条件 JS スイッチ JS ループ For JS ループしながら JS ブレーク JS 型変換 JS 正規表現 JS エラー JS デバッギング JS 巻き上げ JS strictモード JS スタイルガイド JS ベストプラクティス JS 間違い JS パフォーマンス JS 予約語 JS JSON

JS フォーム

フォームバリデーション フォームAPI

JS オブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクトプロトタイプ

JS 機能

関数定義 ファンクションのパラメータ 関数の呼び出し 関数クロージャ

JS HTML DOM

DOM イントロ DOM メソッド DOM 資料 DOM 要素 DOM HTML DOM CSS DOM アニメーション DOM イベント DOM EventListener DOM ナビゲーション DOM ノード DOM ノードリスト

JS ブラウザ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS

JS 例 JS HTML DOM JS HTML 入力 JS HTML オブジェクト JS HTML イベント JS ブラウザ JS クイズ JS 概要

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

JavaScript オブジェクト HTML DOM オブジェクト


 

JavaScriptどこへ


JavaScriptが中に配置することができます<body><head> HTMLページのセクション。


<script>タグ

HTMLでは、JavaScriptコードが間に挿入されなければならない<script></script>タグ。

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

:古い例では、type属性使用することができ<script type="text/javascript">
このタイプの属性は必須ではありません。 JavaScriptは、HTMLのデフォルトのスクリプト言語です。


JavaScriptの関数とイベント

JavaScriptのfunctionのために、「尋ねた"ときに実行することができますJavaScriptコードのブロック、です。

イベントが発生した場合、例えば、機能は、ユーザがボタンをクリックしたときと同様に、実行することができます。

あなたは後の章で関数とイベントについて多くを学びます。


内のJavaScript <head>または<body>

あなたは、HTMLドキュメント内のスクリプトの任意の数を配置することができます。

スクリプトは中に配置することができ<body> 、または中<head> HTMLページのセクション、またはその両方で。

一箇所ですべてのコードを保ち、常に良い習慣です。


内のJavaScript <head>

この例では、JavaScriptの機能を内に配置されている<head> HTMLページのセクション。

ボタンがクリックされたときに関数が(と呼ばれる)が呼び出されます。

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>

<h1>My Web Page</h1>

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

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

»それを自分で試してみてください

でJavaScriptの<body>

この例では、JavaScriptの機能を内に配置された<body> HTMLページのセクション。

ボタンがクリックされたときに関数が(と呼ばれる)が呼び出されます。

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

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

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>
»それを自分で試してみてください

の下部にあるスクリプトを配置することをお勧めします<body>要素。
スクリプトのコンパイルは表示を遅くすることができますので、これは、ページの負荷を向上させることができます。


外部のJavaScript

スクリプトはまた、外部ファイルに配置することができます。

myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}

同じコードは、多くの異なるウェブページで使用される場合、外部スクリプトが実用的です。

JavaScriptのファイルのファイル拡張子は持っている.js

SRC(ソース)属性でスクリプトファイルの名前を入れて、外部スクリプトを使用するには<script>タグ:

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
»それを自分で試してみてください

あなたは、外部スクリプト参照配置することができます<head>または<body>好きなように。

それは正確にどこに位置していたかのようにスクリプトが動作します<script>タグが配置されています。

外部スクリプトは含めることはできません<script>タグを。


外部JavaScriptメリット

外部ファイルにJavaScriptを配置すると、いくつかの利点があります。

  • これは、HTMLとコードを分離します
  • これは、HTMLとJavaScriptを読みやすくし、維持することができます
  • キャッシュされたJavaScriptファイルはページがロードをスピードアップすることができます