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クラス

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

JS非同期

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データ型

JavaScript変数は、数値、文字列、オブジェクトなど、さまざまなデータ型を保持できます。

let length = 16;                               // Number
let lastName = "Johnson";                      // String
let x = {firstName:"John", lastName:"Doe"};    // Object

データ型の概念

プログラミングでは、データ型は重要な概念です。

変数を操作できるようにするには、型について何かを知ることが重要です。

データ型がないと、コンピューターはこれを安全に解決できません。

let x = 16 + "Volvo";

16に「ボルボ」を追加するのは意味がありますか?エラーが発生しますか、それとも結果が発生しますか?

JavaScriptは、上記の例を次のように扱います。

let x = "16" + "Volvo";

数値と文字列を追加する場合、JavaScriptは数値を文字列として扱います。

let x = 16 + "Volvo";

let x = "Volvo" + 16;

JavaScriptは式を左から右に評価します。シーケンスが異なれば、結果も異なります。

JavaScript:

let x = 16 + 4 + "Volvo";

結果:

20Volvo

JavaScript:

let x = "Volvo" + 16 + 4;

結果:

Volvo164

最初の例では、JavaScriptは「Volvo」に到達するまで16と4を数値として扱います。

2番目の例では、最初のオペランドが文字列であるため、すべてのオペランドが文字列として扱われます。



JavaScriptタイプは動的です

JavaScriptには動的型があります。これは、同じ変数を使用して異なるデータ型を保持できることを意味します。

let x;           // Now x is undefined
x = 5;           // Now x is a Number
x = "John";      // Now x is a String

JavaScript文字列

文字列(またはテキスト文字列)は、「JohnDoe」のような一連の文字です。

文字列は引用符で囲まれています。一重引用符または二重引用符を使用できます。

let carName1 = "Volvo XC60";   // Using double quotes
let carName2 = 'Volvo XC60';   // Using single quotes

文字列を囲む引用符と一致しない限り、文字列内で引用符を使用できます。

let answer1 = "It's alright";             // Single quote inside double quotes
let answer2 = "He is called 'Johnny'";    // Single quotes inside double quotes
let answer3 = 'He is called "Johnny"';    // Double quotes inside single quotes

文字列については、このチュートリアルの後半で詳しく学習します。


JavaScript番号

JavaScriptには1種類の数字しかありません。

数値は、小数点付きまたは小数点なしで書き込むことができます。

let x1 = 34.00;     // Written with decimals
let x2 = 34;        // Written without decimals

非常に大きい数または非常に小さい数は、科学的(指数)表記で書くことができます。

let y = 123e5;      // 12300000
let z = 123e-5;     // 0.00123

数値については、このチュートリアルの後半で詳しく説明します。


JavaScriptブール値

trueブール値は、またはの2つの値のみを持つことができますfalse

let x = 5;
let y = 5;
let z = 6;
(x == y)       // Returns true
(x == z)       // Returns false

ブール値は、条件付きテストでよく使用されます。

条件付きテストの詳細については、このチュートリアルの後半で学習します。


JavaScript配列

JavaScript配列は、角かっこで記述されています。

配列項目はコンマで区切られます。

cars次のコードは、3つのアイテム(車の名前)を含む、という配列を宣言(作成)します。

const cars = ["Saab", "Volvo", "BMW"];

配列インデックスはゼロベースです。つまり、最初の項目は[0]、2番目の項目は[1]というようになります。

配列については、このチュートリアルの後半で詳しく学習します。


JavaScriptオブジェクト

JavaScriptオブジェクトは中括弧で記述されています{}

オブジェクトのプロパティは、コンマで区切られた名前と値のペアとして記述されます。

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

上記の例のオブジェクト(person)には、firstName、lastName、age、eyeColorの4つのプロパティがあります。

オブジェクトについては、このチュートリアルの後半で詳しく学習します。


演算子のタイプ

JavaScripttypeof演算子を使用して、JavaScript変数のタイプを見つけることができます。

typeof演算子は、変数または式の型を返します

typeof ""             // Returns "string"
typeof "John"         // Returns "string"
typeof "John Doe"     // Returns "string"

typeof 0              // Returns "number"
typeof 314            // Returns "number"
typeof 3.14           // Returns "number"
typeof (3)            // Returns "number"
typeof (3 + 4)        // Returns "number"

typeofについては、このチュートリアルの後半で詳しく説明します。


未定義

JavaScriptでは、値のない変数の値はですundefinedタイプもundefinedです。

let car;    // Value is undefined, type is undefined

値をに設定することにより、任意の変数を空にすることができますundefinedタイプもになりますundefined

car = undefined;    // Value is undefined, type is undefined

空の値

空の値は。とは何の関係もありませんundefined

空の文字列には、有効な値と型の両方があります。

let car = "";    // The value is "", the typeof is "string"

エクササイズで自分をテストする

エクササイズ:

コメントを使用して、次の変数の正しいデータ型を説明します。

let length = 16;            // 
let lastName = "Johnson";   // 
const x = {
  firstName: "John",
  lastName: "Doe"
};                          //