アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < イザユケエンジニャー

JavaScript(jQuery)

背景色に応じた文字色に変える / ランダム色を生成する

まずはサンプルから。 押すたびに背景色がランダムで変わり、文字色が白か黒の適した色に変わります。 ここをクリック function getStrColor (bg){ // 色をRGBに分割 var r = parseInt(bg.substr(1, 2), 16); var g = parseInt(bg.substr(3, 2), 16); var b …

jQueryで属性とか値とかを書き換える&取得するいろいろ

value値 <input id="sample1" type="hidden" value=""> <script> // value値を「test」に書き換える $("#sample1").val("test"); // value値を取得する(↑で書き換えているので「test」となる) console.log( $("#sample1").val() ); <script> テキスト <span id="sample2">sample2</span> <script> // テキストを「sample2_update」に書き換える $("#sample…

jQueryでclassをもちゃもちゃする

基本編(add, remove, toggle, has) 追加 $(要素).addClass(class名); 削除 $(要素).removeClass(class名); あれば削除、なければ追加 $(要素).toggleClass(class名); あるかどうかを確認 // あればtrue、なければfalse $(要素).hasClass(class名); 実装サン…

ドラッグ&ドロップで列を入れ替えられるようにする

WEBアプリで、 「テーブルの列をドラッグ&ドロップで並べ替えられるようにしたい!あと、並べ替えた結果はユーザごとに保存しておけるようにしてほしい!」とか言われて「は?」と思ったんですが 調べてみるとJSライブラリがあったのでそれでさくっと実装。…

ポップアップアラートのかんたん実装

「単純なアラート」「OK/NGのみの二択アラート」「ページ離脱時の警告」の三本立て。 ブラウザ依存なのでデザインもクソもない代わりにめちゃくちゃ簡単実装。 アラートを表示 ただメッセージを出すだけのやつ。 alert("エラーメッセージ"); サンプル:これ…

キーボードで操作をさせる

キーボードで特別に操作をさせたい(もしくはさせたくない)場合があります。 単純にショートカットキーを作りたいとか、 方向キーでモーダルやページ自体を切り替えるとか、 F5キーを押させたくないとか…。そういう場合は押されたキーを判別する仕組みを置…

ドラッグ&ドロップで項目の並べ替えを可能にする

まずはサンプルから。「hoge」「fuga」「piyo」の文字列をドラッグ&ドロップで並べ替えることができます。↓実装サンプルここから ================================ hoge fuga piyo $(function() { $(".sortable").sortable(); }); =======================…

JSとPHPでJSONデータを扱う

WEBアプリを作っていると、JSとPHPの間のデータのやり取りなどでJSON形式を使うことが多いので、 JSONを配列にしたり、配列をJSONにしたりする方法をメモ。 PHPで配列をJSONにする json_encodeを使います。 PHP: json_encode - Manual 変換したい配列以外に…

非同期処理を同期処理っぽく扱う

まず、以下2つの関数を用意しました。 // funcBの戻り値と"funcA"を吐き出す関数 function funcA(){ console.log(funcB()); console.log("funcA"); } // 開始から5秒後に「funcB」とreturnする関数 function funcB(){ setTimeout(function(){ return "funcB"…

連想配列に含まれるIDを使ってユニーク化する関数

を作ったのでメモ。 function uniqAry(ary){ // idの値で昇順ソートする ary.sort(function(a, b){ return a.id > b.id; }); // 重複しているIDがあれば後に出てきた方を削除(undefinedにする) var tmpid = 0; $(ary).each(function(i, e){ if (e.id == tm…

特定のクラスを持ったチェックボックスについて、チェック有無で絞り込む

jQueryのセレクタ便利…。 いや、プレーンJSの書き方知らないので比較できないんですけどこれはたぶん便利なやつ…。必要になるたびググってる気がするのでメモ。↓実装サンプルここから ================================ チェックしているものとしていないも…

ドラッグ&ドロップでファイルをアップロードする(ちょっとリッチ版)

こちらの記事が前提となります。 簡単に書くと 「ファイルのアップロードフォーム」と 「アップロードしたいファイルをドロップできるエリア」を用意して エリアにドロップされたファイルをフォームに渡す処理が既にあります。これに対して、この記事では以…

ドラッグ&ドロップでファイルをアップロードする(最低限版)

タイトル通りのやつにちょっと苦戦したのでメモ。 つーか業務アプリなんだからドラッグ&ドロップじゃなくてよくね??今回は必要最低限の処理だけ書いた版です。ちょっとリッチ版はこちら。 ドラッグ&ドロップでファイルをアップロードする(ちょっとリッ…

アイテムをドラッグ&ドロップできるようにする

並べ替えとか、ファイルとフォルダの移動とか、そういうものの実装に使えそうなやつ。 意外と簡単に実装できました。jquery使ってます。<HTML> <span class="drag-item" data-iid="1">アイテム1</span> <span class="drag-item" data-iid="2">アイテム2</span> <div class="drop-area" data-aid="1">エリア1</div> <div class="drop-area" data-aid="2">エリア2</div> <JS> setDraggable(); setDroppabl…

文字列をクリップボードにコピーする関数

…を作ったのでメモ。 テキストエリアを作らないとコピーできないようなのでそのようにしています。 function copyText(text){ // コピーする文字列を入れるフォーム var form = document.createElement("textarea"); form.textContent = text; // bodyタグ内…

特定文字~特定文字の間の文字列を切り出す関数

を作ったのでメモ。 function strcut(str, start, end){ var sidx = 0; var eidx = str.length; if (start != ""){ sidx = str.indexOf(start) + start.length; } if (end != ""){ eidx = str.indexOf(end); } if (sidx > eidx){ return ""; } return str.su…

javascriptでゼロパディング

ググると 「ゼロパディングしたい文字列の左側にゼロくっつけておいて右側から切り出す」 って方法しか出てこないんだけどマジか…そういう標準関数とか存在しないのか…しかもその方法そのまんまだと、もし桁が溢れる場合に切り捨てられてしまうので、 「規定…

正規表現にマッチするかどうかを調べる

これも書き方を忘れるのでメモ。基本的に var pattern = new RegExp(正規表現); pattern.test(文字列); // ←ここの戻り値がtrue/false という二段構えになるようです。具体例はこんな感じ。 var str1 = "1234"; var str2 = "123a"; var pattern = new RegExp…

配列のjQuery式foreach

覚えられないのでメモその他配列処理は以前に書いたやつ参照 jsで配列操作いろいろ - アナログCPU:5108843109 基本 var list = [ {"id" : 1, "value" : 100}, {"id" : 2, "value" : 200}, {"id" : 3, "value" : 300}, ]; $(list).each(function(index, elem…

iframeの親子間・子同士の操作いろいろまとめ

苦戦した~~~。以下、こんな感じの構造を想定していきます。<親 parent.html> <div id="header">ヘッダ</div> <iframe id="iframe_1" src="child_1.html"> <iframe id="iframe_2" src="child_2.html"> <子 child_*.html> <div id="child_1_content">子1</div> <div id="child_2_content">子2</div> 子から親を書き換える</iframe>…

iframeのデメリットを無理矢理消化した実装(JS+PHP+Smarty版)

iframeの二大デメリット 「URLが切り替わらない(常にフレームの外側ページのもの)」 「内側ページのURLを直接叩くとフレームが出ない」 を解決すべく とりあえず↑を検討した後、やっぱ微妙だなと思って PHPとSmartyの力も借りて実装したバージョン。仕組み…

iframeのデメリットを無理矢理消化した実装(JS版)

iframeの二大デメリットといえば 「URLが切り替わらない(常にフレームの外側ページのもの)」 「内側ページのURLを直接叩くとフレームが出ない」 なんですが これを解決しつつもiframeしたいと言われたのでちょっと考えました。しかも新規開発ではなく既存…

ツールチップを自前で実装

したのでメモっておく。つーかはてなブログ、CSSもJSも記事内で書けるのかスゲー。 ということで実装サンプルも置いておく。↓実装サンプルここから ================================ ここにマウスを乗せるとピョッと出てくる ===============================…

setIntervalの挙動で勘違いしていたこと

setIntervalを単なる時間区切りループ的なものと認識していたらつまづいた話。(初心者丸出し) ※コードはjQueryで書いています以下のコード、 「start」→「roop:0」→…「roop:4」→「end」 と動くのかと思ったら、 「start」→「end」→「roop:0」→…「roop:4」 …

新しいウインドウを開き、そこに値を送信する

まずは結論 <HTML:親ウインドウ> <a href="#" onclick="pushValue();">ウインドウを開いて値を送信する</a> <HTML:子ウインドウ> <input type="hidden" id="testid" value=""> <jQuery> var obj; // 開いたウインドウを扱うためのオブジェクト変数 function pushValue(){ // ウインドウオブジェクトが存在しない場合・閉じられている場…

JS/jQueryを使って、動的に生成したURLへ遷移させる

3種類考えたので全部書いとく。 「動的に生成したURL」ってタイトルだけどその生成部分は重要じゃないので普通に固定値で書いてる。 location.hrefを使う方法 <HTML> <a href="#" onclick="redirect();">ダミーリンク</a> <jQuery> function redirect(){ location.href = "http://example.com";…

定期的に処理を行う

5分ごとにAjax通信で画面の一部を更新するとか、 時計やタイマー的な機能の実装をするとかの用途? (上記の例ではほかに良い手段もあるかもしれませんが)意外と簡単に実装できました。 setInterval(function(){ // 処理 },[ミリ秒]); 例えば以下のコードだ…

チェックボックスのオンオフ切り替え

JSからチェックボックスのチェック有無を切り替える方法。 考え方としてはcheckboxタグの「checked」を入れたり消したりするだけ。<HTML> <input type="checkbox" id="cb1"> <jQuery> // チェックを入れる $("#cb1").prop("checked", true); // チェックを消す $("#cb1").prop("checked",…

spliceを使いこなす

spliceメソッドを使うことで 「配列の途中に要素を追加」「配列の途中の要素を削除」できるようです。 配列.splice(開始位置[, 削除する要素数][, 追加する要素1, 追加する要素2, ...]) 開始位置 0始まり(というか単純にキーと思えばOK?) 負数なら配列の…

jsで配列操作いろいろ

jQuery限定な話は混ざってないと思う…たぶん。jQueryですがループの話はこっち。 配列でjQuery式foreach - アナログCPU:5108843109 配列をつくる 基本の配列 // 空の配列を定義 var list_1 = []; // データの入った配列を定義 var list_2 = ["a", "b", "c"]…