Javascript

オブジェクトは参照渡し。 プリミティブの場合は値渡しで、コピーして渡すということ

プリミティブデータは値渡し aは5 bは3

windowオブジェクト生成→Documentオブジェクトを生成処理を開始 HTMLを記述順に構文解析(上から順に)開始 ツリー形式で読み込んでいく感じ <script>要素をみつけた時点で、そのまま構文解析し、エラーがなければコードを同期実行 HTMLパース完了(レンダリングが開始される) 外部リソース読み込み(CSSや画像等) ユーザー定義イベントなどのイベント発生 https://qiita.com/tanaShoe/items/f2d8f3d2ae034a094f99

上から順にHTMLが開始されたタイミングとなり、 body要素の最後に位置するため、body要素が全て読み込まれたあとに実行することができます。

テキストノード(#text)として扱われる #textの中に“テキスト値“が入る

nodeValueプロパティを使う var textnode = children.item(0); //テキストノードを取得する console.log(textnode.nodeValue); textnode.nodeValue = "書き換えました";

DOMは、「Document Object Model、つまりドキュメントを物として扱うモデル」のことを言う。 DOMツリーという階層構造を持つ。 javascriptで、DOMを操作できるようにあらゆるApiが設けられている。

おぼえろー

インタフェースで、イベントをサポートするための継承する必要があるクラス addEventListenerやdispatchEventなどのメソッドをサポートする

インタフェース DOMノードの基底として機能する。 次のノードや子要素を表すなど、ツリー上の位置関係に関するプロパティや ノードの追加、削除を行うなどのメソッドを提供する

textノード、commentノード、Elementノード

DOM要素のベースクラス 要素ノードの検索機能や、その要素への変更などを提供する。 また子要素ノードの操作などツリー操作の機能もある HTMLに限らず、XMLやSVGの要素の基底クラスとしても利用される

すべてのHTML要素のベースクラス

JavaScriptコードが動作しているWebブラウザのウィンドウまたはフレームを表すオブジェクト ウィンドウに対する操作などの機能がある。 Nodeは継承してない

ブラウザーに飲み込まれたWebページを示す。 DOMツリーをもつ。 テキストノードやElement、EventなどあらゆるDOMにかかわるオブジェクトはdocumentから生成できる。 また、クエリセレクタなどの要素を特定する機能もある

NodeクラスのnodeValueプロパティを利用する。 console.log(textnode.nodeValue); textnode.nodeValue = "書き換えました"; https://developer.mozilla.org/ja/docs/Web/API/Node/nodeValue elementには利用できなさそう

テキストノードはElementクラスを継承してないため、remove()メソッドで自身を削除できないので、 ノードクラスにあるremoveChildメソッドを使って親側から消すしかない var p = document.getElementById('aaaaa'); var children = p.childNodes; var textnode = children[0]; //テキストノード p.removeChild(textnode);

Element.remove Node.removeChild

作成系はだいだいDocumentオブジェクト がもってる var newelement = document.createElement('p'); console.log(newelement); ちなテキストノードをつくるのはこう！！ var newtextnode = document.createTextNode("新しいテキストノード");

ツリーの操作はノードのメソッドを使う bodyの最後として追加する document.body.appendChild(newelement); insertBeforeを使うととある要素の前に位置指定できる var p = document.getElementById('aaaaa'); p.insertBefore(a, p.firstChild); pの先頭(firstChiledの前)に要素aを追加！

これもノードクラスを利用する previousElementSiblingとnextElementSiblingプロパティを使う var aaa = document.getElementById('aaa'); var prev = aaa.previousElementSibling; var next = aaa.nextElementSibling;

空白や改行もテキストノードとされるため タグの次に改行があれば、 テキストノードがとれてしまう。 previousElementSiblingとnextElementSiblingで回避できる

p.replaceChild(newnode, p.firstChild); 子ノードのなかで、第一引数は置き換えたいノード、第2引数は置き換え元の子ノード ノードのもつメソッド

clonenode var newnode = p.cloneNode(true); 引数にtrueを指定すると、子ノードも全てコピーします。対して、falseを指定すると、そのノードしかコピーしません。つまり、子ノードは全くない状態で新しいノードが作られます。

HTMLで定義されないけど、暗黙的に table要素直下にtbody要素が追加されていること

該当の要素のメソッドを確認し、 なければノードやElement、htmlelementなど継承元なメソッドを確認する

要素に対する操作はelementオブジェクト img.getAttribute("属性名") セットはこう！ img.setAttribute("属性名", "zzzz");

要素からstyleプロパティにアクセスし、設定する p.style.border = "10px solid black"; CSSを利用しない直接的なスタイル設定の方法 以下と同等 <p style="border: 10px solid black;"> 　　　　　↑オブジェクトの書き方と同じなので、プロパティとしてアクセスできるのも納得がいく

document.formsプロパティがあるので、それを使う HtmlCollectionオブジェクトがかえってくる 他にもdocument.imagesとかanchors(a要素かつname属性をもつ) とかlinksとかもある <form id="form1" action="?"> </form> <script type="text/javascript"> var form = document.forms.item(0); console.log(form); </script>

要素の汎用的な集合を表す item(index)メソッドでは、インデックスに応じて要素を返す namedItem(Key)メソッドでは、idまたはname属性を指定して要素をかえす 省略で以下のようなプロパティ形式の書き方ができる var form = document.forms["form1"]; もちろん、これは次のように書いても同じことです。 var form = document.forms.form1;

すべてのオブジェクトの原型

Object.toString() そのオブジェクトの文字列情報を返す オブジェクトが文字列値として表される場面や、文字列が期待される構文で参照されたときに自動的に呼び出されます (console.logでの出力の際に自動で呼ばれることがある(カスタムオブジェクトの場合) オブジェクトと文字列を結合する際に呼ばれたりする) このメソッドがカスタムオブジェクト中で上書きされていない場合、 toString() は "[object type]" という文字列を返します (type は そのオブジェクトの型)。 const o = new Object(); o.toString(); // [object Object] を返す 上書きで使うには、プロトタイプを上書きする。 function Dog(name) { this.name = name; } const dog1 = new Dog('Gabby'); Dog.prototype.toString = function dogToString() { return `${this.name}`; }; console.log(dog1); // Expected output: "Gabby" https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

object.valueOf() プリミティブな値が期待される場面にオブジェクトが出くわしたとき JavaScript が自動的に実行します。 計算の時とかに呼び出される。

7が出力される 上書きしてない場合は "[object Object]3" [object Object]が上書きしてない場合のデフォルトで返される

キーが文字列の場合は ブランケット記法のみ obj["添字１"] キーが変数の場合は ドット記法とブランケット記法どっちも使える obj.aaaaa

プロトタイプは、JavaScript オブジェクトの継承を実現する仕組みで、 オブジェクトとして表現されている。 取得するにはこう Object.getPrototypeOf(myObject); // Object { }

要するに継承のチェーンといえる。 オブジェクト自身にプロパティが見つからない場合は、プロトタイプを検索してプロパティを探します。 なければ、そのプロトタイプのプロトタイプを検索する。　というようにプロトタイプチェーンを遡っていく。

第一引数にプロトタイプ 第二引数に初期化用パラメータを設定 でオブジェクトを作成できる。 オブジェクトリテラルで定義するよりも、既存の情報を利用してオブジェクト作成したい場合に利用する

for inを利用する for (const property in object) 上記の場合はpropertyにキーやプロパティが設定されて繰り返し処理が行われる

for ofを利用する。 const array1 = ['a', 'b', 'c']; for (const element of array1) { console.log(element); } // Expected output: "a" // Expected output: "b" // Expected output: "c"

delete文を利用する delete obj.aaa;

プログラムが実行される前に評価される。 スコープ内にある場合はそのスコープに入った瞬間に評価される また、

関数宣言と違って、関数リテラルが、先に評価される事はありません。 　 プログラムの実行順番と同様のタイミングで評価される

argumentsプロパティを利用すると渡された情報を確認できる function MyFunc (){ // ------------------------------------------------------------ // 引数の総数を取得する // ------------------------------------------------------------ var num = arguments.length; // ------------------------------------------------------------ // 引数から渡されたすべてのデータを順番に取得する // ------------------------------------------------------------ var i; for(i=0;i < num;i++){ // 引数から渡されたデータを取得する var data = arguments[i]; console.log("id:" + i + " data:" + data); } }

trueになる。 属性が追加せれてればtrue扱い 属性追加しないとfalse

default exportは各ファイル一つまでしかつかえないので、コンポーネントとか大きいものに対して使う。あと束縛する名前はインポート側に委ねられる export は細かいものをたくさんインポートさせたいとか、部品だけインポートさせたい時に使う そのままの名前でインポートできる。

canvasタグをHTMLで定義し、 JavaScriptで描画設定する

widthとheight属性

代替コンテンツとして扱われる。 つまり、canvasに対応してないブラウザでは、代替としてそのコンテンツが表示されるようになっている。 対応している場合は表示されない

canvas要素のgetContextメソッドが存在するかを調べることで存在確認ができる。 var canvas = document.getElementById("tutorial"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); // 描画するコードをここに } else { // キャンバスに未対応の場合のコードをここに }

loadイベントなどを利用して、描画設定を行う load イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。

fillStyleプロパティで色を定義(デフォルトは黒)して、 fillRectメソッドで開始座標と横幅、縦幅を指定する。 function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200, 0, 0)"; ctx.fillRect(10, 10, 50, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect(30, 30, 50, 50); } }

fillRect(x, y, width, height) 塗りつぶされた矩形を描きます。 strokeRect(x, y, width, height) 矩形の輪郭を描きます。 clearRect(x, y, width, height) 指定された領域を消去し、完全な透明にします。

こんなかんじ var ctx = canvas.getContext("2d"); //くろでかく ctx.fillRect(25, 25, 100, 100); //クリアする ctx.clearRect(45, 45, 60, 60); //線をかく ctx.strokeRect(50, 50, 50, 50);

Pathを利用する。

beginPathメソッドを利用し、移動する。 ctx.beginPath(); ctx.moveTo(75, 50);

lineToメソッドをよんで、MoveToした位置から指定した座標までパスを描く。 ちなみにパスをかいただけでは、画面には線が描画されるわけではない。 三角形ならlineToメソッドを2回行った後に、closePath()を呼び出すと、現在位置からパスの開始地点(beginPathしたとこ)につなげれる 実際の描画には、stroke()メソッドを呼び出す必要がある。 塗りつぶすにはclosePath()の後にfill()メソッドを使うとできる(closePath()自体、省略してもうまくいく)。 ctx.beginPath(); ctx.moveTo(20,20); //最初の点の場所 ctx.lineTo(100,150); //2番目の点の場所 ctx.lineTo(10,150); //3番目の点の場所 ctx.closePath(); //三角形の最後の線 closeさせる

var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fill();

arcメソッドで中心位置と半径を指定する。　 startAngleとendAngleは円弧を作るための引数で、ラジアンが単位。 ここはちょいむず arcToメソッドでは、 パスに関係するメソッドで、これもむずいが、 直前の座標から、座標から2点を指定し、そこへの直線と、指定した2点を円で描画するイメージ 角を丸めたい時に使えると思う arc(x, y, radius, startAngle, endAngle, counterclockwise) (x, y) を中心の位置、 radius を半径、 startAngle を開始角度、 endAngle を終了角度、 counterclockwise を方向（既定では時計回り）とする円弧を描きます。 arcTo(x1, y1, x2, y2, radius) 指定した制御点と半径によって円弧を描き、その前の描画位置と直線で接続します

キャンバスに対して、点を追加していって繋いで描画するイメージ

ラジアンだとよくわからんので、角度の度数で指定するとわかりやすい 度数×Math.PI/180を指定するとよい 0度は最も左の位置を指しているので 180×Math.PI/180 を開始位置として 0×Math.PI/180 を終了位置にすると一番左の図形がかける

ベジェ曲線てを使うらしい　難しいから、スルー

命名規則で対応するならアンダースコアをつける。 機能で対応するなら weakMapというValueがnullになるとキーごと削除されるマップを利用する方法があるらしい https://qiita.com/ysm001/items/04a7f3dc4795e84eee32

rows tr要素　HTMLTableRowElement が全て入ってる <table id="aaaaa"> <tr> <td>test1</td> <td>test2</td> </tr> <tr> <td>test3</td> <td>test4</td> </tr> </table>

cells そのtr要素が持つtd要素（とth要素）のHTMLCollectionです。

textプロパティ　 書き換えも可能

ノードがもつ getAttributeとsetAttribute img.getAttribute("src") 取得する属性の名前を指定 img.setAttribute("alt", "zzzz"); セットはこう

HtmlElementのプロパティの styleを利用する。 CSSStyleDeclarationオブジェクトがかえる。

プロパティにborderなどのスタイル属性をもつ 設定もできる。 var p = document.getElementsByTagName('p').item(0); p.style.border = "10px solid black";

windowオブジェクトのもつgetComputedStyleメソッドを利用する。 var cssStyleDeclaration = getComputedStyle( element ) ;

elementsというプロパティで HtmlCollectionを返す フォーム内の要素が入ってる。 select要素とか、input要素とか、textarea要素とか、button要素などが入ってる form要素は、入力フォームを作成する要素です。 この要素内に、フォームを構成する各部品を配置していきます。 フォームの各部品は、form要素で囲んでまとまめるのが一般的ですが、HTML5から、部品をform要素の外に出すことも可能となりました。 また、データの送信を行わない場合はform要素自体が不要です。

formプロパティで、フォーム要素を返す disabledプロパティでdisabled属性を返す valueプロパティで、value属性を返す typeプロパティで、type属性を返す

submitとresetがある。 form.submit();

inputタグのタイプでsubmitを指定する 画面にはValueの値のラベルのボタンが表示される <input type=“submit” value=“送信“> これを定義するとボタンを押下した時に、form.submit()を実行する。

formについてはここ アクション属性で指定したURLやPHPに対し、GetやPostメソッドを行える。 GETだとUrlにフォーム要素の情報を付与してGetリクエストを送る！ <form action=“http://www.google.com”> </form>

urlにパラメータを付与するのはgetで、postはリクエストの中にパラメータを入れるので、丸見えにはならない。 戻るボタンで元の値が復元されるのはget 復元されないのはpost <form method="GET" action="http://example.jp/article"> <label>題名：<input type="text" id="title" name="title"></label> <input type="submit" name="submit" value="検索"> </form> <form method="POST" action="http://example.jp/article"> <div><label>題名：<input type="text" id="title" name="title"></label></div> <div><label>著者：<input type="text" id="author" name="author"></label></div> <input type="submit" name="submit" value="検索"> </form>

特有の属性がある場合は、プロパティも用意されてる

blur、focus、click すべて引数はありません。 blurは、そのコントロールからフォーカスを外し、 逆にfocusは与えます。 clickは、そのコントロールをクリックしたことにします。 参考 ユーザがクリックするか、キーボードで Tab キーを使うとき、要素はフォーカスを受け取ります

readOnlyプロパティ <input readonly type="text" value="testtest"> select()メソッド 入力ボックスの文字を全て選択状態にするというもの

checkedプロパティ

optionsプロパティ optionsは、そのselectが持つoption要素のHTMLOptionsCollectionです。 selectedIndex selectedIndexは、今選択されているoptionの番号を取得するプロパティ

セレクト要素に対しオプションを追加 第二引数には追加するところの直後にあるノード（追加した後に新しいノードの後ろに来るノード）を指定 ↑ようするに指定したノードの前に挿入 select.add(option, select.options.item(0) );

nullはリテラル undifinedはundifinedが入った変数である。→書き換えはできない変数 どちらもプリミティブ型

void 0と書くとundefinedになります。これは、新しく登場した演算子「void」の効果によるものです。voidは与えられた値を無視して常にundefinedを返すような演算子です。 undifinedは変数であるため、変数定義が可能であるため、上記の方法で確実にundifined を返すことができる。 var func = function(){ var undefined = 5; // このスコープ内で新しい変数undefinedを定義 console.log(undefined); // 5が表示される }; func(); 例えばvoid "Hey!"とかvoid nullとかでも問題はありません。慣例的にここには0を置くことが多いようです。0は1文字なので最短で書けることも理由のひとつと思われます。

https://developer.mozilla.org/ja/docs/Web/Events

mouseover mouseout 例 <p style="background-color:yellow" onmouseover="aaa();">test</p>

EventTargetクラスのイベントリスナーを利用する var p = document.getElementById('abcd'); p.addEventListener('click', aaa, false); p.removeEventListener('click', aaa, false); 第３引数はuseCaptureで、trueだとキャプチャリングフェーズ falseだとバブリングフェーズでのイベント発火タイミングを指定する https://note.affi-sapo-sv.com/js-addeventlistener-usecapture.php

一回しかイベント処理をしたくないときに使う。 →古いやり方かも　onceをつかえ addEventListenerメソッドは第3パラメータのオプション引数でonceをtrueにすると var p = document.getElementById('abcd'); // イベントリスナ var handler = function(){ console.log('foo!'); p.removeEventListener('click', handler, false); }; p.addEventListener('click', handler, false); onceを利用する例 btn.addEventListener('click', (e) => { e.preventDefault(); console.log("test"); }, { 'once': true // 1度だけのイベントリスナーにするオプション });

複数の要素のイベントをまとめて監視する場合に利用する <div> <p onclick="console.log('p');">test</p> <p onclick="console.log('p');">test</p> <p onclick="console.log('p');">test</p> </div> こういう場合、3つのp要素がそれぞれイベント属性を持つのは無駄です。 <div onclick="console.log('p');"> <p>test</p> <p>test</p> <p>test</p> </div>

キャプチャリングフェーズ Windowからターゲットまで ターゲットフェーズ バブリングフェーズ ターゲットからWindowへ

バブリングなら子要素のイベント処理の中で、 キャプチャリングなら親要素のイベント処理の中で、 ストッププロパゲーションメソッドを呼び出す event.stopPropagation();

eventオブジェクトのプロパティを第３引数として渡す。 div.addEventListener('click', function(){ console.log('div'); }, { capture: true })

ブラウザにデフォルトで定義されているイベント処理を無効化する。 wheelイベント　つまりマウスのスクロールをやったときに ページ内でのスクロールを無効にすることができる。 a要素というのはリンクでした。リンクにおいては「クリック」という動作に対して「リンク先に移動する」という動作がもともと定められており、これも無効化できる その他フォームの送信とかもデフォルト

ブラウザにevent.preventDefaultを使ってないことを伝える。 つまり、ブラウザはデフォルトのイベント処理を、全てのユーザ定義イベント処理が完了するまで待つ必要がなくなり、スムーズに実行できる →スクロールのデフォルトイベントの実行が最適化される可能性あり ブラウザは、ユーザ定義イベントを全て処理して、event.preventDefaultがないことを確認できないと、デフォルトイベントを処理できない。

イベント処理を一回処理すると、2回目は処理されない

event.target イベント発火した要素さす event.currntTarget イベントリスナーを登録した要素をさす (親要素にイベントリスナー登録したりする) 親要素に設定したイベントの中で、実際にイベントが起こった要素によって処理を変更したりできるのです。具体的には、例えばp要素がクリックされたときのみログを出したい場合は、次のようにします。 <script type="text/javascript"> var listener = function(ev){ if(ev.target.tagName == "P"){ console.log('p'); } }; document.body.addEventListener('click', listener, false); </script>

ドキュメントクラスからルート要素を取得する。 document.documentElement ルートノードは document.documentElement.parentNode でとれるが、 documentそのものなので、documentでよい。

document.body

ユーザ定義イベント