다시 오신 것을 환영합니다.
이 비디오에서 우리는 마지막으로 남은 기능 중 하나 인 새로운 기능을 개발할 것입니다.
그래서 완성 된 버전에서 메모리를 조깅하는 방식으로 작동하는 방식으로 입력 한 다음 엔터를 누릅니다.
따라서 클릭 할 버튼이 없습니다.
나는 단지 엔터를 치면, 그러면 제출되어서 내가 여기서 체크하거나 삭제할 수있는 새로운 일을하게 할 것이다.
시작하겠습니다.
가장 먼저해야 할 일은 enter 키를 누를 때 발생하는 텍스트 입력에 리스너를 추가하는 것입니다.
이를 위해 몇 가지 옵션이 있습니다.
키 누름을 사용할 수도 있고, 입력을 선택하여 시작하고 입력으로 남겨 두지 않고 사용할 수도 있습니다.
좀 더 구체적이고 입력 유형이 텍스트와 동일하다고 말할 것입니다.
그래서 이것은 모든 입력에 영향을 주거나 똑같은 텍스트를 입력하면 DOT가 추가되고 여기서 키 입력을 사용합니다. 입력 유형은 텍스트 키 누름을 호출합니다.
다음은 콜백 함수입니다.이 함수는 상수 alt 로그로 시작하며이 상수 로그는 Enter 키가 아닌 모든 키를 눌러 실행됩니다.
그러니 계속 눌러서 저장하고 브라우저로 돌아가서 새로 고치면 여기에서 열어 보겠습니다.
그리고 열쇠를 누를 때 열쇠가 있다는 것을 알 수 있습니다.
그래서 다른 키를 치면 계속 올라갑니다.
따라서 사용자가 엔터 키를 치기 전까지는 아무 것도하지 않으려 고합니다.
따라서 우리는 핵심 프레스 방법을 도입 한 비디오에서 코드를 약간 변경해야합니다.
또한 키 프레스 객체의 어떤 속성에 대해서도 이야기했는데 이는 눌려진 키 또는 키의 문자 코드에 해당합니다.
여기서는 이것을 사용하려고합니다. 문자 코드가 Enter 키의 코드 인 13인지 확인해 보겠습니다.
그래서 우리는 다시 한번 이벤트 객체를 사용하여 우리가 원하는 무엇이라도 호출 할 수 있어야합니다. 그리고 트리플이 13 번 이벤트가 일치 할 때마다 실행할 것입니다. 이것은 우리가 모든 단일 문자가 자체적으로 가지고있는 엔터 키를 검사하는 방법입니다 코드와 엔터 키가 13이면 우리는 단지 상수 로그를 할 것입니다.
당신은 엔터를 치고 여기로 돌아갈 것이다.
이제는 입력하지 않는 키들을 입력하고 있습니다.
이제는 엔터를 치려고합니다.
로그에 대한 호출을 볼 수 있습니다.
당신은 enter를 누르십시오.
승인.
따라서 우리가 입력 할 때 입력을 취소하는 것보다 텍스트를 여기에서 꺼내어 새 동맹을 만들어이 다음에 추가 한 다음 텍스트가 사라지도록이 입력을 지우고 싶습니다.
그래서 우리는 값을 추출하여 시작하고 하나는 매우 간단합니다.
우리는 Val 메서드를 사용합니다.
그래서 우리는 단순한이 서약으로 우리가 할 수있는 인풋의 가치를 원합니다.
그러니 경관을 보자.
이 Darvell을 로깅하십시오. 이는 새로 고침시 키 누름이 발생한 입력을 참조합니다.
입력하지 않은 내용을 입력하십시오.
아무 반응이 없습니다.
이제 값을 기록하는 콘솔에 타오 (talo)를 입력하면 Enter를 누르십시오.
변수에 저장해 봅시다.
텍스트를 시작 모음과 동일하게 처리하겠습니다.
그래서 그것은 새로운 텍스트를 입력에서 잡는 것입니다.
그리고 우리가 다음에하고 싶은 것은 새로운 동맹국을 창설하고 그렇게하기 위해 당신을 더하는 것입니다.
나는 append라는 새로운 메소드를 소개 할 것이다. append는 우리가 먼저 추가 할 엘리먼트를 선택한다는 것이다.
그래서 우리는 할 일이 있다는 것을 덧붙일 것입니다.
그래서 우리는 회비를 페이지의 유엔에 추가 할 것입니다.
그러면 여러분은 그렇게 할 것이고 우물에 동맹국을 추가하게 될 것입니다.
그래서 나는 당신을 추가 할 것이고, 그것을 줄 수 있습니다.
그래서 내가 여기에 동맹국에 추가한다면 나는 시작으로 무언가를 하드 코드했다.
따라서이 UL은 UL을 선택하는 것과 마찬가지로이 UL에 추가 된 새로운 동맹이며 이것이 실제로 다른 모든 것을 선택합니다.
우리는 펜 하나를 가지고 있습니다.
그리고이 문자열을 가져 와서 각각의 Chimo 내부의 우물에 추가합니다.
여기에 입력 할 때 입력하지 않으면 입력하는 내용이 중요하지 않습니다.
그것은 새로운 동맹국을 추가합니다.
그리고 내가 입력 할 때마다 그것을 할 것입니다 그리고 만약 당신이 그것을 볼 수있는 요소를 잘 볼 수있는 요소를 볼 수 있습니다.
그래서 우리가 실제로하고 싶은 것은 do 텍스트 변수를 사용하는 것입니다.
우리가해야 할 일은 더하기 기호를 사용하여 변수를 추가하는 것뿐입니다.
그래서 우리는 두 개의 별도의 개막식 태그와 닫는 태그를 가질 것이고 우리는 더하기 기호를 사용하여 텍스트를 추가 할 것입니다. 그리고 이것은 사용자가 입력 한 내용이 무엇이든 do 텍스트를 가진 하나의 큰 문자열로 끝날 것입니다 개막과 폐연이 우리에게 당신을 보냈습니다 개를 새로 고침하고 나는 진입했고 우리는 새로운 동맹국을 얻었습니다.
그래서 두 가지 큰 문제가 있습니다.
하나는이 입력을 없애고 2 개는 범위를 갖지 않습니다.
입력 내용을 지워서 시작하겠습니다.
우리가해야 할 일은이 맹세에 달러 기호를 사용하고 빈 문자열을주는 것입니다. 빈 문자열은 게터가 아닌 설정자의 역할을합니다.
그리고 이제는 입력 할 때 빈 입력을해야합니다. 할 일을 할 때마다 할 일을 추가하면이 옵션이 지워집니다.
다음으로 스팬을 다시 보여 드리겠습니다.
그래서 우리가해야 할 일은 우리 동맹의 내부에 스팬 스택에 추가 할 것이고 추가 될 것입니다.
그리고 우리는 X가 거기에 공간을 가지고 텍스트가 보이지 않도록 공간과 X가 있는지 확인해야합니다.
그리고 저장하면 이제 새 문자열에 내부에 스팬이있는 동맹이 추가됩니다.
그래서 개에게 먹이를 주면 우리는 새로운 혈통과 새 동맹으로 끝납니다.
그러나 우리는이 코드에 문제가 있습니다. 피드에 고양이를 추가 할 때 새로 추가 할 때 문제가 발생합니다. 새 고양이를 확인하고 시도합니다.
그들은 실제로 체크 오프하지도 않으며 여전히 오래된 것들을 삭제하지도 않습니다.
라이브 이벤트가 계속 진행 중입니다.
이 스팬 이벤트는 계속 발생하지만 페이지가로드 될 때 동적으로 생성되는 새로운 문신은 작동하지 않습니다.
이것은 제가 여러분에게이 슬라이드를 보여줬을 때 제가 말했던 것입니다. 그리고 대부분의 경우에 빠르고 퀘이크에서 우리는 모두 일을 끝낼 것이라고 말했습니다.
그러나 한 가지 중요한 차이점이 있습니다.
Quick는 기존 요소의 리스너를 추가하는 경우에만 향후 모든 잠재적 요소에 대한 리스너를 추가합니다.
그리고 우리가 여기에서해야 할 것은 청취자가 모든 잠재적 인 동맹국의 의견을 듣기를 원하기 때문입니다.
그래서 제가 여기에 서서 공급품을 열어 드리겠습니다. 빠른 것보다는 빨리 사용할 수있는 방법을 보여 드리겠습니다.
따라서 스와핑을 사용하는 것은 문제가 아닙니다.
그래서 내가 이것을 단지 클릭에 대한 동맹국으로 바꾸면 나는 이것을 이렇게 남겨 둡니다.
기본적으로 빠른 것을 제외하고는 똑같은 것입니다.
그리고 내가 돌아가서 원래의 요소들에 대한 작업을 새로 고치면 새로운 요소를 추가하면 작동하지 않습니다.
따라서 빠르고 간단하게 교환하는 것이 아닙니다.
우리가 실제로해야 할 일은 코드를 약간 변경하는 것입니다.
그래서 저는 여러분에게 변화를 먼저 보여주고 나서 그것을 설명 할 것입니다.
그래서 내가 한 것은 당신을 빠른 쉼표로 잘 썼다는 것입니다.
왜.
이 작업을 수행해야하는 이유는이 코드가 처음 실행될 때 존재하는 요소에 대해 j 쿼리를 사용하는 리스너 만 추가 할 수 있기 때문입니다.
그리고이 코드가 처음 실행될 때 우리는 모든 동맹국을 가지지 않습니다.
우리는 단지 3 명 밖에 가지지 않기 때문에 동맹국들에게 빠른 청취자를 추가하면 그 3 명까지 추가됩니다.
그래서 우리가하는 일은 UL 전체 부모에게 리스너를 추가하는 것입니다.
언제든지 클릭하면 청취자가 발동합니다.
우리는이 두 번째 인수를 추가합니다.
그리고이 코드가하는 것은 당신이 동맹국을 클릭하면이 코드를 실행할 것입니다.
그래서 우리는 페이지가로드 될 때 존재하는 요소에 리스너를 추가했습니다.
그러나 우리는 실제로 그것 안에서 클릭 된 거짓말만을 듣고 있습니다.
그럼 지금 이것을 보여 드리겠습니다.
내가 새로 고쳐서 여기에 새로운 것들을 추가하겠습니다.
오래된 것들은 여전히 ​​작동하고 새로운 것들도 체크 아웃 될 수 있습니다.
그러나 삭제가 작동하지 않습니다.
그래서 우리는 돌아가서 똑같은 변화를 만들어야합니다.
따라서 우리는 페이지가 on으로로드 된 다음 클릭 할 때 존재하는 이벤트를 수신 대기하지만 우물 내부에서 span을 클릭하면이 코드를 실행하기 만하면됩니다.
그리고 우리가 그것을 남겨두면 우리는 잘되어야합니다.
이제 테스트 해 봅시다.
우리는 오래된 것들과 새로운 것들을 삭제할 수 있으며, 우리는 둘 다 제거 할 수 있습니다.
좋습니다. 그래서 여기에 새로운 자료의 일부를 요약 해 보겠습니다.
첫 번째는 HMO 문자열을 취할 수있는 append 메서드입니다. 그러면 해당 요소를 선택한 모든 요소에 추가합니다.
그리고 두 번째로 빠르게 사용하기보다는이 UL을 빠르게 사용하는 것입니다.
그리고 두 번째 인수는 페이지가로드 될 때 확실히 페이지에 있던 우물 내부에로드되었을 때 페이지에 있었거나 없을 수도있는 동맹자를 지정합니다.
따라서 아직로드되지 않은 요소를 고려할 수 있도록 페이지가로드 될 때 존재하는 요소에 이벤트 리스너를 추가합니다.
이것이 기본 기능입니다.
우리는 할일 목록을 완성했습니다.
우리가 다음 비디오에서 집중적으로 다루는 것은 스타일링입니다.
그리고 우리는 거기에 갈 길이 분명합니다.