三目並べ – 2.〇×を交互にゲーム盤に入るようにしよう

Home Academy 三目並べ – 2.〇×を交互にゲーム盤に入るようにしよう

三目並べ – javascriptを読み込もう

index.html を修正します。

body要素の中で、後述するindex.jsを読み込む処理を追加します。

（ゲーム盤をクリックした際に〇×を表示する処理などを記述します）

また、jQueryを利用可能にするため、head要素の中で読み込む処理を追加します。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>〇×ゲーム</title>
  <link rel="stylesheet" href="./css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
  <h1>〇×ゲーム</h1>
  <table>
    ︙
  </table>
  <script src="./js/index.js"></script>
</body>

</html>

javascriptで、マス目に〇を入れよう

index.html と同じディレクトリに js という名前のフォルダを作成してください。

また、以下のコードを index.js という名前で保存しましょう。

$(function() {
  // ゲーム盤のマス目クリック時に、以下の関数を実行
  $("td").click(function() {
    // マス目に入力
    $(this).html("〇")
  })
})

javascriptではイベントを検知し、そのイベントによる処理（イベントハンドラ）を設定することができます。

今回では「マス目をクリックすること」をイベントとしています。

jQueryの文法について

$("td")

td要素に対してイベントハンドラを設定することを意味しています。

今回は、クリックしたときに function(){ … } で指定した処理を実行するように設定しています。

関数の中で出てくる $(this) は、クリックしたtd要素自体を表します。クリックしたマス目にだけ、〇か×を入力するためです。

html() 関数を利用することで、要素の間に文字列を挿入することができます。

上記の処理では <td></td> が <td>〇</td>となります。

また、jQueryを利用する際は冒頭の $(function() { … }) は定型文であり必須となります。

すべてのjQuery関数を利用する際に必要となりますのでご注意ください。

以下のような階層構造に変更になります。

.
├── index.html
├── css
|   └── style.css
└── js
    └── index.js

実際に表示してみよう

index.html ファイルを再度読み直してください。以下のような挙動をなるはずです。

演習

以下のように、〇と×が交互に入力されるよう、index.jsファイルの内容を変更してください。

三目並べ – 2.〇×を交互にゲーム盤に入るようにしよう

三目並べ – javascriptを読み込もう

javascriptで、マス目に〇を入れよう

jQueryの文法について

実際に表示してみよう

演習

採用情報

ブログカテゴリ

Search

Archives

三目並べ – 2.〇×を交互にゲーム盤に入るようにしよう

三目並べ – javascriptを読み込もう

javascriptで、マス目に〇を入れよう

jQueryの文法について

実際に表示してみよう

演習

採用情報

ブログカテゴリ

Search

Archives

タグ