エンジニアのひよこ_level10

【毎日更新!】新卒2年目エンジニアブログです! プログラムだけじゃなく、マネジメントとかも書いていきたい!

JavaScript

【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(); これでさっきの…

z-indexで重ねたウィンドウの一番手前をスクロールだけしたい【143日目】

何が起こった <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 対策 $('…

z-indexで重ねたウィンドウをクリックすると、全部反応してしまう【131日目】

注意 willow710kut.hatenablog.com 以下の方法だと、スクロールイベントなど、デフォルトの動作も止まるので、 それを防ぎたい場合は上の記事をどうぞ。 何が起こった <div class="bg"> <div class="front"> </div> </div> bg { width: 100%; z-index: 10; } front { width: 80%; z-index: 11; } こんな時に…

JavaScriptでメモリが解放される時は?ガベージコレクション【75日目】

ガベージコレクション 結論:参照をされなくなったときに解放される。 クロージャを参考に willow710kut.hatenablog.com 前の記事から少し改変。 var func = function () { var value = 1; return function () { value++; console.log(value); // 2? }; }();…

JavaScriptの関数は、自分の外側の変数を参照することが出来る【72日目】

参考 qiita.com クロージャの例 上の記事の関数を引用。 function func() { var value = 1; function innerFunc() { value++; } innerFunc(); console.log(value); // 2 } func(); 動作順番 func()が動作。 valueに1代入 innerFunc()が動く、valueがプラスさ…