5-7. JavaScript

課題1011. 基本

以下の手順に従って作業してください。

以下のhtmlを作成します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>課題1011 jsの基本</title>
    <link href="/tutorial/1011.css" rel="stylesheet"/>
  </head>
<body>
  <h1>お問い合わせ</h1>
  <form>
    <fieldset>
      <legend>お問い合わせフォーム</legend>
      <label for="txtName">お名前</label>
      <input type="text" name="txtName" id="txtName"/>
      <br/>

      <input type="button" name="btnOK" id="btnOK" value="OK"/>
    </fieldset>
  </form>
  <script type="text/javascript" src="/tutorial/1011.js"></script>
</body>
</html>

次に、src/main/resources/static/tutorial フォルダに1011.cssというファイル名で新規ファイルを作成し、以下のように記述してください。

.isFocused {
  background-color: #FF0000;
}

最後に、src/main/resources/static/tutorial フォルダに1011.jsというファイル名で新規ファイルを作成し、以下のように記述してください。

var txtName = document.getElementById("txtName");
var btnOK = document.getElementById("btnOK");

txtName.addEventListener("focus", function(event) {
  event.target.classList.add("isFocused");
});

txtName.addEventListener("blur", function(event) {
  event.target.classList.remove("isFocused");
});

btnOK.addEventListener("click", function(event) {
  alert("入力された名前は" + txtName.value + "です。");
});

期待する動作

  • お名前欄をクリックするとテキストフィールドの背景が赤くなる
  • お名前欄以外をクリックすると、背景が元に戻る
  • OKボタンをクリックすると「入力された名前は、xxxです。」（xxxはnameテキスト欄に入力した値）とダイアログが表示される

解説

  • JavaScriptはwebサイトに動きを与える
  • 動きは「ユーザが◯◯の動作をした時」などのきっかけがあって起こる。
    • このきっかけを「イベント」という
    • イベントのタイミングで実行される処理を「イベントリスナ」という（イベントハンドラともいう）
  • 先ほど実装したJavaScriptは
    • name欄のフォーカスイベント時に、isFocusedというclass属性をセットする。
      • isFocusedクラスは背景を赤にするようCSSに設定されている
    • name欄のフォーカスアウト時に、isFocusedクラス属性を取り除く
    • btnOKのクリックイベント時にalert(ダイアログ）を表示する。
  • HTMLは単なるテキストを構造化したものだが、ブラウザ及び、JavaScriptからは、オブジェクトとして見えている。
    • ここでいう「オブジェクト」とは、Javaのオブジェクトと同じ意味で捉えてもらって良い
    • 「構造化されている」なら「オブジェクトとして表現できる」のは当たり前
    • このオブジェクト構造をDOM(Document Object Model)という。
    • JavaScriptはオブジェクト化されたHTMLドキュメントを操作することが出来る
      • 例１：document.getElementById("txtName") でid属性が"txtName"の要素をとり出せる
      • 例２：txtName.value でvalue属性の値がとり出せる

課題1012. jQuery

以下の手順に従って作業してください。

1011.htmlのscriptタグの前に以下のように１行追加してください。

  <script type="text/javascript" src="/lib/jquery/dist/jquery.js"></script>
  <script type="text/javascript" src="/tutorial/1011.js"></script>

次に1011.jsを以下のように書き換えます。

$("#txtName").on("click", function() {
  $(this).addClass("isFocused")
}).on("blur", function() {
  $(this).removeClass("isFocused")
});

$("#btnOK").on("click", function() {
  alert("入力された名前は" + $("#txtName").val() + "です。");
});

解説

  • JavaScriptでDOMを操作する実装は、複雑なオブジェクト構造を地道にたどっていく作業のため、プログラムが冗長になる
  • そこでライブラリの出番。商蔵では「jQuery」というライブラリを使う
  • jQueryはおそらく、webアプリケーション・webサイト作成の現場において、最も普及しているJavaScriptライブラリ
  • jQueryを使うと、DOM操作が簡略化できる。

results matching ""

    No results matching ""