다시 오신 것을 환영합니다.
그래서 지금까지 우리가 기숙사에서 이벤트와 이벤트 청취자 주변에서 해왔 던 모든 일들과 지배적 인 관계는 우리가 방금 수행 한 편지를 덤프하고 있습니다.
그리고 그것은 어떻게 그들이 일했는지 보여주는 개인적인 조각들에 대한 것이 었습니다.
이제 우리는 그들이 모두 어떻게 어울리 며 다소 실질적인 앱을 만들 수 있는지 살펴볼 것입니다.
그래서 당신이 볼 수 있듯이 이것은 가장 아름다운 애플 리케이션이 아닙니다.
우리는 조각들이 개념적으로 얼마나 잘 어울리는 지 여기에 초점을 맞추고 있습니다. 우리가 어떻게 요소를 선택하는지 이벤트를 취하는 방법, 우리가 어떻게 노화를 작성했는지, 어떻게 그 모든 것이 서로 어울리는 지에 초점을 맞추고 있습니다.
스타일링은 추가 기능입니다.
이 시점에서 우리는 다음 프로젝트를 진행합니다.
우리는 스타일에 많은 초점을 두어 멋지게 보이게 할 것입니다.
약속 해요.
따라서 우리가 할 일은 간단한 점수 기록 앱입니다.
그래서 나는 그 모든 시간에 당신이 친구 나 탁구 또는 틱택 톡과 함께 바위 종이 가위를 연주하고 있다는 것을 생각해보기를 바란다. 그리고 점수를 추적하는 것이 너무 피곤해서 누가이 때 우승 하는지를 알기가 어렵다. 응용 프로그램은 그것이 작동하는 방식입니다.
두 선수는 1 점으로 점수를 매 깁니다.
당신은 페이지를로드하고 우리가 5시에 놀고 있다고 알려줍니다.
버튼을 클릭하여 포인트를 추가하는 것뿐입니다.
따라서 플레이어 1에 포인트를 추가하려면 포인트 플레이어를 플레이어 2를 클릭하고 5를 얻는 플레이어를 추가하려면 플레이어 1을 클릭하십시오.
녹색으로 변하는 것을 알 수 있습니다.
다시 시도하고 점수를 매길 수는 없습니다.
게임이 끝났기 때문입니다.
따라서 재설정 버튼을 클릭하여 재설정 할 수 있습니다.
그리고 이제는 최고의 선수 2 명이 완전히 뛰었습니다. 우리는 더 이상 뛰지 못합니다.
그리고 그 빠른 재설정.
그래서 하나 더 많은 특징은 우리가 플레이하고있는 것을 지정할 수 있다는 것입니다.
따라서 7 시까 지 게임을하고 싶다면 여기에이 번호를 입력하면됩니다. 그러면 마지막으로 4시 53 분에 게임을 시작한 플레이어와 가까운 게임을 만들어 보겠습니다. 7시에 끝나고 1 번 선수가 녹색으로 변하며 더 이상 점수를 더할 수 없으면 다시 리셋 할 수 있습니다.
이것이 바로 우리가 여기서 구축하는 데 중점을 둘 것입니다.
그래서 우리가하고 싶은 첫 번째 작업은 파일을 설정 한 다음 H 팀 L 구조를 만든 다음 자바 스크립트로 작업하고 작업을 수행하는 것입니다.
이제 시작하고 시작하겠습니다.
그래서 저는 비어있는 것을 가지고 있습니다.
나는 우리의 상용구에 추가 할 점수 키퍼 점 H 티모라고 부르며 그와 같은 제목을 부여합니다.
나는 여기서 우리가 여기서보고있는 것에 대해 이야기해야한다.
그래서 이것은 H-1 H1이 아니며 결국 우리는 이것을 바꿀 것입니다.
이 H-1 안에는 플레이어 1 점수 2 플레이어와 같을 필요가있는 두 가지가 있기 때문에 우리는 단지 단단한 h 일이되기를 원하지 않습니다.하지만 이것을 별도로 선택할 수 있어야합니다.
그래서 우리는이 H1을 더 작은 조각들로 나누는 방법을 원합니다.
그래서 우리는 우리가 그것을 어떻게 조금만 할 수 있는지 보게 될 것입니다.
그럼 다음은 당신이 연주하는 단락입니다.
그리고 7시에 시작해서 시작하자.
아니면 5 가지를 해보 죠.
나는 그것이 어떻게 있었는지 생각한다.
그리고 우리는 여기에 의견을 가지고 있습니다.
이것은 입력 유형과 동일한 숫자입니다.
그래서 입력 타입은 숫자와 같고 우리 모두가 필요합니다.
그리고 첫 번째 버튼이 있습니다.
플레이어 1 또는 두 번째 버튼 플레이어 2.
마지막 버튼이 재설정되었습니다.
따라서이 페이지를 새로 고치면 우리가 만든 자체 페이지가 열립니다.
한 번 보자.
그들은 거의 똑같이 보입니다.
바로 보이는이 사진을 약간 확대하십시오.
물론 아무 것도 클릭하지 않으면 아무 일도 일어나지 않습니다.
자 이제 자바 스크립트를 보겠습니다.
그래서 저는 새 파일을 만들겠습니다. 나는 scorekeeper J.S.라고 부를 것입니다. 그리고 나는 항상 연결되어있는 여기에 경고를하거나 추가합니다.
그런 다음 필자는 스코어 키퍼 나 스크립트에 들어가 스크립트를 포함 시켜서 여기에서 시작하여 시작할 것입니다.
따라서 스크립트 유형은 javascript 소스를 scorekeeper와 동일하게 호출합니다.
네, 그렇습니다.
우리가 새로 고침하면.
이것은 자바 스크립트 경고 연결된 페이지의 내 버전입니다.
괜찮아.
그래서 우리는 전자 메일을 설정했습니다.
좋아 보인다.
우리가해야 할 일은 실제로 몇 가지 기능을 추가하는 자바 스크립트 코드를 얻는 것입니다.
그리고 언제나처럼 우리는 다른 요소들을 선택함으로써 시작할 필요가 있습니다.
먼저 버튼을 선택하고 먼저 플레이어와 플레이어 또는 두 개의 버튼을 실행 해 봅시다. 먼저 초점을 맞출 기능은이 버튼 중 하나를 클릭 할 때 점수가 증가하는 것입니다.
그래서 우리가해야 할 일은 그 플레이어를 하나의 버튼으로 선택하는 것부터 시작하는 것입니다. 우리가 본다면 그냥 버튼 일뿐입니다. 우리는 이것을 하나의 버튼이라고 부르겠습니다. 그러면 여기에서 우리는 P2를 위해 하나를 추가 할 것입니다. 리셋을 위해 리셋을 추가하면됩니다.
그래서 우리에게는 지금 세 가지 아이디어가 있습니다.
따라서 선택하기가 훨씬 쉽습니다.
우리는 그냥 VIP 버튼을 문서 쿼리 선택기와 동일하게 지정할 것입니다.
또는 ID로 요소를 가져올 수 있습니다.
여기서는 이들을 섞어서 첫 번째 쿼리 선택기 P1과 P2를 차례대로 수행합니다.
버튼은 문서 점일 것이고 우리는 id에 의해 요소를 얻습니다. 우리는 더 이상 Octa Thorpe가 필요하지 않습니다.
그래서 그것은 우리에게 두 개의 버튼을줍니다.
첫 번째 청취자를 설정하면이 첫 번째 버튼을 클릭하면 경고 메시지가 표시되거나 취소됩니다.
그래서 우리는 P1 버튼을 쓰고 클릭 할 때 이벤트 리스너를 추가하고 여기에 우리 함수를 추가하려고합니다.
그리고 그 기능 안에서 우리는 단지 클릭 된 경고를 알리려고합니다. 바로 그 것입니다.
따라서 우리 페이지를 새로 고치고 great을 클릭하여 다시 시도하면 올바르게 선택되었음을 알리고 Click 이벤트에 대한 리스너를 올바르게 추가했습니다.
플레이어 2는 플레이어 1 버튼에만 추가했기 때문에 아무 것도하지 않습니다.
자 이제 이것이 실제로 어떻게 작동하는지 이야기 해 봅시다.
여기를 클릭하면 플레이어 1 점수 또는 얼마나 많은 점수를 추적하는지 알려주는 변수가 필요합니다.
플레이어 1이 있고 플레이어 1 점수에 1을 더하고 마지막 부분이 플레이어 1 점수를 반영하도록 여기를 업데이트합니다.
변수를 만들어서 1 점이라고하고 0으로 시작하도록 설정하겠습니다.
그리고 내가하고 싶은 모든 것은 우리가 클릭 할 때 항상 플레이어 1 점수에 하나를 더하는 것입니다.
그래서 그것은 단지 하나의 점수 플러스 플러스가 될 것입니다.
그냥 그렇게.
우리는 새로 고침을하고 로그를 취소해야하기 때문에 아무 것도 보지 못했습니다.
그는 경고보다는 먼저 점수를 받았습니다.
우리가 지금 새로 고침하고 콘솔과 McCook 플레이어 1 점수를 열고 그것이 어떻게 진행되는지 보면 매우 성가 시게됩니다.
1 2 3 4 5 그리고 그것은 계속 될 것입니다.
그래서 몇 가지 문제가 있습니다.
하나는 점수를 표시하지 않고 두 개는 5로 경기를한다고합니다.
그리고 그것은 우리가 원하는만큼 많이 증가시키기 때문에 분명하지 않습니다.
그래서 우리는 5 게임 이상이나 그런 게임이라면 몇 가지 논리가 필요합니다.
먼저이 H1을 어떻게 업데이트 할 수 있는지 알아 보겠습니다.
그래서 우리가 할 수있는 것은 시작하기 위해 H-1을 선택하는 것입니다.
그럼 그냥 멀리 부르 자.
H1은 그런 식으로 선택기 H-1을 쿼리하는 문서와 같습니다.
그리고 여기에서 우리는 단지 H-1 도트 텍스트 콘텐츠가 그처럼 하나의 점수와 같다고 말할 것입니다.
그래서 우리는 이것을 취하여 텍스트 컨텐츠를 로깅하지 않고 점수가 무엇이든 변경합니다.
그리고 제가 여기에 그런 종류의 일을 잘 기록한다면, 당신은 우리가 각각의 내부에있는 모든 것을 완전히 뒤엎 었음을 알 수 있습니다.
우리는 두 가지 점수와 다른 점수를 유지하기를 원합니다.
이 번호 하나만 바꾸고 싶습니다.
그래서 남성에게 여분의 h를 사용하는 방법이 있습니다.이 방법은 우리의 점수 기록원으로 돌아 가면 매번 그녀의 인생을 훨씬 쉽게 만듭니다. 그러나 매번 우리는 span 요소를 도입 할 것입니다.
그리고 스팬이 작동하는 방식은 스코어의 숫자 만 둘러 쌀 것입니다.
그래서 그것이 의미하는 것은 제가 이것을 검사한다면 지금 할 수 있다는 것입니다.
변화가없는 것처럼 보이지 않으며 그것이 스팬의 포인트입니다.
만약 당신이 H-1을 찾으면 정확하게 할 수있는 javascript로 나중에 또는 스타일을 다르게하거나 사용할 수있는 태그로 뭔가를 감쌀 수 있습니다. 그 수를 감싸는 특별한 범위를 가져라.
그래서 우리가 그 스팬을 선택하고 그 스팬을 변경한다면 우리는 여전히 텐포와 띄어쓰기를 올바르게 가질 것이고 다른 득점을 가질 것입니다.
그래서 우리는 그 범위를 선택하고 여기에 ID를 다시 쓰려고합니다.
그래서 span과 같이 P1 디스플레이를 호출 할 것입니다.
이제 우리는 스코어 키퍼 J S로 가서 몇 가지를 바꿔야합니다.
따라서 우리는 H-1을 제거하기 위해 더 이상 H-1을 선택할 필요가 없습니다.
우리는 하나의 디스플레이가 문서 get과 동등한 디스플레이를 선택하게 될 것이고, 다시 다양한 쿼리 선택기를 수행 할 것입니다. Query selector.
그리고 우리는 P1 디스플레이를 호출하여 스팬 (span)을 줄 것입니다.
여기서 콘서트 금고 보관소를 열면 어떨까요?
우리가 페이지 새로 고침을로드 할 때 표시되는 것이 표시되면 OK로 인쇄됩니다.
우리의 스판을 올바르게 선택했습니다.
승인.
이제 우리가하고 싶은 일은 점수에 1을 더하는 것입니다.
우리는 우리의 다른 단점을 제거 할 수 있습니다. 그러나 전체 H-1의 텍스트 내용을 변경하는 대신 로그인하십시오.
우리는이 작은 스팬 인 P1 디스플레이에서 변경하려고합니다.
그리고 우리가 새롭게하면 지금 거기에 우리가 간다.
그래서 우리는 그 플레이어를 얻습니다. 디스플레이 업데이트 플레이어 2는 아직 아무 것도하지 않지만 우리는이 기능을 작동시킵니다.
그럼 플레이어 2에게도 똑같은 일을시켜 봅시다.
그래서 제로 스팬 ID를 중심으로 다른 스팬을 추가하고 그 사이에 0으로 이동합니다.
우리는 아무것도 다르게 보일 것입니다 새로 고침하지만 우리는 지금 두 가지 길이 있습니다.
그래서 우리는 득점 자 J 우리에게 돌아가서 두 가지 새로운 변수를 추가하자.
따라서 플레이어가 해당 ID로 선택해야하는 스팬을 표시해야합니다.
쿼리 선택기를 다시 사용하겠습니다.
그리고 우리는 스코어 플레이어에 대한 변수가 필요합니다. 우리는 스코어 플레이어가 동일한 스코어가되기를 원하지 않습니다.
분명히 우리는 값을 추적하는 두 가지 분리 된 방법이 필요합니다.
그래서 제일 먼저하고 싶은 것은 플레이어를 버튼으로 올바르게 선택했는지 테스트하는 것입니다.
그래서 나는 콘서트 금고 로그 플레이어를 버튼으로 할 것이고 단지 그것이 출력되는 것을 볼 것입니다.
그리고 우리가 새로 고치면 우리는 죄수들을 보게됩니다. 뭔가 이상하다는 것을 알 수 있습니다.
플레이어 2 버튼이 아니라 플레이어 1 버튼을 선택했습니다.
그래서 셀렉터는 뭔가 잘못되었습니다.
여기서 우리는 id P1으로 요소를 선택한다는 것을 알 수 있습니다.이 요소는 우리가 여기에 있던 것과 같습니다.
따라서 우리는 P2를 대신 선택해야합니다.
자, 이제 우리가 새로 고쳐 주면 우리가 처리 한 것은 훌륭한 버튼 ID P2를 얻습니다.
이제 청취자를 추가합시다.
그래서 Pete는 해당 이벤트 이벤트 수신기를 클릭하고 나는 항상 뭔가를 출력하거나 로그 P2가 그 새로 고침과 같은 것을 경고하는 것으로 시작하는 것을 좋아합니다.
P2 플레이어가 여전히 작동하고 P2가 일부 코드를 실행하고 있습니다.
이제는 올바른 코드를 넣기 만하면됩니다.
플레이어 1 버튼에 대해 한 일을 살펴보면 시작하기 위해 가변 증분 점수를 얻는 플레이어가 필요합니다.
지금까지 P2 점수.
그리고 그것은 0에서 시작해야합니다.
그리고 나서 우리는 여기에 와서 이것을 P2 점수 플러스로 바꾸고 우리가 아직 선택하지 않은 디스플레이에서 그것을 업데이트해야합니다.
그래서 우리는 또한 그 범위를 선택해야합니다.
여기에 P2 표시의 ID를 기억하십시오.
그래서 우리는 그렇게 할 것입니다.
그녀는 그 라인을 복사하고 문서 Duckery selector P2 디스플레이를 표시하도록 변경합니다. 그러면 플레이어는 점수를 매길 플레이어와 동등한 텍스트 내용으로 디스플레이를 변경합니다.
그럼 한번 보죠.
아직 작동하는 플레이어 1을 클릭하십시오.
플레이어 2도 마찬가지입니다.
승인.
이제 우리 게임에는 끝이 없습니다.
이것은 영원히 계속 될 것입니다.
그래서 우리는 그 기능을 추가하기 위해 노력할 필요가 있습니다.
그리고 우리가 할 수있는 방법은 우리 게임의 상태를 계속 추적 할 변수를 사용하는 것입니다.
그래서 우리 게임에는 두 가지 상태가 있습니다.
첫 번째는 게임을 할 수있는 곳을 지금 클릭 할 수있는 정상 상태입니다.
그리고 두 번째 상태는 우리가 누군가를 가지고있는 곳을 넘어서서 게임이라고 부를 수 있습니다.
따라서 우리는 두 가지 상태가 필요하며 진리 또는 거짓을 모델링하기 위해 부울을 사용할 수 있습니다.
그리고 나는 지금까지 그것을 게임이라고 부를 것입니다.
게임은 끝났고 게임을 끝내면이 게임이 시작됩니다.
게임 시작시 사실이 아닙니다.
그리고 나서 우리가 할 일은 우리가 누군가가이기는 지에 따라 참 또는 거짓으로 게임을 업데이트 할 것입니다.
만약 누군가가 5 게임 이상이되면 이제는 사실이어야하고 더 이상 점수를 업데이트 할 수없고 리셋 및 리셋을해야한다는 것은 다시 거짓 게임을하고 모든 것을 시작해야 함을 의미합니다.
그래서 내가 말하는 것을 보여 드리겠습니다.
우리가하고 싶은 일은 또 다른 변수를 추가하는 것입니다.
나는 그것을 승리 점수라고 부를 것이다.
그리고 그것은 단지 5와 같을 것입니다.
그래서 변수는 플레이어 1과 플레이어 2를 비교할 것입니다.
그래서 우리는 선수가 1 점을 얻었을 때 점수가 승리 점수에 도달했는지 확인하려고합니다.
그렇다면 우리는 게임이 사실이라고 말할 필요가 있습니다.
그래서 논리는 이렇게 보일 것입니다.
if 문을 사용하려고하면 게임 오버에 아직 도달하지 않은 것처럼 보입니다.
그래서 게임이 아니라면 우리는 당신이 이처럼 점수에 더해 지도록 할 것입니다.
내가 지금 이걸 실행할 때 당신은 다른 것을 발견하지 못할 것입니다.
게임 오버가 항상 거짓이기 때문에 플레이어 1과 똑같은 방식으로 작동합니다.
결코 바뀌지 않습니다.
그렇다면 우리는 언제 그것을 사실로 바꿀 것입니까?
게임 끝났을 때.
그리고 그 때가 발생하면 사용자 1 점수가 승리 점수와 같을 때 사용자가 점수를 매길 때입니다.
따라서 플레이어 1 점수에 점수를 더한 후에는 점수가 세 개인 점수가 승리 점수인지 확인합니다.
서로 평등하다면 Contador log로 시작합시다.
게임 끝.
그냥 그렇게.
그리고 영사관을 새로 고침하고 검토하면 지금까지 변경을 시도했는데 이것이 사실이 아니므로 결코 발생하지 않습니다.
이번에는 한 선수를 추가해도 점수는 5 점이됩니다.
우리는 플레이어 1 점수가 승리 점수와 같은지 확인하고 있으며 여기서 게임을 끝내게됩니다.
따라서 단순히 잠금 게임을 취소하기보다는 실제로이 상태를 변경하고 싶습니다.
게임 끝났어.
그래서 그것이 우리를 위해 무엇을 할 것인가? 나는 게임을 새로 시작하면 게임 오버가 사실이기 때문에 더 많은 점수를 더하는 것을 막을 것입니다.
이 작은 수표가 나타납니다.
확인합니다.
아직 끝난 게임인가?
그리고 게임이 끝나면이 코드는 실행되지 않습니다.
그럼 해보 죠.
나는 5 시까 지 갇혀있다.
나는 더 이상 그것을 증가시킬 수 없다.
그러나 우리의 논리는 플레이어 1에만 해당되므로 플레이어 2에게 가서 점수를 올릴 수 있습니다.
우리는 이벤트 리스너를 단추로 누르고 동일한 논리를 추가하기 위해이 플레이어로 이동하려고합니다.
따라서 게임이 끝나지 않으면 스코어를 증가시키고 디스플레이를 업데이트하고 새로운 스코어 플레이어가 승리 스코어와 같은지 확인한 다음 게임 오버가되는지 확인해야합니다.
게임 오버는 사용자 또는 플레이어 나 플레이어 둘 중 누구도 점수를 더 이상 계속 올릴 수 없다는 것을 의미합니다.
자 이제이 작업이 새로 고침되었는지 확인해 봅시다.
우리는 여기서 5 명을 얻을 수 있습니다.
2 번 선수가 작동하지 않거나 5 명이 여기 있습니다. 끝났습니다.
그리고 플레이어 1도 작동하지 않습니다.