差分

このページの2つのバージョン間の差分を表示します。

--- z_blog:2018:181023_javascript_todo [2018/10/23] – [見出し] adash333
+++ z_blog:2018:181023_javascript_todo [2018/10/24] (現在) – [要素elementを変更する] adash333
@@ 行 30: / 行 30: @@
 </code>
+タグ　は　属性　を持つことができる。
+id 属性　はCSSを指定できる。id はドキュメント内で一意\\
+class 属性　もCSSを指定できる。class はドキュメント内で複数定義できる
+{{:z_blog:2018:pasted:20181023-224534.png}}
+タグ　で囲った部分をエレメント element という
+p タグ　で囲まれた
+<code>
+<p id="p4" name="p04" class="even">4</p>
+</code>
+が、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}}
+<code>
+要素 (element) は、開始タグ (Start-tag)・内容 (Content)・終了タグ (End-tag) の3つから構成される
+</code>
+ということになる。Contentの部分を、javascriptでは、innerHTMLと呼んでいるらしい。。。
+===== 要素elementを取得する =====
+  -id を指定して取得する document.getElementById()
+  -name を指定して取得する document.getElementsByName()
+  -class を指定して取得する document.getElementsByClassName()
+<script src="main.js"></script> は、 bodyタグの後に記述する。
+<code>
+<html>
+<head>
+</head>
+<body>
+</body>
+<script src="main.js"></script>
+</html>
+</code>
+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() =====
+<code>
+// 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);
+}
+</code>
+{{:z_blog:2018:pasted:20181023-234255.png}}
+javascriptの配列について：https://qiita.com/takeharu/items/d75f96f81ff83680013f
+===== document.getElementsByTagName() =====
+Tagは、HTMLのタグである、<p>や<div>のことである。
+document全体からではなく、変数にあるDOMからその子要素を取得することができる。
+と思って以下のようにコードを記載したが、以下のようにエラーが出てうまくいかず。
+{{:z_blog:2018:pasted:20181024-190403.png}}
+===== CSSのセレクタselectorについて =====
+以下のサイトがわかりやすいです。
+https://saruwakakun.com/html-css/reference/selector\\
+CSSのセレクタとは？覚えておきたい25種類と書き方
+/04/20
+===== 要素elementを変更する =====
+  -className :classを取得/設定する
+  -setAttribute() :属性を設定する
+  -removeAttribute() :属性を削除する
+  -value :inputタグの値を取得/設定する
+===== Javascriptのvar, let, constについて =====
+https://qiita.com/masarufuruya/items/096e51c3e4c36c86ae27
+{{:z_blog:2018:pasted:20181024-195309.png}}
 ===== 見出し =====