約 2,903,214 件
https://w.atwiki.jp/tomokazu0525/pages/53.html
最終更新日時2012-04-11 ■目次 はじめに 記号「＆＆」と「｜｜」 アルファベットarguments XPATH 日本語正規表現正規表現サンプル 匿名関数（無名関数と同じ意味か） ページフッタこのページの1階層下のページこのページに含まれるタグ このページへのアクセス数 ■本文 はじめに ここでは、javascriptの本を何冊か読んで、下記2点にふれる。 説明を読んでもわからなかった部分 本によって表記が違い、分かりにくい部分 レファレンス的に使うため、索引の順に記載。 つまり、「記号」→「アルファベット」→「日本語」の順。 【開発環境】 firefox・firebugを使うものとする。 記号 「＆＆」と「｜｜」 それぞれ論理積演算子や、論理和演算子などと呼ばれることもあるが、 ここで使われている「論理積」「論理和」という言葉は、数学で使われるそれとは意味が若干異なるので要注意。 つまり、積集合・和集合を返す演算子ではなく、javascript独自の挙動をする。 詳細は→ 論理積演算子と論理和演算子 コメント：広告が出ている場合はページ中ほどから。 アルファベット arguments 配列のようで、配列でないもの。 配列と同じ点：lengthプロパティあり。 配列と違う点：配列に使えるメソッドは使えない。 http //starry.night.nu/web/prog/javascript/c02_know_base_of_function.html#secrets_of_arguments XPATH 勉強用メモ - javascript/XPATH 日本語 正規表現 初級（一回どっかで説明を読んだことあるぐらいの人むけ。） 正規表現（RegExp） 中級 JavaScript正規表現メモ。 - こせきの技術日記 正規表現サンプル ウノウラボ by Zynga Japan Amazonの商品個別ページのURLからASINを取得する 匿名関数（無名関数と同じ意味か） エレガントな JavaScript を作成するための関数型プログラミングの使用 コメント：「リスト 3. 通常の関数」あたりに書かれている。 ページ上部にレベル初級との記載があるが、用語が難しい。「javascriptは初級であるが、他のプログラム言語をマスターしている人向け」の解説か。 ページフッタ このページの1階層下のページ このページに含まれるタグ javascript このページへのアクセス数 今日： - 昨日： - これまで合計： -
https://w.atwiki.jp/suffix/pages/1102.html
javascriptはシングルスレッドの言語である。 ただし、処理が重いものを含まれる場合などにバックグラウンドで動かしたいことがある。 そこで、マルチスレッドを擬似的に表現する方法として、 setTimeoutを使って処理を切り替えていく方法や Web workersを使う方法がある。 尚、setTimeoutを使う場合注意したいことがある。 1.処理A 2.setTimeout(funcA,time1); 3.setTimeout(funcB,time2); 4.処理B と記述したとしても実行順序は1,2,3,4の順にならないケースがあることを 認識しておく必要がある。 従って、funcAとfuncBが終わったら実行して欲しい処理を書く際には 以下の方法では駄目。 function sample() { if(sample2()) { //funcA,funcB実行後に、実行して欲しい処理 } } function sample2() { setTimeout(funcA,1000); setTimeout(funcB,50); function funcA() { } function funcB() { } return true; } 関連：同期非同期を実現するには
https://w.atwiki.jp/f_go/pages/5111.html
javascript/sortabletable プラグイン 概要 表に並べ替え機能を付加するjavascriptプラグインです。 optionでフィルター機能も付加できます オリジナルからいくつか改良しているので同プラグインを導入しているwicurioとは多少仕様が異なります 参考 taruのメモ帳ページ PukiWikiで表をソートしたい | OXY NOTES 使い方 #include(javascript/sortabletable) とページ内で入力するとページ内でプラグイン機能を使えるようになります #divclass(sortabletable){{ #divclass(option){ソート属性[Number|String|Date|CaseInsensitiveString],動作モード[1～3]} 表のwiki構文 }} 表を上記のように括るとフィルター機能が付加されます またoptionの{}内に,区切りで以下のパラメーターを入力することで、動作を変更できます ソート属性列ごとに|で区切って指定します。下記の基準で各セルを評価して並べ替えやフィルターを行います。 Number 数値として評価します String 文字列として評価します Date [西暦/月/日 時 分 秒]形式の日付として評価します CaseInsensitiveString 文字列を大文字と小文字を区別して評価します None この列は評価しません 動作モード 0 フィルタ機能を無効にする 1 フィルタ機能を有効にする 2 フィルタ機能を無効にする＆複数行単位で並べ替え機能を有効にする 3 フィルタ機能＆複数行単位で並べ替え機能を有効にする ソート属性の順番はセル結合がある場合下記のようになります #divlcass(option){1|2|3|4|5|6|7,3} |1|2| |3|4| |~|5|6|7|~| ソート属性がNumberの列ではinput入力欄に以下の比較演算子を使用できます 比較演算子 入力例 効果 = =100 値が100なら表示 = 100 = 値が100以下なら表示 100 値が100以上なら表示 100 値が100未満なら表示 = =100 値が100以下なら表示 ! !100 値が100でないなら表示 使用例 動作モード0～１ならtable_filterプラグインが使える #divclass(sortabletable,zeb2){{ #divclass(option){Number|String|CaseInsensitiveString|Date|None,1} #table_filter(){No=show,Name=show,Case=show,Date=show,Disable=show} |~No|~Name|~Case|~Date|~Disable|h |0|アルテラ|Abc|2000/01/15|Abc| |11|アルテラ|abc|1999/12/15 12 00 00|abc| |2|アルテラ2|Bbc|1999/12/15|Bbc| |12|アルテラ2|bbc|2015-08-01 23 00 00|bbc| }} Number|String|CaseInsensitiveString|Date|None,1 No Name Case Date Disable No Name Case Date Disable 0 アルテラ Abc 2000/01/15 Abc 11 アルテラ abc 1999/12/15 12 00 00 abc 2 アルテラ2 Bbc 1999/12/15 Bbc 12 アルテラ2 bbc 2015-08-01 23 00 00 bbc 動作モード0～1でtable_filterを使わない場合はヘッダー行のセル結合ができる #divclass(sortabletable,zeb2){{ #divclass(option){Number|String|None|None|CaseInsensitiveString|Date|String,1} |~No|~Name| |~Merged|~Disable|h |~|~|~Case|~Date|~Enable|h |0|アルテラ|Abc|2000/01/15|Abc| |11|アルテラ|abc|1999/12/15 12 00 00|abc| |2|アルテラ2|Bbc|1999/12/15|Bbc| |12|アルテラ2|bbc|2015-08-01 23 00 00|bbc| }} Number|String|None|None|CaseInsensitiveString|Date|String,1 No Name Merged Disable Case Date Enable 0 アルテラ Abc 2000/01/15 Abc 11 アルテラ abc 1999/12/15 12 00 00 abc 2 アルテラ2 Bbc 1999/12/15 Bbc 12 アルテラ2 bbc 2015-08-01 23 00 00 bbc 動作モード2～3ならセル結合が使えるヘッダー行と項目行が1対1で対応するようにしないとうまくソートできない #divclass(sortabletable,zeb2){{ #divclass(option){Number|String|CaseInsensitiveString|Date|None|Number|CaseInsensitiveString|Date|None,3} |~No|~Name|~Case1|~Date1|~Disable|h |~No2|~|~Case2|~Date2|~Disable2|h |0|アルテラ|Abc|2000/01/15|Abc| |11|~|abc|1999/12/15 12 00 00|abc| |2|アルテラ2|Bbc|1999/12/15|Bbc| |12|~|bbc|2015-08-01 23 00 00|bbc| }} Number|String|CaseInsensitiveString|Date|None|Number|CaseInsensitiveString|Date|None,3 No Name Case1 Date1 Disable No2 Case2 Date2 Disable2 0 アルテラ Abc 2000/01/15 Abc 11 abc 1999/12/15 12 00 00 abc 2 アルテラ2 Bbc 1999/12/15 Bbc 12 bbc 2015-08-01 23 00 00 bbc
https://w.atwiki.jp/javascriptwiki/pages/13.html
head 1 meta http-equiv="Content-Language" content="ja" 2 meta http-equiv="Content-Type" content="text/html; charset=utf-8" 3 meta http-equiv="Content-Script-Type" content="text/javascript" 4 script type="text/javascript" charset="utf-8" src="./sk.js" /script 5 style type="text/css" /style title タイトル /title /head 1 2 3 4 5
https://w.atwiki.jp/nicepaper/pages/253.html
MediaクエリでブラウザごとにCSSでデザインを変更することはできるが、HTMLのタグの構造自体をデバイス毎に分けたい場合があります。 グローバルメニューなど、ブラウザとスマートフォンでHTMLの構造を変更したいという場合について考えていきます。10月12日記事 目次 振り分けしたいタグは全部js部分に記述 HTMLタグ Javascript及び、jQueryのコード iPhone,iPad,Android,PCの4つに分ける。 （iPhone,iPad,Android）と（PC）の2つに分ける。 まとめ 振り分けしたいタグは全部js部分に記述 全部同じブラウザで表示したい部分に関しては、そのままでいいですが、振り分けたい場合は div id="deviceArea" というタグにし、そのタグをJavaScriptとjQueryで分けていきたいと思います。userAgentを取得し、その情報を基に振り分けしていきます。 HTMLタグ 共通です。 !DOCTYPE HTML html head script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" /script script src="device.js" /script !--別にjsファイルを作る。-- meta charset="utf-8" title JavaScriptでタグの振り分け /title /head body div p ここは全ブラウザ共通部分 /p /div div id="deviceArea" /div div p ここも全ブラウザ共通部分 /p /div /body /html Javascript及び、jQueryのコード iPhone,iPad,Android,PCの4つに分ける。 HTMLの方は共通でいいです。(device.js) // JavaScript Document $(function(){ //useragentの取得 var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf( ipad ) != -1) { //iPad $( #deviceArea ).html( p iPad /p ); }else if(userAgent.indexOf( iphone ) != -1){ //iphone $( #deviceArea ).html( span iPhoneですよ。 /span ); }else if(userAgent.indexOf( Android ) != -1){ //Android $( #deviceArea ).html( dl dt デバイス /dt dd ここはAndroid /dd /dl ); }else{ //それ以外 $( #deviceArea ).html( ul li iPhoneではない /li li iPadではない /li li Androidではない /li /ul ); }; }); （iPhone,iPad,Android）と（PC）の2つに分ける。 HTMLの方は共通でいいです。(device.js) // JavaScript Document $(function(){ //useragentの取得 var userAgent = window.navigator.userAgent.toLowerCase(); $(function(){ //useragentの取得 var userAgent = window.navigator.userAgent.toLowerCase(); if ((userAgent.indexOf( ipad ) != -1) || (userAgent.indexOf( iphone ) != -1) || (userAgent.indexOf( Android ) != -1)) { $( #deviceArea ).html( p iPhone,iPad,Androidですよ。 /p ); }else{ //三つ以外 $( #deviceArea ).html( ul li iPhone以外 /li li iPad以外 /li li Android以外 /li /p ); }; }); }); まとめ タグを別の種類に変えても当然対応はできます。.htmlメソッドを使って変更していくことが特徴です。 以上
https://w.atwiki.jp/ecmascript4/pages/18.html
Mascara ECMAScript 4 → Classic JavaScript translator blog
https://w.atwiki.jp/suffix/pages/1018.html
evalによるJSONファイル取得 javascriptでJSONファイルを扱うには、data = eval("("+データ+")");としてやる。 次のようなJSONファイルを受け取っていたとすると { name "太郎" age 100 } data.nameとするだけで太郎という文字を得ることができる。 ※evalの後に鍵括弧を忘れると・・・こちらのサイト参照。 json2.jsによるJSONファイル取得 evalを使うとjavascript文として実行されてしまうので、セキュリティ上問題がある。 別の方法として、json2.jsを使うやり方もある。 /*JSONファイル➡javascriptオブジェクト*/ var sample = {"x" 1,"y" 2} ; var data = JSON.parse(sample); alert(data.x); // -1と表示される /*javascriptオブジェクト➡JSONファイル*/ var data = {}; data.x = 1; data.y = 3; var sample =JSON.stringify(data); alert(sample); // -{"x" 1,"y" 3}と表示される。 複数階層のjsonファイルへのアクセス var data = { name {"father" "太郎","mother" "花子"}, sumage 100 } のようなデータ構造だった場合に、花子にアクセスするには、 data.name.motherやdata["name"]["mother"]で良い。 jsonファイル形式のプロパティと値を配列に格納する。 var text = { property1 value1 , property2 value2 , property3 value3 }; var properties = []; var values = []; for (var property in text) { properties.push(property); //プロパティ値 values.push(text[property]); //値 } Jsonファイルのプロパティの長さを取る 配列ではないので、lengthでは取れない。 以下のような方法で取得可能。 /*例1*/ var property; var count = 0; for(property in JSONObject) { count++; } alert(count); /*例2*/ alert(Object.keys(JSONObject).length); Jsonファイルからパースしたオブジェクトに該当のプロパティが存在するか調べる。 if("property名" in obj) { console.log("該当プロパティ有"); }
https://w.atwiki.jp/to_dk/pages/1285.html
JavaScriptの質問と回答 ＜△＞ OKWave JavaScript OKWave AJAX OKWave HTML OKWave XML Internet Explorerフォーラム OKWave JavaScript OKWaveは「質問と回答」の専門サイト 1日ごとに画像を変更したい。 (2015-10-01) javascriptで音声データ圧縮 (2015-09-29) skrollr.jpがスマホでバグる (2015-09-28) 設計書内容から同じ機能を抽出し、統合する手法 (2015-09-26) web制作会社で働いている人に質問です (2015-09-26) google map api プログラミング (2015-09-22) jQueryで困っています。教えてください。 (2015-09-21) OKWave AJAX javascriptとperlの通信について (2015-09-10) IEだけ正常にupdateできない (2015-07-24) 以下の変数は参照できないと、ルールとして記載がある (2015-07-23) borderの箇所をマウスでクリック (2015-07-05) JSPで郵便番号から住所を得るには？ (2015-07-02) 郵便番号ajaxzip3 をJSPで使いたい (2015-07-01) jQuery？リアルタイムでフォームを変える (2015-06-10) OKWave HTML googleクローラーを呼び寄せるコード、ソース (2015-09-27) 日本語ドメイン (2015-09-27) プログラミング、コーティング (2015-09-24) 携帯画面いっぱいにテーブルを作るにはどうすればいい (2015-09-22) 画像の下に文字が来ないようにするには (2015-09-22) UWSC複数画像認識について (2015-09-22) mac系で背景画像表示するには (2015-09-19) OKWave XML xml core services 4.X (2015-09-30) AmazonのAPI (2015-09-26) RSSフィードの沢山のっているOPMLを教えて (2015-09-07) html構文チェックとfacebook (2015-08-28) xml 大量に作成したい (2015-08-09) LINQ to XMLで同じ属性値の読込みについて (2015-08-02) XMLの相対パスの書き方 (2015-05-07) Internet Explorerフォーラム マイクロソフト社が運営 ＩＥ１１エンタープライズモードのセキュリティリスクについて (2015-10-01) IE11でのPOSTを使用した画面遷移について (2015-09-13) [Windows 10][Edge]リモートデスクトップ接続元のローカルリソース上ファイルをアップロードすると失敗する（ファイルサイズが0） (2015-09-30) IE8からIE11にバージョンアップでExcelマクロ、Accessに影響はありますか？ (2015-09-18) Windows 10におけるInternet Explorer11の保証について期限を知りたい (2015-09-15) IE8で問題ない表のレイアウトが、IE11では崩れる (2015-09-10) IEAK11 の互換表示の設定について (2015-09-11) 関連する記事 ASP.NETの質問と回答 perlの質問と回答 タグ プログラム作成のニュース ▼Visual Studio JavaScriptの質問と回答 perlの質問と回答 to_dk 最新情報の取得状況 世間のニュース ▼初音ミク初音ミク公式 ▼Music Maker ▼投稿サイトMySpace ▼おもちゃ▽ねんどろいど ▼プログラム作成JavaScriptの質問と回答 最新情報の取得状況 上へ お役立ち度( - ) Copyright ©2008-2010 to_dk. _
https://w.atwiki.jp/fujiyan/pages/44.html
WebコミックLibraryhttp //web-comi.appspot.com/GAE/JとSlim3で作成してみた、各出版社から配信されているWebコミックをまとめて閲覧できるサイトです。只今、実験運用中… JavaScriptでは関数もオブジェクト(Functionオブジェクト) functionステートメント 通常、JavaScriptで関数を定義する場合に用いる。 あまり、Functionオブジェクトとかは意識してないかと思います。意識しなくても良い関数の定義方法。 // 定義 function foo() { alert("test"); } // 呼び出し foo(); function演算子とfunction式 function演算子によって、Functionオブジェクトが生成されるfunction演算子の後に、生成するFunctionオブジェクトの、関数の定義を記述します(Functionオブジェクトのリテラル表現)。ぱっと見た目はfunctionステートメントと変わりませんな。 特徴的なのは、関数名が無いことです※実際は記述できるらしいですが、滅多に記述しません 結果がFunctionオブジェクトへの参照(以下「への参照」は省略)となる式を「function式」と呼ぶ。function演算子を用いた、Functionオブジェクトのリテラル表現もfunction式 Functionオブジェクトを代入した変数のみで表される式もfunction式 /* Stringオブジェクトの場合 */ // リテラル表現"test"が表すStringオブジェクトが、strに設定される。 var str = "test"; /* Functionオブジェクトの場合 */ // リテラル表現function(){...}が表すFunctionオブジェクトが、func1に設定される。 var func1 = function() { alert("test"); }; // 引数がある場合 var func2 = function(arg) { alert(arg); }; functionステートメントの再解釈 実は、functionステートメントとは記述された内容のFunctionオブジェクトを生成し グローバルオブジェクトに関数名と同名のプロパティを定義し そのプロパティに生成したFunctionオブジェクトを設定する、という一連の動作を行う「ステートメント」です つまり、「function式」では無いことに注意(後ほど説明) functionオブジェクトの処理実行 Functionオブジェクトに対して"()"を適用することで、関数を実行する。 つまり、function式に対して()を適用する /* Stringオブジェクトの場合 */ var str = "test"; alert(str.length); // strが参照するStringオブジェクトの、lengthプロパティへのアクセス alert("test".length); // リテラル表現に対して、直接プロパティを参照してもよい /* Functionオブジェクトの場合 */ var func1 = function() { alert("test"); }; func1(); // func1が参照するFunctionオブジェクトが表す処理を実行する。 ( function() { alert("test"); } )(); // リテラル表現に対して、直接()を適用して処理を実行してもよい。 // 引数がある場合 var func2 = function(arg) { alert(arg); }; func2("test"); // func2が参照するFunctionオブジェクトが表す処理を実行する。 ( function(arg) { alert(arg); } )("test"); // リテラル表現に対して、引数を指定した()を直接適用して処理を実行してもよい。 Functionオブジェクトのリテラル表現を直接実行する場合にリテラル表現を丸括弧で囲んでいるのは、丸括弧で囲まないとリテラル表現(=function式)では無く「functionステートメント」と解釈されてしまうためです。「functionステートメント」はFunctionオブジェクトを表しているわけではないので、()を適用できません。 Functionオブジェクトをやりとり Functionオブジェクトは、当然関数の引数や戻り値として使えます。 function bar(func) { func(); } var foo = function() { alert("test"); }; bar(foo); 上記の例では、"test"をalert表示するFunctionオブジェクトを生成し、それを関数barに渡しています。 関数barは、引数funcに渡されたFunctionオブジェクトを、引数なしで呼び出します。渡されたFunctionオブジェクトが要求する引数と、実際に呼び出すときの引数は一致しなくても大丈夫っぽいです。 function foo() { return function() { alert("test"); }; } var func = foo(); func(); 上記の例では、"test"をalert表示するFunctionオブジェクトを戻り値として返す関数fooを、functionステートメントで定義しています。 戻り値を受け取った後、()を適用して呼び出しています。 クロージャ 下記のケースを考えます。 function foo(arg) { var val = "123"; return function(str) { alert(val + arg + str); }; } var func = foo("456"); func("789"); この例では、関数foo()内部で生成したFunctionオブジェクトが、function式の外側で宣言されている変数valや引数argを参照しています。またFunctionオブジェクト自身で引数strを定義しています。foo()はFunctionオブジェクトを返しますが、Functionオブジェクト「だけ」では、Functionオブジェクト自身で定義していないvalやargの値を決定できません。 そこで、通常はfoo()終了後に削除されるvalやargのメモリ領域は、function式で参照された場合は削除されず、それを参照するFunctionオブジェクトが削除されるまで存在します。 このような、「関数(Functionオブジェクト)と、関数(Functionオブジェクト)自身で定義されていない変数(argとval)のメモリ領域」の組み合わせを「クロージャ」と呼びます。クロージャの「環境」とは、JavaScriptにおいては、argやvalのメモリ領域を指します。 別に「定義外の変数のメモリ領域を保持しているものだけがクロージャ」ってわけでもありません。「定義外の変数を参照していない=0個の変数のメモリ領域を確保している」と解釈すれば、メモリ領域を保持していなくてもクロージャです。 まぁJavaScript的には要するに、Functionオブジェクト≒クロージャと考えておいてもいいです。 foo()の呼び出し毎に、ローカル変数のメモリ領域は異なるものが割り当てられるので、foo()が返すクロージャのargやvalのメモリ領域(環境)も、foo()の呼び出し毎に異なります。 function foo(arg) { var val = "123"; return function(str) { alert(val + arg + str); }; } var func1 = foo("456"); // func1のargは"456"になる var func2 = foo("abc"); // func2のargは"abc"になる // valもメモリ領域は別物だが、内容は同じ"123"が設定されている func1("789"); func2("def"); お堅い説明 関数で参照している変数は「束縛変数」と「自由変数」に分類されます。厳密な定義はよくわからないので、不正確かもしれませんが、束縛変数とは、(引数を含め)関数自身で定義している変数(上記のstr) 自由変数とは、関数自身では定義されていない変数(上記のargやval) 関数が実行可能であるためには、関数内の全変数が束縛されている(値が設定されることが保証されている)必要があります。束縛変数は、既に関数自身の定義によって束縛されています(引数として値が外部から渡される、ローカル変数として値が代入される等)。 自由変数は、関数自身では定義されていないため、関数自身の定義だけでは何の値が設定されるかわかりません。 そこで、関数に対して、その関数の自由変数の値を定義するのが環境です。関数に対して環境を与えることで、関数の自由変数を束縛します(自由変数の値を定数化する)。 ということで、関数と環境のペアをクロージャと呼びます。 同じ関数でも、環境が異なれば、返す結果も異なります。関数と環境の関係は、アプリケーションと環境変数の関係と、まさに同じと考えてください。 thisが指すもの 関数内で用いるthisキーワードが何を指すか var func = function() { alert(this.bar); }; Javaとかに慣れていると、関数もオブジェクトということから、thisは生成されたFunctionオブジェクト自身を指すと勘違いしそうですが、違うのです thisが指すのは、関数が実行された際に指定されたコンテキストオブジェクトコンテキストオブジェクトを指定する方法は幾つかある 代表的なのは、関数オブジェクトを指すプロパティに対して()を適用した場合は、そのプロパティを持つオブジェクトがコンテキストに選ばれる文章で書くと回りくどいが、要するに下記のような、ありきたりな方法 var obj1 = new Object(); // オブジェクトを生成 obj1.bar = "obj1"; // オブジェクトにbarプロパティを定義して、文字列を設定 obj1.func = function() { // オブジェクトにfuncプロパティを定義して、Functionオブジェクトを設定 alert(this.bar); }; obj1.func(); // オブジェクトのfuncプロパティに設定されたFunctionオブジェクトを実行(コンテキストオブジェクトとしてobj1が選ばれる) つまり、同じ関数オブジェクトでも、コンテキストオブジェクトが違えば、thisが指すオブジェクトも違う var func = function() { // Functionオブジェクト生成 alert(this.bar); }; var obj1 = new Object(); // オブジェクト1を生成 obj1.bar = "obj1"; var obj2 = new Object(); // オブジェクト2を生成 obj2.bar = "obj2"; obj1.foo = func; obj1.foo(); // コンテキストオブジェクトはobj1 obj2.foo = func; obj2.foo(); // コンテキストオブジェクトはobj2 functionステートメントで生成したFunctionオブジェクトのthisが指すのは?functionステートメントによって、グローバルオブジェクトのプロパティに設定されるので、コンテキストオブジェクトはグローバルオブジェクトになる applyメソッド コンテキストオブジェクトを指定する別な方法として、Functionオブジェクトのapply()メソッドを用いる方法があります var obj1 = new Object(); obj1.bar = "obj1"; var func = function(arg1, arg2) { alert(this.bar + " " + arg1 + " " + arg2); }; func.apply(obj1, ["abc", "123"]); apply()メソッドを呼ぶと、そのFunctionオブジェクトが表す関数が実行されます。 第1引数に、実行時のコンテキストオブジェクトとするオブジェクトを指定します。 本来の関数の引数は、apply()メソッドの第2引数に、配列で指定します。 new演算子とコンストラクタ 見た目はJavaと同じでも、仕組みは全然別物なので要注意 new演算子を使うと、新しいオブジェクトを生成できます。 var obj = new Object(); var str = new String(); var dt = new Date(); JavaScriptにはクラスが存在していないわけですが、ではnew演算子の後に指定しているのは何でしょう? 実は、Functionオブジェクトを指定しているのです。 var Foo = function() { this.bar = "test"; } var obj = new Foo(); alert(obj.bar); オブジェクトが生成される際に、オブジェクトを初期化するための関数として、new演算子の後に指定したFunctionオブジェクトが実行されます。 実行されるFunctionオブジェクトのコンテキストオブジェクトは、new演算子で新しく生成したオブジェクトになります。new演算子で生成されるオブジェクトは常に、(既定のプロパティ以外は)何もプロパティを持たない、プレーンなオブジェクトです。 そのプレーンなオブジェクトをコンテキストオブジェクトとして、Functionオブジェクトの実行時にプロパティを定義していきます。 つまりは、生成したオブジェクトのコンストラクタの役割をするFunctionオブジェクトをnew演算子の後に指定しているのです。 コンストラクタとして指定したFunctionオブジェクトには、生成したオブジェクトのconstructorプロパティでアクセスできます。 var Foo = function() { this.bar = "test"; } var obj = new Foo(); alert(obj.constructor); プロトタイプチェーンによる、プロパティの共有 JavaScriptでは通常、プロパティはオブジェクト毎に、動的に定義します。 例えば、Functionオブジェクトのプロパティfooを、複数のオブジェクトに設定する場合は、 var func = function() { alert(this.bar); } var obj1 = new Object(); obj1.foo = func; obj1.bar = "obj1"; var obj2 = new Object(); obj2.foo = func; obj2.bar = "obj2"; obj1.foo(); obj2.foo(); オブジェクトが多い場合に、これをオブジェクトを生成する度にやるのは面倒くさいですね。 例えば、先に説明した、コンストラクタ内でプロパティを設定する方法がありそうです。 var Foo = function() { this.foo = function() { alert(this.bar); } } var obj1 = new Foo(); obj1.bar = "obj1"; var obj2 = new Foo(); obj2.bar = "obj2"; obj1.foo(); obj2.foo(); ところがこの方法では、オブジェクト毎にFunctionオブジェクトも生成することになり、メモリ効率はよろしくありません。 そこで、JavaScriptにはプロトタイプチェーンという、プロパティを複数のオブジェクト間で共有する仕組みが用意されています。 プロトタイプチェーンを詳しく JavaScriptのオブジェクトは全て、内部プロパティ__proto__を持ちますなお、__proto__を直接利用することは推奨されていません。IEでは外部からアクセスすらできません。 obj.foo(); 上記のような、オブジェクトのプロパティfoo(fooはFunctionオブジェクトとする)にアクセスする際にまず、指定したobjに対して、プロパティfooが定義されているか検索 objにプロパティfooが定義されていない場合は、obj.__proto__に設定されたオブジェクトに対して、プロパティfooが定義されているか検索 obj.__proto__にプロパティfooが定義されていない場合は、obj.__proto__.__proto__に設定されたオブジェクトに対して、プロパティfooが定義されているか検索 以降、同様にして、プロパティfooが見つかるか、__proto__がnullになるまで、__proto__を遡っていきます このような、指定されたプロパティの検索対象となる、内部プロパティ__proto__の連鎖構造をプロトタイプチェーンと呼びます。 つまり、__proto__に同じオブジェクトが設定されているオブジェクト同士は、__proto__に設定されたオブジェクト(と、そのプロトタイプチェーン)のプロパティを共有することになります。 では、__proto__に設定されているのは何者か? __proto__に設定されてるのは、そのオブジェクト生成時のコンストラクタとなったFunctionオブジェクトの、プロパティprototypeが指すオブジェクトです。Functionオブジェクトは全て、プロパティprototypeを持ちます。 Functionオブジェクト作成時には、prototypeにはプレーンなオブジェクト(new Object()で返されるオブジェクト)が設定されます。 prototypeに設定されたオブジェクトに対して、共有したいプロパティを定義していけば、そのFunctionオブジェクトをコンストラクタとして生成されたオブジェクトは、そのプロパティを共有することになります。 var Foo = function() { } Foo.prototype.foo = function() { // 共有したいプロパティfooをprototypeのオブジェクトに定義する alert("test"); } var obj1 = new Foo(); // ここで、obj1.__proto__にFoo.prototypeが設定される obj1.foo(); // obj1にはプロパティfooは定義されていないが、obj1.__proto__にあるFoo.prototypeにプロパティfooが定義されているため、実行可能。 var obj2 = new Foo(); obj2.foo(); // obj1と同じFooをコンストラクタとして生成されたobj2からも、fooを実行可能 プロトタイプチェーン上で発見されたプロパティが参照する、Functionオブジェクトを実行する際のコンテキストオブジェクトは、最初にプロパティのアクセスを試みたオブジェクトになります。実際にそのプロパティが定義されている、prototypeのオブジェクトではないことに注意 var Foo = function() { this.bar = "test"; } Foo.prototype.foo = function() { alert(this.bar); } var obj = new Foo(); obj.foo(); // foo()のコンテキストオブジェクトはobj この、最初にプロパティのアクセスを試みたオブジェクトがコンテキストオブジェクトになる仕組みを利用して、クラスもどきが実現できます→JavaScriptでクラスもどき
https://w.atwiki.jp/ohden/pages/18.html
ECMAScript： ブラウザ毎に仕様の差異がある『JavaScript』『JScript』を仕様統一しようとしてできたもの。 tools jQuery DOM操作用lib。昔は重宝されたが、今はVanillaJSの方が圧倒的に早いので、敬遠されがち。 特に、jQueryを用いるとVanillaに比べてとても遅くなるのがネック。 nodeJS TypeScript JavaScriptに静的型付けを追加したもの。JavaScriptのままでも書けるのでbabelとか入れとるなら突っ込んだ方が吉。 RequireJS D3.js SVG操作用lib。とても使いにくいが、最も支持されてるlib。version 4、5、6で異なる部分が多い。 なので、webなんかで調べたりする時は、自分の使いたいversion no含めて検索するなど気をつけたい。 Vue.js Lodash/Underscore どちらも読み込むと'_'というobjectを使って、VanillaJSに無い機能を提供してくれるlib。 Lodashは、Underscoreのfork。つまり後発で、機能も多い。が、Underscoreの上位互換という訳ではないので注意が必要。 Lodashの機能がVanillaの標準機能に含まれると、Lodashから同等の機能は削除されるって傾向にあるので、使えるんならVanillaの機能を使った方が良い。 Vite ヴィート。webpackなどのfrontend toolに代わるもの。 Svelte Axios Playwright Tabulator tools codepen HTML、JavaScript、CSSでリアルタイムに結果を確認しながら開発ができるサービス。 機能は少ないが、簡素なものを作るのなら問題無い。 Vue Pen Vue版のcodepenがいつの間にかあった。 codesandbox codepenと似たようなサービス。codepenよりも多機能。 特定のframeworkを用いて作成する際に便利。 file explorerを利用できるのが良い。 stackblitz codesandboxみたいに多機能のWebIDE。 editorがVSCodeになってる。 ～ tips ～ parseIntのおかしな挙動 parseFloatのおかしな挙動 ボタンの存在の有無を制御したい 任意の月の最終日を取得したい 入力可能なキーを制限したい 文字列のECMAScriptコードを実行したい Objectの要素数が知りたい Object思考的な扱い方について JSONとJSONPについて 変数のフォーカスについて CSS定義を追加したい ECMAScript/tips/ ～ tips memo ～ Minify ファイル圧縮。記述量を減らしてファイルサイズを小さくする方法。具体的には・tabやspaceの削除： 複数→1や全く消したりする。・改行の削除： 改行→spaceや改行の削除を行う。・true/falseの削除： true→!0、false→!1・変数名の一文字化： 意味を持たせてる変数名を1文字変数化する事で絶対的な文字の数を減らす。ここからはホントに行われるかは知らんけど、可能性のある変換を...・if文の削除： 論理演算子『&&』『||』を用いたり3項演算子を用いる。 !0 true を表す !1 false を表す !!1、!!0 数値から論理型への変換を行う。つまり『1==true→true』『0==false→true』だけど、『1===true→false』『0===false→false』となるのを少ない記述で回避したい場合に使う。2重否定を行う事で『!!1===true→true』『!!0===false→true』とできる。 x()&&y() xの結果がtrueならyを実行true && y()： yは実行される。false && y()： yは実行されない。これは、論理演算子の短絡評価という特性を用いたもの。 x()||y() xの結果がfalseならyを実行true || y()： yは実行されない。false || y()： yは実行される。これは、論理演算子の短絡評価という特性を用いたもの。 短絡評価 最小評価とも言う。これは論理演算が行われる時、左から順に処理が実行され、最終的な論理演算結果が確定した場合、以降の処理を行わないというもの。例えば、論理積の場合『a() && b() && c()』の時、a、b、c全ての結果がtrueでなければ最終結果がtrueにならない。逆に言うと、1つでもfalseを返せばその時点で最終結果がfalseと確定する。つまり、『aがfalseを返したら、b、cの結果に関係無く最終結果がfalseとなるので、b、cをcallしなくても良いよね？しなくて良い処理ならやらないよ！』と言う仕様。当然、aがtrueを返しても、bがfalseを返せばcは実行されない。論理和にも同じ事が言える。論理和がfalseを返すのは、全ての結果がfalseになった時。逆に言うと、1つでもtrueとなればその時点で最終結果がtrueと確定する。論理積の時と同じように『a() || b() || c()』で考える。aがtrueを返すと、b、cの結果に関係無く最終結果がtrueとなるので、b、cをcallする必要は無い。なので、b、cは実行されない。aがfalseを返してもbがtrueを返すとその時点で最終結果がtrueに確定してしまうので、cは実行されない。ただし、言語によっては、論理積の時に短絡評価を行わないものもある。つまり『a() && b() && c()』とあった時、aがfalseを返しても、b、cの処理を行った結果を律儀に論理演算して最終結果を出してくれるって言語仕様。短絡評価を使う場合は、言語仕様をしっかり把握して記述する必要があるので要注意です。 更新日： 2023年09月11日 (月) 01時08分34秒 http //user1.matsumoto.ne.jp/~goma/js/ -- (s1n) 2009-11-12 15 32 06 Require.js -- (s1n) 2014-10-10 10 31 08 var jsObj = JSON.parse(jsonString); var jsonString = JSON.stringify(jsObj); -- (s1n) 2015-03-10 15 35 00 strict mode 厳しく見てくれるモード。開発中はこのモードにしておく方が良いと思う。ただし、利用できるブラウザは限られる。 -- (s1n) 2015-03-10 18 52 32 Object.seal(obj)：objへのプロパティ追加を無視する Object.freeze(obj)：objへの変更で例外を発生 -- (s1n) 2015-03-10 20 40 51 https //developers.google.com/web/fundamentals/primers/promises?hl=ja#whats-all-the-fuss-about https //developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then -- (s1n) 2017-10-20 17 32 39 JEST：Javascript test用framework -- (s1n) 2021-01-20 09 37 02 StimulusReflex -- (s1n) 2021-01-20 15 33 30 Next.js：https //nextjs.org -- (s1n) 2021-04-01 16 05 45 名前 コメント すべてのコメントを見る