JavaScript の履歴(No.14)

もはや入力チェックやアラートダイアログを出すだけの存在ではない！

#content

言語仕様†

ES2015(ES6)†

2018年現在では主要ブラウザはほぼ対応している
古いブラウザ対応のためにトランスパイラを使うことが多い

言語仕様†

let	再代入可能
const	再代入不可能
const [a, b, c, d] = ['a', 2, {c: '300'}, '四'];	一度に変数宣言と代入
console.log(`わたしは${a}`);	文字列展開

↑

アロー関数†

超省略系の書き方ができる

const fn = (a, b) => a + b;

二行に渡るなら

const fn = (a, b) => {
  return a + b;
};

省略せずに描くと・・

const fn = funciont(a, b) { return a + b; }

↑

スプレッド演算子†

配列の一括表示

const array = [1, 10, 3];
console.log(...array);

可変長引数を受ける

const func2 = (...r) => console.log(...r);

↑

呼び出しに変数名を指定させる†

const full = ({first,last}) =>  { return first + last; };
full({ first:'苗字',last:'名前'});

↑

React†

Virtual DOM
コンポーネント中心。MVCのV担当でJSの中にHTMLを記載できる。
JSではタグが扱えないので事前にコンパイルするか、実行直前に変換する。
PHPのようにRenderでHTMLの一部を返すような仕組み。

↑

Redux†

状態やそれに対応するActionなどを管理するフレームワーク

↑

参考サイト†

https://qiita.com/tomzoh/items/7fabe7cb57dd96425867

↑

Chromeでデバッグ†

https://app.codegrid.net/entry/breakpoint-1

↑

クラスの定義†

// この一文でprototypeプロパティが使えるようになる
function Foo() {};
// ここで定義を代入。
Foo.prototype = {
    init:function() { alert('A');},
    test:function() { alert('B');}
};

// newして使う必要があるのか･･･
var foo = new Foo();
foo.init();

function Foo() {};
Foo.prototype = {
    init:function() { alert('A');},
    test:function() { alert('B');}
};
Foo.A = function()
{
    alert('A is static');
}
Foo.B = function()
{
    alert('B is static');
}
// newして使う必要があるのか･･･
var foo = new Foo();
foo.init();
// prototypeをはさまないとそのまま実行可能！
Foo.A();
Foo.B();

↑

便利なライブラリ†

↑

Prototype.js†

一昔前の主流

↑

JQuery†

2009年現在はこちらのほうがよろしいらしい。

http://www.slideshare.net/hayatomizuno/jquery-7665168

↑

プラグインの作り方†

http://web-terminal.blogspot.jp/2012/11/jquery4.html

↑

onLoadで動かす。†

$(function () { alert('test'); });

↑

タイマーを仕込む†

setInterval(function(){ alert('test'); },10000);

↑

指定の要素の数をカウントする。†

if ($('#探したい場所のID .その配下のクラス').length > 0) { alert('test'); }

↑

関数が定義されているかをチェックする†

alert(typeof($.cookies.set));

定義されていればobjectとでる。

↑

Jqueryのセレクタ†

LI要素

$('li')

LI要素かつクラス名hoge

$('li.hoge')

LI要素かつIDhoge

$('li#hoge')

子孫セレクタDIV contentsのLI

$('DIV#contents LI')

子セレクタ DIVの直下のLI

$('DIV#contents > LI')

グループセレクタ(カンマで区切る)

$('#first, #third")

Aタグのhref要素を回す

$("a[href]").each(function(){
}

DIV#hoge以下のAで絞るバージョン

$("DIV#hoge a[href]").each(function(){
}

チェックボックスをすべてOFF

$("input[type='checkbox']").removeAttr( 'checked' );

チェックボックスをすべてON

$("input[type='checkbox']").attr( 'checked', 'checked' );

クラス名hoge以下クラス名fuga以下のチェックボックスOFF
```
$(".hoge .fuga input[type='checkbox']").removeAttr( 'checked' );
```

↑

属性セレクタ†

href属性を持つものを取得

$("[href]")

href属性がhogeであるもの

$("[href='hoge']")

href属性がhogeで始まる、終わるもの

$("[href^='hoge']")
$("[href$='hoge']")

↑

フォームの操作†

値の取得と設定

$("input").val();
$("input").val("初期値");

↑

変更関連（フォーカスON,OFF,変更)†

$("input").("focus",function(){});
$("input").("blur",function(){});
$("input").("change",function(){});

↑

フォーム用のセレクター†

input[type='text']
input[type='password']
input[type='radio']
input[type='checkbox']
input[type='submit']
input[type='image']

↑

セレクトされたもの、チェックされたもの†

:selected
:checked

↑

Joose†

↑

その他†

↑

Rhino†

JavaでかかれたJavaScript実装。J2SE6.0から標準添付