JavaScriptで電話番号のバリデーション＆自動フォーマット - Qiita
Google様のライブラリ使いましょう 電話番号のバリデーションを行う場合、 ググると（JSの場合は特に）正規表現で一生懸命頑張ってる記事ばかりヒットしますが、 天下のGoogle様がlibphonenumberなるライブラリを提供してくださっておいでです。 https://github.com/googlei18n/libphonenumber 自分で正規表現書いても辛いだけなので、大人しくこれ使いましょう。 どんだけすごいかはこのスライドが参考になります。 電話番号を扱う技術 by Shota Iguchi Closure Toolsが分からん・・・ 大人しくこれ使いましょうと言ったけど、実はとてもとっつきにくいです。 JS版はClosure Toolsを使ってコンパイルしなければ動かないから。 https://github.com/googlei18n/libphonenumber/
Navigator: share() method - Web APIs | MDN
Web Share APINavigatorInstance propertiesactiveVRDisplays Non-standard Deprecated appCodeName Deprecated appName Deprecated appVersion Deprecated bluetooth Experimental buildID Non-standard clipboardconnectioncontacts Experimental cookieEnabledcredentialsdeviceMemorydoNotTrack Non-standard Deprecated geolocationglobalPrivacyControl Experimental Non-standard gpu Experimental hardwareConcurrencyhid
JavaScriptがページの読み込み時間を遅くする理由トップ10 | ゆっくりと…
CSS Sprites 化や画像サイズの最適化、Data URI 化、CSS/JavaScript ファイルの圧縮・結合・読み込み順番の整理やキャッシュ制御など、本サイトでは主に HTTP リクエストの数、データ量およびそれらの順番に関して色々なテクニックを試してきましたが、さらに深く掘り下げるには JavaScript の実行がページの読み込み時間に与える影響を知っておく必要があると思います。 「ウェッブサイトの表示速度を測定するフリーツール集」 でも紹介しましたが、dynaTrace AJAX Edition という優れたツールをフリーで公開している dynaTrace software のブログでこの問題を扱った記事がありましたので共有します。JavaScript 高速化 Tips は （例えば 「JavaScriptを高速化する6つのテクニック」 など） 多々あるかと思いますが、ペ
JavaScriptのクロージャはメモリーリークをちゃんと理解して使おう - Qiita
はじめに 前にブログで書いた記事なのですが、せっかくなのでQiitaにも投稿します。 脱初級者の壁として君臨しているクロージャ。クロージャの使い方はわかったけど、いろんな記事を見るとクロージャは問題点もあるみたい。それに、そもそもクロージャの使い所がいまいちわかんないと思ってクロージャに再度立ち向かおうと思った次第です。同じような悩みを抱えているデザイナーさん、コーダーさん、フロントエンドエンジニアさんの参考になれば嬉しいです。 クロージャとは とりあえずおさらい & 補足をします。 よく見かけるクロージャの見本がこちら。 function closure(initVal){ var count = initVal; var innerFunc = function() { return ++count; } return innerFunc; } var myClosure = clos
import - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since May 2018. Learn moreSee full compatibilityReport feedback 静的な import 宣言は、他のモジュールによってエクスポートされた読み込み専用のライブバインディングをインポートするために使用します。インポートしたバインディングは、バインディングをエクスポートしたモジュールによって更新される一方、インポートしているモジュールによって再代入することができないために、「ライブバインディング」と呼ばれています。 ソースファイルの中で import 宣言を使用するためには、ランタイムがそのファイ
タッチデバイスでもないのに ontouchstart でタッチデバイスの振りをするノートがある
タッチデバイスでもないのに ontouchstart でタッチデバイスの振りをするノートがある 別ブログ「そんなには褒めないよ。映画評」のトップページのデザインで、マウスオーバーのイベントをタッチデバイスの場合にどうするかを下記のページで記事にしましたが、"ontouchstart" in window をみるだけでは判定できないデバイスがあることがわかりました。 はてなブログ／touch, mouse を振り分け、hover イベントを統一する ontouchstart ではタッチデバイスを判定できないデバイスがある orientation での判定を追加してみる ontouchstart ではタッチデバイスを判定できないデバイスがある ２、３日前に、映画評を書いている別ブログのテーマを変更しました。 www.movieimpressions.com トップページを「一覧表示」にし、各記
スクラッチパッド - 開発ツール | MDN
Firefox 47 より、ツールボックス の内部にスクラッチパッドを開くことができます。始めに、オプション ページで "標準の Firefox 開発ツール" の "スクラッチパッド" にチェックを入れなければなりません。 以上でスクラッチパッドが、ページインスペクターや Web コンソールなど他のツールと並んで、ツールボックス内で使用できます。これは、コンソールの常時表示 で特に役立ちます。スクラッチパッドを持続的なマルチランエディターとして、またコンソールをページと対話するツールとして使用できます。 スクラッチパッドのウィンドウは以下のような外見です (macOS では画面上部にメニューバーが表示されます): ファイルメニューでは JavaScript コードの保存や読み込みを行うことができますので、後でコードを再利用することができます。 コード補完 スクラッチパッドに tern コー
IE のワナ (script タグの type 属性値)｜加藤 正人｜株式会社パルムゲート
このところ IE8 での災難が続いている。今回は、script 要素の type 属性でハマる羽目に陥った。 普段は JavaScript コードを書く場合は何気なく script タグの属性に type="text/javascript" のように記載しているのだが、先日たまたま type="application/javascript" としてしまった。これでも Firefox や Chrome および IE10 では動作するのだが、IE9/8 では全く無視され実行されない。 2006年4月に公開された RFC 4329 では既に text/javascript は旧式扱いで今後は application/javascript を使用することになっているのだが、2009年3月公開の IE8 はもとより 2011年3月公開の IE9 でさえ対応していないことが判明。 ちなみに Firef
JavaScript でスマホとPCを判別して表示内容を分ける方法 - by Takumi Hirashima
JavaScript でスマホとPCを判別して表示内容を分ける方法を紹介します。 例えば、スマホやPCに合わせてコードを切り替えたい時に便利な方です。 iPhone の判別方法 iPhoneの判別方法を紹介します。 iPhone のユーザーエージェントの判別には navigator.userAgent に iPhone を指定します。 次のコードは、ページを閲覧している環境が iPhone なら「iPhone だよ」が表示されます。 <script type="text/javascript"> // iPhone iPad iPod Android の判別 if ( navigator.userAgent.indexOf('iPhone') > 0 ) { document.getElementById(“innerhtml”).innerHTML = 'iPhone だよ'; } el
JavaScriptのsubmitイベントで、フォーム送信をコントロールしよう | 侍エンジニアブログ
こんにちは、ライターのマサトです！ あなたのWEBサイト、フォームってありますか？ お問い合わせとか意見箱のために設置している人も多いと思います。項目を入力して、最後に送信ボタンを押すと、内容が送信されますよね。 その送信、JavaScriptでコントロールできるってご存知ですか？ 知ってたけど、どうやるんだっけ？ という人も必見！ 今回は、フォームの送信を行なう「submit」イベントについて解説していきます この「submit」イベント、2つの方法で実装することができます。それぞれの方法と、実装時の注意点までしっかり解説していきます。 ばっちり覚えて、JavaScriptでフォームをコントロールできるようになっちゃいましょう！ 「submit」とは？ それでは、まず最初に「submit」イベントについての基本的な知識から学習をしていきましょう！ 一般的に「submit」を使うケースと言
JavaScriptのコーディングポイント【ES5まで】 - Qiita
随時更新。 ＊ES５までのコーディングポイントです。 プリミティブ型は値渡し、オブジェクト型は参照渡し プリミティブ型以外は参照元に変更が伝播する。 var user = { "name" : "サンプルユーザー" }; var copy_user = user; copy_user.name = "更新ユーザー" //Object {name: "更新ユーザー"} user //Object {name: "更新ユーザー"}
ES2015(ES6) 入門 - Qiita
はじめに 今更ですが、ES2015(ES6)で追加された機能や構文に関する備忘録です。 「JSは書けるけどES2015(ES6)はわからないっす...!」といった人達向けの記事です。 入門記事のためイテレータやジェネレータ等のわかりづらかったり、 説明が長くなりそうな機能や構文は割愛しております。 ES2015(ES6)とは ECMASCriptの6th Editionのこと。ECMAScript 6th editionの6を取ってES6と呼ばれていたが、 2015年に標準化されたため正式名称はES2015になった。 正式名称がES2015ならES6という名称を使うのは間違いなのか どちらの名称でも問題はない。 ES6の名称の方がエンジニアコミュニティに中では浸透しているらしく、ES6と記載されていることが多い。 詳細は以下を参考。 ES6 or ES2015 ? 〜WEB+DB PRES
jsでformを送る(submitする)際に気をつけること。 - かもメモ
以前、他のブログにも書いてた事にまた引っかかってしまったので。 改めて。 javascriptでフォームを送る方法 <form type="post" name="myForm" action="mofumofu"> こんなフォームだよ― ... </form> javascriptの場合。 // javascript document.myForm.submit(); jQueryの場合 // jQuery var $form = jQuery('form[name="myForm"]'); $form.submit(); こんな感じのエラーが出ることがあります。 TypeError: Property 'submit' of object #<HTMLFormElement> is not a function こんな時は、 フォームパーツのname属性が原因！ formの中にあるボタ
ECMAScript 6 compatibility table
V8 SpiderMonkey JavaScriptCore Chakra Carakan KJS Other ⬤ Minor difference (1 point) ⬤ Small feature (2 points) ⬤ Medium feature (4 points) ⬤ Large feature (8 points) Compilers/polyfills Desktop browsers Servers/runtimes Mobile Feature name Current browser ES6 Trans- piler Traceur Babel 6 + core-js 2 Babel 7 + core-js 2 Babel 7 + core-js 3 Closure 2020.06 Closure 2020.09 Closure 2021.08 Closure 20
JS/jQueryでCSS疑似要素である:before:afterのプロパティを取得し変更する | ITハット
JS/jQueryでCSS疑似要素である:before:afterのプロパティを取得し変更する jQueryにはCSSのプロパティを取得できる css() という関数がありますが、残念ながら疑似要素には対応していません。 サンプル要素 .pseudo::before { content: '疑似要素取得'; } 今回はこの要素の content の値を取得・変更していきます。 取得する var property = window.getComputedStyle($('.pseudo')[0], '::before').getPropertyValue('content'); console.log(property); // 疑似要素取得 JSの関数を使って疑似要素のプロパティを取得することができます。 getComputedStyle() 関数の第二引数に ::before または :
新JavaScript例文辞典
説明 小数点以下2桁までにするにはtoFixed()を使います。パラメータには小数点以下の桁数を指定します。2とすれば小数点以下2桁までになりますが、この時小数点以下3桁目は切り捨てではなく四捨五入される点には注意が必要です。 サンプルプログラム var n = 123.45678; n = n.toFixed(2); // 小数点以下2桁にする document.write(n);
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【WordPress】wp_footerでJavaScriptファイルを読み込んで、サイト表示を高速化しよう
GitHub - yubinbango/yubinbango
ES2015 (ES6) 以降の JavaScript について - RAMBO