勉強備忘録:ドットインストールはじめてのjavascript
1.htmlの雛形の復習
<!DOCTYPE html>…HTML5であることを宣言
<html>開始タグ
<head>タグ…メタ情報を記述。
ファイルのタイトル、何に関する文書かの説明、キーワード、
文字エンコード、作成者、スタイルシートなど。
<body>タグ…文書の本文。
タグに規定されたとおりにブラウザに表示される。同じページに表示される内容はすべて1つのbody部分に記述する。
2.javascriptを使用時のhtmlの文法・ルール
・bodyタグの終了直前に、scriptタグを書く。
(全ての要素を読み込んでから、scriptを読み込むため)
・javascriptからhtml要素を指定するには、idをつけておく。
(idを指定して、操作するメソッドが多くある 例getElementByIdなど)
3.javascriptの文法・ルール
・usestrict…ブラウザがエラーチェックするために記述する。
・大文字小文字は区別される。
・document…文書全体。
・getElementById()…引数をidにもつ要素を取得する。
・addEventListener(イベントの種類、イベント発生時の処理(関数など))
…イベントが発生したら、処理を行う。
関数の設定方法は、3種類
外部の関数を設定する方法: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…引数として与えた数以下の最大の整数を返す。
3.cssの文法・ルール
・transition…CSSプロパティが変化する際のアニメーションの速度を操作
・transform…要素に対して移動、回転、伸縮、傾斜の変形を加える
transitionと一緒に使われることが多い
・Flexbox…細かい所を自動で調整してくれたり、簡単にレイアウトを
作成することができる。floatなどでは、今は横並びを書かない。
親要素にdisplay:flexを指定し、そのほか必要なプロパティを指定する。
4.javascript開発方法
・エラーは、ブラウザのデベロッパーツールのconsoleタブから確認する。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?