[TIL] 210913

63904 ワード

JavaScript DOM TIL テキストリンク

📝 今日作った

getAttribute()/switch()/:focus/forEach()

carouselの実装が完了しました

📖 学習資料

辞書学習ガイドSTEP 4(carousel)

📚 学識

DOM

1.カロッセル（カロッセル）

一昨日の夜遅くに予習案内のアドバイス事項を見つけましたが、本当に最初に書いたものの中にこんなものがありました.当時は実行されていませんでした.

<div class="carousel-image-box">
  <img src="/images/image-1.png" class="carousel-image">
</div>
<button type="button" class="carousel-arrow right">
  <i class="fas fa-arrow-circle-right"></i>
</button>

const rightArrow = document.querySelector('.right');

rightArrow.addEventListener('click', function goNext () {
  var presentImage = document.querySelector('.carousel-image');

  if (presentImage.src === '/images/image-1.png') {
    presentImage.src = '/images/image-2.png';
  } else if (presentImage.src === '/images/image-2.png') {
    presentImage.src = '/images/image-3.png';
  } else if (presentImage.src === '/images/image-3.png') {
    presentImage.src = '/images/image-4.png';
  } else if (presentImage.src === '/images/image-4.png') {
    presentImage.src = '/images/image-5.png';
  } else {
    presentImage.src = '/images/image-1.png';
  }
});

しかし今日onclickを検索してこの文章

を発見しました

ここで「クリックごとに値を変更する」部分のコードは私が書いたのと同じ脈絡のようですが、よく動作しているので、ここのコードのテキスト値を画像srcに変換してテストします.

codepenからの外部画像リンク

を用いる.

<img src="https://cdn.pixabay.com/photo/2021/09/07/11/53/car-6603726_960_720.jpg" class="carousel-image">
<button type="button" onclick="goNext()">버튼</button>

function goNext () {
  var presentImage = document.querySelector('.carousel-image');

  if (presentImage.src === 'https://cdn.pixabay.com/photo/2021/09/07/11/53/car-6603726_960_720.jpg') {
    presentImage.src = 'https://cdn.pixabay.com/photo/2014/09/03/20/15/shoes-434918_960_720.jpg';
  } else if (presentImage.src === 'https://cdn.pixabay.com/photo/2014/09/03/20/15/shoes-434918_960_720.jpg') {
    presentImage.src = 'https://cdn.pixabay.com/photo/2014/05/21/14/54/feet-349687_960_720.jpg';
  } else if (presentImage.src === 'https://cdn.pixabay.com/photo/2014/05/21/14/54/feet-349687_960_720.jpg') {
    presentImage.src = 'https://cdn.pixabay.com/photo/2014/07/10/10/19/steps-388914_960_720.jpg';
  } else if (presentImage.src === 'https://cdn.pixabay.com/photo/2014/07/10/10/19/steps-388914_960_720.jpg') {
    presentImage.src = 'https://cdn.pixabay.com/photo/2015/03/11/21/50/shutters-669296_960_720.jpg';
  } else {
    presentImage.src = 'https://cdn.pixabay.com/photo/2021/09/07/11/53/car-6603726_960_720.jpg';
  }
}

結果はとても良かった・・・(事実上、この点は最初から無理です.開発者ツールの「問題」タブでエラーが発生し、正常に機能しないと思っていたので無理でしたが、検索してBack-forward cacheのGoogle設定を変更すればいいのです)

は両方が同じイメージではなく、同じボタンで、src部分だけが違うのに、私のはどうしてだめなのですか?srcの値はWebサーバアドレスの違いではありません.

console.log(presentImage.src)を実行すると、http://127.0.0.1:5500/image/mimage-1になります.pngとして表示されます.すなわち,srcの値は/images/image−1にすぎない.pngの意味じゃない

これに書き換えると、carouselは仕事ができるのですが、こう書くと私のパソコンでしか見られないので意味がありません.

function goNext () {
  var presentImage = document.querySelector('.carousel-image');

  if (presentImage.src === 'http://127.0.0.1:5500/images/image-1.png') {
    presentImage.src = 'http://127.0.0.1:5500/images/image-2.png';
  } else if (presentImage.src === 'http://127.0.0.1:5500/images/image-2.png') {
    presentImage.src = 'http://127.0.0.1:5500/images/image-3.png';
  } else if (presentImage.src === 'http://127.0.0.1:5500/images/image-3.png') {
    presentImage.src = 'http://127.0.0.1:5500/images/image-4.png';
  } else if (presentImage.src === 'http://127.0.0.1:5500/images/image-4.png') {
    presentImage.src = 'http://127.0.0.1:5500/images/image-5.png';
  } else {
    presentImage.src = 'http://127.0.0.1:5500/images/image-1.png';
  }
}

答えのキーワードは

<!-- HTML 코드 수정 -->
<div class="carousel-image-box">
  <img src="/images/image-1.png" class="carousel-image">
</div>
<button type="button" class="carousel-arrow right">
  <i class="fas fa-arrow-circle-right"></i>
</button>

// 우측 버튼 클릭 시 💡 다음 이미지 보여주기
const rightArrow = document.querySelector('.right');

rightArrow.addEventListener('click', function goNext () {
  var presentImage = document.querySelector('.carousel-image');

  if (presentImage.getAttribute('src') === '/images/image-1.png') {
    presentImage.src = '/images/image-2.png';
  } else if (presentImage.getAttribute('src') === '/images/image-2.png') {
    presentImage.src = '/images/image-3.png';
  } else if (presentImage.getAttribute('src') === '/images/image-3.png') {
    presentImage.src = '/images/image-4.png';
  } else if (presentImage.getAttribute('src') === '/images/image-4.png') {
    presentImage.src = '/images/image-5.png';
  } else {
    presentImage.src = '/images/image-1.png';
  }
});

// 좌측 버튼 클릭 시 💡 이전 이미지 보여주기
const leftArrow = document.querySelector('.left');

leftArrow.addEventListener('click', function goBack () {
  var presentImage = document.querySelector('.carousel-image');

  if (presentImage.getAttribute('src') === '/images/image-1.png') {
    presentImage.src = '/images/image-5.png';
  } else if (presentImage.getAttribute('src') === '/images/image-2.png') {
    presentImage.src = '/images/image-1.png';
  } else if (presentImage.getAttribute('src') === '/images/image-3.png') {
    presentImage.src = '/images/image-2.png';
  } else if (presentImage.getAttribute('src') === '/images/image-4.png') {
    presentImage.src = '/images/image-3.png';
  } else {
    presentImage.src = '/images/image-4.png';
  }
});

🔥 属性(attribute)を参照

getAttribute(「値を取得する属性名」)

setAttribute(「追加する属性名」>「値」)

hasAttribute(「存在するかどうか知りたい属性名」)

removeAttribute(「削除する属性名」)

最終的には、最初に記述されたコードでは、getAttribute()をsrcに変換するだけでよい...

それは難しくなく、簡単な基本if条件文は私にも理解できる一言で、愚かな私はいったい罪のない場所を何周するのだろうか.

最初の実施がまだ終わっていないので、余計な雑談は自分で解消し、次の

に移ります.

残りの要件はgetAttribute('src')

です.

<!-- HTML 수정 -->
<div class="carousel-dots">
  <button class="carousel-dot">●</button>
  <button class="carousel-dot">●</button>
  <button class="carousel-dot">●</button>
  <button class="carousel-dot">●</button>
  <button class="carousel-dot">●</button>
</div>

// CSS 수정
.carousel-dot {
  background-color: transparent;
  border-style: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 2.5;
  margin: 0 15px;
  color: grey;
}

.carousel-dot:focus {
  color: black;
  outline: none;
}

// javascript 추가 - 하단의 Dot 5개
const btn_1 = document.querySelectorAll('.carousel-dot')[0];
btn_1.addEventListener('click', function showImage () {
  presentImage.src = '/images/image-1.png';
});

const btn_2 = document.querySelectorAll('.carousel-dot')[1];
btn_2.addEventListener('click', function showImage () {
  presentImage.src = '/images/image-2.png';
});

const btn_3 = document.querySelectorAll('.carousel-dot')[2];
btn_3.addEventListener('click', function showImage () {
  presentImage.src = '/images/image-3.png';
});

const btn_4 = document.querySelectorAll('.carousel-dot')[3];
btn_4.addEventListener('click', function showImage () {
  presentImage.src = '/images/image-4.png';
});

const btn_5 = document.querySelectorAll('.carousel-dot')[4];
btn_5.addEventListener('click', function showImage () {
  presentImage.src = '/images/image-5.png';
});

の5つのポイントを押すと、各ポイントの画像が

に表示されます.

でもこれは本当に縮小したいですfor文でいいかもしれませんが、具体的に何を書くか分かりません.

ブログで整理したforの繰り返し文をもう一度見て、이미지 하단의 Dot를 누를 경우, 해당 순번의 이미지 보여주기を試してみることにしました.

const btns = document.querySelectorAll('.carousel-dot');

btns.forEach(function clickBtn (btn, index) {

  btns[index].addEventListener('click', function showImage () {
    presentImage.src = `/images/image-${index+1}.png`;
  });
});

でもこの差は多くなくてもいい

でもいいです.

は何の検索もなしに1つ1つ考えて書きますが、何の支障もなくコード作成が完了した後の実行は問題なく、この課題が始まって以来初めてです.不思議だわ😲

ですが、この任務を完成するのとは違って、私がこの任務をしている間に骨を刺したのは、for繰り返し文がよく分からないことです.この場合、foreach文法の説明を見て、「なぜか」をここに適用すればいいので、一つずつ書いておけばいいのです.つまり、コードを書く前にforeach文がそうかもしれないと頭の中で明確に言えません.各方面から見て、今回の課題は真剣に勉強しなければならない必要性を改めて感じさせる課題です.

2.forEach構文

< HTML >

    <section>
      <div class="title-image-box">
        <img src="/images/vanilla_coding_logo.png" />
      </div>
      <h1>Carousel</h1>

      <!-- Carousel Start -->
      <div class="carousel-outer">
        <div class="carousel-image-and-arrow">
          <button type="button" class="carousel-arrow left">
            <i class="fas fa-arrow-circle-left"></i>
          </button>
          <div class="carousel-image-box">
            <img src="/images/image-1.png" class="carousel-image">
          </div>
          <button type="button" class="carousel-arrow right">
            <i class="fas fa-arrow-circle-right"></i>
          </button>
        </div>
        <div class="carousel-dots">
          <button class="carousel-dot">●</button>
          <button class="carousel-dot">●</button>
          <button class="carousel-dot">●</button>
          <button class="carousel-dot">●</button>
          <button class="carousel-dot">●</button>
        </div>
      </div>
      <!-- Carousel End -->
    </section>

< CSS >

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
}

body {
  background-image: url("./images/bg.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "Varela Round", sans-serif;
}

section {
  margin: 60px auto;
  max-width: 1000px;
}

.title-image-box {
  text-align: center;
  padding: 0 80px;
}

.title-image-box img {
  width: 100%;
  max-width: 800px;
}

h1 {
  font-family: "Pacifico", cursive;
  text-align: center;
  font-size: 5vw;
}

.carousel-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  margin: 20px auto;
  width: 80%;
}

.carousel-image-and-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  margin-top: 50px;
}

.carousel-arrow {
  background-color: transparent;
  border-style: none;
  width: 120px;
}

.fa-arrow-circle-left,
.fa-arrow-circle-right {
  font-size: 30px;
  cursor: pointer;
}

.carousel-image-box {
  width: 70%;
  margin: 0 auto;
}

.carousel-image {
  width: 100%;
  vertical-align: middle;
}

.carousel-dots {
  text-align: center;
}

.carousel-dot {
  background-color: transparent;
  border-style: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 2.5;
  margin: 0 15px;
  color: grey;
}

.carousel-dot:focus {
  color: black;
  outline: none;
}

< JavaScript >

var presentImage = document.querySelector('.carousel-image');

// 우측 버튼
const rightArrow = document.querySelector('.right');

rightArrow.addEventListener('click', function goNext () {

  const imageSrc = presentImage.getAttribute('src');

  switch (imageSrc) {
    case '/images/image-1.png':
      presentImage.src = '/images/image-2.png';
      break;
    case '/images/image-2.png':
      presentImage.src = '/images/image-3.png';
      break;
    case '/images/image-3.png':
      presentImage.src = '/images/image-4.png';
      break;
    case '/images/image-4.png':
      presentImage.src = '/images/image-5.png';
      break;
    case '/images/image-5.png':
      presentImage.src = '/images/image-1.png';
      break;
  }
});

// 좌측 버튼
const leftArrow = document.querySelector('.left');

leftArrow.addEventListener('click', function goBack () {

  const imageSrc = presentImage.getAttribute('src');

  switch (imageSrc) {
    case '/images/image-1.png':
      presentImage.src = '/images/image-5.png';
      break;
    case '/images/image-2.png':
      presentImage.src = '/images/image-1.png';
      break;
    case '/images/image-3.png':
      presentImage.src = '/images/image-2.png';
      break;
    case '/images/image-4.png':
      presentImage.src = '/images/image-3.png';
      break;
    case '/images/image-5.png':
      presentImage.src = '/images/image-4.png';
      break;
  }
});

// 하단의 Dot 5개 - ex) index가 0인 버튼을 누를 때 화면에 image-1 띄우기
btns.forEach(function clickBtn (btn, index) {

  btns[index].addEventListener('click', function showImage () {
    presentImage.src = `/images/image-${index+1}.png`;
  });
});

cf.別に書かれていませんが、右ボタンと左側ボタンの部分もif、else if、else文で書き換えられており、コードはさっきのように減少していません.文法より楽に見えるなら、200%減るかもしれません.

3.感じ

これで3日間にわたるcarousel 최종 코드の制作が完了しました.今回も長い間解決してきましたが、以前のように満足しているよりも、現実に直面しているような気がします.(もちろん、私は初めてその様子を見て拍手しました)
前にも言いましたが、今回の課題を解決する過程で、私が知らない、混同しているものが想像以上に多いことに気づきました.当たり前だが、理论を理解しているふりをするのと、本当に理解していることを直接コードで书くのとでは天と地の违いのようだ.
どこかで見たことがあるのでこれを使えばいいのですがダメです目で見れば分かるかもしれませんが、実は私が混同しているところがどこなのかを韓国語で明確に言うのは難しいのです.検索していても、私は直接情報を選ぶのではなく、いろいろな情報に左右されていることに気づきました.
でも最後まであきらめずに、carouselという言葉を自分で検索しなかったことができて、それができて嬉しいです.少しスケジュールが遅れていますが、途中で諦めて他の人の答えを見たら、私も後悔します.後で見るととても粗雑な答えになりますが、今は愛情(愛憎)が込められた状態なので、ずっと見続けます.
相変わらず鬱陶しいですが、諦めていないので有意義な時間でした.しかし、昨日は理論を勉強し直したいと言っていましたが、課題を解決した後、実習はもっとおもしろかったようです.

4.今後の学習計画

いよいよSTEP 4が終わってSTEP 5に入りますちょっと見て、今回の課題も含めて、私はこの間混同していたものを処理しているようです.でもネット検索で資料を見ると理解できそうだけど応用しようとすると頭も手も動かない今回のSTEPが役に立つことを願っています
私はまた追加の理論の授業を聞きたいですが、まず予習ガイドを見なければなりません.残りの3つの実習は、解答時間が最大13日です.まず別の講座を聞いて、それができなければ大変なので、既存のものから始めるつもりです.

明日作った

辞書学習ガイドSTEP 5

Reference

この問題について([TIL] 210913), 我々は、より多くの情報をここで見つけました https://velog.io/@leesyong/TIL-210913

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

方法: JHipsterのBluePrintをvscodeでデバッグする

[java/kotlin]ショップをバインドしたアプリケーションの支払い