Cheat sheet for moving from jQuery to vanilla JavaScript
jQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it in your projects to accomplish basic tasks like selecting elements, styling them, animating them, and fetching data—things that jQuery was great at. With broad browser support of ES6 (over 96% at the time of writing), now is probably a good time to move away from jQuery. I recently re
JPEG画像にJavaScriptのコードを埋め込んでみる | みどりのさるのエンジニア
JPEG画像にJavaScriptのコードを埋め込む手法が紹介されていたので試してみました。 今回は次の画像に対してコードの埋め込んでみます。 注意 この記事は攻撃方法を知ることでセキュリティを学ぶことを前提としており、実験も仮想環境上で実行しています。 決して外部サイトに対して実行しないようにしてください。 画像のバイナリを見てみる 今回試す方法は画像のバイナリを変更してコードを埋め込んでいます。 そこで、最初は画像のバイナリを確認してみます。 $ hexdump -C donarudo.jpg | head -n 5 00000000 ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 |......JFIF......| 00000010 00 01 00 00 ff e1 00 6c 45 78 69 66 00 00 49 49 |..
console.log(); しか使えなかった自分へ。。。 - Qiita
この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"
WindowEventHandlers.onafterprint - 印刷用のダイアログを閉じた時に発火
JavaScript // イベントの設定 (onafterprint) window.onafterprint = function ( event ) { // ... } // イベントの設定 (addEventListener) window.addEventListener( "afterprint", function ( event ) { // ... } ) ; HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>【デモ】WindowEventHandlers.onafterprint - 印刷用のダイアログを閉じた時に発火</title> <link rel="canonical" href="https://syncer.jp/Web/API_Interface/Reference/IDL/
【JavaScript】scrollTopが効かない時の対処法
先日遭遇したJavaScriptでの現象について。 タイトルにある通り、scrollTop プロパティに値を指定しても、その位置にスクロールしない現象が発生しました。 何故か scrollTop から返ってくる値が常に 0 になっており、それが原因のようです。 で、こちらの問題の解決にあたって、下記の記事が参考になりました。 document.body.scrollTopが常に0を返す謎を調べてみた – Qiita https://qiita.com/tkengo/items/ee758c75ba874757b7fd この記事によると、原因は scrollTop プロパティでスクロール位置を取得したい要素に下記の CSS を指定するとのことでした。 #sample { overflow-y: auto; width : 300px; height: 200px; } width と hei
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
JavaScriptで chr(N)をやる方法 – Satake Studio Dev
JavaScriptで chr(0x41)とかやって ”A”が出ないなと思って、JavaScriptって一度も文法書を読んだことないなと思った今日この頃です。 はてさて、数値を指定して文字を出すのはどうすればいいんでしょうか？ チクタク、チクタク、・・・（ググり中）・・・、チーーン 答えが出ました。結構難しい検索でしたね。答えは『String.fromCharCode(num1, …, numN) (e4/N4) 』です。 str = String.fromCharCode(0x41, 0x42, 0x43); alert(str); // "ABC" が表示される 出典は、こちらです。 https://dev.satake7.net/wp-content/uploads/2021/07/satake-studio-logo.png 0 0 staff https://dev.satake
How to scroll to an element inside a div?
I have a scrolled div and I want to have an event when I click on it, it will force this div to scroll to view an element inside. I wrote its JavasSript like this: document.getElementById(chr).scrollIntoView(true); but this scrolls all the page while scrolling the div itself. How to fix that? I want to say it like this: MyContainerDiv.getElementById(chr).scrollIntoView(true);
Javascriptでのiframe操作tips(iframeの中身を差し替える) - Qiita
追記(2016/05/05) コメントでご指摘いただきました。 過去のソースにアクセス出来ない＆Javascriptの知識が浅いので経緯がわからない状態ですが、 iframe elementの取得方法と、iframe内のコンテンツの更新方法を下記のように置き換えないと動かないようです。ご注意ください。 document.getElementById('iframe_id')[0].contentDocument.location.replace('target_url or target_path'); ↓ document.getElementById('iframe_id').contentWindow.location.replace('target_url or target_path'); 追記ここまで。 以下、2014年に投稿した記事です。 コンテンツの更新システムを作る場合な
[ Javascript ] 配列をコピーする2つの方法 – 偏差値40プログラマー
Javascript では、以下のように記述すると参照が代入されるだけで、実体は同一アドレスをさします。とりあえず本ページでは、これを参照コピーと呼ぶことにします。 配列の参照コピー var src = ["A", "B", 1, 2]; var copied = src; src[0] = 0; copied[1] = 0; alert(src); // 0,0,1,2 alert(copied); // 0,0,1,2 次に、参照コピーではなく各要素の器ごとコピーする2種類の方法を記載します。世間ではディープコピーと呼ばれています。 Array.concat を使用する方法 Array.concat は配列に要素を追加した配列を返すものですが、要素を追加しなければ 元々の配列のコピーが返されますので、それを利用しています。 var src = ["A", "B", 1, 2]; //
Ajaxで通信を強制停止させる方法 | システムエンジニアの戯言
Ajaxで通信を強制停止するには XMLHttpRequestのabortを使います。 実際には、abortなんてそうそう使う機会はありません。 果たして使い道はあるのでしょうか？ 例えば、Ajax通信中に、「Now Loading・・・」なんていうメッセージをモードレスダイアログで表示し、さらにユーザが手動で通信を停止させる手段としてダイアログの右上に×ボタンを用意しておき、ボタンが押されたタイミングで、abortする、なんていうことが考えられます。 Ajax通信中に他のページに移動する際の問題 ミッションクリティカルなWebシステムでない限り、Ajax通信中に他のページへの移動を許容する事は間々あるかと思います。 例えば、最近私が作成したWebシステムでは、Topページのパフォーマンス向上のために、Ajaxで情報を遅延ロードして表示するような仕組みを採用しました。 どれぐらい、パフォー
IEのクローズ処理をハンドリングする - 開発思考実験日記
普通はそんなの難しいからあきらめてもらうのだが、どうしてもやりたいというので考えることにした。 まずは、Googleで調べてみるとそれなりにHITする。みんな苦労しているんだな。 onbeforeunload 最初にたどり着いたのは、onbeforeunload イベントを利用する方法。onbeforeunload は ページがアンロードされる前に発生するものなので、リンクを押したりしたりするだけでも発生する。なので、クローズ以外でも発生することが問題になり、これを対策する必要がある。がんばってみよう。 よく利用されている対策は、onbeforeunloadイベントが発生した際の event.clientYやevent.clientXを調べて0より小さい場合はCloseだと判断する方法である。しかし、この方法だと更新ボタンを押してもCloseだと判断してしまう問題がある。 これを対策する方
[JavaScript] 関数の引数に省略値を(直接)指定できない - プロプログラマ -Flex,Air,C#,Oracle,HTML5+JS-
JavaScriptの実装をしていて関数定義の仕方を間違えたために、つまらないことで随分時間をかけてしまいました。 メモとして残します。 JavaScriptで自作関数を作った場合、以下の様な感じになります。 function ｔestMethod(value1, value2) { alert('Test value1=' + value1 + ' value2=' + value2); }
![[JavaScript] 関数の引数に省略値を(直接)指定できない - プロプログラマ -Flex,Air,C#,Oracle,HTML5+JS-](https://cdn-ak-scissors.b.st-hatena.com/image/square/c8f0bbd9aeacb2977359a2e4c0f583e2eb33abaf/height=288;version=1;width=512/https%3A%2F%2Fi2.wp.com%2Fpropg.ee-mall.info%2Fwp-content%2Fuploads%2Fcropped-propg.png%3Ffit%3D512%252C512)
IE8をレスポンシブ、HTML5やCSS3、rgba角丸に対応させる場合の注意点まとめ - 京都のお墨付き！
IEでHTML5やCSS3を使う場合、いくつか補助プログラムを読み込んだり、制作上の注意点があります。これは、きちんとHTML5やCSS3の仕様を身につけていないと「動作しない」などのトラブルに見舞われることがあります。 この記事では、「なぜ、そうする必要があるのか」をキチンと書いて、仕様・仕組みを理解した上で使いこなすことができるようになる事を目標に書きました。 IE8で、HTML5のSectionsタグを使えるようにする「html5shiv.js」 「Sectionsタグ」とは以下のタグです。これはHTML5で定義されていますが、IE8では使えないもの(HTML5で追加した分)があります。これを使えるようにするのが「html5shiv.js」です。 section (HTML5から追加) nav (HTML5から追加) article (HTML5から追加) aside (HTML5か
JavaScript: window.open() 小窓の基礎
window.open()で小窓 いわゆる小窓です。これはJavaScriptの window.open() というメソッドで 小窓となるウィンドウを生成します。 各引数の文字列は一重引用符または二重引用符で括って指定します。 第１引数「URL」は生成されるウィンドウに表示するページのURLです。 ※ ウィンドウに表示するページ（別のファイル）は別途作成して用意しておきます。 第２引数「ウィンドウ名」は特に指定する必要がなければ null で良いでしょう。 ウィンドウ名を指定するときは引用符で括ります。 ※ null を指定するとウィンドウ名の設定されていない新規ウィンドウとなります。 (HTMLの属性 target="_blank" と同等です) 例: window.open('example.html', null); 第３引数「オプション」はウィンドウの特徴を設定する文字列です。 こ
アドレスバーのURLを書き換える - Qiita
googleのエイプリルフールネタの「Google 日本語入力 ピロピロバージョン」を見ていたら、 https://www.google.co.jp/ime/___o/ 画面をスクロールすると、アドレスバーのURLも下記のように画面更新しないでピロピロと変わっていた。 https://www.google.co.jp/ime/___o/ ↓ https://www.google.co.jp/ime/________o/ ↓ https://www.google.co.jp/ime/__________/ // 履歴エントリの置き換え // http://exapmple.com/xxx/123 → http://example.com/xxx/aiueo history.replaceState('','','aiueo'); // http://exapmple.com/xxx/123
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
console.group() - Web API | MDN
What is the exact equivalent of JS: something.toFixed() in PHP?
Event Change in IE not working when pressing Enter Button
How to fight tons of unresolved variables warning in WebStorm?