改めてjsを学んでみるその２

前回の引き続きjsを勉強してなるほどと思ったことを書いていく。

getElementById

よく聞くけどようやく処理の内容を理解できた。
id値をキーに要素を取得するらしい。

html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>javascript</title>
  </head>
  <body>
    <p id="great">this is <strong>tree.</strong></p>
    Now Time:<span id="result"></span>
    <script type="module" src="js/chap6/element_id.js"></script>
    <noscript>Js not found</noscript>
  </body>
</html>

var current = new Date();
var result = document.getElementById('result');
result.textContent = current.toLocaleString();

html側のid="result"に対してjsがDateで日付を取得してきて、getElementByIdでhtml側のid="result"の要素を取得、
日付を文字列に変換してresultに代入する。そうするとhtmlにも反映される。
これがDOM!!!

addEventListener

ページロード時に実行されるイベントリスナーを登録するときに使う。

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('btn').addEventListener('click', function() {
    window.alert('botton is clicking');
  }, false);
}, false);

ファイルアップロード

inputタグのtypeをfileに設定するとfileアップロードボタンになる。
jsでファイルの情報も取得してpythonと組み合わせるとなにか作れそう。

<form>
      <div>
        <label for="file">file:</label>
        <input id="file" name="file" type="file" multiple />
      </div>
</form>

window.addEventListener('DOMContentLoaded', function() {
  document.getElementById("file").addEventListener('change', function(e) {
    var inputs = document.getElementById("file").files;
    for(var i = 0, len = inputs.length; i < len; i++) {
      var input = inputs[i];
      console.log('file name:' + input.name);
      console.log('kind:' + input.type);
      console.log('size:' + input.size / 1024 + 'KB');
      console.log('update:' + input.lastModifiedDate);
    }
  }, true);
})

画像を読み込ませる

画像を読み込ませることができるのか。
これも何かツール作るときやAWS連携して画像保存して貼ったりして使えそう。

<form>
    <label for="file">file:</label>
    <input id="file" type="file" />
</form>
<hr />
<img id="result" />

window.addEventListener('DOMContentLoaded', function() {
    document.getElementById("file").addEventListener('change', function(e) {
        var input = document.getElementById("file").files[0];
        var reader = new FileReader();
        reader.addEventListener('load', function(e) {
            document.getElementById("result").src = reader.result;
        }, true);
        reader.readAsDataURL(input);
    }, true);
});

配列

配列を使うことでテーブルのように色々とデータをもたせられるんだな。
これは次回のアプリに使えそう。

<ul id="list"></ul>

document.addEventListener('DOMContentLoaded', function() {
    var books = [
        { title: 'test go', price: 3200 },
        { title: 'web aplication create', price: 2680 },
        { title: 'java spring', price: 2000 },
    ];

    var list = document.getElementById('list');

    for (var i = 0, len = books.length; i < len; i++) {
        var b = books[i];
        var li = document.createElement('li');
        var text = document.createTextNode(b.title + ':' + b.price + 'yen');
        li.appendChild(text);
        list.appendChild(li);
    }
}, false);

画像

ボタンを押すと画像が出てくる。おもしろい。

<ul id="list">
      <li><a href="JavaScript:void(0)" data-isbn="978-4-7981-3547-2">PHP comp</a></li>
      <li><a href="JavaScript:void(0)" data-isbn="978-4-7741-8030-4">Java Refarence</a></li>
      <li><a href="JavaScript:void(0)" data-isbn="978-4-7741-7984-1">Swift Refarence</a></li>
      <li><a href="JavaScript:void(0)" data-isbn="978-4-7981-4402-3">ASPe</a></li>
      <li><a href="JavaScript:void(0)" data-isbn="978-4-8222-9644-5">Android</a></li>
</ul>
<input id="del" type="button" value="delete" dosabled>
<div id="pic"></div>

document.addEventListener('DOMContentLoaded', function() {
    var list = document.getElementById('list');
    var pic = document.getElementById('pic');
    var del = document.getElementById('del');

    list.addEventListener('click', function(e) {
        var isbn = e.target.getAttribute('data-isbn');

        if (isbn) {
            var img = document.createElement('img');
            img.src = 'http://www.wings.msn.to/books/' + isbn + '/' + isbn + '.jpg';
            img.alt = e.innerHTML;
            img.height = 150;
            img.width = 108;

            if (pic.getElementsByTagName('img').length > 0) {
                pic.replaceChild(img, pic.lastChild);
            } else {
                del.disabled = false;
                pic.appendChild(img);
            }
        }
    }, false);

    del.addEventListener('click', function() {
        pic.removeChild(pic.lastChild);
        del.disabled = true;
    }, false);
}, false);

CSS呼び出し

CSSも呼び出すことができる。これでコードがきれいになる。
やっぱりaddEventListenerは便利。

.highlight {
    background-color: Yellow;
}

<div id="elem">mousePointer</div>

document.addEventListener('DOMContentLoaded', function() {
    var elem = document.getElementById('elem');

    elem.addEventListener('mouseover', function() {
        this.className = 'highlight';
    }, false);

    elem.addEventListener('mouseout', function() {
        this.className = '';
    }, false);
}, false);

今日はこの程度で次回は何か作れればいいな。

たなしょのメモ

日々勉強していることをつらつらと