JavaScript を始めるための言語の基礎_基礎知識

この記事では、初心者に言語の基本的な理解を提供するために、JavaScript の基本的な概念を包括的に列挙することで言語の基本原理を説明し、これらすべての概念が言語にどのように反映されているかを示すコード例が随所にあります。 >

JavaScript 言語はますます人気が高まっており、インターネット上で最も著名な言語の 1 つと言えます。さまざまなプラットフォームやブラウザーで使用でき、バックエンド言語も除外されません。世の中にはさまざまな開発ライブラリがあり、その中には本当に素晴らしいものもあり、開発や開発時間の短縮などに非常に役立ちます。問題は、これらのライブラリが元の言語から大きくかけ離れている場合があり、そのため、始めたばかりの開発者が言語の基本的な理解を欠如していることです。

この記事では、JavaScript の基本概念を包括的に列挙することで言語の基本原理を説明し、初心者に言語の基本的な理解を提供します。これらの概念が言語にどのように反映されるかを説明するコード例が随所にあります。


JavaScript 言語について学ぶ
JavaScript 言語は、ハイパーテキスト マークアップ言語 (HTML) ページに移動できる無料のクライアント側スクリプト言語です。 インタラクティブな動作を追加します。 。クライアント側とは、JavaScript がサーバー側ではなくブラウザーで実行されることを意味します。クライアント側スクリプトを使用すると、Web ページがサーバーによって提供され、ブラウザによって読み込まれた後、ユーザーが Web ページを操作できるようになります。たとえば、Google マップは JavaScript 言語を使用して、地図の移動、ズームインおよびズームアウトなどのユーザーと地図間の対話をサポートします。 JavaScript がなければ、Adobe Flash や Microsoft® Silverlight などのプラグインが使用されない限り、ユーザーとの対話ごとに Web ページを更新する必要があります。 JavaScript 言語にはプラグインは必要ありません。

JavaScript 言語は読み込まれた Web ページに対してユーザー操作を提供するため、開発者は通常、JavaScript 言語を使用して次の機能を実装します。

1. HTML 要素とその値を動的に追加、編集、削除します。

2. 送信する前にフォームを検証します。

3. 今後のアクセス時にデータを保存および取得するために、ユーザーのコンピュータに Cookie を作成します。


始める前に、この言語の基本原則をいくつか知っておいてください。

1. HTML ファイルに JavaScript コードを含めるには、コードをscript タグを追加し、text/javascript type 属性を追加します (リスト 1)。
2. すべての JavaScript ステートメントはセミコロンで終わります。

3. 言語では大文字と小文字が区別されます。

4. すべての変数名は文字またはアンダースコアで始まる必要があります。

5. コメントを使用してスクリプト内の特定の行を記述することができます。コメントは二重スラッシュ (//) で始まり、その後にコメントが続きます。

6. コメントを使用してスクリプトをコメントアウトすることもできます。スクリプトの複数行をコメントアウトするには、/*your script gos here*/ を使用することをお勧めします。アスタリスク内のスクリプトは実行中に実行されません。


リスト 1. JavaScript コードを HTML ファイルに組み込むには、script タグと type 属性を使用する必要があります

外部 JavaScript ファイルは、JavaScript コードを組み込む最も一般的な方法であり、これには非常に実用的な理由がいくつかあります。

1. HTML ページのコードは少ないため、検索エンジンはサイトをより速くクロールしてインデックスを作成できます。

2. コードがより明確に表示され、最終的には管理が容易になるように、JavaScript コードと HTML を分離します。

3. HTML コードには複数の JavaScript ファイルを含めることができるため、Web サーバー上で JavaScript ファイルを異なるファイル ディレクトリ構造に分離することができます。これは、画像を保存する方法と同様の方法です。コードを管理します。 Web サイト管理を容易にするためには、明確で整理されたコードが常に鍵となります。

変数

変数には、後で取得されるか、新しいデータで更新されるデータが格納されます。変数に格納されるデータは、値または式です。JavaScript 言語には、表 1 で説明されている 3 種類の式があります。

表 1. JavaScript 式

式の説明

算術計算の結果は数値です

文字列計算の結果は文字列です

論理計算の結果はブール値 (true または false) になります。

変数にはローカルとグローバルの 2 種類があります。ローカル変数は var キーワードを使用して宣言され、グローバル変数は var キーワードなしで宣言されます。 var キーワードを使用する変数は、宣言したスコープ以外の場所ではアクセスできないため、ローカルとみなされます。たとえば、関数内でローカル変数を宣言すると (これについてはこの記事の終わり近くで説明します)、その変数は関数の外部からアクセスできなくなり、その関数に対してローカルになります。 var キーワードを使用せずに同じ変数を宣言すると、その関数内だけでなく、スクリプト全体でその変数にアクセスできるようになります。

リスト 4 は、num という名前で値 10 が割り当てられたローカル変数の例を示しています。

リスト 4. ローカル変数を宣言する

var num = 10;
スクリプト内の別の場所にある num 変数の値にアクセスするには、次のようにします。リスト 5 に示すように、変数を名前で参照するだけです。

リスト 5. 変数の値へのアクセス

document.write("The value of num is: " num); >
このステートメントの結果は、「num の値は 10」になります。 document.write 関数はデータを Web ページに書き込みます。この記事の残りの部分ではこの関数を使用して、Web ページにサンプルを書き込みます。

算術式を変数に格納するには、リスト 6 に示すように、変数を計算値に代入するだけです。計算結果は、計算自体ではなく変数に保存されます。したがって、再び「数値の値は 10」という結果が得られます。


リスト 6. 算術式の保存

var num = (5 5); document.write("num の値は: " num) ;

変数の値を変更するには、割り当てた名前で変数を参照し、等号を使用して新しい値を割り当てます (リスト 7)。今回の違いは、変数がすでに宣言されているため、var キーワードを使用する必要がないことです。

リスト 7. 既存の変数の値を変更する

var num = 10; document.write("num の値は: " num) ;

// num の値を 15 に更新します
num = 15;
document.write("num の新しい値は次のとおりです: " num);

このスクリプトの結果は、最初に「数値の値: 10」という文が表示され、次に「数値の新しい値: 15」が続きます。このセクションでは、変数の説明に加えて、次のトピックである演算子についても説明します。変数に値を割り当てるために使用する等号 (=) は代入演算子で、5 5 で使用するプラス記号 () は算術演算子です。次のセクションでは、JavaScript 言語のすべての変数演算子とその使用法について説明します。

演算子

JavaScript 言語で操作を実行する場合は演算子が必要です。演算には加算、減算、比較などが含まれます。 JavaScript 言語には 4 つの演算子があります。

1. 算術

2. 代入

4. 算術演算子

算術演算子は、加算、減算、乗算、除算などの基本的な数学演算を実行します。表 2 は、JavaScript 言語で使用できるすべての算術演算のリストと説明です。

表 2. 算術演算子

演算子の説明

加算

- 減算

* 乗算

/ 除算

% モジュロ (剰余を求める)

Increment

--Decrease

代入演算子


算術演算子は基本的な演算を実行します代入演算子は値を JavaScript 変数に割り当てます。前のセクションで変数に値を割り当てたときに、最も一般的に使用される代入演算子をすでに確認しました。表 3 に、JavaScript 言語で使用できるすべての代入演算子のリストと説明を示します。
表 3. 代入演算子
演算子の説明

=

と等しい = 加算値 (変数の結果値とその値) を代入します。 to Variable

-=減算値(変数から値を減算した結果)を変数

に代入*=乗算値(変数と値を乗算した結果)を代入) を変数

/=除算値 (変数を値で除算した結果) を変数

に代入します%=モジュロ値 (変数を法で割った結果) を代入しますvalue) を変数

に等号を使用して値または式を変数に代入する方法を説明しましたが、ここでは少しわかりにくい代入演算子の使用方法を説明します。変数に加算値を割り当てるというのは奇妙な概念かもしれませんが、実際には非常に簡単です (リスト 8)。


リスト 8. 変数への加算値の代入


var num = 10; document.write("num の値は: " num ) ;

// num の値を 15 に更新します

num = 5;
document.write("num の新しい値は次のとおりです: " num); >
このスクリプトの結果は、「数値の値: 10」の後に「数値の新しい値: 15」が続きます。このスクリプトの演算子が変数を指定して追加値を割り当てていることがわかります。これは、リスト 9 で書かれたスクリプトの短縮版と考えることもできます。


リスト 9. 追加された値を変数に代入するより長い方法 🎜>

。 var num = 10;

document.write("num の値は次のとおりです: " num);

// num の値を 15 に更新します
num = (num 5); >document.write("num の新しい値は次のとおりです: " num);

比較演算子

比較演算子は、変数またはその値の間の関係を決定します。条件ステートメントで比較演算子を使用すると、変数またはその値を比較してステートメントが true か false かを判断するロジックを作成できます。表 4 に、JavaScript 言語で使用できるすべての比較演算子のリストと説明を示します。

表 4. 比較演算子

演算子の説明

==等しい

=== 値とオブジェクトの型が一致する

!=

に等しくない

より大きい <

より小さい

<= より小さい

に等しい 変数と値の比較は、あらゆる種類のロジックを記述する際の基本です。リスト 10 の例は、等号比較演算子 (==) を使用して 10 が 1 に等しいかどうかを判断する方法を示しています。
リスト 10. 比較演算子の使用

document.write(10 == 1);
論理演算子

論理演算子は通常、比較を組み合わせるために使用されます。条件文の演算子。表 5 は、JavaScript 言語で使用できるすべての論理演算子のリストと説明です。

表 5. 論理演算子

演算子 説明

&& および

|| または

!変数と演算子についてある程度の経験ができたので、次は単純な変数以上のものを格納するメカニズムを作成する方法を学習します。


配列
配列は変数に似ていますが、異なる点は、1 つの名前で複数の値と式を保持できることです。変数に複数の値を格納すると、配列が強力になります。 JavaScript 配列に格納できるデータのタイプや量に制限はありません。スクリプト内で配列を宣言すると、いつでも配列内の任意の項目のデータにアクセスできます。配列は他の配列を含む任意の JavaScript データ型を保持できますが、最も一般的なアプローチは、同様のデータを同じ配列に格納し、配列項目に関連した名前を付けることです。リスト 11 は、2 つの別々の配列を使用して同様のデータを格納する例を示しています。


リスト 11. 類似の値を配列に格納する
var Colors = new Array("orange", "blue", "red", "brown " );

var states = new Array("circle", "square", "triangle", "pentagon");

ご覧のとおり、すべてを保存することが可能です配列内のこれらのデータ項目は非論理的であり、配列に格納されているデータを識別するなど、後でスクリプトで問題が発生する可能性があります。

配列内の値にアクセスするのは簡単ですが、落とし穴があります。配列 ID は常に 1 ではなく 0 から始まるため、初めて使用する場合は少し混乱するかもしれません。 IDは0から始まり、0、1、2、3…と増えていきます。配列項目にアクセスするには、配列内の子の位置を指す ID を使用する必要があります (リスト 12)。


リスト 12. 同様の値を配列に保存する
var Colors = new Array("orange", "blue", "red", " bran" );

document.write("オレンジ: " 色[0]);

document.write("青: " 色[1]); ]);
document.write("Brown: " Colors[3]);



配列内の特定の位置に値を代入したり、配列を更新したりすることもできます。 . 配列内の項目にアクセスするために以前に行ったのと同じように、配列内の項目の値。

リスト 13. 配列内の特定の位置に値を割り当てる

var color = new Array() colors[0] = "orange" ;

colors[1] = "blue";

colors[2] = "red";
colors[3] = "brown"; 1]) ;

// 青を紫に更新します
colors[1] = "purple";
document.write("Purple: "colours[1]); >

変数、演算子、配列についてよく理解できたので、学んだことを実践してロジックの作成を始めてください。

条件文

条件文は、スクリプト言語やプログラミング言語でさまざまな種類のロジックを作成するための骨格であり、JavaScript 言語も例外ではありません。条件ステートメントは、記述した条件に基づいて実行されるアクションを決定します。JavaScript 言語には条件ステートメントを記述する 4 つの方法があり、それについては表 6 で説明します。

表 6. 条件ステートメント

ステートメントの説明

if 特定の条件が true の場合にスクリプトを実行します

if...else 特定の条件の場合特定の条件が true の場合、スクリプトが実行されます。

条件が false の場合、スクリプトが実行されます。if...else if...else がある場合。数に制限なし 複数の条件のうち 1 つが true の場合、特定のスクリプトを実行します。

すべての条件が false の場合、他のスクリプトを実行します。

switch 複数のスクリプトのうち 1 つを実行します。 >
特定の条件が true の場合にのみスクリプトを実行したい場合は、if ステートメントを使用します。リスト 14 は、if ステートメントと比較演算子を使用して、条件が true の場合にスクリプトを実行する方法を示しています。


リスト 14. if ステートメントの使用

var num = 10; if(num == 5)

{

document.write( "num は 5 に等しい");
}



特定の条件が true の場合に 1 つのスクリプトを実行し、条件が false の場合に別のスクリプトを実行する場合は、 if...else ステートメント (リスト 15 を参照)。

リスト 15. if...else ステートメントの使用

var num = 10; if(num == 5)

{

document.write("数値は 5 に等しい");
}
else
{
document.write("数値は 5 に等しくない、数値は: " num);異なる条件に基づいて異なるスクリプトを実行する場合は、リスト 16 に示すように、if...else if...else ステートメントを使用します。


リスト 16. if...else if...else ステートメントの使用

var num = 10;

if(num == 5)
{
document.write("数値は 5 に等しい");
} else if(num == 10) {

document.write("数値は 10 に等しい) ");

}
else
{
document.write("num is: " num);
}



swith ステートメントが異なりますif ステートメントを使用して、変数値が別の値より大きいか小さいかを判断することはできません。リスト 17 は、switch ステートメントを使用してスクリプトを実行する適切な時間を決定する例を示しています。


リスト 17. switch ステートメントを使用します

コードをコピーします
コードは次のとおりです。

var num = 10; switch(num)

{

case 5: document.write("num は 5 に等しい"); break; 🎜>document .write("num は 10 に等しい");

break;

default:
document.write("num は " num);

リスト 17 では case 節、break ステートメント、default 節が使用されていることに気づいたかもしれません。これらの句とステートメントは、switch ステートメントの非常に重要な部分です。 case 句は、switch の値がその句で使用されているデータ値と等しいかどうかを決定します。break ステートメントは、switch ステートメントの残りの実行を中断または停止します。default 句は、case ステートメントが実行されるかどうかを示します。がない場合、または実行される case ステートメントに Break ステートメントがない場合、スクリプトはデフォルトで実行されます。たとえば、リスト 18 は、実行された case ステートメントに Break ステートメントがない場合に、複数の case ステートメントとdefault ステートメントがどのように実行されるかを示しています。


リスト 18.


var num = 10;
switch(num)
{
case 5:
document.write("数値は 5 に等しい");

break;

ケース 10:
document.write("数値は 10 に等しい"); >document.write("数値は: " 数値);

このスクリプトの結果は、最初に「数値は 10 に等しい」という文が表示され、次に「数値は 10 に等しい」という文が続きます。この状況はストレート スイッチと呼ばれることもあります。

このセクションの冒頭で述べたように、条件ステートメントはスクリプト言語やプログラミング言語のすべてのロジックの根幹ですが、関数がなければ、複雑に絡み合ったようなコードが完成します。

関数

関数が役立つ理由はたくさんあります。関数は、イベントまたは関数呼び出しによってのみ実行できるスクリプトのコンテナーであるため、ブラウザーが Web ページに含まれるスクリプトを最初にロードして実行するときには関数は実行されません。関数の目的は、いつでもスクリプトを実行してタスクを実行できるように、タスクを実行するスクリプトを含めることです。

関数の作成は、キーワード function から始め、スペース、関数の名前の順に続けると簡単です。関数の名前として使用する文字列を選択できますが、関数の名前と関数が実行するタスクとの間に何らかの関連性があることが重要です。リスト 19 は、既存の変数の値を変更する関数の例を示しています。

リスト 19. 単純な関数の構築

var num = 10;
function changeVariableValue()
{
num = 11; >}
changeVariableValue();
document.write("num is: " num);

リスト 19 の例は、関数の構築方法を示しているだけではありません。また、関数を呼び出して変数の値を変更する方法も示します。この例では、変数は関数と同様にメイン スクリプト スコープで宣言されており、関数は変数の存在を認識しているため、変数の値を変更できます。ただし、変数が関数内で宣言されている場合、関数の外から変数にアクセスすることはできません。

関数は、関数パラメーターを通じてデータを受け取ることもできます。関数呼び出しには、関数の仮パラメーターの数に基づいて 1 つ以上の実パラメーターを含めることができます。仮パラメータ (パラメータ) と実パラメータ (引数) はよく混同されます。仮パラメータは関数定義の一部ですが、実パラメータは関数を呼び出すときに使用される式です。リスト 20 は、仮パラメーターを受け取り、関数呼び出しで実際のパラメーターを使用する関数の例を示しています。


リスト 20. 関数パラメーターの使用

var num = 10;

function raise(_num)
{
_num;
increase(num);
document.write("num is: " num);

この例の関数は、渡された実引数をインクリメントします。この例では、事前に宣言した変数です。これを実際のパラメータとして関数に渡すと、その値が 11 に増加します。

return ステートメントは関数内でもよく使用され、関数内でスクリプトを実行した後に値を返します。たとえば、関数によって返された値を変数に割り当てることができます。リスト 21 の例は、スクリプトの実行後に関数から値を返す方法を示しています。


リスト 21. 関数内で return ステートメントを使用する
function add(_num1, _num2)

{

return _num1 _num2>}
var num = add(10, 10);
document.write("num is: " num);



このスクリプトの結果は "num is: 20インチ。この関数の優れた点は、渡された任意の 2 つの数値を加算してその加算値を返すことができることです。リスト 20 のように常に同じ値を変更するのではなく、その加算値を任意の変数に割り当てることができます。変数の値。

ループ

すでに見たように、配列は再利用可能な大量のデータを保存する優れた方法です。しかし、これはほんの始まりにすぎません。for ループと while ループは、これらの配列を反復処理し、その値にアクセスし、それらを使用してスクリプトを実行する機能を提供します。
JavaScript 言語で最もよく使用されるループの種類は for ループです。 for ループは通常、次のように構成されます。変数に数値が割り当てられ、比較演算子を使用してその変数が別の値と比較され、最後に数値が増加または減少します。通常、for ループでの比較により、初期変数の値が別の値より小さいか大きいかが判断され、条件が true である間、ループが実行され、条件が満たされるまで変数がインクリメントまたはデクリメントされます。条件は false と評価されます。リスト 22 は、値が配列の長さより小さい場合に実行される for ループの作成方法の例を示しています。


リスト 22. for ループの構築と配列の走査

var Colors = new Array("orange", "blue", "red", "brown" ); for(var i=0; i

{

document.write("色は次のとおりです: " Colors[i] "
");
}

配列の長さ属性は、配列内の項目数に等しい値を提供します。ここで間違いやすいのは、配列の ID が 0 から始まることです。配列内に 4 つの項目がある場合、長さは 4 ですが、配列内のインデックスは 0、1、2、および 3 であり、4 はありません。

別のタイプのループは while ループです。これらは for ループよりも高速に実行されますが、特定の条件が true の場合にスクリプトを実行するなど、配列を走査しない状況に適しています。リスト 23 は、数値変数が 10 未満の場合にスクリプトを実行する while ループの作成方法を示しています。

リスト 23. while ループの構築

var i = 0;
while(i<10)
{
document.write( i " ");
i ;
}

while ループ内のスクリプトには、until まで数値変数を重ね合わせるコード行が含まれていることがわかります。条件は偽です。このコード行がないと、無限ループだけが発生します。

結論

JavaScript 言語は最も人気のある言語の 1 つであると言えますが、その理由がわかりました。このシンプルでありながら豊富なスクリプト言語は非常に多くの可能性をもたらし、Web サイト訪問者がダウンロードした Web ページと対話できるようにする非常に強力なツールを提供します。この記事は、JavaScript 言語の基本原理を理解するための基礎を築きました。これで、JavaScript ライブラリ関数がどのように機能するか、および Web クライアント ロジックの作成プロセスを簡素化するためにそれらを使用する方法を簡単に理解できるようになりました。次に行うことは、これらの概念を実践し、JavaScript オブジェクトの探索を開始することです。