所持金額に応じて挙動を変える
<div id="budget"></div><!--所持金-->
<div id="act"></div><!--書き出し-->
<div>
文章の構造的意味はない。
複数の要素をまとめるというだけの意味。曖昧。
//ランダムな所持金額を生成
var budget = Math.ceil(Math.random()*50000);
var d1 = document.getElementById('budget');
要素はオブジェクトじゃない。
jsからみて扱えるように、すべての要素をオブジェクト化してやらないといけない。
この一行は、HTML上（いわば四条通を歩いてるひと）の要素（通行人の一人）をつかまえて、お前魔女の役ね、と名付けて割り振ることである。
d1の中身は「オブジェクト」であり、数値などではない。
→しかもd1は初めから（何も宣言しなくても全オブジェクトが）innerHTMLというプロパティを初めから持っている。
d1.innerHTML = '所持金額 '+budget+'円';
次の一行は、オブジェクトd1（JavaScriptが扱えるような形にしてある）の
プロパティ（初めから実装されており宣言は不要）に、
値を代入するという式である
HTMLはJSが全部実行されてから表示されるので、
1.HTML上の<div id="budget">が
2.JSで扱える形にするため
var d1 = document.getElementById('budget');
として、
3.そのd1のプロパティに値を代入したので
4.HTMLの<div id="budget">は値を表示した
肝心なのは、getElementByIdをかけないと、
jsはhtml上の要素を認識もつかむこともできないということだ。
--->test1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>条件分岐</title>
<link rel="stylesheet" href="test1.css">
</head>
<body>
<div id="budget"></div><!--所持金-->
<div id="act"></div><!--書き出し-->
<script src="test1.js"></script>
</body>
</html>
--->test1.js
//ランダムな所持金額を生成
var budget = Math.ceil(Math.random()*50000);
console.log(budget);
var d1 = document.getElementById('budget');
var d2 = document.getElementById('act');
var message;//表示文
d1.innerHTML = '所持金額 '+budget+'円';
//3000以上 ピザとナゲットを注文
//2000以上 ビザ
//1000以上 フライドポテト
//それ以下我慢します
if (budget>=30000){
message='ピザとナゲットを注文しよう！';
}else if(budget >= 20000){
message='ピザを注文しよう！';
}else if (budget >= 10000){
message='ポテトを注文しよう！';
}else{
message='我慢だ！';
}
d2.innerHTML = message;
