SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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】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/ 1、JS読み込み <script src=’https://c […]

テーブルのキーワードにマッチする行だけ表示する(2)

2017-06-28 問題 Excelのオートフィルタのような感じで、一覧表示している情報の中から、指定したキーワードにマッチする行だけを表示させたいです。 答え その1 では、ある特定の列のみ対象にしました。 今回は行内の全カラム対象にして […]

【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", […]

【JavaScript】配列に要素を追加する方法

2016-04-12 問題 配列に要素を追加するには? 答え 先頭に要素を追加 → unshift var arr = [ "a", "b", "c", "d", "e" ]; arr.unshift("x"); // arr → [ "x" […]