約 2,904,190 件
https://w.atwiki.jp/comcatet/pages/41.html
制御文for - JavaScript | MDN for...in - JavaScript | MDNオブジェクトの列挙可能プロパティに対するループ処理 for...of - JavaScript | MDN while - JavaScript | MDN do...while - JavaScript | MDN 配列(Array)Array.prototype.forEach() - JavaScript | MDN Array.prototype.every() - JavaScript | MDNコールバック関数が全てtrueを返せば、戻り値true。コールバック関数がどこかでfalseを返すと、その時点でループ処理が終了して戻り値false。 Array.prototype.some() - JavaScript | MDNコールバック関数が全てfalseを返せば、戻り値false。コールバック関数がどこかでtrueを返すと、その時点でループ処理が終了して戻り値true。 Array.prototype.find() - JavaScript | MDNコールバック関数がtrueを返す最初の要素を返す。 indexが欲しければ↓ Array.prototype.findIndex() - JavaScript | MDN Array.prototype.filter() - JavaScript | MDNコールバック関数がtrueを返す配列要素のみで構成された新しい配列を返す。 Array.prototype.map() - JavaScript | MDNコールバック関数が返す値で構成された新しい配列を返す。 Array.prototype.reduce() - JavaScript | MDN前の要素の処理結果を次の要素の処理に使える。最後の要素の処理結果がこのメソッドの戻り値となる。 処理の順番を配列の後ろ側からにしたければ↓ Array.prototype.reduceRight() - JavaScript | MDN Array.prototype.entries() - JavaScript | MDN配列のindexと要素をkey/value型(Map型)のイテレータにして返す。 MDNでは反復メソッドに分類されてるけど、内部的にはともかく表面的にはアクセサメソッドじゃない? というか、引数無くて戻り値一定なので、メソッドである必要すら無い気が。 keyのみ、valueのみのイテレータが欲しければ↓ Array.prototype.keys() - JavaScript | MDN Array.prototype.values() - JavaScript | MDN ↓現在では Array.from() を使用すればいいので、不要。 NodeListを配列に変換するのにArray.applyを使うのはどうか - rikubaの日記 配列ライクなオブジェクトをforEachするときのイディオム - ぷちてく - Petittech
https://w.atwiki.jp/dendaiman/pages/61.html
(参考元) 2017年度版、5分でわかるJavaScript https //paiza.hatenablog.com/entry/javascript_intro#first 現代の JavaScript チュートリアル https //ja.javascript.info/ whileループ while(condition){ code } ループ1回の実行のことをイテレーションという ループの本体が一行の場合、{ }を省略可能 do...whileループ do{ code }while(condition) 最初に本体が実行され、次に条件チェックをするループ 基本的に、少なくとも1度はループ本体を実行したい場合のみ使用する do内とwhile内両方のチェックが真になるまで終了しない forループ for (begin; condition; step) { // ... loop body ... } ()内のパーツとそれぞれの役割 begin ループに入ると1度実行される condition 全てのループインテレーションの前にチェックされfalseの場合ループを停止 step 各イテレーションで、本体の後に実行される forループ内で宣言された変数はインライン変数と呼ばれ、そのループ内のみで呼び出せる beginやstepは、それぞれが意味を為さなければ省略可能(セミコロンは省略不可) break/continueディレクティブ break ループをその場で強制停止し、ループから抜け出す。if文などと合わせて使用することが多い。 continute ループ全体は停止しないが、現在のイテレーションを停止し次のイテレーションに移行する。 こちらもif文などの条件式と併用する。 break/continueのラベルとの併用 for文などのループにラベル LabelName をつけることで、break/continueさせる対象のループを指定することが出来る。 複数のネストしたループなどで使われる。 ⚠️ループ内からのみ指定可能 switch文 switch(x) { case value1 // if (x === value1 ) ... [break] //breakした場合は以降のチェックは行わない case value2 // if (x === value2 ) ... [break] default ... [break] } defaultは、どのcaseにも当てはまらない場合に実行される 同じ処理を行う場合、caseをグループ化して記述することができる(グルーピング) 例)(case部分の記述のみ) case ケース1 case ケース2 alert("ケース1かケース2です”); 等価チェック・比較は厳密なので注意 * * * * * * *
https://w.atwiki.jp/ochamemo/pages/12.html
オチャメモ TODO 基礎 javascriptの型 未定義オブジェクト 数値かどうかのチェック 空のオブジェクト 配列とハッシュ すべてはハッシュ JavaScriptにおけるメンバの定義 JavaScriptにおけるメンバの削除 for in 可変引数 コンストラクタ プロトタイプとは? プロトタイプの仕組み(プロトタイプチェーン) クラス定義 クラス継承 関数について NullとUndefined 配列 関数 apply()メソッドとcall()メソッド 演算子 等値演算子と同値演算子 thisとprototypeどっちで定義すればよいか? 参考リンク 非常に参考になる 読み物系 TODO javaのアクセス指定子の勉強 js.jarのjnlpの指定方法 js.jarのmavenの指定方法 基礎 javascriptの型 プリミティブ系 number--string--boolean-オブジェクト系--object---Number---String---Boolean---Array---[] null function 未定義オブジェクト 未定義オブジェクトかどうかを判定するには以下の方法がある。 // 以下は全部同義(undefined, !, null) var hoge; if (hoge == undefined) { alert("未定義(undefined)"); } if (!hoge) { alert("未定義(!hoge)"); } if (hoge==null) { alert("未定義(null)"); } 連想配列の未定義のチェック var hoges = new Array(); var hoge = hoges["hoge"]; if (hoge == undefined) { document.write("未定義"); } 数値かどうかのチェック if(!isNaN(value)){ document.write("数字"); } 空のオブジェクト var Object = {}; 配列とハッシュ var hash = { java 0, script 1}; var array = [ java , script ]; すべてはハッシュ var hello = {}; hello.world = function() { return "hello, world!" }; hello.hoge = hoge ; alert(hello.hoge); alert(hello[ hoge ]); alert(hello.world()); alert(hello[ world ]()); JavaScriptにおけるメンバの定義 var obj = new Object(); alert(obj.field); // 未定義。未定義の場合 undefined と評価される。 obj.field = 10; // 代入により field というメンバが定義された。 alert(obj.field); // 10 と評価される。 JavaScriptにおけるメンバの削除 var obj = new Object(); obj.field = 10; alert(obj.field); // 10 と評価される。 delete obj.field; // delete 演算子により fieldプロパティが削除される。 alert(obj.field); // 削除され未定義となったため undefined となる。 for in 連想配列からキーを取得できる var info = new Array(); info["name"] = "hoge"; info["type"] = "cat"; info[0] = "A"; info[1] = "B"; for( key in info ){ alert( key + " " + info[key]); } for in でオブジェクトのプロパティを列挙できる var obj = new Object(); obj.foo = value1 ; obj.bar = value2 for (var key in obj) { alert(key + " " + obj[key]); // keyにハッシュのキーが入る(プロパティ名) } 可変引数 argumentsオブジェクトを使うことにより動的にアクセス可能 function hoge(arg1, arg2) { alert(arg1 == arguments[0]); // true alert(arguments[3]); // 4 } hoge(1, 2, 3, 4); コンストラクタ // コンストラクタとは関数定義のこと。 var Hoge = function(){}; // だからこれもコンストラクタ。 function Hoge(){}; // で、これをnewしたらHogeオブジェクトのできあがり var hoge = new Hoge(); // フィールドを定義したい場合は以下のようにthisをつけて代入すればよい var Hoge = function(){ this.field1 = 0; this.field2 = hoge ; }; プロトタイプとは? プロトタイプとはjavaでいうインスタンス。-プロトタイプベースオブジェクト指向とはつまりインスタンスベースクラス指向のこと。-javaのようにクラスの雛形をもとに静的にクラスを生成するのではなく、インスタンスをベースにクラスを量産するというイメージ。**プロトタイプの仕組み(プロトタイプチェーン) コンストラクトした時点では、prototypeは通常、ただの空オブジェクト。 まずオブジェクト自身のプロパティから、該当のプロパティ名を探索 なかった場合、オブジェクトのprototypeオブジェクトのプロパティの中から該当する名前のプロパティを探す。 それでもなければ、そのプロトタイプオブジェクトのprototypeから探索する。 最終的になにもプロパティを持たないprototypeになるまでこれを繰り返す。 見つからなければ、そこで代入になる。参照だったらundefinedのエラーになる これがプロトタイプチェーン。 クラス定義 this,prototypeに定義したメンバは、newしないと参照できない。 定義した変数に直接メンバを設定するとクラス変数、クラスメソッドとなる。 var Hoge = function() { this.thisField = 10; this.thisMethod = function() { return hoge ; }; }; Hoge.prototype.protoMethod = function() { return hogehoge ; }; Hoge.prototype.protoField = 20; Hoge.FIELD = 30; // クラス変数 Hoge.METHOD = function() { return hogehogehoge ; }; // クラスメソッド var hoge = new Hoge(); // prototypeとthisはnewしないと参照できない alert( hoge.thisMethod() +hoge.thisMethod()); // = hoge alert( hoge.protoMethod() +hoge.protoMethod()); // = hogehoge //alert( hoge.METHOD() +hoge.METHOD()); // = エラー not a function alert( hoge.thisField +hoge.thisField); // = 10 alert( hoge.protoField +hoge.protoField); // = 20 //alert( Hoge.thisMethod() +Hoge.thisMethod()); // = エラー not a function //alert( Hoge.protoMethod() +Hoge.protoMethod()); // = 同上 alert( Hoge.FIELD +Hoge.FIELD); // = 30 alert( Hoge.METHOD() +Hoge.METHOD()); // = hogehogehoge クラス継承 prototypeにスーパクラスのインスタンスを設定すればよい。 // スーパクラス var Hoge = function() { this.thisField = 10; this.thisMethod = function() { return hoge ; }; }; Hoge.prototype.protoMethod = function() { return hoge ; }; Hoge.prototype.protoField = 10; Hoge.FIELD = 10; // クラス変数 Hoge.METHOD = function() { return hoge ; }; // クラスメソッド // 継承クラス var Fuga = function() {}; // これでFugaのプロトタイプがHogeになる。つまり継承したことになる Fuga.prototype = new Hoge(); var fuga = new Fuga(); alert( fuga.thisMethod() +fuga.thisMethod()); // = hoge alert( fuga.thisField +fuga.thisField); // = 10 alert( fuga.protoMethod() +fuga.protoMethod()); // = hoge alert( fuga.protoField +fuga.protoField); // = 10 // クラス変数へはアクセスできない alert( Fuga.FIELD +Fuga.FIELD); // = undefined fuga.thisField = 20; alert( fuga.thisField +fuga.thisField); // = 20 書き換わる fuga.protoField = 20; alert( fuga.protoField +fuga.protoField); // = 20 書き換わる fuga.thisMethod = function() { return fuga ; }; alert( fuga.thisMethod() +fuga.thisMethod()); // = fuga 書き換わる fuga.protoMethod = function() { return fuga ; }; alert( fuga.protoMethod() +fuga.protoMethod()); // = fuga 書き換わる // コンストラクタで上書きしたらどうなるか? // てかこれが本来の継承 var Piyo = function() { this.thisField = 20; this.thisMethod = function() { return piyo ; }; }; Piyo.prototype = new Hoge(); var piyo = new Piyo(); alert( piyo.thisMethod() +piyo.thisMethod()); // = piyo 書き換わる alert( piyo.thisField +piyo.thisField); // = 20 書き換わる 関数について 関数内のthisはグローバルオブジェクトのプロパティを示す。 function add(x, y) { this.result = x + y; // これはグローバルのresultを示す。 } add(2, 5); alert(result); NullとUndefined 未定義変数 alert(sValue); // sValueが前もって宣言されていないため、エラーとなる → sValue is not defined null変数 var sValue; alert(sValue); // エラーは起こらないが、undefinedと表示される 配列 配列 var hoge = []; // var hoge = new Array(); とも記述できる。 var hoge2 = [1,2,3,4]; var hoge3 = [1.1, true, "a"]; // ひとつの配列にどんな型も入れられる。 push, pop var hoges = new Array(); hoges.push(0); // 配列の最後に追加 hoges.push(1); hoges.push(2); while (hoges.length != 0) { // 配列の最後を取り出す alert(hoges.pop()); // 2, 1, 0 の順番で表示 } unsift, shift var hoges = new Array(); hoges.unshift(0); // 配列の最初に追加 hoges.unshift(1); hoges.unshift(2); while (hoges.length != 0) { // 配列の最初を取り出す alert(hoges.shift()); // 2, 1, 0 の順番で表示 } 関数 関数宣言はコードの実行より前に解釈される。 c言語で言うstatic変数を関数内にもつ方法 uniqueInteger.counter = 0; // 関数自身にプロパティを設定する。 function uniqueInteger() { return uniqueInteger.counter++; // このプロパティは保持される。 } apply()メソッドとcall()メソッド f.call(o, 1, 2); これは次のように記述したのと同じ o.m = f; o.m(1,2); delete o.m; applyは引数部分を配列で渡す。 f.apply(o, [1,2]); 演算子 基本型をチェックする(typeof) // number, string , boolean , object, function のいずれかを返す var hoge = (typeof value == "string"? "moji" "sonota"; オブジェクトの型をチェックする var d = new Date(); d instanceof Date; // true d inscanceof Object; // true d inscanceof Number; // false 等値演算子と同値演算子 == は型変換してできるだけ等しくなるようにする。 === は型が違えばその時点で、偽になる。 ※== が浅い比較、===が深い比較ではないので注意 オブジェクト同士の比較 ==でも===でも、同じ参照をさしている場合のみ、等しいと判断される。 同じプロパティ、同じ要素を刺して言うことを判定するには個別にチェックしなくてはならない。 nullとundefined ==では、nullもundefindeもnull(false)と判定されるが、===ではより厳密になるため、両者は区別される。 thisとprototypeどっちで定義すればよいか? this--プロパティが上書きできてしまうので好ましくない インスタンスごとにメソッドを定義するのでメモリ効率がよくない prototype--prototyepのプロパティはそれを介したインスタンスで共通に参照される したがってメモリ効率がよい とくにメソッドはprototypeに定義したほうがよい。 var Class = function(){ this.hoge = 0; this.fuga = function() { alert( fuga ); }; }; // var Class = function(){ this.hoge = 0; this.prototype.fuga = function() { alert( fuga ); }; }; 参考リンク 非常に参考になる JavaScriptにおけるオブジェクトの基本的性質-JavaScriptの関数とメソッド-プロトタイプ(prototype)によるJavaScriptのオブジェクト指向 読み物系 javascriptを理解するためのたった2つの大切なこと--http //anond.hatelabo.jp/20070620200618--http //anond.hatelabo.jp/20070622101313-四則演算を JavaScript で実装する--http //d.hatena.ne.jp/nitoyon/20070629/four_operations_implementation_in_javascript-JavaScript 世界で最も誤解されたプログラミング言語--http //d.hatena.ne.jp/brazil/20050829/1125321936-私は如何にしてJavascriptのprototypeを身につけたか。--http //blog.xole.net/article.php?id=560-かつてサーバーサイドJavaScriptは実在した--http //neta.ywcafe.net/000573.html-Rhino on Rails--http //www.aoky.net/articles/steve_yegge/rhino-on-rails.htm
https://w.atwiki.jp/sevenlives/pages/1984.html
無名関数(JavaScript)? 即時関数 ビルトイン関数 コンストラクタ関数? クロージャ? 関数リテラル 関数オブジェクト 実行コンテキスト(JavaScript)
https://w.atwiki.jp/tradable/pages/7.html
Javascriptでプログラムを作成することができます。
https://w.atwiki.jp/parepan/pages/73.html
テンプレート内でJavascriptを使用すると以下のようなエラーが 発生します。 Fatal error Smarty error [in テンプレートファイル.tpl line 12] syntax error unrecognized tag 対策として {literal} script language="JavaScript" type="text/JavaScript" !-- function sampleJava() { なんとか; } //-- /script {/literal} というように{literal}...{/literal}でSmartyの解釈から外してやるか、 script language="JavaScript" type="text/JavaScript" src="sampleJava.js" /script というふうに外部ファイル読み込みにしてあげないといけない。
https://w.atwiki.jp/sunday_notebook/pages/40.html
javascriptにはtrim関数がないそうな。 スペースで空白になっている文字列をtrimしてバリデートしようと思ったら、javascriptにはtrim関数が用意されていないらしい。 ネットで調べるといろいろ勉強になりますね。 どうしてもtrimしたい場合はどうするか? そこで正規表現の出番なんですね。 ◯StringクラスにTrimメソッドの追加 String.prototype.trim = function() { return this.replace(/^[ ]+|[ ]+$/g, ''); } 火狐は余計なことをしてくれてるらしい。 Javascriptで次のように書いたとします。 var array = {"A","B","C",} このような場合、通常はエラーとなるはずなんですけど、火狐はそのまま何事もなかったかのように実行してしまうそうです。 そしてIEで実行したときにエラーが判明したりするわけですね。 なんでなんで?と探してみるもののこうしたミスはなかなか見つかりにくいものです。 実装時には気をつけて定義したいものです。 また一つ賢くなりました。
https://w.atwiki.jp/net-k/pages/15.html
JavaScript 参考 JavaScriptでテトリスみたいなゲームを作ってみよう(hatena) http //svn.coderepos.org/share/docs/amachang/20080813-procamp2008/index.html document.all がIEしか対応してない http //www.red.oit-net.jp/tatsuya/java/d_color.htm Java Script コーディング規約 https //developer.mozilla.org/ja/JavaScript_style_guide Java Script ゲームプログラム(リンク集) http //d.hatena.ne.jp/seikenn/20080506/1210088946 JavaScript でテトリスみたいなゲームを作ろう! http //svn.coderepos.org/share/docs/amachang/20080813-procamp2008/index.html これでできる! クロスブラウザJavaScript入門 http //gihyo.jp/dev/serial/01/crossbrowser-javascript/0001?skip 言語仕様 プロトタイプ(prototype)によるJavaScriptのオブジェクト指向 http //codezine.jp/article/detail/222 開発環境 JavaScript 開発環境(firebug) http //www.atmarkit.co.jp/fwcr/rensai/freeauthoring04/freeauthoring04_2.html その他 jsdo.it http //jsdo.it/ ブラウザでHTML,CSS,JavaScriptコードが書ける 他人のソースが参考になる
https://w.atwiki.jp/chapati4it/pages/515.html
JavaScriptサンプル JavaScriptメモ
https://w.atwiki.jp/picolit/pages/15.html
JavaScriltSample テーブルのTD要素を取得する