web録web録HOMEweb録PCハード・ソフトBlogブログ運営・WordPressmemoただのメモJavaScriptの勉強メモ2019.6.13Javascriptに関する私的なメモです。書いた本人にしかわからない所が多いです。関数の定義グローバル変数と、ローカル変数HTMLを操作するDOMとはIDを指定して要素を取得するタグ名を指定して要素を取得するクラス名を指定して要素を取得する。複数のクラス名を指定して要素を取得する(and条件)HTMLを読み込んでからJSを実行するには要素の属性(hrefとか)を取得する要素の属性(hrefとか)をセットするテキストを書き換えるHTML自体を書き換える要素を追加する要素を削除するイベントをトリガーに処理を行う。あるイベントイベントハンドラーイベントリスナーイベントのキャンセル(.preventDefault();)イベントで動的に画面を変更する(thisを使ってオブジェクトを変更する)ウェブページのUIを動的に制御する。日付取得のメソッド日付指定のメソッドJavaScriptの勉強ページJavaScriptの勉強メモJavascriptの歴史Netscapeが開発した。HTML5で標準webプログラムとして承認された。開発環境の準備と動作チェック・サーバーは、クライアントからのリクエストに応じた処理を行うサーバーソフトがある。・サーバーソフトで有名なのがApache(無償)。オープンソースで世界中で開発されている。・ローカルPCにローカルサーバー環境を作るにはCドライブ直下にApacheを入れるだけ。http://localhost。・c:/Apache24/htdocsフォルダ内にhtmlファイルを保存することで、ブラウザからhttp://localhost/●●.htmlのアドレスで閲覧できる。src=”ファイル名”></script>で呼び出す。・JSは大文字と小文字は区別される。JSの変数にはデータ型があるが、変数宣言時にはデータ型を指定せず、代入する値でもってデータ型の宣言の代わりとなる。・シングルクオーテーションとダブルクオーテーションには区別なし。・配列の値1~値nには0~n-1のインデックス番号が振られる。配列その2(連想配列)・普通の配列は「インデックス番号:値」の組み合わせであるのに対して、連想配列は「キー:値」の組み合わせで、キーを連想しやすい文字とすることで分かりやすい組み合わせの配列のこと。ブラウザ情報などを一定のルールでまとめたもの。プログラムが簡潔に書けるためのまとまり。・オブジェクトはその状態を表す「プロパティ」と動作を指定する「メソッド」がある。・オブジェクトはあらかじめ用意されている。・オブジェクトを使うには元のオブジェクトをコピーして新たに生成するインスタンス化という過程を経る。できたインスタンスを取り扱う。※引数は無い場合もある。JSON:JSON形式データを扱うオブジェクトブラウザオブジェクトブラウザで取り扱えるオブジェクト。インスタンス化されているので、newでインスタンス化する必要がない。ifで別の判定を行うことも可能。・真のときの処理に、if文を入れ子にすることでさらに条件判定が可能。・条件式がtrueの間、処理を繰り返す。・while文は繰り返す回数が分かっていないときに使用する。・まず処理を行い、whileが真のとき繰り返す。breakとcontinueは親ループには影響しない。関数の定義よく使う処理を関数としてまとめることで、1行の命令でそれらの処理を呼び出すことができる。・HTML文書は文書自体や、各タグがオブジェクトとしてみなされ、JSによってオブジェクト操作ができる。・文書を構成する「要素」や「属性」などのオブジェクトのことをノードと呼ぶ。・ノードとは、DOMからアクセスできるオブジェクトの単位であるといえる。・ノードは要素だけでなく、親ノードや子ノードなどがあるため、単純に要素を指定するよりも汎用的にオブジェクト指定と操作ができる。・ふつう、html内には同じタグが複数存在するため、取得した値は「要素オブジェクトの配列」となっている。クラス名を指定して要素を取得する。記述しhtmlを読み込み後に実行する処理を関数の中の「処理」に入れる。要素オブジェクト名.setAttribute(属性名);テキストを書き換える・要素を取得した後に.textContentプロパティを変更するとテキストを書き換えることができる。HTML自体を書き換える・要素を取得した後に.innerHTMLプロパティを変更することで、要素の内部のHTML自体を書き換えることができる。いう2工程のメソッドを経る。いう2工程のメソッドを経る。2.要素を削除する:document.親ノード.removeChild(elem)イベントをトリガーに処理を行う。・イベントには、1つの処理を行うイベントハンドラーと、複数の処理を行うイベントリスナーがある。・イベントハンドラーは単一のイベントに対して複数の処理を設定することができない。(同じイベントに複数のイベントハンドラーを設定した場合は、最後に設定したイベントハンドラーで上書きされるっぽい。・イベントリスナーは、要素オブジェクトのaddEventListenerメソッドで定義する。単一のイベントに対して複数の処理を定義できる。※addEventListenerはメソッドである。メソッドの引数として関数を記述している。※説明:DOMContentLoadedがトリガーのイベント名である。DOMContentLoadedはHTMLの読み込みが完了したというイベントである。onloadの場合は、cssや画像ファイルなどの読み込み全て完了するのを待つが、DOMContentLoadedは画像などの読み込みを待たずに、HTMLのDOM解析が終わった時点で発生するためDOMオブジェクトに対する処理だけを実行する場合はonLoadよりも早く処理が開始される。イベントのキャンセル(.preventDefault();)・aタグのリンクなど、規定のイベントをキャンセルすることができる。・下の例のように、クリックというイベント自体は無くせないので、クリックイベントの後の規定処理をキャンセルするという処理になる。});ウェブページのUIを動的に制御する。・プルダウンから選択したら、下位のプルダウンが表示されるなど、UIを動的に変更できる。・addEventListerなどこれまでのコマンドの複合。新たなコマンドはなし。・APIとは外部のプログラムを呼び出す仕組みのこと。APIとして公開している。Notation)JavaScriptにおけるオブジェクトの表記法を構文としたテキスト形式のでーた記述。JavaScriptとの親和性が高い形式。Nullの値の組み合わせを持つ配列または理想配列。‘name’:’item2′}]JSONP・JSONデータを関数の「引数」として関数の名前と一緒に返す仕組みのことをJSONPという。JSONPの書式は整理すると下記の通りシンプル。・ブラウザにテキストデータを保存できるWebstrageという仕組みがある。・Webstrageはオリジン(httpなどのスキーム、ドメイン、ポート番号)単位でデータを保存する。・Webstrageは10MB。ウィンドウを閉じるまで有効なsessionStrageと、永続的に有効なlocalStrageがある。対してクッキーは4kbで保存時に指定した期限まで。・日付を取り扱うためには、まずインスタンス(オブジェクト)の作成が必要。※月は0~11で取り扱う。http://wwwww3schools.com/記事カテゴリー:memo更新日:2019.6.13公開日:2018.10.7TwitterFacebookB!HatenaPocket↑よかったらシェアお願いします。関連する記事このあたりの記事が関連しそうです。(2TB)をレビューします!よく読まれている記事ASUSノートPCのメモリを4GB⇒8GBに増設してみた。RecodeでMOVからmp4へ変換する時のおすすめ設定5パターン100円で作るシンプルなノートPCスタンドWACOMのペンタブのカーソル位置がずれる。