JavaScript-30-Day-6

click for project demo
6일째에 우리는 도시와 주의 명단을 만들었는데 그 중 인구가 있었다.상자에 어떤 것을 입력할 때, 이 단어를 포함하는 모든 일치하는 결과를 표시하고, 이 단어들도 밝게 표시합니다.
이 과목은 정말 재미있다. 나는 틀림없이 나의 미래 프로젝트에서 이 과목을 사용할 것이다.나는 새로운 것을 많이 배웠으니 우리 바로 시작합시다.

경험과 교훈

우선, 도시와 주 명칭과 인구를 포함하는 데이터는 외부의 출처인 a도시에서 나온다.Wes가github에서 얻은 json입니다.

const endpoint =
  "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json";

따라서, 이 프로젝트에서 우리가 해야 할 일은 먼저 데이터를 얻어야 하고, 누군가가 어떤 내용을 입력할 때마다, 우리는 모든 도시/주 이름이 일치하는 그룹의 서브집합에 그룹을 필터합니다.
우선, 우리는 데이터를 넣을 수 있는 빈 그룹이 필요하다

const cities = [];

이제 데이터를 가져와야 합니다. fetch API를 사용하겠습니다.
MDN:

The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.

The fetch() method takes one mandatory argument, the path to the resource you want to fetch. It returns a Promise that resolves to the Response to that request — as soon as the server responds with headers — even if the server response is an HTTP error status.

간단하게 말하자면, Wes는 우리가 얻은 데이터에서 되돌아오는 데이터가 어떤 종류의 데이터인지 모른다고 언급했다.그리고 우리는 그것이 JSON이라는 것을 알고 있기 때문에 간단한 JSON.parse()은 작용하지 않는다.
따라서 원시 데이터를 JSON으로 바꾸려면 컨트롤에서 fetch()이 되돌아오는 약속은 함수 .json()을 포함하고 있지만 이 또한 모든 작업을 완성하지 못했다. 왜냐하면 그것은 약속이 되돌아왔기 때문이다. 해석한 후에 우리는 최종적으로 데이터를 얻었다.
또 다른 도전은 우리의 공수조가 const이기 때문에 우리는 데이터를 간단하게 넣을 수 없다는 것이다.let으로 간단히 변경할 수 있지만 const을 사용하는 것이 좋습니다.Wes는 이 점에서 .push()을 그룹에 넣으면 하나의 플러그인 그룹이 생성됩니다. 이 그룹은 우리의 주 그룹입니다. 단 하나의 요소만 있습니다. 즉, 우리의 데이터를 포함하는 그룹입니다.그는 만약 우리가 간단하게 [2,3,4]과 같은 정수를 기존의 수조에 첨가한다면, 그것들은 끼워 넣은 것이 아니라 간단하게 수조에 첨가될 것이라고 덧붙였다.따라서 이 논리를 사용하고 원소를 하나의 원소로 수조에 넣으면 우리는 수조 확장 연산자를 사용한다.

const endpoint =
  "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json";

const cities = [];

fetch(endpoint)
  .then((blob) => blob.json())
  .then((data) => cities.push(...data));

다음에 우리가 해야 할 일은 누군가가 상자에 입력할 때, 우리는 함수를 실행해서 이 방대한 그룹을 하위 집합으로 필터한 다음에 그 중에서 그것을 들을 수 있다는 것이다.

일치하는 단어를 찾기 위해 findMatches() 함수를 만들었습니다.이 도전은 .match() 함수에서 우리는 변수를 사용할 수 없고 사람들이 검색하는 모든 내용이 변수이다. 이를 위해 우리는 RegExp을 사용하고 정규 표현식의 결과를 .match()에 제공해야 한다.

function findMatches(wordToMatch, cities) {
  return cities.filter((place) => {
    // here we need to figure out if the city or state matches what was searched
    const regex = new RegExp(wordToMatch, "gi");
    return place.city.match(regex) || place.state.match(regex);
  });
}

여기에 사용된 RegExp의 로고는gi입니다. 그 중에서 g는global(전체 문자열을 보고 일치함)을 표시하고 i는 대소문자를 구분하지 않습니다.
현재 일치하는 항목을 찾았습니다. 이벤트 탐지기를 계속 추가할 것입니다.
우선, 우리는 이 상자에 change 사건 탐지기를 추가할 것이다.그러나 change 이벤트는 입력 필드를 닫을 때만 터치되며, up을 입력하고 입력할 때만 터치됩니다. 따라서 up을 입력할 때 터치하려면 다른 이벤트 탐지기 keyup을 사용합니다.

const searchInput = document.querySelector(".search");
searchInput.addEventListener("change", displayMatches);
searchInput.addEventListener("keyup", displayMatches);

화면에 표시된 모든 내용은 displayMatches 함수의 핸들입니다.
이 함수에는 사용자가 상자에 입력한 모든 내용이 포함되어 있기 때문에 this.value 함수에 전달합니다.

const matchArray = findMatches(this.value, cities);

변수 matchArray의 내용을 사용하여 페이지에 html 내용을 생성합니다.일을 더욱 아름답게 하기 위해서, 우리는 일치하는 텍스트를 돋보이게 할 것입니다. 따라서 우리는 또 다른 findMatches()을 만들고, RegExp을 사용합니다. 정규 표현식에서 일치하는 내용을 찾아서, 이 경계가 높은 빛을 가진 hl류로 바꿉니다.다음은hl과정의 내용입니다.

.hl {
  background: #ffc600;
}

다음은 전체 display Matches () 함수

function displayMatches() {
  const matchArray = findMatches(this.value, cities);

  const html = matchArray
    .map((place) => {
      const regx = new RegExp(this.value, "gi");
      const cityName = place.city.replace(
        regx,
        `<span class="hl">${this.value}</span>`
      );
      const stateName = place.state.replace(
        regx,
        `<span class="hl">${this.value}</span>`
      );
      return `
      <li>
    <span class="name">${cityName},${stateName}</span>
    <span class="population">${numberWithCommas(place.population)}</span>
      </li>
      `;
    })
    .join("");
  suggestions.innerHTML = html;
}

마지막으로 환경을 미화하기 위해 우리는 함수로 인구에 쉼표를 추가했다.

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

이것만 있으면 우리 그날의 프로젝트는 완성된다.
GitHub 재구매:

세나크라시 / JS-30-DAY-6

javascript30 5일차 블로그

JavaScript-30-Day-5

쿠마르 하시・ 6월 5일・ 6 분 읽기

#html #css #javascript #github

javascript30 4일차 블로그

JavaScript-30-Day-4

쿠마르 하시・ 6월 4일・ 6 분 읽기

#javascript #github #webdev #html

javascript30 3일차 블로그

JavaScript-30-Day-3

쿠마르 하시・ 6월 3일・ 4분 읽기

#javascript #css #webdev #github

개발자 프로필
.ltag__user__id__641726.작업 따르기 버튼
배경색: #000000!중요
색상: #000000!중요
테두리 색상: #000000!중요
}

쿠마르가 뒤를 따르다

The best way to learn is to teach.Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.
javascript30으로 전화하여 문제 해결
WesBos과 함께 해주셔서 감사합니다!😊💖
의견을 올려주시고 의견을 알려주세요.

감사합니다!