JavaScriptでBasic認証を付けたPOSTリクエストを送る
JavaScriptでPOSTリクエストを送りたいです。 サーバ側から要求されたヘッダー情報は以下の通りです。 Basic認証 'Accept'は'application/json' 'Content-Type'は'application/json' 'Content-Length'は'*' bodyとしてJSON形式のemail それで、自分のコードです。 var btn = document.getElementById('btn'); btn.addEventListener( 'click' , function() { var clientId = "*自分のID*"; var clientSecret = "*自分のPW*"; var data = { email:"*自分のemail*" }; var authorizationBasic = window.btoa(clie
JavaScriptメモ: HTML 要素の位置を取得する
要素の位置を取得する APIある HTML 要素の左上の座標を取得するには次のようにします。 ページの左上からの絶対座標や、親要素からの相対座標で取得することができます。 jQuery の例 const $e = $('#box'); // document（ページ左上）からの絶対座標 const x1 = $e.offset().top; const y1 = $e.offset().left; // 親要素の左上を (0,0) とした相対座標 const x2 = $e.position().top; const y2 = $e.position().left; ここで、親要素としてみなされるのは、position 属性に relative、absolute、fixed のいずれかをもつ直近の親要素です。 $e.position() でうまく値が取れない場合は、親要素にこの指定を忘れて
JavaScriptで指定した要素の位置へスクロールするコードと実行結果 | iPentec
JavaScriptで指定した要素の位置にスクロールするコードと実行結果を紹介します。 概要 JavaScriptで指定した位置にスクロールするには、 document.documentElement.scrollTop にスクロールしたい位置の座標を代入することで指定位置にスクロールできます。指定した要素の位置にスクロールする場合は、あらかじめ、要素の座標を取得して、その値を document.documentElement.scrollTop に代入します。 方法: scrollIntoView メソッドを利用する方法 新しいWebブラウザでは、DOM要素の scrollIntoView メソッドを呼び出すことで、要素が画面に表示される位置にスクロールできます。 書式 コード 下記のHTMLファイルを作成します。 <!DOCTYPE html> <html> <head> <meta
JavaScriptで要素の位置座標を取得する方法
2017/06/22 要素の位置座標を取得するには、getBoundingClientRect()というメソッドを利用します。 サンプルコード要素の位置座標を取得するには、対象要素のgetBoundingClientRect()というメソッドを利用します。このメソッドで取得できるのは「ビューポート(画面内)」における位置なので、スクロール量によって値が変わります。 // 要素の位置座標を取得 var clientRect = targetElement.getBoundingClientRect() ; // 画面の左端から、要素の左端までの距離 var x = clientRect.left ; // 画面の上端から、要素の上端までの距離 var y = clientRect.top ;「ページ全体」における位置を取得するには、先ほどの値に現在のスクロール量を加えましょう。 // ページ
配列のすべての要素の値を合計した値を取得する
要素の値を合計する(reduceメソッド) Array オブジェクトの reduce メソッドを使うと、配列に含まれるすべての要素の値を合計し、その合計値を返します。書式は次の通りです。 配列名.reduce( コールバック関数(合計値の保管用, 要素の値), 初期値 ) 配列名.filter( コールバック関数(合計値の保管用, 要素の値, 要素のインデックス), 初期値 ) 配列名.filter( コールバック関数(合計値の保管用, 要素の値, 要素のインデックス, 配列), 初期値 ) reduce メソッドは配列に含まれる要素を先頭から順に取り出しコールバック関数を呼び出します。コールバック関数は、合計値の保管用、現在取り出されている要素の値、要素のインデックス、そして配列そのものを引数にして呼び出されます。コールバック関数の中では合計値の保管用の値に現在の要素の値を加算したものを
Array.prototype.reduce() - JavaScript | MDN
const array = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array.reduce( (accumulator, currentValue) => accumulator + currentValue, initialValue, ); console.log(sumWithInitial); // 予想される結果: 10 引数 callbackFn 配列の各要素に対して実行される関数です。その返値は、次に callbackFn を呼び出す際の accumulator 引数の値になります。最後の呼び出しでは、返値は reduce() の返値となります。この関数は以下の引数で呼び出されます。 accumulator 前回の callbackFn の呼び出し結果
JavaScript：「return false;」で「href」を無効化できずに２つウィンドウが開いてしまった原因
オリジナルのTwitterボタンを設置したところ、ウィンドウが２つ開いてしまうことに気が付きました。ちゃんと「return false;」を利用して、「aタグのhref」リンクが開かないようにしていたつもりが、効果がないようでした。かなり特殊だったこの原因を探すのにちょっと苦労したので、メモしておきます。 目次 1. 設置していたタグ2. 設置していたタグの仕組み2.1. return false;3. return false;が機能していない？4. いろいろ試してみた結果4.1. WordPressプラグイン？4.2. www.yahoo.co.jpにしたら大丈夫！4.3. twitterのjavascriptが原因？4.4. 原因のコード5. でもこれどう対策すれば・・・6. 対策6.1. 参考メモ スポンサーリンク 設置していたタグ 設置していたタグを簡単に書くとこんな感じです。
のonclickでreturn falseしてるのにIEだけ画面遷移しちゃう - くろまほうさいきょうでんせつ
<a href="/" onclick="return false;">画面遷移してほしくないリンク</a>↑としているのになぜかIEだけしっかり画面遷移する。 そんなばかな！ と思ったら自分がばかだったメモ。 こういうことでした <script type="text/javascript" src="jquery-1.4.4.js"></script> <script type="text/javascript"> $(function(){ $('#link1').click(function(e){ }); $('#link2').click(function(e){ return true; }); }); </script> <a id="link1" href="/" onclick="return false;">何も起こらない</a> <a id="link2" href=
全61件！Moment.js日付フォーマット実例
さてさて、前々回に全217件！Carbonで時間操作する実例という記事を書いたのですが、思いのほかそれまで知らなかった便利なメソッドや記述方法があることがわかりました。 そこで、時間・日付つながりということで今回はクライアントサイド（つまり、JavaScript）の時間管理パッケージ「Moment.js」についてまとめることにしました。 あまり長くなってもいけませんので、まずは「日付フォーマット」です。今後もMoment.jsのGetterやSetterなどその他の便利な記述についても記事を公開していきますのでお楽しみに。 実行環境について Moment.js: バージョン 2.22.2（日本語対応コードも読み込んでいるものとします） CDNを使ってMoment.jsを使う場合は以下のようになります。 <script src="https://cdnjs.cloudflare.com/aj
[JavaScript] 数字を3桁カンマ区切りにする、2つの方法 - YoheiM .NET
こんにちは、@yoheiMuneです。 数値を3桁カンマ区切りにしたいという要件を、JavaScriptでどのように実現するのかについて、ブログに書きたいと思います。 目次 解決したいこと 「数字は3桁カンマ区切りで表示したいんだよね〜」と言われた時に、サクッと対応できる方法をお伝えしたいと思います。 方法1：toLocaleString()を利用 実装方法 もっとも簡単に対応するなら、toLocaleString()関数を使うと便利です。数値型の変数に利用できます。 var num = 12345; num.toLocaleString(); // "12,345" toLocaleString()はロケール（=言語、国、地域、などを表現する、例：ja）に合わせた数値表現を行うためのメソッドです。ロケールによって表示が異なりますが、日本語や英語の場合には3桁カンマ区切りとなります。 ブラ
![[JavaScript] 数字を3桁カンマ区切りにする、2つの方法 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7815437fe281f634075b7fa8fc0da446bb6dbe4/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F624.jpg)
JavaScriptでアップロードするファイルの拡張子をチェックするサンプル
PHPでファイルをアップロードするサンプル PHPで複数ファイルをアップロードするサンプル に引き続き、ファイルのアップロードに関する記事です。 PHP側でもアップロードされる拡張子のチェックは当然するべきですが、アップロード処理が走る前にブラウザ側でチェックもしておきたいところ。これを無駄と感じるか、二重でもチェックはするべきと考えるかは人それぞれ。 例えば、アップロードを許可する拡張子の種類が変わった場合、JavaScriptとPHPの両方を修正しなければならないというメンテナンス上の問題もあります。 ちなみにぼくの場合はほとんどのサイトをPHPで作っているため、データベースのテーブルとかに許可する拡張子一覧を入れておいて、PHPでもJavaScriptでもそこを参照するような作りにすることが多いです。管理者しかアクセスできないようなページも作っておき、そこで拡張子の設定もできるように
Moment.jsを使う - Qiita
去年にこれ（日付フォーマットなど 日付系処理） 書いたんだけど（思いの外ストックされた）、 これはライブラリ使用承認プロセスがとても難儀な環境の時書いたもので、 もしそんな悲しい環境でないなら先人たちの素晴らしいライブラリを使ったほうがいい。 ライブラリを使ういいところは、コーダの独自実装になりにくいし、他のプロジェクトでも知見が使い回しできるところだと思う。 ということでMoment.jsの使い方について書いておく。 Moment.js GitHubにおいて、現在(2015/1)日付を処理するライブラリの中で多分一番Starがついてる日付系のライブラリ。人気が有るということは正義っぽい。 Qiitaにもたくさん記事ある。 公式ドキュメントはこちら。 http://momentjs.com/docs/ Moment.jsはJavaScriptのDateオブジェクトをラップするオブジェクトを
Document: querySelector() メソッド - Web API | MDN
引数 selectors 文字列で、照合する 1 つ以上のセレクターを設定します。この文字列は有効な CSS セレクター文字列でなければなりません。そうでない場合は SyntaxError 例外が発生します。 なお、HTML 仕様書では、属性値が有効な CSS 識別子であることを要求していません。class または id 属性の値が有効な CSS 識別子でない場合、セレクター内で使用する前に、その値に対して CSS.escape() を呼び出すか、文字のエスケープで説明されている手法のいずれかを使用する必要があります。例については、属性値のエスケープを参照してください。 返値 Element オブジェクトで、文書内で指定された CSS セレクターに最初に一致する要素を示すオブジェクト、もしくは、一致する要素がない場合は null を返します。 指定されたセレクターに一致するすべての要素のリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTTPリクエストした先がBasic認証かかっていたときの対処@TitaniumMobile
how to include the header access token to the Dropzone config
Element.scrollTop
[JavaScript]色々なディープコピー - Qiita![[JavaScript]色々なディープコピー - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8c54f554a03eefce693fdf4d10a5fa98516ae954/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.1.1%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTM0Mjk0JTJGcHJvZmlsZS1pbWFnZXMlMkYxNDg3MTY0MTYyP2l4bGliPXJiLTQuMS4xJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz1hOGYyMDlhMzEzYWY1Yzk2MTU2MGYzYTc1MGYyODY2OQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Ddf022927218248a1f5e80cd98210369d%3Fixlib%3Drb-4.1.1%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFOCU4OSVCMiVFMyU4MCU4NSVFMyU4MSVBQSVFMyU4MyU4NyVFMyU4MiVBMyVFMyU4MyVCQyVFMyU4MyU5NyVFMyU4MiVCMyVFMyU4MyU5NCVFMyU4MyVCQyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWNmMzhlZTY2ZGZhOTcwYWUzYWFkNTQzMzNiMjg0NDY4%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTgzOCZoPTU4JnR4dD0lNDBrbmhyX18mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz03MzYzNTFjYzEyOGJjYTIzYWViMmZjMzJlOGVjYzMzOA%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D700add97777e0a29d2fadb850e7799ee)
[JavaScript] 配列(Array)の合計値, 平均値, 中央値をモダンに求める - Qiita![[JavaScript] 配列(Array)の合計値, 平均値, 中央値をモダンに求める - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/58431be3e98dbbdac46d50b1866c2dd8d6d19522/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.1.1%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzc1NiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTQ3MzY4MDcwOD9peGxpYj1yYi00LjEuMSZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmYmc9RkZGRkZGJmZtPXBuZzMyJnM9YTJmMGMyMDhlODBmZGZhNGYwZjRjMDFmZTBjMmI5YmU%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dbe72d09860e9c50de3a02a0b62f3cece%3Fixlib%3Drb-4.1.1%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFOSU4NSU4RCVFNSU4OCU5NyUyOEFycmF5JTI5JUUzJTgxJUFFJUU1JTkwJTg4JUU4JUE4JTg4JUU1JTgwJUE0JTJDJTIwJUU1JUI5JUIzJUU1JTlEJTg3JUU1JTgwJUE0JTJDJTIwJUU0JUI4JUFEJUU1JUE0JUFFJUU1JTgwJUE0JUUzJTgyJTkyJUUzJTgzJUEyJUUzJTgzJTgwJUUzJTgzJUIzJUUzJTgxJUFCJUU2JUIxJTgyJUUzJTgyJTgxJUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NTY1NjQ1YTYxOWQ2MmZkYjE4Y2M1NmQ1MzZjM2QzZGY%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTgzOCZoPTU4JnR4dD0lNDBwaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0yZmQxY2NmY2VkNjMzMjc1NjBjZTM1NmU2Nzc0YTBhOA%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Df5dab05f07578060c86cbe296e0522cd)
TechAcademy [テックアカデミー]![TechAcademy [テックアカデミー]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c295330d4f51d6ba69336c6835b47fb606bfd53/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Ftechacademy.jp%2F_nuxt%2Fogp%2Fog-image.jpg)
https://tech.kurojica.com/archives/24014/
