frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

javascript

【JavaScript】クロージャを使って10回ボタンを押したらアラートを出す

下記を参考にクロージャを使って10回ボタンを押したらアラートを出してみたいと思います。[JavaScript] 猿でもわかるクロージャ超入門 5 クロージャを作る · DQNEO起業日記 クロージャの条件 外の関数のスコープ内で変数を定義し、 外の関数の中に関数(=関…

【JavaScript】モジュールパターンを学ぶ~スムーススクロール機能を実装~

モジュールパターンというものを最近知りました。プラグインでよく使われてる手法なのかなと思います。モジュールパターンの参考記事 【JavaScript】モジュールパターンについて知る - Qiita 【JavaScript】デザインパターンを知ってみる。モジュール・パタ…

要素の増減でページ遷移のアンカーリンクの位置がずれる

アンカーリンクとはリンク先urlを例えば../index.html#anchorとしておくとクリックした時、id="anchor"とidを振った要素にスクロール位置が合うようになります。 またそれは同一ページでも別ページでもいけるんですね。 <a href="../index.html#anchor">アンカーリンク</a> <h2 id="anchor">見出し</h2> 上記のように…

【JavaScript】配列のアルファベットや数値を昇順・降順にソートする 

アルファベット順にソートする 数値順にソートする 2ケタ以上の場合 降順 reverseメソッド アルファベット順にソートする アルファベット順にソートするのは簡単です。 配列にsortメソッドを使用します。 var x = ['tokyo', 'osaka', 'sendai', 'fukuoka']; …

【JavaScript】配列に要素を追加する push unshift splice

push、unshift、spliceは配列に要素を追加するメソッドです。 push pushは配列の最後尾に追加します。 配列.push('値'); unshift unshiftは配列の先頭に追加します。 配列.unshift('値'); splice spliceは配列内の任意の位置に要素を追加したり、任意の位置…

prepend、appendなどJQueryで要素を追加するメソッドまとめ

JQueryで要素を追加する方法は沢山あります。 prepend、append、after、beforeは前後に追加する方法です。 .part1と.part2は結果は同じです。.part1は$(A).メソッド(B)でAにBを入れる。 .part2は$(A).メソッド(B)でBにAを入れる。という風にAとBが入れ替わる…

2017年カレンダーをJavascriptで生成

卓上カレンダーを買うお金がないのでカレンダーをJsで作ってみました。 こちらを参考に作りました。 イヌでもわかるJavaScript講座 - カレンダー 感謝です。ソースはカレンダーの下に載せています。 #calendar:after { clear: both; display: block; content…

配列から空文字を削除する方法など

falseと判定されるvalueまとめ 文字列や数値を真偽値に変換する方法 Boolean !!エクスクラメーションマーク2つ 配列から空文字を削除する falseと判定されるvalueまとめ null 0 undefind ''(空文字) NaN false 文字列や数値を真偽値に変換する方法 Boolea…

JavaScript urlのファイル名のみ取得する方法(拡張子あり/なし)

urlのファイル名のみ取得したい場合があります。たとえば http://○○○.com/○○○/index.htmlのindexを抽出したいときですね。 以下のようにします。 var l = window.location.pathname.split('/'); l = l[l.length-1]; l = l.split('.')[0]; console.log(l); //…

JavaScript 問題③

問題 1~100までの数字の中で、3の倍数と3が含まれている数字をconsoleで表示させてください。 答え See the Pen ygaygv by funclur (@funclur) on CodePen. vvar result = 0; var count = 0; var array = []; var re = /3/; for(var i = 1;i <= 100;i++){ i…

オブジェクト指向 JavaScriptの原則 プリミティブ型と参照型、関数、コンストラクタ、プロトタイプ

オブジェクト指向 JavaScriptの原則を読んで学んだことを書きます。 全てを網羅してないことと本書と例文に多少違いがありますことご了承ください。オブジェクト指向JavaScriptの原則作者: Nicholas C. Zakas,和田祐一郎出版社/メーカー: オライリージャパン…

JavaScript 問題②

問題 文字列hatenabloghatanosiinaaに含まれてるaの数をconsole.logで出力してください。 答え See the Pen ggOMbo by funclur (@funclur) on CodePen. var str = 'hatenabloghatanosiinaa'; var count = 0; for(var i = 0; str.length>i; i++){ var strPart…

JavaScript 問題①

問題:下記のようにconsole.logで出力してください。 記事の投稿数が96になりました。 記事の投稿数が97になりました。 記事の投稿数が98になりました。 記事の投稿数が99になりました。 記事の投稿数が記念すべき100になりました。 1つ目 (function(){ var …

JSをプラグイン化 コンストラクタとインスタンス トグル機能を例に解説

プラグイン作成する際、$.fn.hogehogeでオプションを追加していきますが、より機能ごとに関数を作っていく場合コンストラクタとインストラクタを絡めると効率的に組めていいと思います。例えば、以下簡単な例ですがトグルを初期設定とトグル機能に分けていま…

【JS不要】cssのみでtelリンクを無効にする方法

電話番号をかけさせたいときのhtmlは以下のようにします。 <p class="tel"><a href="tel:0312345678">03-1234-5678</a></p> しかしこれだと、PCの時でもリンクしてしまい、レスポンシブデザインで制作している時は、スマホのみに対応させたいですよね。以下のようにすれば、cssのみでPC→電話リンク無効、スマ…

jquery 最も簡単な自作タブ切り替え機能

タブ切り替え機能をわかりやすく解説したいと思います。cssは解説には不要なのでなしにしています。 デモ See the Pen PGRjpv by funclur (@funclur) on CodePen. 解説 html <ul class="js-tab-title"> <li class="active"><a href="#anc-tab01">タブA</a></li> <li><a href="#anc-tab02">タブB</a></li> <li><a href="#anc-tab03">タブC</a></li> <li><a href="#anc-tab04">タブD</a>…</li></ul>

マウスオーバーで開閉!シンプルなドロワーメニューのつ作り方

feedly.comfeedlyとても便利ですよね。今回はfeedlyで使用されている、マウスオーバーしたらメニューが表示されるようなドロワ―メニューを作ってみました。See the Pen xLLeYz by funclur (@funclur) on CodePen. <div class="drower-wrapper"> <div class="drower-open"> <ul> <li>開いた</li> <li><button>閉じる</button></li> </ul> </div> <div class="drower-close"> <ul> <li>開く</li> </ul></div></div>

三項演算子の基本3つ

三項演算子とは? 三項演算子は、略して書くことができる書き方で、そのため可読性が低いと倦厭されることもあります。 しかし、自分の経験上だいたいできる人のscriptやプラグインのscriptを読むとかっこよく三項演算子を使っています。 つまり、三項演算子…

比較演算子

jsでは避けて通れない比較演算子。こちらの書き方とそれぞれについて忘れないよう書き留めておきます。 等しいは=== ここで似たような==は絶対に使わないこと。===と==は微妙な違いがあります。'1'と1、つまり数値と文字列の1を==はtrueにするなどです。===…