JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JSAsync

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScriptステートメント


let x, y, z;    // Statement 1
x = 5;          // Statement 2
y = 6;          // Statement 3
z = x + y;      // Statement 4

JavaScriptプログラム

コンピュータプログラムは、コンピュータによって「実行」される「命令」のリストです

プログラミング言語では、これらのプログラミング命令はステートメントと呼ばれます。

JavaScriptプログラムは、プログラミングステートメントリストです

HTMLでは、JavaScriptプログラムはWebブラウザによって実行されます。


JavaScriptステートメント

JavaScriptステートメントは次のもので構成されています。

値、演算子、式、キーワード、およびコメント。

このステートメントは、ブラウザに「HelloDolly」と書くように指示します。id = "demo"のHTML要素内:

document.getElementById("demo").innerHTML = "Hello Dolly.";

ほとんどのJavaScriptプログラムには、多くのJavaScriptステートメントが含まれています。

ステートメントは、記述されたのと同じ順序で1つずつ実行されます。

JavaScriptプログラム(およびJavaScriptステートメント)は、JavaScriptコードと呼ばれることがよくあります。


セミコロン;

セミコロンはJavaScriptステートメントを区切ります。

各実行可能ステートメントの最後にセミコロンを追加します。

let a, b, c;  // Declare 3 variables
a = 5;        // Assign the value 5 to a
b = 6;        // Assign the value 6 to b
c = a + b;    // Assign the sum of a and b to c

セミコロンで区切ると、1行に複数のステートメントを含めることができます。

a = 5; b = 6; c = a + b;

Webでは、セミコロンのない例が表示される場合があります。
ステートメントをセミコロンで終了する必要はありませんが、強くお勧めします。



JavaScriptの空白

JavaScriptは複数のスペースを無視します。スクリプトに空白を追加して、スクリプトを読みやすくすることができます。

次の行は同等です。

let person = "Hege";
let person="Hege";

演算子の前後にスペースを入れることをお勧めします(= +-* /):

let x = y + z;

JavaScriptの行の長さと改行

読みやすくするために、プログラマーは80文字を超えるコード行を避けたいことがよくあります。

JavaScriptステートメントが1行に収まらない場合、JavaScriptステートメントを分割するのに最適な場所は演算子の後にあります。

document.getElementById("demo").innerHTML =
"Hello Dolly!";

JavaScriptコードブロック

JavaScriptステートメントは、中括弧{...}内のコードブロックにグループ化できます。

コードブロックの目的は、一緒に実行されるステートメントを定義することです。

ブロックにグループ化されたステートメントを見つける1つの場所は、JavaScript関数です。

function myFunction() {
  document.getElementById("demo1").innerHTML = "Hello Dolly!";
  document.getElementById("demo2").innerHTML = "How are you?";
}

このチュートリアルでは、コードブロックに2つのインデントスペースを使用します。
関数については、このチュートリアルの後半で詳しく学習します。


JavaScriptキーワード

JavaScriptステートメントは、実行するJavaScriptアクションを識別するためのキーワードで始まることがよくあります。

予約語リファレンスには、すべてのJavaScriptキーワードがリストされています

このチュートリアルで学習するキーワードのリストを次に示します。

キーワード 説明
var 変数を宣言します
let ブロック変数を宣言します
const ブロック定数を宣言します
if 条件で実行されるステートメントのブロックをマークします
switch さまざまなケースで実行されるステートメントのブロックをマークします
for ループで実行されるステートメントのブロックをマークします
function 関数を宣言します
return 関数を終了します
try ステートメントのブロックにエラー処理を実装します

JavaScriptのキーワードは予約語です。予約語を変数の名前として使用することはできません。