X-HACK

【11日目】DOM操作 DOM操作 その❷

— javascript, tutorials — 1 min read

前回 +JavaScript道場：十日目 / DOM操作 その❶

用語

  • タグ
  • クラス属性
  • ID属性
  • 要素
  • CANVAS
  • ピクセル

用語の確認

下記の用語の意味を抑えておきましょう。

要素とは

要素 = HTMLの構成要素 のことです。head や body や h1タグ 、pタグなどを指しています。element（エレメント）とも。

属性とは

属性とはhtmlの要素に対して性質を与える役割をしています。 対象のタグのリンク先、幅、使用可能・使用不可能、最大文字数などを設定し、htmlのタグがどのような振る舞いをするのかを規定するのが属性の主な役割です。 attribute（アトリビュート）とも。

ID属性

id= でタグにIDを付与します。 HTML文書内で固有である（ユニークである）必要があるので、同じIDが同一HTML文書内に複数存在してはいけません。

1<h1 id="main">タイトル</h1>

クラス属性

class= でタグにクラスを付与します。同じクラス名のタグが同一HTML文書内に複数存在してもいい。

href / src / hidden / styleなども HTMLの属性の一つ です。

1<h1 class="header title">メインタイトル</h1>
2<h2 class="header sub-title">サブタイトル</h1>

HTMLから要素を取得するには？

下記を例に見ていきましょう。まずはシンプルなHTML文書です。

1<html>
2    <head>
3    <title>Page Title</title>
4    </head>
5    <body id="top">
6    <h1>This is a Heading</h1>
7    <p class="main my-class">This is a paragraph.</p>
8    </body>
9</html>

口頭で要素を指示をするなら、「bodyタグの中にあるh1要素」などと指示をすると思います。JavaScriptの場合でも似ています。

課題の解答例

getElementById

  • IDを指定して要素を取得する Element と単数形になっていることに注意
1// idを指定して要素を取得する、「オブジェクト」が返ってきます
2// idはHTML文書に一つしか存在しない想定なので、必ず単一の要素が返ってきます
3var body = document.getElementById("top")
4　　
5// ----- bodyの中身 -----
6// <body id="top">
7//    <h1>This is a Heading</h1>
8//    <p class="main my-class">This is a paragraph.</p>
9// </body>

getElementsByTagName

  • タグの名前を指定して要素を取得する Elements と複数形であることに注意
1// タグを指定して要素を取得する、「オブジェクトの配列」が返ってきます
2// `h1` や `p` はhtml内に複数あるため、該当する全ての要素を取得する
3var h1 = document.getElementsByTagName("h1")
4　　
5// HTMLCollection ※配列です

getElementsByClassName

  • クラスの名前を指定して要素を取得する Elements と複数形であることに注意
1// クラスを指定して要素を取得する、「オブジェクトの配列」が返ってきます
2// クラス属性はhtml内に複数あるため、該当する全ての要素を取得する
3var main = document.getElementsByTagName("main")
4　　　　
5// HTMLCollection ※配列です

前回は、DOM操作の基本を学習しました。

今日はDOM操作を応用して、ちょっとしたゲームの基礎を作りたいと思います。

これから作るもの

今までの知識を活用して下記の画像のような作品を作っていきます。

作り方をイメージできますか？

成果物.gif

必要な知識

  1. CanvasオブジェクトのgetContextメソッドの使い方
  2. Mathクラスの扱い方 (Math.random, Math.floor)
  3. for の使い方
  4. 文字列の結合の方法
  5. 関数の呼び出し方法

3, 4, 5 はすでに学習しましたね。

Canvasについて

JavaScript と HTMLの canvas 要素によってグラフィックを描く方法を提供します。

他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。凄いやつです。 Canvasを使うと絵を描いたり、写真を加工したりといった機能を使った開発ができます。

Canvasオブジェクトがどのようなメソッドを持つかはMDNで確認します

具体例も豊富に載っているので分かりやすいと思います。

Canvasを使ってみよう

下記のHTMLをファイルに保存してブラウザで開いてみましょう。 重要なのは <canvas id="canvas" width="400" height="400"></canvas> の一文です。

下記HTMLをindex.htmlファイルとして任意の場所に保存し、ブラウザで開く

1<html>
2    <head>
3    <title>CANVAS</title>
4    <style>
5        body {
6            background-color: black;
7            text-align: center;
8        }
9        #canvas {
10            background-color: darkgray;
11        }
12    </style>
13    </head>
14    <body>
15        <canvas id="canvas" width="400" height="400"></canvas>
16    </body>
17</html>

11day 02

下記のコードをコンソールで実行する

1// コンソールで実行してみよう
2var canvas = document.getElementById('canvas')
3var ctx = canvas.getContext('2d')
4　　
5ctx.fillStyle = 'green' // 色を指定する
6ctx.fillRect(0, 0, 50, 50) // 矩形で塗り潰すエリアを指定する

四角形が書けましたか？

解説

  • getContext('2d') getContext('2d')関数の戻り値はcanvasに対して「色を塗る」「線を引く」「四角形を描く」などの機能を持ったオブジェクトです！ここでは、変数ctxに格納されています。 現時点では、'2d' 以外の引数はありません。将来的に '3d' が追加されるのかもしれません。(2d = 2 dimension, 二次元)

  • fillStyle 矩形や円の内部を満たす色を指定するプロパティです。

  • fillRect 矩形を描画する関数です。引数は x座標・y座標・width・height の4つです。

詳細を知りたい場合はMDNをみましょう。 直線を引く、円を描くなどのメソッドも用意されています。

課題

  • Canvasに直線や円を描いてみよう。
  • Canvasの使い方はMDNを見て調べよう。

次回はこちら JavaScript道場：12日目 / DOM操作 その❸

Copyright X-HACK 2021 All Rights Reserved.