JavaScriptをなめていた私が勉強しなおした結果、色々驚愕の事実が発覚したお話。JavaScriptをご存じの方には当然の内容かもしれません。 むかしむかし 私にとってJavaScriptといえば、高校生時代(10 […]

ボタンを作成する button要素を使うと、input要素と同等の機能を持つボタンが作成できる。type=”button” で汎用ボタンになる。 画像ボタンにする imgタグを使うと画像ボタンが作れる。 <button type="button"><img src="b_play.png"></button> をブラウザで開くと以下になる。 画像の背景を透明にする button { background-color:transparent;border-style:none;} ボタンの背景色を透明に、枠線をなしにすると、 のようなボタンが作成できる。 ツールチップを設定する <button type="button" title="tooltip content"><img src="b_play.png"></button> ボタンに限らず、title属性を設定することで、ツールチップ

■Geolocation APIとは Geolocation APIは、ユーザーの位置情報を扱うためのAPIです。 Geolocation APIの登場以前にも携帯端末などで位置情報を扱うことは出来ましたが、 各携帯キャリア独自の規格であったためキャリアごとの仕様に合わせて開発する必要がありました。 Geolocation APIは、ウェブの標準化団体であるW3Cが仕様策定を進める規格であり、JavaScriptで位置情報を取得できるように標準化されています。 すでに、Firefox・Google Chrome・Safariなどの一般的なブラウザでサポートされており、 スマートフォンのようなGPS対応の携帯端末向けのウェブサイトだけではなく、 一般的なブラウザで閲覧するいわゆるPCサイトでもユーザーの位置情報を利用したコンテンツを提供することが可能になっています。 ■どんなしくみ？ Geo

JavaScript でいろいろな日付の計算関係をまとめてみました。前回の日付関係のまとめエントリの JavaScript版です。 日付の単位について 基本的なことですが、一応まとめておきます。 1秒は1000ミリ秒 1分は60秒 1時間は60分 よって 1時間=60分=3600秒=3600000ミリ秒 1日=24時間=1440分=86400秒=86400000ミリ秒 現在時刻の取得 まずは、最もよく使う処理です。 //今日の日時を表示 var date = new Date(); document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.get

現在位置を取得する方法として getCurrentPosition() メソッドを紹介しましたが、これは一度だけ位置情報を取得するだけです。しかし、連続して位置情報を取得するメソッドも用意されています。 連続して位置情報を取得する watchId = window.navigator.geolocation.watchPosition( successCallback, errorCallback, options ) 基本的な使い方は、 getCurrentPosition() と同じです。使い方の詳細は、「現在位置を取得する」で確認してください。 ＞＞　現在位置を取得する このメソッドが呼び出されると、非同期に位置情報取得処理が繰り返し行われ、常に位置情報を監視した状態になります。このメソッドが呼び出されるとすぐに、その監視識別IDを返します。これは、 clearWatch() メソッ

JavaScriptにおける（変な）数値と文字列の相互変換の方法のまとめ。 使い古されたものばかりなので、かなり既出。 基本の方法だけ使ったほうが、安全かつ美しいコードが書けるのでトリビア扱いで。 数値→整数編 ビット演算は符号付き32bit整数として扱われることを利用したテクニック。 一歩間違うと小数の誤差やらオーバーフローにはまってしまう、諸刃の刃。 //基本 Math.floor(n); //-1とAND n&-1; -1&n; //0とOR n|0; 0|n; //0とXOR n^0; 0^n; //0回シフト n>>0; n<<0; //2回補数を取る（＝もとに戻るので整数化の効果のみ残る） ~~n; 文字列→数値編 算術演算を行い、演算子の前後の項が数値であるという仮定から数値化するテクニック。 //基本 Number(str); parseFloat(str); //0を引く

Turning Passion into Opportunities: The Power of a Unique Logo Concept As a creative writer and design enthusiast, opportunities are endless when you explore innovative concepts like the Fennel Watercolor Logo Concept. This idea blends the charm of nature with the fluidity of watercolor art, making it a perfect niche for branding projects in the fruits category. Whether you're a… Revolutionary New

jQueryでいろんな処理を行うにあたって、HTMLにデータを埋め込んで使いたいことがあります。 そのようなデータは画面上に表示したくないために、タグ属性にデータをセットしたいけど、適切な属性がない場合、独自属性を追加することがあります。 独自属性といっても適当に名前をつけるのは間違いです。アクセシビリティが低下してしまいます。 独自属性の書き方 アクセシビリティについては今度書こうと思います。 HTML5では独自属性の命名規則が決まっており、DOM操作方法としてもちゃんと決まっているようです。 独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP 独自データ属性の詳しい仕様 例えば、「data-user-name」や「data-url」といった「data-」をつけた名前をつけることができます。(もう少し細かい制約がありますが) ただ命名規則だけでな

解説 HTTPリクエストを使用してデータを取得します。 このメソッドは、ajax の最も低レベルな実装です。 より使いやすく具体化された実装には、jQuery.get(url, [data], [handler], [dataType])、jQuery.post(url, [data], [handler], [dataType])などがあります。 但し、このメソッドほど多くの機能は提供しませんので（例えば、エラーコールバック関数などは指定できません）、場合によって使い分けてください。 （もちろん、ajaxError(handler) 等のグローバルAjaxイベントを使えば、共通処理におけるハンドリングは可能です。） このメソッドは XMLHttpRequest を返します。ほとんど使用することはありませんが、必要であれば、手動でリクエストを中止したりすることができます。 引数 optio