Reigle 技術ブログ

プログラミング、IT関連の記事中心

JavaScript

Stripeのカスタマー(顧客)の支払い方法の設定方法(クライアント側 純粋なHTML/JavaScript jQuery)【2/2】

目次 前提 公開可能キーを取得 HTML/JavaScriptのプロジェクト構成 ソースコードの用意 project/sample/index.html project/sample/index.js project/sample/finish/index.html アクセス確認 カード登録情報確認 テストカード 公式ドキュメント 前提 本記事…

通常のJavaScriptで共通関数を作成する方法

目次 はじめに プロジェクト構成 共通関数の定義 共通関数の実行 HTMLで呼び出し はじめに Reactなどのフレームワークを使用していない純粋なHTML/JavaScriptで共通関数を使用する方法を記載します。 プロジェクト構成 プロジェクトの構成は以下とします。 p…

通常のJavaScriptでグローバル定数を作成する方法

目次 はじめに プロジェクト構成 グローバル定数の定義 グローバル定数の取得 HTMLで呼び出し はじめに Reactなどのフレームワークを使用していない純粋なHTML/JavaScriptでグローバル定数を使用する方法を記載します。 プロジェクト構成 プロジェクトの構成…

JavaScriptでパスワードを自動生成する方法(記号を含めたパスワード、記号を含めないパスワード)

目次 利用用途 8文字で、アルファベットの大/小文字と数字のパスワード生成 記号を含めたパスワード生成 利用用途 自分で生成したパスワードで各サイトのパスワードを設定しても良いですが、 システム的には、パスワードを生成してメールを送信し、ユーザー…

JavaScriptで文字列をハッシュ化する方法

目次 ハッシュ化とは SHA-256のハッシュ化 SHA-512のハッシュ化 ハッシュ化とは ハッシュ化とは、データを不規則な文字列に変換する事です。 変換されたデータはハッシュ値と呼ばれ、データの変換にはハッシュ関数と呼ばれるアルゴリズムが使われています。 …

JavaScriptで文字列からスペースを無くす方法(置換、正規表現)

目次 置換を使用してスペースを削除する 正規表現を使用してスペースを削除する 置換を使用してスペースを削除する この方法では、最初のスペースのみが削除されます。 全てのスペースを削除したい場合などは「正規表現を使用してスペースを削除する」の方法…

JavaScriptのObject型(オブジェクト型)の操作

目次 オブジェクト型とは オブジェクト型の宣言 オブジェクト型に値を追加 オブジェクト型に値を追加(Keyを変数にする方法) オブジェクト型の値取得 オブジェクト型から特定のプロパティ削除 オブジェクト型とは 以下の様な「{}」で囲われたKeyとValue(プ…

JavaScriptでasync(非同期処理)とawait(同期処理)の使い方

目次 async(非同期処理) await(同期処理) 非同期処理と同期処理まとめ async(非同期処理) 関数の前に「async」を付ける事で、非同期の関数になります。 そもそも、非同期とは順番を待たずに後ろで処理をしておくという状態です。 非同期にする事で、AP…

JavaScriptで九九計算(console.table テーブル表示)

目次 九九をconsole.tableで表示する 画面上にTableタグで九九を表示する 九九をconsole.tableで表示する コンソールに以下の様な出力が行われます。 ソースコードは以下です。 <button type="button" onclick="consoleAction()">コンソール表示</button> <script> function consoleAction(){ var arrayLeft = [1, 2, 3, 4, 5, …

JavaScriptで金額フォーマット表示(カンマ区切り toLocaleString 正規表現)

目次 toLocaleStringで3桁カンマ区切り 正規表現で3桁カンマ区切り toLocaleStringで3桁カンマ区切り 以下の様に数値型のデータに「toLocaleString」関数を使用することで、3桁毎にカンマ区切りされたデータが出力されます。 <script> const target = 100000000; co</script>…

JavaScriptのデータ保存方法(Cookie、SessionStorage、LocalStorage)

データ保存方法の違い 比較項目CookieSessionStorageLocalStorage容量4KB5〜10MB(ブラウザ、環境依存)5〜10MB(ブラウザ、環境依存)保存期限期間など独自に設定可能タブを閉じるまで永続的に保持、ブラウザアプリのアンインストールなどで消える保存場所…

配列と配列で重複チェック【JavaScript】

■はじめに 2つ以上の配列があり、A配列にB配列の要素が重複しているか?重複している場合はどれが重複しているのか? を調べる方法を記載します。 「filter」関数を使用しての実装になります。 ■手順 A配列にB配列の要素重複確認 const arrayA = ['Apple', '…

クリップボードに文字列をコピーする方法

■手順 以下の関数の第一引数にコピーしたい文字列を渡すことでクリップボードへコピーできます。 function copyText(target){ // コピー用の仮テキストエリア作成 const txtarea = document.createElement("textarea"); txtarea.textContent = target; // bo…

HTML要素の取得方法、親子要素の取得方法【JavaScript】

■はじめに ピュアなJavaScriptを使用したHTMLの要素の取得方法と、親子要素の取得方法を記載します。 ■HTML要素の取得方法 以下のHTMLを元に、要素を取得する方法を記載します。 <div id="sample" class="test"> </div> 取得方法は以下 //タグ指定での取得 document.getElementsByTagName('div');…