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
Element.scrollTop
<div id="target" class="box"><img src="/snow-mountain.jpg" width="240" height="180"></div> <p class="output">scrollTop: <span id="x">0</span> / scrollLeft: <span id="y">0</span></p> <p id="error" class="error none"></p> <p><button id="fire" class="button">実行</button></p> <p><button id="reset" class="button">リセット</button></p> .output { color: #333 ; text-align: center ; padding: 8px 0 ; border: 1px
HTML 要素の位置を取得する | まくまくJavaScriptノート
要素の位置を取得する API ある HTML 要素の左上の座標を取得するには次のようにします。 ページの左上からの絶対座標や、親要素からの相対座標で取得することができます。 jQuery の例 var $e = $('#box'); // document（ページ左上）からの絶対座標 var x1 = $e.offset().top; var y1 = $e.offset().left; // 親要素の左上を (0,0) とした相対座標 var x2 = $e.position().top; var 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
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback reduce() は Array インターフェイスのメソッドで、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素の計算結果の返値を渡します。配列のすべての要素に対して「縮小」コールバック関数を実行した最終結果は、単一の値となります。 コールバックの初回実行時には「直前の計算の返値」は存在しません。 初期値が与えらえた場合は、代わりに使用されることがあります。 そうでな
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のNumberとparseIntの違いを現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptのNumber()とparseInt()の違いについて解説しています。NumberとparseIntそれぞれの役割と使い方、2つの違い、場面によって使うとよいかについて動作を見ていきましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 JavaScriptのNumberとparseIntの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そ
[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/59af8a45171618d90e4d4f0d7fe3d06f158278fc/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F624.jpg)
HTMLとjavascriptでアップロードされた複数のファイル名を取得する | クロジカ
ホーム / ハック / HTMLとjavascriptでアップロードされた複数のファイル名を取得する
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
ドキュメントオブジェクトモデル (DOM)DocumentコンストラクターDocument()インスタンスプロパティactiveElementadoptedStyleSheetsalinkColor 非推奨; all 非推奨; anchors 非推奨; applets 非推奨; bgColor 非推奨; bodycharacterSetchildElementCountchildrencompatModecontentTypecookiecurrentScriptdefaultViewdesignModedirdoctypedocumentElementdocumentURIdomain 非推奨; embedsfeaturePolicy Experimental fgColor 非推奨; firstElementChildfontsformsfragmentDirectivefullscr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTTPリクエストした先がBasic認証かかっていたときの対処@TitaniumMobile
how to include the header access token to the Dropzone config
[JavaScript]色々なディープコピー - Qiita![[JavaScript]色々なディープコピー - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/77874e95b4389aae0738f94f1895e4bc800cb485/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.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTM0Mjk0JTJGcHJvZmlsZS1pbWFnZXMlMkYxNDg3MTY0MTYyP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTU1ODNlNjhhN2YzNTdlZTE5NDExYWUxNDU4ODNlMTZl%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dc38934cea2e7068cd97b149d982505df%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFOCU4OSVCMiVFMyU4MCU4NSVFMyU4MSVBQSVFMyU4MyU4NyVFMyU4MiVBMyVFMyU4MyVCQyVFMyU4MyU5NyVFMyU4MiVCMyVFMyU4MyU5NCVFMyU4MyVCQyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWM4Y2ZmOTc4MjRlMjRjMTI4N2Q2MGE5YjA3MGU5ZjJj%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrbmhyX18mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz02MjU4M2Y4ZDViY2M1MjdlZjYzNmIzMTU5MThhMGQ4Mw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Debab203840e13aa212783374a633a2c8)
[JavaScript] 配列(Array)の合計値, 平均値, 中央値をモダンに求める - Qiita![[JavaScript] 配列(Array)の合計値, 平均値, 中央値をモダンに求める - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b7f706c8a17e12cc5f52f54fd6ce87f1be553376/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.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzc1NiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTQ3MzY4MDcwOD9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz0yMDg5YWE2OTljNzUzNGQ3YWQzNDM1YjEwMWVhZjRiNQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dad1469ca61be031e845c1c818664c067%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFOSU4NSU4RCVFNSU4OCU5NyUyOEFycmF5JTI5JUUzJTgxJUFFJUU1JTkwJTg4JUU4JUE4JTg4JUU1JTgwJUE0JTJDJTIwJUU1JUI5JUIzJUU1JTlEJTg3JUU1JTgwJUE0JTJDJTIwJUU0JUI4JUFEJUU1JUE0JUFFJUU1JTgwJUE0JUUzJTgyJTkyJUUzJTgzJUEyJUUzJTgzJTgwJUUzJTgzJUIzJUUzJTgxJUFCJUU2JUIxJTgyJUUzJTgyJTgxJUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MzgwZGNjM2FjMDNjMmU2NzgzZWRmMzc3MmMzMGFkNzI%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBwaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1mNzA5ZDQyYTc3OGRkNzYxZDRkNmY1YjBiZDVhNWZmNw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dc4caf131f00e11aa0d274bec49c26b0d)
