JavaScript
JavaScriptで標準だと思ったら使えない関数？ 普段だったら普通に使えてた関数が使えない、なんでだろう。 console.logとかが動かない。 ブラウザ上じゃないとか、特定のツール上で動いているとか。 スコープが違う 今動かしているJavaScriptが動いている場…
グローバルスコープでJSを実行したい 別スコープ内で文字列でスクリプトを保持しているが、そのスクリプトはグローバルスコープで実行したい時。 例えば、外部からJSを取得して文字列で持った。 それには汎用的な関数を定義してあった。関数の再利用をしやす…
同じ名前のプロパティとメソッド var obj = {}; obj.param = "3"; obj.param = function () { return "func"; }; こんなふうに同じ名前でメソッドとプロパティを設定したら？ 結果 obj.param(); // "func" obj.param; // ƒ () { return "func"; } こんなふう…
ボタンのJavaScriptを確認したい あるボタンに対して、JavaScriptのクリックイベントとかがバインドされているか確認したい。 自分が作ったプログラムではないとか、 自分が作ったプログラムが実際にちゃんと動いているかとか確認したい。 やり方 F12などで…
開眼！JavaScript読んでみました この本です。おすすめですよ！ 広告リンクなので、紹介してくれてありがとーって人はこちらから購入をお願いいたします(‘ω‘ )！ おすすめの人 1. JavaScriptを触って、とりあえずなにか作れるようになった人 2. JavaScriptで…
window.onload ページの読み込みが終わったら動くJavaScriptを書きたい。 window.onload = function() { console.log('aaa') } こんな感じに、表示後にconsole.logを吐き出したい。 ・・・あれ？なんで動かないんだろう？ コードを上書きしてるから 上記のコ…
Vueの勉強始めました Laravelの勉強していたんですが、私、フロントエンドは生のJavaScript、jQueryで書いてました・・・ TypeScriptやなにかフロントエンドのJSフレームワーク覚えたいな・・・ってことで、選ばれたのはVue.jsでした。 なんでVue? JavaScrip…
ABテストが上手く動かない？ Webサイトを2種類作ってABテストを実行するときに使われる、Google Optimize。 marketingplatform.google.com これでCSSを書くのは上手くいったけど、JavaScriptが動かない・・・ こういうときにはJavaScriptの基礎、2つ疑ってみ…
jQueryでajax使ったpost Laravelは、csrfのトークンをpost処理に入れないと、postをすることが出来ないです。 JavaScript(jQuery)使ってpostするときは、なんとかしてそのトークンを混ぜないといけない。 でも、それを毎回JavaScriptに書くのは面倒・・・ aj…
こんなとき使う ボタンをクリックしたら、表示する文字を切り替えたい。 表示する内容を切り替えたいとかは良くあります。 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>…
書き方いくつか 書き方いくつか用意しました。 お好みの方をどうぞ。 こんなコードがありました。 $('.ClickA').click(function () { //クラス名を変える $('.ClickA').addClass('ClickA').removeClass('ClickB'); //イベントをつけ直す $('.ClickB').unbind…
unbindの例 $('#btn').click(function () { return 'NG'}); $('#btn').unbind(); $('#btn').click(function () { return 'OK'}); なにをしてるの？ 一行目のclickで、#btnがクリックされた時に、'NG'を返す機能が付きました。 二行目で、#btnについている機…
こんな時使う <a href="/"></a> こんなふうにリンクを作るんじゃなく、 <button onClick="requestApi()"></button> のように、JSでどこかのページを呼び出したい。 入力がある時だけページを呼び出すとか、if文を使いたい時とか。 1.ページ遷移 location.href = '/home'; だけ。簡単だね！ 2.jQueryでapi呼び出し var …
こんなときがありました <form> <input></input> <button onClick="submit();"></button> </form> こんな感じの構成で、submitが想定通りに動かなかった。 私のときは、Laravelのバリデーションのエラーで、サーバーサイドを疑いそうになった。 ブラウザの問題なのに。 IEは二重送信をそのまま送る buttonタグのonClick()でsubm…
htmlで邪魔な要素がある <div class="gomi"> <p>ごみー</p> </div> <div class="ringo"> <p>りんご</p> </div> この時、gomiって書かれてるクラスの要素を消して、こうしたい <div class="ringo"> <p>りんご</p> </div> jquery使ってこうする $(".gomi").remove(); これで消せる
いつ使うの HTMLファイルの中でscriptタグでJSファイルを読み込むときで、 ・必ず読み込んでほしいとき ・HTMLを描画終わった後にJSファイルを読み込んでほしいとき 何書くの <script src="https://xxxxxx.jp/yyyyy.js" defer> scriptタグの最後にdeferを書く 何が起きてるの 通常:HTML読み込んでscriptタグ…
親、子はわかる <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(); これでさっきの…
何が起こった <div class="bg"> <div class="front"> </div> </div> bg { width: 100%; z-index: 10; } front { width: 80%; z-index: 11; } こんな時に、frontをクリックすると、frontもbgも両方クリックイベントが反応した。 falseだと、css含んだ全部の動作が止まる willow710kut.hatenablog.com 対策 $('…
注意 willow710kut.hatenablog.com 以下の方法だと、スクロールイベントなど、デフォルトの動作も止まるので、 それを防ぎたい場合は上の記事をどうぞ。 何が起こった <div class="bg"> <div class="front"> </div> </div> bg { width: 100%; z-index: 10; } front { width: 80%; z-index: 11; } こんな時に…
ガベージコレクション 結論：参照をされなくなったときに解放される。 クロージャを参考に willow710kut.hatenablog.com 前の記事から少し改変。 var func = function () { var value = 1; return function () { value++; console.log(value); // 2? }; }();…
参考 qiita.com クロージャの例 上の記事の関数を引用。 function func() { var value = 1; function innerFunc() { value++; } innerFunc(); console.log(value); // 2 } func(); 動作順番 func()が動作。 valueに1代入 innerFunc()が動く、valueがプラスさ…
