IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

JavaScript

【JS】Webサイト開発・HTMLコーディング・Webページ閲覧時のJavaScript便利機能まとめ

Webサイト開発時のHTMLコーディング、デザイン制作、閲覧時などで、ブラウザ上で素早く使用できる便利機能のJavaScriptコードをまとめました。 ブラウザのコンソールで使用して活用できるかと思います。 ・ローカル画像の貼り付け・表示確認 ・日本語を含むU…

【JavaScript】JSで日付の範囲チェックを行う 範囲内かどうか/大小比較のサンプルコードあります。

今回はJavaScriptでの日付の範囲チェックについて、紹介していきます。1つの日付が対象の日付の範囲内かどうか、2つの日付範囲が有効かどうかをサンプルコードを交えてご紹介します。Dateオブジェクトに変換して判定する方法です。

【JavaScript】JSで日付が有効かどうかチェックする 範囲/正規表現/フォーマットチェックのサンプルコードあり

JavaScriptで日付が有効かどうかチェックする方法を、Dateオブジェクトへの変換・正規表現で紹介しています。また、日付の範囲チェックについてのサンプルコードも紹介しています。日付の形式を判定する正規表現もいくつか紹介しています。

【JavaScript】JavaScriptでの日付の加算方法 サンプルコードあり

JavaScriptでの日付の加算方法(年月日時分秒)、月またぎ、年またぎをサンプルコードを交えて紹介しています。日付の加算・減算の計算方法はこれを見れば把握できるといった記事になったと思います。ぜひご覧ください。

【JS】window.matchMediaで画面横幅に対応した処理をする。resizeイベント、observerと比較 | JavaScriptでのレスポンシブデザイン

JavaScriptによるレスポンシブ対応の実現方法をresize/observer/matchMedia別にまとめました。サンプルコードもあるので参考になればと思います。主に画面幅/要素の横幅の変更時にスタイルを変更することを想定して作成しました。

【見本あり】JavaScriptでリストをドラッグスクロールする「jQueryプラグイン」 - オプションでエンドレススクロール,慣性スクロールも可能 | listmousedragscroll.js

JavaScript(js)でマウスドラッグスクロール(mouse drag scroll)が可能なリストを実現する【listmousedragscroll.js】スマートフォンのようになぞるようにしてスクロールができるjQueryPluginです。一行でマウスドラッグによるスクロールが可能なリストが実現…

node.jsプロジェクトでnode_modulesを除外してコピーの速度を大幅に速くさせる バッチファイル | Windows

node.jsプロジェクトを素早くコピーする方法です。node_modulesを除外してコピーするためにxcopyコマンドを使用します。当記事では、そのコマンドの説明、コピー(バックアップ)を素早くするための方法を紹介しています。

ReactでFontAwesomeのアイコンを使用する。~導入編~

FontAwesomeのアイコンもReactコンポーネントとして使用することができます。FontAwesomeとは、Webで最も人気があるアイコンセットで無料でできます。そんなFontAwesomeアイコンをReactコンポーネントとして表示させる方法を、サンプルコードとインストール…

【Reactで作る】CSS+Reactで実装するアコーディオンリスト | javascript | react | jsx

Facebookが開発したJavaScriptライブラリReact.jsを使用して「アコーディオンリスト」を作成しました。 また、React.js使用時に推奨されているJavaScriptの構文拡張であるJSXを使用しています。 これは、UIがどのような見た目かJavaScript自体に記述するため…

【Reactで作る】iOSのスイッチのようなトグルボタン | javascript | react | jsx

Facebookが開発したJavaScriptライブラリReact.jsを使用して「トグルボタン」を作成しました。 また、React.js使用時に推奨されているJavaScriptの構文拡張であるJSXを使用しています。 これは、UIがどのような見た目かJavaScript自体に記述するためのもので…

【JS】ドラッグアンドドロップでHTML要素の位置を移動させる | jQuery | JavaScript ... jQuery拡張(プラグイン)

ドラッグでHTML要素の位置を移動させるmousemove(touchmove)イベントを使って、HTML要素のドラッグによる位置の移動を実装します。※ブラウザによっては正常に動作しない可能性があります。移動可能にする...移動不可能にする(クラスの切り替え)...jQuery 拡…

【javascript】要素の範囲外をクリックした時の処理を実装する | .closest()

JavaScriptで特定要素の領域外をクリックしたときのイベント処理です。 特定要素外のクリックイベント※当処理では、jQueryを使用しています。closestメソッドを使用して、特定要素外のクリックを判断します。 メニューバーをイメージしたデモです。対象要素…

ワンクリックでテキストをコピーする方法-PC・スマホ対応【JavaScript】追記:iOSでズーム,拡大させない

JavaScript - コピー方法 DEMO 入力欄 入力欄以外 コード 例 更新情報 投稿日 2019/10/03 PC・スマホでJavaScriptを使用してクリップボードにHTMLのテキストをコピーする方法です。 当記事のコピー処理が動作したブラウザ Chrome,Microsoft Edge,Firefox,Saf…

【JavaScript】ページ上部に自動スクロールするボタンを実装する | HTML JavaScript スクロールボタン

今回は、html,JavaScript(jQuery)でページ上部に自動スクロールするボタンを実装するまでの記事になります。自動スクロールボタン...ページ上部にスクロールする処理...水平方向のスクロール量の保持...スクロールをゆっくりさせる ...スクロールの速度を徐…

【JS】指定数値範囲内の乱数(整数)の取得 | JavaScript | 乱数(random)

JavaScriptで指定数値範囲内の乱数(整数)を取得する 取得したい数の範囲を指定して乱数を取得する関数 function getRandomInt(min, max) { return Math.floor(Math.random() * (max + 1 - min) + min);} 使用例 getRandomInt(最小値,最大値) // Mathオブジェ…

【JavaScript】スクロールをマウスドラッグで可能にする | マウスドラッグスクロール | JS | jQueryプラグイン(拡張)

JavaScript(jQuery)でマウスドラッグによるスクロールを可能にする。 マウスドラッグスクロール DEMO コード jQuery拡張版 使用方法 jQuery拡張版 使用例 補足 マウスドラッグスクロール ※環境によっては正常に動作しない可能性があります。 当処理はjQuery…

【JS】指定時間分処理を待つ sleep処理を実装する - ループ処理で待ち時間(wait)を発生させる

JavaScriptで、 loop処理(for文やwhile文)を実行させることで、他言語にあるsleep処理のような指定時間分処理を止める動作を実装します。1秒間のsleep処理(処理を止める)を実行させる。 var sleepTime=1000; // msecで記述 var now=Date.now(); // 開始時間 …

【JS】要素中央の位置(座標)を取得する | JavaScript | jQuery

jQueryでHTML要素の中央位置(座標)を取得します。var left = $(element).offset().left; var top = $(element).offset().top; var width = $(element).width(); var height = $(element).height(); offsetCenterLeft = left+(width/2); offsetCenterTop = to…

JavaScriptに静的変数はない?staticはクラス内静的メソッドを定義するキーワードである 【JavaScript】

結論 JavaScriptに静的変数を定義するキーワードはない。staticはクラス内メソッドを静的メソッドとして定義するキーワードである。 しかし、JavaScriptで静的変数(独自)を実装する方法はある模様。 参考文献 developer.mozilla.org developer.mozilla.org …

正規表現 | HTMLタグのみを取得する | JavaScript

正規表現によるHTMLタグのみの抽出 属性の取得を行わないHTMLタグのみを抽出する正規表現です。 str.match(/<([\w]*?>|\/[\w]*?>|[\w]* |\/[\w]* )/g) <ol itemscope itemtype="https://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> </li></ol>

複数の文字列をそれぞれ別の文字列に置換する方法 -正規表現【JavaScript】

複数の文字列を同一の文字列に置換する 複数の文字列をそれぞれ別の文字列に置換する 複数の文字列を同一の文字列に置換する 例 「apple,banana」を「cucumber」に置換する。 var str="apple2 banana3 orange8 cucumber0" str=str.replace(/(apple)|(banana)…

jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】| 【JavaScript】

jQueryとはJavaScriptコードをより容易に記述するためのもの。 jQuery使用方法読み込み外部から読み込む方法(CDN)jQuery:Google:Microsoft:「jQuery(公式)」「Google」「Microsoft」が公開しているjQueryファイルを読み込んでjQueryを使用します。三つの…

navigatorプロパティ一覧 判定処理の使用例あり | 【JavaScript】【navigator】

navigator プロパティ一覧(2019/6/20時点の標準のみ) 実際の値 ブラウザ情報 デバイス情報 使用例 navigator.userAgent navigator.onLine navigator navigatorオブジェクトは、ブラウザの情報やデバイスの情報を取得することができます。 ・ブラウザ情報 ブ…

はてなブログのカテゴリーとパンくずリストを階層化表示にする -SEOに効果あり- #階層カテゴリーパンくずリストの表示

初期Scriptファイルのため、不備などがありあまり参考になりません。 新しく、カテゴリー・パンくずリストを階層化表示にする機能を作成しました。こちらの方が扱いやすく、不具合が起こる可能性も低いと思われます。 www.it-the-best.com ほとんどの機能変…

はてなブログのカテゴリーとパンくずリストを階層化表示にする -SEOに効果あり- #カテゴリーの表示を変える

初期Scriptファイルのため、不備などがありあまり参考になりません。 新しく、カテゴリー・パンくずリストを階層化表示にする機能を作成しました。こちらの方が扱いやすく、不具合が起こる可能性も低いと思われます。 www.it-the-best.com ほとんどの機能変…

【JavaScript】超簡単!スマホかPCの判断のしかた | navigator.userAgent

navigator.userAgent 使用方法 効果 navigator.userAgent navigatorオブジェクトのuserAgentプロパティを使ってデバイスの判断をします。 userAgent userAgentでは、ブラウザのユーザエージェント情報を取得することができます。 ユーザエージェント情報には…

【JavaScript】エラーを回避するorエラーを条件分岐に使う「テクニック」 | 【try catch】

try catch文 使用方法 catch finally 効果 try catch文 try{}catch(error){} 使用方法 tryのカッコ内にテストしたい(エラーになる可能性がある)文を入れ、catchのカッコ内にはtryに入れた文がエラーとなったときに処理させる文を入れます。 try:通常処理 ca…

【JavaScript】【String】文字列を指定文字数分の文字列にする | String.substr()

Stringオブジェクトのsubstr()メソッドを使った、文字列の文字数操作です。 使用方法 ストリング変数.substr(開始位置,抜き出す文字数) ※引数が一つだけの場合は、それを開始位置と判断しそれ以降の文字列を抜き出します。 <script> var str="123456789" var str2=st…

「JavaScript」URLから画面別に処理を実装させる

URLを取得する ・URLすべてを取得 let url=location.href console.log(url)//"https://www.it-the-best.com/" ・ドメイン(FQDN)後の文字列(パス名)を取得 let path=location.pathname console.log(path)//"/" 画面を判断する ・パス名で判断する場合 当サイ…

「JavaScript」locationで簡単にURLの情報を取得する

locatoin locationオブジェクトを使用すれば簡単にURLの情報を取得できます。 プロパティ一覧 location.href location.protocol location.host location.hostname location.port location.pathname location.search location.hash location.origin 当画面のU…