JavaScript
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
-もはや入力チェックやアラートダイアログを出すだけの存在で...
#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)...
**関数が定義されているかをチェックする [#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( 'che...
**属性セレクタ [#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から標準添付
終了行:
-もはや入力チェックやアラートダイアログを出すだけの存在で...
#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)...
**関数が定義されているかをチェックする [#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( 'che...
**属性セレクタ [#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から標準添付
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
