読者です 読者をやめる 読者になる 読者になる

javascript

JavaScriptのnew Date()コンストラクタにはマイナスも指定可能

ソースレビュー中に驚く記述がありました。 var year = 2017; var month = 2; var day = 22; var d = new Date(year, month-3, day); // 3ヶ月前 いやこれ、月がマイナスになる場合は落ちるんじゃないか、と思いました。 ところが、実際に動かしてみるとこう…

jQueryでテキストエリア内のスクロールが発生しているか検知する方法

いつの間にか新年になっていました。 あけましておめでとうございます。今年もよろしくお願いします。 html上の要素を制御する方法について色々と調べていたら、面白そうなものを見つけました。 jQuery でサイズや位置を取得する方法を図にしてみた - Cyokod…

jQueryのtriggerでaタグのhrefへ遷移させる方法

リンクを描画するための極めてシンプルな方法として<a>タグのhrefがあります。 あずまや <a href="http://azuma006.hatenablog.com/">あずまや</a> <a></a>タグで囲まれた文字列をクリックすると、href属性に書かれたURLへ遷移します。 今回はAjaxでなんらかの処理をしたあと、画面内のリンク先へ遷移させるため、jQue</a>…

三項演算子

ほとんど全てのプログラミング言語にはifとforが備わっています。 if文の場合、書き方に違いはあれど、以下のような形が基本です。 if (boolean) { // booleanがtrueの場合に実行される処理 } else { // booleanがfalseの場合に実行される処理} 判定結果によ…

Webサイトの表示速度を計測するブックマークレット

Webシステムのとある画面について表示速度が遅いという指摘を受けて速度改善を行ったりすることがあります。 「表示されるのが遅い」といっても原因はさまざまです。 リンクをクリックしてからサーバにリクエストが送信されるまでの時間。 サーバがリクエス…

JavaScriptの無名関数で引数を渡す方法

jQueryなどのライブラリがある現在ではあまり使われなくなった(姿を変えた?)かもしれない無名関数。 そのjQueryがよくわからない衝突かなにかを起こしているのか、ノーマルなJavaScriptを書かなくてはいけない機会があったので復習。 参考: 無名関数をすぐ…

JavaScriptで乱数生成

JavaScriptで乱数を生成する場合、たいていはMath関数を使います。 具体的にはMath.random()という関数を使うことになります。 Math.random() // このままだと、0~1の間の少数がランダムで生成され、桁数も多くて扱いづらいです。 そこで、以下のように乱数…

Google Books APIでISBNコードから書籍検索するスクリプト

昨日、書籍検索APIについて少し調べたので記事を書きました。 書籍検索API どうやら、Google Books APIに関してはAPIKeyが無くても情報を取得できるようです。必須ではないみたいですね。 ということで、ISBNコードを入力して簡単な書籍情報を取得できるスク…

JavaScriptで特殊文字を削除

JavaScriptで任意の文字列から特定の文字を削除する場合、普通はreplaceを使います。 var txtBefore = "abcde"; var txtAfter = txtBefore.replace(/c/g,""); txtBeforeから'c'という文字を""(空白)に置換することで、削除を実現します。 /の後ろにあるgを付…

CSSでレート評価(★)を表現してみる

よくアプリのレート評価などで星マーク(★)を使った表現が使われます。 無評価の0から5つ星の6段階であれば、星マークをただ並べれば良いのですが、評価人数の母体が増えると、平均して3.7つ星なんていう状況も出てきます。 そんな表現をCSSだけで出来ないか…

Firefoxで「右クリック禁止」を回避?

一昔前のWebサイトなどで「右クリック禁止」がありました。 方法自体は単純で、oncontextmenuというイベントでreturn falseなどを返してあげればよいです。 以下に実装してみます。四角い枠の中では右クリックが無効化され、コンテキストメニューが表示され…

はてなブログでたまにJavaScriptが効かなくなる?

アクセス解析を確認しつつ、たまに自分のブログをチェックしています。 すると、いくつかの記事でJavaScriptが動かなくなっているものを見つけました。 その原因もさまざまで、scriptタグに変な属性が付与されていたり、onblur属性が消去されていたり、analy…

jQueryプラグイン「jqGrid」を勉強しました その2

前回はほとんど導入のみだった気もするので、今回は編集メインで組んでみました。 行の追加、行の編集、行の削除、それと簡易絞込み検索を実装しています。 参考:jQueryプラグイン「jqGrid」を勉強しました jqGridデモ jqGrid Demo2 ※TOK2で404となっていま…

jqGridでdelRowData後にソートが効かなくなる

たまにjqGridに触れる機会があります。 関連:jQueryプラグイン「jqGrid」を勉強しました 前回のサンプルでは単純なグリッドテーブルで行の追加や削除は実装していませんでした。 jqGridのデータはサーバから取得することが多いですが、ローカルにデータを持…

JavaScriptで外部関数が読み込まれた後に処理を実行する

JavaScriptは良い意味でも悪い意味でも自由度が高いです。 基本的にhtmlはソースの上から順に読み込んでいきますが、外部ファイルなどは取得にタイムラグが発生して処理実行時に必要な関数が見つからない場合が稀にあります。 そんなときに、外部関数が読み…

JavaScriptでQRコード生成

昨日の記事に連なります。 JavaScriptでバーコード生成 jQueryのプラグインにバーコードを生成してくれるものがありますが、二次元コードであるQRコードを生成してくれるプラグインもありました。 http://jeromeetienne.github.io/jquery-qrcode/ QRコードは…

JavaScriptでバーコード生成

以前、講談社コミックスからバーコードが消えていた件で、書籍バーコードの生成を行う記事を書きました。 そのときはバーコードの生成によそ様のサイトを紹介したのですが、調べてみたらjQueryプラグインが公開されていました。 http://barcode-coder.com/ …

iframeのクロスドメイン事情

iframe越しの別ドメインでのcookieのやりとりに四苦八苦しました。 前提条件 iframeの呼び出し元と先でサーバドメインが異なる 2つのサーバは両方編集可能 (わるいことしたいわけではない) サーブレットにおいてcookieはsubmit時に送信される [参考] サーバ1…

JavaScriptで簡単にグラフが作成できる「Google Charts」

以前からhtmlとJavaScriptでグラフを描画できまいかと考えていました。 jQueryを使うようになってからプラグインを探してみましたが、ノーマルなJavaScriptでも描けそうなライブラリがありました。 Google Charts — Google Developers Google Charts — Googl…

jQueryで遊んでみましたの3

前回。 昨日に比べると軽いコードです。 クリックするたびにテーブル上の文字を切り替えるだけです。 一応、ついでに背景とかtitleとかも替えてますが、パターンの判定は単純なswitch文です。 // クリックするたびに文字を切り替える デモ グー チョキ パー …

jQueryプラグイン「jqGrid」を勉強しました

必要に迫られたので。 jQuery Grid Plugin – jqGrid [日本語マニュアルサイト:jqGrid] jqGridデモ jqGrid Demo ※TOK2で404となっていました。すみません… 主な機能 jqGridを使用したグリッドテーブル jqGridでのヘッダ2段組 jqGridでの横固定スクロール jqG…

ポケモンXY:タイプ相性チェッカー

ポケモンXYのタイプ相性チェッカーを作りました。 さかさバトルでの自分のパーティの弱点の一貫性を調べるために便利だと思います。 一般的な相性表とは攻防の行列が逆かもしれませんので、見方に注意です。 // "); for (var i=0; i"); obj = $("").attr("ty…

jQueryで遊んでみましたの1

本格的にjQueryを勉強しようと思い至りました。 今回は、animate関数を使ったアニメーションです。 アニメーションは独自で実装するのが困難だったので、jQueryを使うなら最初にやってみたいことでした。 // クリックでメニュー開閉 デモ click もう1回クリ…

jQueryテンプレートを覚えたい

都合上、jQueryを使ったソースを読む機会が増えてきました。 まずは基礎を抑えよう、ということでライブラリの一切を使わずにDOM操作を覚えるようにしてきました。 その反動で、まだまだjQuery独特の書き方に付いていけていません。 エレメントをクリックし…

JavaScriptの小数点を含む計算での誤差

// form1: x * y = z× = 単純な掛け算を行うフォームを用意します。 このフォームは、xとyに数値を入力するとzに乗算結果を出力します。 スクリプトも単純で、テキストボックスの値を読み取って掛けるのみです。 ところが、x = 0.7, y = 1,400 や x = 10.2, …

JavaScriptでセレクトボックスの制御

input要素と少し違うため、たまに扱おうとすると忘れてます。備忘録です。 シンプルなセレクトボックス 1 2 3 4 5 6 7 <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option></select>

JavaScriptの処理時間を計測する

なんか、ソース修正後の動作が遅いと言われました。 そのため、以下のように測定してみようと思いました。 var actionTime = null;function hogeAction() { actionTime = new Date().getTime(); // なんか実際の処理 … alert(new Date().getTime() - actionT…

htmlでブラウザの禁則処理による自動改行を回避する

前回の続きのようなものです。[html構文での改行制御] この記事での結論は、ご期待に沿えるような回避方法ではないものになっていると思います。 さて、前回の最後に禁則処理というものに触れました。 先頭にくると違和感を覚える行頭禁止文字や、文章の行末…

JavaScriptによるギガグラ+明星でのダメージを計算

多くのスペシャルダンジョンを天ルシパーティで周回していますが、毎回ギガグラと明星で倒せるかの計算をするのが億劫になっていたので計算スクリプトを組みました。 // 6) { alert("そんなにパーティに入りませんよ"); return false; } var flg = true; var…

canvasタグでミアレシティのマップを再現してみる

html5から実装されたcanvasタグを勉強していたら、何だか面白くなってしまったので作成しました。 // ①ジョーヌ広場 ②ルージュ広場 ③ローズ広場 ④ブルー広場 ⑤ベール広場 ①ド・フツー ②ニ・リュー ③ド・キワミ ④ローリングドリーマー ①カンコドール ②かわいがり ③フ…

予測変換スクリプト(暫定版)

更に続きです。ひとまず暫定版として置いておきます。 予測変換スクリプト(草案のみ) 予測変換スクリプト(骨組み) // =0; i--) { list.removeChild(list.childNodes[i]); } // ulタグ生成 var ulElm = document.createElement("ul"); ulElm.style.fontSi…

予測変換スクリプト(骨組み)

昨日の続きです。予測変換スクリプト(草案のみ) 流石にやっつけ仕事すぎると思うので、少し動くものを組んでみました。 // "; } } return str; } function compareFunc(target, word) { word = roma2h(word); // 比較時だけカタカナ⇒ひらがな target = tar…

予測変換スクリプト(草案のみ)

ふと、予測変換機能をJavaScriptで作ってみようと思い至りました。唐突に。 予測変換機能というのはGoogle検索を代表としたあれです。サジェスト? 流石にGoogleのもつ膨大なデータベースからの予測なんていうものを作るつもりはありません。 変換候補に出し…

パズドラのモンスター図鑑を作りました

パズドラ モンスター図鑑 以前からJavaScriptでちまちま作成していたパズドラ図鑑ですが、覚醒スキルが実装されてからモンスター情報が複雑化して調べにくかったので、真面目に作ることにしました。 上記のサイトに置いてあります。 現時点でできること タイ…

JavaScriptによる"hoge.7z.001"のような分割ファイルを結合するコマンド生成

表題のようなファイルは、コマンドプロンプトでcopyコマンドを使用することで1つのファイルに結合することができます。 例えば、"hoge.7z.001"、"hoge.7z.002"に分割された"hoge.7z"というファイルを結合するには copy /b "hoge.7z.001"+"hoge.7z.002" "hoge…

JavaScriptによるライブラリ不要の絞込み機能付きテーブルソート

前回の続きです。 目標 特殊なライブラリを使用せずにテーブルソートを行う ソートするデータは静的コンテンツで、JSON形式とする 条件設定枠を設けて表示データを絞り込めるようにする なるべくシンプルに、汎用性を高める 最終目標はパズドラの究極データ…

JavaScriptによるライブラリ不要のテーブルソート

はてなブログはJavaScriptが使えるそうなので、いろいろ試してみたいと思います。 目標 特殊なライブラリを使用せずにテーブルソートを行う ソートするデータは静的コンテンツで、JSON形式とする 条件設定枠を設けて表示データを絞り込めるようにする なるべ…