Javascript-quick-guide

提供：Dev Guides
移動先:案内、検索

JavaScript-概要

JavaScriptとは

JavaScriptは、動的なコンピュータープログラミング言語です。 軽量であり、Webページの一部として最も一般的に使用されます。その実装により、クライアント側のスクリプトはユーザーと対話し、動的なページを作成できます。 これは、オブジェクト指向機能を備えたインタープリター型プログラミング言語です。

JavaScriptは最初 LiveScript として知られていましたが、おそらくJavaによって生成される興奮のために、Netscapeはその名前をJavaScriptに変更しました。 JavaScriptは LiveScript という名前で1995年にNetscape 2.0に初めて登場しました。 この言語の汎用コアは、Netscape、Internet Explorer、およびその他のWebブラウザーに組み込まれています。

ECMA-262仕様は、コアJavaScript言語の標準バージョンを定義しました。

  • JavaScriptは、軽量のインタープリター型プログラミング言語です。
  • ネットワーク中心のアプリケーションを作成するために設計されています。
  • Javaを補完し、Javaと統合します。
  • HTMLを補完し、HTMLと統合します。
  • オープンでクロスプラットフォーム

クライアント側のJavaScript

クライアントサイドJavaScriptは、言語の最も一般的な形式です。 ブラウザがコードを解釈するには、スクリプトをHTMLドキュメントに含めるか、HTMLドキュメントで参照する必要があります。

つまり、Webページは静的なHTMLである必要はありませんが、ユーザーと対話し、ブラウザーを制御し、HTMLコンテンツを動的に作成するプログラムを含めることができます。

JavaScriptのクライアント側のメカニズムには、従来のCGIサーバー側のスクリプトよりも多くの利点があります。 たとえば、JavaScriptを使用して、ユーザーがフォームフィールドに有効な電子メールアドレスを入力したかどうかを確認できます。

ユーザーがフォームを送信するとJavaScriptコードが実行され、すべてのエントリが有効な場合にのみ、Webサーバーに送信されます。

JavaScriptを使用して、ユーザーが明示的または暗黙的に開始するボタンクリック、リンクナビゲーション、その他のアクションなどのユーザー開始イベントをトラップできます。

JavaScriptの利点

JavaScriptを使用するメリットは-

  • サーバーとのやり取りが少ない-ページをサーバーに送信する前にユーザー入力を検証できます。 これにより、サーバーのトラフィックが節約され、サーバーの負荷が軽減されます。
  • 訪問者への即時フィードバック-何かを入力するのを忘れたかどうかを確認するために、ページのリロードを待つ必要はありません。
  • 対話性の向上-ユーザーがマウスでマウスをホバーするか、キーボードでアクティブにしたときに反応するインターフェイスを作成できます。
  • リッチインターフェイス-JavaScriptを使用して、ドラッグアンドドロップコンポーネントやスライダーなどのアイテムを含めて、サイト訪問者にリッチインターフェイスを提供できます。

JavaScriptの制限

JavaScriptを本格的なプログラミング言語として扱うことはできません。 以下の重要な機能が欠けています-

  • クライアント側のJavaScriptは、ファイルの読み取りまたは書き込みを許可しません。 これはセキュリティ上の理由から保持されています。
  • JavaScriptはネットワークアプリケーションに使用できません。そのようなサポートは利用できないためです。
  • JavaScriptには、マルチスレッド機能またはマルチプロセッサ機能はありません。

繰り返しになりますが、JavaScriptは軽量のインタープリター型プログラミング言語であり、静的なHTMLページにインタラクティブ機能を組み込むことができます。

JavaScript開発ツール

JavaScriptの大きな強みの1つは、高価な開発ツールを必要としないことです。 メモ帳などの簡単なテキストエディターから開始できます。 Webブラウザーのコンテキスト内のインタープリター言語であるため、コンパイラーを購入する必要さえありません。

生活をよりシンプルにするために、さまざまなベンダーが非常に優れたJavaScript編集ツールを考案しました。 それらのいくつかはここにリストされています-

  • Microsoft FrontPage -Microsoftは、FrontPageと呼ばれる一般的なHTMLエディターを開発しました。 FrontPageは、Web開発者にインタラクティブなWebサイトの作成を支援する多数のJavaScriptツールも提供します。
  • Macromedia Dreamweaver MX -Macromedia Dreamweaver MXは、プロのWeb開発群衆で非常に人気のあるHTMLおよびJavaScriptエディターです。 いくつかの便利な事前構築されたJavaScriptコンポーネントを提供し、データベースとうまく統合し、XHTMLやXMLなどの新しい標準に準拠します。
  • Macromedia HomeSite 5 -HomeSite 5は、Macromediaの好評のHTMLおよびJavaScriptエディターで、個人のWebサイトを効果的に管理するために使用できます。

今日のJavaScriptはどこにありますか？

ECMAScript Edition 5標準は、4年以上ぶりにリリースされる最初のアップデートです。 JavaScript 2.0はECMAScript標準のエディション5に準拠しており、この2つの違いはごくわずかです。

JavaScript 2.0の仕様は、次のサイトにあります。http：//www.ecmascript.org/

現在、NetscapeのJavaScriptとMicrosoftのJScriptはECMAScript標準に準拠していますが、どちらの言語もまだ標準の一部ではない機能をサポートしています。

JavaScript-構文

JavaScriptは、 <script> …​内に配置されたJavaScriptステートメントを使用して実装できます。 </script> WebページのHTMLタグ。

JavaScriptを含む <script> タグはWebページ内のどこにでも配置できますが、通常は <head> タグ内に保持することをお勧めします。

<script>タグは、これらのタグ間のすべてのテキストをスクリプトとして解釈し始めるようブラウザプログラムに警告します。 JavaScriptの簡単な構文は次のように表示されます。 

<script ...>
   JavaScript code
</script>

スクリプトタグは2つの重要な属性を取ります-

  • 言語-この属性は、使用しているスクリプト言語を指定します。 通常、その値はjavascriptです。 HTML（およびその後継のXHTML）の最近のバージョンでは、この属性の使用が段階的に廃止されています。
  • Type -この属性は、使用中のスクリプト言語を示すために現在推奨されているものであり、その値は「text/javascript」に設定する必要があります。

あなたのJavaScriptセグメントは次のようになります- 

<script language = "javascript" type = "text/javascript">
   JavaScript code
</script>

初めてのJavaScriptコード

「Hello World」を印刷するサンプル例を見てみましょう。 JavaScriptコードを囲むオプションのHTMLコメントを追加しました。 これは、JavaScriptをサポートしないブラウザーからコードを保存するためです。 コメントは「//→」で終わります。 ここで、「//」はJavaScriptのコメントを示しているため、ブラウザがHTMLコメントの最後をJavaScriptコードとして読み取らないように追加します。 次に、HTMLドキュメントに文字列を書き込む関数 document.write を呼び出します。

この関数は、テキスト、HTML、またはその両方を記述するために使用できます。 次のコードを見てください。 

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!--
            document.write("Hello World!")
        //-->
      </script>
   </body>
</html>

このコードは、次の結果を生成します- 

Hello World!

空白と改行

JavaScriptは、JavaScriptプログラムに表示されるスペース、タブ、および改行を無視します。 プログラムでは、スペース、タブ、改行を自由に使用できます。また、コードを読みやすく理解しやすくするために、プログラムをきちんと一貫した方法で自由にフォーマットおよびインデントできます。

セミコロンはオプションです

JavaScriptの単純なステートメントには、C、C ++、およびJavaの場合と同様に、通常セミコロン文字が続きます。 ただし、JavaScriptでは、各ステートメントが個別の行に配置されている場合、このセミコロンを省略できます。 たとえば、次のコードはセミコロンなしで記述できます。 

<script language = "javascript" type = "text/javascript">
   <!--
      var1 = 10
      var2 = 20
  //-->
</script>

しかし、次のように単一行にフォーマットされている場合は、セミコロンを使用する必要があります- 

<script language = "javascript" type = "text/javascript">
   <!--
      var1 = 10; var2 = 20;
  //-->
</script>

注意-セミコロンを使用するのは良いプログラミング手法です。

大文字と小文字の区別

JavaScriptは大文字と小文字を区別する言語です。 つまり、言語のキーワード、変数、関数名、およびその他の識別子は、常に一貫した大文字で入力する必要があります。

したがって、識別子 Time および TIME はJavaScriptで異なる意味を伝えます。

注意-JavaScriptで変数名と関数名を書くときは注意が必要です。

JavaScriptのコメント

JavaScriptは、CスタイルとC ++スタイルの両方のコメントをサポートしているため、

//と行末の間のテキストはコメントとして扱われ、JavaScriptによって無視されます。 *文字/ と*/の間のテキストはコメントとして扱われます。 これは複数行にわたる場合があります。 * JavaScriptは、HTMLコメント開始シーケンス<！-も認識します。 JavaScriptは//コメントと同様に、これを単一行のコメントとして扱います。 * HTMLコメントの終了シーケンス→はJavaScriptによって認識されないため、//→と記述する必要があります。

例

次の例は、JavaScriptでコメントを使用する方法を示しています。 

<script language = "javascript" type = "text/javascript">
   <!--
     //This is a comment. It is similar to comments in C++

     /*
 *This is a multi-line comment in JavaScript
     * It is very similar to comments in C Programming
      */
  //-->
</script>

ブラウザでJavaScriptを有効にする

最新のブラウザにはすべて、JavaScriptのサポートが組み込まれています。 多くの場合、このサポートを手動で有効または無効にする必要があります。 この章では、ブラウザ（Internet Explorer、Firefox、Chrome、およびOpera）でJavaScriptサポートを有効または無効にする手順について説明します。

Internet ExplorerのJavaScript

Internet ExplorerでJavaScriptをオンまたはオフにする簡単な手順を次に示します-

  • メニューから[ツール]→[インターネットオプション]を選択します。
  • ダイアログボックスから[セキュリティ]タブを選択します。
  • [*レベルのカスタマイズ]ボタンをクリックします。
  • Scripting オプションが見つかるまで下にスクロールします。
  • *アクティブスクリプト*の下の_Enable_ラジオボタンを選択します。
  • 最後に[OK]をクリックして出てきます

Internet ExplorerでJavaScriptサポートを無効にするには、 Active scripting の下にある Disable オプションボタンを選択する必要があります。

FirefoxのJavaScript

FirefoxでJavaScriptをオンまたはオフにする手順は次のとおりです-

  • 新しいタブを開き、アドレスバーに about：config と入力します。 次に、警告ダイアログが表示されます。 注意してください、約束します！*
  • 次に、ブラウザで configure options のリストを見つけます。
  • 検索バーに「 javascript.enabled 」と入力します。 *そこでは、そのオプションの値を右クリックして、JavaScriptを有効または無効にするオプションがあります。

javascript.enabledがtrueの場合;* toogle *をクリックするとfalseに変換されます。 JavaScriptが無効になっている場合;トグルをクリックすると有効になります。

ChromeのJavaScript

ChromeでJavaScriptをオンまたはオフにする手順は次のとおりです-

  • ブラウザの右上隅にあるChromeメニューをクリックします。
  • *設定*を選択します。
  • ページの最後にある[詳細設定を表示]をクリックします。
  • [プライバシー]セクションで、[コンテンツ設定]ボタンをクリックします。
  • [Javascript]セクションで、[どのサイトでもJavaScriptの実行を許可しない]または[すべてのサイトでJavaScriptの実行を許可する（推奨）]を選択します。

OperaのJavaScript

OperaでJavaScriptをオンまたはオフにする手順は次のとおりです-

  • メニューから[ツール]→[設定]を選択します。
  • ダイアログボックスから[詳細]オプ​​ションを選択します。
  • リストされたアイテムから*コンテンツ*を選択します。
  • [JavaScriptを有効にする]チェックボックスを選択します。
  • 最後に[OK]をクリックして表示されます。

OperaでJavaScriptサポートを無効にするには、* JavaScriptを有効にする*チェックボックスを選択しないでください。

JavaScript以外のブラウザーの警告

JavaScriptを使用して重要なことを行う必要がある場合は、 <noscript> タグを使用してユーザーに警告メッセージを表示できます。

次のように、スクリプトブロックの直後に noscript ブロックを追加できます- 

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!--
            document.write("Hello World!")
        //-->
      </script>

      <noscript>
         Sorry...JavaScript is needed to go ahead.
      </noscript>
   </body>
</html>

現在、ユーザーのブラウザがJavaScriptをサポートしていない場合、またはJavaScriptが有効になっていない場合、</noscript>からのメッセージが画面に表示されます。

JavaScript-HTMLファイルでの配置

HTMLドキュメントのどこにでもJavaScriptコードを含めることができる柔軟性があります。 ただし、HTMLファイルにJavaScriptを含める最も好ましい方法は次のとおりです-

  • <head> …​ </head>セクションのスクリプト。
  • <body> …​ </body>セクションのスクリプト。
  • <body> …​ </body>および<head> …​ </head>セクションのスクリプト。 *外部ファイルにスクリプトを作成し、<head> …​ </head>セクションに含めます。

次のセクションでは、さまざまな方法でJavaScriptをHTMLファイルに配置する方法を説明します。

<head> …​ </head>セクションのJavaScript

ユーザーがどこかをクリックしたときなど、何らかのイベントでスクリプトを実行したい場合は、次のように頭にそのスクリプトを配置します- 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
        //-->
      </script>
   </head>

   <body>
      <input type = "button" onclick = "sayHello()" value = "Say Hello"/>
   </body>
</html>

このコードは、次の結果を生成します-

<body> …​ </body>セクションのJavaScript

スクリプトがページのコンテンツを生成するように、ページの読み込み時に実行するスクリプトが必要な場合、スクリプトはドキュメントの<body>部分に配置されます。 この場合、JavaScriptを使用して定義された関数はありません。 次のコードを見てください。 

<html>
   <head>
   </head>

   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
        //-->
      </script>

      <p>This is web page body </p>
   </body>
</html>

このコードは、次の結果を生成します-

<body>および<head>セクションのJavaScript

次のようにJavaScriptコードを<head>セクションと<body>セクションにまとめて配置できます- 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
        //-->
      </script>
   </head>

   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
        //-->
      </script>

      <input type = "button" onclick = "sayHello()" value = "Say Hello"/>
   </body>
</html>

このコードは、次の結果を生成します-

外部ファイルのJavaScript

JavaScriptをより広範囲に使用し始めると、サイトの複数のページで同一のJavaScriptコードを再利用する場合があることに気付くでしょう。

複数のHTMLファイルで同一のコードを維持することに制限されません。* script *タグは、外部ファイルにJavaScriptを保存し、それをHTMLファイルに含めることができるメカニズムを提供します。 

*script* タグと *src* 属性を使用して、HTMLコードに外部JavaScriptファイルを含める方法を示す例を次に示します。
<html>
   <head>
      <script type = "text/javascript" src = "filename.js" ></script>
   </head>

   <body>
      .......
   </body>
</html>

外部ファイルソースからJavaScriptを使用するには、すべてのJavaScriptソースコードを拡張子「.js」の単純なテキストファイルに記述し、上記のようにそのファイルを含める必要があります。

たとえば、 filename.js ファイルに次のコンテンツを保持し、filename.jsファイルを含めた後、HTMLファイルで sayHello 関数を使用できます。 

function sayHello() {
   alert("Hello World")
}

JavaScript-変数

JavaScriptデータ型

プログラミング言語の最も基本的な特性の1つは、サポートするデータ型のセットです。 これらは、プログラミング言語で表現および操作できる値のタイプです。

JavaScriptを使用すると、3つのプリミティブデータ型を操作できます-

  • 番号 123、120.50など
  • テキストの*文字列* 「このテキスト文字列」など
  • ブール 正しいか間違っているか。

JavaScriptは、 null および undefined の2つの単純なデータ型も定義します。それぞれが単一の値のみを定義します。 これらのプリミティブデータ型に加えて、JavaScriptは object と呼ばれる複合データ型をサポートしています。 オブジェクトについては、別の章で詳しく説明します。

注意-JavaScriptは、整数値と浮動小数点値を区別しません。 JavaScriptのすべての数値は、浮動小数点値として表されます。 JavaScriptは、IEEE 754標準で定義されている64ビット浮動小数点形式を使用して数値を表します。

JavaScript変数

他の多くのプログラミング言語と同様に、JavaScriptには変数があります。 変数は名前付きコンテナと考えることができます。 これらのコンテナにデータを配置し、コンテナに名前を付けるだけでデータを参照できます。

JavaScriptプログラムで変数を使用する前に、宣言する必要があります。 変数は、次のように var キーワードで宣言されます。 

<script type = "text/javascript">
   <!--
      var money;
      var name;
  //-->
</script>

また、次のように同じ var キーワードで複数の変数を宣言することができます- 

<script type = "text/javascript">
   <!--
      var money, name;
  //-->
</script>

変数に値を保存することを*変数初期化*と呼びます。 変数の初期化は、変数の作成時、またはその変数が必要になった後で行うことができます。

たとえば、 money という名前の変数を作成し、後で値2000.50を割り当てることができます。 別の変数については、次のように初期化時に値を割り当てることができます。 

<script type = "text/javascript">
   <!--
      var name = "Ali";
      var money;
      money = 2000.50;
  //-->
</script>

注意- var キーワードは、ドキュメント内の変数名が存在する限り、宣言または初期化にのみ使用してください。 同じ変数を2回再宣言しないでください。

JavaScriptは*型なし*の言語です。 これは、JavaScript変数が任意のデータ型の値を保持できることを意味します。 他の多くの言語とは異なり、変数の宣言中にJavaScriptに変数が保持する値のタイプを伝える必要はありません。 変数の値の型はプログラムの実行中に変更される可能性があり、JavaScriptが自動的に処理します。

JavaScript変数スコープ

変数の範囲は、それが定義されているプログラムの領域です。 JavaScript変数のスコープは2つだけです。

  • グローバル変数-グローバル変数にはグローバルスコープがあり、JavaScriptコードのどこでも定義できます。
  • ローカル変数-ローカル変数は、定義されている関数内でのみ表示されます。 関数パラメーターは、常にその関数に対してローカルです。

関数の本体内では、ローカル変数は同じ名前のグローバル変数よりも優先されます。 グローバル変数と同じ名前でローカル変数または関数パラメーターを宣言すると、グローバル変数が事実上非表示になります。 次の例を見てください。 

<html>
   <body onload = checkscope();>
      <script type = "text/javascript">
         <!--
            var myVar = "global";     //Declare a global variable
            function checkscope( ) {
               var myVar = "local";   //Declare a local variable
               document.write(myVar);
            }
        //-->
      </script>
   </body>
</html>

これは、次の結果を生成します- 

local

JavaScript変数名

JavaScriptで変数に名前を付けるときは、次のルールに留意してください。

  • JavaScriptの予約キーワードを変数名として使用しないでください。 これらのキーワードについては、次のセクションで説明します。 たとえば、 break または boolean 変数名は無効です。
  • JavaScript変数名は数字（0-9）で始まってはなりません。 文字またはアンダースコア文字で始まる必要があります。 たとえば、 123test は無効な変数名ですが、 _ 123test は有効な変数名です。
  • JavaScript変数名では大文字と小文字が区別されます。 たとえば、 Name と name は2つの異なる変数です。

JavaScript予約語

JavaScriptのすべての予約語のリストを次の表に示します。 JavaScript変数、関数、メソッド、ループラベル、またはオブジェクト名として使用することはできません。

abstract else instanceof switch
boolean enum int synchronized
break export interface this
byte extends long throw
case false native throws
catch final new transient
char finally null true
class float package try
const for private typeof
continue function protected var
debugger goto public void
default if return volatile
delete implements short while
do import static with
double in super

JavaScript-演算子

オペレーターとは？

単純な式 4 + 5は9 に等しいとします。 ここで、4と5は*オペランド*と呼ばれ、「+」は*演算子*と呼ばれます。 JavaScriptは、次のタイプの演算子をサポートしています。

  • 算術演算子
  • 比較演算子
  • 論理（またはリレーショナル）演算子
  • 割り当て演算子 *条件付き（または3項）演算子

すべての演算子を1つずつ見てみましょう。

算術演算子

JavaScriptは、次の算術演算子をサポートしています-

変数Aが10を保持し、変数Bが20を保持すると仮定します-

Sr.No. Operator & Description
1
  • + (Addition)*

2つのオペランドを追加します

例： A + Bは30を与える

2
  • （減算）*

最初のオペランドから2番目のオペランドを減算します

例： A-Bは-10を与える

3
  • （乗算）*

両方のオペランドを乗算します

例： *A Bは200を与える

4

/(Division)

分子を分母で除算する

  • 例： *B/Aは2を与える
5
  • % (Modulus)*

整数除算の剰余を出力します

  • 例： *B％Aは0を返します
6
  • ++ (Increment)*

整数値を1つ増やします

例： A ++は11

7
  • （デクリメント）*

整数値を1減らします

例： A-- 9

注意-加算演算子（）は、数値および文字列に対して機能します。 e.g. 「a」 10は「a10」になります。

例

次のコードは、JavaScriptで算術演算子を使用する方法を示しています。 

<html>
   <body>

      <script type = "text/javascript">
         <!--
            var a = 33;
            var b = 10;
            var c = "Test";
            var linebreak = "<br/>";

            document.write("a + b = ");
            result = a + b;
            document.write(result);
            document.write(linebreak);

            document.write("a - b = ");
            result = a - b;
            document.write(result);
            document.write(linebreak);

            document.write("a/b = ");
            result = a/b;
            document.write(result);
            document.write(linebreak);

            document.write("a % b = ");
            result = a % b;
            document.write(result);
            document.write(linebreak);

            document.write("a + b + c = ");
            result = a + b + c;
            document.write(result);
            document.write(linebreak);

            a = ++a;
            document.write("++a = ");
            result = ++a;
            document.write(result);
            document.write(linebreak);

            b = --b;
            document.write("--b = ");
            result = --b;
            document.write(result);
            document.write(linebreak);
        //-->
      </script>

      Set the variables to different values and then try...
   </body>
</html>

出力

a + b = 43
a - b = 23
a/b = 3.3
a % b = 3
a + b + c = 43Test
++a = 35
--b = 8
Set the variables to different values and then try...

比較演算子

JavaScriptは以下の比較演算子をサポートしています-

変数Aが10を保持し、変数Bが20を保持すると仮定します-

Sr.No. Operator & Description
1

= = (Equal)

2つのオペランドの値が等しいかどうかを確認し、等しい場合は条件が真になります。

例：（A == B）は正しくありません。

2

!= (Not Equal)

2つのオペランドの値が等しいかどうかをチェックし、値が等しくない場合は条件が真になります。

例：（A！= B）は真です。

3

> (Greater than)

左のオペランドの値が右のオペランドの値よりも大きいかどうかをチェックし、そうであれば条件は真になります。

例：（A> B）は正しくありません。

4

< (Less than)

左のオペランドの値が右のオペランドの値よりも小さいかどうかを確認し、そうであれば条件は真になります。

例：（A <B）は真です。

5

>= (Greater than or Equal to)

左のオペランドの値が右のオペランドの値以上かどうかをチェックし、そうであれば条件は真になります。

例：（A> = B）は正しくありません。

6

⇐ (Less than or Equal to)

左のオペランドの値が右のオペランドの値以下かどうかをチェックし、そうであれば条件は真になります。

例：（A ⇐ B）は真です。

例

次のコードは、JavaScriptで比較演算子を使用する方法を示しています。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = 20;
            var linebreak = "<br/>";

            document.write("(a == b) => ");
            result = (a == b);
            document.write(result);
            document.write(linebreak);

            document.write("(a < b) => ");
            result = (a < b);
            document.write(result);
            document.write(linebreak);

            document.write("(a > b) => ");
            result = (a > b);
            document.write(result);
            document.write(linebreak);

            document.write("(a != b) => ");
            result = (a != b);
            document.write(result);
            document.write(linebreak);

            document.write("(a >= b) => ");
            result = (a >= b);
            document.write(result);
            document.write(linebreak);

            document.write("(a <= b) => ");
            result = (a <= b);
            document.write(result);
            document.write(linebreak);
        //-->
      </script>
      Set the variables to different values and different operators and then try...
   </body>
</html>

出力

(a == b) => false
(a < b) => true
(a > b) => false
(a != b) => true
(a >= b) => false
a <= b) => true
Set the variables to different values and different operators and then try...

論理演算子

JavaScriptは次の論理演算子をサポートしています-

変数Aが10を保持し、変数Bが20を保持すると仮定します-

Sr.No. Operator & Description
1

&& (Logical AND)

両方のオペランドがゼロ以外の場合、条件は真になります。

例：（A && B）はtrueです。

2 *

(Logical OR)*

2つのオペランドのいずれかがゼロ以外の場合、条件は真になります。

例：（A

B）はtrueです。
3

! (Logical NOT)

オペランドの論理状態を反転します。 条件が真の場合、Logical NOT演算子はそれを偽にします。

例：！ （A && B）は偽です。

例

JavaScriptで論理演算子を実装する方法を学ぶには、次のコードを試してください。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var a = true;
            var b = false;
            var linebreak = "<br/>";

            document.write("(a && b) => ");
            result = (a && b);
            document.write(result);
            document.write(linebreak);

            document.write("(a || b) => ");
            result = (a || b);
            document.write(result);
            document.write(linebreak);

            document.write("!(a && b) => ");
            result = (!(a && b));
            document.write(result);
            document.write(linebreak);
        //-->
      </script>
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

出力

(a && b) => false
(a || b) => true
!(a && b) => true
Set the variables to different values and different operators and then try...

ビット演算子

JavaScriptは、次のビット演算子をサポートしています-

変数Aが2を保持し、変数Bが3を保持すると仮定します-

Sr.No. Operator & Description
1

& (Bitwise AND)

整数引数の各ビットに対してブールAND演算を実行します。

例：（A＆B）は2です。

2 *

(BitWise OR)*

整数引数の各ビットに対してブールOR演算を実行します。

例：（A

B）は3です。
3

^ (Bitwise XOR)

整数引数の各ビットに対してブール排他的OR演算を実行します。 排他的ORは、オペランド1が真であるか、オペランド2が真であり、両方ではないことを意味します。

例：（A ^ B）は1です。

4

~ (Bitwise Not)

これは単項演算子であり、オペランドのすべてのビットを反転することにより動作します。

例：（〜B）は-4です。

5

<< (Left Shift)

第1オペランドのすべてのビットを、第2オペランドで指定された桁数だけ左に移動します。 新しいビットはゼロで埋められます。 値を1ポジション左にシフトすることは、2を乗算することと同等です。2ポジションをシフトすることは、4を乗算することと同等です。

例：（A << 1）は4です。

6

>> (Right Shift)

バイナリ右シフト演算子。 左のオペランドの値は、右のオペランドで指定されたビット数だけ右に移動します。

例：（A >> 1）は1です。

7

>>> (Right shift with Zero)

この演算子は、>>演算子と同じですが、左にシフトインされるビットが常にゼロである点が異なります。

例：（A >>> 1）は1です。

例

JavaScriptでビット演算子を実装するには、次のコードを試してください。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var a = 2;//Bit presentation 10
            var b = 3;//Bit presentation 11
            var linebreak = "<br/>";

            document.write("(a & b) => ");
            result = (a & b);
            document.write(result);
            document.write(linebreak);

            document.write("(a | b) => ");
            result = (a | b);
            document.write(result);
            document.write(linebreak);

            document.write("(a ^ b) => ");
            result = (a ^ b);
            document.write(result);
            document.write(linebreak);

            document.write("(~b) => ");
            result = (~b);
            document.write(result);
            document.write(linebreak);

            document.write("(a << b) => ");
            result = (a << b);
            document.write(result);
            document.write(linebreak);

            document.write("(a >> b) => ");
            result = (a >> b);
            document.write(result);
            document.write(linebreak);
        //-->
      </script>
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>
(a & b) => 2
(a | b) => 3
(a ^ b) => 1
(~b) => -4
(a << b) => 16
(a >> b) => 0
Set the variables to different values and different operators and then try...

割り当て演算子

JavaScriptは以下の代入演算子をサポートしています-

Sr.No. Operator & Description
1

= (Simple Assignment )

右側のオペランドから左側のオペランドに値を割り当てます

  • 例： *C = A + Bは、A + Bの値をCに割り当てます
2
  • += (Add and Assignment)*

右オペランドを左オペランドに追加し、結果を左オペランドに割り当てます。

  • 例： *C + = AはC = C + Aと同等です
3
  • −= (Subtract and Assignment)*

左のオペランドから右のオペランドを減算し、結果を左のオペランドに割り当てます。

  • Ex： *C-= AはC = C-Aと同等です
4
  • = (Multiply and Assignment)

右オペランドと左オペランドを乗算し、結果を左オペランドに割り当てます。

例： *C = AはC = C *Aと同等

5

/= (Divide and Assignment)

左のオペランドを右のオペランドで除算し、結果を左のオペランドに割り当てます。

  • 例： *C/= AはC = C/Aと同等
6
  • %= (Modules and Assignment)*

2つのオペランドを使用してモジュラスを取得し、結果を左のオペランドに割り当てます。

  • Ex：* C％= AはC = C％Aと同等です

注-ビット単位演算子にも同じロジックが適用されるため、⇐=、>> =、>> =、＆=、| =、^ =のようになります。

例

JavaScriptで代入演算子を実装するには、次のコードを試してください。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var a = 33;
            var b = 10;
            var linebreak = "<br/>";

            document.write("Value of a => (a = b) => ");
            result = (a = b);
            document.write(result);
            document.write(linebreak);

            document.write("Value of a => (a += b) => ");
            result = (a += b);
            document.write(result);
            document.write(linebreak);

            document.write("Value of a => (a -= b) => ");
            result = (a -= b);
            document.write(result);
            document.write(linebreak);

            document.write("Value of a => (a *= b) => ");
            result = (a *= b);
            document.write(result);
            document.write(linebreak);

            document.write("Value of a => (a/= b) => ");
            result = (a/= b);
            document.write(result);
            document.write(linebreak);

            document.write("Value of a => (a %= b) => ");
            result = (a %= b);
            document.write(result);
            document.write(linebreak);
        //-->
      </script>
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

出力

Value of a => (a = b) => 10
Value of a => (a += b) => 20
Value of a => (a -= b) => 10
Value of a => (a *= b) => 100
Value of a => (a/= b) => 10
Value of a => (a %= b) => 0
Set the variables to different values and different operators and then try...

その他の演算子

ここでは、JavaScriptで非常に役立つ2つの演算子について説明します。条件演算子（？ :)および* typeof演算子*。

条件演算子（？ :)

条件演算子は、最初に式の真または偽の値を評価してから、評価の結果に応じて2つの指定されたステートメントのいずれかを実行します。

Sr.No. Operator and Description
1

? : (Conditional )

条件が真の場合 次に値X：そうでなければ値Y

例

JavaScriptで条件演算子がどのように機能するかを理解するには、次のコードを試してください。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = 20;
            var linebreak = "<br/>";

            document.write ("((a > b) ? 100 : 200) => ");
            result = (a > b) ? 100 : 200;
            document.write(result);
            document.write(linebreak);

            document.write ("((a < b) ? 100 : 200) => ");
            result = (a < b) ? 100 : 200;
            document.write(result);
            document.write(linebreak);
        //-->
      </script>
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

出力

((a > b) ? 100 : 200) => 200
((a < b) ? 100 : 200) => 100
Set the variables to different values and different operators and then try...

typeof演算子

*typeof* 演算子は、単一のオペランドの前に置かれる単項演算子であり、任意の型にすることができます。 その値は、オペランドのデータ型を示す文字列です。

_typeof_演算子は、オペランドが数値、文字列、またはブール値の場合、「数値」、「文字列」、または「ブール値」に評価され、評価に基づいてtrueまたはfalseを返します。 

*typeof* 演算子の戻り値のリストを次に示します。
Type String Returned by typeof
Number "number"
String "string"
Boolean "boolean"
Object "object"
Function "function"
Undefined "undefined"
Null "object"

例

次のコードは、 typeof 演算子を実装する方法を示しています。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = "String";
            var linebreak = "<br/>";

            result = (typeof b == "string" ? "B is String" : "B is Numeric");
            document.write("Result => ");
            document.write(result);
            document.write(linebreak);

            result = (typeof a == "string" ? "A is String" : "A is Numeric");
            document.write("Result => ");
            document.write(result);
            document.write(linebreak);
        //-->
      </script>
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

出力

Result => B is String
Result => A is Numeric
Set the variables to different values and different operators and then try...

JavaScript-if …​ elseステートメント

プログラムの作成中に、特定のパスのセットから1つを採用する必要がある場合があります。 そのような場合、プログラムが正しい決定を下し、正しいアクションを実行できるようにする条件文を使用する必要があります。

JavaScriptは、さまざまな条件に基づいてさまざまなアクションを実行するために使用される条件ステートメントをサポートしています。 ここで、 if..else ステートメントについて説明します。

if-elseのフローチャート

次のフローチャートは、if-elseステートメントの動作を示しています。

意思決定

JavaScriptは if..else ステートメントの次の形式をサポートしています-

  • ifステートメント
  • if …​ elseステートメント
  • if …​ else if …​ ステートメント。

ifステートメント

*if* ステートメントは、JavaScriptが決定を行い、ステートメントを条件付きで実行できるようにする基本的な制御ステートメントです。

構文

基本的なif文の構文は次のとおりです- 

if (expression) {
   Statement(s) to be executed if expression is true
}

ここでは、JavaScript式が評価されます。 結果の値がtrueの場合、指定されたステートメントが実行されます。 式が偽の場合、ステートメントは実行されません。 ほとんどの場合、決定を行う際に比較演算子を使用します。

例

次の例を試して、 if ステートメントの動作を理解してください。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var age = 20;

            if( age > 18 ) {
               document.write("<b>Qualifies for driving</b>");
            }
        //-->
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

出力

Qualifies for driving
Set the variable to different value and then try...

if …​ elseステートメント

*'if ... else'* ステートメントは、JavaScriptがより制御された方法でステートメントを実行できるようにする次の形式の制御ステートメントです。

構文

if (expression) {
   Statement(s) to be executed if expression is true
} else {
   Statement(s) to be executed if expression is false
}

ここでJavaScript式が評価されます。 結果の値がtrueの場合、「if」ブロック内の指定されたステートメントが実行されます。 式が偽の場合、elseブロック内の指定されたステートメントが実行されます。

例

JavaScriptでif-elseステートメントを実装する方法を学ぶには、次のコードを試してください。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var age = 15;

            if( age > 18 ) {
               document.write("<b>Qualifies for driving</b>");
            } else {
               document.write("<b>Does not qualify for driving</b>");
            }
        //-->
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

出力

Does not qualify for driving
Set the variable to different value and then try...

if …​ else if …​ ステートメント

*if ... else if ...* ステートメントは、 *if…else* の高度な形式であり、JavaScriptがいくつかの条件から正しい決定を下せるようにします。

構文

if-else-ifステートメントの構文は次のとおりです- 

if (expression 1) {
   Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
   Statement(s) to be executed if expression 2 is true
} else if (expression 3) {
   Statement(s) to be executed if expression 3 is true
} else {
   Statement(s) to be executed if no expression is true
}

このコードについて特別なことは何もありません。 これは一連の if ステートメントであり、各 if は前のステートメントの else 句の一部です。 ステートメントは真の条件に基づいて実行され、どの条件も真でない場合、 else ブロックが実行されます。

例

JavaScriptでif-else-ifステートメントを実装する方法を学ぶには、次のコードを試してください。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var book = "maths";
            if( book == "history" ) {
               document.write("<b>History Book</b>");
            } else if( book == "maths" ) {
               document.write("<b>Maths Book</b>");
            } else if( book == "economics" ) {
               document.write("<b>Economics Book</b>");
            } else {
               document.write("<b>Unknown Book</b>");
            }
        //-->
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
<html>

出力

Maths Book
Set the variable to different value and then try...

JavaScript-スイッチケース

前の章のように、複数の if …​ else…if ステートメントを使用して、多方向ブランチを実行できます。 ただし、これは、特にすべてのブランチが単一の変数の値に依存している場合は特に、常に最適なソリューションではありません。

JavaScript 1.2以降では、この状況を正確に処理する switch ステートメントを使用できます。これは、 if …​ else if ステートメントを繰り返すよりも効率的です。

フローチャート

次のフローチャートは、switch-caseステートメントの動作を説明しています。

スイッチケース

構文

*switch* ステートメントの目的は、評価する式と、式の値に基づいて実行するいくつかの異なるステートメントを提供することです。 インタープリターは、一致するものが見つかるまで、式の値に対して各 *case* をチェックします。 一致するものがない場合、 *default* 条件が使用されます。
switch (expression) {
   case condition 1: statement(s)
   break;

   case condition 2: statement(s)
   break;
   ...

   case condition n: statement(s)
   break;

   default: statement(s)
}
*break* ステートメントは、特定のケースの終わりを示します。 省略された場合、インタープリターは次の各ケースで各ステートメントの実行を継続します。
*break* ステートメントについては、*ループ制御*の章で説明します。

例

switch-caseステートメントを実装するには、次の例を試してください。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var grade = 'A';
            document.write("Entering switch block<br/>");
            switch (grade) {
               case 'A': document.write("Good job<br/>");
               break;

               case 'B': document.write("Pretty good<br/>");
               break;

               case 'C': document.write("Passed<br/>");
               break;

               case 'D': document.write("Not so good<br/>");
               break;

               case 'F': document.write("Failed<br/>");
               break;

               default:  document.write("Unknown grade<br/>")
            }
            document.write("Exiting switch block");
        //-->
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

出力

Entering switch block
Good job
Exiting switch block
Set the variable to different value and then try...

breakステートメントは、switch-caseステートメントで主要な役割を果たします。 breakステートメントなしでswitch-caseステートメントを使用する次のコードを試してください。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var grade = 'A';
            document.write("Entering switch block<br/>");
            switch (grade) {
               case 'A': document.write("Good job<br/>");
               case 'B': document.write("Pretty good<br/>");
               case 'C': document.write("Passed<br/>");
               case 'D': document.write("Not so good<br/>");
               case 'F': document.write("Failed<br/>");
               default: document.write("Unknown grade<br/>")
            }
            document.write("Exiting switch block");
        //-->
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

出力

Entering switch block
Good job
Pretty good
Passed
Not so good
Failed
Unknown grade
Exiting switch block
Set the variable to different value and then try...

JavaScript-Whileループ

プログラムの作成中に、アクションを何度も実行する必要がある場合があります。 このような状況では、ループステートメントを記述して行数を減らす必要があります。

JavaScriptは、プログラミングのプレッシャーを軽減するために必要なすべてのループをサポートします。

whileループ

JavaScriptの最も基本的なループは、この章で説明する while ループです。 while ループの目的は、 expression が真である限り、ステートメントまたはコードブロックを繰り返し実行することです。 式が false になると、ループは終了します。

フローチャート

  • whileループ*のフローチャートは次のようになります-

ループ中

構文

JavaScriptの* whileループ*の構文は次のとおりです- 

while (expression) {
   Statement(s) to be executed if expression is true
}

例

whileループを実装するには、次の例を試してください。 

<html>
   <body>

      <script type = "text/javascript">
         <!--
            var count = 0;
            document.write("Starting Loop ");

            while (count < 10) {
               document.write("Current Count : " + count + "<br/>");
               count++;
            }

            document.write("Loop stopped!");
        //-->
      </script>

      <p>Set the variable to different value and then try...</p>
   </body>
</html>

出力

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...

do …​ whileループ

*do ... while* ループは、ループの最後に条件チェックが発生することを除いて、 *while* ループに似ています。 つまり、条件が *false* であっても、ループは常に少なくとも1回は実行されます。

フローチャート

*do-while* ループのフローチャートは次のようになります-

Do Whileループ

構文

JavaScriptの do-while ループの構文は次のとおりです- 

do {
   Statement(s) to be executed;
} while (expression);

注- do …​ while ループの終わりで使用されるセミコロンをお見逃しなく。

例

JavaScriptで do-while ループを実装する方法を学ぶには、次の例を試してください。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var count = 0;

            document.write("Starting Loop" + "<br/>");
            do {
               document.write("Current Count : " + count + "<br/>");
               count++;
            }

            while (count < 5);
            document.write ("Loop stopped!");
        //-->
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

出力

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Loop Stopped!
Set the variable to different value and then try...

JavaScript-Forループ

「 for 」ループは、最もコンパクトなループ形式です。 それは次の3つの重要な部分が含まれています-

  • カウンタを開始値に初期化する*ループ初期化*。 初期化ステートメントは、ループが始まる前に実行されます。
  • 特定の条件が真かどうかをテストする* testステートメント*。 条件が真の場合、ループ内で指定されたコードが実行されます。そうでない場合、コントロールはループから出ます。
  • カウンターを増減できる* iterationステートメント*。

3つの部分すべてをセミコロンで区切って1行に入れることができます。

フローチャート

JavaScriptの for ループのフローチャートは次のようになります-

For Loop

構文

*for* ループの構文はJavaScriptです次のとおりです-
for (initialization; test condition; iteration statement) {
   Statement(s) to be executed if test condition is true
}

例

JavaScriptで for ループがどのように機能するかを学ぶには、次の例を試してください。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var count;
            document.write("Starting Loop" + "<br/>");

            for(count = 0; count < 10; count++) {
               document.write("Current Count : " + count );
               document.write("<br/>");
            }
            document.write("Loop stopped!");
        //-->
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

出力

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...

JavaScript _for …​ in_ループ

*for ... in* ループは、オブジェクトのプロパティをループするために使用されます。 オブジェクトについてはまだ説明していませんが、このループに慣れていないかもしれません。 しかし、JavaScriptでオブジェクトがどのように動作するかを理解すると、このループは非常に便利です。

構文

for (variablename in object) {
   statement or block to execute
}

各反復で、 object の1つのプロパティが variablename に割り当てられ、このループはオブジェクトのすべてのプロパティが使い果たされるまで続きます。

例

「for-in」ループを実装するには、次の例を試してください。 Webブラウザーの Navigator オブジェクトを印刷します。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var aProperty;
            document.write("Navigator Object Properties<br/> ");
            for (aProperty in navigator) {
               document.write(aProperty);
               document.write("<br/>");
            }
            document.write ("Exiting from the loop!");
        //-->
      </script>
      <p>Set the variable to different object and then try...</p>
   </body>
</html>

出力

Navigator Object Properties
serviceWorker
webkitPersistentStorage
webkitTemporaryStorage
geolocation
doNotTrack
onLine
languages
language
userAgent
product
platform
appVersion
appName
appCodeName
hardwareConcurrency
maxTouchPoints
vendorSub
vendor
productSub
cookieEnabled
mimeTypes
plugins
javaEnabled
getStorageUpdates
getGamepads
webkitGetUserMedia
vibrate
getBattery
sendBeacon
registerProtocolHandler
unregisterProtocolHandler
Exiting from the loop!
Set the variable to different object and then try...

JavaScript-ループ制御

JavaScriptは、ループの処理とステートメントの切り替えを完全に制御します。 ループの底に達することなくループから抜け出す必要がある場合があります。 また、コードブロックの一部をスキップして、ループの次の反復を開始する場合もあります。

このような状況をすべて処理するために、JavaScriptには break および continue ステートメントが用意されています。 これらのステートメントは、ループから即座に抜け出すため、またはループの次の反復を開始するためにそれぞれ使用されます。

breakステートメント

_switch_ステートメントで簡単に導入された break ステートメントは、ループを早期に終了し、中括弧から抜け出すために使用されます。

フローチャート

breakステートメントのフローチャートは次のようになります-

ブレイクステートメント

例

次の例は、whileループでの break ステートメントの使用を示しています。 x が5に到達し、閉じ中括弧のすぐ下にある* document.write（..）*ステートメントに到達すると、ループがどのように早く発生するかに注意してください- 

<html>
   <body>
      <script type = "text/javascript">
         <!--
         var x = 1;
         document.write("Entering the loop<br/> ");

         while (x < 20) {
            if (x == 5) {
               break;  //breaks out of loop completely
            }
            x = x + 1;
            document.write( x + "<br/>");
         }
         document.write("Exiting the loop!<br/> ");
        //-->
      </script>

      <p>Set the variable to different value and then try...</p>
   </body>
</html>

出力

Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...
*switch* ステートメント内での *break* ステートメントの使用はすでに確認しています。

continueステートメント

*continue* ステートメントは、ループの次の反復をすぐに開始し、残りのコードブロックをスキップするようにインタープリターに指示します。 *continue* ステートメントが検出されると、プログラムフローはすぐにループチェック式に移動し、条件が真のままであれば次の反復を開始し、そうでない場合は制御がループから抜け出します。

例

この例は、whileループでの continue ステートメントの使用を示しています。 変数 x に保持されているインデックスが5に達したときに、 continue ステートメントを使用して印刷をスキップする方法に注意してください- 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            var x = 1;
            document.write("Entering the loop<br/> ");

            while (x < 10) {
               x = x + 1;

               if (x == 5) {
                  continue;  //skip rest of the loop body
               }
               document.write( x + "<br/>");
            }
            document.write("Exiting the loop!<br/> ");
        //-->
      </script>
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

出力

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...

ラベルを使用してフローを制御する

JavaScript 1.2以降では、ラベルを break および continue とともに使用して、フローをより正確に制御できます。 *ラベル*は、ステートメントまたはコードブロックに適用されるコロン（:)が後に続く単なる識別子です。 breakとcontinueでラベルを使用する方法を理解するために、2つの異なる例を見ていきます。

注- 'continue' または 'break' ステートメントとそのラベル名の間で改行することはできません。 また、ラベル名と関連ループの間に他のステートメントがあってはなりません。

ラベルをよりよく理解するには、次の2つの例を試してください。

例1

次の例は、breakステートメントでLabelを実装する方法を示しています。 

<html>
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Entering the loop!<br/> ");
            outerloop:       //This is the label name
            for (var i = 0; i < 5; i++) {
               document.write("Outerloop: " + i + "<br/>");
               innerloop:
               for (var j = 0; j < 5; j++) {
                  if (j > 3 ) break ;          //Quit the innermost loop
                  if (i == 2) break innerloop; //Do the same thing
                  if (i == 4) break outerloop; //Quit the outer loop
                  document.write("Innerloop: " + j + " <br/>");
               }
            }
            document.write("Exiting the loop!<br/> ");
        //-->
      </script>
   </body>
</html>

出力

Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 2
Outerloop: 3
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 4
Exiting the loop!

例2

<html>
   <body>

      <script type = "text/javascript">
         <!--
         document.write("Entering the loop!<br/> ");
         outerloop:    //This is the label name

         for (var i = 0; i < 3; i++) {
            document.write("Outerloop: " + i + "<br/>");
            for (var j = 0; j < 5; j++) {
               if (j == 3) {
                  continue outerloop;
               }
               document.write("Innerloop: " + j + "<br/>");
            }
         }

         document.write("Exiting the loop!<br/> ");
        //-->
      </script>

   </body>
</html>

出力

Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!

JavaScript-関数

関数は、プログラム内のどこからでも呼び出すことができる再利用可能なコードのグループです。 これにより、同じコードを何度も記述する必要がなくなります。 プログラマーがモジュラーコードを書くのに役立ちます。 関数を使用すると、プログラマは大きなプログラムをいくつかの小さく管理可能な関数に分割できます。

JavaScriptは、他の高度なプログラミング言語と同様に、関数を使用してモジュラーコードを記述するために必要なすべての機能をサポートしています。 前の章で* alert（）や write（）*のような関数を見たことがあるはずです。 これらの関数は何度も使用していましたが、コアJavaScriptで記述されたのは一度だけでした。

JavaScriptを使用すると、独自の関数を作成することもできます。 このセクションでは、JavaScriptで独自の関数を作成する方法について説明します。

関数定義

関数を使用する前に、定義する必要があります。 JavaScriptで関数を定義する最も一般的な方法は、 function キーワードを使用し、その後に一意の関数名、パラメーターのリスト（空の場合もある）、および中括弧で囲まれたステートメントブロックを使用することです。

構文

基本的な構文は次のとおりです。 

<script type = "text/javascript">
   <!--
      function functionname(parameter-list) {
         statements
      }
  //-->
</script>

例

次の例を試してください。 パラメータをとらないsayHelloという関数を定義します- 

<script type = "text/javascript">
   <!--
      function sayHello() {
         alert("Hello there");
      }
  //-->
</script>

関数を呼び出す

スクリプトのどこかで関数を呼び出すには、次のコードに示すように、その関数の名前を記述するだけで済みます。 

<html>
   <head>
      <script type = "text/javascript">
         function sayHello() {
            document.write ("Hello there!");
         }
      </script>

   </head>

   <body>
      <p>Click the following button to call the function</p>
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello">
      </form>
      <p>Use different text in write method and then try...</p>
   </body>
</html>

出力

関数パラメーター

これまで、パラメーターのない関数を見てきました。 ただし、関数の呼び出し中に異なるパラメーターを渡す機能があります。 これらの渡されたパラメーターは関数内でキャプチャーでき、これらのパラメーターに対して任意の操作を実行できます。 関数は、コンマで区切られた複数のパラメーターを取ることができます。

例

次の例を試してください。 ここで sayHello 関数を変更しました。 現在、2つのパラメーターが必要です。 

<html>
   <head>
      <script type = "text/javascript">
         function sayHello(name, age) {
            document.write (name + " is " + age + " years old.");
         }
      </script>
   </head>

   <body>
      <p>Click the following button to call the function</p>
      <form>
         <input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
      </form>
      <p>Use different parameters inside the function and then try...</p>
   </body>
</html>

出力

returnステートメント

JavaScript関数には、オプションの return ステートメントを含めることができます。 これは、関数から値を返す場合に必要です。 このステートメントは、関数の最後のステートメントでなければなりません。

たとえば、関数に2つの数値を渡すと、関数が呼び出しプログラムで乗算を返すことが期待できます。

例

次の例を試してください。 2つのパラメーターを取り、それらを連結してから呼び出し側プログラムに結果を返す関数を定義します。 

<html>
   <head>
      <script type = "text/javascript">
         function concatenate(first, last) {
            var full;
            full = first + last;
            return full;
         }
         function secondFunction() {
            var result;
            result = concatenate('Zara', 'Ali');
            document.write (result );
         }
      </script>
   </head>

   <body>
      <p>Click the following button to call the function</p>
      <form>
         <input type = "button" onclick = "secondFunction()" value = "Call Function">
      </form>
      <p>Use different parameters inside the function and then try...</p>
  </body>
</html>

出力

JavaScript関数について多くのことを学ぶ必要がありますが、このチュートリアルでは最も重要な概念を取り上げました。

  • リンク：/javascript/javascript_nested_functions [JavaScriptネスト関数]
  • リンク：/javascript/javascript_function_constructors [JavaScript関数（）コンストラクタ]
  • リンク：/javascript/javascript_function_literals [JavaScript関数リテラル]

JavaScript-イベント

イベントとは？

JavaScriptのHTMLとの相互作用は、ユーザーまたはブラウザーがページを操作するときに発生するイベントを通じて処理されます。

ページが読み込まれると、イベントと呼ばれます。 ユーザーがボタンをクリックすると、そのクリックもイベントになります。 他の例には、キーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなどのイベントが含まれます。

開発者はこれらのイベントを使用して、JavaScriptでコード化された応答を実行できます。これにより、ボタンがウィンドウを閉じ、メッセージがユーザーに表示され、データが検証されます。

イベントはドキュメントオブジェクトモデル（DOM）レベル3の一部であり、すべてのHTML要素にはJavaScriptコードをトリガーできるイベントのセットが含まれています。

link：/html/html_events_ref [HTMLイベントリファレンス]の理解を深めるには、この小さなチュートリアルをご覧ください。 ここで、イベントとJavaScriptの関係を理解するための例をいくつか示します-

onclickイベントタイプ

これは、ユーザーがマウスの左ボタンをクリックしたときに発生する最も頻繁に使用されるイベントタイプです。 このイベントタイプに対して検証、警告などを行うことができます。

例

次の例を試してください。 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
        //-->
      </script>
   </head>

   <body>
      <p>Click the following button and see result</p>
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello"/>
      </form>
   </body>
</html>

出力

onsubmitイベントタイプ

*onsubmit* は、フォームを送信しようとしたときに発生するイベントです。 このイベントタイプに対してフォーム検証を行うことができます。

例

次の例は、onsubmitの使用方法を示しています。 ここでは、ウェブサーバーにフォームデータを送信する前に* validate（）*関数を呼び出しています。 * validate（）*関数がtrueを返す場合、フォームが送信されます。それ以外の場合、データは送信されません。

次の例を試してください。 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function validation() {
               all validation goes here
               .........
               return either true or false
            }
        //-->
      </script>
   </head>

   <body>
      <form method = "POST" action = "t.cgi" onsubmit = "return validate()">
         .......
         <input type = "submit" value = "Submit"/>
      </form>
   </body>
</html>

onmouseoverとonmouseout

これらの2つのイベントタイプは、画像やテキストでも素敵な効果を作成するのに役立ちます。 onmouseover イベントは、要素の上にマウスを移動したときにトリガーされ、 onmouseout はその要素からマウスを移動したときにトリガーされます。 次の例を試してください。 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function over() {
               document.write ("Mouse Over");
            }
            function out() {
               document.write ("Mouse Out");
            }
        //-->
      </script>
   </head>

   <body>
      <p>Bring your mouse inside the division to see the result:</p>
      <div onmouseover = "over()" onmouseout = "out()">
         <h2> This is inside the division </h2>
      </div>
   </body>
</html>

出力

HTML 5標準イベント

参考のために、標準のHTML 5イベントをここにリストします。 ここで、スクリプトは、そのイベントに対して実行されるJavascript関数を示しています。

Attribute Value Description
Offline script Triggers when the document goes offline
Onabort script Triggers on an abort event
onafterprint script Triggers after the document is printed
onbeforeonload script Triggers before the document loads
onbeforeprint script Triggers before the document is printed
onblur script Triggers when the window loses focus
oncanplay script Triggers when media can start play, but might has to stop for buffering
oncanplaythrough script Triggers when media can be played to the end, without stopping for buffering
onchange script Triggers when an element changes
onclick script Triggers on a mouse click
oncontextmenu script Triggers when a context menu is triggered
ondblclick script Triggers on a mouse double-click
ondrag script Triggers when an element is dragged
ondragend script Triggers at the end of a drag operation
ondragenter script Triggers when an element has been dragged to a valid drop target
ondragleave script Triggers when an element is being dragged over a valid drop target
ondragover script Triggers at the start of a drag operation
ondragstart script Triggers at the start of a drag operation
ondrop script Triggers when dragged element is being dropped
ondurationchange script Triggers when the length of the media is changed
onemptied script Triggers when a media resource element suddenly becomes empty.
onended script Triggers when media has reach the end
onerror script Triggers when an error occur
onfocus script Triggers when the window gets focus
onformchange script Triggers when a form changes
onforminput script Triggers when a form gets user input
onhaschange script Triggers when the document has change
oninput script Triggers when an element gets user input
oninvalid script Triggers when an element is invalid
onkeydown script Triggers when a key is pressed
onkeypress script Triggers when a key is pressed and released
onkeyup script Triggers when a key is released
onload script Triggers when the document loads
onloadeddata script Triggers when media data is loaded
onloadedmetadata script Triggers when the duration and other media data of a media element is loaded
onloadstart script Triggers when the browser starts to load the media data
onmessage script Triggers when the message is triggered
onmousedown script Triggers when a mouse button is pressed
onmousemove script Triggers when the mouse pointer moves
onmouseout script Triggers when the mouse pointer moves out of an element
onmouseover script Triggers when the mouse pointer moves over an element
onmouseup script Triggers when a mouse button is released
onmousewheel script Triggers when the mouse wheel is being rotated
onoffline script Triggers when the document goes offline
onoine script Triggers when the document comes online
ononline script Triggers when the document comes online
onpagehide script Triggers when the window is hidden
onpageshow script Triggers when the window becomes visible
onpause script Triggers when media data is paused
onplay script Triggers when media data is going to start playing
onplaying script Triggers when media data has start playing
onpopstate script Triggers when the window’s history changes
onprogress script Triggers when the browser is fetching the media data
onratechange script Triggers when the media data’s playing rate has changed
onreadystatechange script Triggers when the ready-state changes
onredo script Triggers when the document performs a redo
onresize script Triggers when the window is resized
onscroll script Triggers when an element’s scrollbar is being scrolled
onseeked script Triggers when a media element’s seeking attribute is no longer true, and the seeking has ended
onseeking script Triggers when a media element’s seeking attribute is true, and the seeking has begun
onselect script Triggers when an element is selected
onstalled script Triggers when there is an error in fetching media data
onstorage script Triggers when a document loads
onsubmit script Triggers when a form is submitted
onsuspend script Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched
ontimeupdate script Triggers when media changes its playing position
onundo script Triggers when a document performs an undo
onunload script Triggers when the user leaves the document
onvolumechange script Triggers when media changes the volume, also when volume is set to "mute"
onwaiting script Triggers when media has stopped playing, but is expected to resume

JavaScriptとCookie

クッキーとは？

WebブラウザとサーバーはHTTPプロトコルを使用して通信し、HTTPはステートレスプロトコルです。 ただし、商用Webサイトの場合、異なるページ間でセッション情報を維持する必要があります。 たとえば、多くのページを完了すると、1人のユーザー登録が終了します。 しかし、すべてのWebページでユーザーのセッション情報を維持する方法。

多くの場合、Cookieの使用は、ユーザーの利便性やサイトの統計情報を改善するために必要な設定、購入、手数料、その他の情報を記憶および追跡する最も効率的な方法です。

使い方 ？

サーバーは、Cookieの形式で訪問者のブラウザにデータを送信します。 ブラウザはCookieを受け入れる場合があります。 存在する場合、訪問者のハードドライブにプレーンテキストレコードとして保存されます。 これで、訪問者がサイトの別のページに到達すると、ブラウザは同じCookieをサーバーに送信して取得します。 取得すると、サーバーは以前に保存されたものを認識または記憶します。

クッキーは5つの可変長フィールドのプレーンテキストデータレコードです-

  • 有効期限-Cookieの有効期限が切れる日付。 これが空白の場合、訪問者がブラウザを終了すると、Cookieは期限切れになります。
  • ドメイン-サイトのドメイン名。
  • Path -Cookieを設定するディレクトリまたはWebページへのパス。 任意のディレクトリまたはページからCookieを取得する場合、これは空白になる場合があります。
  • Secure -このフィールドに「secure」という単語が含まれている場合、Cookieはセキュアサーバーでのみ取得できます。 このフィールドが空白の場合、そのような制限はありません。
  • Name = Value -Cookieはキーと値のペアの形式で設定および取得されます

クッキーはもともとCGIプログラミング用に設計されました。 Cookieに含まれるデータは、WebブラウザーとWebサーバーの間で自動的に送信されるため、サーバー上のCGIスクリプトは、クライアントに保存されているCookie値を読み書きできます。

JavaScriptは、 Document オブジェクトの cookie プロパティを使用してCookieを操作することもできます。 JavaScriptは、現在のWebページに適用されるCookieを読み取り、作成、変更、および削除できます。

クッキーの保存

Cookieを作成する最も簡単な方法は、次のような文字列値をdocument.cookieオブジェクトに割り当てることです。 

document.cookie = "key1 = value1;key2 = value2;expires = date";

ここで、 expires 属性はオプションです。 この属性に有効な日付または時刻を指定すると、Cookieは指定された日付または時刻に期限切れになり、その後、Cookieの値にアクセスできなくなります。

注意-Cookieの値には、セミコロン、コンマ、または空白を含めることはできません。 このため、Cookieに保存する前にJavaScript * escape（）関数を使用して値をエンコードすることができます。 これを行う場合は、Cookie値を読み取るときに、対応する unescape（）*関数も使用する必要があります。

例

以下を試してください。 入力Cookieに顧客名を設定します。 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function WriteCookie() {
               if( document.myform.customer.value == "" ) {
                  alert("Enter some value!");
                  return;
               }
               cookievalue = escape(document.myform.customer.value) + ";";
               document.cookie = "name=" + cookievalue;
               document.write ("Setting Cookies : " + "name=" + cookievalue );
            }
        //-->
      </script>
   </head>

   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
      </form>
   </body>
</html>

出力

これで、マシンには name というCookieがあります。 複数のkey = valueのペアをコンマで区切って使用して、複数のCookieを設定できます。

クッキーを読む

document.cookieオブジェクトの値はcookieであるため、cookieの読み取りは書き込みと同じくらい簡単です。 そのため、Cookieにアクセスするときはいつでもこの文字列を使用できます。 document.cookie文字列は、セミコロンで区切られたname = valueのペアのリストを保持します。 name はCookieの名前で、valueはその文字列値です。

次のように、文字列をキーと値に分割するために、文字列の* split（）*関数を使用できます-

例

すべてのCookieを取得するには、次の例を試してください。 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function ReadCookie() {
               var allcookies = document.cookie;
               document.write ("All Cookies : " + allcookies );

              //Get all the cookies pairs in an array
               cookiearray = allcookies.split(';');

              //Now take key value pair out of this array
               for(var i=0; i<cookiearray.length; i++) {
                  name = cookiearray[i].split('=')[0];
                  value = cookiearray[i].split('=')[1];
                  document.write ("Key is : " + name + " and Value is : " + value);
               }
            }
        //-->
      </script>
   </head>

   <body>
      <form name = "myform" action = "">
         <p> click the following button and see the result:</p>
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
      </form>
   </body>
</html>

注-ここで*長さ*は、配列の長さを返す Array クラスのメソッドです。 配列については別の章で説明します。 その時までに、それを消化してみてください。

注意-マシンにはすでに他のCookieが設定されている場合があります。 上記のコードは、マシンに設定されているすべてのCookieを表示します。

Cookieの有効期限の設定

有効期限を設定し、Cookie内に有効期限を保存することにより、現在のブラウザセッションを超えてCookieの寿命を延ばすことができます。 これを行うには、*「expires」*属性に日付と時刻を設定します。

例

次の例を試してください。 Cookieの有効期限を1か月延長する方法を示しています。 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function WriteCookie() {
               var now = new Date();
               now.setMonth( now.getMonth() + 1 );
               cookievalue = escape(document.myform.customer.value) + ";"

               document.cookie = "name=" + cookievalue;
               document.cookie = "expires=" + now.toUTCString() + ";"
               document.write ("Setting Cookies : " + "name=" + cookievalue );
            }
        //-->
      </script>
   </head>

   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>
   </body>
</html>

出力

クッキーを削除する

Cookieを削除して、その後にCookieを読み取ろうとしても何も返されないようにする場合があります。 これを行うには、有効期限を過去の時間に設定するだけです。

例

次の例を試してください。 有効期限を現在の日付から1か月遅らせてCookieを削除する方法を示しています。 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function WriteCookie() {
               var now = new Date();
               now.setMonth( now.getMonth() - 1 );
               cookievalue = escape(document.myform.customer.value) + ";"

               document.cookie = "name=" + cookievalue;
               document.cookie = "expires=" + now.toUTCString() + ";"
               document.write("Setting Cookies : " + "name=" + cookievalue );
            }
         //-->
      </script>
   </head>

   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>
   </body>
</html>

出力

JavaScript-ページのリダイレクト

ページリダイレクトとは

URLをクリックしてページXにアクセスしたが、内部的に別のページYにリダイレクトされたという状況に遭遇した可能性があります。 *ページのリダイレクト*が原因で発生します。 この概念は、link：/javascript/javascript_page_refresh [JavaScript Page Refresh]とは異なります。

元のページからユーザーをリダイレクトする理由はさまざまです。 私たちはいくつかの理由をリストアップしています-

  • ドメインの名前が気に入らず、新しいドメインに移行しています。 このようなシナリオでは、すべての訪問者を新しいサイトに誘導することができます。 ここでは、古いドメインを維持できますが、古いドメインのすべての訪問者が新しいドメインにアクセスできるように、ページリダイレクトを含む単一のページを配置できます。
  • ブラウザーのバージョンまたは名前に基づいてさまざまなページを構築したか、異なる国に基づいている可能性があります。サーバー側のページリダイレクトを使用する代わりに、クライアント側のページリダイレクトを使用してユーザーを適切なページに誘導できます。
  • 検索エンジンは既にページのインデックスを作成している場合があります。 しかし、別のドメインに移動している間、検索エンジンを介して訪れた訪問者を失いたくありません。 そのため、クライアント側のページリダイレクトを使用できます。 しかし、これは検索エンジンをだますために行われるべきではないことに注意してください、それはあなたのサイトが禁止されるようになるかもしれません。

ページリダイレクトの仕組み

ページリダイレクトの実装は次のとおりです。

例1

クライアント側でJavaScriptを使用してページリダイレクトを行うのは非常に簡単です。 サイト訪問者を新しいページにリダイレクトするには、次のようにヘッドセクションに行を追加するだけです。 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.finddevguides.com";
            }
        //-->
      </script>
   </head>

   <body>
      <p>Click the following button, you will be redirected to home page.</p>

      <form>
         <input type = "button" value = "Redirect Me" onclick = "Redirect();"/>
      </form>

   </body>
</html>

出力

例2

新しいページにリダイレクトする前に、サイト訪問者に適切なメッセージを表示できます。 これは、新しいページをロードするために少し時間の遅延を必要とします。 次の例は、同じ実装方法を示しています。 ここで、* setTimeout（）*は、特定の時間間隔の後に別の関数を実行するために使用できる組み込みJavaScript関数です。 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Redirect() {
               window.location = "https://www.finddevguides.com";
            }
            document.write("You will be redirected to main page in 10 sec.");
            setTimeout('Redirect()', 10000);
        //-->
      </script>
   </head>

   <body>
   </body>
</html>

出力

You will be redirected to finddevguides.com main page in 10 seconds!

実施例３

次の例は、ブラウザに基づいてサイト訪問者を別のページにリダイレクトする方法を示しています。 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            var browsername = navigator.appName;
            if( browsername == "Netscape" ) {
               window.location = "http://www.location.com/ns";
            } else if ( browsername =="Microsoft Internet Explorer") {
               window.location = "http://www.location.com/ie";
            } else {
               window.location = "http://www.location.com/other";
            }
        //-->
      </script>
   </head>

   <body>
   </body>
</html>

JavaScript-ダイアログボックス

JavaScriptは、3つの重要なタイプのダイアログボックスをサポートしています。 これらのダイアログボックスを使用して、警告を発したり、入力の確認を取得したり、ユーザーからの入力を取得したりできます。 ここでは、各ダイアログボックスについて1つずつ説明します。

警告ダイアログボックス

警告ダイアログボックスは、主にユーザーに警告メッセージを表示するために使用されます。 たとえば、1つの入力フィールドにテキストを入力する必要があるが、ユーザーが入力を提供しない場合、検証の一部として、警告ボックスを使用して警告メッセージを表示できます。

それでも、わかりやすいメッセージには警告ボックスを使用できます。 警告ボックスには、選択して続行するための「OK」ボタンが1つだけあります。

例

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function Warn() {
               alert ("This is a warning message!");
               document.write ("This is a warning message!");
            }
        //-->
      </script>
   </head>

   <body>
      <p>Click the following button to see the result: </p>
      <form>
         <input type = "button" value = "Click Me" onclick = "Warn();"/>
      </form>
   </body>
</html>

出力

確認ダイアログボックス

確認ダイアログボックスは主に、オプションについてユーザーの同意を得るために使用されます。 OK と Cancel の2つのボタンを持つダイアログボックスが表示されます。

ユーザーが[OK]ボタンをクリックすると、ウィンドウメソッド* confirm（）はtrueを返します。 ユーザーが[キャンセル]ボタンをクリックすると、 confirm（）*はfalseを返します。 次の確認ダイアログボックスを使用できます。

例

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function getConfirmation() {
               var retVal = confirm("Do you want to continue ?");
               if( retVal == true ) {
                  document.write ("User wants to continue!");
                  return true;
               } else {
                  document.write ("User does not want to continue!");
                  return false;
               }
            }
        //-->
      </script>
   </head>

   <body>
      <p>Click the following button to see the result: </p>
      <form>
         <input type = "button" value = "Click Me" onclick = "getConfirmation();"/>
      </form>
   </body>
</html>

出力

プロンプトダイアログボックス

プロンプトダイアログボックスは、テキストボックスをポップアップしてユーザー入力を取得する場合に非常に便利です。 したがって、ユーザーと対話することができます。 ユーザーはフィールドに入力して、[OK]をクリックする必要があります。

このダイアログボックスは、（i）テキストボックスに表示するラベルと（ii）テキストボックスに表示する既定の文字列の2つのパラメーターを取る* prompt（）*というメソッドを使用して表示されます。

このダイアログボックスには、 OK と Cancel の2つのボタンがあります。 ユーザーが[OK]ボタンをクリックすると、ウィンドウメソッド* prompt（）は入力された値をテキストボックスから返します。 ユーザーが[キャンセル]ボタンをクリックすると、ウィンドウメソッド prompt（）は *null を返します。

例

次の例は、プロンプトダイアログボックスを使用する方法を示しています- 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function getValue() {
               var retVal = prompt("Enter your name : ", "your name here");
               document.write("You have entered : " + retVal);
            }
        //-->
      </script>
   </head>

   <body>
      <p>Click the following button to see the result: </p>
      <form>
         <input type = "button" value = "Click Me" onclick = "getValue();"/>
      </form>
   </body>
</html>

出力

JavaScript-無効なキーワード

*void* はJavaScriptの重要なキーワードであり、任意のタイプの単一のオペランドの前に現れる単項演算子として使用できます。 この演算子は、値を返さずに評価される式を指定します。

構文

*void* の構文は、次の2つのいずれかです。
<head>
   <script type = "text/javascript">
      <!--
         void func()
         javascript:void func()
         or:
         void(func())
         javascript:void(func())
     //-->
   </script>
</head>

例1

この演算子の最も一般的な使用方法は、クライアント側の_javascript：_ URLであり、ブラウザで評価された式の値を表示せずに、副作用について式を評価できます。

ここでは、式* alert（ 'Warning !!!'）*が評価されますが、現在のドキュメントに読み込まれません- 

<html>
   <head>
      <script type = "text/javascript">
         <!--
        //-->
      </script>
   </head>

   <body>
      <p>Click the following, This won't react at all...</p>
      <a href = "javascript:void(alert('Warning!!!'))">Click me!</a>
   </body>
</html>

出力

例2

次の例を見てください。 式 "0"はJavaScriptでは効果がないため、次のリンクは何もしません。 ここでは、式「0」が評価されますが、現在のドキュメントにはロードされません。 

<html>
   <head>
      <script type = "text/javascript">
         <!--
        //-->
      </script>
   </head>

   <body>
      <p>Click the following, This won't react at all...</p>
      <a href = "javascript:void(0)">Click me!</a>
   </body>
</html>

出力

実施例３

*void* のもう1つの用途は、次のように *undefined* 値を意図的に生成することです。
<html>
   <head>
      <script type = "text/javascript">
         <!--
            function getValue() {
               var a,b,c;

               a = void ( b = 5, c = 7 );
               document.write('a = ' + a + ' b = ' + b +' c = ' + c );
            }
        //-->
      </script>
   </head>

   <body>
      <p>Click the following to see the result:</p>
      <form>
         <input type = "button" value = "Click Me" onclick = "getValue();"/>
      </form>
   </body>
</html>

出力

JavaScript-ページ印刷

多くの場合、Webページにボタンを配置して、そのWebページのコンテンツを実際のプリンターで印刷します。 JavaScriptは、 window オブジェクトの print 関数を使用してこの機能を実装するのに役立ちます。

JavaScript印刷関数* window.print（）は、実行時に現在のWebページを印刷します。 次の例に示すように、 *onclick イベントを使用してこの関数を直接呼び出すことができます。

例

次の例を試してください。 

<html>
   <head>
      <script type = "text/javascript">
         <!--
        //-->
      </script>
   </head>

   <body>
      <form>
         <input type = "button" value = "Print" onclick = "window.print()"/>
      </form>
   </body>
<html>

出力

印刷するという目的はありますが、推奨される方法ではありません。 印刷用ページとは、実際にはテキストのみで、画像、グラフィックス、広告が含まれていないページです。

次の方法でページプリンターを使いやすくすることができます-

  • ページのコピーを作成し、不要なテキストとグラフィックを除外してから、元のページから印刷しやすいページにリンクします。 リンクを確認してください：/javascript/printfriendly [例]。
  • ページの余分なコピーを保持したくない場合は、<！-PRINT STARTS HERE→ …​..のような適切なコメントを使用して印刷可能なテキストをマークできます。 <！-PRINT ENDS HERE→その後、PERLまたはその他のスクリプトをバックグラウンドで使用して、印刷可能なテキストを消去し、最終印刷用に表示できます。 finddevguidesでは、この方法を使用して、サイトの訪問者に印刷機能を提供しています。

ページを印刷する方法は？

ウェブページに上記の機能が見つからない場合は、ブラウザの標準ツールバーを使用してウェブページを印刷できます。 次のリンクに従ってください。 

File →  Print → Click OK  button.

JavaScript-オブジェクトの概要

JavaScriptはオブジェクト指向プログラミング（OOP）言語です。 プログラミング言語は、開発者に4つの基本的な機能を提供する場合、オブジェクト指向と呼ぶことができます-

  • カプセル化-データまたはメソッドに関係なく、関連情報をオブジェクトに一緒に保存する機能。
  • Aggregation -1つのオブジェクトを別のオブジェクト内に保存する機能。
  • 継承-プロパティとメソッドの一部を別のクラス（またはクラスの数）に依存するクラスの機能。
  • 多態性-さまざまな方法で機能する1つの関数またはメソッドを記述する機能。

オブジェクトは属性で構成されます。 属性に関数が含まれる場合、オブジェクトのメソッドと見なされます。それ以外の場合、属性はプロパティと見なされます。

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

オブジェクトプロパティは、3つのプリミティブデータ型のいずれか、または別のオブジェクトなどの抽象データ型のいずれかです。 オブジェクトプロパティは、通常、オブジェクトのメソッドで内部的に使用される変数ですが、ページ全体で使用されるグローバルに表示される変数にすることもできます。

オブジェクトにプロパティを追加するための構文は次のとおりです- 

objectName.objectProperty = propertyValue;

例-次のコードは、 document オブジェクトの "title" プロパティを使用してドキュメントのタイトルを取得します。 

var str = document.title;

オブジェクトメソッド

メソッドは、オブジェクトに何かをさせたり、何かをさせたりする機能です。 関数とメソッドにはわずかな違いがあります。関数はステートメントのスタンドアロン単位であり、メソッドはオブジェクトに関連付けられ、 this キーワードで参照できます。

メソッドは、オブジェクトのコンテンツを画面に表示することから、ローカルプロパティとパラメーターのグループに対して複雑な数学演算を実行することまで、あらゆることに役立ちます。

例-以下は、ドキュメントオブジェクトの* write（）*メソッドを使用してドキュメントにコンテンツを書き込む方法を示す簡単な例です。 

document.write("This is test");

ユーザー定義オブジェクト

すべてのユーザー定義オブジェクトと組み込みオブジェクトは、 Object と呼ばれるオブジェクトの子孫です。

新しいオペレーター

*new* 演算子は、オブジェクトのインスタンスを作成するために使用されます。 オブジェクトを作成するには、 *new* 演算子の後にコンストラクターメソッドが続きます。

次の例では、コンストラクターメソッドはObject（）、Array（）、およびDate（）です。 これらのコンストラクターは組み込みのJavaScript関数です。 

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");

Object（）コンストラクター

コンストラクターは、オブジェクトを作成および初期化する関数です。 JavaScriptは、オブジェクトを作成するための* Object（）*という特別なコンストラクター関数を提供します。 * Object（）*コンストラクターの戻り値は変数に割り当てられます。

変数には、新しいオブジェクトへの参照が含まれます。 オブジェクトに割り当てられたプロパティは変数ではなく、 var キーワードで定義されていません。

例1

次の例を試してください。オブジェクトの作成方法を示します。 

<html>
   <head>
      <title>User-defined objects</title>
      <script type = "text/javascript">
         var book = new Object();  //Create the object
         book.subject = "Perl";    //Assign properties to the object
         book.author  = "Mohtashim";
      </script>
   </head>

   <body>
      <script type = "text/javascript">
         document.write("Book name is : " + book.subject + "<br>");
         document.write("Book author is : " + book.author + "<br>");
      </script>
   </body>
</html>

出力

Book name is : Perl
Book author is : Mohtashim

例2

この例は、ユーザー定義関数を使用してオブジェクトを作成する方法を示しています。 ここで、 this キーワードは、関数に渡されたオブジェクトを参照するために使用されます。 

<html>
   <head>
   <title>User-defined objects</title>
      <script type = "text/javascript">
         function book(title, author) {
            this.title = title;
            this.author  = author;
         }
      </script>
   </head>

   <body>
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
      </script>
   </body>
</html>

出力

Book title is : Perl
Book author is : Mohtashim

オブジェクトのメソッドの定義

前の例は、コンストラクターがオブジェクトを作成し、プロパティを割り当てる方法を示しています。 ただし、メソッドを割り当てることにより、オブジェクトの定義を完了する必要があります。

例

次の例を試してください。オブジェクトとともに関数を追加する方法を示します。 

<html>

   <head>
   <title>User-defined objects</title>
      <script type = "text/javascript">
        //Define a function which will work as a method
         function addPrice(amount) {
            this.price = amount;
         }

         function book(title, author) {
            this.title = title;
            this.author  = author;
            this.addPrice = addPrice; //Assign that method as property.
         }
      </script>
   </head>

   <body>
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         myBook.addPrice(100);

         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>
   </body>
</html>

出力

Book title is : Perl
Book author is : Mohtashim
Book price is : 100

「with」キーワード

*'with'* キーワードは、オブジェクトのプロパティまたはメソッドを参照するための一種の略記として使用されます。
*with* の引数として指定されたオブジェクトは、後続のブロックの期間中、デフォルトのオブジェクトになります。 オブジェクトのプロパティとメソッドは、オブジェクトに名前を付けずに使用できます。

構文

with objectの構文は次のとおりです- 

with (object) {
   properties used without the object name and dot
}

例

次の例を試してください。 

<html>
   <head>
   <title>User-defined objects</title>
      <script type = "text/javascript">
        //Define a function which will work as a method
         function addPrice(amount) {
            with(this) {
               price = amount;
            }
         }
         function book(title, author) {
            this.title = title;
            this.author = author;
            this.price = 0;
            this.addPrice = addPrice; //Assign that method as property.
         }
      </script>
   </head>

   <body>
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         myBook.addPrice(100);

         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>
   </body>
</html>

出力

Book title is : Perl
Book author is : Mohtashim
Book price is : 100

JavaScriptネイティブオブジェクト

JavaScriptには、組み込みオブジェクトまたはネイティブオブジェクトがいくつかあります。 これらのオブジェクトはプログラムのどこからでもアクセス可能であり、どのオペレーティングシステムで実行されているブラウザでも同じように機能します。

すべての重要なJavaScriptネイティブオブジェクトのリストを次に示します-

  • リンク：/javascript/javascript_number_object [JavaScript数値オブジェクト]
  • リンク：/javascript/javascript_boolean_object [JavaScriptブールオブジェクト]
  • リンク：/javascript/javascript_strings_object [JavaScript文字列オブジェクト]
  • リンク：/javascript/javascript_arrays_object [JavaScript配列オブジェクト]
  • リンク：/javascript/javascript_date_object [JavaScript日付オブジェクト]
  • リンク：/javascript/javascript_math_object [JavaScript Math Object]
  • リンク：/javascript/javascript_regexp_object [JavaScript RegExpオブジェクト]

JavaScript-数値オブジェクト

*Number* オブジェクトは、整数または浮動小数点数の数値日付を表します。 一般に、ブラウザは数値リテラルを数値クラスのインスタンスに自動的に変換するため、 *Number* オブジェクトについて心配する必要はありません。

構文

  • 番号*オブジェクトを作成するための構文は次のとおりです-
var val = new Number(number);

数値の代わりに、数値以外の引数を指定すると、引数を数値に変換できず、 NaN （Not-a-Number）が返されます。

数値のプロパティ

各プロパティとその説明のリストは次のとおりです。

Sr.No. Property & Description
1

MAX_VALUE

JavaScriptの数値で可能な最大値は1.7976931348623157E + 308です。

2

MIN_VALUE

JavaScriptの数値が5E-324にできる最小値

3

NaN

数値ではない値と等しい。

4

NEGATIVE_INFINITY

MIN_VALUEより小さい値。

5

POSITIVE_INFINITY

MAX_VALUEより大きい値

6

prototype

Numberオブジェクトの静的プロパティ。 prototypeプロパティを使用して、現在のドキュメントのNumberオブジェクトに新しいプロパティとメソッドを割り当てます

7

constructor

このオブジェクトのインスタンスを作成した関数を返します。 デフォルトでは、これはNumberオブジェクトです。

次のセクションでは、Numberのプロパティを示すためにいくつかの例を取り上げます。

数値メソッド

Numberオブジェクトには、すべてのオブジェクトの定義の一部であるデフォルトメソッドのみが含まれます。

Sr.No. Method & Description
1

toExponential()

JavaScriptが通常標準表記を使用する範囲内にある場合でも、指数表記で数字を表示します。

2

toFixed()

小数点の右側に特定の桁数の数値をフォーマットします。

3

toLocaleString()

現在の数値の文字列値バージョンを、ブラウザーのローカル設定に応じて異なる形式で返します。

4

toPrecision()

数値を表示する合計桁数（小数の左右の桁を含む）を定義します。

5

toString()

数値の値の文字列表現を返します。

6

valueOf()

数値の値を返します。

次のセクションでは、Numberのメソッドを説明するいくつかの例を示します。

JavaScript-ブールオブジェクト

*Boolean* オブジェクトは、「true」または「false」の2つの値を表します。 _value_パラメーターが省略されているか、0、-0、null、false、* NaN、*未定義、または空の文字列（ ""）の場合、オブジェクトの初期値はfalseです。

構文

次の構文を使用して boolean オブジェクトを作成します。 

var val = new Boolean(value);

ブールプロパティ

これはブールオブジェクトのプロパティのリストです-

Sr.No. Property & Description
1

constructor

オブジェクトを作成したブール関数への参照を返します。

2

prototype

prototypeプロパティを使用すると、プロパティとメソッドをオブジェクトに追加できます。

次のセクションでは、ブールオブジェクトのプロパティを説明するいくつかの例を示します。

ブールメソッド

ブールオブジェクトのメソッドとその説明のリストを次に示します。

Sr.No. Method & Description
1

toSource()

ブールオブジェクトのソースを含む文字列を返します。この文字列を使用して、同等のオブジェクトを作成できます。

2

toString()

オブジェクトの値に応じて、「true」または「false」の文字列を返します。

3

valueOf()

ブールオブジェクトのプリミティブ値を返します。

以下のセクションでは、ブールメソッドの使用法を示すいくつかの例を示します。

JavaScript-文字列オブジェクト

*String* オブジェクトを使用すると、一連の文字を操作できます。 Javascriptの文字列プリミティブデータ型をいくつかのヘルパーメソッドでラップします。

JavaScriptは文字列プリミティブとStringオブジェクトの間で自動的に変換するため、文字列プリミティブでStringオブジェクトのヘルパーメソッドを呼び出すことができます。

構文

文字列オブジェクトを作成するには、次の構文を使用します- 

var val = new String(string);
*String* パラメーターは、適切にエンコードされた一連の文字です。

文字列のプロパティ

以下は、Stringオブジェクトのプロパティとその説明のリストです。

Sr.No. Property & Description
1

constructor

オブジェクトを作成したString関数への参照を返します。

2

length

文字列の長さを返します。

3

prototype

prototypeプロパティを使用すると、プロパティとメソッドをオブジェクトに追加できます。

次のセクションでは、Stringプロパティの使用法を示すための例をいくつか示します。

文字列メソッド

以下に、Stringオブジェクトで使用可能なメソッドとその説明のリストを示します。

Sr.No. Method & Description
1

charAt()

指定されたインデックスにある文字を返します。

2

charCodeAt()

指定されたインデックスにある文字のUnicode値を示す数値を返します。

3

concat()

2つの文字列のテキストを結合し、新しい文字列を返します。

4

indexOf()

指定した値の最初の出現の呼び出し元Stringオブジェクト内のインデックスを返します。見つからない場合は-1を返します。

5

lastIndexOf()

指定した値が最後に出現する呼び出し元のStringオブジェクト内のインデックスを返します。見つからない場合は-1を返します。

6

localeCompare()

参照文字列がソート順で指定された文字列の前後にあるか、同じかを示す数値を返します。

7

match()

正規表現を文字列と照合するために使用されます。

8

replace()

正規表現と文字列の一致を検出し、一致した部分文字列を新しい部分文字列で置き換えるために使用されます。

9

search()

正規表現と指定された文字列の一致の検索を実行します。

10

slice()

文字列のセクションを抽出し、新しい文字列を返します。

11

split()

文字列を部分文字列に分離することにより、文字列オブジェクトを文字列の配列に分割します。

12

substr()

指定した位置から指定した文字数までの文字列内の文字を返します。

13

substring()

2つのインデックス間の文字列内の文字を文字列に返します。

14

toLocaleLowerCase()

文字列内の文字は、現在のロケールを尊重しながら小文字に変換されます。

15

toLocaleUpperCase()

文字列内の文字は、現在のロケールを考慮しながら大文字に変換されます。

16

toLowerCase()

呼び出し文字列値を小文字に変換して返します。

17

toString()

指定されたオブジェクトを表す文字列を返します。

18

toUpperCase()

呼び出し文字列値を大文字に変換して返します。

19

valueOf()

指定されたオブジェクトのプリミティブ値を返します。

文字列HTMLラッパー

適切なHTMLタグ内にラップされた文字列のコピーを返すメソッドのリストを次に示します。

Sr.No. Method & Description
1

anchor()

ハイパーテキストターゲットとして使用されるHTMLアンカーを作成します。

2

big()

<big>タグ内にあるかのように大きなフォントで表示される文字列を作成します。

3

blink()

<blink>タグ内にあるかのように点滅する文字列を作成します。

4

bold()

<b>タグ内にあるかのように太字で表示される文字列を作成します。

5

fixed()

文字列を<tt>タグ内にあるかのように固定ピッチフォントで表示します。

6

fontcolor()

<font color = "color">タグにあるかのように、指定された色で文字列を表示します。

7

fontsize()

<font size = "size">タグにあるかのように、指定されたフォントサイズで文字列を表示します。

8

italics()

文字列を<i>タグ内にあるかのように斜体にします。

9

link()

別のURLを要求するHTMLハイパーテキストリンクを作成します。

10

small()

<small>タグ内にあるかのように、文字列を小さなフォントで表示します。

11

strike()

<strike>タグ内にあるかのように、文字列を取り消し線として表示します。

12

sub()

文字列を<sub>タグ内にあるかのように、添え字として表示します

13

sup()

文字列を<sup>タグ内にあるかのように、上付き文字として表示します

次のセクションでは、Stringメソッドの使用法を示すためのいくつかの例を示します。

JavaScript-配列オブジェクト

*Array* オブジェクトを使用すると、単一の変数に複数の値を保存できます。 同じタイプの要素の固定サイズの順次コレクションを格納します。 配列はデータのコレクションを格納するために使用されますが、配列を同じタイプの変数のコレクションと考える方が便利な場合がよくあります。

構文

  • 配列*オブジェクトを作成するには、次の構文を使用します-
var fruits = new Array( "apple", "orange", "mango" );
*Array* パラメーターは、文字列または整数のリストです。 Arrayコンストラクターで単一の数値パラメーターを指定する場合、配列の初期長を指定します。 配列に許可される最大長は4,294,967,295です。

次のように値を割り当てるだけで配列を作成できます- 

var fruits = [ "apple", "orange", "mango" ];

序数を使用して、次のように配列内の値にアクセスして設定します。 

fruits[0] is the first element
fruits[1] is the second element
fruits[2] is the third element

配列のプロパティ

以下に、Arrayオブジェクトのプロパティとその説明のリストを示します。

Sr.No. Property & Description
1

constructor

オブジェクトを作成した配列関数への参照を返します。

2

index

プロパティは、文字列内の一致のゼロベースのインデックスを表します

3

input

このプロパティは、正規表現の一致によって作成された配列にのみ存在します。

4

length

配列内の要素の数を反映します。

5

prototype

prototypeプロパティを使用すると、プロパティとメソッドをオブジェクトに追加できます。

次のセクションでは、Arrayプロパティの使用法を説明するいくつかの例を示します。

配列メソッド

Arrayオブジェクトのメソッドとその説明のリストを次に示します。

Sr.No. Method & Description
1

concat()

この配列を他の配列や値と結合した新しい配列を返します。

2

every()

この配列のすべての要素が提供されたテスト関数を満たす場合、trueを返します。

3

filter()

指定されたフィルタリング関数がtrueを返すこの配列のすべての要素を使用して、新しい配列を作成します。

4

forEach()

配列内の各要素に対して関数を呼び出します。

5

indexOf()

指定された値に等しい配列内の要素の最初の（最小の）インデックスを返します。見つからない場合は-1を返します。

6

join()

配列のすべての要素を文字列に結合します。

7

lastIndexOf()

指定された値に等しい配列内の要素の最後の（最大の）インデックスを返します。見つからない場合は-1を返します。

8

map()

この配列のすべての要素で提供された関数を呼び出した結果で新しい配列を作成します。

9

pop()

配列から最後の要素を削除し、その要素を返します。

10

push()

配列の最後に1つ以上の要素を追加し、配列の新しい長さを返します。

11

reduce()

配列の2つの値（左から右へ）に対して関数を同時に適用して、単一の値に減らします。

12

reduceRight()

配列の2つの値（右から左）に対して関数を同時に適用して、単一の値に減らします。

13

reverse()

配列の要素の順序を逆にします-最初が最後になり、最後が最初になります。

14

shift()

配列から最初の要素を削除し、その要素を返します。

15

slice()

配列のセクションを抽出し、新しい配列を返します。

16

some()

この配列の少なくとも1つの要素が提供されたテスト関数を満たす場合、trueを返します。

17

toSource()

オブジェクトのソースコードを表します

18

sort()

配列の要素を並べ替えます

19

splice()

配列に要素を追加または削除します。

20

toString()

配列とその要素を表す文字列を返します。

21

unshift()

配列の前に1つ以上の要素を追加し、配列の新しい長さを返します。

次のセクションでは、Arrayメソッドの使用法を示すためのいくつかの例を示します。

JavaScript-日付オブジェクト

Dateオブジェクトは、JavaScript言語に組み込まれたデータ型です。 以下に示すように、日付オブジェクトは* new Date（）*で作成されます。

Dateオブジェクトが作成されると、いくつかのメソッドを使用して操作できます。 ほとんどのメソッドでは、ローカル時間またはUTC（ユニバーサル、またはGMT）時間を使用して、オブジェクトの年、月、日、時間、分、秒、ミリ秒のフィールドを取得および設定することができます。

ECMAScript標準では、1970年1月1日前後の1億日以内に、Dateオブジェクトが任意の日付と時刻をミリ秒の精度で表現できる必要があります。 これは、プラスマイナス273,785年の範囲なので、JavaScriptは275755年までの日付と時刻を表すことができます。

構文

次の構文のいずれかを使用して、Date（）コンストラクターを使用してDateオブジェクトを作成できます。 

new Date( )
new Date(milliseconds)
new Date(datestring)
new Date(year,month,date[,hour,minute,second,millisecond ])

注意-括弧内のパラメーターは常にオプションです。

ここにパラメータの説明があります-

引数なし-引数なしで、Date（）コンストラクタは現在の日付と時刻に設定されたDateオブジェクトを作成します。

ミリ秒-1つの数値引数が渡されると、getTime（）メソッドによって返される、ミリ秒単位の日付の内部数値表現として取得されます。 たとえば、引数5000を渡すと、1/1/70の午前0時5秒を表す日付が作成されます。 

*datestring* -1つの文字列引数が渡されると、それは* Date.parse（）*メソッドで受け入れられる形式の日付の文字列表現になります。
*7 agruments* -上記のコンストラクタの最後の形式を使用します。 ここに各引数の説明があります-
  • year -年を表す整数値。 互換性のため（Y2Kの問題を回避するため）、常に年を完全に指定する必要があります。 98ではなく1998を使用します。
  • month -1月の0から12月の11までの月を表す整数値。
  • 日付-月の日を表す整数値。
  • hour -時刻を表す整数値（24時間スケール）。
  • 分-時間測定値の分セグメントを表す整数値。
  • second -時間測定値の2番目のセグメントを表す整数値。
  • ミリ秒-時間の読み取りのミリ秒セグメントを表す整数値。

日付のプロパティ

以下に、Dateオブジェクトのプロパティとその説明のリストを示します。

Sr.No. Property & Description
1

constructor

オブジェクトのプロトタイプを作成する関数を指定します。

2

prototype

prototypeプロパティを使用すると、プロパティとメソッドをオブジェクトに追加できます

次のセクションでは、さまざまなDateプロパティの使用方法を示すための例をいくつか示します。

日付メソッド

*Date* で使用されるメソッドとその説明のリストを次に示します。
Sr.No. Method & Description
1

Date()

今日の日付と時刻を返します

2

getDate()

現地時間に従って、指定された日付の月の日を返します。

3

getDay()

現地時間に従って、指定された日付の曜日を返します。

4

getFullYear()

現地時間に従って、指定された日付の年を返します。

5

getHours()

現地時間に従って、指定された日付の時間を返します。

6

getMilliseconds()

現地時間に従って、指定された日付のミリ秒を返します。

7

getMinutes()

現地時間に従って、指定された日付の分を返します。

8

getMonth()

現地時間に従って、指定された日付の月を返します。

9

getSeconds()

現地時間に従って、指定された日付の秒を返します。

10

getTime()

1970年1月1日00:00:00 UTCからのミリ秒数として、指定された日付の数値を返します。

11

getTimezoneOffset()

現在のロケールのタイムゾーンオフセットを分単位で返します。

12

getUTCDate()

世界時に基づき、指定された日付の月の日（日付）を返します。

13

getUTCDay()

世界時に基づき、指定された日付の曜日を返します。

14

getUTCFullYear()

世界時に基づき、指定された日付の年を返します。

15

getUTCHours()

世界時に基づき、指定された日付の時間を返します。

16

getUTCMilliseconds()

世界時に基づき、指定された日付のミリ秒を返します。

17

getUTCMinutes()

世界時に基づき、指定された日付の分を返します。

18

getUTCMonth()

世界時に基づき、指定された日付の月を返します。

19

getUTCSeconds()

世界時に基づき、指定された日付の秒を返します。

20

getYear()

廃止-現地時間に従って、指定された日付の年を返します。 代わりにgetFullYearを使用してください。

21

setDate()

現地時間に従って、指定された日付の月の日を設定します。

22

setFullYear()

現地時間に従って、指定された日付の通年を設定します。

23

setHours()

現地時間に従って、指定された日付の時間を設定します。

24

setMilliseconds()

現地時間に従って、指定された日付のミリ秒を設定します。

25

setMinutes()

現地時間に従って、指定された日付の分を設定します。

26

setMonth()

現地時間に従って、指定された日付の月を設定します。

27

setSeconds()

現地時間に従って、指定された日付の秒を設定します。

28

setTime()

Dateオブジェクトを、1970年1月1日00:00:00 UTCからのミリ秒数で表される時間に設定します。

29

setUTCDate()

世界時に基づき、指定された日付の月の日を設定します。

30

setUTCFullYear()

世界時に基づき、指定された日付の通年を設定します。

31

setUTCHours()

世界時に基づき、指定された日付の時間を設定します。

32

setUTCMilliseconds()

世界時に基づき、指定された日付のミリ秒を設定します。

33

setUTCMinutes()

世界時に基づき、指定された日付の分を設定します。

34

setUTCMonth()

世界時に基づき、指定された日付の月を設定します。

35

setUTCSeconds()

世界時に基づき、指定された日付の秒を設定します。

36

setYear()

  • 非推奨-*現地時間に従って、指定された日付の年を設定します。 代わりにsetFullYearを使用してください。
37

toDateString()

日付の「日付」部分を人間が読める文字列として返します。

38

toGMTString()

  • 非推奨-*インターネットGMT規則を使用して、日付を文字列に変換します。 代わりにtoUTCStringを使用してください。
39

toLocaleDateString()

現在のロケールの規則を使用して、日付の「日付」部分を文字列として返します。

40

toLocaleFormat()

書式文字列を使用して、日付を文字列に変換します。

41

toLocaleString()

現在のロケールの規則を使用して、日付を文字列に変換します。

42

toLocaleTimeString()

現在のロケールの規則を使用して、日付の「時刻」部分を文字列として返します。

43

toSource()

同等のDateオブジェクトのソースを表す文字列を返します。この値を使用して、新しいオブジェクトを作成できます。

44

toString()

指定されたDateオブジェクトを表す文字列を返します。

45

toTimeString()

日付の「時刻」部分を人間が読める文字列として返します。

46

toUTCString()

世界時の規則を使用して、日付を文字列に変換します。

47

valueOf()

Dateオブジェクトのプリミティブ値を返します。

世界時の規則を使用して、日付を文字列に変換します。

日付の静的メソッド

前述の多くのインスタンスメソッドに加えて、Dateオブジェクトは2つの静的メソッドも定義します。 これらのメソッドは、Date（）コンストラクター自体を介して呼び出されます。

Sr.No. Method & Description
1

Date.parse( )

日付と時刻の文字列表現を解析し、その日付の内部ミリ秒表現を返します。

2

Date.UTC( )

指定されたUTC日付と時刻のミリ秒表現を返します。

次のセクションでは、Date Staticメソッドの使用法を示すための例をいくつか示します。

JavaScript-数学オブジェクト

*math* オブジェクトは、数学定数と関数のプロパティとメソッドを提供します。 他のグローバルオブジェクトとは異なり、 *Math* はコンストラクタではありません。 *Math* のすべてのプロパティとメソッドは静的であり、Mathを作成せずにオブジェクトとして使用して呼び出すことができます。

したがって、定数 pi を Math.PI として参照し、_sine_関数を* Math.sin（x）*として呼び出します。xはメソッドの引数です。

構文

Mathのプロパティとメソッドを呼び出す構文は次のとおりです。 

var pi_val = Math.PI;
var sine_val = Math.sin(30);

数学のプロパティ

以下は、Mathのすべてのプロパティとその説明のリストです。

Sr.No. Property & Description
1

link:/javascript/math_e[E \]

オイラー定数と自然対数の底、約2.718。

2

LN2

2の自然対数、約0.693。

3

LN10

10の自然対数、約2.302。

4

LOG2E

Eの2を底とする対数、約1.442。

5

LOG10E

Eの10を底とする対数、約0.434。

6

PI

円の円周と直径の比、約3.14159。

7

SQRT1_2

1/2の平方根。同様に、2の平方根に対して1、約0.707です。

8

SQRT2

2の平方根、約1.414。

次のセクションでは、Mathプロパティの使用法を示すための例をいくつか示します。

数学メソッド

Mathオブジェクトに関連付けられているメソッドとその説明のリストを次に示します

Sr.No. Method & Description
1

abs()

数値の絶対値を返します。

2

acos()

数値の逆余弦（ラジアン）を返します。

3

asin()

数値の逆正弦（ラジアン）を返します。

4

atan()

数値の逆正接（ラジアン単位）を返します。

5

atan2()

引数の商のアークタンジェントを返します。

6

ceil()

数値以上の最小の整数を返します。

7

cos()

数値の余弦を返します。

8

exp()

E ^ N ^を返します。ここで、Nは引数で、Eはオイラーの定数、自然対数の底です。

9

floor()

数値以下の最大の整数を返します。

10

log()

数値の自然対数（底E）を返します。

11

max()

ゼロ以上の数の最大値を返します。

12

min()

ゼロ以上の数の最小値を返します。

13

pow()

baseを指数のべき乗、つまりbase exponentに戻します。

14

random()

0から1までの擬似乱数を返します。

15

round()

最も近い整数に丸められた数値の値を返します。

16

sin()

数値のサインを返します。

17

sqrt()

数値の平方根を返します。

18

tan()

数値のタンジェントを返します。

19

toSource()

文字列「Math」を返します。

次のセクションでは、Mathに関連付けられたメソッドの使用法を示すいくつかの例を示します。

正規表現とRegExpオブジェクト

正規表現は、文字のパターンを記述するオブジェクトです。

JavaScript RegExp クラスは正規表現を表し、Stringと RegExp の両方が、正規表現を使用して強力なパターンマッチングおよびテキストの検索と置換機能を実行するメソッドを定義します。

構文

正規表現は、次のように* RegExp（）*コンストラクタで定義できます- 

var pattern = new RegExp(pattern, attributes);
or simply
var pattern =/pattern/attributes;

ここにパラメータの説明があります-

  • pattern -正規表現または別の正規表現のパターンを指定する文字列。
  • 属性-グローバル、大文字と小文字を区別しない、および複数行の一致をそれぞれ指定する「g」、「i」、および「m」属性のいずれかを含むオプションの文字列。

ブラケット

ブラケット（[]）は、正規表現のコンテキストで使用される場合、特別な意味を持ちます。 文字の範囲を見つけるために使用されます。

Sr.No. Expression & Description
1

[…​]

大括弧の間の任意の1文字。

2

[^…​]

大括弧の間にない任意の1文字。

3

[0-9]

0〜9の10進数に一致します。

4

[a-z]

小文字の a から小文字の z までの任意の文字に一致します。

5

[A-Z]

大文字の A から大文字の Z までの任意の文字に一致します。

6

[a-Z]

小文字の a から大文字の Z までの任意の文字に一致します。

上記の範囲は一般的なものです。また、範囲[0-3]を使用して0〜3の範囲の10進数を一致させるか、範囲[b-v]を使用して b 〜 v の範囲の小文字を一致させることもできます。

数量詞

括弧で囲まれた文字シーケンスと単一文字の頻度または位置は、特殊文字で示すことができます。 各特殊文字には特定の意味があります。 +、*、？、および$フラグはすべて文字シーケンスに従います。

Sr.No. Expression & Description
1

p+

1つ以上のpを含む文字列に一致します。

2

p*

0個以上のpを含む文字列に一致します。

3

p?

最大で1つのpを含む文字列に一致します。

4

p{N}

  • N* pのシーケンスを含む任意の文字列に一致します
5

p\{2,3}

2つまたは3つのpのシーケンスを含む任意の文字列に一致します。

6

p\{2, }

少なくとも2つのpのシーケンスを含む文字列に一致します。

7

p$

末尾にpを持つ任意の文字列に一致します。

8

^p

先頭がpの文字列と一致します。

例

次の例では、文字の一致について詳しく説明します。

Sr.No. Expression & Description
1

[^a-zA-Z]

  • a* から *z* および *A* からZの範囲の文字を含まない文字列に一致します。
2

p.p

  • p、の後に任意の文字が続き、さらに別の *p が続く文字列に一致します。
3

^.{2}$

正確に2文字を含む文字列に一致します。

4

<b>(.)</b>*

<b>および</b>で囲まれた文字列に一致します。

5

p(hp)*

  • p* の後に、 *hp* シーケンスのゼロ個以上のインスタンスが続く文字列に一致します。

リテラル文字

Sr.No. Character & Description
1

Alphanumeric

自体

2

\0

NUL文字（\ u0000）

3

\t

タブ（\ u0009

4

\n

改行（\ u000A）

5

\v

垂直タブ（\ u000B）

6

\f

フォームフィード（\ u000C）

7

\r

キャリッジリターン（\ u000D）

8

\xnn

16進数nnで指定されたラテン文字。たとえば、\ x0Aは\ nと同じです

9

\uxxxx

16進数xxxxで指定されたUnicode文字。たとえば、\ u0009は\ tと同じです

10

\cX

制御文字^ X;たとえば、\ cJは改行文字\ nと同等です

メタキャラクター

メタキャラクターは、単に組み合わせに特別な意味を与えるように作用するバックスラッシュが先行するアルファベット文字です。

たとえば、「\ d」メタ文字を使用して多額のお金を検索できます： /（[\ d] +）000/ 、ここで \ d は数字の文字列を検索します。

次の表に、PERLスタイルの正規表現で使用できるメタキャラクターのセットを示します。

Sr.No. Character & Description
1

.

一文字

2

\s

空白文字（スペース、タブ、改行）

3

\S

非空白文字

4

\d

数字（0-9）

5

\D

数字以外

6

\w

単語文字（a-z、A-Z、0-9、_）

7

\W

単語以外の文字

8

[\b]

リテラルバックスペース（特殊なケース）。

9

[aeiou]

指定されたセット内の単一の文字に一致します

10

[^aeiou]

指定されたセット外の単一の文字に一致します

11 *(foo
bar

baz)*

指定された選択肢のいずれかに一致

修飾子

大文字と小文字の区別、複数行の検索など、 regexps での作業を簡素化できる修飾子がいくつかあります。

Sr.No. Modifier & Description
1

i

大文字と小文字を区別しないマッチングを実行します。

2

m

文字列に改行文字または復帰文字がある場合、^および$演算子が文字列境界ではなく改行境界と一致するようになります

3

g

グローバル一致を実行します。つまり、最初の一致後に停止するのではなく、すべての一致を検索します。

RegExpプロパティ

以下は、RegExpに関連付けられているプロパティとその説明のリストです。

Sr.No. Property & Description
1

constructor

オブジェクトのプロトタイプを作成する関数を指定します。

2

global

「g」修飾子が設定されているかどうかを指定します。

3

ignoreCase

「i」修飾子が設定されているかどうかを指定します。

4

lastIndex

次の一致を開始するインデックス。

5

multiline

「m」修飾子が設定されているかどうかを指定します。

6

source

パターンのテキスト。

次のセクションでは、RegExpプロパティの使用方法を示すいくつかの例を示します。

RegExpメソッド

以下は、RegExpに関連付けられたメソッドとその説明のリストです。

Sr.No. Method & Description
1

exec()

文字列パラメーターで一致の検索を実行します。

2

test()

文字列パラメーターの一致をテストします。

3

toSource()

指定されたオブジェクトを表すオブジェクトリテラルを返します。この値を使用して、新しいオブジェクトを作成できます。

4

toString()

指定されたオブジェクトを表す文字列を返します。

次のセクションでは、RegExpメソッドの使用法を示すための例をいくつか示します。

JavaScript-ドキュメントオブジェクトモデルまたはDOM

すべてのWebページは、オブジェクトと見なすことができるブラウザーウィンドウ内にあります。

Documentオブジェクトは、そのウィンドウに表示されるHTMLドキュメントを表します。 Documentオブジェクトには、ドキュメントコンテンツへのアクセスとドキュメントコンテンツの変更を許可する他のオブジェクトを参照するさまざまなプロパティがあります。

ドキュメントのコンテンツにアクセスして変更する方法は、ドキュメントオブジェクトモデル*または *DOM と呼ばれます。 オブジェクトは階層構造になっています。 この階層構造は、Webドキュメント内のオブジェクトの組織に適用されます。

  • ウィンドウオブジェクト-階層のトップ。 オブジェクト階層の最も外側の要素です。
  • ドキュメントオブジェクト-ウィンドウにロードされる各HTMLドキュメントはドキュメントオブジェクトになります。 ドキュメントにはページのコンテンツが含まれています。
  • フォームオブジェクト-<form> …​ </form>タグで囲まれたすべてがフォームオブジェクトを設定します。
  • フォームコントロール要素-フォームオブジェクトには、テキストフィールド、ボタン、ラジオボタン、チェックボックスなど、そのオブジェクトに対して定義されたすべての要素が含まれます。

ここにいくつかの重要なオブジェクトの単純な階層があります-

HTML DOM

いくつかのDOMが存在します。 以下のセクションでは、これらの各DOMを詳細に説明し、それらを使用してドキュメントコンテンツにアクセスして変更する方法を説明します。

  • link：/javascript/javascript_legacy_dom [The Legacy DOM]-これは、JavaScript言語の初期バージョンで導入されたモデルです。 すべてのブラウザで十分にサポートされていますが、フォーム、フォーム要素、画像など、ドキュメントの特定の重要な部分にのみアクセスできます。
  • link：/javascript/javascript_w3c_dom [The W3C DOM]-このドキュメントオブジェクトモデルは、すべてのドキュメントコンテンツへのアクセスと変更を可能にし、World Wide Web Consortium（W3C）によって標準化されています。 このモデルは、ほとんどすべての最新ブラウザーでサポートされています。
  • link：/javascript/javascript_ie4_dom [The IE4 DOM]-このドキュメントオブジェクトモデルは、MicrosoftのInternet Explorerブラウザのバージョン4で導入されました。 IE 5以降のバージョンには、ほとんどの基本的なW3C DOM機能のサポートが含まれています。

DOMの互換性

可用性に応じてW3C DOMまたはIE 4 DOMのいずれかを使用する柔軟性を備えたスクリプトを作成する場合は、最初にメソッドまたはプロパティの存在を確認する機能テストアプローチを使用して、ブラウザーがあなたが望む能力。 たとえば- 

if (document.getElementById) {
  //If the W3C method exists, use it
} else if (document.all) {
  //If the all[] array exists, use it
} else {
  //Otherwise use the legacy DOM
}

JavaScript-エラーおよび例外処理

プログラミングには、（a）構文エラー、（b）ランタイムエラー、（c）論理エラーの3種類のエラーがあります。

構文エラー

  • 構文解析エラー*とも呼ばれる構文エラーは、従来のプログラミング言語ではコンパイル時に、JavaScriptでは解釈時に発生します。

たとえば、次の行では閉じ括弧が欠落しているため、構文エラーが発生します。 

<script type = "text/javascript">
   <!--
      window.print(;
  //-->
</script>

JavaScriptで構文エラーが発生すると、構文エラーと同じスレッド内に含まれるコードのみが影響を受け、他のスレッドの残りのコードは、エラーを含むコードに依存しないと仮定して実行されます。

ランタイムエラー

実行中（コンパイル/解釈後）に*例外とも呼ばれるランタイムエラーが発生します。

たとえば、次の行は構文が正しいため実行時エラーを引き起こしますが、実行時には存在しないメソッドを呼び出そうとしています。 

<script type = "text/javascript">
   <!--
      window.printme();
  //-->
</script>

例外は、例外が発生するスレッドにも影響を与え、他のJavaScriptスレッドが通常の実行を継続できるようにします。

論理エラー

論理エラーは、追跡が最も難しいタイプのエラーです。 これらのエラーは、構文エラーまたは実行時エラーの結果ではありません。 代わりに、スクリプトを駆動するロジックを間違えたときに発生し、期待した結果が得られません。

これらのエラーをキャッチすることはできません。これは、ビジネス要件によってプログラムにどのタイプのロジックを配置するかによって異なるためです。

try …​ catch …​ finallyステートメント

JavaScriptの最新バージョンでは、例外処理機能が追加されました。 JavaScriptは、 try …​ catch …​ finally コンストラクトと、例外を処理する throw 演算子を実装します。

プログラマーが生成した例外と*ランタイム*例外を*キャッチ*できますが、JavaScript構文エラーを*キャッチ*することはできません。

ここに try …​ catch …​ finally ブロック構文があります- 

<script type = "text/javascript">
   <!--
      try {
        //Code to run
         [break;]
      }

      catch ( e ) {
        //Code to run if an exception occurs
         [break;]
      }

      [ finally {
        //Code that is always executed regardless of
        //an exception occurring
      }]
  //-->
</script>
*try* ブロックの後には、正確に1つの *catch* ブロックまたは1つの *finally* ブロック（または両方）が続く必要があります。 *try* ブロックで例外が発生すると、例外は *e* に配置され、 *catch* ブロックが実行されます。 オプションの *finally* ブロックは、try/catchの後に無条件に実行されます。

例

次に、存在しない関数を呼び出して例外を発生させる例を示します。 * try …​ catch *-なしでどのように動作するか見てみましょう 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               alert("Value of variable a is : " + a );
            }
        //-->
      </script>
   </head>

   <body>
      <p>Click the following to see the result:</p>

      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();"/>
      </form>
   </body>
</html>

出力

*try ... catch* を使用してこの例外をキャッチし、ユーザーフレンドリーなメッセージを表示してみましょう。 ユーザーからこのエラーを非表示にする場合は、このメッセージを抑制することもできます。
<html>
   <head>

      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               try {
                  alert("Value of variable a is : " + a );
               }
               catch ( e ) {
                  alert("Error: " + e.description );
               }
            }
        //-->
      </script>

   </head>
   <body>
      <p>Click the following to see the result:</p>

      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();"/>
      </form>

   </body>
</html>

出力

try/catchの後に常に無条件に実行される finally ブロックを使用できます。 これが例です。 

<html>
   <head>

      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;

               try {
                  alert("Value of variable a is : " + a );
               }
               catch ( e ) {
                  alert("Error: " + e.description );
               }
               finally {
                  alert("Finally block will always execute!" );
               }
            }
        //-->
      </script>

   </head>
   <body>
      <p>Click the following to see the result:</p>

      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();"/>
      </form>

   </body>
</html>

出力

throwステートメント

*throw* ステートメントを使用して、組み込み例外またはカスタマイズされた例外を発生させることができます。 後でこれらの例外をキャプチャして、適切なアクションを実行できます。

例

次の例は、 throw ステートメントの使用方法を示しています。 

<html>
   <head>

      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               var b = 0;

               try {
                  if ( b == 0 ) {
                     throw( "Divide by zero error." );
                  } else {
                     var c = a/b;
                  }
               }
               catch ( e ) {
                  alert("Error: " + e );
               }
            }
        //-->
      </script>

   </head>
   <body>
      <p>Click the following to see the result:</p>

      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();"/>
      </form>

   </body>
</html>

出力

文字列、整数、ブール、またはオブジェクトを使用して1つの関数で例外を発生させてから、上記と同じ関数で、または try …​ catch ブロックを使用して別の関数でその例外をキャプチャできます。 。

onerror（）メソッド

*onerror* イベントハンドラは、JavaScriptでのエラー処理を容易にする最初の機能でした。 *error* イベントは、ページで例外が発生するたびに、ウィンドウオブジェクトで発生します。
<html>
   <head>

      <script type = "text/javascript">
         <!--
            window.onerror = function () {
               alert("An error occurred.");
            }
        //-->
      </script>

   </head>
   <body>
      <p>Click the following to see the result:</p>

      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();"/>
      </form>

   </body>
</html>

出力

*onerror* イベントハンドラは、エラーの正確な性質を識別するために3つの情報を提供します-
  • エラーメッセージ-指定されたエラーに対してブラウザが表示するのと同じメッセージ
  • URL -エラーが発生したファイル
  • 行番号-エラーを引き起こした特定のURLの行番号

以下は、この情報を抽出する方法を示す例です。

例

<html>
   <head>

      <script type = "text/javascript">
         <!--
            window.onerror = function (msg, url, line) {
               alert("Message : " + msg );
               alert("url : " + url );
               alert("Line number : " + line );
            }
        //-->
      </script>

   </head>
   <body>
      <p>Click the following to see the result:</p>

      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();"/>
      </form>

   </body>
</html>

出力

抽出した情報を、より良いと思う方法で表示できます。

以下に示すように、 onerror メソッドを使用して、画像の読み込みに問題がある場合にエラーメッセージを表示できます。 

<img src="myimage.gif" onerror="alert('An error occurred loading the image.')"/>

多くのHTMLタグで onerror を使用して、エラーが発生した場合に適切なメッセージを表示できます。

JavaScript-フォーム検証

クライアントが必要なすべてのデータを入力し、[送信]ボタンを押した後、サーバーで通常行われるフォーム検証。 クライアントが入力したデータが正しくないか、単に欠落している場合、サーバーはすべてのデータをクライアントに送り返し、正しい情報でフォームを再送信するように要求する必要があります。 これは、サーバーに多大な負荷をかけるために使用される、本当に長いプロセスでした。

JavaScriptは、Webサーバーに送信する前に、クライアントのコンピューター上のフォームのデータを検証する方法を提供します。 通常、フォーム検証は2つの機能を実行します。

  • 基本的な検証-まず第一に、すべての必須フィールドが入力されていることを確認するためにフォームをチェックする必要があります。 フォームの各フィールドをループしてデータをチェックするだけです。
  • データ形式の検証-第二に、入力されたデータは正しい形式と値をチェックする必要があります。 コードには、データの正確性をテストするための適切なロジックを含める必要があります。

例

検証プロセスを理解するために例を取り上げます。 これは、html形式の簡単なフォームです。 

<html>
   <head>
      <title>Form Validation</title>
      <script type = "text/javascript">
         <!--
           //Form validation code will come here.
        //-->
      </script>
   </head>

   <body>
      <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
         <table cellspacing = "2" cellpadding = "2" border = "1">

            <tr>
               <td align = "right">Name</td>
               <td><input type = "text" name = "Name"/></td>
            </tr>

            <tr>
               <td align = "right">EMail</td>
               <td><input type = "text" name = "EMail"/></td>
            </tr>

            <tr>
               <td align = "right">Zip Code</td>
               <td><input type = "text" name = "Zip"/></td>
            </tr>

            <tr>
               <td align = "right">Country</td>
               <td>
                  <select name = "Country">
                     <option value = "-1" selected>[choose yours]</option>
                     <option value = "1">USA</option>
                     <option value = "2">UK</option>
                     <option value = "3">INDIA</option>
                  </select>
               </td>
            </tr>

            <tr>
               <td align = "right"></td>
               <td><input type = "submit" value = "Submit"/></td>
            </tr>

         </table>
      </form>
   </body>
</html>

出力

基本的なフォーム検証

まず、基本的なフォーム検証の方法を見てみましょう。 上記のフォームでは、 onsubmit イベントの発生時にデータを検証するために* validate（）*を呼び出しています。 次のコードは、このvalidate（）関数の実装を示しています。 

<script type = "text/javascript">
   <!--
     //Form validation code will come here.
      function validate() {

         if( document.myForm.Name.value == "" ) {
            alert( "Please provide your name!" );
            document.myForm.Name.focus() ;
            return false;
         }
         if( document.myForm.EMail.value == "" ) {
            alert( "Please provide your Email!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
            document.myForm.Zip.value.length != 5 ) {

            alert( "Please provide a zip in the format #####." );
            document.myForm.Zip.focus() ;
            return false;
         }
         if( document.myForm.Country.value == "-1" ) {
            alert( "Please provide your country!" );
            return false;
         }
         return( true );
      }
  //-->
</script>

データ形式の検証

次に、入力したフォームデータをWebサーバーに送信する前に検証する方法を確認します。

次の例は、入力した電子メールアドレスを検証する方法を示しています。 メールアドレスには、少なくとも「＆commat;」記号とドット（。）が含まれている必要があります。 また、「＆commat;」はメールアドレスの最初の文字であってはならず、最後のドットは「＆commat;」記号の後の少なくとも1文字でなければなりません。

例

電子メール検証のために次のコードを試してください。 

<script type = "text/javascript">
   <!--
      function validateEmail() {
         var emailID = document.myForm.EMail.value;
         atpos = emailID.indexOf("@");
         dotpos = emailID.lastIndexOf(".");

         if (atpos < 1 || ( dotpos - atpos < 2 )) {
            alert("Please enter correct email ID")
            document.myForm.EMail.focus() ;
            return false;
         }
         return( true );
      }
  //-->
</script>

JavaScript-アニメーション

JavaScriptを使用して、次の要素を含むがこれらに限定されない複雑なアニメーションを作成できます-

  • 花火
  • フェード効果
  • ロールインまたはロールアウト
  • ページインまたはページアウト
  • オブジェクトの動き

既存のJavaScriptベースのアニメーションライブラリに興味があるかもしれません：link：/script.aculo.us/scriptaculous_effects [Script.Aculo.us]。

このチュートリアルでは、JavaScriptを使用してアニメーションを作成する方法の基本的な理解を提供します。

JavaScriptを使用して、論理式または関数によって決定される何らかのパターンに従って、ページ内で多数のDOM要素（<img/>、<div>またはその他のHTML要素）を移動できます。

JavaScriptは、アニメーションプログラムで頻繁に使用される次の2つの関数を提供します。

  • * setTimeout（function、duration）-この関数は、 *duration ミリ秒後に function を呼び出します。
  • * setInterval（function、duration）-この関数は、 *duration ミリ秒ごとに function を呼び出します。
  • * clearTimeout（setTimeout_variable）*-この関数呼び出しは、setTimeout（）関数によって設定されたタイマーをクリアします。

JavaScriptは、画面上の位置など、DOMオブジェクトの多くの属性を設定することもできます。 オブジェクトの_top_およびleft属性を設定して、画面上の任意の場所に配置できます。 構文は次のとおりです。 

//Set distance from left edge of the screen.
object.style.left = distance in pixels or points;

or

//Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

手動アニメーション

次のように、DOMオブジェクトプロパティとJavaScript関数を使用して、1つの単純なアニメーションを実装しましょう。 次のリストには、さまざまなDOMメソッドが含まれています。

  • JavaScript関数* getElementById（）を使用してDOMオブジェクトを取得し、それをグローバル変数 *imgObj に割り当てています。
  • 初期化関数* init（）を定義して *imgObj を初期化し、その position および left 属性を設定しました。
  • ウィンドウのロード時に初期化関数を呼び出しています。
  • 最後に、* moveRight（）*関数を呼び出して、左距離を10ピクセル増やします。 負の値に設定して、左側に移動することもできます。

例

次の例を試してください。 

<html>
   <head>
      <title>JavaScript Animation</title>
      <script type = "text/javascript">
         <!--
            var imgObj = null;

            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative';
               imgObj.style.left = '0px';
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
            }

            window.onload = init;
        //-->
      </script>
   </head>

   <body>
      <form>
         <img id = "myImage" src = "/images/html.gif"/>
         <p>Click button below to move the image to right</p>
         <input type = "button" value = "Click Me" onclick = "moveRight();"/>
      </form>
   </body>
</html>

出力

自動アニメーション

上記の例では、クリックするたびに画像が右に移動する様子を見ました。 次のようにJavaScript関数* setTimeout（）*を使用して、このプロセスを自動化できます-

ここにメソッドを追加しました。 ここで何が新しくなったか見てみましょう-

  • * moveRight（）関数は_imgObj_の位置を設定するために setTimeout（）*関数を呼び出しています。
  • * setTimeout（）関数で設定されたタイマーをクリアし、オブジェクトを初期位置に設定する新しい関数 stop（）*を追加しました。

例

次のサンプルコードを試してください。 

<html>
   <head>
      <title>JavaScript Animation</title>
      <script type = "text/javascript">
         <!--
            var imgObj = null;
            var animate ;

            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative';
               imgObj.style.left = '0px';
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
               animate = setTimeout(moveRight,20);   //call moveRight in 20msec
            }
            function stop() {
               clearTimeout(animate);
               imgObj.style.left = '0px';
            }

            window.onload = init;
        //-->
      </script>
   </head>

   <body>
      <form>
         <img id = "myImage" src = "/images/html.gif"/>
         <p>Click the buttons below to handle animation</p>
         <input type = "button" value = "Start" onclick = "moveRight();"/>
         <input type = "button" value = "Stop" onclick = "stop();"/>
      </form>
   </body>
</html>

マウスイベントでのロールオーバー

これは、マウスイベントでの画像のロールオーバーを示す簡単な例です。

次の例で使用しているものを見てみましょう-

  • このページの読み込み時に、「if」ステートメントは画像オブジェクトの存在を確認します。 画像オブジェクトが利用できない場合、このブロックは実行されません。
  • * Image（）コンストラクターは、 *image1 という新しい画像オブジェクトを作成してプリロードします。
  • srcプロパティには、/images/html.gifと呼ばれる外部画像ファイルの名前が割り当てられます。
  • 同様に、 image2 オブジェクトを作成し、このオブジェクトに/images/http.gifを割り当てました。
  • ＃（ハッシュマーク）はリンクをクリックし、ブラウザがクリックされたときにURLにアクセスしようとしないようにします。 このリンクは画像です。
  • ユーザーのマウスがリンク上に移動すると onMouseOver イベントハンドラーがトリガーされ、ユーザーのマウスがリンク（画像）から離れると onMouseOut イベントハンドラーがトリガーされます。
  • マウスが画像上を移動すると、HTTP画像は最初の画像から2番目の画像に変わります。 マウスを画像から遠ざけると、元の画像が表示されます。
  • マウスをリンクから遠ざけると、初期画像html.gifが画面に再表示されます。
<html>

   <head>
      <title>Rollover with a Mouse Events</title>

      <script type = "text/javascript">
         <!--
            if(document.images) {
               var image1 = new Image();    //Preload an image
               image1.src = "/images/html.gif";
               var image2 = new Image();    //Preload second image
               image2.src = "/images/http.gif";
            }
        //-->
      </script>
   </head>

   <body>
      <p>Move your mouse over the image to see the result</p>

      <a href = "#" onMouseOver = "document.myImage.src = image2.src;"
         onMouseOut = "document.myImage.src = image1.src;">
         <img name = "myImage" src = "/images/html.gif"/>
      </a>
   </body>
</html>

JavaScript-マルチメディア

JavaScript navigator オブジェクトには、 plugins という子オブジェクトが含まれています。 このオブジェクトは配列であり、ブラウザにインストールされたプラグインごとに1つのエントリがあります。 navigator.pluginsオブジェクトは、Netscape、Firefox、およびMozillaのみでサポートされています。

例

これは、ブラウザにインストールされているすべてのプラグオンをリストダウンする方法を示す例です- 

<html>
   <head>
      <title>List of Plug-Ins</title>
   </head>

   <body>
      <table border = "1">
         <tr>
            <th>Plug-in Name</th>
            <th>Filename</th>
            <th>Description</th>
         </tr>

         <script language = "JavaScript" type = "text/javascript">
            for (i = 0; i<navigator.plugins.length; i++) {
               document.write("<tr><td>");
               document.write(navigator.plugins[i].name);
               document.write("</td><td>");
               document.write(navigator.plugins[i].filename);
               document.write("</td><td>");
               document.write(navigator.plugins[i].description);
               document.write("</td></tr>");
            }
         </script>
      </table>
   </body>
</html>

出力

プラグインの確認

各プラグインには、配列にエントリがあります。 各エントリには、次のプロパティがあります-

  • name -プラグインの名前です。
  • filename -プラグインをインストールするためにロードされた実行可能ファイルです。
  • description -開発者が提供するプラグインの説明です。
  • mimeTypes -プラグインによってサポートされる各MIMEタイプに対して1つのエントリを持つ配列です。

これらのプロパティをスクリプトで使用して、インストールされているプラ​​グインを確認し、JavaScriptを使用して適切なマルチメディアファイルを再生できます。 次の例を見てください。 

<html>
   <head>
      <title>Using Plug-Ins</title>
   </head>

   <body>
      <script language = "JavaScript" type = "text/javascript">
         media = navigator.mimeTypes["video/quicktime"];

         if (media) {
            document.write("<embed src = 'quick.mov' height = 100 width = 100>");
         } else {
            document.write("<img src = 'quick.gif' height = 100 width = 100>");
         }
      </script>
   </body>
</html>

出力

注-ここでは、HTML <embed>タグを使用してマルチメディアファイルを埋め込みます。

マルチメディアの制御

ほとんどすべてのブラウザで動作する1つの実際の例を見てみましょう- 

<html>
   <head>
      <title>Using Embeded Object</title>

      <script type = "text/javascript">
         <!--
            function play() {
               if (!document.demo.IsPlaying()) {
                  document.demo.Play();
               }
            }
            function stop() {
               if (document.demo.IsPlaying()) {
                  document.demo.StopPlay();
               }
            }
            function rewind() {
               if (document.demo.IsPlaying()) {
                  document.demo.StopPlay();
               }
               document.demo.Rewind();
            }
        //-->
      </script>
   </head>

   <body>
      <embed id = "demo" name = "demo"
         src = "http://www.amrood.com/games/kumite.swf"
         width = "318" height = "300" play = "false" loop = "false"
         pluginspage = "http://www.macromedia.com/go/getflashplayer"
         swliveconnect = "true">

      <form name = "form" id = "form" action = "#" method = "get">
         <input type = "button" value = "Start" onclick = "play();"/>
         <input type = "button" value = "Stop" onclick = "stop();"/>
         <input type = "button" value = "Rewind" onclick = "rewind();"/>
      </form>
   </body>
</html>

出力

Mozilla、Firefox、またはNetscapeを使用している場合、

JavaScript-デバッグ

時々、開発者はコーディング中に間違いを犯します。 プログラムまたはスクリプトの間違いは、「バグ」と呼ばれます。

バグを見つけて修正するプロセスは*デバッグ*と呼ばれ、開発プロセスの通常の部分です。 このセクションでは、タスクのデバッグに役立つツールとテクニックについて説明します。

IEのエラーメッセージ

エラーを追跡する最も基本的な方法は、ブラウザでエラー情報をオンにすることです。 デフォルトでは、ページでエラーが発生すると、Internet Explorerのステータスバーにエラーアイコンが表示されます。

エラーアイコン

このアイコンをダブルクリックすると、発生した特定のエラーに関する情報を表示するダイアログボックスが表示されます。

このアイコンは見落としやすいため、Internet Explorerには、エラーが発生したときにエラーダイアログボックスを自動的に表示するオプションがあります。

このオプションを有効にするには、[ツール]→[インターネットオプション]→[詳細設定]タブを選択し、最後に*「すべてのスクリプトエラーに関する通知を表示する」*オプションを以下のようにチェックします-

インターネットオプション

FirefoxまたはMozillaのエラーメッセージ

Firefox、Netscape、Mozillaなどの他のブラウザは、 JavaScript Console または Error Consol と呼ばれる特別なウィンドウにエラーメッセージを送信します。 コンソールを表示するには、[ツール]→[エラーコンソールまたはWeb開発]を選択します。

残念ながら、これらのブラウザはエラーが発生したときに視覚的な表示を提供しないため、コンソールを開いたままにして、スクリプトの実行中にエラーを監視する必要があります。

エラーコンソール

エラー通知

コンソールまたはInternet Explorerのダイアログボックスに表示されるエラー通知は、構文エラーとランタイムエラーの両方の結果です。 これらのエラー通知には、エラーが発生した行番号が含まれます。

Firefoxを使用している場合は、エラーコンソールで利用可能なエラーをクリックして、エラーのあるスクリプトの正確な行に移動できます。

スクリプトをデバッグする方法

JavaScriptをデバッグするにはさまざまな方法があります-

JavaScript検証ツールを使用する

JavaScriptコードに奇妙なバグがないかどうかを確認する1つの方法は、それが有効であり、言語の公式の構文規則に従っているかどうかを確認するプログラムを実行することです。 これらのプログラムは validating parsers または単に validators と呼ばれ、多くの場合、商用のHTMLおよびJavaScriptエディターが付属しています。

JavaScriptの最も便利なバリデーターは、http：//www.jslint.com/[Douglas Crockford’s JavaScript Lint]から無料で入手できるDouglas CrockfordのJavaScript Lintです。

そのWebページにアクセスし、JavaScript（JavaScriptのみ）コードを提供されたテキスト領域に貼り付け、jslintボタンをクリックするだけです。 このプログラムはJavaScriptコードを解析し、すべての変数と関数の定義が正しい構文に従っていることを確認します。 また、ifや while などのJavaScriptステートメントもチェックして、それらが正しい形式に従っていることを確認します

デバッグコードをプログラムに追加する

プログラムで* alert（）または document.write（）*メソッドを使用して、コードをデバッグできます。 たとえば、あなたは次のように何かを書くかもしれません- 

var debugging = true;
var whichImage = "widget";

if( debugging )
   alert( "Calls swapImage() with argument: " + whichImage );
   var swapStatus = swapImage( whichImage );

if( debugging )
   alert( "Exits swapImage() with swapStatus=" + swapStatus );

表示される* alert（）*の内容と順序を調べることにより、プログラムの状態を非常に簡単に調べることができます。

JavaScriptデバッガーを使用する

デバッガーは、スクリプト実行のすべての側面をプログラマーの制御下に置くアプリケーションです。 デバッガーは、実行のフローを制御するだけでなく、値を調べて設定できるインターフェイスを介して、スクリプトの状態をきめ細かく制御します。

スクリプトがデバッガにロードされると、一度に1行ずつ実行するか、特定のブレークポイントで停止するように指示できます。 実行が停止すると、プログラマはスクリプトとその変数の状態を調べて、何かがおかしいかどうかを判断できます。 変数の値の変化を監視することもできます。

MozillaおよびNetscapeの両方のブラウザー用のMozilla JavaScriptデバッガー（コード名Venkman）の最新バージョンは、http：//www.hacksrus.com/~ginda/venkmanからダウンロードできます。

開発者向けの便利なヒント

スクリプト内のエラーの数を減らし、デバッグプロセスを簡素化するには、次のヒントを念頭に置いてください-

  • たくさんの*コメント*を使用してください。 コメントを使用すると、スクリプトを書いた理由を自分のやり方で説明したり、特に難しいコードのセクションを説明したりできます。
  • コードを読みやすくするために、常に*インデント*を使用してください。 文をインデントすると、開始タグと終了タグ、中括弧、その他のHTMLおよびスクリプト要素を簡単に一致させることができます。
  • *モジュラーコード*を書きます。 可能な限り、ステートメントを関数にグループ化します。 関数を使用すると、関連するステートメントをグループ化し、最小限の労力でコードの一部をテストおよび再利用できます。
  • 変数と関数の命名方法に一貫性を持たせてください。 意味があり、変数の内容または関数の目的を説明するのに十分な長さの名前を使用してみてください。
  • 変数と関数に名前を付けるときは、一貫した構文を使用してください。 つまり、すべて小文字またはすべて大文字のままにしてください。キャメルバック表記を好む場合は、一貫して使用してください。
  • *モジュール形式で長いスクリプト*をテストします。 つまり、スクリプトの一部をテストする前に、スクリプト全体を書こうとしないでください。 コードの次の部分を追加する前に、ピースを作成して動作させる。
  • *説明的な変数名と関数名*を使用し、単一文字の名前を使用しないでください。
  • 引用符を見る。 引用符は文字列を囲むペアで使用され、両方の引用符は同じスタイル（単一または二重）でなければならないことに注意してください。
  • 等号に注意してください。 比較のために単一の=を使用しないでください。
  • var キーワードを使用して、*変数を明示的に宣言します。

JavaScript-イメージマップ

JavaScriptを使用して、クライアント側のイメージマップを作成できます。 クライアント側のイメージマップは、<img/>タグの usemap 属性によって有効になり、特別な<map>および<area>拡張タグによって定義されます。

マップを形成しようとしている画像は、通常どおり<img/>要素を使用してページに挿入されますが、 usemap という追加の属性が含まれている点が異なります。 usemap属性の値は、<map>要素のname属性の値であり、その前にポンド記号またはハッシュ記号が付きます。

<map>要素は実際に画像のマップを作成し、通常は<img/>要素の直後に続きます。 これは、クリック可能なホットスポットを実際に定義する<area/>要素のコンテナとして機能します。 <map>要素には、マップを識別する名前である name 属性という1つの属性のみが含まれます。 これは、<img/>要素がどの<map>要素を使用するかを知る方法です。

<area>要素は、クリック可能な各ホットスポットの境界を定義する形状と座標を指定します。

次のコードは、イメージマップとJavaScriptを組み合わせて、マウスを画像のさまざまな部分に移動したときにテキストボックスにメッセージを生成します。 

<html>
   <head>
      <title>Using JavaScript Image Map</title>

      <script type = "text/javascript">
         <!--
            function showTutorial(name) {
               document.myform.stage.value = name
            }
        //-->
      </script>
   </head>

   <body>
      <form name = "myform">
         <input type = "text" name = "stage" size = "20"/>
      </form>

      <!-- Create  Mappings -->
      <img src = "/images/usemap.gif" alt = "HTML Map" border = "0" usemap = "#tutorials"/>

      <map name = "tutorials">
         <area shape="poly"
            coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index" alt = "Perl Tutorial"
            target = "_self"
            onMouseOver = "showTutorial('perl')"
            onMouseOut = "showTutorial('')"/>

         <area shape = "rect"
            coords = "22,83,126,125"
            href = "/html/index" alt = "HTML Tutorial"
            target = "_self"
            onMouseOver = "showTutorial('html')"
            onMouseOut = "showTutorial('')"/>

         <area shape = "circle"
            coords = "73,168,32"
            href = "/php/index" alt = "PHP Tutorial"
            target = "_self"
            onMouseOver = "showTutorial('php')"
            onMouseOut = "showTutorial('')"/>
      </map>
   </body>
</html>

出力

画像オブジェクトの上にマウスカーソルを置くと、マップの概念を感じることができます。

JavaScript-ブラウザーの互換性

各ブラウザーを期待どおりに処理するには、異なるブラウザー間の違いを理解することが重要です。 そのため、Webページが実行されているブラウザを知ることが重要です。

Webページが現在実行されているブラウザに関する情報を取得するには、組み込みの navigator オブジェクトを使用します。

ナビゲーターのプロパティ

Webページで使用できるNavigator関連のプロパティがいくつかあります。 以下は、それぞれの名前と説明のリストです。

Sr.No. Property & Description
1

appCodeName

このプロパティは、ブラウザのコード名、NetscapeのNetscape、Internet ExplorerのMicrosoft Internet Explorerを含む文字列です。

2

appVersion

このプロパティは、ブラウザのバージョンと、言語や互換性などの他の有用な情報を含む文字列です。

3

language

このプロパティには、ブラウザで使用される言語の2文字の略語が含まれています。 Netscapeのみ。

4

mimTypes[]

このプロパティは、クライアントがサポートするすべてのMIMEタイプを含む配列です。 Netscapeのみ。

5

platform[]

このプロパティは、ブラウザがコンパイルされたプラットフォームを含む文字列です。32ビットWindowsオペレーティングシステムの「Win32」

6

plugins[]

このプロパティは、クライアントにインストールされているすべてのプラグインを含む配列です。 Netscapeのみ。

7

userAgent[]

このプロパティは、ブラウザのコード名とバージョンを含む文字列です。 この値は、クライアントを識別するために元のサーバーに送信されます。

ナビゲーターメソッド

ナビゲータ固有のメソッドがいくつかあります。 それらの名前と説明のリストを以下に示します。

Sr.No. Description
1

javaEnabled()

このメソッドは、クライアントでJavaScriptが有効になっているかどうかを判別します。 JavaScriptが有効な場合、このメソッドはtrueを返します。それ以外の場合は、falseを返します。

2

plugings.refresh

このメソッドは、新しくインストールされたプラグインを使用可能にし、すべての新しいプラグイン名をプラグイン配列に追加します。 Netscapeのみ。

3

preference(name,value)

このメソッドを使用すると、署名されたスクリプトがNetscapeの設定を取得および設定できます。 2番目のパラメーターが省略された場合、このメソッドは指定された設定の値を返します。それ以外の場合は、値を設定します。 Netscapeのみ。

4

taintEnabled()

データ汚染が有効な場合、このメソッドはtrueを返します。そうでない場合はfalse。

ブラウザ検出

ブラウザの名前を見つけるために使用できる単純なJavaScriptがあり、それに応じてHTMLページをユーザーに提供できます。 

<html>
   <head>
      <title>Browser Detection Example</title>
   </head>

   <body>
      <script type = "text/javascript">
         <!--
            var userAgent   = navigator.userAgent;
            var opera       = (userAgent.indexOf('Opera') != -1);
            var ie          = (userAgent.indexOf('MSIE') != -1);
            var gecko       = (userAgent.indexOf('Gecko') != -1);
            var netscape    = (userAgent.indexOf('Mozilla') != -1);
            var version     = navigator.appVersion;

            if (opera) {
               document.write("Opera based browser");
              //Keep your opera specific URL here.
            } else if (gecko) {
               document.write("Mozilla based browser");
              //Keep your gecko specific URL here.
            } else if (ie) {
               document.write("IE based browser");
              //Keep your IE specific URL here.
            } else if (netscape) {
               document.write("Netscape based browser");
              //Keep your Netscape specific URL here.
            } else {
               document.write("Unknown browser");
            }

           //You can include version to along with any above condition.
            document.write("<br/> Browser version info : " + version );
        //-->
      </script>
   </body>
</html>

出力

Javascript-questions-answers

JavaScript組み込み関数

数値メソッド

Numberオブジェクトには、すべてのオブジェクトの定義の一部であるデフォルトメソッドのみが含まれています。

Sr.No. Method & Description
1

constructor()

このオブジェクトのインスタンスを作成した関数を返します。 デフォルトでは、これはNumberオブジェクトです。

2

toExponential()

JavaScriptが通常標準表記を使用する範囲内にある場合でも、指数表記で数字を表示します。

3

toFixed()

小数点の右側に特定の桁数の数値をフォーマットします。

4

toLocaleString()

現在の数値の文字列値バージョンを、ブラウザーのロケール設定に応じて異なる形式で返します。

5

toPrecision()

数値を表示する合計桁数（小数の左右の桁を含む）を定義します。

6

toString()

数値の値の文字列表現を返します。

7

valueOf()

数値の値を返します。

ブールメソッド

各メソッドのリストとその説明を次に示します。

Sr.No. Method & Description
1

toSource()

ブールオブジェクトのソースを含む文字列を返します。この文字列を使用して、同等のオブジェクトを作成できます。

2

toString()

オブジェクトの値に応じて、「true」または「false」の文字列を返します。

3

valueOf()

ブールオブジェクトのプリミティブ値を返します。

文字列メソッド

各メソッドのリストとその説明を次に示します。

Sr.No. Method & Description
1

charAt()

指定されたインデックスにある文字を返します。

2

charCodeAt()

指定されたインデックスにある文字のUnicode値を示す数値を返します。

3

concat()

2つの文字列のテキストを結合し、新しい文字列を返します。

4

indexOf()

指定した値の最初の出現の呼び出し元Stringオブジェクト内のインデックスを返します。見つからない場合は-1を返します。

5

lastIndexOf()

指定した値が最後に出現する呼び出し元のStringオブジェクト内のインデックスを返します。見つからない場合は-1を返します。

6

localeCompare()

参照文字列がソート順で指定された文字列の前後にあるか、同じかを示す数値を返します。

7

length()

文字列の長さを返します。

8

match()

正規表現を文字列と照合するために使用されます。

9

replace()

正規表現と文字列の一致を検出し、一致した部分文字列を新しい部分文字列で置き換えるために使用されます。

10

search()

正規表現と指定された文字列の一致の検索を実行します。

11

slice()

文字列のセクションを抽出し、新しい文字列を返します。

12

split()

文字列を部分文字列に分離することにより、文字列オブジェクトを文字列の配列に分割します。

13

substr()

指定した位置から指定した文字数までの文字列内の文字を返します。

14

substring()

2つのインデックス間の文字列内の文字を文字列に返します。

15

toLocaleLowerCase()

文字列内の文字は、現在のロケールを尊重しながら小文字に変換されます。

16

toLocaleUpperCase()

文字列内の文字は、現在のロケールを考慮しながら大文字に変換されます。

17

toLowerCase()

呼び出し文字列値を小文字に変換して返します。

18

toString()

指定されたオブジェクトを表す文字列を返します。

19

toUpperCase()

呼び出し文字列値を大文字に変換して返します。

20

valueOf()

指定されたオブジェクトのプリミティブ値を返します。

文字列HTMLラッパー

適切なHTMLタグ内にラップされた文字列のコピーを返す各メソッドのリストを次に示します。

Sr.No. Method & Description
1

anchor()

ハイパーテキストターゲットとして使用されるHTMLアンカーを作成します。

2

big()

<big>タグ内にあるかのように大きなフォントで表示される文字列を作成します。

3

blink()

<blink>タグ内にあるかのように点滅する文字列を作成します。

4

bold()

<b>タグ内にあるかのように太字で表示される文字列を作成します。

5

fixed()

文字列を<tt>タグ内にあるかのように固定ピッチフォントで表示します。

6

fontcolor()

<font color = "color">タグにあるかのように、指定された色で文字列を表示します。

7

fontsize()

<font size = "size">タグにあるかのように、指定されたフォントサイズで文字列を表示します。

8

italics()

文字列を<i>タグ内にあるかのように斜体にします。

9

link()

別のURLを要求するHTMLハイパーテキストリンクを作成します。

10

small()

<small>タグ内にあるかのように、文字列を小さなフォントで表示します。

11

strike()

<strike>タグ内にあるかのように、文字列を取り消し線として表示します。

12

sub()

文字列を<sub>タグ内にあるかのように、添え字として表示します

13

sup()

文字列を<sup>タグ内にあるかのように、上付き文字として表示します

配列メソッド

各メソッドのリストとその説明を次に示します。

Sr.No. Method & Description
1

concat()

この配列を他の配列や値と結合した新しい配列を返します。

2

every()

この配列のすべての要素が提供されたテスト関数を満たす場合、trueを返します。

3

filter()

指定されたフィルタリング関数がtrueを返すこの配列のすべての要素を使用して、新しい配列を作成します。

4

forEach()

配列内の各要素に対して関数を呼び出します。

5

indexOf()

指定された値に等しい配列内の要素の最初の（最小の）インデックスを返します。見つからない場合は-1を返します。

6

join()

配列のすべての要素を文字列に結合します。

7

lastIndexOf()

指定された値に等しい配列内の要素の最後の（最大の）インデックスを返します。見つからない場合は-1を返します。

8

map()

この配列のすべての要素で提供された関数を呼び出した結果で新しい配列を作成します。

9

pop()

配列から最後の要素を削除し、その要素を返します。

10

push()

配列の最後に1つ以上の要素を追加し、配列の新しい長さを返します。

11

reduce()

配列の2つの値（左から右へ）に対して関数を同時に適用して、単一の値に減らします。

12

reduceRight()

配列の2つの値（右から左）に対して関数を同時に適用して、単一の値に減らします。

13

reverse()

配列の要素の順序を逆にします-最初が最後になり、最後が最初になります。

14

shift()

配列から最初の要素を削除し、その要素を返します。

15

slice()

配列のセクションを抽出し、新しい配列を返します。

16

some()

この配列の少なくとも1つの要素が提供されたテスト関数を満たす場合、trueを返します。

17

toSource()

オブジェクトのソースコードを表します

18

sort()

配列の要素を並べ替えます。

19

splice()

配列に要素を追加または削除します。

20

toString()

配列とその要素を表す文字列を返します。

21

unshift()

配列の前に1つ以上の要素を追加し、配列の新しい長さを返します。

日付メソッド

各メソッドのリストとその説明を次に示します。

Sr.No. Method & Description
1

Date()

今日の日付と時刻を返します

2

getDate()

現地時間に従って、指定された日付の月の日を返します。

3

getDay()

現地時間に従って、指定された日付の曜日を返します。

4

getFullYear()

現地時間に従って、指定された日付の年を返します。

5

getHours()

現地時間に従って、指定された日付の時間を返します。

6

getMilliseconds()

現地時間に従って、指定された日付のミリ秒を返します。

7

getMinutes()

現地時間に従って、指定された日付の分を返します。

8

getMonth()

現地時間に従って、指定された日付の月を返します。

9

getSeconds()

現地時間に従って、指定された日付の秒を返します。

10

getTime()

1970年1月1日00:00:00 UTCからのミリ秒数として、指定された日付の数値を返します。

11

getTimezoneOffset()

現在のロケールのタイムゾーンオフセットを分単位で返します。

12

getUTCDate()

世界時に基づき、指定された日付の月の日（日付）を返します。

13

getUTCDay()

世界時に基づき、指定された日付の曜日を返します。

14

getUTCFullYear()

世界時に基づき、指定された日付の年を返します。

15

getUTCHours()

世界時に基づき、指定された日付の時間を返します。

16

getUTCMilliseconds()

世界時に基づき、指定された日付のミリ秒を返します。

17

getUTCMinutes()

世界時に基づき、指定された日付の分を返します。

18

getUTCMonth()

世界時に基づき、指定された日付の月を返します。

19

getUTCSeconds()

世界時に基づき、指定された日付の秒を返します。

20

getYear()

廃止-現地時間に従って、指定された日付の年を返します。 代わりにgetFullYearを使用してください。

21

setDate()

現地時間に従って、指定された日付の月の日を設定します。

22

setFullYear()

現地時間に従って、指定された日付の通年を設定します。

23

setHours()

現地時間に従って、指定された日付の時間を設定します。

24

setMilliseconds()

現地時間に従って、指定された日付のミリ秒を設定します。

25

setMinutes()

現地時間に従って、指定された日付の分を設定します。

26

setMonth()

現地時間に従って、指定された日付の月を設定します。

27

setSeconds()

現地時間に従って、指定された日付の秒を設定します。

28

setTime()

Dateオブジェクトを、1970年1月1日00:00:00 UTCからのミリ秒数で表される時間に設定します。

29

setUTCDate()

世界時に基づき、指定された日付の月の日を設定します。

30

setUTCFullYear()

世界時に基づき、指定された日付の通年を設定します。

31

setUTCHours()

世界時に基づき、指定された日付の時間を設定します。

32

setUTCMilliseconds()

世界時に基づき、指定された日付のミリ秒を設定します。

33

setUTCMinutes()

世界時に基づき、指定された日付の分を設定します。

34

setUTCMonth()

世界時に基づき、指定された日付の月を設定します。

35

setUTCSeconds()

世界時に基づき、指定された日付の秒を設定します。

36

setYear()

  • 非推奨-*現地時間に従って、指定された日付の年を設定します。 代わりにsetFullYearを使用してください。
37

toDateString()

日付の「日付」部分を人間が読める文字列として返します。

38

toGMTString()

  • 非推奨-*インターネットGMT規則を使用して、日付を文字列に変換します。 代わりにtoUTCStringを使用してください。
39

toLocaleDateString()

現在のロケールの規則を使用して、日付の「日付」部分を文字列として返します。

40

toLocaleFormat()

書式文字列を使用して、日付を文字列に変換します。

41

toLocaleString()

現在のロケールの規則を使用して、日付を文字列に変換します。

42

toLocaleTimeString()

現在のロケールの規則を使用して、日付の「時刻」部分を文字列として返します。

43

toSource()

同等のDateオブジェクトのソースを表す文字列を返します。この値を使用して、新しいオブジェクトを作成できます。

44

toString()

指定されたDateオブジェクトを表す文字列を返します。

45

toTimeString()

日付の「時刻」部分を人間が読める文字列として返します。

46

toUTCString()

世界時の規則を使用して、日付を文字列に変換します。

47

valueOf()

Dateオブジェクトのプリミティブ値を返します。

日付の静的メソッド

前述の多くのインスタンスメソッドに加えて、Dateオブジェクトは2つの静的メソッドも定義します。 これらのメソッドは、Date（）コンストラクタ自体を介して呼び出されます-

Sr.No. Method & Description
1

Date.parse( )

日付と時刻の文字列表現を解析し、その日付の内部ミリ秒表現を返します。

2

Date.UTC( )

指定されたUTC日付と時刻のミリ秒表現を返します。

数学メソッド

各メソッドのリストとその説明を次に示します。

Sr.No. Method & Description
1

abs()

数値の絶対値を返します。

2

acos()

数値の逆余弦（ラジアン）を返します。

3

asin()

数値の逆正弦（ラジアン）を返します。

4

atan()

数値の逆正接（ラジアン単位）を返します。

5

atan2()

引数の商のアークタンジェントを返します。

6

ceil()

数値以上の最小の整数を返します。

7

cos()

数値の余弦を返します。

8

exp()

E ^ N ^を返します。ここで、Nは引数で、Eはオイラーの定数、自然対数の底です。

9

floor()

数値以下の最大の整数を返します。

10

log()

数値の自然対数（底E）を返します。

11

max()

ゼロ以上の数の最大値を返します。

12

min()

ゼロ以上の数の最小値を返します。

13

pow()

baseを指数のべき乗、つまりbase exponentに戻します。

14

random()

0から1までの擬似乱数を返します。

15

round()

最も近い整数に丸められた数値の値を返します。

16

sin()

数値のサインを返します。

17

sqrt()

数値の平方根を返します。

18

tan()

数値のタンジェントを返します。

19

toSource()

文字列「Math」を返します。

RegExpメソッド

各メソッドのリストとその説明を次に示します。

Sr.No. Method & Description
1

exec()

文字列パラメーターで一致の検索を実行します。

2

test()

文字列パラメーターの一致をテストします。

3

toSource()

指定されたオブジェクトを表すオブジェクトリテラルを返します。この値を使用して、新しいオブジェクトを作成できます。

4

toString()

指定されたオブジェクトを表す文字列を返します。

「https://www.finddevguides.com/index.php?title=Javascript-quick-guide&oldid=79039」から取得
Powered by MediaWiki