p5.js Web Editor上で「console.log({変数名})」という書き方（変数名＋中身の出力）や「console.table()」のお試し - Qiita
以下の記事で見かけたconsole.log({変数名})」という書き方をする話と「console.table()」を、p5.js Web Editor上でさくっと試してみた、という話題です。 ●console.log(); しか使えなかった自分へ。。。 - Qiita https://qiita.com/ashketcham/items/06e50b3f7f6238d9b51b 動かしたプログラム： console.log({変数名}) さっと試せそうな内容で、まずは「console.log({変数名})」のほうをサクッと動かしてみました。 ｐ5．ｊｓ標準で使える「width・height」や「frameCount」を、このやり方で出力してみるだけのものです。 とりあえず、「frameCount」で試して動いて、その後に「複数指定しても、同じ感じかな？」と「width・height」の部分
すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
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 |..
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 ] 配列をコピーする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か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
console.group() - Web API | MDN
console.log(); しか使えなかった自分へ。。。 - Qiita
What is the exact equivalent of JS: something.toFixed() in PHP?
Javascriptでのiframe操作tips(iframeの中身を差し替える) - Qiita
Event Change in IE not working when pressing Enter Button
How to fight tons of unresolved variables warning in WebStorm?