【13日目】DOM操作 DOM操作その❹

01.09.2019 — javascript, tutorials — 1 min read

前回の続き・・・

前回は多めに課題を出しましたが、いかがでしたか？ +JavaScript道場：十二日目 / DOM操作その❸

課題の解説

toString(16) とは？

10進数で表現された数字を16進数に変換する関数。数値型(Number型)の変数の時に使えるメソッドです。

1var num1 = 165;
2console.log(num1.toString(16)) // a5
3　　
4var num2 = 235;
5console.log(num2.toString(16)) // eb

Math.floor とは？

引数として与えた数以下の最大の整数を返します。(小数を整数に変換する) 詳しくは MDN で Math.floorの項目を見ましょう。

1console.log(Math.floor(1.123413)) // 1
2console.log(Math.floor(33.123413)) // 33

Math.random とは？

0 以上 1 未満の疑似乱数を返す。詳しくは MDN で Math.randomの項目を見ましょう。

1Math.random() // 0~1未満の乱数が返る
2256*Math.random() // 0~256未満の乱数が返る

注意

これらを暗記しようと考えないでください。MDNに全て使い方は書いてあります。ベテランのエンジニアでも調べながら書くのが普通です。

大事なことなので二回言いました。

forを使ってたくさん四角形を書いてみよう

1// 前回作成したHTMLで実行すること！！
2// コンソールで実行してみよう
3var canvas = document.getElementById('canvas')
4var ctx = canvas.getContext('2d')
5　
6for(var i=0; i < 50; i++) {
7    // 50回繰り返す
8    ctx.fillStyle = randomColorCode() // 色を指定する
9    ctx.fillRect(
10        Math.random()*400,
11        Math.random()*400,
12        Math.random()*70 + 20, // 最低20以上のサイズにするため + 20
13        Math.random()*70 + 20  // 最低20以上のサイズにするため + 20
14    )
15}
16　
17// #000000 ~ #ffffff までの色コードを返す関数
18function randomColorCode() {
19    var randomColor = "#"
20    for(var i = 0; i < 6; i++) {
21        randomColor += Math.floor(16*Math.random()).toString(16)
22    }
23    return randomColor
24}

実際に生成された画像

注意：ランダムなので、実行するたびに色や大きさは異なります

setIntervalを使って一定間隔で四角形を沢山書く関数を実行しよう

1// 前回作成したHTMLで実行すること！！
2// コンソールで実行してみよう
3// 自分なりに書き換えてみよう
4var canvas = document.getElementById('canvas')
5var ctx = canvas.getContext('2d')
6　
7// setInterval(callback, intervalTime)
8setInterval(() => {
9    // 50回繰り返す
10    for(var i = 0; i < 50; i++) {
11        // 色を指定する
12        ctx.fillStyle = randomColorCode()
13        // 引数が長い場合、改行してもOK
14        ctx.fillRect(
15            Math.random()*400,
16            Math.random()*400,
17            Math.random()*70 + 20, // 最低20以上のサイズにするため + 20
18            Math.random()*70 + 20  // 最低20以上のサイズにするため + 20
19        )
20    }
21}, 200)
22　
23// #000000 ~ #ffffff までの色コードを返す関数
24// これ以外にも色々な書き方考えられます
25function randomColorCode() {
26    var randomColor = "#"
27    for(var i = 0; i < 6; i++) {
28        randomColor += Math.floor(16*Math.random()).toString(16)
29    }
30    return randomColor
31}

無名関数

無名関数と呼ばれる物があります。名前がついていない関数のことです。

アロー関数は無名関数の一種です。（無名関数の省略記法） callback関数を定義する時によく使われます。

1// 無名関数の書き方 () は引数、 {} に処理
2　
3// ① (引数, ...) => { 処理 }
4() => {}
5　
6// ② 引数があるとき
7(message) => { console.log(message) } // return なし
8(num) => { return nun * num } // return ありの場合
9　
10// ③ 無名関数を変数に格納
11var func = (num) => { return nun * num }
12func(100)
13　
14// ④ 即時実行
15((num) => { return num * num })(100)

下記の2パターンは同じ結果になるはずです。試して見ましょう。

パターン1

1function sayHello(message) {
2    console.log(message)
3}
4　　
5setInterval( sayHello , 200, "hello" )

パターン2

1setInterval( () => { console.log("hello") }, 200 )

Canvasの使い方紹介

もっとCanvasを使いこなしたい方は下記を参照してください

canvas intro

ここまでが前回の内容の確認でした。for / setInterval / 関数の復習になりましたか？

難しそうに見えるプログラミングも、基本的には「変数に値を保持する」「オブジェクトを作成する」「関数を定義する」「関数を実行する」「配列を操作する」「文字列を結合する」「四則演算」「繰り返し」「条件分岐」「DOMの操作」この基本的な事柄の組み合わせでしかありません。

プログラミングの90%以上はこれです。まずこの基礎を完全に使いこなせるようになってください。 引き続きDOMについて見ていきます。

課題

円を書いてみよう
円を移動させてみよう

じっくり考えて見てください。

DOM操作の概要 / 何ができるのか？

DOMを使用すると、JavaScriptは動的にHTMLを作成するために必要な すべての要素を取得 できます。

JavaScriptは、ページ内のすべてのHTML要素を変更することができます
JavaScriptは、ページ内のすべてのHTML属性を変更することができます
JavaScriptは、ページ内のすべてのCSSスタイルを変更することができます
JavaScriptは、既存のHTML要素と属性を削除することができます
JavaScriptは、新しいHTML要素や属性を追加することができます
JavaScriptは、ページ内のすべての既存のHTMLイベントに反応することができます
JavaScriptは、ページ内の新しいHTMLイベントを作成することができます

1<html>
2    <body>
3　　
4    　<p id="demo"></p>
5    　<p id="sample"></p>
6    　　
7    　<script>
8    　　
9    　 // id が demo の要素
10    　 document.getElementById("demo").innerHTML = "Hello World!";
11    　　
12    　 // id が sample の要素
13    　 var dom = document.getElementById("sample")
14    　　
15    　</script>
16    　　
17　</body>
18</html>

次回予告 - イベントハンドラについて -

クリックを検知して何かをしたい時は、onclick属性を使用します。

onclickのサンプルコード

1<html>
2    <body>
3    <button onclick="func()">ボタン Click me!</button>
4    　
5    <script>
6        function func() {
7            // ボタンをクリックすると、ここに書いた処理が実行される
8            alert("funcが実行されました")
9        }
10    </script>
11    　
12    </body>
13</html>

次回、イベントについて

MDN イベントリファレンス

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

【13日目】DOM操作 DOM操作 その❹