JavaScript の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• JavaScript へ行く。
• JavaScript の差分を削除

#author("2019-03-09T09:16:16+00:00","default:wikiadmin","wikiadmin")
#author("2019-10-18T10:40:50+00:00","default:wikiadmin","wikiadmin")
-もはや入力チェックやアラートダイアログを出すだけの存在ではない！

#content

*言語仕様 [#k16e4b72]

**ES2015(ES6) [#gd54d9aa]

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

***言語仕様 [#w5cf40db]

|let|再代入可能|
|const|再代入不可能|
|const [a, b, c, d] = ['a', 2, {c: '300'}, '四'];|一度に変数宣言と代入|
|console.log(`わたしは${a}`);|文字列展開|
|export HOGE = 'HOGE'|importすれば別ファイルから利用できる。|

***オブジェクト展開 [#z3175b2c]

const arg = 

***アロー関数 [#dfbc4296]

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

 const fn = (a, b) => a + b;
 const oneArgs = a => a * 2;
 const noArgs =()=> console.log('Hello, world!');  // 引数なしの書き方は()のみ

-二行に渡るなら

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

-省略せずに描くと・・
-省略せずに描くと・・上段は関数リテラルで無名関数なのだが！

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

***スプレッド演算子 [#f0e893b9]

-配列の一括表示

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

-可変長引数を受ける

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

**呼び出しに変数名を指定させる [#ke59b938]

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

*React [#v5f7464a]

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

**Redux [#j6f4b75d]

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



**参考サイト [#r89c3817]

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


*Chromeでデバッグ [#ed472737]

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

*クラスの定義 [#a0113691]

 // この一文で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();

*便利なライブラリ [#b33761a8]

**Prototype.js [#n312497a]

一昔前の主流

**JQuery [#yd9d8996]

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

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

***プラグインの作り方 [#nd6af0df]

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



***onLoadで動かす。 [#k014610b]

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

***タイマーを仕込む [#udf36952]

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

***指定の要素の数をカウントする。 [#m8797115]

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

**関数が定義されているかをチェックする [#d37a9ff9]

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

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

**Jqueryのセレクタ [#p1395bd3]

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

**属性セレクタ [#i9ddcbf4]

-href属性を持つものを取得

 $("[href]")

-href属性がhogeであるもの

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

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

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


**フォームの操作 [#i29a493a]

-値の取得と設定
 $("input").val();
 $("input").val("初期値");

**変更関連（フォーカスON,OFF,変更) [#i9dac245]

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

**フォーム用のセレクター [#f042c258]

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

***セレクトされたもの、チェックされたもの [#z6c50405]

 :selected
 :checked

**Joose [#cf2a08b5]

*その他 [#ld4fcca9]

**Rhino [#qe6c92fe]

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