MDN Day1

Javascriptの勉強。まずはMDNを仕上げてみる。ここが基本なので多少は時間がかかるかもしれないがじっくりすすめていく。

scriptタグの位置は</body>の直前

chromeの開発ツールからjavascriptコンソールが使える

javascriptコンソールでの改行方法は shift + return

eventlistnerに関数を紐づける

document.querySelector('html').onclick = function() {};

htmlコードに対してjavascriptのコードを書かない

以下はダメな例

<button onclick="createParagraph()">押してください</button>

addEventListnerで対応する

buttons[i].addEventListener('click', createParagraph);

Scriptの読み込み

順番が関係ない場合には、asyncを指定する。依存関係がある場合にはdeferを指定して、依存関係の順番でhtmlに記述する

コンソールから関数を呼び出すとき

()をつけると関数呼び出し、()をつけないと定義の呼び出し

document.querySelector

タグ、クラス、IDにより記述方法は異なる

代入演算子=と等値演算子===

代入は式で利用する。等値はifなどの評価で利用する。ifで代入演算子を使うとtrueが戻る

入力を求める

promptを利用する。メッセージの出力ならconsole.logもしくはalertを使う。

varとletの違い

varには巻き上げがある→複数回の宣言ができる。letは一回しか宣言できない。letのほうが新しいのでletを利用するべきである。実行時エラーを防ぐ効果もあり。

変数のタイプを確認

typeof

文字列操作

slice, indexOf, replace

モデルとhtml

モデルを更新(リストとか）→モデルからhtmlを作成→innerHTHML = “”→appendChild

文字列のプレースホルダー

  newStory = newStory.replace(':insertx:',xItem);

html上のオブジェクト取得

queryselectorを使う。valueを操作すれば値を変えられる。backgroundcolorを指定すれば見た目を変えられる。

匿名関数の使い方

直接イベントに代入する。var aaaに代入して利用する←いまいちこの使い道がわからない。

自分自身を削除

panel.parentNode.removeChild(panel);

タイル状に並べる

div {
background-color: red;
height: 100px;
width: 25%;
float: left;
}

for (var i = 1; i <= 16; i++) {
var myDiv = document.createElement(‘div’);
document.body.appendChild(myDiv);
}

イベントを途中で止める

e.preventDefault();



バブリングとキャプチャリング

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture

objectのメンバーにアクセス

person.name もしくは person[“name”]。前者はすっきりしている。後者は動的にメンバー名を変更できる。

objectに関数を指定する

匿名関数で名前を指定する。greeting: function() {}