그래서 우리는 이제 우리가 집중할 수있는 두 가지 다른 것들이 있습니다.
첫 번째 선수는 우승 한 선수에게 녹색으로 표시되도록 변경했으며, 이는 매우 간단합니다.
그리고 두 번째는 리셋 버튼을 작동시켜 재설정하고 다시 재생할 수 있습니다.
색상 변경부터 시작하여 CSSA 파일에 클래스를 정의하여이를 수행해 보겠습니다.
그래서 C S 파일을 만들어야하고 그 scorekeeper에게 전화 할 것입니다.
그러면 HDMI 파일 스코어 키퍼 인 Dotsie SS 대신 링크 할 것입니다.
그런 다음 CSSA 파일로 이동하여 클래스를 정의하고 겨울이라고하고 색상은 녹색이라고 말하고 나머지는 저장합니다.
그리고 내가 원하는 방식으로 보이는지 확인하기 만하면됩니다.
스팬에 추가하여 클래스가 같다고 말하면 우리는 플레이어 1에 대한 승자 클래스를 제공합니다.
그리고 새로 고침하면 우리는 녹색 0을 볼 수 있습니다.
그것이 정확히 우리가 증분으로 원하는 것입니다.
물론 우리는 그것이 검은 색으로 시작하고 클래스를 추가하기를 원합니다.
게임이 끝났을 때 우리는 자바 스크립트로 돌아가 이것을 제거해야합니다.
그래서 그것은 검은 색으로 돌아갑니다.
지금 자바 스크립트로 이동하십시오.
그래서 우리는 플레이어 1을 시작하고 플레이어 1 점수가 승리 점수와 같은지 확인해야합니다.
즉, 플레이어 1이 승리했다는 의미입니다.
여기서는 플레이어에게 디스플레이 클래스 목록을 추가 할 것입니다.
우리는 클래스 승자를 추가 할 것이고 그것은 우리가해야 할 전부입니다.
그래서 우리가 새로 고침하면 플레이어 1 점수가 올라가고 5 점까지 올라갑니다.
그 클래스가 추가되었습니다.
그래서 우리가 여기를 살펴 본다면 그것을 조사 할 것입니다.
수업이 없으며 5 시까 지 계속 증가합니다.
여기에서주의를 기울이면 우승자가 추가되어 클래스를 얻게됩니다. 5에 도달하면.
그래서 우리는 Player 2에 대해서도 똑같이 할 것입니다.
따라서 플레이어 2 점수를 얻으면 승리 점수가 플레이어를 표시하도록 변경됩니다.
이 값을 5로 증가시켜 보겠습니다.
큰.
모든 것이 잘 작동하는 것 같습니다.
그래서 다음 부분은 리셋 버튼이 바로 작동하도록하는 것입니다.
게임을 끝내면 항상 사실로 설정됩니다.
게임을 바꿀 방법이 없습니다.
따라서 재설정 버튼을 클릭하면 몇 줄의 다른 코드가 트리거되어야합니다.
당신이 바꾸고 싶은 첫 번째 것.
플레이어 1 점수와 점수 0 점.
플레이어 1 디스플레이에 표시되는 값을 변경하고 표시 할 플레이어를 0으로 변경하고이 요소가있는 요소에서이 녹색 클래스를 제거하려고합니다.
마지막으로 게임 오버가 거짓으로 되돌아 가도록하여 코드와 여기가 다시 돌아갈 수 있도록해야합니다.
따라서 버튼을 선택하기 위해 필요한 첫 번째 작업은 id equal reset입니다.
그래서 우리는 여기로 가서 그것을 선택해야합니다.
지금까지 다른 버튼들과 함께 할 것입니다.
재설정 버튼은 문서 점과 같고 ID로 다른 요소를 가져오고 이번에는 ID가 재설정되고 저장되어 작동하는지 확인합니다.
상수 로그를하십시오.
재설정 버튼을 재설정하고 새로 고침하십시오.
콘솔을 보면 정확한 버튼을 얻을 수 있습니다.
기록 된대로 취소되었습니다.
확인 버튼을 클릭 할 때 이벤트 리스너를 추가해야하므로 콜백 함수에서 이벤트 리스너가 클릭 버튼을 재설정하고 다시 시작하기를 원한다면 다시 로그 재설정을 클릭하십시오. 거기에 우리가 우리의 재설정 버튼을 클릭 이동합니다.
우리가 논의한 것처럼 논리는 설정해야합니다.
플레이어 1 점수와 점수 0 점.
그렇게 간단합니다.
선수 1 점수 제로 점수는 0입니다.
하지만 지금 바로 이걸 실행하면 플레이어 1 점수 만 변경되어 0 점이되고 증분되므로 플레이어 1이 이기고 재설정됩니다.
아무 일도 일어나지 않으며 자바 스크립트에서만 점수를 변경하기 때문입니다.
페이지의 점수를 업데이트하지 않았으므로 업데이트해야 할 P1 및 P2 표시 변수가됩니다.
그래서 우리는 하나의 디스플레이 텍스트 내용을 원할 것이고 단지 0으로 설정할 수 있습니다.
또한 1 점으로 설정할 수 있습니다.
둘 다 0이어야합니다.
Pete가 텍스트 내용을 표시하는 것과 동일한 것은 0입니다.
우리가 지금 새로 고침하면 우리는 5 살이됩니다.
둘 다 0으로 돌아갑니다.
그럼 좀 더 가까이서 게임을 시작하겠습니다.
클릭 재설정은 모두 0으로 돌아갑니다.
다음으로 승자 조항을 제거해 보겠습니다.
이 두 가지 모두에서 승자 클래스를 제거하면 쉬운 방법입니다.
그래서 우리는 어느 것이 있는지 확인하지 않을 것입니다.
우리는 둘 다 제거 할 것입니다.
그것은 하나의 디스플레이에 불과합니다.
클래스 목록은 승자를 제거합니다.
그러면 절을 없애고 표시 할 것입니다.
따라서 둘 중 어느 것이 든 상관 없습니다. 왜냐하면 우리는 둘 다 제거하기 때문에 중요하지 않습니다.
이제 우리가 게임을하면 우승자가됩니다.
클릭 재설정.
그들은 둘 다 빈 평문으로 돌아 간다.
그러나 당신이 볼 수 있던대로 나는 5에 얻는다.
재설정 버튼을 클릭해도 여전히 작동하지 않습니다.
게임 오버가 여전히 사실이기 때문입니다.
그래서이 사건들 대신에 우리 코드가 실행되지 않을 것입니다.
그래서 우리가해야 할 마지막 일이 정해졌습니다.
게임을 거짓으로 되돌려 놓으면 게임을 계속할 수 있습니다.
그래서 나는 증분을 새로 고침 할 것이다.
게임을 끝내자.
우리는 거기에 갈.
나는 더 이상 놀 수 없다.
재설정을 클릭하면 이제 게임이 거짓으로 돌아가고 다시 게임을하고 계속 진행할 수 있습니다.
이것이 바로 여기 핵심 기능입니다.
거의 모든 일이 거의 끝났습니다. 숫자를 올리거나 점수를 얻는 것이 변수가됩니다.
그래서 항상 5 명은 아닙니다.
그래서 우리는이 의견을 가지고 이것을 사용하여 이것을 7로 바꾸면 7로, 최대 또는 우승 점수는 5가 아니라 7이됩니다.
그래서 우리는 몇 가지 조치를 취할 것입니다.
우리가해야 할 첫 번째 일은 number와 동일한 입력 유형을 볼 수 있으므로이 입력을 선택하는 것입니다.
그것은 페이지의 유일한 입력입니다.
그래서 우리는 반드시 신분증이나 다른 것을 제공 할 필요는 없습니다.
그래서 저는 여기로 가서 다른 선택자 var로 선택하려고합니다.
그냥 입력이없는 문서라고하고 쿼리 선택기 입력 문서를 처리하는 방법이 많이 있습니다.
우리는 또한 어디에서만 지정할 수 있습니다.
유형은 다른 입력이있을 수 있기 때문에 숫자와 같습니다.
우리의 경우 나는 그것을 간단하게 유지할 것이다.
입력은 하나뿐입니다.
그래서 이것은 잘 작동합니다.
승인.
그래서 우리는 그 입력을 선택했습니다.
이제 이벤트를 추가하겠습니다.
그래서 우리가 원했던 것은 이것이 언제나 가치를 바꾸거나 숫자가 바뀔 때마다 우리는 이것을 업데이트하기를 원하며 승리 점수 변수를 업데이트하기를 원합니다.
그래서 우리가해야 할 일은 사건을 추가하는 것입니다.
그래서 우리는 감각이 없어지고 Dot에 이벤트 Lessner가이 방법으로 여기를 클릭하도록했습니다.
기능과 모든 경고.
입력을 클릭하면 실제로 클릭 리스너가이 작업에 가장 적합한 도구가 아님을 알 수 있습니다.
왜냐하면 예전에 내가했던 것처럼 클릭으로 값을 변경할 수 있기 때문입니다.
하지만 삭제를 클릭하고 직접 번호를 입력 할 수 있으며 클릭 할 필요가 없어 이벤트가 시작되지 않았습니다.
그래서 여기 작은 버튼을 사용하면 빠른 이벤트가 발생합니다.
그렇지 않으면 키보드 만 사용하면 빠른 이벤트가 발생하지 않습니다.
따라서이 경우에는 변경이라고하는 다른 유형의 이벤트가 있습니다.
따라서 변경 이벤트는 값이 변경 될 때마다 실행되며 해당 값이 어떻게 변경되었는지는 중요하지 않습니다.
삭제 키를 클릭했거나 누르기 때문이었습니다.
여기에서 실제로 경고를 변경하여 입력을 변경 한 다음 다시 새로 고침을 시도해 보겠습니다.
그리고 여기를 클릭하여 변경하면 입력 내용이 변경되었음을 알 수 있습니다.
그러나 내가 삭제하고 그것을 클릭하는 것을 포함하지 않는 숫자를 타이핑하면 입력이 바뀌는 것을 알 수 있습니다.
값을 변경할 때마다 변경 이벤트를 사용하려는 이벤트입니다. 여기서이 숫자를 업데이트하려고합니다. 또한 우승 점수를 업데이트하여 새 우승 점수를 얻을 때까지 게임을 계속 진행할 수 있습니다.
바라기를 이것은 우리의 실제적인이기는 점수가 아닙니다.
바위 종이 가위의 확실히 긴 게임.
그래서 가장 먼저 여기에서이 값을 업데이트하는 것입니다.
그래서 우리가 그것을 선택해야하기 전에처럼 그것은 단락입니다.
따라서 우리는 단락을 선택해야하며 VAR 단락은 쿼리 선택기 태그와 동일한 문서 일뿐입니다.
그리고이 빠른 이벤트에서 우리는 단지 텍스트 내용을 바꿀 것입니다. 단지 그것을 클릭하여 변경하거나 값 변경을 말하기 만하면됩니다.
그냥 그렇게하고 새로 고침.
이제 단락이 변경된 값을 변경하는 값을 변경하면 H-1으로 이전에 실행 한 것과 동일한 문제이므로 전체 단락을 변경하고 싶지 않습니다.
이 작은 부분 만 바꾸고 싶습니다.
그래서 우리가 사용하고자하는 것은 실제로 또 다른 범위입니다.
그래서 우리는 돌아가서 번호 주위에 스팬을 추가 할 것입니다.
그리고 이것은 전체적인 것이 아닌 요소의 작은 부분을 대상으로 다시 사용할 수있는 범위에 대한 완벽한 사용법입니다.
이번에는 다른 선택 방법을 보여주기 위해 아이디어를주지 않을 것입니다.
그러니 단락 대신 범위라는 것을 기억하십시오.
그리고 그것은 우리 페이지에있는 유일한 사람입니다.
그래서 우리는 돌아갈거야.
따라서 단락을 선택하는 대신 새 변수를 만들어 보겠습니다. 우승 점수 표시라고 부르면 문서 쿼리 선택기가됩니다.
그러나 페이지에 다른 기간이 있으므로 단락보다는 단락을 선택해야합니다.
그것이 우리가 작성해야하는 전부입니다.
P 공간.
스팬.
그리고 우리는 구할 것이다.
이제 단락 대신 여기에 표시된 점수를 업데이트 해 봅시다.
이렇게이기는 점수는 이렇게 나옵니다.
그리고 그것은 여전히 ​​완벽하지 않을 것입니다.
매번 변경된 값만 업데이트 할 예정이지만 적어도 전체 단락을 업데이트하지는 않습니다.
다음 단계는 값이 함께 동기화되도록 입력 안에있는 숫자를 표시하도록 업데이트하는 것입니다.
따라서 우리는 입력에서 데이터를 얻는 방법을 실제로 보지 못했습니다.
현재 값은 어떻게 얻습니까?
입력을 선택하여 여기에서 보여 드리겠습니다.
따라서 쿼리 선택기를 문서화하고 콘솔 입력에서이를 수행하고 변수에 저장하려고합니다. 따라서 var 입력 문서 taqueria를 입력을 선택하면 입력 값을 처리합니다.
따라서이 값은 값이 무엇이든간에이 입력에 포함 된 값의 문자열이됩니다.
그래서 이것을 7로 변경하면 코드를 다시 실행하면 7이됩니다.
만약 내가 그것을 거대한 숫자로 만들었다면, 나는이 값을 다시 반영한다.
그래서 우리는 변경된 문자열 값 대신이 값을 변경하여이를 사용하게 될 것입니다.
Nahm 입력 점 값으로 변경하여 여기에서 값을 가져 와서 승리 점수를 변경하면 텍스트 내용이 표시됩니다.
그래서 우리는 새로 고침과 나는 이것을 업데이 트하고 당신은 지금 함께 동기화 할 수 있습니다.
그래서 이것을 1 대 3으로 업데이트하면 내 플레이 또는 우승 점수 표시가 1에서 3으로 업데이트됩니다.
물론 우리는 123 세까지 뛰지 않을 것입니다.
우리는 여전히 5시에 뛰고 있습니다.
이는 우리의 논리가이 새로운 입력 값을 반영하지 못하기 때문입니다. 원래의 5 점인 원래의 점수이기 때문입니다.
그래서 우리는 또한 점수를 낮추고 입력 값을 마비시키고 평등하게하기 위해 점수를 얻고 싶습니다.
그리고 이제 이것을 변경하여 3 시까 지 게임을하고 클릭하면 우리는 이상한 행동을하게됩니다.
그래서 그것은 5시에 멈추지 않았습니다.
그냥 영원히 계속됩니다.
그래서 이것은 여러 유형의 데이터 문자열과 숫자와 관련이있는 재미있는 버그이며 이중 등호 대 삼중 등호를 비교합니다.
그래서 그것의 밑으로 가려면 몇 가지 단점을 보자. 벌채 반출.
그래서 우리는이 모든 것의 핵심은 플레이어의 점수가 승리 점수와 같을 경우 플레이어가 가지고 있는지를 확인하는 여기 또는 여기 라인입니다.
우리가 게임을 사실로 설정했을 때입니다.
게임이 끝났기 때문에 지금은 일어나지 않습니다.
우리가 점수를 바꾸면.
게임은 결코 바뀌지 않습니다.
그것은 항상 거짓입니다.
그래서이 라인에 뭔가 잘못 될 것입니다.
그러니 취소 된 로그를 작성하고 두 가지를 할 것입니다.
플레이어 1 득점을 인쇄하여 승리 득점을 인쇄하고 쉼표로 구분하면 같은 행에 인쇄됩니다.
Comstock 로그를 사용하는 간단한 메모는 지금 디버깅하는 방법이지만 나중에 디버깅하는 고급 방법에 대해 이야기 할 것입니다.
그래서 나는 새로 고쳐서 시작할 때 플레이어 1 점수가 올라간 것을 보게됩니다. 그러면 우리는 3 점을 얻었고 5 점과 비교할 수 있습니다.
따라서 선수 1 점수는 3 점이며 5 점입니다.
그러나 내가 이것을 바꾸 자마자 7라고 말하면서 나는 말합니다.
플레이어 1은 이제 4 번인 플레이어 1 점수와 7 번인 승리 점수를 비교합니다.
방금 5시에 시작하면 다시 새로 고칩니다.
그것은 잘 작동합니다.
하지만 이것을 바꿔서 숫자와 문자열을 비교하면 우리는 여기에서 트리플이 같기 때문에 우리에게는 효과가 없을 것입니다.
그래서 우리는 두 배의 평등을 할 수 있었지만 당신은 내가 그 팬이 아니라는 것을 알고 있습니다.
그래서 우리가 대신 할 일은 여기에 내려 가서 이것을 취하여 그 값을 넣고 그것을 문자열로 바꾸는 것입니다.
그래서 숫자는 그 자본과 숫자를 닮은 다음 전달하고 값을 넣어 문자열로 바꾸고 점수를 얻도록 설정합니다.
그래서 우리는 신선했습니다.
이제는 정상적으로 작동합니다.
우리는 5 점을 얻었지만, 우리가 이것을 게임으로 바꾸면 2 점이 끝납니다.
우리가 시작한 5 게임을하는 경우에 집중해야 할 작은 문제가 하나 있습니다.
그리고 그 중반을 결정하면 최대 점수에서 우승 점수를 변경하고 싶습니다.
우리 코드는 지금 그것을 잘 처리하지 못합니다. 왜냐하면 내가 이것을 바꿀 경우, 우리는 단지 세 가지 밖에 연주하지 않기 때문입니다.
우리는 이것을 처리하는 두 가지 다른 방법이 있습니다.
첫 번째 것은 점수와 모든 것을 다시 0으로 재설정하는 것입니다.
그리고 다른 하나는 5로 계속해서 놀고 있습니다.
하지만 실제로 일어나고있는 것은 우리가 3 게임을하고 있지만 이미 3 게임을 통과 한 것입니다.
그래서 우리가 이미 통과했기 때문에 우리가 거짓말을하기 때문에 더 이상 코드가 작동하지 않습니다. 플레이어가이기는 점수와 동일한 점수를 얻는 것입니다.
승리 점수보다 큰지 확인하지 않습니다.
그래서 우리가 그것을 바꿀 수 있다면.
그래서 그것이 승리 점수보다 크다면 게임은 끝났고 괜찮습니다.
하지만 더 좋은 해결책은 최대 스코어를 변경할 때마다 0으로 리셋하는 것입니다. 어쨌든 우리가 게임을 끝내기를 원할 것입니다. 그리고 우리가 이것을하기를 원하는 다른 이유가 있습니다. 짧은 리팩터링을위한 좋은 유스 케이스 다.
그래서 우리가 점수를 바꿀 때이기는 점수가 있습니다.
우리는 여기서 실행중인 것과 동일한 논리 인 게임을 재설정하려고합니다.
그래서 우리는이 코드를 복사하고 reset이라는 새로운 함수를 만들 것입니다.
그래서 함수 리셋은이 코드를 모두 넣은 다음 숫자 입력이 변경되면 우리는 리셋을 실행합니다.
그래서 여기서 5 번으로 리셋하는 걸 볼 수 있습니다.
이것은 잘 작동합니다.
우리는 5 점을 얻는다.
리셋을 클릭하고이 이벤트 리스너 내부에서 리셋 함수를 호출하지 않았으므로 리셋 함수 호출을 추가해야합니다.
그리고 우리가 새롭게하면 우리는 5에 도착합니다.
클릭 재설정.
그게 다 좋다.
이제 게임 중간에 점수를 변경하면 다시 리셋되어 이제 1로 플레이합니다.
그리고 그것은 작동합니다.
또는 내가 바뀌면.
이제 우리는 7시에 뛰고 있습니다.
그것은 우리를 0으로 되돌려 놓습니다.
따라서 실제로 이것이 2로가는 게임이라는 것을 알기로 결정하면 스펙이 0으로 변경됩니다.
그리고 우리는 그것을 다루는 방법에 대해 걱정할 필요가 없습니다.
우리가 중반에 변화한다면.
그래서 우리가하고있는 일은 리셋하는 것입니다. 코드를 여기에서 아래로 복제하는 대신 코드를 말라 버리는 별도의 기능을 만들었습니다.
그래서 지금은 그것입니다.
그것이 우리가해야 할 전부입니다.
여러분 중 일부는이 코드가 실제로 우리가 이것을 할 수있는 최선의 방법인지 궁금해 할 것입니다.
대답은 아니오입니다.
면밀히 살펴 본다면 매우 유사하다는 것을 알 수 있습니다.
우리가 여기에서 P2를하고 P2를 여기에서하는 것을 제외하고는 기본적으로 같습니다.
그러나 다른 모든 단어는 동일합니다.
그래서 이것을 조금 더 잘 만드는 더 많은 고급 방법이 있습니다.
하지만 여기서는 그렇게하지 않을 것입니다. 왜냐하면 제가 집중하고자하는 것은 개념적으로 어떻게하면 자바 스크립트 이벤트 리스너 선택기의 지배적 인 관계와 인터랙티브 한 HD IMO를 취할 수 있는지, 그리고 그것이 제가 집중하고자하는 것입니다.
그러나이 코드를 좀 더 짧게 만드는 방법을 보게 될 것입니다.
여기에 우리가 할 수있는 일이 있습니다.
우리는 마비 입력을이 단어를 사소한 변화라는 단어로 대체 할 수 있습니다. 그러나이를 수행하고 코드를 조금만 줄이십시오.
그래서 내가 이것을 바꿀 때 우리는 지금 3시에 놀고 있습니다.
모든 것은 여전히 ​​똑같이 작동합니다.
방금 입력 한 이벤트가 무엇인지를 나타내는 키워드를 사용했습니다.
좋아요,이 수업을 위해서입니다.
제가 다음 프로젝트에서 언급했듯이, 우리는 좀 더 실질적인 것을 만들어 낼 것입니다. 그리고 여기에서했던 것보다 훨씬 더 좋아 보일 것이라고 약속합니다.