eventオブジェクト JavaScript どのキーが押されたかを取得する
「keyCode」プロパティは、イベント発生時に押されたキーのASCIIの値を持っています。サンプルでは、キーが押されたことを「document.onkeydown」によってイベントとしてとらえ関数「eve1」の処理を発生しています。関数「eve1」の処理では、「windows.event」の用法が使用できるかどうか調べた後、「window.event」、「イベント.keyCode」の両方の用法を...
すなりん
eventオブジェクト 
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入門 クラス
クラスの記法はコードを整理したり、同じ構造のオブジェクトを複数作成したりするときに使います。クラスの基本クラストは、オブジェクトを作成するためのひな形のようなものです。クラスには、オブジェクトに設定したいプロパティやメソッドを定義でき、それをもとにオブジェクトを簡単に作成できます。また、オブジェクトの作成時に実行される処理（コンストラクタ）を実装することにより、プロパティに設定される値などオブジェ...
JavaScript JavaScript入門 thisキーワード
JavaScriptには、オブジェクトへの参照を格納するthisという特殊なキーワードがあります。thisキーワードについて解説しています。実行コンテキストJavaScriptのthisキーワードを理解するには、まず実行コンテキストについて知っておく必要があります。実行コンテキストとは、コードが実行される際にJavaScriptエンジンによって準備されるコードの実行環境のことです。JavaScri...
JavaScript JavaScript入門 スコープ
スコープとは、実行中のコードから参照できる変数や関数の範囲のことです。変数や関数を参照（使用）出来る範囲はスコープによって決まっています。別のスコープに存在する変数や関数は参照不可function fnScopeA(){ let vaLa = 100;}function fnScopeB(){ console.log( vaLa ); //エラーが発生する}fnScopeB();JavaScrip...
JavaScript JavaScript入門 関数（function）
関数の定義方法JavaScriptで関数を定義する方法は、主に次の2種類です。関数宣言によって定義する方法関数式によって定義する方法関数宣言による関数の定義関数宣言で関数を定義する場合は、functionキーワードに続けて関数名を記述します。関数に渡す値を引数と呼び、関数名に続く（）内に設定します。関数から返ってくる値を戻り値と呼び、retrunに続けて値を設定します。構文function 関数名...
JavaScript JavaScript入門 制御構文（条件分岐）
制御構文とは、コードが実行される処理の流れを条件分岐したり繰り返したり制御するための手段です。条件分岐if文JavaScript のif文は、ifに続く丸括弧（）内の条件式がtruthy（真）の場合、それに続く波括弧{}内のコードを実行します。条件式がfalsy（偽）な値の場合には、波括弧{}内のコードは実行せず、次の処理を進めます。なお、{]で囲まれた部分は、ブロック（または節）と呼びます。構文...
JavaScript JavaScript入門 制御構文（繰り返し）
JavaScriptの制御構文の繰り返し（for文、while文、bleack文、continue文、label文）の使用方法について解説while文while文は、条件式が真（true）のときに処理を繰り返し、偽（false）が取得されたときに処理を抜けます。構文while( 条件式 ){ whileブロック 条件式が真の場合繰り返し処理されます。}while文の使用例let i = 0;whi...
JavaScript JavaScript入門 例外処理
プログラムの実行には、エラーがつきものです。プログラムにおけるエラーは例外（Exception）とも呼び、例外が発生したときに実行する処理は例外処理と呼びます。例外処理は、ある程度本格的なプログラム（システムがいきなり停止すると困る場合など）に使う記法です。try/catch/finally構文JavaScript エンジンが発生させた例外について、コードの実行を継続するには「try/catch/...
JavaScript JavaScript入門 演算子
JavaScript には基本的な演算子のみ用意されており、高度な演算を行う場合は「Math」オブジェクトを利用するようになっています。JavaScript で使用できる演算子は、次の表のようになっています。ビットシフト演算は32ビット長で処理されます。ビット演算以外の計算に関してはIEEE754の規格に沿って処理されます。演算子とオペランド演算子とは、値をもとに何らかの処理を行い、その結果を返す...
JavaScript JavaScript入門 変数とデータ型の解説
JavaScriptの変数について解説しています。変数変数宣言JavaScript で変数を使うには、変数の宣言を行う必要があります。変数の宣言方法はプログラミング言語の種類によってことなりますが、JavaScript の場合はletというキーワードで変数を宣言します。変数を宣言することではじめて、変数名で値を管理できるようになります。let 変数名 = 値;変数名（識別子とも言います）はある程度...
Linux SSH接続のポート番号を変更する方法
最近、sshポート（22）に対して、不正なログインを試みるユーザーがいたので、ssh接続ポートを変更したので、その時の手順を記載。デフォルト値のsshは、サーバー設定した人であれば誰でも知っている番号なので、vpsなどのインターネットからアクセスできるサーバーのポート番号は変更したほうがよい。環境Rokey変更方法編集の前のファイルのバックアップを取得します。cp /etc/ssh/sshd_co...
WEB アコーディオンメニューをつくる
アコーディオンメニューは、開いている状態と閉じている状態チェックボックスを利用してつくります。チェックボックス自体は表示されませんが、それに関連付けたラベルをアコーディオンメニューの見出しのように常に表示させておき、そのラベルをクリックすることでチェックボックスのオンとオフを切り替えます。今回の例では、チェックボックスがチェックされていないときは直後のul要素の高さを0にし、メニュー項目を非表示に...
WEB バッジが小刻みに揺れるアニメーションを設定したい
「New」と書かれたバッジを横方向に小刻みに移動させます。ただし、アニメーションするのはマウスポインタがボックスにホバーしているときだけで、そうでないときは停止します。キーフレームアニメーション機能を使います。キーフレームアニメーションを再生・一時停止するには、animetion-play-stateプロパティの値を「paused」にして、ホバー時には「running」にすると、アニメーションの再...
WEB 画像の色が変化するアニメーションを設定したい
トランジションは「変化前の状態」と「変化後の状態」をなめらかにつなげる機能でした。単純なアニメーションを比較的簡単に設定することができますが、次のようなことはできません。設定できるのは「変化前」と「変化後」の状態だけで、「中間の状態」は設定できないトランジションは1回しか発生しないので、アニメーションを繰り返すことはできないトランジションではできないこともできるのがCSSのキーフレームアニメーショ...
WEB 画像にホバーしたときに浮きあがるような効果をつけたい
マウスポインタがリンク画像にホバーしたときに、浮き上がるような効果をつけます。具体的には、画像を拡大して回転させ、ドロップシャドウをつけます。その際トランジションをかけますが、イーズインでもイーズアウトでもなく、独自に設定したイージングを適用して、一度目標を通り過ぎて戻ってくるような効果をつけます。独自に設定したイージングを適用するにはtransitionプロパティの値に「cubic-bezier...
WEB 画像にホバーしたときにセピア色にする効果をつけたい
filterプロパティに、半角スペースで区切って複数の値を指定すると、要素にふたつ以上のフィルター効果をつけることができます。ここでは、リンク画像にホバーしたときに、写真をセピア色に変化させ、軽くぼかしをいれます。filterプロパティに適用できる値filterプロパティに値を変えることによってさまざまな効果を出すことができます。以下にいくつか例をあげます。blur（ぼかし量px）要素をぼかすfi...