エンジニアのひよこ_level10

【毎日更新!】新卒4年目エンジニアブログです!

JavaScript

【HTML・JavaScript】aタグにonclickではなく、hrefでJavaScriptを動かしたい【973日目】

aタグでJavaScriptを動かしたい aタグでJavaScriptを動かしたい。 onclickを使ってもいいが、hrefで動かしたい。 <span onclick="submit();">ボタン</span> こんなふうに描けば、submitが動くが、 hrefを扱ってaタグでの挙動にしたい。 あるいは、デザインとか扱いの都合でaタグを使いたい。 …

【JavaScript】関数名が被らないように、オブジェクトに入れる【970日目】

関数名が被る? <script> function xxx() { return "x"; } </script> こんなふうにスクリプトタグに直接関数を書いた。 <script src="common.js"></script> こんな感じにJavaScriptを別ファイルに書いていた場合、 common.jsと関数名が被る可能性があります。 すると、読み込み順によって動作が被る可能性があり…

【jQuery】Datatablesプラグインで、thが必ずずれるバグの対応をJSに寄せる理由【966日目】

jQuery Datatablesプラグインのバグ datatables.net こちらを使ってるが、起動させると、ウィンドウの幅を変えた時とかにthの部分のリサイズが上手くいかない。 いくつか対応方法が他の記事にあるが、そのうちの1つの書き方について。 width: 100%を直書き…

【SpringBoot】th:replaceでHTMLパーツ化したら、JSも一緒にパーツ化する【930日目】

th:replaceでパーツ化したい HTMLをパーツ化したい。 partsA.html <div id="parts" th:fragment="parts-fragment"> パーツ </div> このパーツを読み出す BaseB <div th:replace="partsA::parts-fragment"> このとき、 id="parts" を使ったJavaScriptがあった。 JavaScriptもパーツ化する partsA.html <div id="parts" th:fragment="parts-fragment"> パーツ </div> </div>

【jQuery】追加プラグインの読み込み順で無効化されてしまう【900日目】

なぜか追加プラグインが動かない jQueryのプラグインを新しく入れた。 しかし、今まで入れたプラグインが全て急に動かなくなった。 どうやら、プラグインを入れたせいなのまではわかったが、原因がわからなかった。 jQuery本体入りのJSだった 今回入れたプラ…

【jQuery】表示・非表示のものをすべて指すセレクタ【894日目】

非表示のものを対象にしたい 非表示に対して、特定の動作をしたくない。 あるいは、表示させているものにだけjQueryの対象にしたい。 :hidden :visible :hidden で非表示のものを対象にする。 :visible で非表示ではないものを対象とする。 従って、 $(":hid…

【jQuery】フロントエンドでバリデーションをするプラグイン【893日目】

クライアント側でバリデーションをしたい サーバー側でも入力値を確認してバリデーションをかけるが、 出来れば通信を使わずにエラーが出せる部分は出したい。 であれば、クライアント側でバリデーションをかけたい。 jQuery Validation jqueryvalidation.or…

【JavaScript】画面を表示したら、一瞬描画途中の要素が見えてしまう【892日目】

画面を描写した瞬間、ごちゃごちゃ動いてる ページを表示する時に、画面に一瞬要素の一部だけが表示されて、 その後完全な形が表示されることがある。 これは、HTMLの描写が終わった後にJavaScriptでHTMLを書き換えたりしているため。 かといって、JavaScrip…

【JavaScript】tableタグの中身の、検索やソートが出来るプラグイン【890日目】

テーブルのソートとかをしたい テーブルタグがあって、それのソートや検索をしたい。 普通に実装すると、まーーーあ大変。 一個一個作って、しかもバグとか起こったら辛い。 なので、プラグインとか使おう DataTables datatables.net 使い方 jQueryとDataTab…

【JavaScript】table内の特定のselectの入力に応じて、別なselectの内容を変える【889日目】

テーブルにインプットが複数 このようなselectが2つなのですが、 1つ目のselectに合わせて、2つ目のselectを変えたい。 加えて、他のやつと連動しないように注意したい。 国 言語 アメリカ 日本 英語 日本語 アメリカ 日本 英語 日本語 作ったもの例 codepen…

【JavaScript】テーブルの列をテンプレートに沿ってボタンで追加する【888日目】

テーブルのカラムを追加したい テーブルの入力項目をどんどん増やしたい。 増やすとすると、その入力項目のテンプレートが必要。 テンプレートに合わせて、テーブルの列を増やしていくスクリプトを書きたい。 ボタンを押すと増やすプログラム // 非表示にし…

【JavaScript】複数のcheckboxで、一つでもチェックされたら要素を表示する【886日目】

1個でもチェックされたら表示したい チェックボックスがチェックされたときに、何かを表示したい。 ではなく、どれか一個だけでもチェックされたら表示をしたい。 例えば共通の内容があって、片方がチェックされたら表示させたい。 サンプルコード <input type="checkbox" class="check_item" onchange="anyOneCheckedShow('.check_item', '.show_item')">

【JavaScript】ウィンドウのアクティブ・非アクティブのイベント【865日目】

ウィンドウのアクティブ・非アクティブ アクティブなウィンドウと、そうでないウィンドウで処理を分けたい。 場合によっては、非アクティブにしたい時とかにどうするか。 blur/focus イベントのblur(非アクティブ)、focus(アクティブ)を操作すると良いです。…

【JavaScript】標準で動くと思っていた関数が動かなかった時【822日目】

JavaScriptで標準だと思ったら使えない関数? 普段だったら普通に使えてた関数が使えない、なんでだろう。 console.logとかが動かない。 ブラウザ上じゃないとか、特定のツール上で動いているとか。 スコープが違う 今動かしているJavaScriptが動いている場…

【JavaScript】(0, eval)("x + y")でグローバルスコープでJS実行【818日目】

グローバルスコープでJSを実行したい 別スコープ内で文字列でスクリプトを保持しているが、そのスクリプトはグローバルスコープで実行したい時。 例えば、外部からJSを取得して文字列で持った。 それには汎用的な関数を定義してあった。関数の再利用をしやす…

【JavaScript】プロパティとメソッドは同名で存在出来ない?【817日目】

同じ名前のプロパティとメソッド var obj = {}; obj.param = "3"; obj.param = function () { return "func"; }; こんなふうに同じ名前でメソッドとプロパティを設定したら? 結果 obj.param(); // "func" obj.param; // ƒ () { return "func"; } こんなふう…

【Chrome】バインドされているJavaScriptを確認したい【815日目】

ボタンのJavaScriptを確認したい あるボタンに対して、JavaScriptのクリックイベントとかがバインドされているか確認したい。 自分が作ったプログラムではないとか、 自分が作ったプログラムが実際にちゃんと動いているかとか確認したい。 やり方 F12などで…

【本レビュー】『開眼!JavaScript』は雰囲気でコード書いてる人にオススメ!【607日目】

開眼!JavaScript読んでみました この本です。おすすめですよ! 広告リンクなので、紹介してくれてありがとーって人はこちらから購入をお願いいたします(‘ω‘ )! おすすめの人 1. JavaScriptを触って、とりあえずなにか作れるようになった人 2. JavaScriptで…

【JavaScript】window.onloadで書いた関数が動かない対応【602日目】

window.onload ページの読み込みが終わったら動くJavaScriptを書きたい。 window.onload = function() { console.log('aaa') } こんな感じに、表示後にconsole.logを吐き出したい。 ・・・あれ?なんで動かないんだろう? コードを上書きしてるから 上記のコ…

Vue.jsの勉強始めました。【518日目】

Vueの勉強始めました Laravelの勉強していたんですが、私、フロントエンドは生のJavaScript、jQueryで書いてました・・・ TypeScriptやなにかフロントエンドのJSフレームワーク覚えたいな・・・ってことで、選ばれたのはVue.jsでした。 なんでVue? JavaScrip…

【Google Optimize】JavaScriptが動かないときに疑うべき2点【507日目】

ABテストが上手く動かない? Webサイトを2種類作ってABテストを実行するときに使われる、Google Optimize。 marketingplatform.google.com これでCSSを書くのは上手くいったけど、JavaScriptが動かない・・・ こういうときにはJavaScriptの基礎、2つ疑ってみ…

【Laravel】jQueryのajaxでpostする時に、トークン書くのが面倒な方へ【480日目】

jQueryでajax使ったpost Laravelは、csrfのトークンをpost処理に入れないと、postをすることが出来ないです。 JavaScript(jQuery)使ってpostするときは、なんとかしてそのトークンを混ぜないといけない。 でも、それを毎回JavaScriptに書くのは面倒・・・ aj…

【jQuery】表示する内容を切り替える、1行プログラム【410日目】

こんなとき使う ボタンをクリックしたら、表示する文字を切り替えたい。 表示する内容を切り替えたいとかは良くあります。 show()や hide()を使うのもありですが、たくさん切り替えるとかも面倒なので、 1行ですっきり書いてみましょう toggle <button id="btn_before_after">Toggle</button> <p class="before_after">before</p> <p class="before_after" style="display: none"></p>…

【jQuery】ボタンの挙動をクラス名を使って分岐させる【318日目】

書き方いくつか 書き方いくつか用意しました。 お好みの方をどうぞ。 こんなコードがありました。 $('.ClickA').click(function () { //クラス名を変える $('.ClickA').addClass('ClickA').removeClass('ClickB'); //イベントをつけ直す $('.ClickB').unbind…

【jQuery】unbind()って何?クリックイベントとかを消す【314日目】

unbindの例 $('#btn').click(function () { return 'NG'}); $('#btn').unbind(); $('#btn').click(function () { return 'OK'}); なにをしてるの? 一行目のclickで、#btnがクリックされた時に、'NG'を返す機能が付きました。 二行目で、#btnについている機…

【JavaScript】JSからApiや他ページを見る方法2つ【307日目】

こんな時使う <a href="/"></a> こんなふうにリンクを作るんじゃなく、 <button onClick="requestApi()"></button> のように、JSでどこかのページを呼び出したい。 入力がある時だけページを呼び出すとか、if文を使いたい時とか。 1.ページ遷移 location.href = '/home'; だけ。簡単だね! 2.jQueryでapi呼び出し var …

【IE】Formタグのsubmitで二重送信されてエラーが出る【294日目】

こんなときがありました <form> <input></input> <button onClick="submit();"></button> </form> こんな感じの構成で、submitが想定通りに動かなかった。 私のときは、Laravelのバリデーションのエラーで、サーバーサイドを疑いそうになった。 ブラウザの問題なのに。 IEは二重送信をそのまま送る buttonタグのonClick()でsubm…

【JavaScript】対象のクラスを持つ要素を子要素ごと消す【270日目】

htmlで邪魔な要素がある <div class="gomi"> <p>ごみー</p> </div> <div class="ringo"> <p>りんご</p> </div> この時、gomiって書かれてるクラスの要素を消して、こうしたい <div class="ringo"> <p>りんご</p> </div> jquery使ってこうする $(".gomi").remove(); これで消せる

【HTML・JS】defer。書き順関係なく、HTMLの後にJSファイルを読み込む【227日目】

いつ使うの HTMLファイルの中でscriptタグでJSファイルを読み込むときで、 ・必ず読み込んでほしいとき ・HTMLを描画終わった後にJSファイルを読み込んでほしいとき 何書くの <script src="https://xxxxxx.jp/yyyyy.js" defer> scriptタグの最後にdeferを書く 何が起きてるの 通常:HTML読み込んでscriptタグ…

jQueryで、自分の真上、真下の要素を取得する【174日目】

親、子はわかる <div class="parent"> <div class="child"></div> </div> これが親子なのはわかる <div class="a"></div> <div class="b"></div> 同じ階層の上下にある、これの関係はどうしたら・・・ prev $('.b').prev(); これで $('.a')が取得出来る ちなみに、自分より上の要素全部を取る場合は $('.b').prevAll(); next $('.a').next(); これでさっきの…