求職者支援訓練Webサイト制作科 4月18日開講クラス 漂泊

初心者がプロになるための勉強 フェリカテクニカルアカデミーWebサイト制作科 4月18日開講クラス授業補足ブログ

JavaScriptの書き方 - 実践(1)

JavaScriptの書き方

  • 変数
  • innerHTML
  • for文
  • Dateオブジェクト
変数宣言
  • プログラムの中で一度だけ初期化を行う場合
<script>
var ans = 0;
</script>
  • 複数の場所で、そのつど初期化が必要な場合
<script>
var ans;
ans = 0;
</script>
  • forで使うループ変数は、for文の中で宣言することも可能
<script>
for (var i=1; i<=10; i++) {

}
</script>
innerHTML
  • document.write()は、HTML5の仕様書では非推奨です
  • document.write()に変わるものとして、innerHTMLがあります
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像をブラウザーに表示</title>
</head>
<body>
<script>
var i, str = '';
  for( i=1; i<=3; i++ ) {
    str += '<img src="panda.png" alt="">';
  }
document.body.innerHTML = str;
</script>
</body>
</html>

f:id:pbhfq:20171228223422p:plain


<script>
var i, str = '';
  for( i=1; i<=3; i++ ) {
    str += 'パンダ';
    str += '<img src="panda.png" alt="">';
  }
document.body.innerHTML = str;
</script>

f:id:pbhfq:20171228224546p:plain


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像をブラウザーに表示</title>
</head>
<body>
<script>
var i, str = '';
  for( i=1; i<=9; i++ ) {
    str += '<img src="img/' + i + '.png" alt="">';
  }
document.body.innerHTML = str;
</script>
</body>
</html>

f:id:pbhfq:20171228230941p:plain


<script>
var i, str = '';
  for( i=9; i>=1; i-- ) {
    str += '<img src="img/' + i + '.png" alt="">';
  }
document.body.innerHTML = str;
</script>

f:id:pbhfq:20171228231309p:plain

時間を取得して変更
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景色を時間判別で変更</title>
</head>
<body>
<script>
var today = new Date();
var h = today.getHours();

if( 6<=h && h<18 ) {
  document.bgColor = '#FFFBD1';
  document.body.innerHTML = '<h2>こんにちは</h2>';
} else {
  document.bgColor = '#DBECFF';
  document.body.innerHTML = '<h2>こんばんは</h2>';
}
</script>
</body>
</html>
多重ループ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像をブラウザーに表示</title>
</head>
<body>
<script>
var i, j, str = '';
for( i=1; i<=6; i++ ) {
  for( j=1; j<=9; j++ ) {
      str += '<img src="img/bee.png" alt="">';
  }
  str += "<br>";
}
document.body.innerHTML = str;
</script>
</body>
</html>

f:id:pbhfq:20171229001247p:plain


《ループ変数の値の変化》

i の値 j の値

1

1
1 2
1 3
2 1
2 2
2 3

求職者支援訓練 フェリカテクニカルアカデミー