上記の本を写経した経過は以下に記載しています。
http://twosquirrel.mints.ne.jp/?p=16475
===== HTMLについて =====
HTMLは、<タグ名>のように開始タグと終了タグで他のタグを囲って記述する。
タグ は 属性 を持つことができる。
id 属性 はCSSを指定できる。id はドキュメント内で一意\\
class 属性 もCSSを指定できる。class はドキュメント内で複数定義できる
{{:z_blog:2018:pasted:20181023-224534.png}}
タグ で囲った部分をエレメント element という
p タグ で囲まれた
4
が、element（要素）
=> javascriptで出てくる document.getElementById() や、document.getElementsByName() の element
{{:z_blog:2018:pasted:20181023-233215.png}}
詳細は、https://qiita.com/C3REVE/items/01cb6b9fd70f622ba622#html へ
===== CSSについて =====
https://qiita.com/C3REVE/items/01cb6b9fd70f622ba622#css そのまんまです。
* 何もつけないとタグ名指定
* 先頭に # を付けると id 指定
* 先頭に . を付けると class 指定
{{:z_blog:2018:pasted:20181023-225458.png}}
SCSSというものがあり、Ionic4(Angular6)ではSCSSを用います。
SCSSのメリットは、
-入れ子（ネスト）できる
-変数が使える
ことらしいです。参考：https://tech.qookie.jp/posts/info-sass-scss-feature/
===== JavascriptのDOM操作について =====
DOM(document Object Model)は、HTMLのドキュメントにJavaScriptからアクセスするための仕組み。
DOM操作により、HTMLの属性(id, classやname)を変更したり、要素（element, 「開始タグ＋内容＋終了タグ」）を追加したりすることができる。
参考：https://ja.wikipedia.org/wiki/HTML%E8%A6%81%E7%B4%A0
{{:z_blog:2018:pasted:20181023-230944.png}}
要素 (element) は、開始タグ (Start-tag)・内容 (Content)・終了タグ (End-tag) の3つから構成される
ということになる。Contentの部分を、javascriptでは、innerHTMLと呼んでいるらしい。。。
===== 要素elementを取得する =====
-id を指定して取得する document.getElementById()
-name を指定して取得する document.getElementsByName()
-class を指定して取得する document.getElementsByClassName()
は、 bodyタグの後に記述する。
C:/ionic4/js/ フォルダ内に、index.htmlを作成して以下のように記載。（[[https://qiita.com/C3REVE/items/01cb6b9fd70f622ba622#%E8%A6%81%E7%B4%A0%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B|こちら]]を写経）
index.html
{{:z_blog:2018:pasted:20181023-232041.png}}
このindex.htmlをChromeで開き、設定 ＞ その他のツール ＞ デベロッパーツール
{{:z_blog:2018:pasted:20181023-232351.png}}
{{:z_blog:2018:pasted:20181023-232453.png}}
C:/ionic4/js/ フォルダ内に、main.jsを作成して以下のように写経。
main.js
{{:z_blog:2018:pasted:20181023-232832.png}}
main.jsを保存し、Chromeでindex.htmlを更新すると、上記のように、デベロッパーツールのconsole画面に、1 と表示される。
===== document.getElementsByName() =====
// nameを指定して取得
// nameはHTML内で複数存在する可能性がある
// document.getElementsByName()は配列を返す
// getElmentbyId はElement（単数形）、getElementsByNameはElements（複数形）
// 配列を取得するために、以下のスクリプトではfor文を用いる
var elements = document.getElementsByName('p02');
for (var i = 0; i < elements.length; i ++) {
console.log(elements[i].innerHTML);
}
{{:z_blog:2018:pasted:20181023-234255.png}}
javascriptの配列について：https://qiita.com/takeharu/items/d75f96f81ff83680013f
===== document.getElementsByTagName() =====
Tagは、HTMLのタグである、や