ITコース JavaScript基礎 036_構文構造

文

JavaScript文（Statements）は、特定のタスクを実行するための命令のセットです。

例：

1
// 変数宣言
2
let userName = '趙健';
3
let age = 18;
4

5
// 条件文
6
if (age >= 18) {
7
  console.log(userName + ' は成人です');
8
} else {
9
  console.log(userName + ' は未成年者です');
10
}
11

12
// ループ
13
for (let i = 0; i < 5; i++) {
14
  console.log('ループ出力 ' + (i + 1));
15
}
16

17
// 関数定義
18
function Hello(name) {
19
  return 'こんにちは, ' + name + '!';
20
}
21

22
// 関数呼び出し
23
let sayHello = Hello(userName);
24
console.log(sayHello);

セミコロン

JavaScriptでは、セミコロン（;）は文の終了を識別するために使用される文終端記号です。セミコロンはほとんどの場合オプションです。JavaScriptインタープリターは自動セミコロン挿入（Automatic Semicolon Insertion、ASI）を試み、コードを構文的に正しく解析しようとします。ただし、ASIが予期しない動作を引き起こす場合があるため、JavaScriptコードを書く際には明示的にセミコロンを追加することをお勧めします。

セミコロンが現れると、単一行でも複数行でも、その文は終了します。

例：

1
alert('Hello');alert('JavaScript!');

改行（line break）がある場合、ほとんどの場合セミコロンを省略できます。

例：

1
alert('Hello')
2
alert('JavaScript!')

1
alert('Hello');
2
alert('JavaScript!')

1
alert('Hello')
2
alert('JavaScript!');

1
alert('Hello');alert('JavaScript!')

文ブロックやコードブロックに遭遇した場合、改行は自動的にセミコロンを追加しません。また、スペースと改行は無視されます。

例：

1
alert
2
(
3
1+
4
   2
5
   +1);

コメント

JavaScriptでは、コメントはコード内に説明やメモを追加するために使用されるテキストです。これらのテキストはプログラムの実行に実際の影響を与えません。コメントはコードの可読性、コラボレーション、デバッグを向上させるのに非常に役立ちます。

単一行コメント

// 記号を使用して単一行コメントを作成できます。// から行末までのすべてのテキストがコメントとして扱われます。

例：

1
alert('Hello JavaScript!'); // 文に続く単一行コメント
2
// 単独の行にある単一行コメント

複数行コメント

/* で開始し、*/ で終了することで複数行コメントを作成できます。これらの2つの記号の間のすべてのテキストがコメントとして扱われます。

1
/*
2
  これは複数行コメントです
3
  複数行にわたることができます
4
*/
5
alert('Hello');
6
/*
7
複数行コメントはコードブロックをコメントアウトするためにも使用できます。以下のコードは実行されません
8
alert('JavaScript!');
9
*/

ダイアログボックス

JavaScriptは、alert、confirm、prompt を含む、ユーザーとの簡単な対話のためのいくつかのダイアログボックスを提供します。これらのダイアログボックスを使用すると、ユーザーに情報を表示したり、質問したり、入力を受け付けたりできます。ダイアログボックスが表示されると、ユーザーがダイアログボックスを閉じるまでコードの実行が一時停止します。

alert ダイアログボックス

alert ダイアログボックスは、ユーザーにメッセージを表示し、ユーザーが「OK」ボタンをクリックするのを待つために使用されます。

例：

1
alert('Hello 内部JavaScript!');

効果：

confirm ダイアログボックス

confirm ダイアログボックスは、確認とキャンセルボタンを持つダイアログボックスをユーザーに表示するために使用され、通常、ユーザーが操作を実行するかどうかを確認するために使用されます。

例：

1
    let yesNo = confirm("JavaScriptを学習していますか?");
2
    alert(yesNo);

効果：

prompt ダイアログボックス

prompt ダイアログボックスは、入力フィールドを持つダイアログボックスをユーザーに表示するために使用され、通常、ユーザーの入力を受け付けるために使用されます。

例：

1
    let name = prompt("名前を入力してください：", '');
2
    alert(name);

効果：

開発者ツール

JavaScript開発者ツールは、開発者がJavaScriptコードをデバッグ、分析、最適化するのを支援するためにブラウザに組み込まれたツールのセットです。異なるブラウザは異なる開発者ツールを提供しています。以下は一般的なブラウザのJavaScript開発者ツールです：

Chrome 開発者ツール

Chromeブラウザを開き、Ctrl + Shift + I（Windows/Linux）または Cmd + Option + I（Mac）を押すと、Chrome開発者ツールを開くことができます。

ブラウザ内で右クリックし、ポップアップメニューから「検証」を選択すると、Chrome開発者ツールを開くことができます。

図のように：

ブラウザの「設定とその他」アイコンをクリックし、「その他のツール」—「デベロッパーツール」を選択すると、Chrome開発者ツールを開くことができます。

図のように：

主な機能とパネル：

• Console（コンソール）： JavaScriptコードの実行とデバッグ、出力、エラー、警告メッセージの表示に使用されます。
• Sources（ソース）： コードエディター、ブレークポイント設定、ウォッチ式などの機能を提供し、JavaScriptソースコードのデバッグに使用されます。
• Network（ネットワーク）： ページによって行われたネットワークリクエストを表示し、リクエストとレスポンスの詳細情報を検査します。
• Performance（パフォーマンス）： ページパフォーマンスを分析し、読み込み時間、CPU使用率などを表示します。
• Application（アプリケーション）： ローカルストレージ、セッションストレージ、Cookieなどを表示およびデバッグします。
• Elements（要素）： DOMツリーを表示および編集し、CSSスタイルを変更します。

キーワード

JavaScriptキーワードは、JavaScriptプログラミング言語で特別な目的を持つ予約語です。これらは変数、関数、文などを識別するために使用されます。これらのキーワードは識別子（変数名、関数名など）として使用できません。

以下はいくつかのJavaScriptキーワードです：

1. 基本キーワード：

• break
• case
• catch
• continue
• debugger
• default
• delete
• do
• else
• false
• finally
• for
• function
• if
• in
• instanceof
• new
• null
• return
• switch
• this
• throw
• true
• try
• typeof
• undefined
• var
• void
• while
• with

2. 予約キーワード（厳格モードで特別な目的を持つ）：

• implements
• interface
• package
• private
• protected
• public
• static
• yield

3. ECMAScript 6（ES6）で導入されたキーワード：

• class
• const
• export
• extends
• import
• super