JavaScript入門(備忘録用）

こんにちは。sinyです。

この記事はJavaScript学習の復習のための備忘録として記載しています。

JavaScript初学者向けに抑えておいた方がよい点やつい忘れてしまいがちな情報をコンパクトにまとめています。

ES2015(ES6)

2015年にJavaScriptの仕様が大きく改訂され、ECMAScript2015（ES6)と呼ばれています。

外部jsの読み込み

外部のjavascirptファイルを読み込むには以下のように記載する。

<script src="script.js"></script>

※開始タグと終了タグの間には何も書かない。

基礎構文

通常のfor文

javascriptのfor文は以下の通り。
python[ for 変数名 in 配列; ]と比較するとだいぶ違うので備忘のため記載。

<script>
'use strict';

let todo = ['Python学習', 'Django学習', 'ディープラーニング学習'];
for(let item of todo){
    window.alert(item);
}
</script>

オブジェクトにおけるfor文

オブジェクトに対してfor文を使う場合は、for(let 変数 in オブジェクト変数）{~処理～}を使う。

<script>
'use strict';

let items = {title: 'Django入門', price:5000, stock:3};
for(let item in items) {
    console.log(item + '=' + items[item]);
}
</script>

forEachによる繰り返し

配列の各項目を繰り替えす場合はforEachを使うとよい。

具体例として、以下のthumbクラス要素をすべて取得してforEachでループする場合

        <ul>
            <li><img src="thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li>
            <li><img src="thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li>
            <li><img src="thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li>
            <li><img src="thumb-img4.jpg" class="thumb" data-image="img4.jpg"></li>
        </ul>

const thumbs = document.querySelectorAll('.thumb');

thumbs.forEach(function(item, index) {
    item.onclick = function(){
        console.log(item.dataset.img);
    }
});

htmlタグ内には「data-<好きな定義>」という形で属性を定義できる。

この属性を定義することでjavaScriptからその値を取得して処理に活用できる。

配列のメソッド

テンプレート文字列

バックティック「`」で囲んだ文字列のことを「テンプレート文字列」という。
テンプレート文字列を使うと文字列中に変数を組み込むことができる。

let todo = ['Python学習', 'Django学習', 'ディープラーニング学習'];
todo.push('Javascriptの学習');
for(let item of todo){
    const li = `<li>${item}</li>`;
    console.log(li);
}
</script>

これで以下のようなli要素を生成できる。

<li>Python学習</li>
<li>Django学習</li>
<li>ディープラーニング学習</li>
<li>Javascriptの学習</li>

要素の追加

オブジェクト

オブジェクトのプロパティには値だけでなく関数を設定することができる。

let obj = { addTax: function(num){ return num * 1.10; } };
console.log(obj.addTax(1000));

>> 1100

obj.addTaxという形でメソッドを実行させることができる。

メッセージの表示

alertメソッド

単純にメッセージを表示する場合はwindowsオブジェクトのalertメソッドを使う。

<script>
    'use strict';
  
    window.alert('エラーが発生しました。');
</script>

確認ダイアログを表示させたい場合はconformメソッドを使う。

<script>
    'use strict';
    console.log(window.confirm('処理を開始します。よろしいですか？'));
  
</script>

※戻り値としてOKを押した場合はTrue、キャンセルを押した場合Falseが返ってくるので、以下のようにif文で処理を分岐させることができる。

<script>
    'use strict';
    if(window.confirm('処理を開始しますがよろしいですか？')){
        window.alert('処理を開始します。');
    } else {
        window.alert('処理を終了します。');
    }

</script>

イベント系

onsubmitメソッド

onsubmitイベントは送信ボタンがクリックされた直後で入力内容がサーバに送信される直前に発生する。

取得した要素.onsubmit　= function() {処理内容｝;

document.getElementById("form").onsubmit = function() {
    console.log("クリックされました！");
}

テキストフォームに入力された値を取得する

以下のようなテキスト入力ボックスに入力された値を取得するには以下の順で取得する。

<form action="#" id="form">
    <input type="text" name="word">
    <input type="submit" value="検索">
</form>

※<input>をはじめとするフォーム部品に入力された値はvalueプロパティに保存されている。

タグの基本動作をキャンセルする

ある要素にイベントが発生するとイベントに代入した関数が実行されるが、その関数にはイベントオブジェクトが渡される。

このイベントには様々なイベントに関する情報がプロパティとして保存されていて、イベントの動作を変更するためのめっそどが含まれる。

その中に１つにpreventDefaultメソッドがあり、これを指定するとタグの基本動作をキャンセルできる。

document.getElementById("form").onsubmit = function(event) {
    event.preventDefault();
    ～処理～
}

上記の例だと、送信ボタンを押した際に「データを送り、action属性で指定したページに遷移する」処理をキャンセルできる。

Option切り替え時にイベントを発生させたい場合

    <form id="form">
        <select name="select">
            <option value="index.html">日本語</option>
            <option value="index-en.html">English</option>
        </select>

document.getElementById('form').select.onchange = function(){
    location.href = document.getElementById('form').select.value;

HTMLの書き換え

特定のID名を持つ要素を取得する

特定のID要素を取得するにはdocumentオブジェクトのgetElementByIdメソッドを使う。

<p id="target">現在時刻を表示</p>
<script>
    'use strict';
    console.log(document.getElementById('target'));
  
</script>

CSSセレクタで要素を取得する

document.getElementByIdはid属性がないと使えないが、そういう場合はCSSセレクタで要素を取得できるdocument.querySelectorが使える。

document.querySelector('html')

document.querySelector('option[value="index.html"]')

要素のコンテンツの書き換え

htmlタグの属性の書き換え

比較演算子の注意点

条件が一致するか比較する場合は「===」(比較演算子）を使うのが無難。

「＝＝」も2つの値が一致しているか比較する演算子だが以下のような違いがあるので注意。

Mathオブジェクト

Math.floor(Math.random()*10)

その他は以下を参照。

メソッド系

parseInt()　→　文字列を整数に変換

演算子のまとめ

Dateオブジェクト

const now = new Date();　と引数なしで定義すると現在日時を記憶した状態で初期化される。

StringオブジェクトとpadStartメソッド

文字数を一定の桁に揃えたい場合に使える。

<文字列>.padStart(揃える文字数, 埋め合わせる文字)

number = 2
String(number).padStart(2,'0');

※なお、Stringメソッドで数値を文字列に変換してからpadStartメソッドにかます必要がある。

プルダウンメニューのHTMLについて

プルダウンメニューは<select>タグで定義し、子要素に選択項目を<option>tぐで定義する。

    <form id="form">
        <select name="select">
            <option value="index.html">日本語</option>
            <option value="index-en.html">English</option>
            <option value="index-zh.html">中文</option>
        </select>
    </form>

HTML要素を削除する

HTML要素を削除するにはremoveChild()メソッドを使う。

取得した要素.removeChild(削除したい要素);

例えば、<divid="test1">　～ </div> を削除したい場合は以下のようなコードになる。

const target = document.getElementById('test1');

document.body.removeChild(target);

jQuery関連メソッド

良く使われるjQueryのメソッド一覧

toggleClass()

toggleClassメソッドは取得した要素に()内のパラメータで指定されたクラス名がなければ追加、あれば削除してくれる。

toggleClass('hidden') → <ul class="hidden">なら削除

toggleClass('hidden') → <ul class="">ならhiddenを追加