読者です 読者をやめる 読者になる 読者になる

frontendmemo

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

jQueryのCDNを読み込みたい バージョンごとのurl一覧

jQueryは、JavaScriptを比較的楽に書くことができるライブラリですが、こちらの読み込み先をまとめたいと思います。特段理由がなければ、最新のバージョンを使うことをお勧めします。理由としては、より最適化され読み込みスピードが速くなっているからです…

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のようなドロワーメニューを作る

feedly.comfeedlyとても便利ですよね。今回はfeedlyで使用されている、マウスオーバーしたらメニューが表示されるようなドロワ―メニューを作ってみました。See the Pen KrqPzd 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にするなどです。===…