最終更新日:
JavaScript言語についての簡単な紹介。
基本的な使い方
ファイル拡張子:
*.js
指数表現(1):
1.5e+20 → 1.5 x 1020
指数表現(2):
2 ** 3 → 23 = 8
エスケープシーケンス:
'シングルクォートの記号は\'です。'
算術演算子:
足し算 +
引き算 -
乗算 *
除算 /
除算の余り %
コメント:
//コメント
厳密なコンパイルチェック(厳密モード):
'use strict';
ブロックスコープ変数 const, let(ES6):
値を一度しか代入できない定数を宣言する → const
{}で囲まれた中でのみ使える変数を宣言する → let
論理演算子:
否定:!
論理和: ||
論理積: &&
比較演算子:
1 < 2 : 1は2より小さい (未満)
1 <= 2 : 1は2以下
1 > 2 : 1は2より大きい (false)
1 >= 2 : 1は2以上 (false)
1 === 2 : 1は2と等しい (false)
1 !== 2 : 1は2と異なる (true)
等しいかどうかは'='を3つ使う (C言語は'='を2つ)
制御文はC言語と同じ(if, for, while, do while, switch, break, continue):
if-else:
if (xxx) {
xxx;
} else if (xxx) {
xxx;
} else {
xxx;
}
Arrayオブジェクトの要素でループ(for...in文):
a = new Array(1,2,3);
for (i in a) {
document.write(a[i],"
");
}
値が無いを意味する: null
ループ中のラベル(break ラベル名):
label1:
for (var i = 1; i < 101; i++) {
document.write(i + ' ');
if (i == 50) break label1;
}
typeof演算子(型を調べる):
typeof 123; // number 数値型
typeof window; // object型
typeof null; // object型
typeof window; // object型
delete演算子(変数を削除して未使用状態にする):
a = 1;
delete a; // 削除に成功するとtrue、失敗するとfalseが返る
関数
関数の引数
オブジェクト以外 : 値渡し(関数内部の変更が関数呼び出し側に反映されない)
オブジェクト:参照渡し(関数内部の変更が関数呼び出し側に反映される)
無名関数(コールバック関数でよく使われる):
var func = function() { alert(); };
func(); // 関数呼び出し
無名関数(アロー関数)(ES6):
xxxButton.onclick = () => { xxx; };
組み込み関数
型の変換:
a = "255"; num = parseInt(a); // 文字列を整数に変換
a = "255.36"; num = parseFloat(a); // 文字列を浮動小数に変換
a = 255; str = a.toString(); // 整数を文字列に変換
NaN (非数:Not a Number)とInifinity(無限):
a = "あいう"; num = parseInt(a); // 数ではない文字列を整数に変換仕様とした場合NaNとなる
num = 100/0; // 正の数を0で割るとInifinityになる
配列
配列の初期化(1):
a = new Array(1, 2, 3);
配列の初期化(2):
a = [1, 2, 3];
配列の初期化(3):
a = new Array();
a[0] = 1;
a[1] = 2;
a[2] = 3;
配列の要素:数値、文字列、など異なる型の要素を代入できる
a = new Array();
a[0] = 1;
a[1] = "one";
a[2] = "いち";
連想配列:
a = new Array();
a['dog'] = '犬';
a['cat'] = '猫';
二次元配列:
a = new Array();
a['dog']['name'] = '犬';
a['dog']['food'] = '肉';
a['cat']['name'] = '猫';
a['cat']['food'] = '魚';
配列の要素を破棄する:
a = [1, 2, 3];
delete a[1]; // 要素a[1]を破棄する
delete a; // 配列aを破棄する (varで宣言されたオブジェクトは破棄できない)
配列の要素を破棄する:
a = [1, 2, 3];
delete a[1]; // 要素a[1]を破棄する
delete a; // 配列aを破棄する (varで宣言されたオブジェクトは破棄できない)
配列の要素を切り出す:
a = [1,2,3,4];
b = a.slice(1, 3); // 2番目から4番目の手前までを切り出す(番号は0から始まるので)
配列の末尾に要素を追加・削除:
a = [1,2];
a.push(3); // 配列の末尾に3を代入
b = a.pop(); // 配列aの末尾を取り出して、bに代入する(配列aのindexは後ろへずれる:a[0]=1,a[1]=2,a[2]=3となる)
配列の先頭に要素を追加・削除:
a = [2,3];
a.unshift(1); // 配列の先頭に1を代入
b = a.shift(); // 配列aの先頭を取り出して、bに代入する(配列aの残りのindexは前にずれる:a[0]=2,a[1]=3となる)
Stringオブジェクト
文字列の長さを取得する(length):全角文字も1文字として数える
str = "全角文字"";
len = str.length;
文字列から指定された文字を取り出す:
str = new String("にほんご");
c = str.charAt(1);
文字列を配列に分解する
str = "2017/12/31";
arr = str.split("/"); // '/'で文字列を配列に分解する。arr[0]="2017",arr[1]="12",arr[2]="31"となる。
文字列を検索する:
str = "にほんご";
idx = str.indexOf("ほ",1); // "ほ"という字をindex番号1から検索する
Dateオブジェクト
初期化
day = new Date(2017, 12-1, 31, 0, 0, 0); // 2017年12月31日0時0分0秒
日付と時刻の取得
now = new Date();
year = now.getFullYear(); // 西暦
month = now.getMonth() + 1; // 月(0から始まる)
date = now.getDate(); // 日
day = now.getDay(); // 曜日を取得(0:日、1:月、・・・)
hour = now.getHours(); // 時間
minute = now.getMinutes(); // 分
second = now.getSeconds(); // 秒
time = now.getTime(); // 1970/1/1 0:0:0からの時間をミリ秒で取得
正規表現
メタ文字
メタ文字 | 意味 |
---|---|
. | 任意の1文字 |
* | 0回以上の繰り返し |
+ | 1回以上の繰り返し |
? | 0回または1回の繰り返し |
^ | 先頭 |
$ | 末尾 |
| | 選択 |
() | 正規表現のグループ |
[] | 文字クラス |
{n} | n回以上の繰り返し |
{n,} | n回以上の繰り返し |
{n,m} | n回以上m回以下の繰り返し |
\ | メタ文字を文字として扱う |
文字クラス
特殊文字 | 文字クラスによる表記 | 意味 |
---|---|---|
\w | [0-9a-zA-Z] | 半角英数字と_(アンダーバー) |
\W | [^0-9a-zA-Z] | 半角英数字と_(アンダーバー)以外 |
\s | [\t\n\r\f] | 空白(半角スペース、タブ、改行) |
\S | [^\t\n\r\f] | 空白以外 |
\d | [0-9] | 数字 |
\D | [^0-9] | 数字以外 |
RegExpオブジェクト
str = "I like sushi.";
reg = new RegExp("[a-z]{5}"); // 小文字英字5文字のパターンのオブジェクト
mat = str.match(reg); // パターンマッチした文字列を含む配列を返す(mat[0] = "sushi", mat['index']=7, mat['input']="I like sushi.")
str = "I like sushi.";
reg = new RegExp("[A-Z]{5}", "i"); // iフラグを設定すると大文字小文字を区別しない
mat = str.match(reg);
str = "I like sushi and curry.";
reg = new RegExp("[a-z]{5}", "g"); // gフラグを設定するとマッチしたすべての文字列を取得する
mat = str.match(reg); // mat[0] = "sushi", mat[1] = "curry"
str = "I like sushi.";
rep = "curry";
reg = new RegExp("[a-z]{5}");
strr = str.replace(reg, rep); // マッチした文字列を置換する
strr = str.replace(reg, "$&"); // 置換文字列の中では特殊文字が使える
// $& : マッチした部分文字列
// $` : マッチした部分文字列の直前の文字列
// $' : マッチした部分文字列の直後の文字列
// $1, $2, ... : 1番目、2番目、・・・にマッチした文字列
// $$ : $記号
最長マッチ:「.+」 // 一番長い組み合わせが採用される
最短マッチ:「.+?」 // 一番短い組み合わせが採用される
サンプルコード(RegExp:特定の文字列の色付け):
sample-replace.html
ブラウザオブジェクト(Windowオブジェクト)
Windowオブジェクトはブラウザのウィンドウに相当する最上位のオブジェクト。
コンソールへのデバッグメッセージ表示:
window.console.debug('デバッグ'); // window.は省略可能
警告ダイアログ表示:
window.alert('警告メッセージ'); // window.は省略可能
確認ダイアログ表示(OK、キャンセル):
window.confirm('確認メッセージ'); // window.は省略可能
一定時間ごとに関数を呼び出す:
window.setInterval(処理関数, 間隔(ミリ秒)); // window.は省略可能
プロパティ | 意味 |
---|---|
document | Documentオブジェクトを参照 |
history | Historyオブジェクトを参照 |
location | Locationオブジェクトを参照 |
closed | ウィンドウが閉じているかどうか |
opener | 自分をオープンしたウィンドウを参照 |
innerWidth, outerWidth | ウィンドウの内側(,外側)の幅を参照 |
innerHeight, outerHeight | ウィンドウの内側(,外側)の高さを参照 |
status | ステータスバーの文字列を参照 |
defaultStatus | ステータスバーの標準文字列を参照 |
name | ウィンドウ名を参照 |
メソッド | 意味 |
---|---|
open() | 新しいウィンドウを開く |
close() | 新しいウィンドウを閉じる |
moveTo() | ウィンドウの位置を設定(絶対値) |
moveBy() | ウィンドウの位置を設定(相対) |
resizeTo() | ウィンドウのサイズを設定(絶対値) |
resizeBy() | ウィンドウのサイズを設定(相対) |
focus() | ウィンドウを前面に移動 |
blur() | ウィンドウを背面に移動 |
prompt() | 文字入力ダイアログを表示 |
setTimeout() | 一定時間ごとに繰り返すタイマーを設定 |
clearTimeout() | setTimeout()のタイマーを解除 |
clearInterval() | setInterval()のタイマーを解除 |
open()メソッドのオプションの値 | 意味 |
---|---|
localtion="1/0" | ロケーションバーの表示(1)、非表示(0) |
menubar="1/0" | メニューバーの表示(1)、非表示(0) |
scrollbars="1/0" | スクロールバーの表示(1)、非表示(0) |
status="1/0" | ステータスバーの表示(1)、非表示(0) |
toolbar="1/0" | ツールバーの表示(1)、非表示(0) |
resizable="1/0" | ウィンドウサイズの変更可否 |
width="数値" | ウィンドウの幅 |
height="数値" | ウィンドウの高さ |
ブラウザオブジェクト(Documentオブジェクト)
Documentオブジェクトは、ブラウザに表示される文字列、画像、フォーム、リンクなどに相当する。
キーが押されたときのコールバック関数を登録する:
document.body.onkeypress = function;
ボタンがクリックされたときのコールバック関数を登録する:
const xxxButton = document.getElementById('xxx-button');
xxxButton.onclick = function() { xxx; };
プロパティ | 意味 |
---|---|
body | body要素を参照 |
forms | Formオブジェクトの連想配列を参照 |
lastModified | 最終更新日を参照 |
domain | ドメインを参照 |
URL | URLを参照 |
location | URL(Locationオブジェクト)を参照 |
title | タイトルを参照 |
cookie | クッキーを参照 |
referrer | ジャンプ元のURLを参照 |
メソッド | 意味 |
---|---|
open() | 新しいドキュメントの出力yを開始する |
close() | ドキュメントの出力を終了する |
write() | 文字列を書き出す |
writeln() | 文字列を書き出して改行する |
ブラウザオブジェクト(Formオブジェクト)
Formオブジェクトは入力フォーム<form>に相当する
a = document.forms.length; // フォームの数を参照
b = document.forms[0].length; // forms[0]に含まれるエレメント数を参照
c = document.myform.length; // myformは<form>タグのname属性で指定したフォーム名
プロパティ | 意味 |
---|---|
elements | Elementオブジェクトの連想配列を参照 |
action | 送信先を参照 |
method | 送信方法を参照 |
encoding | エンコード方式を参照 |
length | フォームのエレメント(部品)数を参照 |
name | フォーム名を参照 |
target | <form>タグのtarget属性で指定したウィンドウの名前を参照 |
メソッド | 意味 |
---|---|
reset() | フォームの入力内容をリセットする |
submit() | フォームの入力内容を送信する |
ブラウザオブジェクト(Elementオブジェクト)
Elementオブジェクトは入力フォーム<form>の各部品(エレメント)<input>タグ、<textarea>タグ、<select>タグに相当する。
a = document.forms[0].elements[0].type; // elemenmts[0]のエレメントの種類
b = document.myform.mycheck.type; // myformは<form>タグのname属性で指定したフォーム名、mycheckは<input>タグのname属性で指定したエレメント名
プロパティ | 意味 |
---|---|
name | name属性で指定されたエレメント名を参照 |
type | エレメントの種類を参照: |
checked | チェックボックスやラジオボタンのチェック状態 |
selected | セレクトメニューの選択状態 |
selectedIndex | セレクトメニューの選択番号 |
value | エレメントの値 |
text | セレクトメニュー内の選択項目の文字列 |
options | セレクトメニュー内の選択項目の配列 |
メソッド | 意味 |
---|---|
click() | ボタンやチェックボックスをクリックする |
blur() | エレメントからフォーカスを外す |
focus() | エレメントにフォーカスを合わせる |
select() | テキストの文字を選択状態にする |
ブラウザオブジェクト(Select,Optionオブジェクト)
Selectオブジェクトは<select>タグ、Optionオブジェクトは<option>タグに相当する。
<select name="myselect">
<option value="C言語" selected>C言語</option>
<option value="C++言語">C++言語</option>
<option value="C#言語">C#言語</option>
</select>
a = document.myform.myselect.option[2].text; // myselectは<select>タグのname属性で指定したもの。optionsは0から始まる参照番号でOptionオブジェクトを指定
フォームの空欄をチェックするサンプルコード:
sample-null-form.html
ブラウザオブジェクト(Locationオブジェクト)
Locationオブジェクトを使うと、現在のページの情報を参照するだけでなく、ほかのページに移動できる。
プロパティ | 意味 |
---|---|
hash | 現在のページのURLの#以降を参照 |
href | 現在のページのURLを参照、指定URLへ移動 |
pathname | 現在のページのパス名を参照 |
host | 現在のページのホスト情報を参照 |
hostname | 現在のページのホスト名を参照 |
port | 現在のページのポート番号を参照 |
protocol | 現在のページのプロトコルを参照 |
search | CGIなどに渡される検索部分(?以降)を参照 |
メソッド | 意味 |
---|---|
reload() | ページを再読み込み |
replace() | 現在のページの履歴を残さず、指定したページへURLを変更 |
ブラウザオブジェクト(Eventオブジェクト)
プロパティ | 意味 |
---|---|
target | イベント発生元のオブジェクトを参照 |
type | イベントの種類を参照 |
key | 押されたキーを参照 |
button | 押されたマウスボタンの種類を参照 |
screenX, screenY | スクリーン上のマウスのx座標(,y座標)を参照 |
clientX, clientY | ページ上のマウスのx座標(, y座標)を参照(絶対値) |
pageX, pageY | ページ上のマウスのx座標(, y座標)を参照(相対値) |
ブラウザオブジェクト(Styleオブジェクト)
CSSのスタイルプロパティの設定や参照。style属性に対応。
特定の要素にスタイルを設定するには、DOMのdocument.getElementById()メソッドなどでHTML要素を取り出す。
プロパティ | 意味 |
---|---|
color | 文字の色を参照・設定 |
fontFamily | フォントファミリーを参照・設定 |
fontSize | フォントサイズを参照・設定 |
fontWeight | フォントの太さ |
fontStyle | フォントスタイル |
textDecoration | 文字の装飾 |
textTransform | 英文字の大文字・小文字 |
textAlign | 行揃え |
textIndent | 1行目の字下げ |
color | 文字の色 |
ブラウザオブジェクト(Historyオブジェクト)
ブラウザの「進む」「戻る」ボタンと同じ動作。Windowオブジェクトのhistoryプロパティから利用する。
プロパティ/メソッド | 意味 |
---|---|
length | 履歴数を取得 |
back(), forward() | 1つ前のページに戻る(,進む) |
go() | 指定した値の数だけ移動。-1を指定すると1つ戻る。 |
ブラウザオブジェクト(Imageオブジェクト)
imgタグで埋め込まれている画像に対応。Documentオブジェクトのimagesプロパティから連想配列として取得できる。
プロパティ | 意味 |
---|---|
src | 画像のURL |
complete | 画像の読み込みが完了したかどうか |
ブラウザオブジェクト(Anchorオブジェクト)
<a href="URL">で指定されるリンク。Documenmtオブジェクトのanchorsプロパティにより連想配列として取得できる。
プロパティ | 意味 |
---|---|
href | リンク先のURL |
text | アンカーのテキスト |
ブラウザオブジェクト(DOM)
DOM(Document Object Model)はHTMLやXMLのプロパティやメソッドを参照したり操作したりする方法を定義したもの。ツリー構造で管理しており、要素はノードという単位であらわされる。
プロパティ/メソッド | 意味 |
---|---|
document.getElementById() | 指定したid属性の要素を返す。取得した要素に対して再び呼ぶことで要素を絞り込むことができる。 |
document.getElementsByName() | 指定したname属性のすべての要素を配列として返す |
document.getElementsByTagName() | 指定したタグのすべての要素を配列として返す |
getAttribute(), setAttribute() | 要素の属性の値を取得(,設定) |
innerHTML | 要素の中身をHTMLとして取得 |
textContent | 要素の中の文字列を取得。「文字列」だけを取得するので文字列中のタグは無視される。 |
firstChild, lastChild | 基準要素の子要素のうち最初(,最後)の子要素を取得する |
previousSibling(, nextSibling) | 基準要素の兄弟要素の1つ前(,あと) |
parentNode | 基準要素の親要素 |
createElement() | プログラムの中で要素を作り出す |
appendChild() | プログラムで作成した要素を子要素として既存の子ノードの末尾に追加 |
insertBefore(e, b) | 要素bの前に要素eを挿入 |
replaceChild(e, r) | 要素rを要素eで置き換える。戻り値は置き換えられた要素r |
removeChild(e) | 要素eを削除する。戻り値は削除された要素e |
ブラウザオブジェクト(動的イベント)
イベントオブジェクトを自分で作って、フォーム部品などに送ることで、イベントを疑似的に発生させる。
var e = document.getElementById("disp");
// bubbles: バブリングする、cancelable:キャンセル可能、composed:シャドーDOM境界を越えられる(DOMの要素の集まりをコンポネントとして扱う)
var evt = new Event("click", {bubbles:false, cancelable:false, composed: false});
e.dispatchEvent(evt);
// イベント追加
e.addEventListener("click", newclick, false); // 3番目がtrueの場合(通常はfalse)はバブリングをせず、ノードの上位から順にハンドラを呼び出す
// イベント削除
e.removeEventListener("click", newclick, false);
サンプルコード:
sample-dynamic-event.html
ブラウザオブジェクト(その他のオブジェクト)
URIエンコード:
encodeURIComponent('あ');
URIデコード:
decodeURIComponent('%E3%81%82');
参考資料
- 高校生から始めるプログラミング(KADOKAWA)
- JavaScriptの絵本 第2版(アンク)