20200730 授業メモ for文 forネスト文 do while文 オブジェクトの組み込み
〇JSとHTMLの連動について
for文の復習
var itemList = [
'いちご',
'みかん',
'りんご',
];
console.log('文字列連結の復習')
var code2 = '<h1>見出し１</h1>';
document.getElementById('display3').
innerHTML = code2;
// var code3 = '<ul>\n'
// code3 += '<li>項目1</li>\n';
// code3 += '<li>項目2</li>\n';
// code3 += '<li>項目3</li>\n';
// code3 += '</ul>\n';
// console.log(code3);
var code3 = '<ul>\n'
code3 += '<li>' + itemList[0] + '</li>\n';
//' + itemList[0] + 'を入力するとHTML側でitemListの０番地に設定されている値が代入される。
code3 += '<li>' + itemList[1] + '</li>\n';
code3 += '<li>' + itemList[2] + '</li>\n';
code3 += '</ul>\n';
console.log(code3);
//追加問題
// 嵐の名前を配列で管理して
// 番号付きリストで名前をブラウザに表示
// リストで表示時は敬称をつけること
// 「表示箇所2」に表示すること。
// 大野 智
// 櫻井翔
// 相葉 雅紀
// 二宮和也
// 松本 潤
var stormList = [
'おーの',//0
'さくらい',//1
'あいば',//2
'にの',//3
'まつじゅん',//4
];
console.log(stormList);
var code5 = '<ol>\n'
for (var i = 0; i < stormList.length; i++) {
code5 += '<li>' + stormList[i] + '</li>\n'
}
code5 += '</ol >\n';
document.getElementById('display2').
innerHTML = code5;
--- 追加問題-- -
// 嵐の名前を配列で管理して
// 番号付きリストで名前をブラウザに表示
// リストで表示時は敬称をつけること
// 「表示箇所2」に表示すること。
// 大野 智
// 櫻井翔
// 相葉 雅紀
// 二宮和也
// 松本 潤
var stormList = [
'おーの',//0
'さくらい',//1
'あいば',//2
'にの',//3
'まつじゅん',//4
];//メンバーの配列管理
console.log(stormList);
var code5 = '<ol>\n';//☆この形で囲う
for (var i = 0; i < stormList.length; i++) {
code5 += '<li>' + stormList[i] + '</li>\n'
}//この形を覚えること
code5 += '</ol >\n';//☆閉じる
document.getElementById('display2').
innerHTML = code5;
〇for nest文
var code;//HTMLコード管理用
console.log('１回目の出力');
code = '';
//空文字を入れてundifunedを文字列型に変換しておく
//文字列型に変更後、for文で追記する。
for (var i = 0; i < 3; i++) {
code += '★★★';
code += '<br>\n';
}
console.log(code);
document.getElementById('display1').innerHTML = code;
//☆３つで１セットを0～2回分繰り返して表示。トータル9つ表示
console.log('２回目の出力');
code = '';
for (var j = 0; j < 3; j++) {
code += '★';
}
console.log(code);
document.getElementById('display2').innerHTML = code;
//☆1つを0～2回分繰り返して表示。トータル3つ表示。
console.log('３回目の出力');
code = '';
for (var i = 0; i < 3; i++)//行を担当
{
for (var j = 0; j < 3; j++)//☆の個数を担当
{
code += '★';
}
code += '<br>\n';
}
console.log(code);
document.getElementById('display3').innerHTML = code;
//カウント変数を複数用いたい場合はiから順番にjk・・を使用する。
３回目出力の流れ図 ・・長い
--- 練習問題-- -
ブラウザ上に★☆★☆を３行表示させること
JSテキストP152
console.log('4回目の出力');
code = '';
for (var m = 0; m < 3; m++)//行を担当
{
for (var n = 0; n < 2; n++)//☆の個数を担当
{
if (n % 2 == 0) {
code += '★';
} else {
code += '☆';
}
} code += '<br>\n';
}
console.log(code);
document.getElementById('display4').innerHTML = code;
〇do while文
do {
繰り返し対象処理
} while (条件式)
〇組み込みオブジェクト
例題
console.log('１回目の出力');
console.log(Math.PI);//プロパティの参照
//大文字を使用されている。大文字で書かれた変数は定数。
//暗黙のルールらしい
console.log('２回目の出力');//consoleオブジェクトのlogメソッドを呼び出している
console.log(Math.ceil(3.3));//メソッド呼び出し//切り上げ処理
//MATHオブジェクトのceilメソッド引数を使って「3.3」を渡す。
//MATHオブジェクトが切り上げ処理を実行
//切り上げ処理の結果「4」が返り値としてメソッド呼出し位置に返る。
console.log(Math.floor(3.3));//メソッド呼び出し//切り捨て処理
console.log(Math.round(3.3));//メソッド呼び出し//四捨五入
console.log(Math.max(5, 2, 10));//メソッド呼び出し//最大値を返す。この場合10
console.log(Math.min(5, 2, 10));//メソッド呼び出し//最小値を返す。この場合2
console.log(Math.random());
//メソッドに渡す値がなければ何も書かない。
//でもメソッドなので（）は必ず記述。()がないとプロパティになってしまう。
//このメソッドは0-1未満の小数(乱数)を返すメソッド。
MATHに関するコアなサイト
//組み込みオブジェクトはJSがあらかじめ用意しているオブジェクト
//オブジェクト内の値（プロパティ）を参照したい
オブジェクト名、プロパティ名
//オブジェクト内の処理（メソッド）を呼び出したい
オブジェクト名、メソッド名（）
// ※（）が最後にあるかどうかでプロパティとメソッドの判断する。
