Corredor

ウェブ、プログラミングの勉強メモ。

DOM

スマホを傾けても中身は水平なままのページを作ってみたい

完全にネタとして。 以前も紹介したが、DeviceOrientationEvent を利用すると、モバイル端末の傾きを JavaScript で検知できる。コレを利用して 3D のオブジェクトが動くインタラクティブな仕掛けを作ったりできるが、その流れで思いついたネタ。 端末の傾き…

ラジオボタンやチェックボックスをランダムにチェックするブックマークレットを作った

答える気が失せるほどのラジオボタンやチェックボックスがひしめくアンケートサイト。イチイチ文章を読んでチェックを入れるのもダルいので (爆)、ランダムにチェックを入れるブックマークレットを作った。 動作サンプルは以下。「Exec」ボタンを押すと、そ…

アンケートサイトの色々な回答に一気に答えるブックマークレットを作った

アフィリエイトで夢を叶えた元OLブロガーが教える本気で稼げるアフィリエイトブログ 収益・集客が1.5倍UPするプロの技79 [ 亀山ルカ ]ジャンル: 本・雑誌・コミック > ビジネス・経済・就職 > アフィリエイトショップ: 楽天ブックス価格: 1,706円 これまで…

アンケートサイトで使える!性別のラジオボタンを自動選択するブックマークレット

入門者のJavaScript 作りながら学ぶWebプログラミング (ブルーバックス) [ 立山秀利 ]ジャンル: 本・雑誌・コミック > 文庫・新書 > 新書 > その他ショップ: 楽天ブックス価格: 1,058円 アンケートサイトで使えそうなブックマークレット、第4弾。 neos21.h…

アンケートサイトで使える!テキストボックスに年齢を自動入力するブックマークレット

Excel VBAでIEを思いのままに操作できるプログラミング術 Excel 2013/2010/2007/2003対応作者: 近田伸矢,植木悠二,上田寛出版社/メーカー: インプレス発売日: 2013/04/19メディア: 単行本(ソフトカバー)この商品を含むブログ (7件) を見る アンケートサイ…

アンケートサイトで使える!都道府県セレクトボックスを自動選択するブックマークレット

基礎から徹底的に学ぶJavaScript作者: 鶴田正信発売日: 2016/08/12メディア: Kindle版この商品を含むブログを見る アンケートサイトで使えそうなブックマークレット、第2弾。 neos21.hatenablog.com よくある「あなたがお住いの都道府県を選択してください」…

アンケートサイトで使える!ドラッグ・アンド・ドロップで選択した範囲を一括でクリックするブックマークレット

成功するポイントサービス 1万人の生活者から見る今あなたの会社がすべきこと [ 岡田祐子 ]ジャンル: 本・雑誌・コミック > ビジネス・経済・就職 > その他ショップ: 楽天ブックス価格: 1,512円 ドラッグ・アンド・ドロップで選択した範囲を一括でクリックす…

onerror イベントで img・script 要素の読み込みエラーをうまく検知できなかったら

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん作者: たにぐちまこと出版社/メーカー: マイナビ出版発売日: 2017/03/27メディア: 単行本(ソフトカバー)この商品を含むブログを見る img 要素や script 要素に対し、onerror 属性を設定した…

Web ページ中の画像が読み込めなかった時に処理させる

HTML&CSSとWebデザインが 1冊できちんと身につく本作者: 服部雄樹出版社/メーカー: 技術評論社発売日: 2017/07/21メディア: 大型本この商品を含むブログを見る Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集作者: 久保田涼子出版社/メーカ…

elementFromPoint() という API があった

JavaScript 第6版作者: David Flanagan,村上列出版社/メーカー: オライリージャパン発売日: 2012/08/10メディア: 大型本購入: 12人 クリック: 252回この商品を含むブログ (18件) を見る 2018年の初記事です。今年も宜しくお願い致します。 さて、まだまだ DO…

スクロールバーの幅を取得する JavaScript

徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく (Informatics&IDEA)作者: 磯博出版社/メーカー: SBクリエイティブ発売日: 2017/03/18メディア: 単行本この商品を含むブログを見る Web ページに表示され…

insertAdjacentHTML を今更知った

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン作者: Heydon Pickering,太田良典,伊原力也,株式会社Bスプラウト出版社/メーカー: ボーンデジタル発売日: 2017/11/04メディア: 単行本(ソフトカバー)この…

window.getComputedStyle を今更知った

window.getComputedStyle() なる API があるのをいまさら知った。 普段 JS で DOM 要素のスタイルを操作する時は element.style を使うが、window.getComputedStyle() は対象の要素の表示仕様を決めている、計算済みの全てのスタイル定義を取得できる。 「計…

チェックボックスの DOM 要素の取得方法に注意

チェックボックスを取得する JavaScript の書き方が古いと、思わぬバグを引き起こすことがある。 例えば以下のような構成の HTML フォームがあったとして。 <form name="myForm" method="post" action="/Send"> <p>このページをどこで知りましたか?</p> <ul> <li><input type="checkbox" name="questionnaire" value="google"> Google 検索で</li> <li></li></ul></form>

cloneNode() で複製した select 要素の選択状況がリセットされる

セレクトボックスを cloneNode() して、その要素を appendChild() とか replaceChild() とかすると、複製する前に選択していた状態が再現されなかった。 cloneNode() したフォーム部品が、直前に画面上でどのように操作されていたか、という情報は、ブラウザ…

IE11 で大量のテキストボックスを一括で非活性にする処理が重すぎる

IE11 は他のブラウザと比べても element.disabled = true; とかする処理が重たい。 ワケあって、テーブルの中に1行20個、150行程度のテキストボックスがあって、これらを一括で非活性にしたり、戻したりしなくてはいけなくなった。何も考えず document.getEl…

テキストボックスの value 属性を書き換えても innerHTML には反映されない

ユーザが textarea 要素にテキストを入力し、その後何らかのイベントで textarea 要素の親要素の innerHTML を取得すると、ユーザが入力したテキストがその innerHTML 内に残っている。 しかし、input[type=“text”] なテキストボックスの場合、ユーザがテキ…