未経験から実務レベルのWeb制作スキルを学ぶ基礎講座 見てみる

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

こんにちは、つるぴよ@(tsurupiyoo)です!
JavaScriptを勉強してフロントエンジニアを目指しています!
今回は学習ロードマップの1番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。

 

あわせて読みたい
【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す!11 JavaScriptを勉強してフロントエンジニアを目指しています! 今回は学習ロードマップの1番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。...

 

 

目次

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

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

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

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

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

今回は「setTimeout」を使って処理しています。
「setTimeout」の第1引数に「実行したい処理の関数」を
第2引数に「何ミリ秒後に処理を実行させるか」を書きます。
※ミリ秒は1秒の1000/1の長さなので1000ミリ秒が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);」とタイマー処理が実行される。
第1引数の「tokei」が第2引数に設定されている「1000ミリ秒」後に実行される。①〜③の処理が繰り返される

arguments(アーギュメンツ)

つるぴよ
つるぴよ
高度な内容になるのでさらっと流しておきます!
function tokei() {
    var ele = document.getElementById("target");
    ele.innerHTML = Date().toLocaleString();
    window.setTimeout(arguments.callee, 1000);
}
解説
「arguments」とは?
関数のプロパティの1つで、引数を表しています。
「arguments[0]」「arguments[1]」とすることで、「1番目の引数」「2番目の引数」を取り出すことができます。

この「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);

結果

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

第20話 スタイルシート

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

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

スタイルシートの基本

スタイルシートの書き方には3つ方法があります。
①タグに直接記入
②「<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 第19話〜第20話 まとめ

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

もりけん塾を運営している森田賢二さんのブログはこちらから👇

武骨日記

Twitterフロントエンジニア(@terrace_tech)のフォローは👇

フォローはこちら

目次