JavaScript JavaScript 特定の文字列を削除する
JavaScriptでは文字列を連結するには+記号を使いますが、文字列を引くメソッドはありません。JavaScriptで文字列の中にある特定の文字列を削除するには、split()メソッドを使います。split()メソッドのパラメータに削除したい文字を指定します。これにより、指定した文字で分割された結果が配列に入ります。この段階で指定した文字が無くなっていることになるので、後は「join()」メソッ...
JavaScript
JavaScript 
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 ...
JavaScript JavaScript 数値を3桁ごとにカンマで区切る
数値を３桁ごとに区切るには、数値を一度、文字型に変換します。変換した文字列を末尾から連結、及び、カウントしていき、「3」で割ります。その余りが「0」の場合に、「,（カンマ）」を文字列に連結します。これを数値の桁数だけ繰り返します。サンプルサンプルでは、「num3」関数内の２番目のパラメータに「,（カンマ）」で区切る桁数を指定できます。4にすると4桁ごとにカンマで区切られます。<body><h1>数...
JavaScript JavaScript 数値を小数点以下n桁にする
JavaScriptで数値の小数点以下の桁数を指定するには「toFixed()」メソッドを使います。たとえば、「12345.6789」という数値があり、「toFixed(2)」すると、12345.68が返されます。（指定した桁数以下は四捨五入される）。小数値を四捨五入して整数化したい場合には、「toFixed(0)」とします。<body><script> window.addEventListen...
JavaScript JavaScript 数値の桁数を指定する
JavaScriptで数値の桁数を指定するには、「toPrecision()」メソッドを使います。たとえば、「12345.678」という数値があり「toPrecision(6)」とすると「12345.7」が返されます。「toPrecision(2)」とすると「1.2e+4」のように指数形式で返されます。<body><script> window.addEventListener("load" , ...
JavaScript JavaScript 「Number」オブジェクトを生成する
JavaScriptで数値型のオブジェクトを生成するためには、「new Number()」とします。パラメータに何も指定しない場合には、変数は数値型として生成されます。パラメータを指定した場合は、数値に変換可能であれば数値に変換します。そうでない場合は、数値でないことを示す「NaN（Not a Number）」になります。JavaScriptでは8進数、10進数、16進数を扱うことができます。なお...
JavaScript JavaScript プロパティやオブジェクトを削除する
オブジェクトを削除するには「null」を代入します。プロパティを削除するには「delete」演算子を使います。ただし、「delete」演算子でどんなプロパティでも削除できるわけではありません。自身が持つプロパティのみ削除でき、プロトタイプチェーンをたどって返されたプロパティは削除できません。また、delete演算子ではvar宣言した変数を削除することはできません。<body><script> wi...
JavaScript JavaScript Booleanオブジェクトを生成する
JavaScriptで真偽値を持つオブジェクトBooleanオブジェクトを生成するには、「new Boolean()」とします。パラメータに何も指定しない場合や内容が偽（false）の場合、変数はfalseになります。パラメータが真（true）の場合はtrueになります。<body><script> window.addEventListener("load" , function(){ var ...
JavaScript JavaScript プロパティのオーナーかどうか調べる
プロパティのオーナーかどうか調べるには、「hasOwnProperty()」メソッドを使います。hasOwnPropertyは各オブジェクトのメソッドとして用意されており、パラメータに調べたいプロパティ名を文字列で指定します。hasOwnPropertyメソッドは、オブジェクトのプロタイプチェーンをたどって調べることはしません。このため、純粋にオブジェクトがそのプロパティをもっているかどうか調べる...
JavaScript JavaScript オブジェクトの種類を調べる
オブジェクトの種類を調べるには「typeof」演算子を使います。パラメータに調べたいオブジェクトや変数などを指定します。オブジェクトの種類に応じて、次の表の文字列が返されます。なお、「typeof」演算子は種類を返すだけであり、インスタンスがどのオブジェクトから生成されたものか把握することができません。どのオブジェクトのインスタンス化を調べるには「instanceOf演算子」を使います。文字列説明...
JavaScript JavaScript オブジェクトのプロパティ一覧を取得する
JavaScriptでオブジェクトのプロパティ一覧を取得するには、「for…in」文が使われてきました。現在のブラウザでは、これに加えて「keys()」メソッドと「getOwnPropertyNames()」メソッドを使ってプロパティを取得することができます。これらのメソッドは、パラメータで指定されたオブジェクトのプロパティ一覧を配列として返します。「keys()」メソッドでは、列挙型となっている...
JavaScript JavaScript オブジェクトの変更・拡張などが可能か調べる
多くのブラウザに搭載されている新しいJavaScriptでは、不用意にオブジェクトの拡張を禁止する機能があります。オブジェクトが拡張可能かどうかは、「isExtensibleプロパティ」で確認することができます。「true」なら拡張可能で、「false」なら拡張不可です。同様に、オブジェクトにプロパティを追加・削除、及び、値の変更が可能かどうかは、「isFrozen」プロパティで確認することができ...
JavaScript JavaScript プロパティの追加を禁止する
JavaScriptでは、オブジェクトへのプロパティの追加を禁止するには、「preventExtensions()」メソッドを使います。パラメータには、プロパティを追加したくないオブジェクトを指定します。freeze()メソッドはオブジェクト自体の変更を禁止しますが、これは不便なときもあります。プロパティの内容や削除は自由に行いたい場合は、preventExtensions()メソッドを使用します...
JavaScript JavaScript オブジェクトの変更を禁止する
JavaScriptでは、オブジェクトにプロパティやメソッドを簡単に追加できます。また、プロパティの値も自由に変更することができます。ただし、この手軽さが問題を引き起こすことがあります。そこで、オブジェクトが不用意に変更されないようにするには、「freeze()」メソッドを使います。パラメータには、内容を変更したくないオブジェクトを指定します。なお、「freeze()」メソッドの戻り値も処理したオ...
JavaScript JavaScript オブジェクトの内容を読みだす
オブジェクトの内容を読みだすには「for…in」文を使います。「for（変数名 in オブジェクト）」とすると、オブジェクトのプロパティ名が１つずつ読みだされます。「for…in」文では、オブジェクトで「DontEnum」属性になっているものは読み出すことができません。「DontEnum」属性は、「Object.create()」メソッドによってオブジェクト生成するときや、「definePrope...
JavaScript JavaScript オブジェクトのインスタンスを調べる
どのオブジェクトから派生したのか調べるには「instanceof」演算子を使う。JavaScriptでは、多くをオブジェクトとして扱います。あらかじめ決められたオブジェクトから生成する以外に、独自に作成したオブジェクトを生成することもできます。生成されたオブジェクトが、どのような種類のオブジェクトなのかを調べるためには、「instanceof」演算子を使います。「typeof」演算子では型が返るだ...
JavaScript JavaScript 指定されたオブジェクトを継承して新たなオブジェクトを生成する
指定されたオブジェクトを継承し新たなオブジェクトを生成する方法について解説。オブジェクトを継承し新たなオブジェクトを生成するには「Object.create()」メソッドを使います。JavaScriptでオブジェクトを継承して、新たなオブジェクトを生成するには、「Object.create()」メソッドを使います。最初のパラメータには継承元となるオブジェクトを指定します。2番目のパラメータはオプシ...
JavaScript JavaScript オブジェクトを生成する
JavaScriptでオブジェクトを生成するには、「new Object()」とするか、「{}」を使います。「{}」内には「キー：値」のペアを「,」（カンマ）で区切って複数、列記することができます。この場合、キー名がプロパティ、または、メソッド名になります。独自のオブジェクトではなく、既存のオブジェクト（StringやArray）を生成したい場合は、「new」演算子を使います。処理速度について、「...
JavaScript JavaScript 文字列を数値に変換する
文字列で表現されている文字を数値に変換する、数値の単位を削除する方法について解説。文字を数値に変換する場合は、「parseInt()」メソッドや「parseFloat()」メソッドを使います。JavaScriptでは変数に代入されている内容が数字を示していても、それが文字列型の場合は通常の算術演算が行われません。たとえば、変数「n」に「"12"」という文字型で表現されている数値がある場合は、「+」...
JavaScript JavaScript 文字列を完全なURI形式にエンコードする
「encodeURIComponent()」は、文字列を完全なURI形式にエンコードします。「decodeURIComponent()」は、「encodeURIComponent()」や同様のルーチンでコード化されたURI形式の文字を、通常の文字列にデコードします。「encodeURIComponent」関数では、「encodeURI」では変換されなかった以下の文字列も変換します。JavaScri...
JavaScript JavaScript 文字列をURI形式にエンコード/デコードする
「encodeURI()」は、文字列をURI形式にエンコードします。「decodeURI」は、「encodeURI」や同様のルーチンでコード化されたURI形式の文字を、通常の文字列にデコードします。以下の文字列は変換されません。予約語; , / ? : @ & = + $変換されない文字列半角英数字、- _ . ! ~ * ' ( )スコア#<body><P>文字列をURI形式にエンコードする</...
JavaScript JavaScript 文字列をASCII形式にエンコード/デコードする
「escape()」は、文字列をASCII形式の文字にエンコードします。「unescape()」は、ASCII形式の文字を文字列にデコードします。ビルトイン関数：escapse()ビルトイン関数：unescape()<body><P>文字列をASCII形式にエンコードする</P><script> document.write(escape("あいうえお@ABCD"));</script><P>文字...
JavaScript JavaScript 数値かどうか調べる
JavaScriptでは、数値かどうか調べるには、「isNaN()」メソッドを使います。パラメータに指定された内容が数値に変換することができなかった場合はtureを、数値に変換された場合はfalseを返します。数字で表現される文字列の場合、数値に変換できるのであればfalseとなります。<body><script> window.addEventListener("load" , function...
JavaScript JavaScript 文字列やオブジェクトを評価して、文字列をスクリプトとして実行させる
JavaScriptでは、オブジェクトや文字列を「eval()」メソッドを使って評価することができます。「eval()」メソッドに指定できるのは、評価可能なものであれば式でも文でも構いません。非同期通信を使って読み込んだJSON形式をJavaScriptオブジェクトにする際に利用される場合もあります。ただし、この場合は、不正コードが含まれていると思わぬ不具合が発生するため、JSON.parse()...
Dateオブジェクト JavaScript 年・月・日・時・分・秒を設定する
「setYear()」メソッドは年の下2桁の数値を設定し、「setMonth()」メソッドは0を1月とした数値で月を設定し、「setDate()」メソッドは日を設定し、「setHours()」メソッドは時間を設定し、「setMinutes()」メソッドは分を設定し、「setSeconds()」メソッドは秒を設定します。サンプルでは、各メソッドを使って1度設定された年・月・日・時・分・秒の設定を変更...
Dateオブジェクト JavaScript 年・月・日・時・分・秒を取得する
「now = new Date()」でマシンのシステム時計から現在時刻の要素を取り出したオブジェクト「now」を作成し、そこからメソッドを使って各時間の要素を取得しています。「getYear()」メソッドは西暦の下2桁の数値を、「getMonth()」メソッドは1月を0とした月に応じた0から11までの数値を、「getDate()」メソッドは日に応じた1から31までの数値を、「getHours()」...
JavaScript JavaScript リンクをボタンのように使う
リンクのURLを指定する部分で「JavaScript：関数」としてすると、リンクをクリックしたタイミングで関数を発生させることができます。サンプルでは、リンクをクリックすると関数「」が発生して、元のページはそのままで新しウィンドウが開きます。href="javascript:関数"<body><script> function openWin(){ var DW1; DW1 = window.op...
JavaScript JavaScript 元のページへ戻れないようにするスクリプト
「replace()」メソッドは、現在表示されているURLを「()」内で指定したURLに置き換えます。したがって元のページへ戻ってくることが出来なくなります。ローカル上のファイルを実行した場合は、うまく動作しない場合がありますが、サーバー上のファイルを実行した場合は、正常に動作します。JavaScript1.1で追加されました。メソッド：location.replace()<body><input...
JavaScript JavaScript ブラウザの更新と同じ挙動をするスクリプト
ブラウザの「更新（Reload）」ボタンと同じ動きをするスクリプトです。ボタンがクリックされたタイミングで「reload()」メソッドが呼ばれ、ページをリロードします。メソッド：location.reload()<body><p>リロードボタン</p><input type="button" value="Reload" onclick="location.reload()"></body>
JavaScript JavaScript 入力されたURLへ遷移するスクリプト
locationオブジェクトが動的にURLを変更できることを利用して、ボタンがクリックされたタイミングでフォームの内容を参照し、フォームに入力されたURLの値を「href」プロパティに設定することによって、フォームに入力されたURLがブラウザにロードされます。また、もしフォームに何も入力されていない場合は、警告用のダイアログボックスが表示されます。<body><script> function u...
JavaScript JavaScript 自ページのURLを取得する
locationオブジェクトには、URLに関する情報が格納されています。「href」プロパティは、URL全体の値を、「protocol」プロパティはURL内のhttpやftpなどのプロパティ部分の値を、「hostname」プロパティはURL内のホスト名部分の値を、「pathname」プロパティはURL内のパス名部分の値を、「port」はURL内の：8080などのポート番号の値を、「host」はホス...
historyオブジェクト JavaScript 複数ページを戻ったり進んだりするスクリプト
複数のページを戻ったり進んだりするボタンのスクリプトです。フォームのボタンが押された時に、イベントハンドラ「onClient」で指定している「history.go(n)」が評価され、「ｎ」の数値分ページを移動します。また、「go（URL）」と指定すると、来歴内の指定されたページを表示します。移動するページが来歴内にない場合は何も起きません。メソッド：history.go(n)<p>複数ページを戻っ...
historyオブジェクト JavaScript ブラウザの進むボタンと同じ動きのスクリプト
ブラウザの「進む（Forward）」ボタンと同じ動きをするスクリプトです。フォームのボタンが押された時に、イベントハンドラ「onClick」で指定している「history.forward()」が評価され、ひとつ先のページへ進みます。進むページが来歴内にない場合は何も起きません。メソッド：history.forward()<body>進むボタン<from > <input type="button"...
historyオブジェクト JavaScript ブラウザの戻るボタン同じ動きのスクリプト
ブラウザの「戻る（Back）」ボタンと同じ動きをするスクリプト。フォームのボタンが押された時に、「onClick」で指定してる「history.back()」が評価され、ひとつ前のページへ戻ります。戻るページが来歴内にない場合は何も起きません。メソッド：history.back()<body>戻るボタン<from > <input type="button" value="Back" onclic...
documentオブジェクト JavaScript 選択した文字を返す
「getSelection()」メソッドは、マウスなどで選択された文字を返します。フォームに値を渡すことが可能なのです。また、サンプルのように選択した文字を警告用のダイアログボックスに表示することもできます。JavaScript1.2で追加されたメソッドです。メソッド：document.getSelection()<body><script> function selct(){ alert(doc...
documentオブジェクト JavaScript テキストやリンクの色を指定する
「bgColor」プロパティは、バックグラウンドの色の値を持っています。「alinkColor」プロパティはアクティブリンクの色の値を、「fgColor」プロパティはフォアグランド、つまりテキストの色の値は、「linkColor」プロパティはリンクの色の値を、「vlinkColor」プロパティはすでに行ったことのあるリンクの色の値をそれぞれ持っています。サンプルでは、それぞれのプロパティに色の値を...
documentオブジェクト JavaScript 開いたウィンドウに文字を記述する
URLの指定なしに「window.open」を実行することにより、何も記述していないウィンドウを開き、その中にJavaScriptでドキュメントを記述しています。ウィンドウへの記述方法は、まず「document.open()」でドキュメントストリームを開き、そこへ「document.write()」でドキュメントを書き出します。そして、ドキュメントの記述を終わらせる時は、「document.clo...
documentオブジェクト JavaScript ファイルの更新日時を取得する
「lastModified」プロパティは、documentオブジェクトが記述しているHTMLファイルの、最終更新日時を持っています。この日時は、HTMLファイルが置かれているHTTPサーバーのタイムスタンプが参照されます。HTTPサーバーは国際標準時で運用されていることが多く、ファイルの最終更新日時が日本時間とずれる場合があります。このプロパティは読み出し専用です。プロパティ：document.l...