<html>
<body>

<script type="text/javascript">
document.write("セミコロン有り<br />");
document.write("セミコロン無し<br />")
document.write("セミコロン有り<br />");
document.write("セミコロン無し<br />")
</script>

</body>
</html>

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。表示した結果は次のようになります。

変数とスコープ

JavaScriptの変数とスコープについてまとめています。変数の宣言と代入からグローバル変数、ローカル変数など表やサンプルも用いて解説しています。

詳細

in演算子

JavaScriptのin演算子とは何かの説明とサンプルを用いたin演算字の挙動など。JavaScriptのin演算子について見ていきます。

JavaScriptのin演算子とは

in演算子は、オブジェクトや配列内に指定したプロパティが含まれているかを判定する演算子です。

左辺に文字列またはオブジェクトのプロパティ名を指定して、右辺にオブジェクトまたは配列を指定します。

var result = 'x' in obj;

JavaScriptのin演算子を用いたサンプル

JavaScriptのin演算子を用いたサンプルソースです。

サンプルソース

JavaScriptのin演算子の以下のような挙動を確認サンプルソースになります。

存在するプロパティがtrueになること
存在しないプロパティがfalseになること
デフォルトで継承される親のクラスにあるtoStringメソッドがtrueになること

<html>
<body>

<script type="text/javascript">

  var obj = {x:1, y:2, z:3};

  // 存在するプロパティ⇒true
  var resultA = 'x' in obj;

  // 存在しないプロパティ⇒false
  var resultB = 'a' in obj;

  // デフォルトで継承される親のクラスにあるtoStringメソッド⇒true
  var resultC = 'toString' in obj;

  alert(resultA + '\n' + resultB + '\n' + resultC);

</script>

</body>
</html>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。表示した結果は次のようになります。

JavaScriptのオブジェクト指向プログラミング

オブジェクト指向の説明からやり方や関連トピックなど。JavaScriptのオブジェクト指向プログラミングについてまとめています。

詳細

Windowオブジェクト

Windowオブジェクトは、JavaScriptコードが動作しているWebブラウザのウィンドウまたはフレームを表します。 JavaScriptにあらかじめ用意されてるオブジェクトで、JavaScriptを何も書いてない状態でもwindowオブジェクトは利用できます。

printメソッド

JavaScriptで印刷ダイアログを表示するにはWindowオブジェクトのprintメソッドを使用します。

JavaScriptで印刷ダイアログを表示

JavaScriptで印刷ダイアログを表示して印刷を開始するにはWindowオブジェクトのprint()メソッドを使用します。

Windowオブジェクトのprint()メソッドは、現在表示しているドキュメントを表示するメソッドです。

Windowオブジェクトのprint()メソッドの使用例

Windowオブジェクトのprint()メソッドの使用例を以下で見ていきます。

JavaScriptで印刷ダイアログを表示して印刷を開始するサンプルソース

JavaScriptで印刷ダイアログを表示して印刷を開始するサンプルソースです。

<html>
<body onload="window.print()">
印刷します。
</body>
</html>

表示方法と表示結果

サンプルコードを「Sample1.html」のように拡張子が「.html」になるファイルを作成して、ChromeやFirefoxなど、ブラウザで開けば表示できます。表示した結果は次のようになります。

ページを表示すると印刷ダイアログが表示されます。

setTimeoutメソッド

JavaScriptで指定時間後に処理を実行するにはWindowオブジェクトのsetTimeoutメソッドを使用します。

JavaScriptで指定時間後に処理を実行

WindowオブジェクトのsetTimeout()メソッドを使用することでJavaScriptで指定時間後に処理を実行することができます。

第1引数には「実行する関数」、第2引数には「タイムアウトまでの時間」をミリ秒単位で指定します。

WindowオブジェクトのsetTimeout()メソッドの使用例

WindowオブジェクトのsetTimeout()メソッドの使用例を見ていきます。

3秒後に警告ダイアログを表示するサンプルソース

3秒後に警告ダイアログを表示するサンプルソースです。

<html>
<body>
<form name="from">
<input type="button"
       value="3秒後に警告ダイアログを表示する"
       onclick="showAlert()" />
</form>
<script type="text/javascript">
  function showAlert() {
    setTimeout(
      function() {alert('警告ダイアログ');},
      3000
    );
  }
</script>
</body>
</html>

表示方法と表示結果

ページを表示すると「3秒後に警告ダイアログを表示する」ボタンが表示されます。

JavaScriptのWindowオブジェクトのsetTimeout()メソッドの使用例―実行前

「3秒後に警告ダイアログを表示する」ボタンを押下すると3秒後に警告ダイアログが表示されます。

JavaScriptのWindowオブジェクトのsetTimeout()メソッドの使用例―実行後

confirmメソッド

JavaScriptで確認ダイアログを表示するにはWindowオブジェクトのconfirmメソッドを使用します。

詳細

documentオブジェクト

documentオブジェクトについて見ていきます。

fgColorプロパティ

JavaScriptで表示される文字色を変更するにはdocumentオブジェクトのfgColorプロパティの値を変更します。

JavaScriptで文字色を変更する方法

JavaScriptで文字色を変更するには、documentクラスのfgColorプロパティの値を変更します。 documentクラスのfgColorプロパティの値を変更することにより、Webブラウザに表示される文字色を変更することができます。

documentクラスのfgColorプロパティの値を変更する例

documentクラスのfgColorプロパティの値を変更する例を以下で見ていきます。

JavaScriptで文字色を青に変更するサンプルソース

文字色を青に変更して、ブラウザに「Hello JavaScript」と表示するサンプルソースです。

<html>
<body>
<script type="text/javascript">
  document.fgColor = "Blue";
  document.write("Hello JavaScript");
</script>
</body>
</html>

表示方法と表示結果

ページを表示すると文字色が青で「Hello JavaScript」という文字列が表示されます。

JavaScriptのdocumentクラスのfgColorプロパティの値を変更する例

Dateオブジェクト

Dateオブジェクトについて見ていきます。

toLocaleDateStringメソッド

JavaScriptで表示環境に合わせたフォーマットで日付を表示するにはDateオブジェクトのtoLocaleDateStringメソッドを使用すると簡単です。

JavaScriptで表示環境に合わせたフォーマットで日付を表示

DateオブジェクトのtoLocaleDateStringメソッドを使用することで、 Dateオブジェクトの日付部分を表示環境に合わせた日付のフォーマットの文字列に変換できます。

toLocaleDateStringメソッドで、わざわざ専用の処理を実装する必要が無く簡単に表示環境に合わせたフォーマットで日付が表示できます。

DateオブジェクトのtoLocaleDateStringメソッドの使用例

DateオブジェクトのtoLocaleDateStringメソッドの使用例を以下で見ていきます。

表示環境に合わせた日付のフォーマットで日付を表示するサンプルソース

表示環境に合わせた日付のフォーマットで日付を表示するサンプルソースです。

<html>
<body>
<script type="text/javascript">
  var d = new Date();
  var dateStr = d.toDateString();
  var localeDateStr = d.toLocaleDateString();
  document.write("toDateString()の結果：" + dateStr);
  document.write("toLocaleDateString()の結果：" + localeDateStr);
</script>
</body>
</html>

表示方法と表示結果

toDateStringの結果の方は「toDateString()の結果：Thu Feb 25 2016」と表示され、日本人としては馴染みがないフォーマットの表示ですね。 toLocaleDateStringの結果は「toLocaleDateString()の結果：2016/2/25」と日本人に馴染みがあるフォーマットの表示になりますね。この結果はfirefoxで表示した結果です。