質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1522閲覧

JavaScriptでスライドショーを作成

kaji120

総合スコア39

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/06/22 13:54

編集2020/06/22 23:51

テキストを参考にスライドショーを作成しておりましたが、分からない箇所がありましたので質問させて頂きます。

function chnageImage(num)の中とfunction pageNumの下に**pageNum()**と記載するのは何故でしょうか。どういった意味があるのでしょうか。
回答宜しくお願い致します。pageNumはスライドショーのページ数を表示するために使っております。changeImageは画像を切り替えるときに使っております。

テキストには一度はページが読み込まれた時、もう一度はchangeImageファンクションの中から呼び出します。と記載されております。

「確かな力が身につくJavaScript超入門」

CSS

1<style> 2.slide { 3 margin : 0 auto; 4 border: 1px solid black; 5 width: 720px; 6 background-color: black; 7} 8img { 9 max-width: 100%; 10} 11.toolbar { 12 overflow: hidden; 13 text-align: center; 14} 15.nav { 16 display: flex; 17 justify-content: center; 18 align-items: center; 19 padding: 16px 0; 20} 21#prev { 22 margin-right: 0.5rem; 23 width: 16px; 24 height: 16px; 25 background: url(arrow-left.svg) no-repeat; 26} 27#next { 28 margin-left: 0.5rem; 29 width: 16px; 30 height: 16px; 31 background: url(arrow-right.svg) no-repeat; 32} 33 34#page { 35 color: white; 36} 37</style>

HTML

1 2 3 <section> 4 <div class="slide"> 5 <div class="image_box"> 6 <img id="main_image" src="image1.jpg"> 7 </div> 8 <div class="toolbar"> 9 <div class="nav"> 10 <div id="prev"></div> 11 <div id="page"></div> 12 <div id="next"></div> 13 </div> 14 </div> 15 </div> 16 </section>

JavaScript

1'use strict'; 2 const images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg']; 3 let current = 0; 4 5 6 function changeImage(num) { 7 if(current + num >= 0 && current + num < images.length) { 8 current += num; 9 document.getElementById('main_image').src = images[current]; 10 pageNum(); 11 } 12 }; 13 14 function pageNum() { 15 document.getElementById('page').textContent = `${current + 1}/${images.length}` 16 }; 17 18 19 pageNum(); 20 21 document.getElementById('prev').onclick = function() { 22 changeImage(-1); 23 }; 24 25 document.getElementById('next').onclick = function() { 26 changeImage(1); 27 }; 28 29```> 引用テキスト

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

全体がわからないのでアレなのですが、pageNumの関数が描画を指しているからではないでしょうか?
ただのpageNum();が画面を開いた時の初期描画。
changeImage(num)内にあるpageNum();はprevやnextで切り替えたあとの描画。

投稿2020/06/22 15:36

tomomo

総合スコア430

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kaji120

2020/06/22 23:52

全体が分からないというご指摘を頂きましたので、HTMLとCSSを追加させて頂きました。
guest

0

ベストアンサー

function chnageImage(num)の中とfunction pageNumの下にpageNum()と記載するのは何故でしょうか。どういった意味があるのでしょうか。

※さっきの投稿はナシで!笑

changeImage()は、イベント(onclick)の設定により、
prevもしくはnextをクリックすれば呼び出され処理をします。
pageNum()は、changeImage()の中に存在しますので、同じくクリックされれば
呼び出され処理をします。クリック→ナンバーを表示
ですが、クリックされた時だけ呼び出され処理をすると
ページが読み込まれprevもしくはnextをクリックしない限り、
ナンバーは表示されませんよね??
そこで初回にただ(ページ)読み込まれた時用(体裁を保つため)に
function pageNumの下(位置はここでなくともコードの一番下でもOk)に
pageNum()記載することにより、クリックしなくともナンバーが表示されるようにしています。

こんなんでわかるかな。。

投稿2020/06/23 01:54

編集2020/06/23 02:47
Yousuck

総合スコア349

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kaji120

2020/06/24 12:22

ご丁寧に有難うございます。 クリックをしたときにページの枚数表示を変更するためにchangeImageの中にpageNum()が入力されており、もう一つのpageNum()はクリックされなくてもページ枚数を表示させるようにするということでしょうか。
Yousuck

2020/06/24 14:07

そうですね。
Yousuck

2020/06/25 01:07

関数(この場合だとpageNum())を「どんな時に使いたいか」をイメージされると 理解しやすいかもしれません。
kaji120

2020/06/25 01:56

しっかりと理解することができました。 有難うございました。
guest

0

コールバック関数を調べました。それに伴い無名関数、高階関数も調べました。

投稿2020/06/22 23:48

kaji120

総合スコア39

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問