JavaScript の不思議な面白さ - 第二回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 前回の記事「JavaScript の不思議な面白さ」はお楽しみいただけたでしょうか？ 一例として正攻法で突入していった例については賛否両論あるようです。確かに結果としてできたプログラムは見た目にも美しくなく、目を覆いたくなるばかりでした。 今回は解答編として JavaScript ならではといえる "奇妙な" 例をひとつお見せしたいと思います。ヒントは前回もちらっとお話させていただいたものです。 コード改善に向かって その前に前回の問題はなんだったのかをプログラマ視点で見ていきます。 コードが美しくないと感じるのはなぜでしょうか？ 改善するならどうすればよいのでしょうか？ ひとつの方法は "隠す" ことです。関数化・クラス化・ライ
複数ファイルを連結配信してページを高速化「mod_concat」:phpspot開発日誌
mod_concat で複数ファイルを連結して配信する - 酒日記 はてな支店 複数ファイルを連結配信してページを高速化「mod_concat」。 Apacheモジュールにmod_concatというのがあるらしく、a.js, b.js を1つのファイルにしてくれるらしいです。 Apacheモジュールということによる速度はどのぐらい出るのかはわかりませんが、少なくともPHPよりは速い気がします。 mod_concat がキャッシュするかによっても違ってくるとは思いますが、検証して使ってみたいですね。 関連エントリ 複数のJavaScriptファイルを１コネクションでスッキリ一括読み込みする方法
danvk.org » dragtable: Visually reorder all your table columns
dragtable keeps forgetting my column ordering! If you set an id on your table, dragtable will save all column reorderings for that table in a cookie and replay them the next time you visit the page. If you don’t want it to do this, either 1. don’t set an id or 2. set class="draggable forget-ordering". How does dragtable distinguish a click from a drag? This should only be relevant if you’re using
指定したHTMLエレメントをローディング中にする際に便利な「busy.js」:phpspot開発日誌
busy.js (loading indicators) busy.js 1.0 allows you to add/remove loading indicators to html elements on your webpages 指定したHTMLエレメントをローディング中にする際に便利な「busy.js」。 例えば、div 要素全体に次のようにローディング中にすることが出来ます。 デモはこちら - 要素をクリックでローディング状態にすることが可能 オーバーレイで要素自体の色も変わるため、ローディング中であることがよく分かるようになっています。 関連エントリ グレーアウト表示ライブラリ:glayer.js 様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」
XMLHttpRequestでRefererをセットする - FAX
JavaScript 追記Firefox 3.0で確認したところエラーになった。 Firefox 2.0.0.13で確認しました。 var url = 'http://localhost:8080/index.html'; var referrer = 'http://www.hatena.ne.jp/'; var req = new XMLHttpRequest(); req.open('GET', url, true); req.onreadystatechange = function(){ // 1: 読み込み中 if(req.readyState == 1) req.setRequestHeader('Referer', referrer); // 4: 準備完了 if(req.readyState != 4) return; console.log(req.responseTe
JavaScript1.7 の yield を使って、非同期処理を同期処理のように書く方法 - IT戦記
経緯 id:kazuhooku さんが一年前にやってたことですが Kazuho@Cybozu Labs: JavaScript/1.7 で協調的マルチスレッド 今日やっと挙動が理解できたのと、 Weave のソースを読んでいたらこのテクニックをバリバリ使っていて「ちょwwおまwww」ってなったので、自分でも作ってみようと思いました。 ほとんど id:kazuhooku さんのと同じものなので、既出です＞＜本当にありがとうございました＞＜ まず、 yield とは何か yield とは、 JavaScript 1.7 から導入された機能です。 以下に yield の細かい挙動を示しておきます。 function f() { // なんかの処理 yield; // ... (1) // なんかの処理 yield; // ... (2) // なんかの処理 } var g = f(); // こ
javascriptでURLパラメータを取得する - koyachiの日記
http://exampl.com/search.html#q=foobar;page=10みたいなurlの#以降を解析して{q:foobar, page:10}なオブジェクトとして返す。昔Yahoo!USの検索API使ってjavascriptだけではてブ検索作ったときに使っていた。 /* * * UrlParams * SYNOPSIS: window.onload = function() { var params = UrlParams.parse(); var result = document.getElementById("result"); var text = ""; for (p in params) { text += "{" + p + ": " + params[p] + "}, "; } result.innerHTML = text; UrlParams.upd
JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート:phpspot開発日誌
JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート 2008年02月07日- Bram.us jsProgressBarHandler (Dynamic Unobtrusive Javascript Progress/Percentage Bar) jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App.JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート。 『進捗状況を分かりやすくプログレスバーで表示できるJSライブラリ「jsProgressBarHandler」』で紹介した
JavaScriptライブラリを動的に読みこむことが出来るライブラリ「JSLoader」:phpspot開発日誌
JSLoader - JavaScript Libraries On Demand JSLoader is a dead-simple, non-intrusive "Javascript-on-demand" packaging convention JavaScriptライブラリを動的に読みこむことが出来るライブラリ「JSLoader」。 JSLoader を使えば、次のようなコードで、prototype.js 等を読み込んで利用することが出来るようです。 JSLoader.load("ria","prototype","1.5.1"); JSLoader.load("ria","scriptaculous","1.7.1-beta3"); JSLoader.load("ria","lightbox","2.03"); ライブラリ自体は、サーバの特定のパスに設置しておく必要がありますが
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
内容に合わせて伸縮するテキストエリア - FAX
JavaScript追記 miya2000の日記 - 「内容に合わせて伸縮するテキストエリア」を Opera にも id:miya2000さんが、クロスブラウザに書き換えられています。GJ!こっちで!! デモビデオは以下(12秒)。 ユーザーが自分でリサイズできるテキストエリアをよく見かける(はてなも)。それを補助するGreasemonkeyスクリプトもある。 テキストエリアを横にリサイズしたいことはあまりない。バーを掴んで最適な高さにするのはめんどくさい。使う人は、ただ全部の内容が見えるぴったりの高さになってほしいだけなんだと思った。 サンプルコードは以下。fitting?、fittable?、expand?(逆に小さくもなる) キーダウンのイベントでも実装してみたけど、日本語入力を検知できないし、方向キーとか無視するコードもいるし、イベントハンドラ内では内容がまだ更新されてなかったり
JS でモーションタイポグラフィー - 2nd life (移転しました)
http://svn.coderepos.org/share/lang/javascript/jstweener/trunk/examples/mtypo_bezier.html http://svn.coderepos.org/share/lang/javascript/jstweener/trunk/examples/mtypo.html JSTweener の機能追加と同時に、もちょっとサンプルになんか作ってみようかな、ということでモーションタイポグラフィーで遊んでみました。思ったよりは重くなかった感じです。半透明にすると重くなるかな、と思いきやどのブラウザでも割と普通に。 でも JS だと一文字一文字の横幅を正確に求めることができず(IEでできるのかな)、破壊的な動きなら出来るんですけど、あらかじめレンダリングされるであろう場所に文字を吸着とかかなり難しそうな感。 JSTweene
川o・-・）＜2nd life
このサイトは移転しました。 https://secon.dev/ https://secon.dev/feed 心のざわめきを無くして日記を書くということ / secon.dev への移転 - A Day in the Life alias open="pwsh.exe /c start" pwsh.exe を入れてない人は alias open="powershell.exe /c start" すると、open foobar がいい感じに開かれる。 # explorer が開く open . # デフォルトブラウザが開く open https://example.com/ # jpg に関連付けられているビュアーで開かれる open ./foo.jpg 先日、メインの開発環境を MacOS から Windows 10 Professional へと移しました。理由としては主に2点で、現
digitrick | 一行で複数の外部JSファイルを読み込む
一風変わった（？）複数の外部JSファイルの読み込み方。 <script type="text/javascript" src="○○○.js?△△△.js,×××.js"> </script> 上記のように、一つ目のファイルの後に?で繋ぎ二つ目以降はカンマ区切りでsrc属性を書く。
Enjoy×Study - ブラウザのスクロールバーで隠れている領域を含むサイズを取得する方法。
昨日のエントリに引き続き、今度はスクロールバーで隠れている領域を含むサイズを取得するためのプロパティをまとめてみました。 Enjoy×Study - ブラウザの表示領域のサイズを取得する方法。 調査したのは、下記のプロパティです。 window.innerWidth window.innerHeight document.body.scrollWidth document.body.scrollHeight document.body.offsetWidth document.body.offsetHeight document.body.clientWidth document.body.clientHeight document.documentElement.scrollWidth document.documentElement.scrollHeight document.docu
ブラウザの表示領域のサイズを取得する方法。 - Enjoy*Study
ブラウザの表示領域を取得するに当たって、「ブラウザの種類」×「表示モード(標準/互換)」によって参照するプロパティが変わってきます。 IE、FireFox、Opera、Safariにて、表示モード毎に参照すべきプロパティをまとめてみました。(Safariについては2007/05/20に追記) 調査したのは、下記のプロパティです。 window.innerWidth window.innerHeight document.body.scrollWidth document.body.scrollHeight document.body.offsetWidth document.body.offsetHeight document.body.clientWidth document.body.clientHeight document.documentElement.scrollWidth d
スライドショーのようにテキストを読むGreasemonkeyスクリプト、YHC - FAX
JavaScript YHC – Userscripts.org 長文をスライドショー形式で読むテキストリーダーです。デモビデオ(1分半)は以下。kotorikoさんの『捨松定吉』を、ランダムフィルタをかけて読んでいます。 機能説明ウィンドウ右下のGreasemonkeyメニューから[YHC]を選びスタートさせます。先に文章の一部を選択している場合はその部分を、そうでない場合は対象となる部分をマウスで指定します。 操作は主にキーで行います。 キー機能Esc終了↓ or S再生開始/停止→ or J or Space次のスライド 再生中はスピードアップ← or K前のスライド 再生中はスピードダウンGジャンプHome先頭のスライドEnd最後のスライド ↓キーで再生を開始して、→キーで再生速度を少し速くして、速すぎたら←で遅くして。気になるところに戻りたい場合は、↓で止めて、←→で移動して手動
IT戦記 - Math.floor を使わずに小数を整数にする
少数を整数にしたいような場合 たとえば、 0 - 9 のランダムな整数が欲しい場合 普通はこう書く var value = Math.floor(Math.random()*10); Math.floor を使わない場合はこう書く var value = ~~(Math.random()*10); 「~」は補数を求める単項演算子で、オペランドを整数変換するので二回やることでオペランドを整数化できるのです。 まとめ でも、もっといい方法があるかも。 皆様なら「どう書く？」のでしょうか。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]フォームのtextareaをサイズ変更できるスクリプト -TextArea Resizer
フォーカスされている要素を取得する方法 - sawatのブログ
