ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」の使い方エラーチェックをする方法変数配列（Array）「DOM（Document Object Model）」の使い方関数 / Function条件分岐・繰り返しイベントハンドラー（Event Handler）文字の操作方法文字の検索方法スコープファイルの操作方法画像の操作方法情報を出力・チェックする方法ヒアドキュメントの使い方Built-in Object（ビルトインオブジェクト）ライブラリー / LibraryLibrary
「Ajax」の使い方Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法Reference
数字
計算に誤差が出る時の解決方法ファイル読み込み
「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法イベント
ページ読み込み時に「Javascript」を実行する方法画像読み込みが完了してから、次の処理を実行する方法「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法要素情報
HTMLタグの「class」属性値を取得、変更する方法「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法要素の配置位置を確認する方法Style関連
スタイル属性（色・線・大きさなど）を参照・変更する方法「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する「getComputedStyle」メソッド - CSSを適用したスタイルを参照するページ関連
Webページのタイトルを変更する方法「モニター」情報を取得する方法「ブラウザ」情報を取得する方法「ページ」情報を取得する方法「イベント」情報を取得する方法「マウス」情報を取得する方法サイズ関連
要素の縦・横サイズを参照・変更する方法「モニター」「ブラウザ」のサイズ情報を取得する方法端末情報
スマートフォンからのアクセスを識別する方法
【Javascrpt】「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
【Javascrpt】
「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
「XMLHttpRequest」コンストラクタは、
Webとサーバーの間でデータ交換をするために、
「HTTPリクエスト」を発行することができる。
「XMLHttpRequest」で「HTTP」リクエストを送るには、
・「XMLHttpRequest」オブジェクトを作成する
・「URL」を開いてリクエストを送信する。
・トランザクションが完了
・オブジェクトに結果が埋め込まれる
・「HTTP」ステータスコードやレスポンスの本文などを確認する
といった流れで手続きを行う。
XMLHttpRequest()インスタンス生成
let インスタンス変数 = new XMLHttpRequest();ファイルをオープンする
インスタンス変数.open('GET', 'https://ドメイン名.com/ディレクトリ名/ファイル名.txt', true)読み込み完了ステータスの値を取得する
インスタンス変数.readyState現在のXMLHttpRequest()コンストラクタのステータスを取得する
インスタンス変数.status読み込んだファイルのテキストを取得する
インスタンス変数.responseTextXMLHttpRequest()コンストラクタの終了
インスタンス変数.send();「XMLHttpRequest」を使うサンプルコード
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://ドメイン名.com/ディレクトリ名/ファイル名.txt', true);
//「onreadystatechange」は、読み込み状況が変化するごとに、ステートメント変更してくれる。
xhr.onreadystatechange = function(){ if((xhr.readyState == 4) && (xhr.status == 200)){ var data_list = xhr.responseText.split("\n"); var output = ''; for(let i=0;i<3;i++){ output += '<li>' + data_list[i] + '</li>'; } document.getElementById('example').insertAdjacentHTML('afterbegin', '<ul>' + output + '</ul>'); } } xhr.send(null);
xhr.onreadystatechange = function(){ if((xhr.readyState == 4) && (xhr.status == 200)){ var data_list = xhr.responseText.split("\n"); var output = ''; for(let i=0;i<3;i++){ output += '<li>' + data_list[i] + '</li>'; } document.getElementById('example').insertAdjacentHTML('afterbegin', '<ul>' + output + '</ul>'); } } xhr.send(null);
Back
「XMLHttpRequest」コンストラクタ―の「プロパティ」「メソッド」
| 項目 | 説明 |
|---|---|
| コンストラクター | |
| XMLHttpRequest() | |
| プロパティ | |
| channel | |
| mozAnon | |
| mozBackgroundRequest | |
| mozResponseArrayBuffer | |
| mozSystem | |
| multipart | |
| onreadystatechange | |
| readyState | |
| response | |
| responseText | |
| responseType | |
| responseURL | |
| responseXML | |
| status | |
| statusText | |
| timeout | |
| upload | |
| withCredentials | |
| メソッド | |
| abort() | |
| getAllResponseHeaders() | |
| getResponseHeader() | |
| open() | |
| openRequest() | |
| overrideMimeType() | |
| send() | |
| sendAsBinary() | |
| setRequestHeader() | |
| イベント | |
| onreadystatechange | |
| abort | |
| error | |
| load | |
| loadend | |
| loadstart | |
| progress | |
| timeout | |
| 継承 | |
| XMLHttpRequestEventTarget | |
| EventTarget | |
| XMLHttpRequest に関連するページ | |
| FormData | |
| XMLHttpRequestEventTarget | |
| XMLHttpRequestUpload | |
Back
