JavaScript JavaScript 数値を3桁ごとにカンマで区切る
数値を３桁ごとに区切るには、数値を一度、文字型に変換します。変換した文字列を末尾から連結、及び、カウントしていき、「3」で割ります。その余りが「0」の場合に、「,（カンマ）」を文字列に連結します。これを数値の桁数だけ繰り返します。サンプルサンプルでは、「num3」関数内の２番目のパラメータに「,（カンマ）」で区切る桁数を指定できます。4にすると4桁ごとにカンマで区切られます。<body><h1>数...
すなりん
JavaScript 
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...
documentオブジェクト JavaScript ドキュメントの情報を取得する
documentオブジェクトが記述してあるHTMLファイルの情報を取得するプロパティです。「title」プロパティはHTMLの<title>部分の値を、「URL」プロパティはHTMLファイル自身のURLの値を、「referrer」プロパティはプロパティはHTMLファイルがリンクされていたURLの値を、それぞれ持っています。プロパティ：document.titleプロパティ：document.URL...
documentオブジェクト JavaScript 改行付きで文字を書きだす
「writeln()」メソッドは、コマンドの終了位置に改行コードを付けて文字を書きだします。<pre>内でのみ意味を持ちます。メソッド：document.writeln(文字列)<body><pre><script> document.writeln("奈良の田園風景"); document.writeln("奈良市は本州の中西部にある奈良県の県庁所在地です。"); document.writel...
documentオブジェクト JavaScript 文字を書き出す
JavaScriptでブラウザに文字を書き出すには、「write()」メソッドを使用します。その時に、JavaScript内にHTMLタグを書けば、普通にHTMLで記述した時と同じようにタグが評価され、書きださせた文字は普通のテキスト文と同様に前後に挟まれたタグに従って表示されます。また、JavaScript自体も、HTMLタグと同じように文字を修飾するコマンドを多数持っています。メソッド：doc...
JavaScript JavaScript ウィンドウ内の文字を検索する
「find()」メソッドは、ウィンドウ内の文字列を検索し指定された文字列が発見された時にture（真）を返します。サンプルでは、フォームに入力された文字列がウィンドウ上に含まれているかどうかを検索しています。もし該当する文字列があれば、その部分が選択状態になります。JavaScript1.2で追加されたメソッドです。メソッド：window.find(文字列, )<body><script> fun...
JavaScript JavaScript ブラウザの表示領域を指定した分量ずつスクロールする
「scrollBy()」メソッドは、ウィンドウの表示領域をピクセル単位で移動します。サンプルでは、ボタンをクリックするごとにウィンドウ内のコンテンツ表示領域が、右へ10ピクセル、下へ100ピクセルずつ移動します。<body><script> function SRto () { window.scrollBy(-10,-100); }</script><div id="STY1" style="p...
JavaScript JavaScript ブラウザの表示領域を指定した位置までスクロールする
「scrollTo()」メソッドは、ピクセル単位で指定した位置へ、ウィンドウの表示領域を移動します。また、スムーズにスクロールさせる場合は、タイマーを使って処理するかスムーズスクロールするライブラリやプラグインを使用する必要があります。サンプルでは、「スクロールGo」ボタンをクリックすると、ウィンドウ内のコンテンツ表示領域が、ウィンドウの表示領域左上角から左へ10ピクセル、上へ100ピクセル移動し...
JavaScript JavaScript ウィンドウの外周・内周を取得する
「innerHeight」プロパティと「innerWidth」プロパティはウィンドウ内の表示領域の高さと幅の値を、「outerHeight」プロパティと「outerWidth」プロパティはツールバーやステータスバーなども含めたウィンドウの外側の高さと幅の値を、それぞれ持っています。JavaScript1.2で追加されたプロパティです。プロパティ：window.innerHeightプロパティ：wi...
JavaScript JavaScript ウィンドウを前に出す
ウィンドウを新しく開いたり、新しくウィンドウが書き変わった時に、もしもそのウィンドウが他のウィンドウの後ろに隠れていても、１番手前に移動させます。JavaScript1.1で追加されたメソッドです。メソッド：window.focus()<body> <form name="Fmess"> <input type="button" value="1.サブウィンドウを開きます" onclick="SW...
JavaScript JavaScript 開いたウィンドウから元のウィンドウを操作する
「opener」プロパティは、元のウィンドウを参照します。サンプルでは、サブウィンドウ内のリンクがクリックされると、「opener.location.href」でサブウィンドウをオープンしたメインウィンドウが参照され、メインウィンドウに「GoWin()」内でしているURLがロードされます。また、リンクがクリックされた時にメインウィンドウが閉じられていても、「closed」プロパティでウィンドウが閉...
JavaScript JavaScript ウィンドウを閉じる
「close()」メソッドは、ウィンドウを閉じます。サンプルでは、ページロードされた時に<body>内のイベントハンドラ「onLoad」が「setTimeout()」メソッドを呼び出し、10秒後に「window.close()」が発生してウィンドウが閉じます。また、フォームボタンを押しても、イベントハンドラ「onClick」が「window.close()」を発生させ、ウィンドウを閉じます。以前は...
JavaScript JavaScript 新しいウィンドウを開く
新しいウィンドウを開くには、「window.open("URL","ウィンドウ名","属性")」メソッドを使用します。メソッドに設定する値のうち、「URL」はウィンドウ内に表示するページのURLの値を設定します。また、「ウィンドウ名」には任意のウィンドウ名を設定し、ここで設定したウィンドウ名は、以降の処理で、JavaScriptを使って参照できるようになります。たとえば、「open」メソッドを使っ...
JavaScript JavaScript 入力欄付のダイアログボックスを開く
「prompt()」メソッドは、入力欄付のダイアログボックスを開きます。「prompt(ウィンドウ内に表示する文字列,入力内の初期値)」と指定します。「OK」ボタンが押されると入力欄付きダイアログボックスの値が代入され、「キャンセル」ボタンが押されるとnullの値を返します。サンプルでは、入力欄に何も入力されていなかったり、初期値のままだったり、「キャンセル」ボタンが押された時には、「alert(...
JavaScript JavaScript 確認ボタン付きのダイアログボックスを開く
「confirm()」メソッドは、確認ボタン付きのダイアログボックスを開きます。確認ボタンの名称は、Windowでは「OK」と「キャンセル」、Macintoshでは「Yes」と「No」でOSによって異なります。「OK」または「Yes」のボタンが押された時は真（true）の値を、「キャンセル」または「No」のボタンが押された時は偽（false）の値を返します。メソッド：confirm(文字列)<bo...
JavaScript JavaScript 警告用のダイアログボックスを開く
「alert()メソッド」は、警告用のダイアログボックスを開きます。サンプルでは、ボタンをクリックした時にイベントハンドラ「onClick」が関数「event2()」を呼び出し、ダイアログボックスを開いています。利用者に簡易的に注意を促すときに使用します。メソッド：alert(文字列)<body><form name="Fmess"><input type="button" value="ここをク...