すなりんのシステム開発道具箱

発生したイベントの種類を求めるには、イベントオブジェクトの「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オブジェクトから次のメソッドを使うことで日付情報を読...

JavaScriptでは文字列を連結するには+記号を使いますが、文字列を引くメソッドはありません。JavaScriptで文字列の中にある特定の文字列を削除するには、split()メソッドを使います。split()メソッドのパラメータに削除したい文字を指定します。これにより、指定した文字で分割された結果が配列に入ります。この段階で指定した文字が無くなっていることになるので、後は「join()」メソッ...

入力された文字の先頭にある空白や、文字列末尾にある余計な余白を削除するには「trim()」メソッドを使います。実際には半角や全角空白だけでなく、タブ、改行コード、制御コードも削除対象となります。 <body><script> window.addEventListener("load" , function(){ var ele = document.getElementsByTagName("o...

英文字は大文字と小文字に変換することができます。小文字に変換する場合は、「toLowerCase()」メソッドを使います。大文字に変換する場合は、「toUpperCase()」メソッドを使います。なお、小文字を小さい大文字（スモールキャップス）にするメソッドは、JavaScriptには用意されていません。スモールキャップスを表現したい場合は、CSS（font-variant、small-caps）...

指定範囲の文字列を抜き出すには、「substring()」メソッドや「slice()」メソッド、「substr()」メソッドを使います。文字の範囲を指定して抜き出す場合はsubstring()メソッドかslice()メソッド、文字数を指定して抜き出す場合はsubstr()メソッドを使います。文字の位置は、下図に示すように、文字を挟むようになっており、パラメータには、この範囲で指定することになります...

文字列内にある特定の文字を区切り文字として分割し配列に格納するには、「split()」メソッドを使います。split()メソッドの最初のパラメータには、区切り文字を指定します。分割する際に、大量に配列データが生成されますが、個数を制限したい場合には２番目のパラメータに最大数を指定します。たとえば「split(","3)」であれば「,（カンマ）」を区切り文字として最大３つまで結果が返されます。また、...

文字列内から１文字を取り出すには「charAt()」メソッドを使います。パラメータには取り出す文字の位置を指定します。この文字の位置は、最初の文字が「0」、その次の文字が「1」となり、以後、１ずつ増加していきます。つまり、最初の文字を取り出す場合はcharAt(0)、2番目の文字を取り出す場合charAt(1)となります。なお、最後の文字をとりだすには、文字列の長さから1減らした値を指定します。c...

JavaScriptでは文字列の検索を行うには「indexOf()」メソッドや「lastIndexOf()」メソッドを使います。「indexOf()」メソッドは文字列の先頭から末尾に向かって検索し、「lastIndexOf()」メソッドは文字列の末尾から先頭に向かって探索します。該当する文字列が見つかった場合は、文字列内での先頭からの位置を返します（最初の文字位置は「0」）。文字列が見つからなかっ...

文字から文字コードに変換するには「charCodeAt()」メソッドを使います。パラメータには変換したい文字の位置を指定します。「0」が最初の文字を示し、以後、１ずつ増加します。文字コードから文字に変換するには、「String.fromCharCode()」メソッドを使います。パラメータには文字コードを指定します。String.fromCharCode()メソッドは変換したい文字コードの数だけ、「...

文字列の長さを求めるには、「length」プロパティを参照します。文字は日本語でも中国語でもアラビア語でも１文字を１としてカウントします。なお、サロゲートペアを利用した文字の場合は、１文字でも２が返されます。文字列にサロゲートペアを利用した文字が含まれる場合は、別途処理が必要になります。<body><script> window.addEventListener("load" , function...