はてなブログの「アーカイブページをアーカイブするカスタマイズ」のjQueryを1つづつ解析してみた：その５

5回目です！
JavaScriptやjQueryの知識が無いので、今回も翻訳レベルで単語や文法を調べていきます。（間違っていたら泣く・・・）
長すぎて変数に何が入ってるのか忘れてきたから、もうちょっと纏め方に工夫をしないとなぁ・・・。

元のプログラムがあるサイト​​

【レスポンシブデザイン向け】はてなブログアーカイブページの記事数を変更するカスタマイズを作りました - 小さな星がほらひとつ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$('#main-inner').ready(function(){
 "use strict";
 var pc_width = 600;
 var device = window.screen.width < pc_width ? 'sp' : 'pc';
 device = (device == 'pc' && $(window).width() > pc_width) ? 'pc' : 'sp';
 var view_sec_num = 5; <!-- ここに1回あたりの表示記事数を設定 -->
 var sections = $('#main-inner > div.archive-entries > section');
 if((sections.length > view_sec_num) && device == 'sp') {
   var page_index = 0;
   var $entries_archive = null;
   var archive_num = 0;
   $entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
   $entries_archive.insertBefore(sections[0]);
   for(var i=0; i < view_sec_num; i++) {
     $(sections[i]).appendTo($entries_archive);
     page_index += 1;
   }

////////今回はここから///////////////////////
   archive_num += 1;
   for(var i=view_sec_num; i < sections.length; i++) {
     if(page_index==view_sec_num) {
       var $read_more_link = $('<p style="text-align:center;background:#ddd"><a href="javascript:void(0)" style="line-height:3;font-size:80%:">もっと表示する</a></p>');
////////ここまでやります///////////////////////

       $read_more_link.on('click',{archive_num: archive_num},function(e){
         $(e.target).hide();
         $('#entries-archive-' + e.data.archive_num).fadeIn("slow");
       });
       var $before_archive = $('#entries-archive-' + (archive_num-1));
       $before_archive.append($read_more_link);
       $entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
       $entries_archive.hide();
       $entries_archive.insertAfter($before_archive);
       page_index = 0;
       archive_num += 1;
     }
     $(sections[i]).appendTo($entries_archive);
     page_index += 1;
   }
   $entries_archive.hide();
 }
});
</script>

解析するコードを書きましたが、設定の仕方等は上のサイトを御覧下さい。

【用語説明参照サイト】

・web design lab
・SMART
・WEB　MANABU
・HTML辞典
・js STUDIO
・HTMLクイックリファレンス
・Qiita
・teratail
・stack overflow
・ONZE/BLOG　オンズ開発ブログ
・ウェブランサー
・MDN web docs moz://a
・Samurai Blog
・TASK NOTES
・Webプログラミング入門
・jQuery入門
・「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
・Web’Notes
・Handy Web Design
・パソコンあれこれ
・TECH PLAY

【解析その１】if文の中身

archive_num += 1;

【意味】
varで作った「archive_num」という名前の箱に
「0 （archive_numに入ってる数字）+ 1」
の計算結果を入れる。

簡単に言ったら、「1」足してます。
※初期段階では、「0」が入っています。

「archive_num」については、その３で説明しています。
「+=」については、その４で説明しています。

【解析その２】if文の中の for文本体

for(var i=view_sec_num; i < sections.length; i++) {
}

【意味】
「5」（箱i）が、
箱「sections」に入ってる<section>タグの数より小さい間だけ、
for内の「{ }」を実行する。
・・・って事かな。

【for文：最初の設定】
最初にvarで作った「i」という名前の箱に、「5」（箱「view_sec_num」に入ってる固定数字）を入れる。

【条件とカウント】
・箱「i」の中の数字が箱「sections」に入ってるsectionタグの数より小さい間だけfor内の「{ }」を繰り返し動かす
・箱「i」の中の数字に「1」（数字）を足す

※前回の箱「i」と同じ名前の箱が出てきましたが、今回は一度初期化として「5」を入れてるので、別物として見て下さい。

「for( ; ; ){ }」については、その４で説明しています。
「var」については、その１で説明しています。
「view_sec_num」については、その２で説明しています。
「sections」については、その２で説明しています。
「.length」については、その３で説明しています。
「++」については、その４で説明しています。

【解析その３】if文の中の for文の中の if文本体

 if(page_index==view_sec_num) {
}