JavaScript: はじめの一歩 (2)
JavaScript はじめの一歩 (1) からの続きです。さまざまな方法で文字列を出力する
先にまとめです。個別の説明は関連リンク先でします。
プログラム作成や動作チェックで使用するもの
- 1) デバッガのコンソールに文字列を出力する。
デバッグでよく使います。
詳細へ - 2) document.write() で HTML に出力する。
ローカルのちょっとしたテストに適しています。 ただし、セキュリティの問題があるので注意。
TestJS_document_write01.html
JavaScript: document.write()
主に Web や Web アプリケーションで使用するもの
- 3-1) div や span などのタグ (要素) の textContent に文字列をセットする。
詳細へ - 3-2) pre などの要素に append() で文字列を追加で出力する。
document.write() の代わりに使うこともできます。
詳細へ - 4) コントロールの要素 (textarea タグや input タグ) に文字列を出力する。
TestJS_textarea01.html
詳細へ
他にもリスト li やテーブル table などの要素自体を JavaScript
で作成して HTML のドキュメントに追加する話もあります。
初歩的な話ではないのでここでは省略。
JavaScript: HTML 要素を作成する
console.log() で文字列を出力する
console.log() でデバッガのコンソール画面に テキストを出力することができます。 実行ログや要所の値の確認などに使うと便利です。
例:
console.log("デバッグメッセージ");
サンプル
- TestJS_console_log01.html
console.log() でコンソールに文字列や計算結果を出力するサンプル。
console.log() とは別に console.error(), console.debug()
などの関数もあります。
textContent や append() で文字列を出力する
はじめの一歩 (1) で紹介したサンプルです。
textContent とは別に append() で文字列を出力することもできます。 textContent や innnerText に文字列をセットすると 要素内のテキストを置き換えますが、append() で文字列を足すとすでにあるテキストの後に追加されます。 document.write() の代わりに使うこともできます。
pre タグや div タグに append() で文字列を出力するサンプル。
textarea 要素に文字を出力する
textarea タグや input タグのテキストフィールドに文字列を出力することもできます。
これらの要素はコントールの要素で、div や span
などの通常の要素とは処理の仕方が異なります。
textarea や input では textContent ではなく
プロパティ value に文字列をセットします。
HTML: textarea タグ: JavaScript
正しい textarea.value = "文字列"; 誤り textarea.textContent = "文字列";
サンプル
- TestJS_textarea01.html
ボタンを押すと textarea に文字列を出力する。
ボタンを押すと textarea に文字列を追加で出力する。 文字列が textarea の末尾まできたらスクロールする。
文字列を整形して出力する
文字列を整形して出力する処理は さまざまな場所で使う基本的な処理です。
- TestJS_string_pad01.html
文字列を指定の文字数（幅）になるようにスペースを入れる。
文字数の調整、文字列の整形 - TestJS_string_format_toFixed01.html
数値の小数点以下の桁数を指定する。
数値を文字列に変換する
エラーが発生した場合の処理 try catch
文字列を作成する
- TestJS_string_format01.html
日付の文字列をさまざまな方法で作るサンプル。
- JavaScript: テストプログラムの実行とソース表示
ちょっとしたテストプログラムの実行結果の文字列を整形したり ソースコードを表示したりする話です。
正規表現
文字列の処理では 正規表現 を多用します。 難しい話もたくさん出てきますが、 初歩的な使い方は簡単なのではじめの一歩で慣れてください。
エラーが発生した場合の処理 try catch
上のサンプル TestJS_string_format_toFixed01.html で try, catch が出てきたのでこの話です。 try, catch はエラーが発生したときに何か処理を行いたい場合に使用します。
- TestJS_try_catch_Error01.html
try, catch のサンプル。定数 const に再代入するとエラーが発生する例。 エラーの内容 (Error.stack) を表示する。
HTML 内の指定した要素を取り出す
上のサンプルで querySelector() がいくつか出てきたので、 これに関する話です。HTML 内の div や table などの要素を取り出す方法の話です。 現在では querySelector() と querySelectorAll() でほぼ間に合います。
- JavaScript: HTML の要素を取り出す
はじめの一歩だと難しい話もたくさん出てくるので、雰囲気だけ斜め読みしてください。
HTML のコントロール要素
HTML のコントロール要素には
button タグ (ボタン), input タグ (チェックボックス、ラジオボタン、
1行の文字列入力、数値入力、スライダーなど)、
textarea タグ (複数行のテキスト入力)、
select タグ (ドロップダウンメニュー)
などがあります。
HTML: input タグ
HTML: select, option タグ
コントロール要素を使った HTML では ユーザー操作で入力された値を読み取る処理も出てきます。 このようなときに querySelector() を使います。
HTML のコントロール要素のサンプル。
button タグ、input タグ、select タグなど。
よく使う処理を外部 js ファイルに分離する
似たような処理を毎回書かなくて済むようにします。
よく使う処理は外部の js ファイルに分離します。
HTML で共通のスタイルを外部の css
ファイルに追い出す考え方と同じです。
スタイルを CSS ファイルに分離する
サンプル
- TestJS_textarea_scroll02.html
一部の処理を外部 js ファイルに追い出す。