pandaNote

全てのWEBサイトは見つけてもらうために存在する

繰り返し確認しておきたいJavaScriptメモ

JavaScript

先生のブログ　チェックテスト(1) (2) (3)

http://d.hatena.ne.jp/web-mind/20151217/p1

http://d.hatena.ne.jp/web-mind/20151221/p1

http://d.hatena.ne.jp/web-mind/20151227/p1

 

先生のブログ　確認テスト(1) (2)

http://d.hatena.ne.jp/web-mind/20151210/p1

http://d.hatena.ne.jp/web-mind/20151228/p1

 

 

計算の演算子と論理演算子

http://d.hatena.ne.jp/web-mind/20151203/p1

 

 

コンソールに「山田太郎」と表示するスクリプトです。


<script>
var user = { name:'山田太郎', age:25, height:170 };
console.log (user.name);
</script>

 

※連想配列の要素の値を取得するには、ドットを使います

 

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>

10からのカウントダウンを、コンソールに表示させなさい

</title>
<body>
<script>
for (var i = 10 ; i >= 0 ; i--) {
console.log(i);
}
</script>
</head>

</body>
</html>

 

  

 

配列fruitsの要素を一覧表示するスクリプトです。

 
<script>
  var fruits = ['りんご', 'みかん', 'パイナップル', 'ぶどう', 'バナナ'];
  for (var i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
  }

</script>

 

 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【関数】３の倍数</title>
<script>
var num;

function btn() {
num=parseInt( prompt ('数字を入力してください', '' ));
if( num%3===0 ) {
alert ( num + 'は３の倍数です！' );
} else {
alert ( num + 'は３の倍数ではありません...' );
}
}
</script>
</head>
<body>
<h1>3の倍数を判別します。</h1>
<p><button onclick="btn()">判別します</button></p>
</body>
</html>

 

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>サイコロの奇数の目だけを表示させない</title>
</head>
<body>

<script>
for(var i=1; i<=6; i++){
console.log('<img src="img/ph' +i+ '.jpg" alt="">');

if(i %2===1);
document.write('<img src="img/ph' + i + '.jpg" alt="">');
}

</script>


</body>
</html>

 

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>関数 偶数か奇数かの判別します</title>
<script>
var num;

function evenodd(){
num = parseInt(prompt('半角数値を入力してください。'));

if(num %2 ===0){
alert(num + 'は偶数です。');
}else{
alert(num + '奇数です。')
}
}
</script>
</head>
<body>
<h1>偶数か奇数かの判別します</h1>
<p>ボタンをクリックすると数値を入力するウインドウが表示されます。</p>
<p><button onclick="evenodd()">判別する</button></p>
</body>
</html>

 

 

指定した回数だけ処理を繰り返す - for文Add Star

http://d.hatena.ne.jp/web-mind/20151219/p1

for ( 変数の初期値； 繰り返し条件； 変数の変更 ) {

　　実行される処理

}

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
</head>
<body>
<h3>偶数の合計</h3>
<p>以下のボタンをクリックすると、<br>
2、4、6、8、…、100を全て合計した結果を表示できます。</p>
<p><button onclick="total()">計算結果</button></p>
<script>
function total() {
  var ans = 0;　//大事//
  for (i=2 ; i<=100 ; i+=2) {
    ans += i;
  }
  alert('2、4、6、8、…、100の合計は、' + ans+ 'です');
}
</script>
</body>
</html>

 

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>

1～100までの合計をダイアログボックスに表示させなさい。

</title>
<script>
var sum =0;

function btn(){
for(var i=1; i<=100; i++){
sum+=i;

//※sumの値がiのカウンタ変数を利用して合算していきます//

console.log(i);
}
alert('1~100の合計は' +sum+ 'です。');
console.log(i);
}
</script>

</head>
<body>
<h1>ボタンを押すと１～100までの合計を求めます。</h1>
<p><button onclick="btn()">求める</button></p>
</body>
</html>

 

 

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>

入力した数字までの合計をダイアログボックスに表示させなさい。

</title>
<script>

function btn(){
var sum=0;
var number;
number = parseInt(prompt('数値を入力してください'));
console.log(i);
for(var i=1; i<=number; i++){
sum+=i;
console.log(i);
}
alert('1~' +number+ 'の合計は' +sum+ 'です。');
}


</script>
</head>
<body>
<h1>１から入力された数値までの合計を求めます。ボタンを押してください。</h1>
<p><button onclick="btn()">求める</button></p>
</body>
</html>

 

 

 

while文Add Star

while文は繰り返し回数が決まっていない場合に使われる場合が多い

http://d.hatena.ne.jp/web-mind/20151218/p1