Category / JavaScript
【JavaScript】クリップボードにコピー
2018-04-27 問題 「クリックしたら、クリップボードにコピーする」を作りたいです。 答え 例です。 input要素はわりと簡単。 <input type="text" id="copy-target […]
SyntaxHighlighterの導入方法
2018-03-27 問題 SyntaxHighlighter ってやたらとファイルが多いですが、どれをどう使うとよいのですか。 答え 以下を読み込めば使える。 CSSのCore CSSのデフォルトテーマ（もしくは任意のテーマ） javaSc […]
【JavaScript】文字列の末尾から指定文字数削除する
2018-03-22 問題 JavaScriptである文字列の末尾1文字を削った文字列が吉井です。 答え "abcdefg".slice(0, -1); // → "abcdef" String.slice() で文字列の指定開始位置から指定 […]
【JavaScript】改行を含めてマッチする正規表現
2018-03-14 問題 ※ES2018 以前の話 JavaScriptの正規表現で、改行を含めてマッチさせたいんですけど、 .（ドット）を改行にマッチさせるすべはないですか？ 例）HTMLでdivタグに囲まれた箇所 /<div>.* […]
【JavaScript】jQueryの.fadeIn()をCSSで実装する
2017-12-28 問題 アニメーションはCSSにお任せしたい。 .fadeIn()とかをCSSでできませんか。 答え アニメーションはCSSにお任せすると、JavaScript側ではCSSを変更したり、classの追加、削除で済むようにな […]
【JavaScript】上にスクロールするとにゅっと出てくるメニューを作る
2017-12-27 問題 長い画面で、メニューや検索フォームなどが、近くにいて欲しいんだけど、いつも見えると邪魔。 下へ下へスクロールしてみているときは隠れていて、 上にスクロールすると出てくるメニューを作りたい。 答え stickyな動き […]
【JavaScript】並んだチェックボックスを範囲で一括チェック
2017-12-20 問題 検索結果などでチェックボックスが並んでいるような場面で、 全チェックではなくて、 「範囲でここからここまでまとめてチェック」をしたい。 Gmailの画面などでそんな操作ができますよね。 答え Gmailと同じ方式で […]
!function(a){ /* */ }(arg); と (function(a){ /* */ })(arg); の違いは？
2017-11-30 問題 即座に関数実行しているのだと思いますが、以下の2種類見かけます。 何か違うのですか？ (function(a){ // })(arg); !function(a){ // }(arg); 答え 大きく […]
【JavaScript】セレクトボックスをreadonlyにする
2017-11-28 問題 select要素でreadonlyしたいのですが、無理ですか。 disabled じゃなくて、readonlyです。 使用可能だけど、変更不可にしたいです。 答え readonuly属性では無理です。 考え方を変え […]
【jQuery】Shift+クリックでチェックボックスを一括選択
2017-11-17 問題 「始点クリック → Shift+終点クリック」でチェックボックスを範囲でチェックしたり、チェックを外したりしたい。 答え こんな感じでどうでしょう。 <ul> <li><input t […]
【vue.js】bodyをelに指定するべきではない
2017-11-11 問題 vueで、elにdiv要素を指定したりbody要素を指定したりできるようですが、どちらが正解？ new Vue({ el: 'body' }); それとも new Vue({ el: '#app' }); 答え v […]
JavaScriptでOCR
2017-07-01 問題 画像からテキストを判別したい！ 答え これはどうでしょうか。 http://tesseract.projectnaptha.com/ １、JS読み込み <script src=’https://c […]
テーブルのキーワードにマッチする行だけ表示する（2）
2017-06-28 問題 Excelのオートフィルタのような感じで、一覧表示している情報の中から、指定したキーワードにマッチする行だけを表示させたいです。 答え その１ では、ある特定の列のみ対象にしました。 今回は行内の全カラム対象にして […]
【JavaScript】 phpのdate関数風の日付整形処理
2017-06-10 問題 php の date('Y年m月d日', タイムスタンプ); のような感じで、 JavaScriptで日付の整形処理ありませんか。 答え 世間で需要がありそうなコードは、たいてい誰かが作っていて、gitHubにある […]
【Vue.js】 v-if と v-show の違い
2017-02-13 問題 v-if と v-show って、見た目に表示/非表示される以外にどこが違うの？？ 答え ● v-show は、要素の表示/非表示する。 display:block/none してもらう感じ。 ● v-if は、要 […]
【Vue.js】 BootstrapのModalをVueのコンポーネントにしてみた例
2017-02-12 問題 vue.jsでbootstrapのmodalっぽいコンポーネントを作りたい。 答え きちんとやると、BootstrapのJavaScriptがやっていることを組み込んだ方がよいと思うけど、 vue-strap の例 […]
【Vue.js】transitionを使ってBootstrapのModalをvue.jsで表示する
2017-02-11 問題 CSSはbootstrap.cssを利用して、動きはvue.jsで、BootstrapのModalを表示したい。 答え bootstrapのモーダルは、.fadeに.inを追加して.fade.inにすると、CSSの […]
【JavaScript】ブラウザ画面にドラッグ＆ドロップされた画像をimg要素で表示する
2016-04-20 問題 エクスプローラーなどからドラッグ＆ドロップした画像をJavaScriptで取得したいです。 答え HTML <div id="target" style="border: sol […]
【JavaScript】 input[type=”file”]で選択した画像をimg要素で表示する
2016-04-19 問題 <input type=”file”> で選択された画像をJavaScriptで取得したいです。 答え HTML <input type="file" id="myI […]
【JavaScript】配列から要素を削除する方法
2016-04-13 問題 配列から要素を削除するには？ 答え それぞれ、配列から要素を削除すると同時に、戻り値で削除した要素も取得できます。 先頭の要素を削除 → shift var arr = [ "a", "b", "c", "d", […]