約 2,903,099 件
https://w.atwiki.jp/blackvinegar/pages/25.html
ServerサイドでJavaScriptを動かす技術。 V8 JavaScript を用いたイベント駆動I/Oを実現している。 公式サイト http //nodejs.org/ 日本ユーザグループ http //nodejs.jp/ node v0.4.8docs 日本語訳 http //nodejs.jp/nodejs.org_ja/api/ 参考サイト node.jsに関する基礎や開発・チュートリアルのまとめ 初心者にも分かる Node.js と WebSocket についての解釈まとめ リアルタイムWebハッカソンでハンズオンしてきました
https://w.atwiki.jp/myscripts/pages/25.html
[iOS]神ツールを作るための神アプリ、MyScriptsがかなり便利 | ひとりぶろぐ http //hitoriblog.com/?p=5612 @hitoriblog さんによるアプリ紹介 [iOS]第1回 JavaScript実行開発環境MyScriptsの魅力を全力で伝えてみる | ひとりぶろぐ http //hitoriblog.com/?p=5676 @hitoriblog さんによるアプリ紹介 IAMASのGeekLabでMyScriptsのことを話してきました | ひとりぶろぐ http //hitoriblog.com/?p=6848 @hitoriblog さんによる詳しいプレゼン資料が掲載されています Teachme バックグラウンド監視 通知センターからの起動 スクリプトをSpotlightから検索する方法 MyScripts@WIKI内 スクリプトの起動方法 デフォルトスクリプトの使い方 4つのアクション
https://w.atwiki.jp/mhikichi/pages/17.html
jsdo.itというwebブラウザ上でコードを編集して公開もできる開発環境をつかいます。 作ったプログラムはスマートフォンからでも動作確認がすぐに出来るのでお手軽にスマートフォンアプリの開発もできます。 動作環境はウェブブラウザのみ jsdo.itにアクセスします。 アカウントはgoogleやtwitterやfacebook等いろいろ使えます。 どれも持ってない場合は、あらかじめアカウントを取得しておきましょう。 最初の一つというならgoogleが良いかもしれません。Gmailも使えるし。 コーディング開始 jsdo.itにログインできたら、Start codeingするとコーディング開始できます。 メニューにはREADME, JavaScript, HTML, CSS, Files があります。 README説明を書く事が出来ます JavaScriptここにJavaScriptのプログラムを記述します。 HTMLJavaScript外のHTML書きます。 CSSCSSも記述できます。 FilesJavaScript等から使用する画像ファイル等を送る事が出来ます。
https://w.atwiki.jp/api_programming/pages/210.html
下位ページ Content Promiseで、終了後に発火させる同期は追い越さない、非同期は追い越す JavaScriptの通信は非同期処理 Promise処理 Promiseの数珠つなぎ for 文の中でPromiseを回す（直列実行） for 文の中でPromiseを回す（並列実行） async/awaitを使って書く Promiseで、終了後に発火させる Promiseを使う - MDN 同期は追い越さない、非同期は追い越す 同期処理は、「追い越しが掛からない」 console.log("ステップ1"); alert("ステップ2"); console.log("ステップ3"); ステップ1 → ステップ2（OKがクリックされるまで待って）→ ステップ3 非同期処理は、「追い越しが掛かる」 console.log("ステップ1"); setTimeout( function() { alert("ステップ2");}, 3000); // 3秒後にダイアログ console.log("ステップ3"); ステップ1 → ステップ3 → ステップ2 JavaScriptの通信は非同期処理 var xhr = new XMLHttpRequest(); xhr.open( GET , https //somewhere ); xhr.send(); xhr.addEventListener( load , function(result){console.log("ステップ1");}); console.log("ステップ2"); ステップ2 → ステップ1 に多分なる。通信のセットや通信時間で追い越しが掛かる。そのため、ステップ1の通信結果を使って、ステップ2の処理をしようとすると、まだ値がセットされておらず、エラーになる。 1行メッセージを出すくらいなら、function(result){} の中に記述してしまえばよいが（ネスト、入子）、 ステップ1の結果を使って、ステップ2の通信を制御 ステップ2の結果を使って、ステップ3の通信を制御 ステップ3の結果を使って、ステップ4の通信を制御 （以下繰り返し） となると、どんどんネストが深くなる。 Promise処理 Promise - MDN Promiseオブジェクト返す関数をつくる。 この関数の中で、処理が終わったらresolve(value)を実行。（valueは戻り値、としておく） Promise.then(...)を実行すると、thenの中は、resolveが実行されるまで止まっている。 こんなプログラムを作ってみる。 function testAjax1() { console.log("Start1"); var func1 = function() { console.log("step1"); return new Promise(function(resolve, reject){ setTimeout(function() { console.log("step1 timeout"); resolve("step1 value"); }, 3000); }); } alert("alert stop"); var func2 = function(arg) { console.log("step2"); console.log(arg); } func1().then(func2); console.log("End1"); } 実行すると Start1 （func1関数（変数）を宣言しただけでは実行はされない） （alertで一旦止まる → OK で再開） step1（func1()で実行される） End1（func1のsetTimeoutが効いているので、先にこっちが表示される） step1 timeout（setTimeoutが切れて、表示 step2（func1のresolveが返って、func2が実行される） step1 value（func2が、func1のresolveの戻り値を受け取っている) func1()のあとに出てくる End1 は、setTimeout を追い越して処理されていることに注意。 Promiseの数珠つなぎ Promiseの処理を、数珠つないでみる。 変更点は func2内にsetTimeoutの処理を追加 func3を追加 func1().then(func2).then(func3)に変更 function testAjax1() { console.log("Start1"); var func1 = function() { console.log("step1"); return new Promise(function(resolve, reject){ setTimeout(function() { console.log("step1 timeout"); resolve("step1 value"); }, 3000); }); } alert("alert stop"); var func2 = function(arg) { console.log("step2"); console.log(arg); } var func2 = function(arg) { console.log("step2"); console.log(arg); setTimeout(function() { console.log("step2 timeout"); }, 3000); }; var func3 = function(arg) { console.log("step3") console.log(arg); } func1().then(func2).then(func3); console.log("End1"); } 実行すると （途中まで略) step2 step1 value step3 undefined step2 timeout つまり、func2のsetTimeout処理（の終了）を待たずに、func3を実行している。そこで、さらに変更を加える。 変更点は func2もPromise処理を加える var func2 = function(arg) { return new Promise(function(resolve, reject){ console.log("step2"); console.log(arg); setTimeout(function(){ console.log("step2 timeout"); resolve("step2 value"); },3000); }); } 実行すると （途中まで略) step2 step1 value step2 timeout step3 step1 value もともとfunc1のPromiseから始まった処理だったが、func2のPromise処理も数珠つなぎにできた。 for 文の中でPromiseを回す（直列実行） 同じ "funcPromise" を対象とする集合の各要素に対して、直列に実行。 配列の複数の要素など、for ループを使って実行したいときに、どうするのか。あーなるほど、というやり方。 PromiseによるJavaScript非同期処理レシピ集 - Subterranean Flower Blog // 空の解決済みPromiseを生成 - 最初のプロミスはresolve let promise = Promise.resolve(); for(const id of dataIds) { // promiseにthenで繋ぎ再代入 // これでどんどんthenをチェーンしていける // ちなみに funcPromise は Promise を返す関数 promise = promise.then(() = funcPromise(id)); } 1回目は resolve で入って、 funcPromise を実行する。 Promise オブジェクトが帰るので、2回目の実行は待ち状態になっている for 文の中でPromiseを回す（並列実行） 配列の複数の要素に実行したときに、全部の処理が終わったことを確認して、「まとめの処理」を行いたいときがある。 そのような場合は、Promise.all(...) を使う。やっていることは簡単だが、関数としてして実装するときに、.then についてちゃんと理解していなかったので、小一時間悩んでしまった。 // 空の解決済みPromiseを生成 - 最初のプロミスはresolveconst // 大元の関数に対する return return firstFunc().then(()= { promises = []; for(const id of dataIds) { // primise をどんどんためていく promises.push(funcPromise(id)); } return Promise.all(promises) // 全部揃ったらresolve() を返すPromiseを戻す } 自分のハマリポイントは .then(()= {... return Promise.all(promises)}) しか、書かなかったところ。一番大元の関数の戻り地として return すべきところを、then で実行する関数の return としてしか書かなかったところで、うまくうごかない。。。となってしまった。 Promise.all() - MDN 返り値はすべてのPromise（成功すれば、resolveで戻ってくる値を配列にしたもの） async/awaitを使って書く Promise を完結に書く方法。自分のpleidesで、リントがエラー扱いするので使いたくないが、forループで実現するときに、これ以外の方法が思い浮かんでいない。 使う関数を async func(){} で宣言する。 呼び出す際に await func() にすると、resolveされるまで、次の処理を待つ https //qiita.com/soarflat/items/1a9613e023200bbebcb3
https://w.atwiki.jp/yukobayashi/pages/17.html
jQuery ブラウザ判定 class名の操作 cssセレクタ cycle plugin toolchip
https://w.atwiki.jp/javascriptteam/pages/2.html
メニュー トップページ JavaScript関連リンク 第1回活動 11/24 第2回活動 11/25 第3回活動 11/26 第4回活動 11/29 第5回活動 12/03 第6回活動 12/05 第7回活動 12/06 イライラ棒 デフォサイドバー プラグイン紹介 まとめサイト作成支援ツール メニュー @wiki @wikiご利用ガイド ここを編集
https://w.atwiki.jp/knowledge_library/pages/93.html
オブジェクト指向JavaScriptのオブジェクト指向 プロトタイプチェーン オブジェクト指向 継承・ポリモーフィズム・カプセル化のOOP「大三元」がない すべてがオブジェクトでない プロトタイプベースなのにクラスというのはおかしい JavaScriptのオブジェクト指向 var str = new String;str.split; //= functionstr.split(); 変数strが刺すオブジェクトに対してsplitプロパティを参照する strオブジェクトはsplitプロパティを保持していないので、Stringのプロトタイプを参照する プロトタイプが保持するsplitプロパティの値(Functionオブジェクト)を返す カッコが指定されているので、返された値を実行する プロトタイプチェーン プロトタイプは、クラス構造に基づいた木構造となっており、プロパティが存在しない場合は、参照しているプロトタイプをルートに向かって順番に探していく。この一連のプロトタイプのつながりを「プロトタイプチェーン」と呼ぶ チェーン 発動タイミング 参照時に最後まで見つからない場合 更新時に最後まで見つからない場合 スコープチェーン 発動の参照と更新 例外を発生する グローバルオブジェクトに代入する プロトタイプチェーン プロパティの参照 undefinedを返す たどられない。対象のプロパティとなる
https://w.atwiki.jp/learn-javascript/pages/10.html
サーバーに置いてあるテキストファイルを自動で読み込んで表示する ブラウザーを操作している各コンピューターではなく、ウェブサーバーソフトウェアが稼働しているサーバーに置いたテキストファイルを、ブラウザーでHTMLファイルを開いたときに自動で画面に表示する方法。 以下をprint.htmlとして、ウェブサーバーソフトウェアのドキュメントフォルダーのルート（C \Apache24\htdocsなど）に保存する。 !DOCTYPE html html head meta charset="UTF-8" / title JavaScript /title /head body div id="result" /div script type = "text/javascript" let result = document.getElementById( result ); let xhr = new XMLHttpRequest(); xhr.open( GET , text.txt , true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { result.textContent = ; let lines = xhr.responseText.split( \n ); let line = ; for(i = 0; i lines.length; i++) { line += lines[i] + br / ; } result.insertAdjacentHTML( afterbegin , line); } else { result.textContent = 通信エラーが発生 ; } } else { result.textContent = 通信中... ; } } xhr.send(null); /script noscript JavaScriptが利用できません /noscript /body /html print.htmlと同じフォルダーに、以下をtext.txtとして保存する。 ABCDEabcde 1234567890 あいうえお 阿a井i宇u江e尾o ブラウザーで開く。例えばアドレスバーに「http //localhost/print.html」と入力する。以下のように表示されるはず。 このprint.htmlはウェブサーバーソフトウェアを介して開く必要がある。エクスプローラーでprint.htmlをダブルクリックして開いても表示はされない。
https://w.atwiki.jp/mlnk/pages/20.html
Tips フォーカスされているエレメントを取得する 文字列の置換 型の取得 JSON を eval イベントハンドラの追加 offsetWidth と clientWidth の違い 数値と文字列の相互変換 Tips フォーカスされているエレメントを取得する var element = (document.activeElement || window.getSelection().focusNode); 前半がIE/Opera用。getSelectionはFirefox用。 文字列の置換 var str = 10-10-10 ; ret = str.replace(/-/, ); // 10 10-10 最初のマッチしか置換されない ret = str.replace(/-/g, ); // 10 10 10 OK 型の取得 if(typeof e== string ) alert( string ); JSON を eval var json = "{ a b }"; var o = eval(json); // invalid labelで失敗する var o = eval( ( +json+ ) ); // ok イベントハンドラの追加 function observe(target, type, listener) { if (target.addEventListener) target.addEventListener(type, listener, false); else if (target.attachEvent) target.attachEvent( on + type, function() { listener.call(target, window.event); }); else target[ on + type] = function(e) { listener.call(target, e || window.event); }; } // こっちの方がいいと思う var observe = window.addEventListener ? function(target, type, listener) { target.addEventListener(type, listener, false); } function(target, type, listener) { target.attachEvent( on + type, function(){listener.call(target, window.event);}); }; offsetWidth と clientWidth の違い offsetWidth は内容の幅+枠線の幅 clientWidth は内容の幅のみ 数値と文字列の相互変換 文字列- 数値 n = "123"-0; n = Number("123"); n = parseFloat("123"); n = parseInt("123"); n = eval("123"); 数値- 文字列 s = 123+""; s = String(123);
https://w.atwiki.jp/designmemo/pages/26.html
JavaScript/IEでpngを表示 透過png未対応ブラウザ（IE）で透過表現する。 ダウンロード http //www.isella.com/aod2/js/iepngfix.js 参考記事 透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる CSS（スタイルシート）でPNGファイルをバックグラウンド指定してるクラスやIDに以下の一行を追加。 * html .iepngfix { behavior expression(IEPNGFIX.fix(this)); } （赤字の部分はPNG画像を指定したクラス名、もしくはID名を）