約 2,903,199 件
https://w.atwiki.jp/reference_javascript/pages/2.html
目次 トップページ プラグイン紹介 メニュー テンプレート インデックス javascriptを書く場所 wikiに落とし込みたい情報 コーディング規約 非推奨 ここを編集
https://w.atwiki.jp/api_programming/pages/39.html
jQuery Mobile 下位ページ フォーム(Form) ヘッダ・フッタ リスト 記法 Content jQuery Mobileとは jQuery Mobileの実装の流れ ライブラリ本家 Google 失敗 ヘッダ情報の意味 jQuery Mobileのページを作成 基本構造ヘッダ、フッタの固定 要素の追加（や削除）後に、見た目を調整する 開閉可能なパネルをつくるcollapsible-set 要素を非表示にして対処する リンク スマートフォン対応 jQuery Mobileとは 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileとは――スマホ時代の到来とWeb制作 連載：jQuery Mobile入門 - @IT jQuery Mobileの実装の流れ jQuery Mobileの動作に必要なスタイル／ライブラリをインポート 「ページ」を定義 ヘッダ／コンテンツ／フッタを定義 ライブラリ 本家 jQuery http //code.jquery.com/jquery-2.1.3.min.js jQuery Mobile http //code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js http //code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css http //jquerymobile.com/download/ Google jQuery https //ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js jQuery Mobile https //ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js https //ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css jQuery-UI（操作系） https //ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css https //ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js バージョンは下記を参照 Hosted Libraries - Google Developers 失敗 同じライブラリを２重で読み込んだら、ボタンが２重で表示されたり、正しく動作しなくなったりしました。 ヘッダ情報の意味 !DOCTYPE html html head meta charset="UTF-8" / meta name="viewport" content="width=device-width, initial-scale=1" / title jQuery Mobile /title link rel="stylesheet" href="http //code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" / script src="http //code.jquery.com/jquery-1.10.2.min.js" /script script src="http //code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js" /script /head jQuery Mobileのページを作成 div data-role="page" id="###" ... /div div data-role="page" id="index" /div 基本構造 一つのページの中に、ヘッダ、コンテンツ、フッタをつくる。 div data-role="page" __ div data-role="header" ... /div __ div data-role="contents" ... /div __ div data-role="footer" ... /div /div なんで、わざわざpageをつくるのか。従来のhmtlとの違い：一つのhtmlに複数のページをおける（ようにマークアップできる） なんで、複数の「ページ」をつくるのか。遷移が早くなるから、など。 page id=1header content footer page id=2header content footer ヘッダ、フッタの固定 div data-role="footer" data-position="fixed" jQuery Mobileページでヘッダー／フッターの表示をカスタマイズするには？ - Build Insider 要素の追加（や削除）後に、見た目を調整する DOMを構築した後に、要素を追加すると、jQueryMobile用のclassが適用されておらず、見た目が異なっている場合がある。そのような場合の対処は、正直良くわかっていないが $(document).page() $.mobile.page() リストの場合は、ul要素に対して $("ul").listview('refresh') をかけると直るようだ。 開閉可能なパネルをつくる collapsible-set div data-role="collapsible-set" ... /div タイトルになる部分は div 内にヘッダ要素で記述しておく 要素を非表示にして対処する cssで display none を指定する リンク data-rel="back" を指定すると、機能が勝手に"戻る"ボタンになる。 href="..." に指定したリンクは、javascriptがOFFの場合に備えて、index.htmlとかに貼っておくと良い。 http //www.webcreativepark.net/jquerymobile/link/data-rel-back/ スマートフォン対応 jQuery UI Touch Punch clickイベントが効かない人への処方箋（iPhone jQuery）
https://w.atwiki.jp/aosora/pages/7.html
A → B → C というページがあって、Cで戻るボタンを押したときにBにもどらずAに戻るようにする。 B → C のときに、B内のJavascriptで以下のように実行する。 function setups(){ location.replace("B.do"); } 通常Javascriptでページ遷移は location.href だが、 location.replaceを使う。
https://w.atwiki.jp/m_shige1979/pages/1220.html
javascriptコンパイル 概要 hxファイル：haxeのコードが記述されたファイル build.hxml：コンパイル情報を格納 手順 呼び出し元htmlファイルを準備 !DOCTYPE html html lang="ja" head meta charset="UTF-8" / title Haxe JS /title /head body form id="frm" name="frm" input id="btn" name="btn" type="button" value="クリック" / /form script type="text/javascript" src="sample01.js" /script /body /html hxのコードファイルを準備 import js.Dom; import js.Lib; class Sample01 { public static function main() { var button Button; untyped{ // エレメントを取得 button= js.Lib.document.getElementById("btn"); // clickイベントを設定 button.onclick= function(evt Event) { js .Lib.alert("click"); } } } } build.hxmlを準備 -js sample01.js -main Sample01 コンパイルを実行（コンパイルコマンド：haxe ビルドファイル） D \Tools\xampp\htdocs\haxe_samlpe dir ドライブ D のボリューム ラベルは Data です ボリューム シリアル番号は 7EBA-7216 です D \Tools\xampp\htdocs\haxe_samlpe のディレクトリ 2012/09/01 16 21 DIR . 2012/09/01 16 21 DIR .. 2012/09/01 15 34 31 build.hxml 2012/09/01 15 56 295 sample01.htm 2012/09/01 15 57 368 Sample01.hx 3 個のファイル 694 バイト 2 個のディレクトリ 52,140,994,560 バイトの空き領域 D \Tools\xampp\htdocs\haxe_samlpe haxe build.hxml D \Tools\xampp\htdocs\haxe_samlpe dir sample01.js ドライブ D のボリューム ラベルは Data です ボリューム シリアル番号は 7EBA-7216 です D \Tools\xampp\htdocs\haxe_samlpe のディレクトリ 2012/09/01 16 21 7,598 sample01.js 1 個のファイル 7,598 バイト 0 個のディレクトリ 52,140,986,368 バイトの空き領域 D \Tools\xampp\htdocs\haxe_samlpe コンパイルされたjsファイルを確認 ・・・略・・・ var Sample01 = function() { } Sample01.__name__ = true; Sample01.main = function() { var button; button = js.Lib.document.getElementById("btn"); button.onclick = function(evt) { js.Lib.alert("click"); }; } ・・・略・・・ 画面で動作確認
https://w.atwiki.jp/kattsu/pages/63.html
javascriptで簡単にブロックを開いたり閉じたり //javascript部分 function openTR(val){ var trObj=document.getElementById(val); trObj.style.display = "block"; var openObj=document.getElementById("open_"+val); openObj.style.display = "none"; var clObj=document.getElementById("close_"+val); clObj.style.display = "block"; } function closeTR(val){ var trObj=document.getElementById(val); trObj.style.display = "none"; var openObj=document.getElementById("open_"+val); openObj.style.display = "block"; var clObj=document.getElementById("close_"+val); clObj.style.display = "none"; } ‹!--html部分-- ‹input type="button" onclick="openTR( 1 );" value=開く" id="open_1" ‹br ‹input type="button" onclick="closeTR( 1 );" value="閉じる" id="close_1" style="display none;" ‹div id="1" style="display none;" ・・・・ ‹/div
https://w.atwiki.jp/redtaxi/pages/17.html
こういうコード a href="javascript void(0);" は、リンク無効にする為だそーな。 参考サイト
https://w.atwiki.jp/teamsja/pages/13.html
(2006年06月16日) ■JavaScript 関数が有効か判断する■
https://w.atwiki.jp/sampleisbest/pages/466.html
http //www.maroon.dti.ne.jp/lance/js/canvas/lissajous.html lissajous.html !doctype html head title lissajous /title script var ctx; var t = 0; var sx, sy; onload = function () { ctx = canvas.getContext("2d"); ctx.fillStyle = "rgba(0,0,0,.1)"; ctx.strokeStyle = "#ffffff"; setInterval(draw, 1000 / 30); }; function draw() { var x = (1 + Math.cos(3 * t)) / 2 * canvas.width; var y = (1 - Math.sin(2 * t)) / 2 * canvas.height; if (0 t) { ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.moveTo(sx, sy); ctx.lineTo(x, y); ctx.stroke(); } sx = x; sy = y; t += 0.05; } /script /head body canvas id="canvas" width="480" height="480" /canvas /body
https://w.atwiki.jp/myscripts/pages/17.html
「Hello, World!」な MyScripts 入門ページです。千里の道も一歩から〜 直接スクリプトに書く TEXT パラメータを参照する CLIPBOARD パラメータを参照する OPTION パラメータを参照する LOAD_JSON で読み込む 実行方法別パラメータ早見表実行方法 記号の意味 ポイント 実行方法による分岐 直接スクリプトに書く // HelloMyScripts-1 // 直接スクリプトに入力します alert("Hello, MyScripts!"); TEXT パラメータを参照する // HelloMyScripts-2 // TEXT パラメータを参照します alert("Hello, " + TEXT + "!"); 実行するときは、以下の URL を開きます。 myscripts //run?title=HelloMyScripts-2 text=MyScripts TEXT パラメータは汎用的な入力パラメータです。 実行方法に応じて、適切なデータを参照します。 クリップボード URL内のパラメータ Open Inで渡されたテキスト 処理対象スクリプトの本体 いきなり全部を理解するのは難しいので、最初は「いろんなものに使える便利なやつ」程度の認識でもいいかと思います。 詳細はこのページ下部の「実行方法別パラメータ早見表」を参照してください。 CLIPBOARD パラメータを参照する // HelloMyScripts-3 // CLIPBOARD パラメータを参照します alert("Hello, " + CLIPBOARD + "!"); 赤裸々な直近の黒歴史を晒します（クリップボードの中身を表示します）。 つまり「MyScripts」をコピーしていれば、「Hello, MyScripts!」となります。 OPTION パラメータを参照する // HelloMyScripts-4 // OPTION パラメータを参照します alert("Hello, " + OPTION + "!"); 実行するときは、以下の URL を開きます。 myscripts //run?title=HelloMyScripts-4 option=MyScripts TEXT パラメータと似ている印象を持たれたかもしれませんが、寿命が違います。 TEXT は実行するたびに変わりますが、OPTION は最後に明示的に指定した値を（アプリを終了するまで）引継ぎます。 OPTION を使うスクリプトは、意図した通りに動作させるためには、実行方法に気をつける必要があります。 LOAD_JSON で読み込む // HelloMyScripts-5 // データをファイルに保存します SAVE_JSON("HelloMyScripts", "MyScripts"); // HelloMyScripts-6 // データをファイルから読み込みます var str = LOAD_JSON("HelloMyScripts"); alert("Hello, " + str + "!"); HelloMyScripts-5、HelloMyScripts-6 の順に実行してください。 スクリプトで処理した内容を、SAVE_JSON で保存し、（別のスクリプトからも） LOAD_JSON で読み込むことができます。 今回は "HelloMyScripts" という言葉を合言葉（key）にしています。 スクリプトの設定などを保存させるのにとても便利なのですが、放置するといつまでもゴミデータ残るので、使わなくなったら削除を忘れずにしましょう。 // HelloMyScripts-7 // データを初期化します SAVE_JSON("HelloMyScripts", null); 実行方法別パラメータ早見表 実行方法 TEXT CLIPBOARD OPTION 通常実行 ク ク × Open In 本 ク × URL t or ク ク ○ スクリプト処理 本 ク × 実行方法 通常実行 スクリプトの一覧から、スクリプトを実行する Open In 他アプリから、Open In で開く URL リンクや JavaScript から myscripts //run?title=〜 を開く スクリプト処理 スクリプト処理スクリプト実行する 記号の意味 本 テキスト全体 or スクリプト全体 t URL内の text パラメータで指定したテキスト ク クリップボードのテキスト ○ オプション変更可能 × オプション変更不可能 ポイント URL を開くときの TEXT パラメータは、textを指定したか否かによって動作が変わる OPTIONの値を変えるには option パラメータを指定した URL を開く 実行方法による分岐 応用として、ユーザがどのようにスクリプトを実行したかによって、処理を切り分けることができます。 実行方法による分岐 をインポート #PROCESS_SCRIPT TARGET = "info"; if (SCRIPT_TITLE === null) { if (TEXT === CLIPBOARD) { alert("クリップボード"); } else { alert("text パラメータ"); } } else { alert("スクリプト本文"); } TEXT; たまたまクリップボードと text パラメータのテキストが一致した場合は、クリップボードと表示されます。
https://w.atwiki.jp/wikittoku/pages/17.html
javascriptで表（データテーブル）を表示する（Yahoo UI Library DataTable（2.6.0）） サンプル 事前準備 逆引き ソートさせたい。 カラムの幅を調整できるようにしたい。 数値を桁区切りしたい。 ページ繰り機能をつけたい。 マウスオーバーで行をハイライトさせたい。 行を選択状態にしたい。 javascriptで表（データテーブル）を表示する（Yahoo UI Library DataTable（2.6.0）） Yahoo UI LibraryのDataTableライブラリ -- http //developer.yahoo.com/yui/datatable/ データはYahoo UI LibraryのDataSourceを使用する。 サンプル 簡単なサンプル 事前準備 必要ライブラリの読み込み（使用する機能によって増減します） !-- Dependencies -- link type="text/css" rel="stylesheet" href="http //yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css" script type="text/javascript" src="http //yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js" /script script type="text/javascript" src="http //yui.yahooapis.com/2.6.0/build/element/element-beta-min.js" /script script type="text/javascript" src="http //yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js" /script script type="text/javascript" src="http //yui.yahooapis.com/2.6.0/build/json/json-min.js" /script !-- OPTIONAL Connection (enables XHR) -- script type="text/javascript" src="http //yui.yahooapis.com/2.6.0/build/connection/connection-min.js" /script !-- Source files -- script type="text/javascript" src="http //yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js" /script bodyのスタイル指定 body class="yui-skin-sam" 表を置く場所指定 div id="myDataTable" /div データソースなどの準備 YAHOO.util.Event.onDOMReady(function() {//データvar myData = [{name "鈴木", kokugo 100, sugaku 60, rika 70, shakai 50, eigo 95},{name "佐藤", kokugo 50, sugaku 100, rika 100, shakai 70, eigo 45},{name "小林", kokugo 70, sugaku 70, rika 70, shakai 70, eigo 70},{name "中村", kokugo 75, sugaku 95, rika 80, shakai 80, eigo 95},{name "高橋", kokugo 80, sugaku 50, rika 80, shakai 90, eigo 90}]; //データソースvar myDataSource = new YAHOO.util.DataSource(myData);myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;myDataSource.responseSchema = {fields ["name",{key "kokugo", parser "number"},{key "sugaku", parser "number"},{key "rika", parser "number"},{key "shakai", parser "number"},{key "eigo", parser "number"}]}; //以下データテーブルの処理記述・・・ //データテーブルvar myColumnDefs = [{key "name", label "名前"},{key "kokugo", label "国語"},{key "sugaku", label "数学"},{key "rika", label "理科"},{key "shakai", label "社会"},{key "eigo", label "英語"}];var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);}); 逆引き ソートさせたい。 カラム定義設定箇所で sortable true を指定 var myColumnDefs = [{key "name", label "名前", sortable true},{key "kokugo", label "国語"},{key "sugaku", label "数学"},{key "rika", label "理科"},{key "shakai", label "社会"},{key "eigo", label "英語"}]; 数値を数値でソートさせるにはデータソースのresponseSchema設定箇所で parser "number" を指定すること。指定しないと文字列ソートされる。 カラムの幅を調整できるようにしたい。 カラム定義設定箇所で resizeable true を指定 var myColumnDefs = [{key "name", label "名前", resizeable true},{key "kokugo", label "国語"},{key "sugaku", label "数学"},{key "rika", label "理科"},{key "shakai", label "社会"},{key "eigo", label "英語"}]; 指定しても動かない場合、dragdropライブラリを追加してるか確認 数値を桁区切りしたい。 カラム定義設定箇所で formatter "number" を指定 var myColumnDefs = [{key "name", label "名前", formatter "number"},{key "kokugo", label "国語"},{key "sugaku", label "数学"},{key "rika", label "理科"},{key "shakai", label "社会"},{key "eigo", label "英語"}]; formatterオプションは他にも"button"、"checkbox"、"currency"、"date"、etc..などの設定値がある。また、独自のフォーマットも作成できる。 ページ繰り機能をつけたい。 YAHOO.widget.Paginatorを使用する。 var oConfigs = {paginator new YAHOO.widget.Paginator({rowsPerPage 30})};var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource, oConfigs); paginatorライブラリ,cssを追加する必要がある。 マウスオーバーで行をハイライトさせたい。 var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow); 行を選択状態にしたい。 1行選択 var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);myDataTable.set("selectionMode", "single");myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow); 複数行選択可 var myDataTable = new YAHOO.widget.DataTable("myDataTable", myColumnDefs, myDataSource);myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);