post()：postメソッド(成功はdone、失敗はfail)による非同期通信 - jQuery無双
postメソッド(成功はdone、失敗はfail)による非同期通信の書式 $.post({ url: リクエスト送信先のURL, data: URLのクエリ（パラメータ）, }).done(function(data, textStatus, jqXHR){ // 成功の場合の処理 }).fail(function(jqXHR, textStatus, errorThrown){ // エラーの場合処理 }); postメソッド(成功はdone、失敗はfail)による非同期通信する場合は、 postメソッドを使用します。 具体例(postメソッド(成功はdone、失敗はfail)による非同期通信のサンプルコード) リクエストの送信先のテスト用のPHP １．受け取ったリクエストタイプの判定 ２．ajax通信にて受け取ったパラメータを各変数に代入 ３．このパラメータはmethod（非同期通信で
アップロード時に選択した画像のサムネイルを表示 | 私的雑録
$(function() { $('input[type=file]').after('<span></span>'); // アップロードするファイルを選択 $('input[type=file]').change(function() { var file = $(this).prop('files')[0]; // 画像以外は処理を停止 if (! file.type.match('image.*')) { // クリア $(this).val(''); $('span').html(''); return; } // 画像表示 var reader = new FileReader(); reader.onload = function() { var img_src = $('<img>').attr('src', reader.result); $('span').html(i
AtomでJSの開発環境構築(ESLint,prettier,flow) - Qiita
概要 普段vim使っているのですがJS書くのにAtomが便利そうなので開発環境を整えました。 Atomに入れるプラグイン linter-eslint linter-flow ※他にも入れてるプラグインはありますがここでは上記2つをピックアップします ※prettier-atomもありますが今回は入れずにeslintのプラグインでやることにしました linter-eslint ファイル保存時にeslintチェックをして自動でコードを修正してくれるのがとても便利です。 今回はプラグインでprettierを入れたのでコードの整形も自動でやってくれます。 参考：prettierの使い方 基本はeslintrcにルールを書いてそちらにしたがってコードを修正してもらいます。なので必要なものを一式入れておきます。 $ npm install --save-dev \ babel-eslint \ bab
Array.prototype.forEach() - JavaScript | MDN
引数 callbackFn 配列のそれぞれの要素に対して実行する関数。返値は破棄されます。この関数は以下の引数で呼び出されます。 element 現在処理中の配列の要素です。 index 現在処理中の配列の要素のインデックスです。 array forEach() が呼び出されている配列です。 thisArg 省略可 callbackFn を実行するときに this として使用する値です。反復処理メソッドを参照してください。 返値 なし (undefined)。 解説 forEach() メソッドは反復処理メソッドです。指定された関数 callbackFn を配列に含まれる各要素に対して一度ずつ、昇順で呼び出します。 map() と異なり、 forEach() は常に undefined を返し、連鎖させることはできません。典型的な使用する用途は、チェーンの終わりで副次効果を実行することです
JavaScriptで文字列を数値に変換する：Number(), parseInt(), parseFloat() - ポップインサイト
Number(), parseInt(), parseFloat()を使った明示的な型変換 文字列を数値型に型変換するにはNumber(), parseInt(), parseFloat()を使います。 Number()は簡単に使えて便利ですが、数字以外を含む文字列を引数に指定するとNaNを返すので注意が必要です。 parseInt()は文字列を整数に変換し、実数の場合は小数点以下を切り捨てます。また、第2引数で変換時の基数を指定することができ、省略した場合は10進数として変換します。基数が10の場合は引数に数字以外の文字が含まれていても無視します。 parseFloat()は文字列を実数に変換します。引数に数字以外の文字が含まれている場合は無視します。 Number('123'); // 123 Number('123a'); // NaN parseInt('123', 10); //
10行ぷよぷよのソースコードを読む - Qiita
プログラマをする上では10行程度のプログラムを読めるといいとのこと。上記記事のブックマークコメントから飛んで10行ぷよぷよなるものを目にしたので、ソースコードを解読してみました。 解説記事を探したのですが、見当たらなかったので書いてみてます。 10行ぷよぷよについて javascriptで動くぷよぷよです。 開発者のPascalさんのサイトはもう残っていないとのことで、下記からソースを拝借しました。 実行すると、一人用のとことんぷよぷよが遊べます。 そのまま実行しても怒られるので、後述しますがちょっとだけ手を加えてます。 ソースコード ソースコードは以下です。 <body onKeyDown=K=event.keyCode-38 id=D><script>for(M=N=[i=113];--i;M[i-1]=i%8< 2|i<8)function Y(){e++;if(e%=10)for(
【JavaScript入門】文字列の分割と切り出し(substr/substring/slice) | 侍エンジニアブログ
こんにちは、ライターのマサトです！ 今回は、文字列を「分割(切り出し）」する方法を学習します！JavaScriptにおける「分割(切り出し）」方法は、いろいろなメソッドが用意されており、それぞれ使い方や活用方法、注意するべきポイントなどが異なります。 そのため、プログラミング初心者の方は勉強する際に迷うことも少なくありません。 そこで、この記事では文字列を「分割(切り出し）」することができるメソッドを1つずつ解説し、サンプルコードと共に頭の中を整理しながら学習できるようにしましたので、ぜひ参考にしてみてください！ JavaScript初心者におすすめの 無料プログラミングサイト3選
Array.prototype.sort() - JavaScript | MDN
引数 compareFn 省略可 要素の順序を決定する関数。この関数は、次の引数で呼び出されます。 a 比較する第一要素。 undefined になることはありません。 b 比較する第二要素。 undefined になることはありません。 これは、以下の数値を返します。 負の値は、a が b より前に来るべきであることを示します。 正の値は、a が b の後に来るべきであることを示します。 0 または NaN は、a と b が等しいとみなされることを示します。 これを覚えるには、(a, b) => a - b は数値を昇順でソートすることを覚えておいてください。 省略した場合、配列の要素は文字列に変換され、それぞれの文字の Unicode コードポイントの値に従ってソートされます。 返値 ソートされた元の配列への参照です。なお、配列はその場でソートされ、コピーは作成されません。 解説 c
【JavaScript入門】日付の取得と比較の方法まとめ | 侍エンジニアブログ
今日、昨日、明日の日付を取得する方法を知りたい 日付と日付で比較する方法が知りたい 日付を指定したフォーマットで取得する方法が知りたい 今日は、JavaScriptによる日付の取得について学習します。 この記事では、日付を取得する、日付をフォーマットする、日付の妥当性をチェックするなどの基本的な内容から応用的な使い方についても紹介していきます。 JavaScriptによる日付の取得をよく把握して自分のスキルとしていきましょう！ JavaScriptでの日付取得方法をマスターすることで、プログラミングスキルを一段と向上させることができます。しかし、技術の進化は早く、特に生成AIを活用したWeb制作の分野では、常に最新の知識が求められます。もし「自分で追いつくのが難しい」と感じているなら、新しい環境で学ぶことを検討してみてはいかがでしょうか。 このセミナーでは、生成AIとWeb制作を組み合わせ
6.x JavaScriptとCSSスカフォールド Laravel
イントロダクションIntroduction LaravelはJavaScriptやCSSプリプロセッサの使用を規定してはいませんが、開発時点の元としてほとんどのアプリケーションで役立つだろうBootstrapやReact、Vueを提供しています。これらのフロントエンドパッケージをインストールするため、LaravelはNPMを使用しています。While Laravel does not dictate which JavaScript or CSS pre-processors you use, it does provide a basic starting point using Bootstrap[https://getbootstrap.com/], React[https://reactjs.org/], and / or Vue[https://vuejs.org/] that
【JavaScript】アロー関数式を学ぶついでにthisも復習する話 - Qiita
対象読者 ES6を詳しくは知らない なんとなくJavaScriptを書けるけど、JSのthisの特性についてまだよく知らない アロー関数式を知らない、または知っているけど実装経験がない 概要 JavaScriptのES6で導入されたアロー関数式を、関数のただのシンタックスシュガーに過ぎないと思っていたのですが、調べてみると実際そうではないようだったので、thisの話と一緒にまとめてみました。 アロー関数式とは ES2015（ES6）から利用可能になった新しいJavaScriptの構文の一つです。 ES6とは、2015年に標準として策定されたJavaScriptの新しい文法です。 ES6では他にも、letによる変数宣言が可能になったり、promiseという非同期処理の実装ができるようになったりと、アロー関数式以外にも様々な構文追加がありました。 さて、この記事の主題はそのなかでもアロー関数な
なぜ default export を使うべきではないのか？
プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【LINE DEV DAY 2019 番外編】UIT Front-end Tooling Survey 2019 技術選定は勿論、プロジェクトにおける細かなコーディングルールについては、プロジェクトのコードオーナーに委ねられており、プロジェクトごとに裁量を持った意思決定を行っています。 その上で、私が携わるプロジェクトにおいては、 default export を可能な限り避けるように心がけています。 import 側の裁量で対象を自由に命名できてしまう 今回は「『Da
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
it-swarm.dev
https://tech.kurojica.com/archives/38740/
HTML5 – ファイルアップロード プログレスバー付 « Weblog it-azusa
https://stackoverrun.com/ja/q/2921228
ツリー表示する - その１ - ボンクラ技術者の備忘ノート
JSのアロー関数のreturnの書き方いろいろ - Qiita
Component への分割と Props の受け渡し
ES6のexportについて詳しく調べた - Qiita
