忍者ブログ

からすまる日誌 JavaScript

応用(6) 平均点、最高点の表示2 / jQuary

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

応用(6) 平均点、最高点の表示2 / jQuary

「より低かったら値を書き換える」の時の初期値が0なのはまずい。
最低点を求めるときの、変数の初期値は逆に100点にしておく必要がある。
 
saitei = 100; //とりあえず初期値は100点にする
for (var i=0; i<eigo.length; i++){
 if (saitei > eigo[i]){ //より低い点数がきたら
  saitei = eigo[i]; //値を上書き
 }
}
 

バブルソート
 
ソートのアルゴリズムの一つ。隣り合う要素の大小を比較しながら整列させること。
我こそと思うものはやってみるといい。
 
 

(自習 最高点者と最低得点者も表示)
 
--->sort1.html
 
<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>アルゴリズム</title>
 <link rel="stylesheet" href="sort1.css">
</head>
<body>
 <p id="heikin"></p> <!--平均点を表示-->
 <p id="saikou"></p> <!--最高点を表示-->
 <p id="saikou2"></p> <!--最高点を表示2-->
 <p id="saitei"></p> <!--最低点を表示-->
 <p id="saitei2"></p> <!--最低点を表示2-->
 <ul id="foo"></ul>
 <script src="sort1.js"></script>
</body>
</html>
  
 
--->sort1.js 
  
var eigo = [80,7,50,10,100,90,7,70,60,100];
var member = ['para','dise','tea','rose','time','harb','corn','ucc','coffee','tropical'];
var goukei = 0; //合計点
var foo = document.getElementById('foo');
 
//平均点を求める
for (var i=0; i<eigo.length; i++){
 goukei += eigo[i];
 
 var ele=document.createElement('li');//自習:配列内容をリストに表示
 ele.innerHTML=eigo[i];
 foo.appendChild(ele);
}
var heikin = goukei/eigo.length;
//console.log(heikin);
   
p1 = document.getElementById('heikin');//HTML上のheikinという定数文字列を取得
p1.innerHTML = '平均点は'+heikin;//変数のほうのheikinを代入して表示
  
//
  
//最高点を求める/Math.max.apple()を使う
var saikou = Math.max.apply(null,eigo);
p2 = document.getElementById('saikou');
p2.innerHTML = '最高点は'+saikou;
 
//最高点を求める2/for文を使う
var saikou2 = 0;
var maxMember;//最高得点者
 
for (var i=0; i<eigo.length; i++){
 if (saikou2 < eigo[i]){ //より大きな数が出たら
  saikou2 = eigo[i]; //値を上書き
  var maxMember = member[i]; //最高得点者を格納
 }else if(saikou2 == eigo[i]){ //同点が出た場合
    maxMember = maxMember + 'と'+member[i]; //最高得点者を追加
 }
}
p201 = document.getElementById('saikou2');
p201.innerHTML = '最高点は'+maxMember+' '+saikou2;
 
//最低点を求める/Math.min.apple()を使う
var saitei = Math.min.apply(null,eigo);
p3 = document.getElementById('saitei');
p3.innerHTML = '最低点は'+saitei;
  
//最低点を求める2/for文を使う
saitei2 = 100; //とりあえず初期値は100点にする
var minMember;//最低得点者
 
for (var i=0; i<eigo.length; i++){
 if (saitei2 > eigo[i]){ //より低い点数がきたら
  saitei2 = eigo[i]; //値を上書き
  var minMember = member[i]; //最低得点者を格納
 }else if(saitei2 == eigo[i]){ //同点が出た場合
    minMember = minMember + 'と'+member[i]; //最低得点者を追加
 }
}
p301 = document.getElementById('saitei2');//HTML上のsaitei2をオブジェクト化
p301.innerHTML = '最低点は '+minMember+' '+ saitei2;//オブジェクトに変数saitei2を入れる
 
 


jQuery(Jクエリー):
JavaScriptで作られたclassライブラリのこと。オープンソース。
 
もともとないメソッドを使って、あたらしいメソッドを利用するみたいな。
 

オブジェクトとは
classのインスタンス。
インスタンスとは実体のこと。
classを通して実体化されたものがオブジェクト。
jQuetyは非常に便利なメソッドを持っているclass
実現したいことを一言でメソッドで呼び出せるようにしつらえてある。
 
定型の動作をパッケージとしてまとめてある。

使うのに2つ方法がある。

1.DLしてローカル環境に同じものを用意しておく
2.インターネット上のサイトにソースを参照して利用する
 
インターネットが常につながってないと2は使えないので、最新版をDLしておくのがおすすめ。
 

https://jquery.com/にアクセス 
 

 
jくえのサイトに「圧縮版」「非圧縮版」があるが、
これはzipなどがしてあるという意味じゃない。
すべての改行やスペースを取り除いたのをcompressed(コンプレスト/圧縮版)という。 
1文字でもけちろうという精神。
 
uncompressedの方はソースコードをよく吟味したい人。利用したいだけならcompressedにする。
 

Download the compressed, production jQuery 3.4.1(圧縮版/プロダクションJくえ)
Download the uncompressed, development jQuery 3.4.1(非圧縮版/開発者向けJくえ)
 
一番最新版は人柱版なので、デベロッパー版の最新版はやめたほうがよろしい。
新しいものはバグがつきもの。
ステイブルバージョン(安定版)を私たちは使うのがよろしい。
 
枯れた技術:
バグが取り除かれて安定して動く状態のこと
 
Download the compressed, production jQuery 3.4.1をクリックして、
ctrl+A
ctrl+C
でコピー
 
サクラエディタでctrl+V
 
名前をつけて保存するが、URLをそのままこぴってver番号まで持っている形で保存する。
 
jquery-3.4.1.min.js
 
保存先はjavaScriptフォルダのルート(日付フォルダのいっぱい入っているところ)
 
PR

コメント

ただいまコメントを受けつけておりません。

ブログ内検索

P R