【学習ログ12】 JavaScript タイマーによる処理・スタイルシート

2020年9月17日2020年9月27日

こんにちは、つるぴよ@(tsurupiyoo)です！

JavaScriptを勉強してフロントエンジニアを目指しています！
今回は学習ロードマップの１番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。

マンガJavaScript第１９話　タイマーによる処理

つるぴよ

今回は「特定のタイミングで処理を実行する方法」を学んでいこう！

「タイマー」処理‥一定時間経過した後にプログラムを実行させる方法。

タイマー処理には代表的にな２種類のメソッドがあります！

「setTimeout」‥一定時間後に特定の処理を行う（１度だけ）。
「setInterval」‥一定時間にごとに特定の処理を繰り返す。

今回は「setTimeout」を使って処理しています。
「setTimeout」の第１引数に「実行したい処理の関数」を
第２引数に「何ミリ秒後に処理を実行させるか」を書きます。
※ミリ秒は1秒の１０００/１の長さなので１０００ミリ秒が1秒です。

タイマー

これから画面に日時を表示して1秒ごとに更新していくプログラムを書いていきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script>
        function tokei() {
            document.body.innerHTML = Date().toLocaleString();
            window.setTimeout(tokei, 1000);
        }
        </script>
    </head>
    <body onLoad="tokei();">
    </body>
</html>

解説
①「」タグの「onLoad」属性で「tokei」関数を呼ぶ
②「body」要素の中に現在の日時が表示される
③「window.setTimeout(tokei, 1000);」とタイマー処理が実行される。
第１引数の「tokei」が第２引数に設定されている「1000ミリ秒」後に実行される。①〜③の処理が繰り返される

arguments（アーギュメンツ）

つるぴよ

高度な内容になるのでさらっと流しておきます！

function tokei() {
    var ele = document.getElementById("target");
    ele.innerHTML = Date().toLocaleString();
    window.setTimeout(arguments.callee, 1000);
}

解説
「arguments」とは？
関数のプロパティの1つで、引数を表しています。
「arguments[0]」「arguments[1]」とすることで、「１番目の引数」「２番目の引数」を取り出すことができます。

この「arguments」には「callee」という「呼び出し元」を示す特殊なプロパティがあります。

呼び出し元が「無名関数」だった場合は、「arguments.callee」はその「無名関数」を指します。

インターバル

つるぴよ

定期的に処理を行う専用の関数「setInterval」を学んでいこう！

前回は「setTimeout」を使いましたが、今回は2つ目の「setInterval」を使って同じような処理を書いてみましょう！

// 時間を1秒ごとに表示
setInterval(function() {
    document.body.innerHTML = Date().toLocaleString();
}, 1000);

「タイマー」や「インターバル」の解除はどうするの？

「setTimeout」と「setInterval」を実行すると戻り値としてidを戻します。
このidを利用して処理を終了させることができます。

表にするとこうなります。

内容	セットとidの取得	idを使った解除方法
一定時間ごの処理	var id = setTimeout(func, tm);	clearTimeout(id);
一定時間毎の定期処理	var id = setInterval(func, tm);	clearInterval(id);

var count = 0;
var id = setInterval(function() {
    document.write(count + "<br>");
    count ++
    if (count >= 10) {
        clearInterval(id);
        document.write("end.<br>");
    }
}, 500);

結果

0
1
2
3
4
5
6
7
8
9
end.

第２０話　スタイルシート

つるぴよ

「スタイルシート」は文章の見た目を指定する方法だよ！

Webページでは「CSS」というスタイルシート言語で見た目を定義します。

スタイルシートの基本

スタイルシートの書き方には３つ方法があります。
①タグに直接記入
②「<head>」タグ内の「<style>」領域に記入
③「スタイルシート」の外部ファイル化

①の書き方はこちら

<div style="font-size:1000%;">どでかフォント</div>

「<div>」タグの「<style>」属性に直接見た目の設定を書き込んでいます。

②の書き方はこちら

<head>
    <meta charset="UTF-8">
    <style type="text/css">
    div {
        font-size:80%;
    }
    </style>
</head>

「<head>〜</head>」タグ内の「<style type=”text/css”>〜</style>」内に見た目の設定を書き込んでいます。

③の書き方はこちら

<link rel="stylesheet" type="text/css" href="out.css">

上記のコードを「<head>〜</head>」タグ内に書き込んで別ファイルを作ります。

スタイルシート書き方まとめ

// タグに直接書く場合
<タグ名 style="プロパティ名:値; プロパティ名:値; ……">～</タグ名>

// 『<style>』タグ内や外部ファイルに書く場合
セレクタ {
    プロパティ名:値;
    プロパティ名:値;
    ：
}

// 改行はしなくてもよい
セレクタ {プロパティ名:値; プロパティ名:値; ……}

つるぴよ

各プロパティは「;」(セミコロン)で区切るのを忘れずに！

スタイルシートのコメントの書き方

スタイルシートでコメントアウトしたい部分は
「/*～*/」で囲みます。

「セレクタ」について

どの要素を対象にするかを指定する方法を「セレクタ」と呼びます。
代表的な書き方をまとめました。

書き方	対象の要素
*	全ての要素
div	「div」タグの要素
div.target	「div」タグの中で、「class」が「target」の要素
.target	「class」が「target」の要素
div#target	「div」タグの中で、「id」が「target」の要素
#target	「id」が「target」の要素
h1,h2,h3	「h1」タグか「h2」タグか「h3」タグの要素
div a	「div」タグの中で使われる「a」タグの要素
.target span a	「class」が「target」の要素の中で使われる「span」タグの中で使われる「a」タグの要素

タグによっては以下のような指定方法もあります。

書き方	対象の要素
a:link	「a」タグ (リンク)の通常の表示
a:visited	「a」タグ (リンク)の訪問時の表示
a:active	「a」タグ (リンク)のクリックした瞬間の表示
a:hover	「a」タグ (リンク)のマウスオーバー時の表示
a.target:visited	「a」タグ (リンク)の中で、「class」が「target」の訪問時の表示

セレクタの優先順位

つるぴよ

セレクタの優先順位についてみていこう！

①順番
基本的には後から書かれたものが優先されます。
②対象の絞り込み
より詳細に対象を絞り込めたものが優先されます。
③「style」属性
「<head>～</head>」内で指定したものよりも属性に直接指定したものが優先されます。
④強制的な優先
「!important」という記述を優先したい設定に書くと優先されます。

JavaScriptからの「スタイル」操作

「スタイルシート」で指定する際とJavaScriptから操作する場合は「スタイル」の名前が変わってきます。

＜例　「font-size」という「スタイル」の場合＞
スタイルシート→「font-size」
JavaScript→「fontSize」
上記のようにJavaScriptの場合、「~」（ハイフン）がなくなり、その後の文字が「大文字」になります。

つるぴよ

スタイルシートは一部ブラウザ依存が存在するよ！

マンガJavaScript　第１９話〜第２０話　まとめ

ここまで学習した内容をまとめます！
・タイマー処理について
　「setTimeout」
・arguments（アーギュメンツ）
・インターバル
　「setInterval」
・タイマーやインターバルの解除
・スタイルシートの基本
・セレクタについて
　優先順位