忍者ブログ

からすまる日誌 JavaScript

応用(4) 配列、文字列定数と変数

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

応用(4) 配列、文字列定数と変数

配列のおさらい
 
var fname = ['山田','佐藤','小林','藤井'];
var sname = ['太郎','花子','幸子','大地'];
 
この全組み合わせを<ul>内のリストに表示。
 
手順:
1.親要素を取得 getElementById
2.子要素を生成 createElement
3.コンテンツを入れる innerHTML
4.親要素に追加 appendChild
 
毎回よくミスってるところ
1.「getElementById」も「createElement」もその前にdocument.が必要
2.その時には()の中はシングルコート
3.appendChildでeleを追加するときは()内にシングルコートは不要
  
--->test3.html
 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>繰り返し処理</title>
 <link rel="stylesheet" href="test3.css">
</head>
<body>
 <h1></h1>
  <ul id="hoge"></ul>
  <script src="test3.js"></script>
</body>
</html>
 
 
--->test3.js
 
//配列
var fname = ['山田','佐藤','小林','藤井'];
var sname = ['太郎','花子','幸子','大地'];
hoge = document.getElementById('hoge');
for(j=0; j<4; j++){ //苗字fnameに関して
 for(i=0; i<4; i++){ //名前snameに関して
  var ele = document.createElement('li');
  if(i==1 || i==2){
   var lname=' さん';
  }else{
   var lname=' くん';
  }
 ele.innerHTML = fname[j]+sname[i]+lname;
 hoge.appendChild(ele);
 }
}
 
 

オブジェクト指向の時はたいてい、
 
オブジェクト.メソッド(メソッドとは処理のこと)
と記述。もうひとつは、
 
オブジェクト.プロパティ=値
 
innerHTMLはプロパティのほう。
hoge.appendChild(ele); ←これはメソッドのほう。

シングルコートで囲まれているのは例外なく定数。
文字列定数という。
HTML上にidとして名付けられたhogeに、何かを代入しちゃうとかはできない。あくまでただの名前(文字列定数)なので。
  
eleは変数なので、シングルコートで囲むと逆に「そんな定数ないよ」と言われてしまう。
eleには中身があり、この場合変数の中身は、「document.createElement('li');」である。
 
PR

コメント

ただいまコメントを受けつけておりません。

ブログ内検索

P R