documentオブジェクト JavaScript ドキュメントの情報を取得する
documentオブジェクトが記述してあるHTMLファイルの情報を取得するプロパティです。「title」プロパティはHTMLの<title>部分の値を、「URL」プロパティはHTMLファイル自身のURLの値を、「referrer」プロパティはプロパティはHTMLファイルがリンクされていたURLの値を、それぞれ持っています。プロパティ：document.titleプロパティ：document.URL...
JavaScript
documentオブジェクト 
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="ここをク...
eventオブジェクト JavaScript どのキーが押されたかを取得する
「keyCode」プロパティは、イベント発生時に押されたキーのASCIIの値を持っています。サンプルでは、キーが押されたことを「document.onkeydown」によってイベントとしてとらえ関数「eve1」の処理を発生しています。関数「eve1」の処理では、「windows.event」の用法が使用できるかどうか調べた後、「window.event」、「イベント.keyCode」の両方の用法を...
eventオブジェクト JavaScript インベントタイプを取得する
「Type」プロパティは、発生したイベントのタイプの値を持っています。サンプルでは、フォームやリンクに色々なイベントハンドラを設定し、イベントが発生した時に警告用のダイアログボックスにそのイベントタイプを表示しています。「onClick」は、オブジェクトがリンクされた時にイベントを発生し、イベントタイプは「click」を持ちます。同様に、「onMouseOut」はオブジェクトからマウスカーソルが離...
JavaScript JavaScript ディスプレイの表示情報を取得する
「pixelDepth」プロパティは1ピクセルあたり何ビットの情報で表示するかの値を、「colorDepth」プロパティは表示可能色数の値を、それぞれビット数で返します。たとえば、256色の場合は、65000色（Macintoshでは32,000色）の場合は16となります。ビット数と色数は次の表のようになります。24ビットと32ビットは同じ色数になります。ビット数色数1白黒24色38色416色82...
JavaScript JavaScript ディスプレイのサイズを取得する
「width」プロパティと「height」プロパティは、スクリーン全体の幅と高さの値を返します。「availWidth」プロパティと「availHeight」プロパティは、スクリーン全体からWindowsのタスクバーのように表示できない部分を除いたスクリーンの幅と高さの値を、それぞれ返します。JavaScript1.2で追加された、読み出し専用プロパティです。プロパティ：screen.widthプ...
JavaScript JavaScript 使用可能なプラグインを取得する
「length」プロパティでプラグインの数を出し、そのブラウザで使用可能なプラグイン一覧を作成しています。「name」プロパティはプラグインの名前を、「filename」プロパティはファイル名を、「description」プロパティはその詳細をそれぞれ返します。JavaScript1.1で追加された、読み取り専用プロパティですオブジェクト（配列）：navigator.pluginsプロパティ：na...
JavaScript JavaScript 使用可能なMIMEのタイプを取得する
「length」プロパティでMIMEタイプの数を出し、そのブラウザで利用可能なMIMEタイプの一覧を作成しています。「Type」プロパティはMIMEのタイプ、「description」プロパティはその詳細を、「suffixes」プロパティは拡張子をそれぞれ返します。mimeTypesオブジェクトには、その他にも「enablePlugin」というプロパティがあります。オブジェクト（配列）：navig...
JavaScript JavaScript Javaが使えるかどうか判断する
「javaEnabled()」メソッドはJavaが使える状態になっているか判断します。サンプルでは、Javaが使えれば「Javaが使えます」と表示。使えなければ警告用のダイアログボックスが表示されます。メソッド：navigator.javaEnabled()<script> if ( navigator.javaEnabled() ){ document.write("javaが使えます") } ...
JavaScript JavaScript プラットフォームのタイプを取得する
プロパティ：navigator.platform「platform」プロパティは、プラットフォームのタイプの値を持っています。JavaScript1.2で追加された、読み取り専用プロパティです。ユーザー環境に合わせて「Win32」や「MacPPC」という表示がされます。<script>document.write("プラットフォームのタイプ：",navigator.platform);</scri...
JavaScript JavaScript ブラウザを判定するユーザーエージェントの取得
「userAgentプロパティ」は、ブラウザのユーザーエージェントの値を持っています。ユーザーエージェントとは、HTTPのヘッダー部分に付けられている文字列です。ユーザーエージェント情報の中からブラウザを特定できる文字列を検索することによって、ブラウザの判定を行うことができます。例えば、Operaは、ユーザーエージェントに「Opera」という文字列が含まれていることで判断しています。その他に、ユー...
JavaScript JavaScript ブラウザのバージョンを取得する
「navigator.appVersion」はブラウザのバージョンを取得します。このバージョン番号は、多くの場合でブラウザのバージョン番号を正確に表していません。例えば、バージョン6以降のNetscapeやMozilla、firefox、Safari、バージョン9以降のInternetExplorer、及びEdgeは「5.0」を、InternetExplorer7.ｘも含めたバージョン5以降8まで...
JavaScript JavaScript ブラウザのコード名を取得する
「appCodeName」プロパティは、ブラウザのコード名の値を持っています。Netscapse NavigatorやMozilla、Firefox、Safari、Operaは「Mozilla」を、InternetExplorerやEdgeは「Mozilla/3.0（compatible;MSIE 3.01; Mac_PowerPC）」や「MDIE,「Mozilla」などを返します。このプロパティ...
JavaScript JavaScript ブラウザ名を取得する
「appName」は、ブラウザ名の値を持っています。バージョン11より前のInternetExplorerは「Microsoft Internet Explorer」を、Netscape NavigatorやMozilla、Firefox、Safari、バージョン11のInternet Explorer、及びEdgeは「Netscapse」を返します。また、Operaha、Opera9.X以降は「...
JavaScript JavaScript入門 Mathオブジェクト
アプリケーション開発で一般的に必要になる数学的な関数、JavaScript組込みのMathオブジェクトについて解説しています。（数値のフォーマット指定、固定小数点、指数表現、精度の指定、基数の指定、定数、代数関連の関数、対数関連の関数、疑似乱数発生、三角関数、双曲線関数）JavaScriptには整数専用の型はなく、数値はすべてIEEE754の64ビット長の浮動小数点数として表されます。このためMa...
JavaScript JavaScript入門 ラッパーオブジェクトの解説
ラッパーオブジェクトとは、プリミティブ値を包み込むオブジェクトのことです。文字列などのプリミティブ値は、単なる値のため、オブジェクトのようにメソッドなどは保持していません。しかし、JavaScriptでは、次のようにプリミティブ値に続けてメソッドを記述できます。文字列に続けてメソッドやプロパティが記述できるconsole.log( "hello".toUpperCase() );>HELLOcon...
JavaScript JavaScript入門 JOSNオブジェクト
JSON（JavaScript Object Notation）は、JavaScriptのオブジェクト構造を文字列で表すときに使う表記法です。JavaScriptのコード内では、オブジェクトや配列の形式でデータを管理することが多いですが、オブジェクトや配列をそのままサーバーに対して送信することはできません。しかし、オブジェクトや配列のデータを１つずつリクエストのパラメータとして設定するのは困難です...
JavaScript JavaScript入門 Storageオブジェクト
Web Storage APIを使うと、ブラウザ内にデータを保持できます。「Web Storage API」はWebAPIの一種で、Storageオブジェクトを通して使うことができます。概要変数に格納している値など実行中のコードを保持しているデータは、ブラウザを閉じると消えてしまいます。しかし、Storageオブジェクトを通してデータをブラウザに保存すると、ブラウザの画面を再度開いたときにデータを...
JavaScript JavaScript入門 正規表現の使い方
JavaScriptでは、RegExpオブジェクトを使うことで、正規表現を扱うことができます。正規表現とは、文字列をパターンの一致で検索するときに使う記法です。通常の検索では特定の文字列に対する完全一致しか判定できませんが、正規表現を使うことであいまいな検索条件を指定できます。たとえば、ある文字列の羅列から、携帯電話番号のフォーマットに一致する文字列を抽出したい場合、携帯電話の組み合わせの数が膨大...
JavaScript JavaScript入門 日付と時刻を扱う
JavaScriptで日付と時刻を表すには、Dateオブジェクトを使用します。Dateオブジェクトは、協定世界時（UTC）の1979年1年1日午前0時0分0秒からの経過時間をミリ秒単位で保持しており、それによって時刻を計算します。日付や時刻を扱うGMT、UTC、JSTとは？GMT（Greenwich Mean Time：グリニッジ標準時）グリニッジ標準時（GMT）とは、ロンドンにあるグリニッジ展望...
JavaScript JavaScript入門 イベント -イベント伝播の停止-
他の要素への伝播を停止（stopPropagation）stopPropagationメソッドを呼び出すことで、「他の要素への伝播を止めます」。キャプチャリングフェーズで呼び出された場合には、下位の要素に設定されているアクションが実行されることはありません。多要素への伝播をキャプチャリングで停止ターゲットフェーズまたはバブリングフェーズで呼びされた場合には、上位の要素にイベントを伝播しません。多要...
JavaScript JavaScript入門 イベント
JavaScriptでは何らかのトリガーでブラウザから発生した通知をイベントとして受け取ります。イベントには、クリック操作やスクロール操作、フォームへの入力などのユーザー起因のイベントや、画面ロードの完了などのブラウザ起因のイベントがあります。JavaScriptでイベントの発生を検知し、何らかの処理を実行するには、イベントが発生したときに実行される関数を、イベントハンドラまたはイベントリスナに登...
JavaScript JavaScript入門 イベント 様々なイベント
キーボード操作に関するイベントを、マウス操作に関するイベント、カット、コピー、ペースなどに関わるイベント、フォーカスに関わるイベント、スクロールや画面タッチに関わるイベント、アニメーションに関わるイベント、画面に関わるイベントについて解説。キーボード操作に関するイベントイベントタイプ発火タイミングinput<input>要素のvalue属性の値や<textarea>のコンテンツが変化するたびに発火...
JavaScript JavaScript入門 DOM -要素の位置と大きさの取得-
要素の位置と大きさの取得と変更HTML/DOMでは、要素の大きさや位置を状況に合わせて、3種類の方法で取得できます。Client、offset、scrollから始まるプロパティ名で定義されています。また、プロパティを通して取得する値は、px単位の整数値になります。小数点も含めて値を取得する場合には、getBoundingClientRectメソッドを使います。位置情報を保持するElementオブジ...
JavaScript JavaScript入門 DOM – 画面の値更新及びCSS変更 –
画面の取得・更新HTMLタグで囲まれた文字列や子要素を取得・変更するときはElementオブジェクトのinnerHTMLやtextContentにアクセスします。innerHTMLやtextContentは良く使用するプロパティです。タグで囲んだコンテンツの取得、変更プロパティ説明innerHTML要素内のHTMLを文字列として取得・変更する。HTML取得の場合には、HTMLタグを含む文字列が取得...
JavaScript JavaScript入門 DOM -DOMインターフェース解説-
JavaScriptを使って画面上の表示内容を取得、変更する方法を解説。Webサイトを作成するときは必ず画面の作成作業が発生します。JavaScriptでどのようにして画面の内容を取得・変更しているか解説します。DOMインターフェースJavaScriptからHTMLへの入出力はDOM（Document Object Model）というAPIを通して行います。（DOMは、DOMインターフェースやDO...
JavaScript JavaScript入門 非同期処理 await/async Fetchの解説
ES2017のバージョンからawaitとasyncキーワードを使って、Promiseのthenの処理をより簡潔に記述できるようになりました。Promiseチェーンの記述を簡潔化できます。asyncasyncは、関数の先頭に付けることによって、非同期関数（AsyncFunction）という特殊な関数を定義できます。構文：asyncの記法非同期関数の宣言async function 関数名() {・・...
JavaScript JavaScript入門 非同期処理 Promise解説
ES6で追加されたPromiseは、非同期処理を扱うためのオブジェクトです。Promiseを使うことで非同期処理のネストが深くなることを避けられるため、コードの可読性が向上します。Promiseの記法構文：Promiseの記法let prom = new Promise( 非同期処理を扱う関数 ); ※1let thenProm = prom.then( 非同期処理の成功時に実行する関数 ); ※...
JavaScript JavaScript入門 非同期処理の解説
非同期処理とは非同期処理を解説する前にまずは、スレッド処理について説明します。スレッドスレッドとは、プログラムの開始から終了までの一連の処理の流れのことです。JavaScriptコードはJavaScriptエンジンによって1行ずつ実行されていきますが、その処理の開始から終了までを一本の糸のように表すことができることを「1つのスレッドでコードが実行されている」と表現します。ブラウザ上でJavaScr...
JavaScript JavaScript入門 コレクション 配列の静的メソッド 分割代入
静的メソッド静的メソッドとは、オブジェクトのインスタンス化を行わずに呼び出せるメソッドのことです。Arrayコンストラクタにも、静的メソッドが用意されています。from 配列風オブジェクトや反復可能オブジェクトを配列に変換fromメソッドを使うと、Setなどの反復可能オブジェクトやargumentsなどの配列風（array-like）オブジェクトから、配列を作成できます。Setから配列を作成con...
JavaScript JavaScript 反復処理 スプレッド演算子
ES6で追加されたスプレッド演算子（…）は、オブジェクトや配列の要素を展開したり、まとめたりする演算子です。スプレッド演算子は、オペランドの前にドットを3つ続ける形式（...オペランド）で記述します。具体的には、スプレッド演算子を使うことで、次のような実装を行うことができます。スプレッド演算子の使用関数実行時に、配列の要素の値を複数の引数に展開して設定する関数実行時に、複数の引数をオブジェクトや配...
JavaScript JavaScript 反復処理 ジェネレータの解説
ES6で追加された、for…of文の挙動に関わるジェネレータを解説しています。ジェネレータとは、イテレータと同様の機能を持つGeneratorオブジェクトを作成するための関数です。ジェネレータを使うとイテレータと同様の反復処理をより簡潔に記述できます。ジェネレータ関数の記法構文：ジェネレータ関数の記法ジェネレータ関数の宣言function* ジェネレータ関数() { yield 値; return...
JavaScript JavaScript入門 反復処理イテレータの解説
ES6で追加された、for…of文の挙動に関わるイテレータを解説しています。イテレータの記法イテレータとは、for…of文などを使ったオブジェクト（MapやSet、または独自で定義したオブジェクトなど）の「反復処理の挙動を定義するときに使うオブジェクト」です。構文：イテレータの構造const iterator = { next(){ ※１ return { ※２ done: ,※３ value: ...
JavaScript JavaScript入門 コレクション Set、Map、WeakMapの解説
SetES6で追加されたSetは、一意の値を格納するためのコレクションです。Setには、重複した値を保持でき前せん。重複した値を登録しようとした場合には、その値は無視されます。コレクション内に追加されません。Setの初期化構文：Setの初期化空のSetオブジェクトを作成する場合const Setオブジェクト = new Set();反復可能オブジェクトからSetオブジェクトを作成する場合const...
JavaScript JavaScript入門 コレクション-コールバック関数を引数に取るメソッド
配列が保持するメソッドには、コールバック関数を引数にとるものがあります。コールバック関数を引数にとるメソッドは、配列の要素に対する繰り返し処理の記述の簡略化や処理の内容を明確にする目的で使われます。forEach 配列の各要素を使って繰り返し処理を行うforEachメソッドを使うことで、配列の要素に対する繰り返し処理を、コールバック関数を利用して記述できます。構文：forEachの記法配列.for...
JavaScript JavaScript入門 クラス プロトタイプ
プロトタイプES5でも関数を使えば、クラスと同等の機能を実装出来ます。ただし、現在はこの方法は実装することは基本的にありません。この仕組みを学ぶとJavaScript言語仕様を理解するうえで非常に役立ちます。というもの、JavaScriptはプロトタイプベース言語と呼ばれ、言語仕様の根底には関数と密接に関わるプロトタイプ（prototype）と呼ばれる仕組みがあります。そして、ES6から仕様追加さ...
JavaScript JavaScript入門 コレクション
コレクションは、値をまとまりで管理するオブジェクトのことです。JavaScriptで使えるコレクションは、ES5まではObjectとArrayのみでしたが、ES6からMap,Set,WeakMap、WeakSetも使えるようになりました。配列（Array）オブジェクトの場合はプロパティと値を対で格納しますが、配列の場合は値のみを格納します。格納された値はそれぞれ、値に対応したインデックスが0から順...
JavaScript JavaScript入門 クラス
クラスの記法はコードを整理したり、同じ構造のオブジェクトを複数作成したりするときに使います。クラスの基本クラストは、オブジェクトを作成するためのひな形のようなものです。クラスには、オブジェクトに設定したいプロパティやメソッドを定義でき、それをもとにオブジェクトを簡単に作成できます。また、オブジェクトの作成時に実行される処理（コンストラクタ）を実装することにより、プロパティに設定される値などオブジェ...