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

Corredor

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

はてなブログでページの1つ目の記事末尾にだけ AdSense 広告を挿入する JavaScript を作った

はてなブログは各記事の下部に任意の HTML コードを仕込めるが、これはトップページやカテゴリページなどにも有効なエリアなので、ココに Google AdSense 広告のコードを埋め込んでしまうと、記事ごとに AdSense 広告が掲載されるようになってしまう。 2016…

jQuery の「$」の名前衝突を避けたりとか読み込みチェックとか

jQuery と prototype.js を併用しているウェブアプリケーションだと、「$」という変数名が衝突するので、$() ではなく jQuery() と書いて避けたりしていた。この辺の知見を jQuery を安全に使うには、以下をテンプレートにしてしまうと良い。 <script src="/js/jquery-1.4.2.min.js"></script> <script>window.jQuery</script>…

JavaScript で確実に undefined を得る方法

JavaScript における undefined は null のような予約語ではなくグローバル変数の1つなので、代入ができてしまう (最近の処理系では const 扱いになっているようだが)。 // こんなことができてしまう undefined = 1; 少し古い IE なんかだと代入できてしまう…

チェックボックスの 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() したフォーム部品が、直前に画面上でどのように操作されていたか、という情報は、ブラウザ…

JavaScript・JScript にも with ステートメントってあったんだ…

VBA とか VBScript で時々お世話になる「With 構文」、With ステートメント。JavaScript や JScript においても同様の記法があることをついこの前知った。 分かりやすい使用例 1つの要素に複数のスタイルを指定するようなとき、 document.getElementById("ho…

はてなブログのトップページの表示が重たいのを軽減する

あけましておめでとうございます。2017年も宜しくお願い致します。 それはさておきはてブロのトップページが重たい!! 既に色々なはてブロサイトで記事になっているのでいまさらだが、はてブロの表示が重たい。 しかし既存のテンプレを利用しているだけで、特…

ブラウザのステータスバーに遷移先 URL を表示しないようにできるか

社内で「ブラウザのステータスバーに遷移先 URL を表示しないようにしたい」というバカげた要件が出てきていて解決方法を探っているチームがいて、数日迷っていたので以下の StackOverflow を見せてみた。 参考:javascript - HTML - overRide statusbar lin…

Babel を試す環境に Gulp-Plumber を入れて自動ビルドに備える

前回の記事で、Babel を使って ES2015 の記法で書いたファイルを ES5 の記法に直す環境ができた。 neos21.hatenablog.com 今回はこのトランスパイルを、ファイルが更新されたときに自動的に行うようにしたい。 Browserify とか Watchify とか これらはある一…

Babel にリベンジ!ES2015 ってやつを勉強する環境を作るぜ!

ここんとこ職場では Windows バッチと VBScript をいじる生活で npm とか gulp とか言わせたいんじゃ~というフラストレーションが溜まっていたので、npm とか gulp とかする。 前にいじりかけていたけど放置していた Babel に手を出して、ES2015 とやらを試…

JScript と WSH と JScript.NET と .NET Framework と

Windows で何かスクリプトを作るとなると、MS-DOS 上がりのコマンドプロンプトではイマイチ勝手が悪い時がある。PowerShell を使う手もあるが、実行するために環境設定が必要だったり、独特な言語仕様を勉強するコストが割とかかり、学ぶ気のない人には引き…

JavaScript の即時関数を改めて理解した

参考:自作ライブラリをrequreされてもそうでなくても使えるようにする - Qiita 上記の記事の「大枠」の章がとても分かりやすかった。 即時関数とは その場で実行できる JavaScript の関数の一種。 (function() { // ココにコードを書く alert("Hoge Fuga");…

jQuery と JScript を使って IE11 限定で動作するサーバーレス掲示板を作る

どこかのプログラミング講師が「なんか最近やたらと DB であれこれデータ管理すること多くない?ファイルの読み書きってのも場合によっては有効なことがあるんだけどなぁ」と言ってたのを思い出して、サーバがない環境でもファイルの読み書きができれば、チ…

jQuery の bind() と on()

jQuery もバージョンとともにメソッドが色々変わってるから、リファレンスサイトが更新されていないと何がなんだか経緯が分かりづらいよねぇ~。 bind() は 1.7 系まで。1.7 系からは on()。live() とか delegate() とかも bind() と同じく昔からあったが、…

jQuery.Ajax() の書き方まとめ

【中古】 jQueryで作るAjaxアプリケーション /沖林正紀【著】 【中古】afbジャンル: 本・雑誌・コミック > PC・システム開発 > インターネット・WEBデザイン > Javaショップ: ブックオフオンライン楽天市場店価格: 198円 すぐ書き方を忘れるので、よく使う…

jQuery で簡単にアコーディオンっぽい動作

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート [ 矢次悟郎 ]ジャンル: 本・雑誌・コミック > PC・システム開発 > その他ショップ: 楽天ブックス価格: 2,592円 ワケあって最近 jQuery オンリーのウェブページをいじることがある…

複数の CSS や JS ファイルを HTML に読み込ませる時、head 要素内をスッキリさせる方法

複数の CSS ファイルや JS ファイルを読み込む必要がある時に、head 要素内がどうしても肥大化してしまう。 <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/global.css"> <link rel="stylesheet" href="css/form.css"> <link rel="stylesheet" href="css/print.css"> <script src="js/const.js"></link></link></link></link>

IE で日本語を含むパスにあるローカル HTML からクッキーを保存すると保存されたクッキーを取得できない件

なんのこっちゃという感じだろうから順に説明する。 対象ブラウザは IE11。クッキーはデフォルトなら「インターネットオプション」から辿れる、C:\Users\(ユーザ名)\AppData\Local\Microsoft\Windows\INetCache\ に保存される。 ローカルにある HTML ファイ…

IE 限定・ローカルにある UTF-8 の HTML ファイルから Shift-JIS 形式のファイルを文字化けさせずに読み込む方法

ローカルに HTML ファイルがある。エンコーディングは UTF-8 を指定している。 これとは別に、同じフォルダ内に Shift-JIS 形式の別の HTML ファイルがある。 この UTF-8 の HTML ファイルから、Shift-JIS のファイルを読み込んで、インラインに展開させたい…

ローカルで jQuery の Ajax を動作させたいが IE11 で動かない時にこうする

jQuery ポケットリファレンス (POCKET REFERENCE)作者: 鶴田展之出版社/メーカー: 技術評論社発売日: 2010/06/18メディア: 単行本(ソフトカバー)購入: 2人 クリック: 74回この商品を含むブログ (6件) を見る ローカルに置いてある HTML ファイルから jQuer…

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

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

Key と Value を入れ替えた Map を取得する方法:Java と JavaScript 編

Key と Value を入れ替えた Map (連想配列) を作る方法を調べた。 Java も JavaScript も、PHP でいうところの array_flip() みたいな標準メソッドは存在しなかったので、簡単なやり方を説明する。 参考:array_flip関数:配列のキーと値を入れ替える | 今日…

URL に付く「#!」って何だったの? ~ Hashbang の復習 ~

Twitter の URL とかで「#!」っていうのが付くのをよく見かけてたけど、最近気が付いたらこういう URL じゃなくなってた。そこで、「#!」コレって何だったの?を調べてみた。 参考:さらなる「#!」URL批判 - karasuyamatenguの日記 参考:AngularJS の $loca…

複雑な条件が絡むデータの持ち方

作りたいもの 区分を選択するプルダウンが2つあって、親区分のプルダウンを選択すると子区分のプルダウン中身が切り替わって、合計15パターンぐらいの区分がある感じ。 一方、画面に5個ぐらい項目があるんだけど、プルダウンで選択した区分に従って、「この…

Java と JavaScript で配列やリストや連想配列 (マップ) に値があるか調べる記法の比較

スッキリわかるJava入門第2版 [ 中山清喬 ]ジャンル: 本・雑誌・コミック > PC・システム開発 > その他ショップ: 楽天ブックス価格: 2,808円 TL; DR オブジェクトに対して、指定の値が存在すれば true を返してくれるようなメソッド類を調べた。 Object Java…

JavaScript ライブラリをまとめてみるぜ

乱立する謎の JavaScript ライブラリたちをまとめて、2016年中に数年間の遅れを取り戻そうっていう企画。 既に Node.js はインストールとかしてるし、jQuery 程度なら何となく書いたことあるけど、Babel だ Webpack だ Gulp だ Bower だ Browserify だって単…

iPhone 上で HTML とか CSS とか JS とかをコーディングして動作確認できるアプリ

App Store でプログラミング言語名で検索すると、大抵の言語は実行環境付きのエディタアプリが存在する。 たとえば Java … JVM Programming Language - Learn & Programs Compiler ※このアプリの作者 Yauheni Shauchenka さんはいろんな言語のエディタを出し…

placeholder 属性でテキストボックスにヒントを書く

HTML5 で、placeholder 属性というものが追加されている。これはフォーム部品の初期値を指定するようなイメージだが、value 属性と違って、任意のテキストが入力されると非表示になる、いわばフォーム部品のヒント文言を書くための属性だ。 <input type="text" placeholder="電話番号を入力してください"> Placeholder と…

jQuery の Ajax を使って再描画なしのリロード・送信 (作りかけ)

jQueryクックブック作者: jQuery Community Experts,株式会社クイープ出版社/メーカー: オライリージャパン発売日: 2010/08/18メディア: 大型本購入: 10人 クリック: 333回この商品を含むブログ (40件) を見る 作りかけでも勉強過程を記事にしていくことにす…

Java・JavaScript でコメントアウトするコードを切り替える小技

どこで見たネタだか忘れたけど、ときどき便利なので紹介。 コード A とコード B のどちらかの行をコメントアウトさせて、2つの行の処理を交互に見ながら開発をしたいような場合に、Java の単一行コメントと複数行コメントの書式を利用してその切り替えを簡単…

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

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

任意のサイトで自動ログインするブックマークレットを作る

jQueryで簡単!WEBサイトハッキング超入門: ブックマークレット実践サンプル Windows/Mac両対応作者: jQuery GoGo発売日: 2016/02/07メディア: Kindle版この商品を含むブログを見る ブックマークレットとは ブックマークから任意の JavaScript コードを実行…