システム開発のためのJavaScriptプログラミング

JavaScript関係のプログラミング関係の特集となります。

一般的な「システム開発の必要性など」の話や、「システム開発の流れ」の話は、

個別にリンク先をご覧下さい。

ここは、実際のプログラムのトピックスとなります。

今日から使用できるJavaScriptのライブラリ

今日から使用できるJavaScriptのライブラリなどを載せています。

複合的に機能を揃えてもいいのですが、あまりにごちゃごちゃになりすぎないように、

細切れにしてあります。

※後で内容をまとめたものも作成していきます。

また、脱jQueryの目標もありますので、jQueryを使用しないようにもしています。

以下のコンテンツをご利用いただく前に、必ず「サンプルコードのご利用について」をご確認願います。

個別のライブラリなど

小ネタが中心となりますが、あると便利なものを揃える予定です。

１．inputの数値を非選択時にはカンマあり、選択時にはカンマ無しにする

システム開発の【Spread i-Vision】

inputの数値を非選択時にはカンマあり、選択時にはカンマ無しにする

https://www.spreadi-vision.com/javascript_digit_separator

javascriptでinputの数値を選択していない時には桁区切りのカンマあり、選択している時には桁区切りのカンマ無しにするコードを作ります。実際のイメージは、次のようになります。金額などを単純に表示している時は、桁区切りのカンマがあると見やすいですが、編集する時にカンマが残っていると編集しづらいので、編集時にはカンマが消えていた方がいいです。また、細かい点ですが、マウスなどで選択状態になった時は、全選択となった方が使いやすいという意見は多いです。※マウスは一度目のクリックは全選択、二度目のクリックは全選...

２．マウスをのせた時にツールチップを表示する

システム開発の【Spread i-Vision】

マウスをのせた時にツールチップを表示する

https://www.spreadi-vision.com/javascript_tooltip

指定の要素にマウスをのせた時に、ツールチップを表示するJavaScriptを作成しました。ライブラリの前提で作ってみましたが、正直な話としてライブラリにする必要性が全く無いほど短いですが、簡単なものから作成していきます。動作のイメージは、次の図のような感じです。「こちらが２個目です」の文字にマウスを乗せると、赤い背景の「2個目です。」が表示されます。ソースコードは、次のリンクからダウンロードして下さい。tooltipsダウンロード※ダウンロードされない場合は、次のリンクを開いて下さい。　numInputのソースコード使...

システム開発の【Spread i-Vision】

全角と半角の変換（英数字）

https://www.spreadi-vision.com/javascript_string_convert

全角と半角の変換についてみていきたいと思います。まずは、その際に必要となる基礎項目を説明します。１．文字列.replace( xxx , yyy)文字列に含まれる「xxx」の文字を、「yyy」に置き換えます。例えば、　let ss = 'abcabcab';　ss = ss.replace('a', 'あ');とやると、ssは「あbcabcab」となります。「a」の文字が３個あるうち、最初の１個だけが変換されます。３個とも変換するには、どうするか？replaceの中の「xxx」の部分を次のように書きます。ss = ss.replace(/a/g, 'あ');すると、s...

４．全角と半角の変換（ひらがなとカタカナ）

システム開発の【Spread i-Vision】

全角と半角の変換（ひらがなとカタカナ）

https://www.spreadi-vision.com/convert-half-full

ひらがなとカタカナの、全角と半角の変換についてみていきます。英数字に関しては、前回の内容に記載されていますので、そちらをご確認下さい。今回も文字コード云々でスッキリできればよいのですが、半角のカタカナの場合もあり、文字コードのみでの対応は厳しいので、原始的な方法になってしまっています。コードは短いので、そこまで困らないとは思います。１．文字列.indexOf(検索する文字列)「文字列」の中に「検索する文字列」が何番目に含まれるか？を調べます。含まれない場合は、「-1」となります。例えば、　let test = &#03...

５．バイト数で入力を制限する

システム開発の【Spread i-Vision】

バイト数で入力を制限する

https://www.spreadi-vision.com/limit-input-byte-count

inputの入力時に、バイト数で入力を制限する方法についてみていきます。またまたコード自体は短いです。また、覚えることも少ないので簡単に実装できると思います。１．escape()escapeは、文字を16進数のエスケープシーケンスで置き換えた文字列にします。エスケープシーケンスとは、Wikiより抜粋した内容となりますが、コンピュータシステムにおいて、通常の文字列では表せない特殊な文字や機能を、規定された特別な文字の並びにより表したものとなります。正直な話ですが、これだけでは何を言っているのか分かりません。ですので具体...

６．Enterキーで次の入力欄へ移動する

システム開発の【Spread i-Vision】

Enterキーで次の入力欄へ移動する

https://www.spreadi-vision.com/enter_key_move_next_element

Enterキーで次の入力欄へ移動する方法について記載します。関数を作成すれば、初期のonloadで親要素を指定するだけで使用できます。基礎の項目は地味ですが、それらを組み合わせるだけです。１．element.formその要素が所属するフォームを取得する。document.getElementById('topDv').formのように記載すると、「topDv」という要素が所属するフォームを取得することができます。で？と思う方もいるかと思いますが、その要素内部ではなくフォーム全体を処理するために必要となってくる処理です。※無くてもできます。２．form....

システム開発のトピックス一覧ページに戻る

システム開発 Spread i-Visionについては、こちらをご覧下さい。

Vectorのページ（半角全角変換サンプルJavaScript）