2月18日 - hinairo’s diary

学習内容

○paiza　

・復習問題　

　if、elseif、elseを記述。クリア

・新規問題

　何歩進んで何歩戻ったかの問題

　歩数の合計を$sum=-$b+$a計算して出力したが、他に手段はあるのか不明。

○progate　PHP 道場編

・配列で与えられた価格の合計金額を計算

　$totalPrice = 0;
　foreach( $prices as $price){　//＄priceの値は＄pricesの配列の値となる。
　$totalPrice += $price;　　//値毎に計算がされる。　
　}　//この閉じタグのなかで計算が繰り返される。
　echo '合計金額は'.$totalPrice.'円です';

・最高金額の出力　$totalPrice $maxPrice のPを大文字することに注意

$totalPrice = 0;　　　　　　//仮設定

$maxPrice = 0;　　　　　　//仮設定
foreach( $prices as $price){　//$pricesの配列の値が代入される合計を出す為に代入

　　　　　　　　　が繰り返される。
$totalPrice += $price; //合計金額
if($price >$maxPrice){ //もし計算中に（ループ中）$priceより大きい数字が

　　　　　　　　　　　　　　出てきた場合は
$maxPrice = $price; //$maxpriceとして上書きされる。

　　　　　　　　　　　　　　今回の例は配列の0が1000円で最高額となるため、

　　　　　　　　　　　　　　1000円が上書きされた。
}
}　　　　　　　　　　　　　　閉じタグは計算終わりにつける
echo '合計金額は'.$totalPrice.'円です';//
echo '<br>'; //改行
echo '最高価格は'.$maxPrice.'円です';//

・メニューの名前・価格を出力

$menu = array('name' => 'CURRY', 'price' => 900);
echo '$menuの値: ';
var_export($menu);　　// var_exportは変数の中身を見るための関数
echo '<br>';
echo '-----';
echo '<br>';
echo $menu['name'].'は'.$menu['price'].'円です';

・全てのメニュー名・価格出力

$menus = array(
array('name' => 'CURRY', 'price' => 900),
array('name' => 'PASTA', 'price' => 1200),
array('name' => 'COFFEE', 'price' => 600)
);

foreach($menus as $menu){　　　　//$menusのキーを$menuとして設定。
echo $menu['name'].'は'.$menu['price'].'円です'; //$menusの配列から代入。
echo '<br>';　改行がは入っているのでarray毎の出力の度に改行。
}

・メニュー名・価格と合計金額と最高金額出力

array('name' => 'PASTA', 'price' => 1200),
array('name' => 'COFFEE', 'price' => 600)
);
$totalPrice = 0;
$maxPrice = 0; 　　　　　　　　// 最高価格を入れるための変数
$maxPriceMenuName = '';　　　 // 最高価格のものの名前を入れるための変数
foreach ($menus as $menu) {
$name = $menu['name'];
$price = $menu['price'];

echo $name.'は'.$price.'円です';
echo '<br>';
$totalPrice += $price;　　　　　

if ($price > $maxPrice) {　　　　// $maxPriceに入っている価格より大きければ
$maxPrice = $price;　　　　　　// その価格で$maxPriceを上書きする
$maxPriceMenuName = $name;// 最高価格のものの名前で上書きする
}
}
echo '合計金額は'.$totalPrice.'円です';
echo '<br>';
echo $maxPriceMenuName.'が最高価格で'.$maxPrice.'円です';

○J/S 復習

・documentプロパティ

　JavaScriptのプログラム上で「document」オブジェクトを使えば、好きなHTML

　要素の情報を取得したり、新しくHTML要素を追加するような処理を簡単に実現

　できる。

　console.log(document.head);

　とした場合は＜head＞内の要素を全て出力できる。

・getElementById ※要素の取得

　<p id= "myid">hello world<P>

　console.log(document.getElementById("myid"));

　</script>

　とした場合

　出力結果：<p id= "myid">hello world<P>

　仮に

　console.log(documnt.getElemntById("textContent")）;

　</cript>

　→出力結果：hello world

　となり、要素を指定できることがわかる

　また

　var id = "myid";

　console.log(document.getElementById("myid");

　</script>

　→出力結果：<p id= "myid">hello world<P>

　とした場合の様に変数の要素も取得できる。

・createElement

任意のHTML要素をJavaScriptから生成することができるメソッドです。例えば「pタグ」「divタグ」「h1タグ」のHTML要素を生成すると

var p =document.createElement('p');

var div =document.createElement('div');

var h1 =document.createElement('h1');

これでそれぞれの変数「p」「div」「h1」にHTML要素が代入されることになるので、以降はJavaScriptからこれらの変数を使って操作できる。しかしこれは生成しただけであり、HTMLへ挿入しなければWebページには反映されないので一般的には「appendChild()」などのメソッドを活用する。

<body>

<p>Hello world</p>

var p = document.createElement('P');

p.textContent = 'こんにちは!’;

document.body.appenchild(P);

console.log(document.body);

</script>

<body>

→出力結果：

<body>

<p>'Hello world'</p>

<p>'こんにちは’</p>