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

JavaScript Stringオブジェクトの生成と文字列の連結

JavaScriptでStringオブジェクトのを使って文字型のオブジェクトを生成することができます。文字列型のオブジェクトを生成するには「new String()」とします。Stringオブジェクトを生成する際にパラメータを指定すると、指定されたパラメータが文字列として生成されます。また「new String()」として生成しなくても「"(ダブルクォーテーション)」や「'（シングルクォーテーショ...

2024.11.25

JavaScript

JavaScript 小数点演算誤差を減らす

JavaScriptで小数演算を行うと、誤差が発生して期待する精度が得られない場合があります。ここでは、演算誤差を減らす方法を記載します。JavaScriptに限らず多くのコンピュータ言語やCPUでは、浮動小数演算を行うと誤差が発生します。これは小数が2の-n乗の和で表現されるためで、値によっては表現することができないためです。これを軽減させるには、小数値を10倍するなどしてゲタをはかせます。整数...

2024.11.25

JavaScript

JavaScript 使用可能な最大値／最小値を取得する

扱える値の最大値を取得するには、Number.MAX_VALUE、最小値を取得するにはNumber.MIN_VALUEを使う。JavaScriptでは、実数値は６４ビットで処理されます（仮数部52ビット、指数部11ビット、符号1ビット）。扱える値の最大値は「Number.MAX_VALUE」、最小値は「Number.MIN_VALUE」として定義されています。また、正の無限大は「Number.PO...

2024.11.25

JavaScript

JavaScript 小数部分と整数部分を分けて取り出す

数値を小数部分と整数部分を分けるには、一度、数値を文字型に変換します。文字型に変換した後で「split()」メソッドを使ってピリオドを区切りとして分割します。分割すると配列が作成され、最初の要素に整数部が、２番目の要素に小数部が入ります。得られた結果をpraseInt()メソッドを使って数値に変換します。<body><h1>小数部分と整数部分を切り分ける</h1><form> <input typ...

2024.11.25

JavaScript

JavaScript 数値を指定桁数にして不足分を先頭から0埋めする（ゼロパディング）

数値を指定した桁数で揃える場合には、「slice()」メソッドを使います。slice()メソッドは、指定した数だけ文字列を抜き出すことができます。その際に負数を指定すると、文字列の右側から指定した文字数を抜き出します。「0」で構成された文字列と連結した後でslice()メソッドを使うことで、指定した桁数に揃えることができます。<body><h1>ゼロパディング</h1><form> <input ...

2024.11.25

JavaScript

JavaScript 数値を3桁ごとにカンマで区切る

数値を３桁ごとに区切るには、数値を一度、文字型に変換します。変換した文字列を末尾から連結、及び、カウントしていき、「3」で割ります。その余りが「0」の場合に、「,（カンマ）」を文字列に連結します。これを数値の桁数だけ繰り返します。サンプルサンプルでは、「num3」関数内の２番目のパラメータに「,（カンマ）」で区切る桁数を指定できます。4にすると4桁ごとにカンマで区切られます。<body><h1>数...

2024.11.25

JavaScript

JavaScript 数値を小数点以下n桁にする

JavaScriptで数値の小数点以下の桁数を指定するには「toFixed()」メソッドを使います。たとえば、「12345.6789」という数値があり、「toFixed(2)」すると、12345.68が返されます。（指定した桁数以下は四捨五入される）。小数値を四捨五入して整数化したい場合には、「toFixed(0)」とします。<body><script> window.addEventListen...

2024.11.25

JavaScript

JavaScript 数値の桁数を指定する

JavaScriptで数値の桁数を指定するには、「toPrecision()」メソッドを使います。たとえば、「12345.678」という数値があり「toPrecision(6)」とすると「12345.7」が返されます。「toPrecision(2)」とすると「1.2e+4」のように指数形式で返されます。<body><script> window.addEventListener("load" , ...

2024.11.25

JavaScript

JavaScript 「Number」オブジェクトを生成する

JavaScriptで数値型のオブジェクトを生成するためには、「new Number()」とします。パラメータに何も指定しない場合には、変数は数値型として生成されます。パラメータを指定した場合は、数値に変換可能であれば数値に変換します。そうでない場合は、数値でないことを示す「NaN（Not a Number）」になります。JavaScriptでは8進数、10進数、16進数を扱うことができます。なお...

2024.11.25

JavaScript

JavaScript プロパティやオブジェクトを削除する

オブジェクトを削除するには「null」を代入します。プロパティを削除するには「delete」演算子を使います。ただし、「delete」演算子でどんなプロパティでも削除できるわけではありません。自身が持つプロパティのみ削除でき、プロトタイプチェーンをたどって返されたプロパティは削除できません。また、delete演算子ではvar宣言した変数を削除することはできません。<body><script> wi...

2024.11.24

JavaScript

JavaScript Booleanオブジェクトを生成する

JavaScriptで真偽値を持つオブジェクトBooleanオブジェクトを生成するには、「new Boolean()」とします。パラメータに何も指定しない場合や内容が偽（false）の場合、変数はfalseになります。パラメータが真（true）の場合はtrueになります。<body><script> window.addEventListener("load" , function(){ var ...

2024.11.24

JavaScript

JavaScript プロパティのオーナーかどうか調べる

プロパティのオーナーかどうか調べるには、「hasOwnProperty()」メソッドを使います。hasOwnPropertyは各オブジェクトのメソッドとして用意されており、パラメータに調べたいプロパティ名を文字列で指定します。hasOwnPropertyメソッドは、オブジェクトのプロタイプチェーンをたどって調べることはしません。このため、純粋にオブジェクトがそのプロパティをもっているかどうか調べる...

2024.11.24

JavaScript

JavaScript オブジェクトの種類を調べる

オブジェクトの種類を調べるには「typeof」演算子を使います。パラメータに調べたいオブジェクトや変数などを指定します。オブジェクトの種類に応じて、次の表の文字列が返されます。なお、「typeof」演算子は種類を返すだけであり、インスタンスがどのオブジェクトから生成されたものか把握することができません。どのオブジェクトのインスタンス化を調べるには「instanceOf演算子」を使います。文字列説明...

2024.11.24

JavaScript

JavaScript オブジェクトのプロパティ一覧を取得する

JavaScriptでオブジェクトのプロパティ一覧を取得するには、「for…in」文が使われてきました。現在のブラウザでは、これに加えて「keys()」メソッドと「getOwnPropertyNames()」メソッドを使ってプロパティを取得することができます。これらのメソッドは、パラメータで指定されたオブジェクトのプロパティ一覧を配列として返します。「keys()」メソッドでは、列挙型となっている...

2024.11.24

JavaScript

JavaScript オブジェクトの変更・拡張などが可能か調べる

多くのブラウザに搭載されている新しいJavaScriptでは、不用意にオブジェクトの拡張を禁止する機能があります。オブジェクトが拡張可能かどうかは、「isExtensibleプロパティ」で確認することができます。「true」なら拡張可能で、「false」なら拡張不可です。同様に、オブジェクトにプロパティを追加・削除、及び、値の変更が可能かどうかは、「isFrozen」プロパティで確認することができ...

2024.11.24

JavaScript

JavaScript プロパティの追加を禁止する

JavaScriptでは、オブジェクトへのプロパティの追加を禁止するには、「preventExtensions()」メソッドを使います。パラメータには、プロパティを追加したくないオブジェクトを指定します。freeze()メソッドはオブジェクト自体の変更を禁止しますが、これは不便なときもあります。プロパティの内容や削除は自由に行いたい場合は、preventExtensions()メソッドを使用します...

2024.11.24

JavaScript

JavaScript オブジェクトの変更を禁止する

JavaScriptでは、オブジェクトにプロパティやメソッドを簡単に追加できます。また、プロパティの値も自由に変更することができます。ただし、この手軽さが問題を引き起こすことがあります。そこで、オブジェクトが不用意に変更されないようにするには、「freeze()」メソッドを使います。パラメータには、内容を変更したくないオブジェクトを指定します。なお、「freeze()」メソッドの戻り値も処理したオ...

2024.11.24

JavaScript

JavaScript オブジェクトの内容を読みだす

オブジェクトの内容を読みだすには「for…in」文を使います。「for（変数名 in オブジェクト）」とすると、オブジェクトのプロパティ名が１つずつ読みだされます。「for…in」文では、オブジェクトで「DontEnum」属性になっているものは読み出すことができません。「DontEnum」属性は、「Object.create()」メソッドによってオブジェクト生成するときや、「definePrope...

2024.11.24

JavaScript

JavaScript オブジェクトのインスタンスを調べる

どのオブジェクトから派生したのか調べるには「instanceof」演算子を使う。JavaScriptでは、多くをオブジェクトとして扱います。あらかじめ決められたオブジェクトから生成する以外に、独自に作成したオブジェクトを生成することもできます。生成されたオブジェクトが、どのような種類のオブジェクトなのかを調べるためには、「instanceof」演算子を使います。「typeof」演算子では型が返るだ...

2024.11.24

JavaScript

JavaScript 指定されたオブジェクトを継承して新たなオブジェクトを生成する

指定されたオブジェクトを継承し新たなオブジェクトを生成する方法について解説。オブジェクトを継承し新たなオブジェクトを生成するには「Object.create()」メソッドを使います。JavaScriptでオブジェクトを継承して、新たなオブジェクトを生成するには、「Object.create()」メソッドを使います。最初のパラメータには継承元となるオブジェクトを指定します。2番目のパラメータはオプシ...

2024.11.24

JavaScript

JavaScript オブジェクトを生成する

JavaScriptでオブジェクトを生成するには、「new Object()」とするか、「{}」を使います。「{}」内には「キー：値」のペアを「,」（カンマ）で区切って複数、列記することができます。この場合、キー名がプロパティ、または、メソッド名になります。独自のオブジェクトではなく、既存のオブジェクト（StringやArray）を生成したい場合は、「new」演算子を使います。処理速度について、「...

2024.11.24

JavaScript

JavaScript 文字列を数値に変換する

文字列で表現されている文字を数値に変換する、数値の単位を削除する方法について解説。文字を数値に変換する場合は、「parseInt()」メソッドや「parseFloat()」メソッドを使います。JavaScriptでは変数に代入されている内容が数字を示していても、それが文字列型の場合は通常の算術演算が行われません。たとえば、変数「n」に「"12"」という文字型で表現されている数値がある場合は、「+」...

2024.11.24

JavaScript

JavaScript 文字列を完全なURI形式にエンコードする

「encodeURIComponent()」は、文字列を完全なURI形式にエンコードします。「decodeURIComponent()」は、「encodeURIComponent()」や同様のルーチンでコード化されたURI形式の文字を、通常の文字列にデコードします。「encodeURIComponent」関数では、「encodeURI」では変換されなかった以下の文字列も変換します。JavaScri...

2024.11.24

JavaScript

JavaScript 文字列をURI形式にエンコード/デコードする

「encodeURI()」は、文字列をURI形式にエンコードします。「decodeURI」は、「encodeURI」や同様のルーチンでコード化されたURI形式の文字を、通常の文字列にデコードします。以下の文字列は変換されません。予約語; , / ? : @ & = + $変換されない文字列半角英数字、- _ . ! ~ * ' ( )スコア#<body><P>文字列をURI形式にエンコードする</...

2024.11.24

JavaScript

JavaScript 文字列をASCII形式にエンコード/デコードする

「escape()」は、文字列をASCII形式の文字にエンコードします。「unescape()」は、ASCII形式の文字を文字列にデコードします。ビルトイン関数：escapse()ビルトイン関数：unescape()<body><P>文字列をASCII形式にエンコードする</P><script> document.write(escape("あいうえお@ABCD"));</script><P>文字...

2024.11.24

JavaScriptビルトイン関数

JavaScript 数値かどうか調べる

JavaScriptでは、数値かどうか調べるには、「isNaN()」メソッドを使います。パラメータに指定された内容が数値に変換することができなかった場合はtureを、数値に変換された場合はfalseを返します。数字で表現される文字列の場合、数値に変換できるのであればfalseとなります。<body><script> window.addEventListener("load" , function...

2024.11.24

JavaScript

JavaScript 文字列やオブジェクトを評価して、文字列をスクリプトとして実行させる

JavaScriptでは、オブジェクトや文字列を「eval()」メソッドを使って評価することができます。「eval()」メソッドに指定できるのは、評価可能なものであれば式でも文でも構いません。非同期通信を使って読み込んだJSON形式をJavaScriptオブジェクトにする際に利用される場合もあります。ただし、この場合は、不正コードが含まれていると思わぬ不具合が発生するため、JSON.parse()...

2024.11.24

JavaScript

JavaScript 年・月・日・時・分・秒を設定する

「setYear()」メソッドは年の下2桁の数値を設定し、「setMonth()」メソッドは0を1月とした数値で月を設定し、「setDate()」メソッドは日を設定し、「setHours()」メソッドは時間を設定し、「setMinutes()」メソッドは分を設定し、「setSeconds()」メソッドは秒を設定します。サンプルでは、各メソッドを使って1度設定された年・月・日・時・分・秒の設定を変更...

2024.11.24

DateオブジェクトJavaScript

JavaScript 年・月・日・時・分・秒を取得する

「now = new Date()」でマシンのシステム時計から現在時刻の要素を取り出したオブジェクト「now」を作成し、そこからメソッドを使って各時間の要素を取得しています。「getYear()」メソッドは西暦の下2桁の数値を、「getMonth()」メソッドは1月を0とした月に応じた0から11までの数値を、「getDate()」メソッドは日に応じた1から31までの数値を、「getHours()」...

2024.11.24

DateオブジェクトJavaScript

JavaScript リンクをボタンのように使う

リンクのURLを指定する部分で「JavaScript：関数」としてすると、リンクをクリックしたタイミングで関数を発生させることができます。サンプルでは、リンクをクリックすると関数「」が発生して、元のページはそのままで新しウィンドウが開きます。href="javascript:関数"<body><script> function openWin(){ var DW1; DW1 = window.op...

2024.11.24

JavaScriptLink・Anchorオブジェクト

JavaScript 元のページへ戻れないようにするスクリプト

「replace()」メソッドは、現在表示されているURLを「()」内で指定したURLに置き換えます。したがって元のページへ戻ってくることが出来なくなります。ローカル上のファイルを実行した場合は、うまく動作しない場合がありますが、サーバー上のファイルを実行した場合は、正常に動作します。JavaScript1.1で追加されました。メソッド：location.replace()<body><input...

2024.11.24

JavaScriptlocationオブジェクト

JavaScript ブラウザの更新と同じ挙動をするスクリプト

ブラウザの「更新（Reload）」ボタンと同じ動きをするスクリプトです。ボタンがクリックされたタイミングで「reload()」メソッドが呼ばれ、ページをリロードします。メソッド：location.reload()<body><p>リロードボタン</p><input type="button" value="Reload" onclick="location.reload()"></body>

2024.11.24

JavaScriptlocationオブジェクト

JavaScript 入力されたURLへ遷移するスクリプト

locationオブジェクトが動的にURLを変更できることを利用して、ボタンがクリックされたタイミングでフォームの内容を参照し、フォームに入力されたURLの値を「href」プロパティに設定することによって、フォームに入力されたURLがブラウザにロードされます。また、もしフォームに何も入力されていない場合は、警告用のダイアログボックスが表示されます。<body><script> function u...

2024.11.24

JavaScriptlocationオブジェクト

JavaScript 自ページのURLを取得する

locationオブジェクトには、URLに関する情報が格納されています。「href」プロパティは、URL全体の値を、「protocol」プロパティはURL内のhttpやftpなどのプロパティ部分の値を、「hostname」プロパティはURL内のホスト名部分の値を、「pathname」プロパティはURL内のパス名部分の値を、「port」はURL内の：8080などのポート番号の値を、「host」はホス...

2024.11.24

JavaScriptlocationオブジェクト

JavaScript 複数ページを戻ったり進んだりするスクリプト

複数のページを戻ったり進んだりするボタンのスクリプトです。フォームのボタンが押された時に、イベントハンドラ「onClient」で指定している「history.go(n)」が評価され、「ｎ」の数値分ページを移動します。また、「go（URL）」と指定すると、来歴内の指定されたページを表示します。移動するページが来歴内にない場合は何も起きません。メソッド：history.go(n)<p>複数ページを戻っ...

2024.11.24

JavaScripthistoryオブジェクト

JavaScript ブラウザの進むボタンと同じ動きのスクリプト

ブラウザの「進む（Forward）」ボタンと同じ動きをするスクリプトです。フォームのボタンが押された時に、イベントハンドラ「onClick」で指定している「history.forward()」が評価され、ひとつ先のページへ進みます。進むページが来歴内にない場合は何も起きません。メソッド：history.forward()<body>進むボタン<from > <input type="button"...

2024.11.24

JavaScripthistoryオブジェクト

JavaScript ブラウザの戻るボタン同じ動きのスクリプト

ブラウザの「戻る（Back）」ボタンと同じ動きをするスクリプト。フォームのボタンが押された時に、「onClick」で指定してる「history.back()」が評価され、ひとつ前のページへ戻ります。戻るページが来歴内にない場合は何も起きません。メソッド：history.back()<body>戻るボタン<from > <input type="button" value="Back" onclic...

2024.11.24

JavaScripthistoryオブジェクト

JavaScript 選択した文字を返す

「getSelection()」メソッドは、マウスなどで選択された文字を返します。フォームに値を渡すことが可能なのです。また、サンプルのように選択した文字を警告用のダイアログボックスに表示することもできます。JavaScript1.2で追加されたメソッドです。メソッド：document.getSelection()<body><script> function selct(){ alert(doc...

2024.11.24

JavaScriptdocumentオブジェクト

JavaScript テキストやリンクの色を指定する

「bgColor」プロパティは、バックグラウンドの色の値を持っています。「alinkColor」プロパティはアクティブリンクの色の値を、「fgColor」プロパティはフォアグランド、つまりテキストの色の値は、「linkColor」プロパティはリンクの色の値を、「vlinkColor」プロパティはすでに行ったことのあるリンクの色の値をそれぞれ持っています。サンプルでは、それぞれのプロパティに色の値を...

2024.11.24

JavaScriptdocumentオブジェクト

JavaScript 開いたウィンドウに文字を記述する

URLの指定なしに「window.open」を実行することにより、何も記述していないウィンドウを開き、その中にJavaScriptでドキュメントを記述しています。ウィンドウへの記述方法は、まず「document.open()」でドキュメントストリームを開き、そこへ「document.write()」でドキュメントを書き出します。そして、ドキュメントの記述を終わらせる時は、「document.clo...

2024.11.23

JavaScriptdocumentオブジェクト

JavaScript ファイルの更新日時を取得する

「lastModified」プロパティは、documentオブジェクトが記述しているHTMLファイルの、最終更新日時を持っています。この日時は、HTMLファイルが置かれているHTTPサーバーのタイムスタンプが参照されます。HTTPサーバーは国際標準時で運用されていることが多く、ファイルの最終更新日時が日本時間とずれる場合があります。このプロパティは読み出し専用です。プロパティ：document.l...

2024.11.23

JavaScriptdocumentオブジェクト

JavaScript ドキュメントの情報を取得する

documentオブジェクトが記述してあるHTMLファイルの情報を取得するプロパティです。「title」プロパティはHTMLの<title>部分の値を、「URL」プロパティはHTMLファイル自身のURLの値を、「referrer」プロパティはプロパティはHTMLファイルがリンクされていたURLの値を、それぞれ持っています。プロパティ：document.titleプロパティ：document.URL...

2024.11.23

JavaScriptdocumentオブジェクト

JavaScript 改行付きで文字を書きだす

「writeln()」メソッドは、コマンドの終了位置に改行コードを付けて文字を書きだします。<pre>内でのみ意味を持ちます。メソッド：document.writeln(文字列)<body><pre><script> document.writeln("奈良の田園風景"); document.writeln("奈良市は本州の中西部にある奈良県の県庁所在地です。"); document.writel...

2024.11.23

JavaScriptdocumentオブジェクト

JavaScript 文字を書き出す

JavaScriptでブラウザに文字を書き出すには、「write()」メソッドを使用します。その時に、JavaScript内にHTMLタグを書けば、普通にHTMLで記述した時と同じようにタグが評価され、書きださせた文字は普通のテキスト文と同様に前後に挟まれたタグに従って表示されます。また、JavaScript自体も、HTMLタグと同じように文字を修飾するコマンドを多数持っています。メソッド：doc...

2024.11.23

JavaScriptdocumentオブジェクト

JavaScript ウィンドウ内の文字を検索する

「find()」メソッドは、ウィンドウ内の文字列を検索し指定された文字列が発見された時にture（真）を返します。サンプルでは、フォームに入力された文字列がウィンドウ上に含まれているかどうかを検索しています。もし該当する文字列があれば、その部分が選択状態になります。JavaScript1.2で追加されたメソッドです。メソッド：window.find(文字列, )<body><script> fun...

2024.11.23

JavaScriptwindowオブジェクト

JavaScript ブラウザの表示領域を指定した分量ずつスクロールする

「scrollBy()」メソッドは、ウィンドウの表示領域をピクセル単位で移動します。サンプルでは、ボタンをクリックするごとにウィンドウ内のコンテンツ表示領域が、右へ10ピクセル、下へ100ピクセルずつ移動します。<body><script> function SRto () { window.scrollBy(-10,-100); }</script><div id="STY1" style="p...

2024.11.23

JavaScriptwindowオブジェクト

JavaScript ブラウザの表示領域を指定した位置までスクロールする

「scrollTo()」メソッドは、ピクセル単位で指定した位置へ、ウィンドウの表示領域を移動します。また、スムーズにスクロールさせる場合は、タイマーを使って処理するかスムーズスクロールするライブラリやプラグインを使用する必要があります。サンプルでは、「スクロールGo」ボタンをクリックすると、ウィンドウ内のコンテンツ表示領域が、ウィンドウの表示領域左上角から左へ10ピクセル、上へ100ピクセル移動し...

2024.11.23

JavaScriptwindowオブジェクト

JavaScript ウィンドウの外周・内周を取得する

「innerHeight」プロパティと「innerWidth」プロパティはウィンドウ内の表示領域の高さと幅の値を、「outerHeight」プロパティと「outerWidth」プロパティはツールバーやステータスバーなども含めたウィンドウの外側の高さと幅の値を、それぞれ持っています。JavaScript1.2で追加されたプロパティです。プロパティ：window.innerHeightプロパティ：wi...

2024.11.23

JavaScriptwindowオブジェクト

JavaScript ウィンドウを前に出す

ウィンドウを新しく開いたり、新しくウィンドウが書き変わった時に、もしもそのウィンドウが他のウィンドウの後ろに隠れていても、１番手前に移動させます。JavaScript1.1で追加されたメソッドです。メソッド：window.focus()<body> <form name="Fmess"> <input type="button" value="1.サブウィンドウを開きます" onclick="SW...

2024.11.23

JavaScriptwindowオブジェクト

JavaScript 開いたウィンドウから元のウィンドウを操作する

「opener」プロパティは、元のウィンドウを参照します。サンプルでは、サブウィンドウ内のリンクがクリックされると、「opener.location.href」でサブウィンドウをオープンしたメインウィンドウが参照され、メインウィンドウに「GoWin()」内でしているURLがロードされます。また、リンクがクリックされた時にメインウィンドウが閉じられていても、「closed」プロパティでウィンドウが閉...

2024.11.23

JavaScriptwindowオブジェクト

1 … 8 9 10 … 26