トップ 言語 JavaScript

▲記事トップへ

JavaScript言語―入門から応用まで

JavaScriptの入門から応用まで。JavaScript言語についてまとめています。

目次

この記事の目次です。

1. 入門編
2. 基礎編
3. 応用編

更新履歴

1. 入門編

JavaScriptの入門知識、JavaScriptの導入知識についてまとめています。

JavaScriptとは

JavaScript(ジャバスクリプト)はWebブラウザで利用可能なスクリプト言語です。 JavaScriptとは何か、できることなど初心者向けに解説していきます。

詳細

htmlに文字や文字列を表示する方法

JavaScriptでhtmlに文字や文字列を表示する方法についてまとめています。

詳細

JavaScriptの関数

JavaScriptの関数の定義方法や引数と戻り値など。JavaScriptの関数についてまとめています。

詳細

JavaScriptの外部ファイル化

jsファイルの作成とhtmlでjsファイルを読み込む方法など。JavaScriptの外部ファイル化についてまとめています。

詳細

イベントとイベントハンドラ

具体的な活用例など。JavaScriptのイベントとイベントハンドラについてまとめています。

詳細

2. 基礎編

JavaScript基本的な知識について説明しています。

文法

JavaScriptの基本的な文法についてまとめています。

行末、文の終わりのセミコロン

プログラムでコンピュータに何らかの処理をさせる命令を「文」といいます。 そして、行末の文の終わりにはセミコロン(;)を記述します。

CやJavaと違う点や挙動確認サンプルなど。JavaScriptの行末、文の終わりのセミコロンについて説明していきます。

CやJavaと違うJavaScriptのセミコロン(;)

JavaScriptも文の終わりにセミコロン(;)を記述します。

ですが、CやJavaなどの言語と違い、1行に1文しかない場合は省略可能です。 JavaScriptでは文の切れ目が行末などと重なる場合はセミコロン(;)が省略できます。

基本的には文の終わりにセミコロン(;)を記述しますが、 インジェクション対策などでセミコロンをエスケープしたりする都合であえてセミコロンを記述しないコーディングもありかと思います。

JavaScriptのセミコロン(;)の挙動を確認するサンプル

以下では、JavaScriptのセミコロン(;)の挙動を確認するサンプルを見ていきます。

JavaScriptのセミコロンがあってもなくても動作するか試すサンプルコードです。

<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のセミコロン(;)の挙動を確認するサンプル

変数とスコープ

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

詳細

in演算子

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

JavaScriptのin演算子とは

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

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

var result = 'x' in obj;
JavaScriptのin演算子を用いたサンプル

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

サンプルソース

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

<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のin演算子を用いたサンプル

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

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

オブジェクト指向とは

オブジェクトという概念に注目し、これをモジュール化に役立てる手法です。 構造化手法のプログラムよりもコード量は多くなりますが、独立性の高いプログラムの実現がしやすく、 構造化手法の手続き型のプログラムよりも拡張性の高い柔軟なプログラムが構築できます。

詳細

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

JavaScriptをはじめ、C++やJava、PHPなど多くの言語はオブジェクト指向言語です。 これらのオブジェクト指向言語は、オブジェクト指向プログラミングをサポートした言語です。

オブジェクト指向プログラミングのオブジェクトは、フィールドとメソッドを持っています。 オブジェクトのフィールドやメソッドは、他のオブジェクトからは独立していて、対象範囲が明確になっています。

オブジェクトのフィールドは、別の呼び方で「属性」と読んだり、JavaScriptの場合、「プロパティ」と呼びます。 メソッドは、別の呼び方で「操作」と読んだり、「メンバ関数」と読んだりします。

C++やJavaなどオブジェクト指向プログラミングが普及している言語では、オブジェクトが持っているフィールドやメソッドをひな形となるクラスを定義します。 そして、そのクラスから実体化したインスタンスという実際に処理に使用するオブジェクトを作成します。

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

JavaScriptのオブジェクト指向プログラミングは、JavaやC++などの言語を基準に比べるとやや特殊なオブジェクト指向です。

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

JavaScriptのオブジェクト指向プログラミングは、以下のような特徴があります。

やり方

以下では、JavaScriptのオブジェクト指向プログラミングのやり方や関連するトピックについてまとめています。

連想配列

JavaScriptのオブジェクトは連想配列にプロパティを追加していきます。ここではJavaScriptのオブジェクト指向の基礎である連想配列についてまとめています。

詳細

オブジェクトとプロパティ

JavaScriptのオブジェクト指向プログラミングにおけるJavaScriptのオブジェクトとプロパティの説明とプロパティの各種操作(定義・代入・参照・削除)について見ていきます。

JavaScriptのオブジェクトとプロパティ

JavaScriptのオブジェクトは、名前と値で構成されるプロパティを格納した順序のないリストです。

プロパティの値が関数の場合は、そのプロパティはメソッドと呼ばれます。 JavaScriptでは、関数もオブジェクトになります。 関数は呼び出して実行できるだけで、プロパティの値が配列でも関数でも実質的に違いがほとんどないことになります。

JavaScriptのプロパティは、オブジェクトに値を代入するだけで定義ができ、他のオブジェクト指向言語に比べると扱いが単純です。

JavaScriptのプロパティの定義と値の代入

JavaScriptのプロパティは宣言不要です。値を代入すると自動的に定義されます。

JavaScriptでは、事前にプロパティを宣言する必要はありません。 定義されていないプロパティでも値を代入すると、自動的にプロパティが定義されて値も代入されます。

<オブジェクト名>.<プロパティ名> = <値>
JavaScriptのプロパティの参照

オブジェクトが保持しているプロパティは、オブジェクト名に「.」をつけて参照します。

<オブジェクト名>.<プロパティ名>
JavaScriptのプロパティの削除

プロパティを削除するには、delete文を使用します。 delete文を使用すると、指定したプロパティがオブジェクトから削除されます。

delete <オブジェクト名>.<プロパティ名>
JavaScriptのプロパティの定義・代入・参照・削除操作の例

以下は、JavaScriptのプロパティの定義・代入・参照・削除操作の例です。

まずはじめに定義していないプロパティを参照し、その後にプロパティを定義して参照し、最後にプロパティを削除して参照するサンプルです。 プロパティが存在しないときは「undefined」となり、存在するときは「1」が表示されるコードとなります。

<html>
<body>
<script type="text/javascript">
  // 何もないオブジェクト
  var obj = {};
  document.write('obj.propの値を参照:' + obj.prop + '<br />');

  // 代入と定義
  obj.prop = 1;
  document.write('obj.propの値を参照:' + obj.prop + '<br />');

  // 削除
  delete obj.prop;
  document.write('obj.propの値を参照:' + obj.prop + '<br />');
</script>
</body>
</html>

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

JavaScriptのプロパティの定義・代入・参照・削除操作の例
コンストラクタ

コンストラクタとはから定義方法、引数と戻り値、サンプルなど。JavaScriptのコンストラクタについてまとめています。

詳細

Windowオブジェクト

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など、ブラウザで開けば表示できます。 表示した結果は次のようになります。

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

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

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>
表示方法と表示結果

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

ページを表示すると「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>
表示方法と表示結果

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

ページを表示すると文字色が青で「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>
表示方法と表示結果

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

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

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

以下はIEで表示した結果です。 toDateStringの結果の方は「toDateString()の結果:Thu Feb 25 2016」と表示され、toLocaleDateStringの結果は「toLocaleDateString()の結果:2016年2月25日」と表示されます。

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

Mathオブジェクト

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

ランダム表示する方法

Mathオブジェクトのrandomメソッドとfloorメソッドを用いて、配列に設定した画像をランダム表示サンプルなど。JavaScriptのランダム表示する方法をまとめています。

詳細

DOM

DOMについて見ていきます。

innerHTMLプロパティ

innerHTMLプロパティについて見ていきます。

htmlのタグのテキスト内容の変更

JavaScriptでinnerHTMLを操作した書き換えの例など。htmlのタグのテキスト内容の変更の仕方についてまとめています。

詳細

JavaScriptで箇条書きを生成

innerHTMLプロパティとfor in文を使ってliタグを追加する例など。JavaScriptで箇条書きを生成するやり方をまとめています。

詳細

その他のサンプルプログラム

その他のサンプルプログラムです。

ドラッグ&ドロップして自由配置

マウスで要素の位置を変更するサンプルなど。JavaScriptでドラッグ&ドロップして自由配置するプログラムの作り方をまとめています。

詳細

3. 応用編

ライブラリを使用したJavaScriptの応用的な知識を紹介しています。

jQuery

JavaScriptライブラリのjQueryに関連した技術情報を掲載しています。

詳細

Ajax

Ajaxとは何か、読み方からしっかり、サンプルコードと入門基礎説明をテーマに情報をまとめました。

詳細

Google Maps

ご存知の通り、Google Maps(マップ)は、検索エンジンに並んで生活に必要なツールになりつつあります。 Googleマイビジネスで店舗の情報を掲載したり、口コミユーザとしてローカルガイドのランキングを上げたりと地図の利用以外にも幅が広がっています。 ホームページへのGoogle Mapsの埋め込み方法などGoogle Mapsに関連した情報を解説していきます。

詳細

更新履歴

更新履歴になります。

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Eclipse /gcc /gdb /Git /g++ /JDK /JUnit /ZAP

技術・仕様
Ajax /CORBA /Java EE(旧称J2EE) /JNI

ライブラリ/Framework/CMS
bootstrap /jQuery /Lucene /MyBatis /Spring /Struts /WordPress

Web API
Google Maps

ITインフラOSとミドルウェア
Linux /Windows /シェル
Apache/Tomcat /MySQL /Redis /Solr

ITインフラサーバー
Web公開サーバー

ITインフラネットワーク
プログラミング /構築

ITインフラセキュリティ
公開サーバーのセキュリティ

PC製品
ZOTAC

SI
ホームページの作り方 /小さな会社のISMS

その他
IT用語 /ITスキル体系

スポンサーリンク

関連サイト内検索ツール

zealseedsおよび関連サイト内のページが検索できます。

IPアドレス確認ツール

あなたのグローバルIPアドレスは以下です。

3.220.164.172

HTMLの表示色確認ツール

パスワード生成ツール

文字数のプルダウンを選択して、取得ボタンを押すと「a~z、A~Z、0~9」の文字を ランダムに組み合わせた文字列が表示されます。

ここに生成されます。

スポンサーリンク