最新のInternet Explorerでご覧ください。 お使いのInternet Explorerは古いバージョンのため、このウェブサイトを正しく表示することができません。 マイクロソフトのホームページ で最新バージョン(無料)を入手してください。※IE10以上推奨 Windows XPをお使いの場合は、最新のFirefox(無料)を mozilla社ホームページ よりダウンロードしてご利用ください。
![特定の要素をマウスイベントが透過するようにする方法 | Show Design Lab|ホームページ制作に関するトータルコンサルティングをご提供します。](https://cdn-ak-scissors.b.st-hatena.com/image/square/047dc732be15b88191f400bcc0da10ca55db1a76/height=288;version=1;width=512/https%3A%2F%2Fwww.showdesignlab.com%2Fwp%2Fwp-content%2Fthemes%2Fshowdesignlab%2Fsrc%2Fimg%2Fog.png)
throttleとdebounceといきなり言われてピンとくる人もそうでない人も、ここらでおさらいしませんか? という回です。これらが何なのか、どう使うのか、どう実装するのかを今一度確認していきましょう。 なぜ今更こんなことをするのかというと、自分が先日忘れていたからです😳 ナニコレ throttleとdebounceとは、簡単に言うと間引き処理の一種です。連続して大量に繰り返される処理を間引いて負荷を軽減させたりするときに使います。 throttle 連続して大量に繰り返される処理を一定感覚で間引くものです。 よく使われるのはscrollイベントです。スクロールイベントをすべてハンドリングすると処理回数が多くなり、場合によってはスクロールがもっさりしてしまいますよね。それを防ぎます。 debounce 連続して大量に繰り返される処理が指定時間内に何度発生しても最後の1回だけ実行するもの
画像をアスペクト比を維持しながら引き延ばしてcanvasの中央に描画しなさい。 また、画像が表示されない箇所は黒く塗りつぶしなさい。 ※画像はcanvasとはアスペクト比が異なるものを用意してください。 解答例 function onLoadBody() { var ctx = document.getElementById('canvas').getContext('2d'), img = new Image(); img.src = "img/test1.png"; img.onload = function() { var canvasAspect = ctx.canvas.width / ctx.canvas.height, // canvasのアスペクト比 imgAspect = img.width / img.height, // 画像のアスペクト比 left, top, wi
Vue.js allow apply event on element: <div id="app"> <button @click="play()">Play</button> </div> But how to apply event on window object? it is not in DOM. for example: <div id="app"> <div @mousedown="startDrag()" @mousemove="move($event)">Drag me</div> </div> in this example, how to listen mousemove event on window ?
http://qiita.com/items/a46a70b724e3dd9378f2 JavaScript文字列のバイト数を数える - にインスパイアされました。 この記事はブラウザでも使えるコアJavaScriptの範囲でどうするか考えます。Node.js などが持っているバイナリ処理の便利機能等は使わないものとします。 こちらは実際にencodeURIComponent()でUTF-8のバイト列の16進数バイト表記に直して正規表現で処理する形式。バイト数をcharCodeAt()で数えるよりコストはかかるけど、たぶん正確性や保守性は高いんじゃないかな。速度を気にしない場合にどうぞ。 String.prototype.bytes2 = function () { return(encodeURIComponent(this).replace(/%../g,"x").length); }
WordPress has plugins. jQuery has plugins. Gatsby, Eleventy, and Vue do, too. Plugins are a common feature of libraries and frameworks, and for a good reason: they allow developers to add functionality, in a safe, scalable way. This makes the core project more valuable, and it builds a community — all without creating an additional maintenance burden. What a great deal! So how do you go about buil
In HTML 5, you can just use the Canvas.measureText method (further explanation here). Try this fiddle: /** * Uses canvas.measureText to compute and return the width of the given text of given font in pixels. * * @param {String} text The text to be rendered. * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana"). * * @see https://stackoverflow.com
JavaScript を使っているなら lodash は大変便利なのですが、関数が多すぎてどれ使ったらいいのか解りづらいのが難点です。 ここではその中でも連続する呼び出しを無視してくれる debounce と throttle という負荷対策用の関数を紹介します。また、この2つの似た関数がどう違うのかも説明します。 連続する呼び出しを無視したい、とはどういうことか たとえば、mouse move イベントはマウスの座標が動くたびにすごい頻度で発生します。これに応じて画面を同期させたり、サーバに問い合わせしてしまうと大変なので一般的には0.2秒とかマウスが止まったら同期や問い合わせが走るように実装するかと思います。 別の例でいえば、textbox のインクリメンタルサーチ実装で、文字打つたびにサーバ問い合わせしたら大変なので、入力がある程度止まった時点で問い合わせするのが一般的です。 この処
# window.location Cheatsheet Looking for a site's URL information, then the window.location object is for you! Use its properties to get information on the current page address or use its methods to do some page redirect or refresh 💫 https://www.samanthaming.com/tidbits/?filter=JS#2 window.location.origin → 'https://www.samanthaming.com' .protocol → 'https:' .host → 'www.samanthaming.com' .hostna
I'm trying to use the on click directive inside a component but it does not seem to work. When I click the component nothings happens when I should get a 'test clicked' in the console. I don't see any errors in the console, so I don't know what am I doing wrong. index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vuetest</title> </head> <body> <div id="app"></div> <!-- built fil
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く