File tree Expand file tree Collapse file tree 6 files changed +10
-10
lines changed
Expand file tree Collapse file tree 6 files changed +10
-10
lines changed Original file line number Diff line number Diff line change @@ -6,7 +6,7 @@ import Term from "@site/src/components/Term";
66
77## <Term type =" javascriptValue " >値</Term >
88
9- 次のコードを実行すると、` Hello World ` が画面に表示されました。
9+ 次のコードを実行すると、` Hello World ` が画面に表示されました。
1010
1111``` javascript title="script.js"
1212document .write (" Hello World" );
@@ -36,7 +36,7 @@ document.write(3 + 4);
3636document .write (3 + 4 * 5 );
3737```
3838
39- ` * ` (乗算<Term type =" javascriptOperator " >演算子</Term >)は` + ` より<Term type =" javascriptOperatorPriority " >優先順位</Term >が高く設定されているため、上記のコードの実行結果は` 23 ` となります。
39+ ` * ` (乗算<Term type =" javascriptOperator " >演算子</Term >)は ` + ` より<Term type =" javascriptOperatorPriority " >優先順位</Term >が高く設定されているため、上記のコードの実行結果は ` 23 ` となります。
4040
4141このコードにおいて、` 3 + 4 * 5 ` や、` 4 * 5 ` 、` 4 ` を<Term strong type =" javascriptExpression " >式</Term >と呼びます。また、<Term type =" javascriptExpression " >式</Term >が計算され、その結果としての<Term type =" javascriptValue " >値</Term >が確定することを式が<Term strong type =" javascriptEvaluation " >評価</Term >されるといいます。
4242
@@ -61,9 +61,9 @@ document.write("Hello" + 1 + 2);
6161
6262このような場合、<Term type =" javascriptOperator " >演算子</Term >の** 結合規則** を考える必要があります。
6363
64- ` + ` の結合規則は左から右なので、` 3 + 4 + "Hello" ` は ` (3 + 4) + "Hello" ` 、` "Hello" + 1 + 2 ` は` ("Hello" + 1) + 2 ` と解釈されることになります。
64+ ` + ` の結合規則は左から右なので、` 3 + 4 + "Hello" ` は ` (3 + 4) + "Hello" ` 、` "Hello" + 1 + 2 ` は` ("Hello" + 1) + 2 ` と解釈されることになります。
6565
66- ` + ` は、両辺が<Term type =" javascriptNumber " >数値</Term >の場合のみ加算<Term type =" javascriptOperator " >演算子</Term >として振る舞い、片方が<Term type =" javascriptNumber " >数値</Term >で片方が<Term type =" javascriptString " >文字列</Term >の場合は<Term type =" javascriptNumber " >数値</Term >を<Term type =" javascriptString " >文字列</Term >に変換してから<Term type =" javascriptString " >文字列</Term >結合<Term type =" javascriptOperator " >演算子</Term >として機能します。このため、最終的な<Term type =" javascriptExpression " >式</Term >全体の<Term type =" javascriptEvaluation " >評価</Term >結果は前者が ` "7Hello" ` 、後者が ` "Hello12" ` となるのです。
66+ ` + ` は、両辺が<Term type =" javascriptNumber " >数値</Term >の場合のみ加算<Term type =" javascriptOperator " >演算子</Term >として振る舞い、片方が<Term type =" javascriptNumber " >数値</Term >で片方が<Term type =" javascriptString " >文字列</Term >の場合は<Term type =" javascriptNumber " >数値</Term >を<Term type =" javascriptString " >文字列</Term >に変換してから<Term type =" javascriptString " >文字列</Term >結合<Term type =" javascriptOperator " >演算子</Term >として機能します。このため、最終的な<Term type =" javascriptExpression " >式</Term >全体の<Term type =" javascriptEvaluation " >評価</Term >結果は前者が ` "7Hello" ` 、後者が ` "Hello12" ` となるのです。
6767
6868### 代表的な演算子
6969
Original file line number Diff line number Diff line change @@ -7,7 +7,7 @@ import ViewSource from "@site/src/components/ViewSource";
77
88## if 構文
99
10- ** if 構文** は、<Term type =" javascript " >JavaScript</Term >の<Term strong type =" javascriptControlFlow " >制御構造</Term >で、特定の条件下のみで実行されるプログラムを記述することができます。
10+ ** if 構文** は、<Term type =" javascript " >JavaScript</Term > の<Term strong type =" javascriptControlFlow " >制御構造</Term >で、特定の条件下のみで実行されるプログラムを記述することができます。
1111
1212## 基本構造
1313
@@ -18,7 +18,7 @@ if (age < 20) {
1818}
1919```
2020
21- このプログラムは、 ` 未成年者の場合は法定代理人の同意が必要です。 ` と表示しますが、1 行目を ` let age = 20; ` に変更すると何も表示されなくなります。
21+ このプログラムは、` 未成年者の場合は法定代理人の同意が必要です。 ` と表示しますが、1 行目を ` let age = 20; ` に変更すると何も表示されなくなります。
2222
23232 行目の ` if (age < 20) { ` 部分がポイントです。ここに差し掛かると、括弧内の<Term type =" javascriptExpression " >式</Term > ` age < 20 ` が<Term type =" javascriptEvaluation " >評価</Term >され、` true ` になります。このため、直後の波括弧内の処理が実行されます。
2424
Original file line number Diff line number Diff line change @@ -21,7 +21,7 @@ greet();
2121greet ();
2222```
2323
24- 上のプログラムにおいて、` function ` キーワードから始まる部分は<Term type =" javascriptFunction " >関数</Term >を定義するための<Term type =" javascriptControlFlow " >制御構文</Term >です。<Term type =" javascriptFunction " >関数</Term >定義では、 ` function ` キーワードに続けて<Term type =" javascriptFunction " >関数</Term >名、かっこを記述します。この後、<Term type =" javascriptFunction " >関数</Term >内で実行したい処理を波かっこの中に記述していきます。
24+ 上のプログラムにおいて、` function ` キーワードから始まる部分は<Term type =" javascriptFunction " >関数</Term >を定義するための<Term type =" javascriptControlFlow " >制御構文</Term >です。<Term type =" javascriptFunction " >関数</Term >定義では、 ` function ` キーワードに続けて<Term type =" javascriptFunction " >関数</Term >名、かっこを記述します。この後、<Term type =" javascriptFunction " >関数</Term >内で実行したい処理を波かっこの中に記述していきます。
2525
2626<p ><Term type =" javascriptFunction " >関数</Term >を定義すると、<Term type =" javascriptFunction " >関数</Term >名に続けてかっこを記述することにより、その<Term type =" javascriptFunction " >関数</Term >を実行できるようになります。</p >
2727
Original file line number Diff line number Diff line change @@ -17,7 +17,7 @@ JavaScript で扱うことのできる<Term type="javascriptValue">値</Term>の
1717
1818:::tip ほかの言語の経験者へ
1919
20- JavaScript の<Term type =" javascriptObject " >オブジェクト</Term >は、ほかの言語でいう** 辞書** や** 連想配列** 、** Map** に近いものです。ただ、こういったものと比べ、JavaScript の<Term type =" javascriptObject " >オブジェクト</Term >は使用頻度が非常に高いです。
20+ JavaScript の<Term type =" javascriptObject " >オブジェクト</Term >は、ほかの言語でいう** 辞書** や** 連想配列** 、** Map** に近いものです。ただ、こういったものと比べ、JavaScript の<Term type =" javascriptObject " >オブジェクト</Term >は使用頻度が非常に高いです。
2121
2222:::
2323
Original file line number Diff line number Diff line change @@ -26,7 +26,7 @@ element.textContent = "Hello DOM";
2626
2727![ DOM] ( ./dom.png )
2828
29- ` document.getElementById ` が<Term type =" javascriptReturn " >返す</Term ><Term type =" javascriptObject " >オブジェクト</Term >には、取得した HTML<Term type =" element " >要素</Term >の特徴を表す、たくさんの<Term type =" javascriptProperty " >プロパティ</Term >が含まれています。下はその一部分です。
29+ ` document.getElementById ` が<Term type =" javascriptReturn " >返す</Term ><Term type =" javascriptObject " >オブジェクト</Term >には、取得した HTML <Term type =" element " >要素</Term >の特徴を表す、たくさんの<Term type =" javascriptProperty " >プロパティ</Term >が含まれています。下はその一部分です。
3030
3131| プロパティ | 説明 |
3232| ------------- | ---------------------------------------------------- |
Original file line number Diff line number Diff line change @@ -24,7 +24,7 @@ func();
2424## <Term type =" eventHandler " >イベントハンドラ</Term >
2525
2626<p ><Term type =" javascriptObject " >オブジェクト</Term >の<Term type =" javascriptProperty " >プロパティ</Term >として<Term type =" javascriptFunction " >関数</Term >を利用することもできます。 <code >document.getElementById</code > が返す<Term type =" javascriptObject " >オブジェクト</Term >の <code >onclick</code > <Term type =" javascriptProperty " >プロパティ</Term >には、<Term type =" element " >要素</Term >がクリックされたときに実行される<Term type =" javascriptFunction " >関数</Term >を指定できます。</p >
27- ボタンのクリック、フォームへの入力、ページの読み込みなど、Webページ上で発生するあらゆるアクションを総称して <Term type =" events " >イベント</Term >と呼びます。このような<Term type =" events " >イベント</Term >の処理を行うのが<Term type =" eventHandler " >イベントハンドラ</Term >で、<code >onclick</code > 関数はその一例です。
27+ ボタンのクリック、フォームへの入力、ページの読み込みなど、Web ページ上で発生するあらゆるアクションを総称して <Term type =" events " >イベント</Term >と呼びます。このような<Term type =" events " >イベント</Term >の処理を行うのが<Term type =" eventHandler " >イベントハンドラ</Term >で、<code >onclick</code > 関数はその一例です。
2828
2929``` html title="index.html"
3030<button id =" greet-button" type =" button" >クリック</button >
You can’t perform that action at this time.
0 commit comments