Learn web development | web.devWeb Platform Dive into the web platform, at your pace.
とっても応用の効くラジオボタンを手軽に画像で表現する方法
HTMLのラジオボタンは、複数の選択肢の中から 特定のものを選ばせる時などに使用します。 利用シーンでは、男性・女性を選択するものであったり、 利用規約の同意・非同意、旅館の予約コースの選択であったりと様々です。 HTMLのラジオボタンの作成はとても簡単で、下記の様に作成する事が出来ます。 上記では、『radio-group』というラジオボタンのグループ内で 特定の選択をさせるというものです。 選択出来るのは必ず一つで、選択状態を変更すると他の選択状態は破棄されます。 formで送信する際は、選択されたラジオボタンの「value」の値のみ送信されます。 ラジオボタンはとても便利で、よく使うHTML要素かと思いますが、 そのまま使用するとブラウザ毎に表示が異なり、 デザインにこだわったサイトでは、他のデザインと協調せず、ういてしまいます。 そこで、今回はラジオボタンを手軽に画像にする方法を解
【jQuery】ファイル選択フォームデザインのカスタマイズ方法
基本的に、ファイルのアップロード等で使用するフォーム要素として 『input』要素の『type="file"』がありますが、 ファイル選択ボタンや、ファイル名表示エリアの位置やデザインは 基本的にブラウザ依存で、中々デザインを当て込むのは困難です。 デフォルトで適用されるデザインは、 IEやFirefoxはファイル選択ボタンがファイル名表示エリアに対して右側ですし、 ChromeやSafariはファイル選択ボタンがファイル名表示エリアに対して左側です。 ファイル未選択字のデフォルトメッセージ（『ファイルが選択されていません』等）も 言葉が異なっていたり、そもそも表示が無い等まちまちです。 これだけブラウザによって異なれば、 そのままデフォルトで使用すると 他のデザインとのバランスが悪くなったりして、 どうしてもデザインを入れたいパターンが出てくる場合があります。 また、ブラウザ依存のデザイ
jQuery.extendマニアックスでは、ハッシュのマージからjQueryの拡張までを説明している - つれづれ日記
jQuery.extendマニアックスでは、ハッシュのマージからjQueryの拡張までを説明している。 なるほど、どこかの記事でJavaScriptは関数さえも連想配列であるため、問題があると指摘していたけれども、逆にjQueryのextendメソッドは単なる連想配列を マージするだけで、メソッドを拡張できる仕組みがある。確かに柔軟。 ただし、 jQuery.extend()は最初のハッシュである"target"を上書きして改変してしまうので注意。これはJavaScript共通の特徴。関数に配列を渡すと、参照渡しのため、渡された配列を 書き換えると、元の配列も書き換わっている。jQuery.extend()でマージしたい連想配列を 改変したくない場合は、targetに空の連想配列{}を指定し、返り値でマージした結果をもらう。連想配列は左のものに右のものが順番に上書きされる。 var ext
javascriptとは？知っておきたい基礎知識 - プログラミング学習の窓口
JavaScriptは、htmlとcssで構成したページの動きを操作出来ます。分かりやすい例としては、ボタンやメニューの動き。こういったものもJavaScriptを活用することで実現が出来ます。 Javascriptは非常に人気の高い言語で、JAVAとにていますが別ものです。 ReactのようなJavascriptを応用した技術も普及が進んでおり、今後当分は主流な言語として活用されるでしょう。 The post javascriptとは？知っておきたい基礎知識 first appeared on プログラミング学習の窓口.
Page Visibility APIで現在のWEBページが開いているかどうか - なんちゃってウェブ系エンジニアの備忘録
JavascriptのPage Visibility APIを使うことで現在閲覧しているWEBページが 開いているかどうか確認することができる。 詳しいことは以下のサイトから参照 Page Visibility API の使用 - Web developer guide | MDN 利用シーンとしては･･･ ブラウザのタブ機能を利用して複数の動画を再生。結果的にサーバに負荷が掛かり、他の利用者に迷惑かけてしまう。 画像を順次表示しているサイトで、ユーザがページを見ていないのに次のスライドへ進むべきではないもの ブラウザメールで、開いている時に数分毎メールサーバへ問い合わせを行い、新しいメールをチェックしたいとき 利用者から見えなくなっている（離れている）間は ゲームを停止する など･･･色々使えそうですね。 Page Visibility APIを利用すれば、Web ページが見えていないと
天下一クライアントサイドJS アウトラインメモ
天下一クライアントサイドJS MV*フレームワーク武道会 - connpass に参加してきたのでメモ。 Chaplin - mizchi Chaplin.jsの話 #ten1club // Speaker Deck 仕事で使ってる Chaplin paulmillr作のBackbone拡張系のMVC Rail風の構成 Chaplinの設計 Rails風のルーター インスタンスの管理するComposer Controllerと強調してインスタンスを管理 差分管理できるので早い 逆にインスタンスを引き継ぐので意識しないと辛い スキャフォールディング paulmillr/scaffolt Generator MV*だとやたらファイルが増える scaffolt はChaplinとは関係なく使える Brunch ウェブアプリに特化したビルドランナー CommonJS風の展開 npmで拡張子に応じた
【翻訳】DeferredはjQueryにおける最も重要なクライアントサイドツール
jQueryのDeferredを用いたモダンなAjax処理の書き方が結構読んでもらっているみたいなので、今回はdeferred第二弾として、jQuery.Deferred is the most important client-side tool you haveの翻訳をしました。 jQueryのdeferredの導入は、近年のjQueryの歴史における最もパワフルな拡張だ。jQuery自体はとくに新しい概念ではないが、deferredの導入は多くのクライアントサイド開発者にとってメリットがある。非同期プロセスにおいてdeferredパターンはシンプルでありながらも、パワフルなツールだ。皆さんご承知の通り、クライアントサイドの開発においてそういった非同期を使う状況は数多く存在する。 ここでは、deferredおよびjQueryによって提供されるAPIについて概観する。読者が理解できるよう
Javascriptでオブジェクト指向するときに覚えておくべきこと - Qiita
Javascriptはブラウザのクライアントサイドで動く唯一の言語と言ってもいいので、普段書かなくてもちょいちょい書くことになる。そんな時用に、他の言語使っていると忘れてしまうJavascriptの重要な法則をまとめておく。 基本的にリファレンスにしているのはMozilla Developer Network (MDN)のドキュメントの以下のページ。MDNはJavascript関連では一番ちゃんとしたドキュメントだと信じている。 Working with Objects - MDN 継承とプロトタイプチェーン - MDN this - MDN オブジェクトモデルの詳細 - MDN プロトタイプベース言語 Javascriptはプロトタイプベースのオブジェクト指向言語で、クラスベースのオブジェクト指向言語(例: C++, Java)とは異なる部分が多々ある。 例えば、クラスベース言語はクラス
JavaScriptでグローバル領域を汚染しているプロパティを見つけるブックマークレット - haya14busa
JavaScript でグローバル領域を汚染しているプロパティを見つける – Null.ly 上記記事のコードをブックマークレット化しました。おもしろい！ 元記事のコードはこちら -> javascript global leak detector jsGlobalLeakDetector 上記リンクをブックマークバーにドラックなどして登録して好きなサイトで実行してください。 iOS登録用: 上記リンクをクリックしてから、ページをブックマークして、?以前の文字を消去してください。 手軽に見れて楽しい。 Google,Amazon,楽天,Twitter,自分のサイト,クッキークリッカーなどなど試してみると面白いかも? (クッキークリッカーはJavaScriptでチート出来るっていっても基本Global領域の関数使わずにGame.なんちゃらでアクセスするはずなのであんまり面白くなかった。) コ
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合
大量にDOM操作（追加削除変更）をしていて、そのDOMのイベントを監視している場合は確実にイベントの監視を解除する - slowjet
キの字だけど、最近イベントの監視を解除し忘れていたのが原因で、メモリリークを起こしてブラウザをクラッシュさせるという事案があったので。 View.render = function() { this.$someElem = $('<div class="someView"></div>'); this.$someElem.on('click', function() { ... }); this.@$el.append(this.$someElem); }; View.destroy = function() { this.@$someElem.remove(); // ノードを削除するときにイベントを削除していない }; こういうのを連続的に大量に行ったりしていると、メモリリークを起こすので、ノードを削除するときは必ずイベントの監視を解除する。 View.destroy = functi
javascriptでフォームをすべてクリアする - cutmail's blog
フォームをリセットするには <input type="reset" name="reset" value="リセット" /> などとすればよいのだけれど、 初期値が入っている場合。 (例) <input type="radio" name="sample" value="1" checked> などのような時は、リセットがききません。 そんなときは、javascriptでフォームの値をすべてクリアできます。 リセットでなく、クリアです。 function clearFormAll() { for (var i=0; i<document.forms.length; ++i) { clearForm(document.forms[i]); } } function clearForm(form) { for(var i=0; i<form.elements.length; ++i) { cl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails 3.2 のプロジェクトに jasmine 導入して CoffeeScript でテスト書くまで - Qiita
An Introduction to Product Tours with Intro.js - SitePoint
Welcome to m-bsys.com
HTML5 File API で画像をアップロードしてプレビュー - Qiita
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
SSSSLIDE
