昔の記述の方法でまた実験してみましょう。
<script>の読み込み位置を本来の場所に戻してから
→
<body>すぐにあと追加
<p name="p1" id="p1"></p>
name（古い記述方法）もid（新しい方法）もとりあえず付けておく。
test1.jsにも追加
document.p1.innerHTML = 'あいうえお';
→読み込みなおすとエラーが出る。
Uncaught TypeError: Cannot set property 'innerHTML' of undefined
できそうでできない訳です。
では、getElementByIdでオブジェクト化してやりましょう。
--->test1.js
var str = document.f1.t1.value;
console.log(str);
//要素オブジェクト
//document.p1.innerHTML = 'あいうえお';
var p1 = document.getElementById('p1');
p1.innerHTML = 'あいうえお';
→これでちゃんと表示された。
・・・静的オブジェクトを動かすにあたっては、こういう経緯と歴史がありましたというお話。
Web safe colorの一覧表をつくろう
そのまえにからあげでサンプル。
今回の狙い：
今回cssの外部ファイル読み込みはしない。スクリプトも。一枚だけで完結させたいので。
スタイルシートは<head>内で定義をする。（きょうび普通はやらない。今回は特別に）
<head>
<meta charset="utf-8">
<title>Web Safe Color</title>
<style>
</style>
</head>
<body>内はulの空要素だけ置く。
<body>
<ul id="chart"></ul>
<script>
</script>
</body>
スクリプトも今回外部ファイル読み込みでなくhtmlに直接書きますよ。
雑談3：
チキンラーメンのおはなし
backgroundも直接記述。consoleも。
→
--->いままで。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Web Safe Color</title>
<style>
body{
background:#cfc;
}
</style>
</head>
<body>
<ul id="chart"></ul>
<script>
console.log('ok');
</script>
</body>
</html>
<ul>のなかに<li>を7つ追加。（これはデザイン用なので後で消す）
<style>の中に・hogeの中黒を消すためと、左詰めにするために追加。
横並びにするためdisplay:flex;を追加
折り返せのflex.wrap:wrap;もいれておく。
#chartのなかの子孫セレクタliに対しても記述する。
6列にするため横幅を16.6666ぐらいにする
パディングも入れよう。
横幅の考え方をボーダーまで考えた分にしろよもいれる。
上下左右にボーダーも入れよう。空白で区切る。順番はどうでもいい。
--->いままで
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Web Safe Color</title>
<style>
body{
background:#cfc;
}
#chart{
list-style-type:none;
padding:0;
display:flex;
flex-wrap:wrap;
}
#chart li {
box-sizing:border-box;
width: 16.66%;
text-align:center;
padding:1rem;
border: solid 1px #fff;
}
</style>
</head>
<body>
<ul id="chart">
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
</ul>
<script>
console.log('ok');
</script>
</body>
</html>
デザインはいったんこのくらいで。
ダミーの<li>7つは消す。
consoleも消す。
配列いきますよ。
<script>
var foods = ['おにぎり','カレー','餃子','ラーメン'];
</script>
配列をつくるときは普通に変数作るときのように宣言する。
慣例として変数名を複数形にする。
さて、この配列をさっきのリストに表示させたい。できる？
→
ヒント
1.親要素を取得（親要素を事前にオブジェクトして取得しておく必要がある）
2.子要素を生成する（ループ処理をつかうか使わないかはともかく、要素をクリエイトしないといけない）（createElement(*メソッド）)
）
3.子要素にコンテンツを入れる（中身をいれる）（innerHTML（*プロパティ））
4.子要素を親要素に追加（appendChild)
（ちょっと設定をかえます）
サクラエディタ→設定→タイプ別設定一覧→javascript/「一時適用」ボタン
これでHTMLで記述していてもscriptに色がつく
--->サンプルでヒントを
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Web Safe Color</title>
<style>
body{
background:#cfc;
}
#chart{
list-style-type:none;
padding:0;
display:flex;
flex-wrap:wrap;
}
#chart li {
box-sizing:border-box;
width: 16.66%;
text-align:center;
padding:1rem;
border: solid 1px #fff;
}
</style>
</head>
<body>
<ul id="chart">
</ul>
<script>
var foods = ['おにぎり','カレー','餃子','ラーメン'];
var ul = document.getElementById('chart');
var ele = document.createElement('li');
ele.innerHTML = 'からあげ';
ul.appendChild(ele);
</script>
</body>
</html>
このサンプルではからあげは1こだけは入った。次に続く。
