本当は深いaddEventListener - Qiita
こんにちは。2年目に突入した新卒フロントエンドエンジニアです。 使用率は高い割に、 「なんかボタン押す時とか画面のリサイズ・ロードするときに使うやつでしょー」 くらいの知識で使っていた addEventListener() メソッドについて向き合うことにしました。 基本 const button = document.querySelector('.button'); button.addEventListener('click', () => { /* ボタンをクリックした時の処理 */ }); 基本的な addEventListener() の使い方です。window, document, bodyだけでなくあらゆる要素にイベント処理を登録することができます。死ぬほどよく見ますね。 登録したイベント情報は開発ツールで確認できます。写真はChromeのEvent Listenersタブで
「e」で10の累乗を簡略化【2e4って何？100万はどう書く？】【JavaScript】 - ウェブつく
この記事では、10の累乗を簡略化した「e」の使い方を紹介します。 この記事を読めば、eを使った数値の書き方ができるようになります。 eは10の累乗を表す 下記のように表します。 1e1 = 1 × 10の1乗 => 10 1e2 = 1 × 10の2乗 => 100 1e3 = 1 × 10の3乗 => 1000 2e1 = 2 × 10の1乗 => 20 2e2 = 2 × 10の2乗 => 200 2e3 = 2 × 10の3乗 => 2000
【JavaScript入門】配列要素を削除する方法のすべて！ | 侍エンジニアブログ
こんにちは、ライターのマサトです！ 今回は、配列要素を削除するための方法について学習をしていきましょう。よく似たメソッドがいくつか出てくるので、それぞれの特性や使い分けについてしっかり学べるように構成しました。 この記事では、 配列要素の「削除」とは？ 「shift()」による削除 「pop」による削除 配列の指定要素を削除 「delete」による削除 「filter()」による削除 などの基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、配列要素の削除方法をしっかり学習して自分のスキルアップを目指しましょう！ JavaScript初心者におすすめの 無料プログラミングサイト3選
JSアルゴリズム入門1. アナグラム｜erukiti
cyber-dojo というオンラインペアプログラミング・TDDをするサイトがあります。このサイトでは様々な言語とテストフレームワークを使い、お題を解きます。 もともとはオンラインモブプロをお試しでやったときに、題材として面白かったので、ここにまとめなおします。 アナグラム Write a program to generate all potential anagrams of an input string. For example, the potential anagrams of "biro" are biro bior brio broi boir bori ibro ibor irbo irob iobr iorb rbio rboi ribo riob roib robi obir obri oibr oirb orbi orib与えられた文字列の順番を入れ替えたいわゆるア
【JavaScript】条件式で0とnull/undefinedの判定を分ける - Qiita
JavaScriptでは0もnull、undefinedもすべて同じ判定になるけど分ける方法ないの？ タイトルの通り、こんな場合どうするか。if (!value)と書いてしまうと、0、null、undefinedの全部がtrueとして判定されてしまう。 null、undefinedだけtrue判定にしたいケースがあったので調べてみた。 [JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定についてに大体書いてあるが、このトピックの部分だけまとめてみた。 TL;DR if (value == null)を使うのが一番スマートな書き方のようです。 1. if (value === undefined || value === null) 愚直に値をundefinedとnullと比較する方法。 誰が見ても分かりやすいが、どこか野
innerHTML より insertAdjacentHTML を使う - Qiita
はじめに とある要素の中をいじりたいという時 innerHTML で操作することもあるかもしれません。 しかし、実はこれはあまりよろしくない。 innerHTML は既存の要素を破壊（？）する innerHTML を書き換えるということはつまり、要素の中身をすべて新しいものに書き換えるということです。 既存の要素は、新たな要素として扱われてしまいます。 サンプル 例えば、以下のようなHTMLとJavaScriptコードがあったとします。
ブラウザ上で一定時間操作がなかったら〇〇〇するJavaScript - Qiita
Webシステムの構築をしている中で、特定の権限をもった人間だけが閲覧できる画面を作ることもあります。 閲覧者がその画面を開いたまま離籍をしてしまう際、環境によっては権限のない人間がその画面をのぞき見できる状況が生まれます。 環境整備や従業員教育の話は勝手にやってもらうとして、 エンジニアとしてお手軽に対策できるスクリプトを考えてみました。 HTML JavaScriptファイルを呼び出すだけです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>sample</title> <script src="sample.js"></script> </head> <body> これは機密文章です </body> </html> ブラウザ上で一定時間操作がなかったら強制ログアウトするJavaScript 6
Leaflet 中心座標とズーム値を取得 [あちあち情報局]
地図のズーム変更や位置を移動すると地図上部の緯度・経度・倍率の表示が変化します。input要素とspan要素の2方式で出力しています。 緯度 経度 倍率 コメント行のある部分がLeaflet - OpenStreetMap表示から追加された部分です。 Html部分 <!-- 緯度・経度・倍率をページ上に表示する要素 --> <p> 緯度<input type="text" id="lat_input" /> <span id="lat_span"></span><br> 経度<input type="text" id="lng_input" /> <span id="lng_span"></span><br> 倍率<input type="text" id="zoom_input" /> <span id="zoom_span"></span><br> </p> <div id="mapi
小数計算の誤差 0.1 + 0.2 が 0.30000000000000004 になる理由
です。（10進数の「整数」はすべて2進数に正しく変換できます） JavaScript に限らずコンピューターで計算をする場合は、10進数から2進数に変換してから計算して、計算結果をまた2進数から10進数に戻して表示してくれています。 例えば 2 + 3 は、コンピューターでは次のように計算されています。（10進数、2進数の変換方法はこのあと説明しますので、なんとなくそういうものだとご理解ください） コンピューターも10進数で計算すれば良さそうですが、コンピューターは「ON（1）」と「OFF（0）」を表すスイッチのかたまりのような物で作られているため、「1」と「0」のみの2進数で計算したほうが都合がいいのです。 10進数の小数が2進数に正しく変換できない理由 なぜ10進数の「小数」が2進数に正しく変換できないのでしょうか？ それではまず10進数から2進数への変換方法を確認してみましょう。 1
Slickでclickイベントが動作しなかったりスライドが移動できないのは、全部こいつのせいでした
Cherry Pie Web > ブログ > 技術記事 > Slickでclickイベントが動作しなかったりスライドが移動できないのは、全部こいつのせいでした Flashムービーを置き換えるだけの簡単な仕事のはずが・・・ Flashムービー（swf）で作られていたスライドショーを今の環境でも動作するようにしてほしいという案件があって、単純なスライドショーだったので、お手軽に使えるjQueryのスライダープラグイン「Slick」で置き換えました。 （WordPressのプラグインではありません） slick – the last carousel you’ll ever need https://kenwheeler.github.io/slick/ 元のスライドショーは「Skip」ボタンをクリックすると指定のスライドまでスキップできるようになっていました。 そこで、スライドショーでclic
【jQuery】slickの使い方とよく使うサンプル集 | AndHA Blog
【jQuery】slickの使い方とよく使うサンプル集 公開日 : 2022.07.04 最終更新日 : 2023.11.07 コーディング スライダーのプラグインは数多くありますが、その中でもよく使われる「slick」について、使い方とよく使う実装方法についてご紹介します。 今回紹介するサンプルを組み合わせることで様々なカスタマイズにも対応できるかと思いますので、是非参考にしてみてください！ slickの導入方法slickを使うためには、以下2つの方法があります。 ファイルをダウンロードして読み込む方法CDNを使って読み込む方法なお、slickを利用するためはjQuery本体の読み込みも必要になるので、忘れずに！ slickファイルをダウンロードして使う場合公式サイトにアクセスし「get it now」をクリックします。 「Download Now」をクリックすると、skickのファイル
サイトが重いときに！画像をふわっと遅延表示させる「lazysizes.js」【レスポンシブ対応】【PageSpeed Insights改善】 | 東京のホームページ制作 / WEB制作会社 BRISK
TOPブログサイトが重いときに！画像をふわっと遅延表示させる「lazysizes.js」【レスポンシブ対応】【PageSpeed Insights改善】 サイトが重いときに！画像をふわっと遅延表示させる「lazysizes.js」【レスポンシブ対応】【PageSpeed Insights改善】 更新日：2024/05/24 Webサイトの表示速度を上げられるよう、スクロールをしたタイミングで画像を読み込む「画像の遅延表示」ができるJavaScriptはいくつかあると思います。私も試したことはありますが、画像がパッと出てきて画面がガタついたり、jQueryをいじらないとカスタムしにくかったりと、思った通りの動きをせず悩んでいました。 そんななか見つけた「lazysizes.js」は、「JavaScriptの読み込み」と「クラスの追加」だけで遅延表示ができ、簡単なcssの追記でフェードインでの
【ムービー】ページ表示時にモーダルウィンドウでYoutubeの動画を自動再生
Youtube IFrame Player APIを使ってhtmlに埋め込んだ動画を、ページ表示時にモーダルウィンドウで表示します。モーダルウィンドウはjQueryプラグインのcolorboxを使用します。 サンプルデモはこちら htmlのコードは下記になります。colorbox起動用のaタグで動画を表示するdivタグを囲います。動画を表示するdivタグにはidを付与し、aタグのhref属性でdivタグのidを指定します。 <a href="#movie01" class="movie-open"> <div id="movie01" class="movie-content-wrap"> <div id="movie-content01"></div> </div> </a> 続いてCSSのコードです。 インラインのhtmlをcolorboxで表示する場合、インラインhtmlの親要素を
【ムービー】Youtube IFrame Player APIで複数の動画を自動再生
javascriptのyoutube埋め込み時の処理でplayerVarsに自動再生のパラメータを設定しても、ChromeとFirefoxは非対応のため動作しません。試しにplayerVarsにautoplay: 1を指定しても自動再生されません。そこでonReadyイベントを起動してonPlayerReady関数を実行します。関数では音声をミュートにしてから動画を再生しています。これでChromeとFirefoxでも自動再生されます。 //IFrame Player API の読み込み var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[
YouTubeをポップアップ表示してくれる、おすすめプラグイン 【パラメーターの調整も可能】
今回はテキストやサムネイル画像をクリックしたときに、YouTube動画をポップアップ表示してくれるプラグインを紹介します。まずはデモサイトを作成したので表示を確認してみてください。 デモサイト 実装内容は以下。 テキストや自作のサムネイルからYouTubeをポップアップさせる自動再生や関連動画など、パラメーターを調整できるjQueryを使用するスマホも対応させる 説明する環境は以下。 macOS Catalina v10.15.5Visual Studio Code v1.46.1
modal-video.js - 動画をモーダルウィンドウで表示する jQueryプラグインをリリースしました | JavaScript | ブログ | 名古屋のCMS構築・Web制作会社 アップルップル
modal-video.js は、弊社が2017年2月にリリースしたビデオコンテンツ再生用のJavaScriptライブラリです。このライブラリは、コンテンツ内に設置された YouTube、Vimeo、mp4 などを モーダルウィンドウ を開き、より大きく動画を再生できるようにするために作られました。 誰でも自由に利用いただけるように MIT license で GitHub で公開しています。
datetimepicker オプションまとめ - Qiita
$.datetimepicker.setLocale('ja') $ -> $('.js-datetimepicker').datetimepicker( format: 'Y-m-d H:i' #入力して際のフォーマットが"2020-04-20 00:00"みたいになる )
脱jQueryに向けた第一歩 | フロントエンドBlog | ミツエーリンクス
この記事はミツエーリンクスアドベントカレンダー2019の2日目の記事です。 脱jQueryするべきなのか jQueryは、JavaScriptをより簡易的に記述することができ、各ブラウザへの互換性を持つため非常に便利なライブラリです。しかし、リソース読み込みによるパフォーマンスの低下も懸念されています。 表示パフォーマンスに目が向けられている昨今、jQueryを利用しないことも1つの選択肢になるのではないでしょうか。 また、ブラウザも進化しておりブラウザごとにJavaScriptの動作が変わることもほとんどなくなりました。 もしかしたら、もともとクロスブラウザ対応として生まれた側面が強いjQueryを利用しないタイミングが来ているのかもしれません。 jQueryを無理にやめようとしない とは言え、いままでjQueryを使って書いてきたコードをすべてネイティブに書き換えるには、覚えること・考
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript の parseInt で小数を整数に変換しようとしてはまる
https://tr.you84815.space/slick/settings/waitForAnimate.html