ユーザ用ツール

サイト用ツール


サイドバー

目次

機械学習とは

プログラミング無しで機械学習

機械学習プログラミング入門

初めてのKeras2.0

初めてのTensorflow(YouTube)

初めてのChainer2.0

初めてのビットコイン

ビットコイン用語集

初めてのSolidityプログラミング

初めての医療統計

初めてのエクセルで医療統計

初めてのEZRで医療統計

初めてのRStudioでレポート作成

初めてのImageJで画像解析

スマホアプリ作成ソフトIonic3

スマホアプリ作成ソフトIonic4

Ionicのためのjavascript tips

その他

NiftyCloudMobileBackend

税金など

Dokuwiki

sidebar

z_blog:2018:181023_javascript_todo

181023 JavascriptでTODOアプリを写経してみる

Ionic4(Angular6)では、Typescriptを使用したガチガチのフレームワークを触っているが、素のJavascriptを少し勉強してみたいので、以下のサイトを写経してみる。

https://qiita.com/C3REVE/items/01cb6b9fd70f622ba622

ちなみに、初めてHTML, CSS, Javascriptを勉強するときは、以下の本がお勧めです。

上記の本を写経した経過は以下に記載しています。

http://twosquirrel.mints.ne.jp/?p=16475

HTMLについて

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 へ

CSSについて

https://qiita.com/C3REVE/items/01cb6b9fd70f622ba622#css そのまんまです。

  • 何もつけないとタグ名指定
  • 先頭に # を付けると id 指定
  • 先頭に . を付けると class 指定

SCSSというものがあり、Ionic4(Angular6)ではSCSSを用います。

SCSSのメリットは、

  1. 入れ子(ネスト)できる
  2. 変数が使える

ことらしいです。参考: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

要素 (element) は、開始タグ (Start-tag)・内容 (Content)・終了タグ (End-tag) の3つから構成される

ということになる。Contentの部分を、javascriptでは、innerHTMLと呼んでいるらしい。。。

要素elementを取得する

  1. id を指定して取得する document.getElementById()
  2. name を指定して取得する document.getElementsByName()
  3. class を指定して取得する document.getElementsByClassName()

<script src=“main.js”></script> は、 bodyタグの後に記述する。

<html>
<head>
</head>
<body>
</body>
<script src="main.js"></script>
</html>

C:/ionic4/js/ フォルダ内に、index.htmlを作成して以下のように記載。(こちらを写経)

index.html

このindex.htmlをChromeで開き、設定 > その他のツール > デベロッパーツール

C:/ionic4/js/ フォルダ内に、main.jsを作成して以下のように写経。

main.js

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);
}

javascriptの配列について:https://qiita.com/takeharu/items/d75f96f81ff83680013f

document.getElementsByTagName()

Tagは、HTMLのタグである、<p>や<div>のことである。

document全体からではなく、変数にあるDOMからその子要素を取得することができる。

と思って以下のようにコードを記載したが、以下のようにエラーが出てうまくいかず。

CSSのセレクタselectorについて

以下のサイトがわかりやすいです。

https://saruwakakun.com/html-css/reference/selector

CSSのセレクタとは?覚えておきたい25種類と書き方
2018/04/20

要素elementを変更する

  1. className :classを取得/設定する
  2. setAttribute() :属性を設定する
  3. removeAttribute() :属性を削除する
  4. value :inputタグの値を取得/設定する

Javascriptのvar, let, constについて

見出し

z_blog/2018/181023_javascript_todo.txt · 最終更新: 2018/10/24 by adash333