yattyondesu’sblog

yattyondesu’s blog

自分が好きなものについて書いたり気になったことについて不定期で書いていきます。目標は月1更新。

札束風呂を目指して初めてのJavaScriptを動画で学んでいく その3

今回も演習で作成したプログラムを載せていきます。

講義内容にhtmlやCSSなども加わってできることも増えるかわりに難しくなってきました。

 

第14回前半
配列を受け取り、最大値を返す関数

getMax=function(ary){
 var max=0;
 for(var count=0;count<ary.length;count++){
  if(max<ary[count]){
   max=ary[count];
  }
 }
 return max;
};

 

第14回後半
リンクや画像が入り混じったhtmlを作る

<html>
 <head>
 </head>
 <body>
  <a href="https://revinx.net/ustream/">UstreamChecker</a><br>
  <img src="2.png"><br>
  来てね!
 </body>
</html>

 

ある範囲の点数をとった人数を返す関数

getRangeCount=function(ary,min,max){
 var x=0;
 for(var count=0;count<ary.length;count++){
  if(min<=ary[count] && ary[count]<=max){
   x++;
  }
 }
 return x;
};

 

 

第15回前半

赤点(平均点の2分の1以下)をとった生徒の人数を返す関数

average=function(ary){
 var av=0;
 for(var count=0;count<ary.length;count++){
  av=av+ary[count];
 }
 return av/ary.length;
};
getRedStudentCount=function(ary){
 var num=average(ary)/2;
 var sum=0;
 for(var count=0;count<ary.length;count++){
  if(ary[count]<=num){
   sum++
  }
 }
 return sum;
};
console.log(getRedStudentCount([67, 23, 70, 51, 35, 66, 54, 99, 73, 88]));
console.log(getRedStudentCount([20, 83, 89, 100, 0, 52, 16, 89, 20, 37]));

 

 

第15回後半

htmlを用いて画像を表示するプログラム

<html>
<head>
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

<body>
 <img id="title" src="2.png"><br>
 <img id="content" src="image_reverse.png"><br>
 <img id="ending" src="2.png"><br>
 <script>
  $("#content").attr("src","2.png")
 </script>
</body>
</html>

 

グラフを作る関数 

//ある範囲の点数をとった人数を返す関数
getRangeCount=function(ary,min,max){
 var x=0;
 for(var count=0;count<ary.length;count++){
  if(min<=ary[count] && ary[count]<=max){
   x++;
  }
 }
 return x;
};
//グラフを作る関数
showGraph=function(ary){
 for(var c1=0;c1<getRangeCount(ary,0,9);c1++){
  console.log("|");
 }
 for(var c2=0;c2<getRangeCount(ary,10,19);c2++){
  console.log("|");
 }
 for(var c3=0;c3<getRangeCount(ary,20,29);c3++){
  console.log("|");
 }
 for(var c4=0;c4<getRangeCount(ary,30,39);c4++){
  console.log("|");
 }
 for(var c5=0;c5<getRangeCount(ary,40,49);c5++){
  console.log("|");
 }
 for(var c6=0;c6<getRangeCount(ary,50,59);c6++){
  console.log("|");
 }
 for(var c7=0;c7<getRangeCount(ary,60,69);c7++){
  console.log("|");
 }
 for(var c8=0;c8<getRangeCount(ary,70,79);c8++){
  console.log("|");
 }
 for(var c9=0;c9<getRangeCount(ary,80,89);c9++){
  console.log("|");
 }
 for(var c10=0;c10<getRangeCount(ary,90,99);c10++){
  console.log("|");
 }
 for(var c11=0;c11<getRangeCount(ary,100,100);c11++){
  console.log("|");
 }
};

今回はここまでです。

けっこういろいろできるようになった気がします。