JavaScript入門2　課題のプログラム例

1 文字が増えていく

以下の枠組みを前提として、

  <!doctype html>
  <p> </p>
  <script>
  //    ここで function add を定義するとして
  setInterval(add,5000)
  </script>

いずれかの要素のtextContentの値が変化していく、というプログラムにもできる。

  var p=document.getElementsByTagName('p')[0]
  // この p を得る式を add() の中に書いてもいいが
  // 毎回同じ値を得るだけなので最初に一回呼ぶだけでいい

  function add() {
      p.textContent+=" aaa"
      // 文字列に対する連結の代入演算子 += を使った
  }

が、（今日学んだワザとしては）要素を追加してみたいところ

  function add() {
      var pp=document.createElement('p')
      pp.textContent=" aaa"
      document.body.appendChild(pp)
  }

2 背景の色変化

「乱数色 javascript」などで検索してみると、色の生成方法はいろいろと見つかるだろう。
- ここではこのサイトから、以下のような関数を借用した。
```
    function colorGen(){
        return '#'+Math.floor(Math.random()*16777215).toString(16); 
    }
```

あとはこれを呼ぶ関数を作って定期的に実行するだけ

  function chg(){document.body.style.backgroundColor=colorGen()}
  setInterval(chg,500)

3 要素の寸法変化

JavaScript入門2にあるHTMLの枠組を前提として、

  var box=document.querySelector('div')
  // getElement系とは別のメソッドも使ってみた

  //毎回呼ぶ処理
  function mv() {
      var lf=box.clientLeft()
      // ##
      box.style.left=lf+2+'px'
  }
  // 毎回呼ぶ
  setInterval(mv,200)

ただし、これだとboxが枠外にはみ出たまま戻ってこないので、上のリストの ##部で条件判定をしておくといいだろう
```
  if(lf > document.body.clientWidth)
      lf=0
```

JavaScript入門2 課題のプログラム例

1 文字が増えていく

2 背景の色変化

3 要素の寸法変化

JavaScript入門2　課題のプログラム例