勉強備忘録：ドットインストールはじめてのjavascript
１．htmlの雛形の復習
<!DOCTYPE html>…HTML5であることを宣言
<html>開始タグ
<head>タグ…メタ情報を記述。
ファイルのタイトル、何に関する文書かの説明、キーワード、
文字エンコード、作成者、スタイルシートなど。
<body>タグ…文書の本文。
タグに規定されたとおりにブラウザに表示される。同じページに表示される内容はすべて1つのbody部分に記述する。
２．javascriptを使用時のhtmlの文法・ルール
・bodyタグの終了直前に、scriptタグを書く。
（全ての要素を読み込んでから、scriptを読み込むため）
・javascriptからhtml要素を指定するには、idをつけておく。
（idを指定して、操作するメソッドが多くある 例getElementByIdなど）
３．javascriptの文法・ルール
・usestrict…ブラウザがエラーチェックするために記述する。
・大文字小文字は区別される。
・document…文書全体。
・getElementById()…引数をidにもつ要素を取得する。
・addEventListener(イベントの種類、イベント発生時の処理（関数など）)
…イベントが発生したら、処理を行う。
関数の設定方法は、３種類
外部の関数を設定する方法：function 関数名(引数){}
引数に無名関数：function(){}
引数にアロー関数：(引数)=>{}
ファイルをわける場合は、外部に設定、そうでない場合は、アロー関数
無名関数がアロー関数に変わった。（ES6）
アロー関数は、宣言された時点で、thisを確定（＝束縛）する。
・定数は、constで指定する。
・classlist…elementのプロパティ
classListの後にメソッドを定義することにより、
追加削除などの機能を指定する。
element.classlist.add…クラスを追加する。
element.classlist.toggle…クラスが含まれていれば削除、
含まれていなければ追加する。
講座の中では、イベント処理の関数内で、cssのクラスの追加削除を
行っていた。
・document.creatElement()…tagName で指定された HTML 要素を生成。
・document.body.appendChild()…特定の親ノードの子ノードの最後に
ノードを追加する。既に存在していたら、既存のノードが置き換わる。
・document.textContent…ノードおよびその子孫のテキストの内容。
（Node.textContent と HTMLElement.innerTextの違い要注意）
・Math.Rondom…0–1（0以上、1未満）の浮動小数点の擬似乱数を返す。
・Math.floor…引数として与えた数以下の最大の整数を返す。
３．cssの文法・ルール
・transition…CSSプロパティが変化する際のアニメーションの速度を操作
・transform…要素に対して移動、回転、伸縮、傾斜の変形を加える
transitionと一緒に使われることが多い
・Flexbox…細かい所を自動で調整してくれたり、簡単にレイアウトを
作成することができる。floatなどでは、今は横並びを書かない。
親要素にdisplay:flexを指定し、そのほか必要なプロパティを指定する。
４．javascript開発方法
・エラーは、ブラウザのデベロッパーツールのconsoleタブから確認する。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？