JSのスライドビュー　pageNumの呼び出しが２つある理由が知りたい

初めてのJSに記載されているページビューの件です。
過去にも質問と回答があり、拝見したのですが認識が正しいかどうか確認をしたいのと分からない部分を教えていただきたいです。

このコードではスライドビューでページを開くたびにページ数を表示するように書かれています。
id属性pageをJSで取得して、ページを更新するたびに現在のページ数表示されるようになっています。

html
1
2<!doctype html>
3<html>
4<head>
5<meta charset="UTF-8">
6<meta name="viewport" content="width=device-width,initial-scale=1">
7<meta http-equiv="x-ua-compatible" content="IE=edge">
8<title>5-05_slide</title>
9<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
10
11<!-- ここからはCSS　-->
12<style>
13.slide {
14	margin : 0 auto;
15	border: 1px solid black;
16	width: 720px;
17	background-color: black;
18}
19img {
20	max-width: 100%;
21}
22.toolbar {
23	overflow: hidden;
24	text-align: center;
25}
26.nav {
27	display: inline-block;
28}
29#prev {
30	float: left;
31	width: 40px;
32	height: 40px;
33	background: url(images/prev.png) no-repeat;
34}
35#next {
36	float: left;
37	width: 40px;
38	height: 40px;
39	background: url(images/next.png) no-repeat;
40}
41#page {
42	display: inline-block;
43	float: left;
44	margin-top: 8px;
45	height: 32px;
46	color: white;
47}
48
49</style>
50</head>
51<body>
52<header>
53<div class="header-contents">
54<h1>スライドショー</h1>
55<h2>何枚目の画像か表示する</h2>
56</div>
57</header>
58<div class="main-wrapper">
59<section>
60	<div class="slide">
61		<div class="image_box">
62			<img id="main_image" src="images/image1.jpg">
63		</div>
64		<div class="toolbar">
65			<div class="nav">
66				<div id="prev"></div>
67				<span id="page"></span>
68				<div id="next"></div>
69			</div>
70		</div>
71	</div>
72</section>
73</div>
74<footer>JavaScript Samples</footer>
75</body>
76</html>

JavaScript
1
2<script>
3var images = ['images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg', 'images/image4.jpg', 'images/image5.jpg'];
4var current = 0;
5var pageNum = function(){
6	document.getElementById('page').textContent = (current + 1) + '/' + images.length;
7}
8var changeImage = function(num) {
9	if(current + num >= 0 && current + num < images.length) {
10		current += num;
11		document.getElementById('main_image').src = images[current];
12		pageNum();
13	}
14};
15
16pageNum();
17
18
19document.getElementById('prev').onclick = function() {
20	changeImage(-1);
21};
22document.getElementById('next').onclick = function() {
23	changeImage(1);
24};
25</script>

以上がコードです。
JSでpageNumの呼び出しが２回あります。

自分の認識を書いてみます。確認と訂正をいただけると幸いです。

最初のpageNum（changeImageイベントの中、if文の中に書いてあるpageNum）はchangeImageのイベント発生時の処理の中（ページ数を更新する処理）なので、changeImageイベントが発火するとpageNumが呼び出されページ数が更新される。
つまり、changeImageで戻ったり、進んだりする処理が発火したと同時にpageNumも呼び出されるので、changeImageの中に書いてある。

これが自分の考えた答えです。
そして２つ目のpageNumの意味が正直全くわかりません。これの必要性が理解できないです。

よって
①最初のpageNumの認識は正しいか？
②２つめのpageNumの意味を教えて欲しい

以上がご質問になります。

初めての質問でうまく質問できませんでしたが、ご回答いただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

２つ目の pageNum はページを読み込んだ直後に実行されて、ページ位置の初期値を書き込んでます。

HTMLの<span id="page"></span>に最初から<span id="page">1/4</span>と記述しておけば必要ないですけどね。

投稿2019/09/27 12:18

hatena19

総合スコア34073

shuntahyodo

2019/09/27 12:40

早速のご回答ありがとうございます！ページを読み込んだ際はchangeImageは実行されないため、最初の段階で必要とわかりました。 #prev,#nextをクリックした時に初めてchangeImageが発火して、ページ数の分母分子が表示されることも確認しました。そこでもう一つ質問なのですが、２つ目のchangeImage（いわゆるグローバル変数？）をどこに書くとかいう決まりはありますか？今回は一つ目の呼び出しのあとですが、何かルールや決まりごとがあれば教えていただきたいです。よろしくお願いいたします。

hatena19

2019/09/27 17:29

２つ目のchangeImage？今回は一つ目の呼び出しのあと？ちょっと質問の意味が分かりません。

shuntahyodo

2019/09/28 00:59

失礼いたしました。２つめのchangeImage→✖️ ２つめのpageNum→○ の間違いです。大変失礼いたしました。 2つめのpageNum（初期値の呼び出し）をどこに書くか？ここのルールとかあれば教えていただきたいです。何度も質問して恐縮ですが、よろしくお願いいたします。

hatena19

2019/09/28 01:42

このような質問がでてくるということは、関数とかイベントの意味の根本的な部分が理解できていないようです。一から説明していると、このスペースでは無理ですので、変数、関数、イベントについてWEB等で調べて学習してください。簡単に概要を説明すると、 var pageNum = function(){・・・で関数を宣言・定義してます。これは宣言だけですので、この時点では中身は実行されません。２つめの pageNum() で上記の関数が呼び出されて、中身が実行されます。これは、宣言・定義のあとに記述する必要があります。

shuntahyodo

2019/09/28 04:11

根本的な部分の理解不足だったようです。ご丁寧に回答を下さり、ありがとうございます！

行動規範の内容に同意します