Works

html タグで作成したテキストエディタ

pre タグに contenteditable 属性を使用したテキストエディタ風のテキストエリアです。 文字の色を指定すると入力した文字に、色がリアルタイムに反映されます。 エラーするとキャレットが開始位置へ戻ります。 2017/05/17 要素を書き出す関数を見直して無駄な処理を減らしました。 2017/05/17 chrome でのクリップボードの処理を調整?しました。 http://mathematics.namekuji.jp/script/textarea-color-c.html

  • 1068
  • 0

CSV データの JSON 型変換 ( javascript )

CSV データの JSON 型変換 ( javascript ) CSV データを Array 配列, JSON 型データへ変換します。 str.getCSVArray(',',true) の第一引数に String 指定で区切り文字の設定。 第二引数に、 true 指定で、戻り値配列の 0 番に行配列、 1 番に列配列が出力されます。 指定無しの場合は、 CSV データ の Array 配列が出力されます。 最終行の末尾に区切り文字で配列が作成されない を修正しました。 最終行最終セル先頭が囲み文字の処理を調整しました。 半角スペース、タブの連続等、調整しました。 区切り文字に半角スペース指定出来るように調整しました。 http://mathematics.namekuji.jp/script/csv-convert-json-a.html

  • 190
  • 0

JSON データ を 配列 ( Array ) へ変換 :テスト 3

{ JSON データ を 配列 ( Array ) へ変換 } テスト 3 Object を配列に変換するテスト 3 です。 getJSONArray() 関数を実行すると、Object を Array 配列へ変換します。 戻り値の配列の 0 番に階層のない配列、Object が階層構造場合、 戻り値の配列の 1 番に 階層構造の配列を返すと思います。 第一引数, true で object のキャプション?を追加します。 Object 値が 空, null, false の場合、 Array 配列に格納されない、を修正しました。 JSON, Object, Array 配列を処理できると思います。

  • 137
  • 0

{ JSON データ を 配列 ( Array ) へ変換 } テスト 4

{ JSON データ を 配列 ( Array ) へ変換 } テスト 4 Object を配列に変換するテスト 4 です。 getJSONArray() 関数を実行すると、Object を Array 配列へ変換します。 第一引数, true で object のキャプション?を追加します。 第二引数に文字指定で、文字と同じ key の値を抽出して配列で返します。 戻り値の配列の 0 番に階層のない配列、Object が階層構造場合、 戻り値の配列の 1 番に階層構造の配列を返すと思います。 戻り値の配列の 2 番に第二引数で指定した配列を返します。 Object 値が 空, null, false の場合、 Array 配列に格納されない、を修正しました。 http://mathematics.namekuji.jp/script/json-data-cast-a.html

  • 217
  • 0

{ セル内改行 CSV データを配列 へ変換 } javascript

CSV データを Array 配列へ変換します。 str.getCSVArray(',') の第一引数に 文字で区切り文字指定。 半角スペースを指定することは出来ません。 囲み文字は、セル単位で、シングル、ダブルクォーテーションが混在していても処理できると思います。 囲み文字が連続した場合、最初と最後を一つだけ削除します。 囲み文字列前後の半角スペース、タブは、削除します。 囲み文字内であれば、改行が含まれていても、一つのセルの値として取得出来ると思います。 結果はコンソールへ出力されます。 囲い文字開始直後の区切り文字、 囲い文字入れ子終了直後の区切り文字で配列が増えてしまう、を修正しました。 最終行の末尾に区切り文字で配列が作成されない、を修正しました。 最終行最終セル先頭が囲み文字の処理を調整しました。 半角スペース、タブの連続等、調整しました。 区切り文字に半角スペース指定出来るように調整しました。 http://mathematics.namekuji.jp/script/csv-data-cast-a.html

  • 219
  • 0

セル内改行 CSV 配列変換 : エスケープ処理テスト

{ セル内改行 CSV データ配列変換, Ajax テスト } CSV データを Array 配列へ変換します。 str.getCSVArray(',') の第一引数に 文字で区切り文字指定。 半角スペースを指定することは出来ません。 囲み文字は、セル単位で、シングル、ダブルクォーテーションが混在していても処理できると思います。 囲み文字が連続した場合、最初と最後を一つだけ削除します。 囲み文字列前後の半角スペース、タブは、削除します。 囲み文字内であれば、改行が含まれていても、一つのセルの値として取得出来ると思います。 結果はコンソールへ出力されます。 エスケープ処理?を追加しました。 囲み文字のないセルで区切り文字をエスケープすると区切り文字を無視します。 囲み文字をエスケープすると囲み文字内の切り文字が有効になります。 囲い文字開始直後の区切り文字、 囲い文字入れ子終了直後の区切り文字で配列が増えてしまう、を修正しました。 最終行の末尾に区切り文字で配列が作成されない、を修正しました。 最終行最終セル先頭が囲み文字の処理を調整しました。 半角スペース、タブの連続等、調整しました。 区切り文字に半角スペース指定出来るように調整しました。 http://mathematics.namekuji.jp/script/csv-data-cast-ajax-a.html

  • 152
  • 0

配列を利用した DOM 要素一括作成

配列を利用した DOM 要素一括作成 [ A : 要素名, B : 属性, C : 属性値 ] : 配列 開始の A, は、 DOM 要素も処理できると思います。 配列の初めが A, 後は B, C, の繰り返しです。 [ A, B, C, B, C, B, C, B, C,...] ← 要素作成 [ A, B, C,[ A, B, C ,B, C ],"=>child", B, C,,,,] ← 子要素作成(配列入れ子) [ A, B, C, B, C,,,,,],"=>child" : 子要素配列 : (配列の場所 B) 出力しない要素は、"=>child" の値を空 → [要素:A],"", [ A, B, C, テキスト,"=>text", B, C,,,,] ← テキスト作成 "テキスト","=>text" : テキストの場所 : B [ A, B, C, [ id ],"=>id", B, C,,,,] ← id 作成 (配列は[0][1]が使用できます。) [ 0, 1 ],"=>id" : 配列の場所 : B http://mathematics.namekuji.jp/script/create-dom-object-bulk-a.html

  • 202
  • 0

js : ソースコードハイライト表示 2

javascript のソースコードをハイライト表示します。

  • 89
  • 0

最大公約数と最小公倍数の計算

最大公約数と最小公倍数の値を求めます。 行 6, 桁 4 までの計算ができると思います。 数は整数で、半角スペースで区切ってください。

  • 163
  • 0

[ HTML テキストタグ 一括作成 ]

配列を利用した HTML テキスト(タグ)一括書き出し Array 配列を利用して HTML テキスト(タグ)を一括作成します。 http://mathematics.namekuji.jp/script/create-html-text-bulk-a.html createHtmlText 関数 では、後からの要素追加ができなかったので、 任意のタイミングで要素追加が出来るように、HtmlText として、クラス化しました。 http://mathematics.namekuji.jp/script/create-html-text-bulk-b.html 子孫要素への要素追加が出来るように修正しました。 http://mathematics.namekuji.jp/script/code-highlight-c.html

  • 177
  • 0

HTML ソースコード整形 : 関数

HTML ソースコード整形 HTML ソースコードを要素の階層に応じて、インデント整形します。 2017/05/11 : script, css, pre, textarea タグの中身は、整形されずに、入力のまま、出力されます。 クォーテーションで囲まれた文字列中の、タグ記号は無視するように調整しました。 2017-05-12 : タグ内に改行がある場合、インデント幅の選択など、調整しました。 http://mathematics.namekuji.jp/script/html-tag-shaping-a.html

  • 182
  • 0

正規表現:テキスト内文字列 CSS クラス名一括指定

##テキスト内文字列 CSS クラス名一括指定 テキスト内に繰り返し現れる文字列を CSS のクラス名を付けた HTML タグと置き換えます。 CSV データの一行目がクラス名、一列目が、このクラス名をつける文字列になります。 後は、その繰り返しになります。 -------------------------------- 一番上のテキストエリアに CSS のクラス名を配置するテキスト。 二番目が CSV データになります。( CSV はカンマ区切り ) -------------------------------- ###例 : CSV データ c0,c1,c2 //一行目 CSS クラス名 aa,0,あ bb,1,い cc,2,う -------------------------------- 上記の CSV データでは、以下のようなタグが作成されます。 <span class='c0'>aa</span> <span class='c0'>bb</span> <span class='c0'>cc</span> <span class='c1'>0</span> <span class='c1'>1</span> <span class='c1'>2</span> <span class='c2'>あ<</span> <span class='c2'>い</span> <span class='c2'>う</span> -------------------------------- ###2017-05-19 pre 要素追加しました。 ###2017-05-21 正規表現での文字置き換え追加しました。 -------------------------------- [テキスト内指定文字列へ CSS クラス名一括指定ツール](http://mathematics.namekuji.jp/script/html-tag-shaping-b.html)

  • 614
  • 0

CSV データ Array 配列変換

CSV データを Array 配列へ変換します。 stringify, tableElement メソッド追加しました。 --------------- 処理速度比較等 : [CSV データ配列変換ツール](http://mathematics.namekuji.jp/script/csv-data-cast-b.html)

  • 86
  • 0

String : indexOf と同じ戻り値の関数作成テスト

String: indexOf メソッドと同じ戻り値の関数作成テスト 作成した関数で文字列中の検索文字の有無テスト、 処理速度確認テストです。 http://mathematics.namekuji.jp/script/function-indexof-string-a.html

  • 210
  • 0

js : ソースコードハイライト

javascript : ソースコードハイライト javascriptのソースコードをハイライト表示します。 http://mathematics.namekuji.jp/script/code-highlight-c.html

  • 193
  • 0

要素の ブロック, インライン 判定テスト

getComputedStyle() 関数を利用した ブロックレベル要素、インライン要素判定 テスト プレーンテキスト取得テストはで、取得要素のブロック、インラインを見分ける方法がが分からず、 要素名を書き出して処理していました。 その後、判定方法を調べてみると、getComputedStyle 関数で判断する方法があるようです。 確認した範囲では、chrome, IE では、 br と span の値に違いはないようです。 Firefox では、 br と span の値に違いが見られました。 http://mathematics.namekuji.jp/script/displaycheck-a.html

  • 136
  • 0

プレーンテキスト取得テスト2

プレーンテキスト取得テスト2 タグを一通り並べてますけど処理できるのか分かりません。_(:3」∠)_ タグの前後、テキストの前後にある空白を処理できるようにしました。 確認した範囲では、table, のセル内の文字数が違うと表示がズレてしまいます。

  • 167
  • 0

指定した要素のプレーンテキスト取得

指定した要素のプレーンテキストを返す関数です。 ブラウザによって、 innerText プロパティが返してくる値が違うので、 innerText 関数 を作成してみました。 それぞれのブラウザで innerText の値を pre タグに読み込ませてみると、 chrome では、 innerHTML と同じ表示になり、 ie, firefox は、取得した要素によっては、改行位置がずれたりして表示されます。 chrome でも p タグでは、 padding, と margin の値を 0 に指定しておかないと、 p タグの上下に必要としない改行が挿入されてしまいます。 この関数は、返ってきた値を pre タグに出力した場合、 innerHTML の表示と同じになるように作成しました。 テスト不足かもしれません。ヽ(´ー`)ノ テキストエリアに、上記の要素を使用したタグを貼り付けて "変換" をクリックすると、 タグを、要素に流し込み、DOM ツリー化、その要素の innerText と innerHTML の値を表示します。 また、作成した関数が処理した innerText ( プレーンテキスト )の値を表示します。 div, p, span, #text, br の5つのタグしか処理できません。 _(:3」∠)_ http://mathematics.namekuji.jp/script/myinnertext-a.html

  • 126
  • 0

html5.1 タグのブロック、インライン、振り分けテスト

html5.1 タグのブロックレベル要素、インライン要素、振り分けテスト getComputedStyle() 関数を利用して html5 タグを ブロックレベル要素、インライン要素に振り分けます。 javascript で取得できる値の中に、タグ一覧の値がないか 調べてみたんですけど、見つける事は出来ませんでした。_(:3」∠)_ html5.1 のタグは、こちらのサイトで確認しました。 → https://www.w3.org/TR/html51/fullindex.html#element-interfaces

  • 428
  • 0

js : ソースコードハイライト表示 3

javascript のソースコードをハイライト表示します。

  • 56
  • 0

test(), indexOf() メソッド等処理速度比較

/reg/.test(str), str.indexOf('\n') メソッド等の処理速度比較です。

  • 51
  • 0

js : ソースコードハイライト表示 4

javascript のソースコードをハイライト表示します。 http://mathematics.namekuji.jp/script/code-highlight-d.html

  • 47
  • 0

ライブラリ作成テスト ( step-01 )

ライブラリ作成テストです。 ----- [javascript : ライブラリ作成 - A](http://mathematics.namekuji.jp/script/mylibrary-a.html)

  • 54
  • 0

$REG [ 文字検索処理速度比較 ] ( step-02 )

$REG [ 文字検索処理速度比較 ] ライブラリ作成テストです。 ----- [javascript : ライブラリ作成テスト - A](http://mathematics.namekuji.jp/script/mylibrary-a.html)

  • 61
  • 0

$DOM ライブラリ作成テスト ( step-03 )

$DOM ( step-03 ) ライブラリ作成テストです。 ----- [javascript : ライブラリ作成テスト - A](http://mathematics.namekuji.jp/script/mylibrary-a.html)

  • 38
  • 0

$DOM, $CSS 短縮コード動作 テスト ( NO.04 )

$DOM, $CSS( step-04 ) 短縮コードの動作の確認です。

  • 44
  • 0

短縮コードテスト NO.05

短縮コードのテストです。

  • 47
  • 0

短縮コードテスト NO.06a

短縮コードのテストです。 --- [配列と連想配列をミックスした Object 作成](http://mathematics.namekuji.jp/script/mylibrary-b.html)

  • 59
  • 0

Array ( 配列 ) メソッド動作テスト NO.07

Array ( 配列 ) メソッド動作テストです。

  • 44
  • 0

( Color Picker ) canvas テスト

( Color Picker ) canvas のテストです。

  • 37
  • 0

カラーピッカー ( canvas テスト2 )

( Color Picker ) canvas のテストです。

  • 41
  • 0

Color Picker ( canvas )

Color Picker です。

テキストボックスに16進数6桁入力で近似色?にジャンプします。
チェックボックスにチェックを入れるとテキスト、
チェックを外すと背景に色がつきます。

---------------

http://mathematics.namekuji.jp/script/colorpicker-a.html

  • 36
  • 0

canvas 要素 テキストデータ出力テスト

canvas 要素へテキストデータを出力するテストです。

  • 19
  • 0

Skills

Hot tags

Categories

HTML / CSS / JavaScript