#author("2024-04-16T15:46:53+09:00","default:irrp","irrp") (本ページで扱うのはES6以前のJavaScript(Vanilla JS)の話です) →JavaScript →モダンJavaScript →JavaScript関連ツール →JavaScriptの基礎 →AJAX関連 #contents *サブトピック [#z5b7cc25] -JavaScript言語仕様系Tips *一般 [#e640ed99] -[[JavaScriptだけでユーザーのIPアドレスを取得する方法 | ジコログ>https://self-development.info/javascript%e3%81%a0%e3%81%91%e3%81%a7%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%81%aeip%e3%82%a2%e3%83%89%e3%83%ac%e3%82%b9%e3%82%92%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/]] 2024.3 -[[JavaScriptで要素をドラッグして移動する簡単な方法 #JavaScript - Qiita>https://qiita.com/economist/items/d4254209330c11caff04]] 2024.2 -[[JavaScriptの小技集 #JavaScript - Qiita>https://qiita.com/niku_ypp/items/ab01815a63763323d330]] 2024.1 -[[JavaScriptデザインパターン入門 - Qiita>https://qiita.com/itinerant_programmer/items/873de89b4331b353e4d8]] 2023.7 --モジュールパターン、オブザーバーパターン -[[要素にあわせて形状が変化するマウスカーソル - Qiita>https://qiita.com/xrxoxcxox/items/e8e5bcdbe87f0d288438]] 2023.6 -[[コーディング時間を節約できる JavaScript1行コード20点 - Qiita>https://qiita.com/iikitty/items/61226ea047e9e302ae46]] 2023.1 -[[【超ザックリ・図解付き解説】JavaScriptのDOM>https://zenn.dev/nameless_sn/articles/javascript_dom_tutorial]] 2022.12 -[[好きなサイトをダークモード化してみる。 - Qiita>https://qiita.com/kitta81/items/c22d0144cd3169fdcb50]] 2019 -[[How to check battery status with javascript : 2 simple steps>https://bepractical.tech/how-to-check-battery-status-with-javascript-2-simple-steps/]] 2022.7 -[[JavaScript generators ELI5 - DEV Community>https://dev.to/pramit_marattha/javascript-generators-eli5-2o61]] 2022.7 --yieldとかの話 -[[JavaScript shorthand tips and tricks - DEV Community>https://dev.to/amitavmishra99/javascript-shorthand-tips-and-tricks-4i7h]] 2022.7 -[[JavaScriptのデバックにはdebugger文を使おう - Qiita>https://qiita.com/a_ya_ka/items/b5160cd7d592931d7507]] 2022.6 -[[【Javascript】配列内の重複要素を削除する - Qiita>https://qiita.com/peach_branch/items/5fc9a065c8b98ed06fa3]] 2022.4 -[[JavaScript: Web Workerを動かす最小限のコード - Qiita>https://qiita.com/suin/items/1537e0b4468705db45ce]] 2022.1 -[[Native File System API でテキストエディタを作る>https://qiita.com/yubais/items/b02d5d4f7a9edf4b0725]] 2021.10 -[[JavaScriptのコーディングTips集>http://d.hatena.ne.jp/language_and_engineering/20140311/JavaScriptProgrammingTips]] 2014.3.14 -[[Ruby,Python,PHP,JavaScriptでマルチプラットフォームなデスクトップアプリを簡単に作成する>http://d.hatena.ne.jp/yuichi_katahira/20100219/1266592521]] 2010.2.19 -[[JavaScriptプログラマが理解しておくべき8つのこと。の個人的補足>http://blog.xole.net/article.php?id=736]] 2009.12.27 -[[javascriptプログラマのレベル10>http://tech.kayac.com/archive/javascripter-level-check.html]] -[[JavaScript初心者におくる24のグレイトなtips>http://d.hatena.ne.jp/sandai/20091213/p1]] 2009.12.13 -[[JavaScriptを高速化する31のチェックリスト>http://journal.mycom.co.jp/news/2009/10/29/008/]] 2009.10.29 -[[7 JavaScript Techniques You Should Be Using Today>http://www.digital-web.com/articles/seven_javascript_techniques/]] -[[9 Javascript Tips you may not know:http://aymanh.com/9-javascript-tips-you-may-not-know]] *console.log [#mf5a3ce4] -[[console.log() の代わりにdevtoolsのLogpointsを使う #JavaScript - Qiita>https://qiita.com/Tsuyoshi84/items/e398ac4449a36286c0d7]] 2023.10 -[[【JavaScript】Consoleの基本的な出力とグループ化 - Qiita>https://qiita.com/ryo-ka-notti/items/0677334c8d61217415d7]] 2023.1 -[[console.logをもっと使いこなす! - Qiita>https://qiita.com/tetsuyaohira/items/3903207d6adcc0cd8b4a]] 2022.9 -[[console.log(); しか使えなかった自分へ。。。 - Qiita>https://qiita.com/ashketcham/items/06e50b3f7f6238d9b51b]] 2022.6 --console.log({変数名}); --console.time(); --console.assert(); --console.table(); -[[JavaScriptでconsole.log()を使うのはやめよう - Qiita>https://qiita.com/baby-degu/items/1046763163bc794870ea]] 2022.5 -[[今すぐJavaScriptデバッグ効率を上げるconsoleテクニック>https://qiita.com/baby-degu/items/2c5cd103df54206ca401]] 2019.10 -[[【2019年4月版】JavaScriptのconsoleがすごいことになってた。>https://qiita.com/koinori/items/83f119cb2d82c0ca2c1e]] 2019.4 *Web画面制御系 [#n0c6469c] -[[JSでブラウザの戻るボタンを止める方法。 - Qiita>https://qiita.com/bharteesahare1998/items/e16195f6e975c72238b3]] 2023.9 -[[[JS]スマートフォンのタッチイベントを取得する各スクリプトのまとめ(仕様比較)>http://coliss.com/articles/build-websites/operation/javascript/js-comparison-list-for-touch-events-script.html]] 2012.6.21 -[[ソースコピーですぐ使えてスマホ専用サイト作成に便利!PC・スマートフォンサイトの振り分けJavaScript作りました。>http://www.html5-memo.com/css3/pc_bunki/]] 2012.5.29 -[[ amachang の 「一行で IE の JavaScript を高速化する方法」を掘り下げてみた>http://d.hatena.ne.jp/uupaa/20081230/1230604575]] -htmlのタイトルを画面中に表示させるJavaScriptの例 element = document.getElementsByTagName("body"); var title = document.title; if(element[0]){ var childElement = document.createElement("span"); element[0].appendChild(childElement); childElement.innerHTML = "<span style= 'font-family:MS Pゴシック;position:absolute;top:740px;left:900px;] font-weight:bold;font-color:black;font-size:25px; background-color:white;width:74px;height:20px;z-index:1000;'>" + title + "</span>"; } -[[Enterキーで送信されてしまうのを防ぐ>http://allabout.co.jp/gm/gc/23972/2/]] -[[ボタン押下でウィンドウを閉じる>http://www.tagindex.com/javascript/window/close.html]] <input type="button" value="サブウィンドウを閉じる" onClick="window.close()"> -[[JavaScriptで新しいウィンドウをサイズ指定して開く>http://www9.plala.or.jp/oyoyon/html/script/newwin.html]] -[[Javascriptによるフォームの制御>http://www.atmarkit.co.jp/flinux/rensai/mysql5_02/mysql5_02b.html#column1]] -[[submit buttonの結果を別ウィンドウで開く>http://suz-lab.blogspot.com/2008/09/submit.html]] -[[onclick属性問題について>http://d.hatena.ne.jp/amachang/20080517/1210991851]] 2008.5.18 -[[バーチャルキーボードのスクリプト>http://coliss.com/articles/build-websites/operation/javascript/999.html]] -[[テーブルの縦列、横列をハイライト>http://blog.livedoor.jp/dankogai/archives/51020029.html]] -[[tr要素の「display : block;」にはまる>http://www.h-fj.com/blog/archives/2007/05/06-134912.php]] -[[角丸を簡単な記述で実装するスクリプト>http://coliss.com/articles/build-websites/operation/javascript/884.html]] 2008.3.10 -【超基礎】リンクをクリックしたらJavaScriptのfunctionを実行したいとき <a href="javaScript:hoge_func()">実行する</a> *パララックス [#lbba82b7] -[[【React】ライブラリーを使わないでパララックスを使って、リッチなサイトを作る - Qiita>https://qiita.com/degudegu2510/items/4774a186030b995bdb46]] 2022.6 -[[複数のレイヤーをずらして動かし立体感を与えるスクリプト(parallax)>http://coliss.com/articles/build-websites/operation/javascript/mootools-plugin-mparallax.html]] 2009 *文字列処理 [#ka5ac567] -[[JavaScript で Base64 - 30歳からのプログラミング>https://numb86-tech.hatenablog.com/entry/2022/12/04/134350]] 2022.12 -[[javascriptでtoLocaleString()およびtofixed(2)を使用する方法>https://codeday.me/jp/qa/20190217/262180.html]] 2019.2 num.toLocaleString(undefined, {minimumFractionDigits: 2}) -[[全角半角変換>http://blog.livedoor.jp/dankogai/archives/51221077.html]] -[[Quotemeta 正規表現中のメタ文字をすべてエスケープしてくれる>http://blog.livedoor.jp/dankogai/archives/51058313.html]] -[[郵便番号から住所へ変換:http://blog.livedoor.jp/dankogai/archives/50639200.html]] * 日付処理 [#sa3fc1c5] -[[Intl.DateTimeFormat を使うときは気をつけないと50倍くらい遅くなるしメモリももりもり食う>https://zenn.dev/mazamachi/articles/js-intl-date-time-format-performance]] 2023.1 -[[JavaScriptでDateをyyyy/MM/dd HH:mm:ssにフォーマットする方法 (date-fnsなどのライブラリなしで) - Qiita>https://qiita.com/suin/items/122b24c246ce51fa5103]] 2021.11 const date = new Date(2001, 0, 2, 3, 4, 5); const d = new Intl.DateTimeFormat("ja-jp", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit", }).format(date); console.log(d); //=> "2001/01/02 03:04:05" -[[Moment.jsを使う>https://qiita.com/osakanafish/items/5ef636bbcb2c3ef94953]] 2015.9 *画像 [#j14ecc65] -[[canvasのgetContext("2d")って何 - Qiita>https://qiita.com/manten120/items/86c087b937708697acec]] 2020.9 -[[IEでlabelの子要素に画像を含める>http://labs.unoh.net/2009/04/label-img-fix-for-ie.html]] -[[画像の本来の幅と高さを取得>http://d.hatena.ne.jp/inamenai/20081011/p1]] -[[手めくり風画像ギャラリー>http://phpspot.org/blog/archives/2009/03/post_332.html]] -[[スクリプトとスタイルシートで作る画像ギャラリーのサンプル>http://coliss.com/articles/build-websites/operation/javascript/1464.html]] -[[グラフチュートリアル集>http://www.designwalker.com/2007/10/graph-design.html]] *通信 [#o9d8740b] -[[Java から JavaScript への通信>http://java.sun.com/j2se/1.5.0/ja/docs/ja/guide/plugin/developer_guide/java_js.html]] --JSObject -[[無名関数を使った非同期通信のススメ>http://satoshi.blogs.com/life/2010/01/sync_vs_async.html]] 2010.1.19 -[[Eメール送信>http://code.nanigac.com/source/view/168]] *アニメーション、ゲーム [#qbcee0c0] -[[スムーススクロールの実装例 | TAKLOG>https://www.tak-dcxi.com/article/smooth-scroll-implementation-example/]] 2024.4 -[[マウスストーカー(視線) - Qiita>https://qiita.com/xrxoxcxox/items/22ba9637c3f917d768f2]] 2022.12 -[[運命が邪魔をする退会ボタン - Qiita>https://qiita.com/Yametaro/items/2ee1388dcca4d434283e]] 2022.12 -[[Colorful Rain Animation Effects using Html CSS & Vanilla Javascript @Online Tutorials - YouTube>https://www.youtube.com/watch?v=YhXxBhInJMI]] 2021.12 -[[JavaScript アニメーションとデザインパターン>http://amachang.sakura.ne.jp/misc/ut/]] 2012.5.14 -[[JavaScriptでテトリスみたいなゲームを作ろう>http://svn.coderepos.org/share/docs/amachang/20080813-procamp2008/index.html]] -[[アニメーションするドロップダウンメニュー>http://phpspot.org/blog/archives/2008/04/sliding_javascr.html]] -[[Matrix風にページを表示する:http://www.simplexsimple.com/archives/2006/11/javascript_1.html]] -女の子が降ってくるスクリプト(http://q.hatena.ne.jp/1231366704の31番) javascript:( function(){ scroll(0,0); H='http://hamachiya.com/'; D=document; F=Math.floor; R=Math.random; Q=new Image; Q.src=H+'g1.gif'; L=function(){ var X=F(R()*vw); var Y=0; var r=F(R()*9)+3; var V=Z(X,Y); D.body.appendChild(V); var f=function(){ if(Y+r<vh){ V.style.top=(Y+=r)+'px' }else{ V.style.top=vh+'px'; V.src=H+'g2.gif'; setTimeout(function(){V.src=H+'g3.gif'},550); clearInterval(t); } }; var t=setInterval(f,40) }; Z=function(x){ var e=D.createElement('img'); e.src=Q.src; var s=e.style; s.position='absolute'; s.left=x+'px'; s.top=0; return e; }; var vw,vh; Q.onload=function(){ vw=(self.innerWidth|| D.documentElement.clientWidth||D.body.clientWidth) -Q.width; vh=(self.innerHeight|| D.documentElement.clientHeight||D.body.clientHeight) -Q.height; setInterval(L,800); Q.onload={} } } )() *開発技法 [#n319b052] -[[Visual Studioで静的HTMLページのJavaScriptコードをデバッグするには?>http://www.atmarkit.co.jp/fdotnet/dotnettips/568javascriptdebug/javascriptdebug.html]] -[[Eight Simple Rules for Maintainable Javascript >http://blog.gja.in/2012/06/eight-simple-rules-for-maintainable.html#.T_MED_XDW4Y]] 2017.7.3 -[[ある意味究極のソースコード添付法:http://blog.livedoor.jp/dankogai/archives/50654386.html]] *ブックマークレット [#efea4dad] -[[Firefoxでブックマークレットが動かなくなることがある理由と、ブックマークレットが動くようにする方法(非推奨) | 自由とテクノロジーを愛す者のサイト>https://neoblog.itniti.net/firefox-bookmarklet-csp/]] 2017 --CSP(Content Security Policy)を無効にする -[[Chrome Dev Toolでブックマークレットを実行する - Qiita>https://qiita.com/kanaxx/items/0fe8e7e2deea482960b0]] 2020 --ブックマークレットのデバッグ -URLコピーしてクリップボードに入れる例 javascript:(function(){var text =document.title+">"+document.URL; navigator.clipboard.writeText(text).then(e =>{alert('Copy OK!');});})(); --余計な引数が付くのを取り除きたい場合 javascript:(function(){var w = document.URL;if (w.indexOf('qiita.com') >= 0 && w.indexOf('?') >=0) {w = w.substr(0,w.indexOf('?'))}; var text=document.title+">"+w; navigator.clipboard.writeText(text).then(e =>{});})(); -[[JavaScriptでクリップボードに文字をコピーする(ブラウザ) - Qiita>https://qiita.com/simiraaaa/items/2e7478d72f365aa48356]] 2020.12 -[[ブックマークレット/Bookmarkletの作り方>https://www.catch.jp/wiki/index.php?Bookmarklet%A4%CE%BA%EE%A4%EA%CA%FD]] -[[WebページタイトルとURLを一発でコピーできるBookmarklet>https://qiita.com/zamaezaaa/items/29839025108ff9e5eb7b]] 2021.4 -[[【個人開発】ネットで調べ物するたびに、タイトルとアドレスをメモれるツールを作って10年以上使っている話>https://qiita.com/y_catch/items/d3be58b5db1133c0e1c5]] 2021.8 -[[作業効率が加速する…無駄を省いてブログ執筆の時間を短縮しよう!私が現在使用している「ブックマークレット」6選!>http://ozpa-h4.com/2012/09/11/bookmarklet-when-write-blog/]] 2012.9.11 -[[ブックマークレットとは>http://d.hatena.ne.jp/keyword/%A5%D6%A5%C3%A5%AF%A5%DE%A1%BC%A5%AF%A5%EC%A5%C3%A5%C8]] --Bookmarklet。ウェブブラウザで作動するJavaScriptプログラムの一種。 --通常ウェブブラウザでブックマーク(お気に入り)を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選んだ時にプログラムが実行されてちょっとした機能が実現できる。そのようなものをブックマークレットと言う。 --インストールはそのコードをブックマークするだけで行える。 --「ブックマークを選ぶ」という操作だけで機能を実行できる点が手軽であり、ブラウザの簡便な追加機能として様々な種類のものが広く配布されている。