JavaScript記述法
HTML内に<script>要素を使用して埋め込む方法や、外部のJavaScriptファイルをリンクする方法など、いくつかの記述法があります。
HTML内に<script>要素を使用した埋め込み
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script>
// JavaScriptのコードをここに記述
console.log("Hello, world!");
</script>
</head>
<body>
<!-- HTMLのコンテンツ -->
</body>
</html>外部のJavaScriptファイルをリンクする方法
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script src="script.js"></script> <!-- 外部のJavaScriptファイルをリンク -->
</head>
<body>
<!-- HTMLのコンテンツ -->
</body>
</html>外部ファイルに記述されたJavaScriptファイル (script.js)
// script.js
// JavaScriptのコードをここに記述
console.log("Hello, world!");コメントの書き方(1行)
// これは1行コメントですコメントの書き方(複数行)
/*
これは
複数行コメント
です
*/コメントの書き方(ドキュメンテーションコメント)
/**
* これはドキュメンテーションコメントです
* 関数やクラスの説明などに使用されます
*/オブジェクト・プロパティ・メソッド
オブジェクト
オブジェクトは、プロパティとメソッドを持つデータ構造です。ブラウザの各部品や情報をオブジェクトとして取り扱うことができます。このオブジェクトの値を変更したり、値を調べてそれによって違った処理を設定することによって、ブラウザを動的に変更することができるのです。オブジェクト名=new オブジェクトの型(値)
プロパティ
プロパティはオブジェクトが持つ値やデータを表現します。プロパティはオブジェクトの後に.で区切って設定します。オブジェクト.プロパティ プロパティの中には値を設定することができるものがあります。オブジェクト.プロパティ=値
メソッド
オブジェクトに対して動作を指定します。メソッドはオブジェクトの後に.で区切って設定します。またオブジェクトに値を設定する時には()内に値を設定することによって行います。オブジェクト.メソッド(値)
イベントハンドラ
ユーザーやスクリプトによってページがロードされてりオブジェクトがクリックされたりというような、特定の動作が起こったタイミングをイベントといいます。イベントが発生した際に、その要素に紐付けられたJavaScriptの関数を呼び出すことができます。イベントハンドラ名=スクリプトまたは関数
JavaScriptデータ(値)の種類
JavaScriptにはいくつかのデータ(値)の種類があります。
文字列(String)
テキストデータを表現するためのデータ型です。シングルクォート 'またはダブルクォート"で囲まれた文字列を表現します。
| ¥b | バックスペース |
| ¥f | フォームフィード |
| ¥n | 改行 |
| ¥r | キャリッジリターン |
| ¥t | タブ |
| ¥v | 垂直タブ |
| ¥¥ | バックスラッシュ |
| ¥’ | シングルクォート |
| ¥” | ダブルクォート |
| ¥XXX | 3つまでの8進数が表すLatin-1文字 |
| ¥xXX | 2つの16進数が表すLatin-1文字 |
| ¥uXXXX | 4つの16進数が表すUnicode文字 |
| ¥u0009 | タブ |
| ¥u000B | 垂直タブ |
| ¥u000C | フォームフィード |
| ¥u0020 | スペース |
| ¥u000A | ラインフィード |
| ¥u000D | キャリッジリターン |
| ¥u0008 | バックスペース |
| ¥u0009 | 水平タブ |
| ¥u0022 | ダブルクォート |
数値：整数
整数を8進数、10進数、16進数で表現することができます。
8進数は0から始まり0から7までの数字で表す数値
10進数は0以外から始まり0から9までの数字で表す数値
16進数は0xから始まり0から9までの数字とアルファベットAからFまでで表す数値
var octalNumber = 0o10; // 8進数の10を表現
console.log(octalNumber); // 結果: 8
var decimalNumber = 10; // 10進数の10
console.log(decimalNumber); // 結果: 10
var hexadecimalNumber = 0x0A; // 16進数のAを表現
console.log(hexadecimalNumber); // 結果: 10数値：浮動小数点数
小数点をピリオド(・)で表わした10進数、またはeあるいはEを使用する指数が使えます。の例
var decimalNumberWithPeriod = 3・14; // 小数点をピリオドで表現した10進数の例
console.log(decimalNumberWithPeriod); // 結果: 3.14
var scientificNotationWithE = 6.022e23; // 指数表記の例（eを使用）
console.log(scientificNotationWithE); // 結果: 6.022e+23
var scientificNotationWithEUpperCase = 6.022E23; // 指数表記の例（Eを使用）
console.log(scientificNotationWithEUpperCase); // 結果: 6.022e+23論理値
論理値は、真 (true) と偽 (false) の2つの値を持ちます。
| true | 真 |
| false | 偽 |
null値
定義されていなかったり、何も設定されていなかったりする状態を表します。
| null | 未定義、何も設定なれてない |
関数
一連の処理手続をまとめて名前を付けたものです。関数はオブジェクトの一部であり、関数自体が値として使用されることができます。
関数の定義の一般的な構文は以下の通りです
function 関数名(引数1, 引数2, ...) {
// 関数の本体
// 処理や計算を記述
// return文を使用して値を返すことができる
}関数を呼び出すには、関数名に引数を渡して呼び出します
関数名(引数1, 引数2, ...);関数は以下のような特徴を持ちます
- 引数: 関数に渡される値のことであり、関数内で使用することができます。
- 本体: 関数の実際の処理が記述される部分であり、JavaScriptの文や式を含むことができます。
- 戻り値: 関数が実行された結果として返す値のことであり、return文を使用して明示的に指定することができます。
// 2つの数値を足し合わせる関数
function addNumbers(a, b) {
return a + b;
}
// 関数の呼び出しと結果の表示
var result = addNumbers(5, 10);
console.log(result); // 結果: 15ビルドイン関数
JavaScriptには初めから定義ｓれている関数があり、開発者が独自のコードを記述することなく使用することができます。
変数・定数
変数は値を格納するための識別子です。varletconstの3つのキーワードを使用して変数を宣言することができます。
定数は変数と同様に値を格納するための識別子であり、一度値を代入すると変更することができません。constキーワードを使用して定数を宣言することができます。
定数は再代入ができないため、一度値を設定した後に再度代入しようとするとエラーが発生します。一方、変数は値を再代入することができます。
演算子
値の計算や、比較などに用いる記号のことを演算子といいます。演算子はさまざまな種類があります。
算術演算子
算術演算を行うための演算子です。
| = | 変数に値を代入する |
| + | 加算 |
| – | 減算または負の値を表す |
| * | 乗算 |
| / | 除算 |
| % | 剰余:除算で余りを求める |
| ++ | 値を1増やす |
| — | 値を1減らす |
| y = x++ | yに値を代入してからxに1を加える |
| y = x– | yに値を代入してからxから1引く |
| y = ++x | xに1加えてからyに値を代入する |
| y = –x | xから1引いてからyに値を代入する |
比較演算子
値を比較して、真のときは値trueを、偽のときは值falseを返します。
| x == Y | xはyと等しい |
| x != Y | xとyとは等しくない |
| x<y | xはyより小さい |
| x <= y | xはyより小さいか等しい |
| x>y | xはyより大きい |
| x >= y | xはyより大きいか等しい |
| x === y | xはyと等しい(型の変換は行わない) |
| x !== y | xとyとは等しくない(型の変換は行わない) |
論理演算子
論理演算し、真のときはtrueの偽のときはfalseの値を返す。
| x && Y | AND(xかつy) |
| x || Y | OR(xまたはy) |
| x !y | NOT(xはyでない) |
文字列演算子
文字列の連結を行う演算子。
| ”文字列A” + “文字列B” | 「文字列A」と「文字列B」を連結する |
| a += “文字列B” | aの後に「文字列」を追加する |
ビット演算子
値をビット単位で演算する
| ~ | ビット論理否定(NOT) |
| & | ビット論理積(AND) |
| | | ビット論理和(OR) |
| ^ | ビット排他的論理和(XOR) |
| << | 左シフト |
| >> | 右シフト |
| >>> | 論理右シフト |
| <<= | ピットごとの左シフトの代入 |
| >>= | ビットごとの右シフトの代入 |
| >>>= | 論理右シフトの代入 |
括弧とその他
式や値を括る括弧やオブジェクトやメソッドを区切るピリオドなども演算子です。
| [] | 配列のリストを括る |
| () | 値や数式を括る |
| . | オブジェクト、ブロパティ、メソッドを区切る |
| , | コンマの左右の値や数式を評価する |
new演算子
オブジェクトの作成(インスタンスの作成)を行う演算子オブジェクト名 = newオブジェクトタイブ(値1,值2,..,値n)
this演算子
this(キーワード)の後に指定したオブジェクトの参照を行う演算子this.オブジェクト
条件演算子
条件式が真trueの時とfalseの時で違う処理を行う条件式 ? x : y
typeof()演算子
数値、文字列、変数、オブジェクトなどの型を調べる演算子
JavaScriptの命令文(ステートメント)
プログラムの動作を制御し、データを操作し、処理を実行するために使用されます。
繰り返し処理「for」
条件式が真trueの間、処理を繰り返し行います。for(初期值; 条件式; 増減式){処理}
for (var i = 0; i < 5; i++) {
console.log(i);
}プロパティ、メソッドの一覧「for…in」
「オブジェクト」内のプロパティ、メソッドを「変数」に代入しながら順番に取り出します。for(変数 inオブジェクト){処理}
var obj = {a: 1, b: 2, c: 3};
for (var key in obj) {
console.log(key + ": " + obj[key]);
}・出力結果
a: 1
b: 2
c: 3関数の設定「function」
一定の処理手続きを「関数」として設定することができます。「function」の後に「関数名」とその「処理」を記述し、ページが読み込まれたタイミングやイベントハンドラによってイベントが発生したタイミングで、「関数名」を呼ぶことにより「処理」が実行されます。function関数名([引数1],…,[引数n]){処理}
function greet(name) {
return "Hello, " + name + "!";
}
var result = greet("John");
console.log(result); // "Hello, John!" が表示される条件分岐「if」
「条件式」が真trueの時「処理1」を行い、それ以外の時は「処理2」を行います。return 値
var age = 20;
if (age >= 18) {
console.log("成人です");
} else {
console.log("未成年です");
}戻り値を返す「return」
命令文内で値を返す時に使用します。if(条件式){処理1}elsef{処理2}
function add(a, b) {
return a + b;
}
var result = add(3, 5);
console.log(result); // 8 が表示される