JavaScript JavaScript ノードを追加・挿入する
ノードを追加するには「appendChild()」メソッド、挿入するには「insertBefore()」メソッドを使う。メソッド説明appendChild(node)子ノードを追加するinsertBefore(node,pos)基準ノードの前に挿入する<body><script> window.addEventListener("load" , function(){ //ul要素を取得 var ...
すなりん
JavaScript 
JavaScript JavaScript 前後のノードや親ノードにアクセスする
前後のノードにアクセスするには「nextSibling」「previousSibling」プロパティ、親ノードにアクセスするには「parentNode」プロパティを使う。プロパティ説明nextSibling次のノードpreviousSibling前のノードparentNode親ノード<body><script> window.addEventListener("load" , function()...
JavaScript JavaScript テキストノードを生成する
DOMでテキストノードを生成するには、「document.createTextNode()」メソッドを使います。document.createTextNode()のパラメータには文字列を指定します。テキストノードを生成しただけではページ上に表示されません。ノードとして生成されるので、「appendChild()」メソッドを使って、ページ上にあるDOM要素に追加や挿入する必要があります。<body>...
JavaScript JavaScript 呼び出し元の関数を把握する
プログラムが複雑化、肥大化すると、どこから呼び出されているか把握しづらくなります、関数がどこから呼び出されているか調べるためには関数内で「console.trace()」メソッドを使います。console.trace()メソッドを使うと呼び出している関数がスタックでデバックコンソールに表示されます。 <body><script> window.addEventListener("load" , f...
JavaScript JavaScript デバックコンソールにオブジェクトの内容を出力する
JavaScriptはオブジェクト指向言語であり、非常に多くのオブジェクトを扱います。標準で用意されているものでなく、プログラマがオブジェクトを作成することもできます。その際、オブジェクトのプロパティなどがどのような状態になっているか確認したい場合があります。確認するのに便利なのが「console.dir()」メソッドです。console.dir()メソッドのパラメータにオブジェクトを指定すると、...
JavaScript JavaScript デバックコンソールに出力する
現在のブラウザには、標準でデバッカが導入されています。デバッカにはデバック用のコンソールがあり、JavaScriptでは「console.log()」メソッドを使って出力することができます。パラメータは「,」（カンマ）で区切って列記することができますが、出力結果はブラウザによって若干異なる場合があります。その他のコンソール出力用メソッドメソッド説明console.info()情報として出力するco...
JavaScript JavaScript MIMEタイプを設定する
非同期通信でサーバーから受信したデータのMIMEタイプを上書きするには、「overrideMimeType()」メソッドを使います。これによって、XMLデータや文字コードによって文字化けしてしまう現象を解消することができます。<body><script> window.addEventListener("load" , function(){ //読み込みボタンのイベント var ele = do...
JavaScript JavaScript リクエストヘッダーを設定する
リクエストヘッダーを設定するには、「setRequestHeader()」メソッドを使います。最初のパラメータにヘッダー名、２番目のパラメータに値を設定します。<body><script> window.addEventListener("load" , function(){ //読み込みボタンのイベント var ele = document.getElementsByTagName("outp...
JavaScript JavaScript サーバーからテキストデータやXMLデータを受信する
テキストデータは、データ受信後に「responseText」プロパティを参照します。テキストデータに限らず、HTMLファイルでもJSON形式のファイルでも読み込むことができます。XMLファイルの場合、「responseXML」プロパティにXMLデータが入ります。XMLDOMになるため、「getElementsByTagName()」メソッドや「nodeValue」プロパティを使ってノードにアクセス...
JavaScript JavaScript 非同期通信オブジェクトを生成する
IE9以降及びFirefox、Safari、Google Chrome、Operaなどでは、「XMLHttpRequest」オブジェクトが非同期通信を行うオブジェクトになっています。また、readyStateプロパティとstatusプロパティを利用して通信状態に応じて処理を行うこともできます。readyStateプロパティには、次の0か4までの数値が入ります。値説明0未初期化1接続開始2リクエスト...
JavaScript JavaScript セレクトメニューで選択された項目を取得する
セレクトメニューで選択された項目に関して、いくつかの情報を取得することができます。まず、選択された番号に関して、セレクトメニューオブジェクトの「selectedIndex」プロパティに入っていきます。選択された項目の値は、セレクトメニューオブジェクトの「value」プロパティに入っています。選択された値ではなく、「options」要素で指定されている文字を取得するには、選択された「options配...
JavaScript JavaScript フォームへの入力を禁止・許可する
テキストフィールドへの入力を禁止するには、「disabled」プロパティに「true」を設定します。falseを設定すると、入力が可能な状態になります。disabledプロパティはテキストフィールドだけでなく、ラジオボタンやチェックボックス、セレクトメニューに対しても有効です。なお、form要素にはdisabledプロパティではないため、一括してすべての要素の入力を禁止にすることはできません。<b...
JavaScript JavaScript フォームの内容を読みだす
テキストフィールドに入力された内容を読みだすには、要素の「value」プロパティにアクセスします。テキストフィールドに数値を入れた場合でも「value」プロパティで読みだすと数値型ではなく文字列型として返されます。数値型として読みだすには「valueAsNumber」プロパティを参照します。ただし、「valueAsNumber」プロパティでアクセスできるのは、「Input」要素の「type」属性に...
JavaScript JavaScript フォーム要素のフォーカスを設定する
入力フォームに様々なエレメントがあります。ページが読み込まれた際に入力エラーで、エラー発生場所のエレメントにフォーカスしたい場合があります。特定のエレメントにフォーカスするには「focus()」メソッドを使います。フォーカスを外したい場合には、「blur()」メソッドを使います。なお、テキストフィールドの場合、focus()メソッド実行後に「select()」メソッドを実行すると、入力済みの文字を...
JavaScript JavaScript ラジオボタン／チェックボックスの状態を設定・取得する
ラジオボタンとチェックボックスの選択状態を調べるには、要素のcheckedプロパティを参照します。選択されている場合は「true」、選択されていない場合は「false」になります。「checked」プロパティは読み出しだけでなく、設定も可能です。また、フォーム要素でチェックされているラジオボタン／チェックボタンだけを取得したい場合、「document.querySelectorAll("input...
JavaScript JavaScript フォーム要素にアクセスする
フォーム及びフォーム要素にアクセスする方法には様々あります。次のような方法で要素にアクセスすることができます。document.formsdocument.フォーム名document.forms.elementsdocument.forms.elements //ラジオボタンの場合document.forms//〇はHTMLの要素〇.getElementsById(ID名)〇.getElement...
JavaScript JavaScript 画像データを入れ替える
画像を入れ替えるには、Imageオブジェクトのsrcプロパティに画像のURLを指定します。その際、入れ替える画像データが読み込まれていないと、瞬時に切り替わりません。低速な回線の場合は、次のようにあらかじめ、画像を読み込んでおく方法もあります。( new Image() ).src = "画像のURL";なお、ロールオーバーによる単純な画像の入れ替えであれば、JavaScriptを利用するよりもC...
JavaScript JavaScript 画像データが読み込まれた場合に処理する
Imageオブジェクトでは、画像が読み込まれると、「load」イベントが発生します。Imageオブジェクトには「onload」プロパティがあり、イベントハンドラを設定しておくことで、画像読み込み完了時に処理することができます。Canvasに画像を描画する場合は、画像データが読み込まれている必要があります。 <body><script> window.addEventListener("load" ...
JavaScript JavaScript 画像のオリジナルの幅を取得する
Imageオブジェクトのwidthプロパティとheightプロパティは、現在、表示されている画像のサイズを示しています。表示されている画像サイズではなく元々の画像サイズを取得するには、Imageオブジェクトの「naturalWidthプロパティ」と「naturalHeightプロパティ」を参照します。「naturalWidthプロパティ」は横幅、「naturalHeightプロパティ」は縦幅で読み...
JavaScript JavaScript 画像の幅を設定・取得する
Imageオブジェクト、または、ページ上に表示されているimg要素のサイズは、widthプロパティとheightプロパティで取得と設定ができます。widthプロパティは横幅、heightプロパティは縦幅となり、widthプロパティとheightプロパティで取得・設定する値の単位はピクセルとなります。widthプロパティ、heightプロパティだけでなく、CSSのwidthプロパティ、heightプ...
JavaScript JavaScript imageオブジェクトを生成する
画像を生成する際には、「new Image()」とします。パラメータには、生成する画像の横幅と縦幅を指定します（単位はピクセル）。省略した場合はオリジナル画像の幅が利用されます。画像の幅や高さは生成されたImageオブジェクトのwidthプロパティやheightプロパティを使って後から設定することも可能です。また、表示する画像は「src」プロパティにURLを代入します。注意点としては画像は非同期で...
JavaScript JavaScript クッキーの読み書きを行う
クッキーの内容を読みだすには、「document.cookie」プロパティにアクセスします。読み出される内容は「キー＝内容」の文字列になり、同一ドメイン（もしくはパス）のデータになります。クッキーに書き込むためには、「キー名=内容;expires=期限」を「document.cookie」プロパティに書き込みます。複数のキーと内容を保存するには、「:」（セミコロン）で区切って列挙します。また、保存...
JavaScript JavaScript クッキーに書き込みが可能かどうか調べる
データ保持できるという点では、クッキーは古くから利用されています。このクッキーに書き込みができるかどうかは、「navigator」オブジェクトの「cookieEnabled」プロパティを参照します。tureであれば書き込みが可能、falseであれば書き込みはできないことになります。データを保存する際に、クッキーに制限があります。より多くのデータを保存するような場合は、ローカルストレージを利用するの...
JavaScript JavaScript インターバルタイマーを設定・解除する
一定時間ごとに処理を行うには「setInterval()」メソッドを使います。setInterval()メソッドの最初のパラメータに実行する処理（文字列で命令を囲むか、無名関数で処理を記述する）、２番目のパラメータには定期的に処理するミリ秒を指定します。ただし、２番目に指定したミリ秒ごとに必ずしも処理が実行される保証はありません。setInterval()でタイマーを設定すると、戻り値としてタイマ...
JavaScript JavaScript タイマーを設定・解除する
指定時間後に処理を行うには、「setTimeout()」メソッドを使います。setTimeout()メソッドの最初のパラメータに実行する処理（文字列で命令を囲むか、無名関数で処理を記述する）、2番目のパラメータにはミリ秒を指定します。ただし、２番目に指定したミリ秒後に必ずしも処理が実行される保証はありません。環境によっては、指定したミリ秒より後に実行されることがあります（指定したミリ秒より前実行さ...
JavaScript JavaScript 印刷する
ページ内容を印刷するには「paint()」メソッドを使います。ウィンドウだけでなく、フレームを指定して印刷することもできます。また、iOSでは、Air Printに対応している必要があります。Android2~4では、「print()」メソッドを実行しても何も起こりません。印刷内容を変更する場合には、「beforeprint」イベントと「afterprint」イベントを利用します。イベントハンドラ...
JavaScript JavaScript Base64エンコード／デコードする
バイナリデータなどをBase64データ（64種類の文字列）として変換（エンコード）する場合には、「btoa()」メソッドを使います。パラメータに指定されたデータは、Base64形式で示される文字列に変換されます。Base64エンコードされた文字列を元に復元（デコード）するには、「atob()」メソッドを使います。Base64で使用される文字は、次の表のようになります。また、不足ビット数を埋める文字...
JavaScript JavaScript 日付情報をJSON形式に変換する
日付情報を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 JavaScript 世界協定時の時刻を設定する
JavaScriptでは、生成した「Date」オブジェクトに用意されたメソッドを使うことで世界協定時の時刻を生成することができます。世界協定時の時刻を設定できるメソッドは、次のとおりです。メソッド説明setUTCHours()時setUTCMinutes()分setUTCSeconds()秒setUTCMilliseconds()ミリ秒パラメータは、範囲を超えてた場合でもエラーにはなりません。たと...
JavaScript JavaScript 協定世界時の日付を設定する
JavaScriptでは、生成した「Date」オブジェクトに用意されたメソッドを使うことで協定世界時の日付を生成することができます。協定世界時の日付を設定できるメソッドは次のとおりです。メソッド説明setUTCFullYear()西暦年4桁setUTCMonth()月。0が1月、11であれば12月を示すsetUTCDate()日にちパラメータは、範囲を超えてもエラーにはなりません。たとえばsetU...
JavaScript JavaScript 時刻を設定する
JavaScriptでは、生成した「Date」オブジェクトに用意されたメソッドを使うことで時刻を生成することができます。時刻を設定できるメソッドは、次のとおりです。メソッド説明setHours()時setMinutes()分setSeconds()秒setMilliseconds()ミリ秒パラメータは、範囲を超えてた場合でもエラーにはなりません。たとえば、「setMinutes(90)」とすると、...
JavaScript JavaScript 日付を設定する
JavaScriptでは、生成した「Date」オブジェクトに用意されたメソッドを使うことで日付を生成することができます。日付を設定できるメソッドは次のとおりです。メソッド説明setFullYear()西暦年4桁setMonth()月。0が1月、11であれば12月を示すsetDate()日にちパラメータは、範囲を超えてもエラーにはなりません。たとえばsetMonth(12)とすると、次の年の1月に設...
JavaScript JavaScript 協定世界時の時刻を求める
JavaScriptで世界協定時の時刻を読みだすには「Date」オブジェクトを生成します。生成時点での世界協定時の時刻を取得したい場合はパラメータに何も指定せず、Dateオブジェクトを生成します。Dateオブジェクトの協定世界時の時刻に関するメソッドは次のとおりです。日本の場合、協定世界時よりも9時間進んだ時刻になります。Dateオブジェクトの時刻に関するメソッドメソッド説明getUTCHours...
JavaScript JavaScript 協定世界時の日付を求める
JavaScriptで世界協定時の日付情報を読みだすには「Date」オブジェクトを生成します。生成時点での世界協定時の日付を取得したい場合はパラメータに何も指定せず、Dateオブジェクトを生成します。特定の協定世界時の日付の情報を得たい場合には、Dateオブジェクト生成時に日付を示す文字列を指定するか「setUTCFullYear()」などのメソッドを使って設定します。生成した「Date」オブジェ...
JavaScript JavaScript 時刻を求める（h時m分s.ms秒）
JavaScriptで時刻を読みだすには「Date」オブジェクトを生成します。生成時点の時刻を取得したい場合はパラメータに何も指定せず、Dateオブジェクトを生成します。時刻などのリアルタイムに時刻を表示するような場合、その都度、「new Date()」としてオブジェクトを生成し、そのオブジェクトから時刻を読みだす必要があります。Dateオブジェクトの時刻に関するメソッドメソッド説明getHour...
JavaScript JavaScript 日付を求める（yyyy年mm月dd日）
JavaScriptで日付情報を読みだすには、「Date」オブジェクトを生成します。生成時点の日付を取得したい場合は、パラメータに何も指定せず、Dateオブジェクトを生成します。特定の日付の情報を得たい場合にはDateオブジェクト生成時に日付を示す文字列を指定するか、「setFullYear()」などのメソッドを使って設定します。生成したDateオブジェクトから次のメソッドを使うことで日付情報を読...
JavaScript JavaScript 特定の文字列を削除する
JavaScriptでは文字列を連結するには+記号を使いますが、文字列を引くメソッドはありません。JavaScriptで文字列の中にある特定の文字列を削除するには、split()メソッドを使います。split()メソッドのパラメータに削除したい文字を指定します。これにより、指定した文字で分割された結果が配列に入ります。この段階で指定した文字が無くなっていることになるので、後は「join()」メソッ...
JavaScript JavaScript 文字列の前後にある空白を削除する
入力された文字の先頭にある空白や、文字列末尾にある余計な余白を削除するには「trim()」メソッドを使います。実際には半角や全角空白だけでなく、タブ、改行コード、制御コードも削除対象となります。 <body><script> window.addEventListener("load" , function(){ var ele = document.getElementsByTagName("o...
JavaScript JavaScript 英文字の大文字／小文字に変換する
英文字は大文字と小文字に変換することができます。小文字に変換する場合は、「toLowerCase()」メソッドを使います。大文字に変換する場合は、「toUpperCase()」メソッドを使います。なお、小文字を小さい大文字（スモールキャップス）にするメソッドは、JavaScriptには用意されていません。スモールキャップスを表現したい場合は、CSS（font-variant、small-caps）...
JavaScript JavaScript 指定範囲の文字を抜き出す
指定範囲の文字列を抜き出すには、「substring()」メソッドや「slice()」メソッド、「substr()」メソッドを使います。文字の範囲を指定して抜き出す場合はsubstring()メソッドかslice()メソッド、文字数を指定して抜き出す場合はsubstr()メソッドを使います。文字の位置は、下図に示すように、文字を挟むようになっており、パラメータには、この範囲で指定することになります...
JavaScript JavaScript 文字列を指定文字で分割する
文字列内にある特定の文字を区切り文字として分割し配列に格納するには、「split()」メソッドを使います。split()メソッドの最初のパラメータには、区切り文字を指定します。分割する際に、大量に配列データが生成されますが、個数を制限したい場合には２番目のパラメータに最大数を指定します。たとえば「split(","3)」であれば「,（カンマ）」を区切り文字として最大３つまで結果が返されます。また、...
JavaScript JavaScript 1文字を取り出す
文字列内から１文字を取り出すには「charAt()」メソッドを使います。パラメータには取り出す文字の位置を指定します。この文字の位置は、最初の文字が「0」、その次の文字が「1」となり、以後、１ずつ増加していきます。つまり、最初の文字を取り出す場合はcharAt(0)、2番目の文字を取り出す場合charAt(1)となります。なお、最後の文字をとりだすには、文字列の長さから1減らした値を指定します。c...
JavaScript JavaScript 文字列を検索する
JavaScriptでは文字列の検索を行うには「indexOf()」メソッドや「lastIndexOf()」メソッドを使います。「indexOf()」メソッドは文字列の先頭から末尾に向かって検索し、「lastIndexOf()」メソッドは文字列の末尾から先頭に向かって探索します。該当する文字列が見つかった場合は、文字列内での先頭からの位置を返します（最初の文字位置は「0」）。文字列が見つからなかっ...
JavaScript JavaScript 文字と文字コードを変換する
文字から文字コードに変換するには「charCodeAt()」メソッドを使います。パラメータには変換したい文字の位置を指定します。「0」が最初の文字を示し、以後、１ずつ増加します。文字コードから文字に変換するには、「String.fromCharCode()」メソッドを使います。パラメータには文字コードを指定します。String.fromCharCode()メソッドは変換したい文字コードの数だけ、「...
JavaScript JavaScript 文字列の長さを求める
文字列の長さを求めるには、「length」プロパティを参照します。文字は日本語でも中国語でもアラビア語でも１文字を１としてカウントします。なお、サロゲートペアを利用した文字の場合は、１文字でも２が返されます。文字列にサロゲートペアを利用した文字が含まれる場合は、別途処理が必要になります。<body><script> window.addEventListener("load" , function...
JavaScript JavaScript Stringオブジェクトの生成と文字列の連結
JavaScriptでStringオブジェクトのを使って文字型のオブジェクトを生成することができます。文字列型のオブジェクトを生成するには「new String()」とします。Stringオブジェクトを生成する際にパラメータを指定すると、指定されたパラメータが文字列として生成されます。また「new String()」として生成しなくても「"(ダブルクォーテーション)」や「'（シングルクォーテーショ...
JavaScript JavaScript 小数点演算誤差を減らす
JavaScriptで小数演算を行うと、誤差が発生して期待する精度が得られない場合があります。ここでは、演算誤差を減らす方法を記載します。JavaScriptに限らず多くのコンピュータ言語やCPUでは、浮動小数演算を行うと誤差が発生します。これは小数が2の-n乗の和で表現されるためで、値によっては表現することができないためです。これを軽減させるには、小数値を10倍するなどしてゲタをはかせます。整数...
JavaScript JavaScript 使用可能な最大値／最小値を取得する
扱える値の最大値を取得するには、Number.MAX_VALUE、最小値を取得するにはNumber.MIN_VALUEを使う。JavaScriptでは、実数値は６４ビットで処理されます（仮数部52ビット、指数部11ビット、符号1ビット）。扱える値の最大値は「Number.MAX_VALUE」、最小値は「Number.MIN_VALUE」として定義されています。また、正の無限大は「Number.PO...
JavaScript JavaScript 小数部分と整数部分を分けて取り出す
数値を小数部分と整数部分を分けるには、一度、数値を文字型に変換します。文字型に変換した後で「split()」メソッドを使ってピリオドを区切りとして分割します。分割すると配列が作成され、最初の要素に整数部が、２番目の要素に小数部が入ります。得られた結果をpraseInt()メソッドを使って数値に変換します。<body><h1>小数部分と整数部分を切り分ける</h1><form> <input typ...
JavaScript JavaScript 数値を指定桁数にして不足分を先頭から0埋めする（ゼロパディング）
数値を指定した桁数で揃える場合には、「slice()」メソッドを使います。slice()メソッドは、指定した数だけ文字列を抜き出すことができます。その際に負数を指定すると、文字列の右側から指定した文字数を抜き出します。「0」で構成された文字列と連結した後でslice()メソッドを使うことで、指定した桁数に揃えることができます。<body><h1>ゼロパディング</h1><form> <input ...