javascript

option要素のtext部分をみてselect要素の値をJavascriptから変更する方法 ES5 ES6編

以前option要素のtext部分をみてselect要素の値をJavascriptから変更する方法についてという記事を書きました。 この記事はもう3年も前に書いたものなのですが現在でもこのブログ全記事の中で5本の指に入るほど頻繁に閲覧していただいています。ただ3年の間…

tilamic.jsの使い方その9・'.on()'メソッド

今回も引き続きtilamic.jsの解説記事です。今回はタイルにイベントリスナーを設定する'.on()'メソッドについて解説します。 この記事の内容はtilamic.js Method-onとほぼ同じです。書式 .on(events[, data], handler)'.on()'メソッドは基本的にはjQueryの'.o…

tilamic.jsの使い方その8・'.getCurrentImgID()'メソッド

今回も引き続きtilamic.jsの解説記事です。この記事ではタイルに現在表示されている画像がどれかという情報を取得する'.getCurrentImgID()'メソッドについて解説します。 この記事の内容はtilamic.js Method-getcurrentimgidとほぼ同じです。'.getCurrentImg…

tilamic.jsの使い方その7・'.resize()'メソッド

今回も引き続きtilamic.jsの解説記事です。この記事ではタイルが表示されるエリア(以下単にエリア)の大きさを再計算する'.resize()'メソッドについて解説します。 この記事の内容はtilamic.js Method-resizeとほぼ同じです。'.resize()'メソッドはエリアの横…

tilamic.jsの使い方その6・'.setOrigin()'メソッド

今回も引き続きtilamic.jsの解説記事です。この記事では前回解説した'.filter()'メソッドと並んでtilamic.jsの鍵である'.setOrigin()'メソッドについて解説します。 この記事の内容はtilamic.js Method-setoriginとほぼ同じです。'.setOrigin()'メソッドはア…

tilamic.jsの使い方その5・'.filter()'メソッド

前回の記事に続きtilamic.jsのメソッドについての解説です。この記事ではtilamic.jsの鍵となる機能の一つである'.filter()'メソッドについて解説します。 この記事の内容はtilamic.js Method-filterとほぼ同じです。tilamic.jsのアピールポイントの一つがど…

tilamic.jsの使い方その4・'.seqFlip()'メソッド

前回のtilamic.jsの使い方その3・'.flip()'メソッドに続きtilamic.jsのメソッドについての解説です。この記事ではタイルを順に回転させるメソッドである.seqFlip()について解説します。 この記事の内容はtilamic.js Method-seqflipとほぼ同じです。書式 .se…

tilamic.jsの使い方その3・'.flip()'メソッド

昨日のtilamic.jsの使い方その2・コンストラクタのオプションに続くtilamic.jsの使い方解説です。この記事では実際にタイルを回転させるメソッドである.flip()について紹介します。 この記事の内容はtilamic.js Method-flipとほぼ同じです。書式 .flip(imgI…

tilamic.jsの使い方その2・コンストラクタのオプション

先日のtilamic.jsの使い方その1・オブジェクトの作成と基本の回転に続き、tilamic.jsの使い方解説です。この記事ではインスタンス作成時のコンストラクタのオプションについて紹介します。 この記事の内容はtilamic.js Constructor Optionsとほぼ同じです。…

tilamic.jsの使い方その1・オブジェクトの作成と基本の回転

昨日公開したtilamic.jsですが、やはり作ったからには使ってもらいたいという思いがありそのためにデモとドキュメントは英語で作成しました。 tilamic.jsのデモとドキュメントそこでこのブログでは日本語で基本的な使い方を何回かに分けて書きたいと思います…

tilamic.jsというモジュールを作成&公開しました

tilamic.jsというJavascriptモジュールを作成し公開しました。tilamic.js tilamic.jsは画像をタイル状に分割しタイルを個別にCSS3を用いて3次元回転させるモジュールです。 こちらのデモをご覧いただくとどういったものかがわかると思います。またソースもGi…

option要素のtext部分をみてselect要素の値をJavascriptから変更する方法について

若干わかりづらいタイトルですが次のようなことです。下のようなhtmlがあるとします。 <select id="sampleSelect"> <option value="0">Apple</option> <option value="1">Orange</option> <option value="2">Lemon</option> <option value="3">Strawberry</option> </select> これに対して選択中のoption要素をJavascriptから変更する機能をつける際、value属性の値を指定して選択を行うのではなくtext部分('App…

Javascriptで配列にある値が存在するかどうかを確認する方法について

以前配列にある値が存在するかどうかをfor文を使わずに調べる方法を考えてみたという記事を書きました。この記事は「やろうと思えばこういう方法でもできるなぁ」というアイデアについて書いた記事だったのですが、Javascriptで配列にある値が存在するかどう…

Web Storageに保存したデータを異なる文字コードで読みだしてみる

私はウェブサイトを作るにあたり以前は主にShift-JISを使用していましたが、最近はUTF-8を使用しています。 先日、運営するサイトをリニューアルする機会があったのですが、HTML,Javascriptが共にShift-JISで書かれているサイトをUTF-8に変更することにしま…

データをAjax風にやり取りするように改造してみました

これまで書いてきたGAEのコードではブラウザからの入力データを受け取るたびにページを再描画する方法で画面を更新していましたが、今回ブラウザ側はJavascriptを使ってデータの送受信を行うように改造してみました。 ページ全体を描画するのは最初のアクセ…

連想配列のキー名にマルチバイト文字は使えないと思い込んでいた話

表題の通りなのですが私は最近までJavascriptの連想配列のキーにはマルチバイト文字が使えないものだと思い込んでいました。(実際は使えます)Pythonでは使っていたにも関わらずJavascriptでは使えないと思い込んでいた理由は、Javascriptにおいては「連想配…

オブジェクトのデフォルト値(valueOfとtoStringの関係)について

この記事の内容はすべてECMAScript5に基づいているのでIE8などでは違う結果になります以前書いた記事で{toString : valueOf}という記述の意味について考えたのですが、コメントで間違いを指摘して頂いたので改めて書きたいと思います。今回は簡単のために以…

{toString : valueOf}というオブジェクトリテラル記述の不思議について

先日404 Blog Not Foundの404 Blog Not Found:Algorithm - 0と1を次々と返す簡単なお仕事という記事を読んでいて気になったことがありましたのでそのことについて。 といっても記事の内容そのものとは関係がないのですが、この記事の一番最後に追記として書…

jQueryの.attr()メソッドでのHTMLクラス指定の話

これまでずっとjQuery1.5.1を使用していたのですが先日まとめて最新の1.7.1に変更しました。 その際.attr()メソッドの扱いで少しハマってしまったのでそのことについてです。jQuery1.6以降はそれ以前のバージョンで使用できた <body> <ul id="testID"> </ul> <script> $("<li>").attr("className","t</li></body>…

配列にある値が存在するかどうかをfor文を使わずに調べる方法を考えてみた

先にお断りしておきますが、この方法は厳密ではないので数値と文字列など型を区別して存在確認したい場合には使えません。また速度やメモリ消費という意味で実用に耐えるかどうかもわかりません。こういうこともできるなー程度に読んでください(^_^;) 2013/1…

NaNの比較は要注意

先日JavascriptでlocalStorageから読み出した複数の情報を扱っていた時のことです。 localStorageにはキーと値の組み合わせで情報が保存されていますが、値はすべて文字列として保存されているため値の内数値のものだけを数値型に変換し、実際に文字列の物は…

for in 文の処理について(続編)

先日のエントリでJavascriptのfor in文について for in文は処理済みのプロパティ名のみを覚えていてプロパティの数はチェックしない。未処理のプロパティが存在するか否かはループ内の処理が終わるたびにその時点でのプロパティと処理済のプロパティを比較し…

Operaの特殊な?挙動

Operaの動作について気づいたことがあるのでメモ。JavascriptからDOMに対して一度に複数の処理を行った場合、多くのブラウザでは関数の終わりにまとめてそれらの操作が画面に反映されるのに対してOperaは操作が逐一画面に反映されます。下のコードを実行する…

for (in) 文の内部から走査中の(連想)配列の項目数をいじる

昨日のエントリにてPythonのfor in文について書きましたがJavascriptの場合はどうだったかな、と思って調べてみました。 ループ中にループ内から走査中の配列・連想配列の項目を削除、追加した場合の挙動についてです。 そのような処理を実際に書いたことは…

愛(i)は地球を汚染しやすい

地球はグローバルスコープという意味で。以前に自分が書いたコードをメンテナンスしていると結構やってしまっている書き方に次の物があります。 arrayという要素数が100の配列をグローバルに宣言して要素をすべて0に初期化するとします。 var array = new Ar…

私が今までクロージャを理解できなかった理由

Javascriptを勉強する上で誰もがつまずくと言われるクロージャですが私も例に漏れず理解できないでいました。 さまざまな解説サイトを読んだりサンプルコードを書き換えてみたりして 静的なスコープの言語で利用できる。 関数が終了したあともそのローカル変…

インデントの話

私はこれまでコードを書く際インデントはTabを使っていたんですが世間的にはスペースの方が好まれるみたいですね。 理由はタブ幅はエディタによって異なるからだとか。 なので私も今後はインデントはスペースを使おう!と思っていたのですがよく考えると 一…

Javascript 関数定義の疑問

Javascriptを勉強しはじめてからDan Kogaiさんのブログ404 Blog Not Foundを読んでいるのですが関数(コンストラクタ)定義について謎に思っていることがありまして。例えばこの記事404 Blog Not Found:javascript - からnewを取り除いてみるですが一番上のサ…