JavaScript

提供:GNU social JP Wiki

About

JavaScriptはプログラミング言語だ。元はHTMLに埋め込まれウェブブラウザー上で処理をするために作られた言語だが、作業の自動化・GUIの開発・ウェブサーバーの開発など様々な分野に活用されている。

ウェブブラウザーのJavaScriptで可能なことの例を挙げる。

  • HTML文書の要素を追加/変更/削除する。
  • ウェブサーバーに HTTP (HTTPS) で情報を送信する。
  • マウスやキーボードの操作や時間経過に応じて処理を実行する。
  • ウェブブラウザーに情報を記憶させたり読み出したりする (Cookieなど)。

多くの分散SNSのウェブブラウザー版はJavaScriptで実装されており、JavaScriptを実行できない環境 (ターミナル上で動作するテキストブラウザーなど) では利用できない。

GNU socialもQvitterプラグインを使用するならJavaScriptが必要だが、クラシックの場合はJavaScript無しでも閲覧や投稿が可能だ。

JSON

データ記述言語「JSON」は、JavaScriptの構文に多少の制限を加えてデータの記述に特化させたものだ。そのためJavaScriptのパーサーはJSONのコードをそのまま解釈できる。

ECMAScript

JavaScriptの言語仕様はECMAScriptという名前で標準化されている。ECMAScriptには版数があり、仕様改訂を重ねるごとに言語仕様も拡張される。ECMAScriptの版数は古い環境をサポートする上で重要だ。たとえばあるOSの標準ブラウザーがECMAScript 6までの言語仕様しか実装していないなら、それより後に追加された言語仕様はコードに使用できない。

ECMAScript 5.1以前は不定期で仕様改訂されてきたが、2015年に公開されたECMAScript 6以降は年に1度改訂されている。そのため版数はECMAScript 2015のように年で表記されることが多い。

Links

Reference

Expression

this

Ref: this - JavaScript | MDN.

JavaScriptのthisは文脈に応じて対象が異なるので注意が必要。

  • DOM イベントハンドラー: 配置要素。
  • インラインイベントハンドラー: リスナーのDOM要素。

class

出典: クラス - JavaScript | MDN

JavaScriptのclassは実際には特別な関数。

constructor

constructorメソッドは、オブジェクト生成時の初期化用の特別なメソッド。1個しか定義できない。

コンストラクター内で、インスタンスプロパティーを設定する。newで呼び出す際の引数を受け取る。

Topic

テーブルの全チェックオン・オフ

Ref: HTMLのテーブルでチェック行の情報だけ処理するサンプル/PHP・JavaScript - SE_BOKUのまとめノート的ブログ.

テーブルの1列目にチェックボックスを配置して、1行目のチェックボックスで全チェックオン・オフしたいことがある。

<script>
            function AllChanged(){
                var check =  document.getElementById('aaa');
                var checkarr = document.getElementsByName('bbb[]');

                for (var i=0; i<checkarr.length; i++){
                    if(check.checked === true){
                        checkarr[i].checked = true;
                    }else{
                        checkarr[i].checked = false;
                    }

                }
            }
</script>
<body>
    <body>
        <form action="" name="form" method="POST">
        <table>
            <tr>
                <th><input type="checkbox" name="aaa" id="aaa" onClick="AllChanged();" /> </th>
                <th>KEY</th>
                <th></th>
            </tr>
            <tr>
                <td><input type="checkbox" name="bbb[]" value="AAAAAA,100000" onClick="OneChanged();" /></td>
                <td>AAAAAA</td>
                <td>100000</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="bbb[]" value="BBBBBB,200000" onClick="OneChanged();" /></td>
                <td>BBBBBB</td>
                <td>200000</td>
            </tr>
        </table>
        <div>
            <button type="submit" name="b1" id="b1" disabled>ボタンサンプル</button>
        </div>
        </form>
</body>

こんな感じでJavaScriptでチェックボックスを抽出してやる。PHP送信用にvalueに値を入れておく。

Web API

DOMの取得

いくつか方法がある。

  • Document.getElementById(): id属性の値で取得。
  • getElementById()
  • getElementsByClassName()
  • getElementsByName()
  • getElementsByTagName()
  • getElementsByTagNameNS()
  • querySelector

querySelectorが使えるならこれを使うのがシンプル。

Event

Handle

インラインイベントハンドラーの場合、デフォルトでevent変数が引き渡されている (How to pass event as argument to an inline event handler in JavaScript? - Stack Overflow)。

他のイベント処理は自分で指定した引数にEventオブジェクトが渡される。

List

イベントリファレンス | MDN

HTMLのフォームと連携する場合に重要なのがイベント。イベントやHTML要素別に発動するイベントが決まっている。「HTML Standard」がその対応。

特に重要なものを抜粋する。

localStorage

JavaScriptでのデータ保存。使い勝手がいい。

基本はwindowのloadで復元させる。

localStorage.setItem("myCat", "Tom");

const cat = localStorage.getItem("myCat");

window.addEventListener('load', () => {
  document.getElementById('MaMiShare.host').value =
    localStorage.getItem('MaMiShare.host');
});

Form

HTMLと連動したForm関係の処理が入出力で非常に重要。よくあるパターンをいろいろメモしておく。

formの送信データ

Ref: JavaScript オンリーで動的に form タグを作ってデータを送信する方法.

フォームから送信時に、自分でデータを作ったりできる。form要素のformdataイベントがポイント。ここで送信直前に送信データを追加したりできる。送信データのデフォルト値や、JavaScriptでいろいろ収集したデータを自動設定できる。