JS-Basic.md

JavaScriptの基礎

演習課題0

• 演習には「templete」フォルダにあるコードを利用すること
• JavaScriptの基本的な使い方は，MDNのチュートリアル，JavaDriveのJavaScript入門などを参照する
• 最終的な0-4の動作イメージはこちらを参照（複数キーワードには未対応）

0-1) JavaScriptの基本テンプレートの動作確認

Ex0-1.htmlを実行し，ボタンを押すとダイアログに「Hello World!」と表示するプログラムの動作の仕組みを確認しなさい．

0-2) テキスト入力の処理【解答例】

Ex0-1.htmlを修正して，ボタンを押すとダイアログに「テキスト入力欄（複数行入力可能）に入力したテキスト」を表示するプログラムを作りなさい．
ヒント： <textarea>タグ、document.getElementById(入力欄のID).value などを使うとよい.

0-3) テキストのWebページへの表示処理【解答例】

Ex0-2.htmlを修正して，ボタンを押すと，開いているWebページの下部（ソースでは<div id="result_div"></div>で示された部分）に「テキスト入力欄（複数行入力可能）に入力したテキスト」を表示するプログラムを作りなさい．

• 複数行入力した際も，正しく改行されるように注意すること
• ボタンを押すたびに，入力内容が「追記する形」で表示される方法も試する

ヒント：Webページの書き換えには，innerTextやinnerHTMLを使うとよい．

0-4) テキスト入力の処理【解答例】

Ex0-3.htmlを修正して，１行分のテキストを入力する「キーワード入力欄」を追加なさい．
その上で，ボタンを押すと，開いているWebページの下部に表示される「テキスト入力欄（複数行入力可能）に入力したテキスト」中で，「キーワード入力欄」に入力したキーワードが「強調表示」されるプログラムを作りなさい．

• 強調表示の仕方は，「太字にする」，「背景の色を変える」など，いくつか試すこと
• 複数のキーワードを「半角スペース区切り」で入力し，それぞれのキーワードに一致する箇所を強調表示できるような拡張も行う
  【解答例1, ソースコード】 【解答例2, ソースコード】
  ヒント（使う関数の例）：replaceAll，split，forEachなどを使うとよい．