JavaScript

リセット時に処理するには「reset」イベント、送信時に処理するには「submit」イベントを捕捉する。リセットボタンがクリックされると、form要素でresetイベントが発生します。form要素のonresetプロパティにイベントハンドラを設定するか、addEventListener()メソッドを使ってイベントハンドラを設定します。送信ボタンがクリックされると、form要素でsubmitイベント...

DOMの構築が完了した際に処理を行うには「DOMContentLoaded」イベントを検知します。DOMContentLoadedイベントは、ページの読みこみが完了したことを示す「load」イベントよりも先に発生します。「DOMContentLoaded」はページ上のDOMの使用が可能になったことを示すので、このイベントが発生した後であれば、スクリプトでDOM操作を行うことができます。<body>...

ドラッグ時に処理を行うには「dragstart」「drag」「sragend」イベントを捕捉します。要素では、「ondragstart」のように「on」を付けたプロパティにイベントハンドラを設定できます。また、addEventListener()メソッドを使ってイベントリスナーを使って設定することもできます。また、「addEventListener()」メソッドを使ってイベントリスナーを使って設定...

カット・コピー・ペーストされた際に処理を行うには、copyイベントやpasteイベントを捕捉します。要素では、oncopyのように、「on」を付けたプロパティにイベントハンドラを設定できます。また、addEventListener()メソッドを使ってイベントリスナーで設定することもできます。イベント説明copyコピーしたときbeforecopyコピーする前cutカットしたときbeforecutカッ...

マウスの右ボタンが押されたときに処理するには、「contextmenu」イベントを捕捉します。イベントを割り当てる要素に対して、「oncontextmenu」プロパティにイベントハンドラを設定するか、addEventListener()メソッドを使って設定します。呼び出されるイベントハンドラには、イベントオブジェクトが渡されます。イベントオブジェクトにはイベントが発生した要素の情報も入っているため...

マウスのボタンが押されたときの処理を行うには、mousedownイベントを捕捉します。イベントを割り当てる要素に対して、onomousedownプロパティにイベントハンドラを設定するか、addEventListener()メソッドを使って設定します。呼び出されるイベントハンドラには、イベントオブジェクトが渡されます。イベントオブジェクトにはイベントが発生した要素の情報も入っているため、サンプルのよ...

マウスオーバー時に処理を行うには、「mouseover」イベントを捕捉します。イベントを割り当てる要素に対して、「onmouseover」プロパティにイベントハンドラを設定するか「addEventListener()」メソッドを使って設定します。呼び出されるイベントハンドラには、イベントオブジェクトが渡されます。イベントオブジェクトにはイベントが発生した要素の情報も入っているため、サンプルのように...

ブラウザにはフォーカスを扱うメソッドがいくつか用意されています。特定のテキストフィールドにフォーカスを移す場合は、「focus()」メソッドを使います。テキストフィールドの場合、入力済みの文字を選択状態にしたいのであれば、「focus()」メソッドを続けて「select()」メソッドを呼び出します。テキストフィールドなどにフォーカスされると、「focus」イベントが発生します。逆にフォーカスが外れ...

Firefox以外でマウスホイールの値を取得するには、「mousewheel」イベントを検知します。ホイールがどの程度、開店したのかは、イベントハンドラに渡されるイベントオブジェクトの「delta」プロパティに入ります。Firefoxでは、マウスホイールが回転すると、「DOMMouseScroll」イベントが発生します。ホィールの回転量は、イベントオブジェクトの「detail」プロパティに入ります...

発生したイベントの種類を求めるには、イベントオブジェクトの「type」プロパティを参照します。また、「target」プロパティにはイベントが発生した要素への参照が入っているため、要素名や要素そのおのを操作することもできます。なお、発生したイベントに応じて処理を振り分けることもできます。主なイベントイベント説明clickクリックdblclickダブルクリックmouseoverマウスオーバーmouse...

イベントが発生すると、イベントオブジェクトの各プロパティに座標値が格納されます。求める座標の種類に応じてプロパティが用意されています。座標値はすべてピクセル値で返されます。プロパティ説明clientX要素のX座標clientY要素のY座標pageXページ上のX座標（スクロール量が加算される）pageYページ上のY座標（スクロール量が加算される）screenXモニタ画面上でのX座標screenYモニ...

新規に属性を作成するには、「document.createAttribute()」メソッドを使います。パラメータには作成する属性名を文字列で指定します。「document.createAttribute()」は作成した属性をオブジェクトとして返します。属性に値を設定するにはnodevValueプロパティにアクセスします。属性を削除するには、対象となる要素の「removeAttribute()」メソ...

要素の属性値を取得する（読み出す）には、「getAttribute()」メソッドを使います。パラメータには取得したい属性名を指定します。属性に値を設定する場合は、「setAttribute()」メソッドを使います。最初のパラメータに属性名を文字列で指定し、2番目のパラメータに設定値を指定します。<body><script> window.addEventListener("load" , func...

子ノードを削除するには「removeChild()」メソッド、置換するには「replaceChild()」メソッドを使うメソッド説明removeChild(node)子ノードを削除するreplaceChild(node,pos)子ノードを置換する<body><script> window.addEventListener("load" , function(){ //削除ボタンにイベントを割り当て...

ノードを追加するには「appendChild()」メソッド、挿入するには「insertBefore()」メソッドを使う。メソッド説明appendChild(node)子ノードを追加するinsertBefore(node,pos)基準ノードの前に挿入する<body><script> window.addEventListener("load" , function(){ //ul要素を取得 var ...

前後のノードにアクセスするには「nextSibling」「previousSibling」プロパティ、親ノードにアクセスするには「parentNode」プロパティを使う。プロパティ説明nextSibling次のノードpreviousSibling前のノードparentNode親ノード<body><script> window.addEventListener("load" , function()...

DOMでテキストノードを生成するには、「document.createTextNode()」メソッドを使います。document.createTextNode()のパラメータには文字列を指定します。テキストノードを生成しただけではページ上に表示されません。ノードとして生成されるので、「appendChild()」メソッドを使って、ページ上にあるDOM要素に追加や挿入する必要があります。<body>...

プログラムが複雑化、肥大化すると、どこから呼び出されているか把握しづらくなります、関数がどこから呼び出されているか調べるためには関数内で「console.trace()」メソッドを使います。console.trace()メソッドを使うと呼び出している関数がスタックでデバックコンソールに表示されます。 <body><script> window.addEventListener("load" , f...

JavaScriptはオブジェクト指向言語であり、非常に多くのオブジェクトを扱います。標準で用意されているものでなく、プログラマがオブジェクトを作成することもできます。その際、オブジェクトのプロパティなどがどのような状態になっているか確認したい場合があります。確認するのに便利なのが「console.dir()」メソッドです。console.dir()メソッドのパラメータにオブジェクトを指定すると、...

現在のブラウザには、標準でデバッカが導入されています。デバッカにはデバック用のコンソールがあり、JavaScriptでは「console.log()」メソッドを使って出力することができます。パラメータは「,」（カンマ）で区切って列記することができますが、出力結果はブラウザによって若干異なる場合があります。その他のコンソール出力用メソッドメソッド説明console.info()情報として出力するco...

非同期通信でサーバーから受信したデータのMIMEタイプを上書きするには、「overrideMimeType()」メソッドを使います。これによって、XMLデータや文字コードによって文字化けしてしまう現象を解消することができます。<body><script> window.addEventListener("load" , function(){ //読み込みボタンのイベント var ele = do...

リクエストヘッダーを設定するには、「setRequestHeader()」メソッドを使います。最初のパラメータにヘッダー名、２番目のパラメータに値を設定します。<body><script> window.addEventListener("load" , function(){ //読み込みボタンのイベント var ele = document.getElementsByTagName("outp...

テキストデータは、データ受信後に「responseText」プロパティを参照します。テキストデータに限らず、HTMLファイルでもJSON形式のファイルでも読み込むことができます。XMLファイルの場合、「responseXML」プロパティにXMLデータが入ります。XMLDOMになるため、「getElementsByTagName()」メソッドや「nodeValue」プロパティを使ってノードにアクセス...

IE9以降及びFirefox、Safari、Google Chrome、Operaなどでは、「XMLHttpRequest」オブジェクトが非同期通信を行うオブジェクトになっています。また、readyStateプロパティとstatusプロパティを利用して通信状態に応じて処理を行うこともできます。readyStateプロパティには、次の0か4までの数値が入ります。値説明0未初期化1接続開始2リクエスト...

セレクトメニューで選択された項目に関して、いくつかの情報を取得することができます。まず、選択された番号に関して、セレクトメニューオブジェクトの「selectedIndex」プロパティに入っていきます。選択された項目の値は、セレクトメニューオブジェクトの「value」プロパティに入っています。選択された値ではなく、「options」要素で指定されている文字を取得するには、選択された「options配...

テキストフィールドへの入力を禁止するには、「disabled」プロパティに「true」を設定します。falseを設定すると、入力が可能な状態になります。disabledプロパティはテキストフィールドだけでなく、ラジオボタンやチェックボックス、セレクトメニューに対しても有効です。なお、form要素にはdisabledプロパティではないため、一括してすべての要素の入力を禁止にすることはできません。<b...

テキストフィールドに入力された内容を読みだすには、要素の「value」プロパティにアクセスします。テキストフィールドに数値を入れた場合でも「value」プロパティで読みだすと数値型ではなく文字列型として返されます。数値型として読みだすには「valueAsNumber」プロパティを参照します。ただし、「valueAsNumber」プロパティでアクセスできるのは、「Input」要素の「type」属性に...

入力フォームに様々なエレメントがあります。ページが読み込まれた際に入力エラーで、エラー発生場所のエレメントにフォーカスしたい場合があります。特定のエレメントにフォーカスするには「focus()」メソッドを使います。フォーカスを外したい場合には、「blur()」メソッドを使います。なお、テキストフィールドの場合、focus()メソッド実行後に「select()」メソッドを実行すると、入力済みの文字を...

ラジオボタンとチェックボックスの選択状態を調べるには、要素のcheckedプロパティを参照します。選択されている場合は「true」、選択されていない場合は「false」になります。「checked」プロパティは読み出しだけでなく、設定も可能です。また、フォーム要素でチェックされているラジオボタン／チェックボタンだけを取得したい場合、「document.querySelectorAll("input...

フォーム及びフォーム要素にアクセスする方法には様々あります。次のような方法で要素にアクセスすることができます。document.formsdocument.フォーム名document.forms.elementsdocument.forms.elements //ラジオボタンの場合document.forms//〇はHTMLの要素〇.getElementsById(ID名)〇.getElement...

画像を入れ替えるには、Imageオブジェクトのsrcプロパティに画像のURLを指定します。その際、入れ替える画像データが読み込まれていないと、瞬時に切り替わりません。低速な回線の場合は、次のようにあらかじめ、画像を読み込んでおく方法もあります。( new Image() ).src = "画像のURL";なお、ロールオーバーによる単純な画像の入れ替えであれば、JavaScriptを利用するよりもC...

Imageオブジェクトでは、画像が読み込まれると、「load」イベントが発生します。Imageオブジェクトには「onload」プロパティがあり、イベントハンドラを設定しておくことで、画像読み込み完了時に処理することができます。Canvasに画像を描画する場合は、画像データが読み込まれている必要があります。 <body><script> window.addEventListener("load" ...

Imageオブジェクトのwidthプロパティとheightプロパティは、現在、表示されている画像のサイズを示しています。表示されている画像サイズではなく元々の画像サイズを取得するには、Imageオブジェクトの「naturalWidthプロパティ」と「naturalHeightプロパティ」を参照します。「naturalWidthプロパティ」は横幅、「naturalHeightプロパティ」は縦幅で読み...

Imageオブジェクト、または、ページ上に表示されているimg要素のサイズは、widthプロパティとheightプロパティで取得と設定ができます。widthプロパティは横幅、heightプロパティは縦幅となり、widthプロパティとheightプロパティで取得・設定する値の単位はピクセルとなります。widthプロパティ、heightプロパティだけでなく、CSSのwidthプロパティ、heightプ...

画像を生成する際には、「new Image()」とします。パラメータには、生成する画像の横幅と縦幅を指定します（単位はピクセル）。省略した場合はオリジナル画像の幅が利用されます。画像の幅や高さは生成されたImageオブジェクトのwidthプロパティやheightプロパティを使って後から設定することも可能です。また、表示する画像は「src」プロパティにURLを代入します。注意点としては画像は非同期で...

クッキーの内容を読みだすには、「document.cookie」プロパティにアクセスします。読み出される内容は「キー＝内容」の文字列になり、同一ドメイン（もしくはパス）のデータになります。クッキーに書き込むためには、「キー名=内容;expires=期限」を「document.cookie」プロパティに書き込みます。複数のキーと内容を保存するには、「:」（セミコロン）で区切って列挙します。また、保存...

データ保持できるという点では、クッキーは古くから利用されています。このクッキーに書き込みができるかどうかは、「navigator」オブジェクトの「cookieEnabled」プロパティを参照します。tureであれば書き込みが可能、falseであれば書き込みはできないことになります。データを保存する際に、クッキーに制限があります。より多くのデータを保存するような場合は、ローカルストレージを利用するの...

一定時間ごとに処理を行うには「setInterval()」メソッドを使います。setInterval()メソッドの最初のパラメータに実行する処理（文字列で命令を囲むか、無名関数で処理を記述する）、２番目のパラメータには定期的に処理するミリ秒を指定します。ただし、２番目に指定したミリ秒ごとに必ずしも処理が実行される保証はありません。setInterval()でタイマーを設定すると、戻り値としてタイマ...

指定時間後に処理を行うには、「setTimeout()」メソッドを使います。setTimeout()メソッドの最初のパラメータに実行する処理（文字列で命令を囲むか、無名関数で処理を記述する）、2番目のパラメータにはミリ秒を指定します。ただし、２番目に指定したミリ秒後に必ずしも処理が実行される保証はありません。環境によっては、指定したミリ秒より後に実行されることがあります（指定したミリ秒より前実行さ...

ページ内容を印刷するには「paint()」メソッドを使います。ウィンドウだけでなく、フレームを指定して印刷することもできます。また、iOSでは、Air Printに対応している必要があります。Android2~4では、「print()」メソッドを実行しても何も起こりません。印刷内容を変更する場合には、「beforeprint」イベントと「afterprint」イベントを利用します。イベントハンドラ...

バイナリデータなどをBase64データ（64種類の文字列）として変換（エンコード）する場合には、「btoa()」メソッドを使います。パラメータに指定されたデータは、Base64形式で示される文字列に変換されます。Base64エンコードされた文字列を元に復元（デコード）するには、「atob()」メソッドを使います。Base64で使用される文字は、次の表のようになります。また、不足ビット数を埋める文字...

日付情報をJSON形式に変換するには「toJSON()」メソッドを使います。toJSON()メソッドを使うと、次の形式に変換されます。たとえば、「2012年2月8日14時7分3分314秒」であれば、「2012-02-08T14:07:03.314Z」yyyy-mm-ddTHH:MM:SS.NNNZ記号説明yyyy西暦年4桁mm月dd日にちHH時（24時間制）MM分SS秒NNNミリ秒T以後の文字が時...

JavaScriptでは、生成した「Date」オブジェクトに用意されたメソッドを使うことで世界協定時の時刻を生成することができます。世界協定時の時刻を設定できるメソッドは、次のとおりです。メソッド説明setUTCHours()時setUTCMinutes()分setUTCSeconds()秒setUTCMilliseconds()ミリ秒パラメータは、範囲を超えてた場合でもエラーにはなりません。たと...

JavaScriptでは、生成した「Date」オブジェクトに用意されたメソッドを使うことで協定世界時の日付を生成することができます。協定世界時の日付を設定できるメソッドは次のとおりです。メソッド説明setUTCFullYear()西暦年4桁setUTCMonth()月。0が1月、11であれば12月を示すsetUTCDate()日にちパラメータは、範囲を超えてもエラーにはなりません。たとえばsetU...

JavaScriptでは、生成した「Date」オブジェクトに用意されたメソッドを使うことで時刻を生成することができます。時刻を設定できるメソッドは、次のとおりです。メソッド説明setHours()時setMinutes()分setSeconds()秒setMilliseconds()ミリ秒パラメータは、範囲を超えてた場合でもエラーにはなりません。たとえば、「setMinutes(90)」とすると、...

JavaScriptでは、生成した「Date」オブジェクトに用意されたメソッドを使うことで日付を生成することができます。日付を設定できるメソッドは次のとおりです。メソッド説明setFullYear()西暦年4桁setMonth()月。0が1月、11であれば12月を示すsetDate()日にちパラメータは、範囲を超えてもエラーにはなりません。たとえばsetMonth(12)とすると、次の年の1月に設...

JavaScriptで世界協定時の時刻を読みだすには「Date」オブジェクトを生成します。生成時点での世界協定時の時刻を取得したい場合はパラメータに何も指定せず、Dateオブジェクトを生成します。Dateオブジェクトの協定世界時の時刻に関するメソッドは次のとおりです。日本の場合、協定世界時よりも9時間進んだ時刻になります。Dateオブジェクトの時刻に関するメソッドメソッド説明getUTCHours...

JavaScriptで世界協定時の日付情報を読みだすには「Date」オブジェクトを生成します。生成時点での世界協定時の日付を取得したい場合はパラメータに何も指定せず、Dateオブジェクトを生成します。特定の協定世界時の日付の情報を得たい場合には、Dateオブジェクト生成時に日付を示す文字列を指定するか「setUTCFullYear()」などのメソッドを使って設定します。生成した「Date」オブジェ...

JavaScriptで時刻を読みだすには「Date」オブジェクトを生成します。生成時点の時刻を取得したい場合はパラメータに何も指定せず、Dateオブジェクトを生成します。時刻などのリアルタイムに時刻を表示するような場合、その都度、「new Date()」としてオブジェクトを生成し、そのオブジェクトから時刻を読みだす必要があります。Dateオブジェクトの時刻に関するメソッドメソッド説明getHour...

JavaScriptで日付情報を読みだすには、「Date」オブジェクトを生成します。生成時点の日付を取得したい場合は、パラメータに何も指定せず、Dateオブジェクトを生成します。特定の日付の情報を得たい場合にはDateオブジェクト生成時に日付を示す文字列を指定するか、「setFullYear()」などのメソッドを使って設定します。生成したDateオブジェクトから次のメソッドを使うことで日付情報を読...