JavaScriptコードの使い方

JavaScript は、Web 開発、デスクトップ ソフトウェア、モバイル アプリケーション開発などの多くの分野で使用できる、広く使用されているプログラミング言語です。この記事では、初心者がすぐに始められるように、JavaScript コードの使用方法を紹介します。

1. Javascript コードを作成する

JavaScript コードを HTML ファイルに導入するのが最も一般的な方法です。 HTML コードでは、JavaScript コードは <script> タグによって導入されます (例: </script>

<script>
// 在这里写JavaScript代码
</script>

)。JavaScript コードを別の .js ファイルとして保存して、HTML ファイルに導入することもできます。たとえば、「script.js」という名前のファイルを作成し、HTML ファイル内でそれを参照できます。

<script src="script.js"></script>

2. 変数

変数は、JavaScript でデータを保存するために使用されます。変数を作成するときは、キーワード var を使用する必要があります。例:

var name = "John";

上記のコードは変数名を作成し、文字列「John」をこの変数に割り当てます。 Javascript では、変数は動的に型付けされます。つまり、変数の型は動的に変更できます。たとえば、上記の変数名の値を数値型に変更できます。

var name = 10;

変数名は文字、数字、アンダースコア、ドル記号で構成できますが、先頭に「.」を付けることはできません。番号。変数名では大文字と小文字が区別されます。

3. データ型

JavaScript には、文字列、数値、配列、オブジェクトなどを含むさまざまなデータ型があります。

1. String

String はテキストを表すために使用されるデータ型であり、一重引用符または二重引用符で囲むことができます。例:

var name = "John";
var greeting = 'Hello';

2. Numbers

JavaScript の数値は、整数型と浮動小数点型に分けられます。例:

var age = 18;
var price = 9.99;

3. Array

Array は、一連のデータを格納するために使用されるデータ型です。配列の各要素は、任意のデータ型にすることができます。配列を宣言するときは、角括弧 [] を使用し、各要素をカンマで区切る必要があります。例:

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

配列要素にはインデックスによってアクセスでき、配列のインデックスは 0 から始まります。たとえば、上記の配列の「apple」にアクセスします。

var fruit = fruits[0];

4. Object

Object は、実際のものを記述するために使用されるデータ型です。オブジェクトはプロパティとメソッドで構成されます。プロパティはオブジェクトの特性であり、メソッドはオブジェクトの動作です。例:

var person = {
  name: "John",
  age: 18,
  sayHello: function() {
    alert("Hello!");
  }
};

上記のコードは、名前、年齢、sayHello メソッドを含む person オブジェクトを作成します。ドットまたは角括弧を使用してオブジェクトのプロパティとメソッドにアクセスできます。たとえば、person オブジェクト内の名前にアクセスするには:

var name = person.name;

4. 制御フロー

制御フローは、プログラムの実行順序を制御するメカニズムです。JavaScript にはさまざまな制御フロー ステートメントが用意されています。 。

1. if ステートメント

if ステートメントは、条件に基づいてさまざまなコード ブロックを実行するために使用されます。例:

if (age > 18) {
  alert("You are an adult.");
} else {
  alert("You are a child.");
}

上記のコードは、変数 age の値に基づいて年齢が 18 歳を超えているかどうかを判断し、さまざまなコード ブロックを実行します。

2. for ループ

for ループは、同じコード ブロックを繰り返し実行するために使用されます。たとえば、1 から 10 までの数値を出力するには:

for (var i = 1; i <p>上記のコードは、変数 i を使用して 1 から 10 までループし、毎回現在の i 値を出力します。 </p><ol start="3"><li>while ループ</li></ol><p>while ループは、条件が true である間、同じコード ブロックを繰り返し実行するために使用されます。たとえば、1 から 10 までの数値を出力します。 </p><pre class="brush:php;toolbar:false">var i = 1;
while (i <p>上記のコードは、変数 i を使用して 1 からループを開始し、毎回現在の i 値を出力し、ループが終了するまで i を 1 ずつ増やします。 i は 10 より大きいです。 </p><p>5. 関数</p><p>関数は、特定のタスクを完了するコードのブロックであり、実行のために繰り返し呼び出すことができます。関数は、キーワード関数を使用して Javascript で定義できます。たとえば、2 つの数値の合計を計算する関数を定義します。 </p><pre class="brush:php;toolbar:false">function add(a, b) {
  return a + b;
}

上記のコードは、2 つのパラメーター a と b を受け取り、それらの合計を返す add という名前の関数を定義します。

6. DOM 操作

Javascript は DOM (Document Object Model) ツリーを操作して、HTML ページを動的に更新する効果を実現できます。 DOM ツリーは HTML ページの構造化表現であり、各 HTML 要素は DOM ツリー内のノードです。 Javascript は、要素のコンテンツ、属性、スタイルなどを変更するなど、DOM API を通じてこれらのノードを操作できます。

1. 要素の取得

getElementById、getElementsByClassName、getElementsByTagName およびその他のドキュメント オブジェクトのメソッドを使用して、HTML 要素を取得できます。たとえば、ID が「myDiv」の要素を取得します。

var myDiv = document.getElementById("myDiv");

2. 要素のコンテンツと属性を変更する

ノードの innerHTML、innerText、nodeValue 属性を使用して、ノードの内容を変更します。たとえば、ID が「myDiv」の要素のコンテンツを変更するには、次のようにします。

var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "Hello World!";

ノードの getAttribute 属性と setAttribute 属性を使用して、ノードの属性を変更できます。たとえば、ID が「myLink」の要素の href 属性を変更します。

var myLink = document.getElementById("myLink");
myLink.setAttribute("href", "http://www.example.com");

3. 要素の style を変更します

ノードの style 属性を使用して、次のことを行うことができます。ノードのスタイルを変更します。例：IDが「myDiv」の要素の背景色を変更する：

var myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "red";

以上がJavaScriptコードの基本操作であり、この内容をマスターするとJavaScriptの応用範囲がさらに広がります。

以上がJavaScriptコードの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。