目次
機械学習とは
プログラミング無しで機械学習
機械学習プログラミング入門
初めてのKeras2.0
- KerasでFineTuning(作成中)
- pythonメモ(作成中)
Ionic4(Angular6)では、Typescriptを使用したガチガチのフレームワークを触っているが、素のJavascriptを少し勉強してみたいので、以下のサイトを写経してみる。
https://qiita.com/C3REVE/items/01cb6b9fd70f622ba622
ちなみに、初めてHTML, CSS, Javascriptを勉強するときは、以下の本がお勧めです。
上記の本を写経した経過は以下に記載しています。
HTMLは、<タグ名></タグ名>のように開始タグと終了タグで他のタグを囲って記述する。
<!DOCTYPE html> <head> </head> <body> </body>
タグ は 属性 を持つことができる。
id 属性 はCSSを指定できる。id はドキュメント内で一意
class 属性 もCSSを指定できる。class はドキュメント内で複数定義できる
タグ で囲った部分をエレメント element という
p タグ で囲まれた
<p id="p4" name="p04" class="even">4</p>
が、element(要素)
⇒ javascriptで出てくる document.getElementById() や、document.getElementsByName() の element
詳細は、https://qiita.com/C3REVE/items/01cb6b9fd70f622ba622#html へ
https://qiita.com/C3REVE/items/01cb6b9fd70f622ba622#css そのまんまです。
SCSSというものがあり、Ionic4(Angular6)ではSCSSを用います。
SCSSのメリットは、
ことらしいです。参考:https://tech.qookie.jp/posts/info-sass-scss-feature/
DOM(document Object Model)は、HTMLのドキュメントにJavaScriptからアクセスするための仕組み。
DOM操作により、HTMLの属性(id, classやname)を変更したり、要素(element, 「開始タグ+内容+終了タグ」)を追加したりすることができる。
参考:https://ja.wikipedia.org/wiki/HTML%E8%A6%81%E7%B4%A0
要素 (element) は、開始タグ (Start-tag)・内容 (Content)・終了タグ (End-tag) の3つから構成される
ということになる。Contentの部分を、javascriptでは、innerHTMLと呼んでいるらしい。。。
<script src=“main.js”></script> は、 bodyタグの後に記述する。
<html> <head> </head> <body> </body> <script src="main.js"></script> </html>
C:/ionic4/js/ フォルダ内に、index.htmlを作成して以下のように記載。(こちらを写経)
このindex.htmlをChromeで開き、設定 > その他のツール > デベロッパーツール
C:/ionic4/js/ フォルダ内に、main.jsを作成して以下のように写経。
main.jsを保存し、Chromeでindex.htmlを更新すると、上記のように、デベロッパーツールのconsole画面に、1 と表示される。
// 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); }
javascriptの配列について:https://qiita.com/takeharu/items/d75f96f81ff83680013f
Tagは、HTMLのタグである、<p>や<div>のことである。
document全体からではなく、変数にあるDOMからその子要素を取得することができる。
と思って以下のようにコードを記載したが、以下のようにエラーが出てうまくいかず。
以下のサイトがわかりやすいです。
https://saruwakakun.com/html-css/reference/selector
CSSのセレクタとは?覚えておきたい25種類と書き方
2018/04/20