OK 우리는 되돌아 올 것이다.
자바 스크립트에 대한 소개에서 자바 스크립트를 배우는 중요한 이유 중 하나는 우리가 페이지를 대화식으로 사용할 수 있다는 것입니다.
사용자가 버튼을 클릭하거나 무언가를 입력하거나 화살표 키를 누르거나 무엇을 하든지 코드를 실행할 수있는 방법입니다.
주어진 시점에 실행되는 해당 코드를 페이지 시작 부분에서 바로 실행하는 것이 아니라 가질 수 있습니다.
그렇게하기 위해서는 Dom 이벤트에 대해 이야기해야합니다.
이 비디오는 Dom 이벤트에 대한 소개입니다.
개념적으로 그들을 설정하는 과정과 그 다음 구문.
그래서 제가 언급했듯이 사건은 어디 에나 있습니다.
웹 페이지와 상호 작용할 때를 생각해보십시오. 링크를 마우스로 가리키면 팝업 될 수있는 버튼과 같은 것들을 클릭 할 수 있습니다.
특정 페이지에서 요소를 끌어다 놓을 수 있습니다.
사용자가 두 번 클릭하여 실행되는 코드가 있거나 실제로이 웹 페이지에 몇 가지 예가 있습니다.
이 슬라이드 닷컴은 웹 사이트이며 왼쪽 및 오른쪽 화살표 키를 눌러 슬라이드를 변경합니다.
따라서 왼쪽 화살표 키 또는 오른쪽 화살표 키를 누르거나 여기를 클릭하면 일부 코드가 실행됩니다.
또한 이벤트이며 현재 슬라이드를 변경하는 코드를 실행 중입니다.
그래서 요점은 사건들이 곳곳에 있고 그들이 정말로 흥미 롭다는 것입니다.
웹 페이지를 대화식으로 만들 수 있기 때문에 텍스트를 변경하는 색상을 변경하는 방법에 대해 배웠던 조작 자료를 취할 수 있고 특정 상황이 발생할 때 실제로이를 수행 할 수 있기 때문에 가르치는 것이 가장 좋아하는 주제 중 하나입니다.
그래서 이것은 정말로 기숙사를 조작 할 수있는 가능성을 열어줍니다.
게임을 만드는 방법은 폼 유효성 검사기를 만드는 방법입니다. 우리는 정말 멋진 색상 선택기 게임을 만들고이 모든 이벤트로 인해 발생합니다.
따라서 이러한 이벤트가 작동하는 방식은 실제로 특정 요소에 연결하여 첫 번째 버튼 또는 두 번째 H-1과 같은 요소를 선택하거나 유형이 텍스트와 동일한 입력을 선택한 다음 해당 이벤트 리스너를 연결하는 것입니다 선택된 요소.
예를 들어 H1에서 마우스를 올리면 텍스트 입력에서 키 누르기 이벤트를들을 수있는 버튼 클릭을들을 수 있습니다. 그런 다음 해당 이벤트 간의 차이점에 대해 더 자세히 이야기하겠습니다.
자바 스크립트에는 여러 가지 유형의 이벤트가 있지만 중요한 것은 주어진 요소에서 수신 대기중인 이벤트가 있어야한다는 것입니다.
따라서 이전에 내가 선택한 것에 대해 이야기하고 나서 여전히 적용되는 것처럼 조작 할 수 있습니다.
우리는 무언가를 선택할 필요가 있습니다. 그러면 우리가 선택한 이벤트에 이벤트 리스너를 추가하는 것입니다.
특히 우리는 이벤트 리스너 추가라고하는 한 가지 방법을 항상 사용하려고합니다.
그래서 이벤트 리스너는 패스워드 때문에 첫 번째 버튼이나 입력 타입과 같은 요소를 선택하고 우리가 선택한 것을 가지고 있으면 이벤트 리스너를 호출하고 두 개의 인수를줍니다.
첫 번째는 우리가 듣고 싶은 이벤트 유형입니다.
두 번째 인수는 해당 이벤트가 발생할 때 실행하려는 코드입니다.
여기 예제가 있습니다.
페이지의 첫 번째 버튼을 선택하는 것은 버튼의 위치 또는 모양 또는 아무 버튼이나 상관 없습니다.
그리고 event listener click에서 button을 호출하고 두 번째 인수는 여기까지가는 함수입니다.
그리고이 코드는 즉시 실행되지 않습니다.
이것은 콜백이라고 기억하십시오.
이 코드는 즉시 실행되지 않습니다.
이 이벤트가 시작되면 실행됩니다.
한 번의 클릭으로 javascript가 호출됩니다.
이 기능은 빛나는 순간이며 여기로 돌아와 준비가되어 있습니다.
그리고 그 코드가 실행되고 상담원에게 누군가가 버튼을 클릭하는 것을 기록하지 않게됩니다.
따라서이 함수는 버튼이 선택된 버튼으로 빠르게 실행될 때마다 실행됩니다.
여기에 또 다른 예가 있습니다.
여기서는 버튼과 단락을 표시하고 Kery 선택기로 둘 다 선택하고 변수에 저장하고 버튼을 클릭하면 이벤트 리스너를 클릭 한 다음 클릭 이벤트를 추가합니다. 두 번째 인수는 콜백 함수입니다.
그리고 그 버튼을 클릭 할 때마다 우리가하려고하는 것은 단락 텍스트 내용이 누군가가 버튼을 클릭하도록 변경되고 아무 버튼도 클릭하지 않고 누군가가 버튼을 클릭하면 그 버튼을 클릭하면 볼 수 있습니다.
이제 Dom 데모 페이지를 사용하여 간단한 데모를 해보겠습니다.이 H-1을 여기서 시작하겠습니다.
사용자가 클릭 할 때 색상을 변경하십시오.
그렇게하기 위해서는 항상 H-1을 선택해야합니다.
그래서 우리는 여러 가지 옵션을 가지고 있습니다.
질의 선택자 H-1이 우리가 가지고 있는지 확인하는 질의어 선택기 문서를 사용할 것입니다.
괜찮아.
그런 다음 이벤트 리스너를 추가하는 H-1을 작성합니다.
두 가지 주장이 있음을 기억하십시오.
첫 번째는 우리가 듣고있는 사건입니다.
그리고 우리는 다른 옵션에 대해 다른 이벤트에 관해 이야기하는 데 더 많은 시간을 할애 할 것입니다.
지금은 클릭 만하고 두 번째는 사용자가 클릭 할 때 실행하려는 코드입니다.
그래서 기능 및 그냥 정말 시작하고 사용자가 클릭 할 때 경고를 수행하십시오.
그래서 우리는 각자가 이와 같이 클릭 한 경고를 할 것입니다.
그리고 지금 엔터를 치자.
아무 것도 즉시 바뀌지 않습니다.
그러나 지금 내가 이것을 클릭하면 이것을 닫을 것입니다.
페이지의 아무 곳이나 클릭하면
H-1을 제외하고는 아무 일도 일어나지 않습니다.
H-1을 클릭하자마자 H-1이 맞았다 고 알려줍니다.
중요합니다.
그것은 H-1에만 적용됩니다.하지만 H-1이 화면 전체를 가로 질러가는 지 검사하기 때문에 여기를 클릭해서 클릭 할 수 있습니다.
그래서이 점에있어 마음에 드는 부분은 있지만, 상황에 따라 행동이 조금씩 다르게 나타나는 경우가 있습니다. CSSA를 사용하여 스테이지 1을 단축하거나 또는 어쨌든 청취자.
따라서 경고하는 것보다는 다른 것을 시도해보십시오.
그리고 위쪽 화살표를 누르면 이벤트 리스너를 클릭하고 여기에서 코드를 변경하면 H-1과 같은 스타일의 배경이 같고 오렌지색 배경을 만들어 보겠습니다.
다시는 아무 것도 바뀌지 않지만 내가 무슨 일이 일어나는지주의 깊게 클릭하면 H-1이 클릭되었다는 경고가 계속 표시됩니다.
그리고 닫을 때 주황색이됩니다.
따라서 여기에 도덕적 인면은 주어진 요소에 둘 이상의 청취자를 가질 수 있다는 것입니다.
그 H-1을 클릭했을 때 우리가 추가 한 첫 번째 청취자는 클릭을 듣고 경보를 울린 다음 나중에 다른 청취자를 추가하여 클릭을 청취했지만 배경색이 변경되었습니다.
그래서 둘 다 클릭하면 실행됩니다.
그리고 내가 다시 클릭하면 경고 메시지가 나타나고 오렌지색으로 변경된 것은 당연히 이제는 일어날 것입니다. 이미 오렌지색 이었기 때문에 당신은 그것을 보지 못합니다.하지만 당신은 나를 신뢰해야합니다.
그것은 그것을 계속해서 오렌지색으로 계속 변경합니다.
좋아, 나는 새로 고치고 그 모든 것을 없앨 것이다.
또한 UL에 청취자를 추가하여 빠른 데모를하고 싶습니다.
따라서 문서 덤프 쿼리 선택기 UL을 수행하고 하나의 ul 대신 3 개의 맹방을 가지고 있음을 기억하십시오.
그래서 저는 그것과 같은 부모 요소에 설정할 때 어떻게되는지 보여 드리겠습니다.
글쎄, 여기서 변수를 사용하지 않을 것입니다.
Adamant 청취자.
딸깍 하는 소리.
이것이 첫 번째 주장입니다.
두 번째는 이와 같이 실행하려는 기능입니다.
그리고 저는 시작할 것입니다.
로그를 잘하는 콘솔을 클릭 만하면됩니다.
그것은 수동적 인 목소리입니다.
나쁜 생각.
하자.
훨씬 더 나은 UL을 클릭했습니다.
승인.
이제 콘솔을 열어두고 UL을 클릭합시다.
그러나 우리는 어떻게 기름을 클릭 할 것인가?
우물에는 그 안에 3 명의 동맹국이 있기 때문입니다.
UL은이 모든 것입니다.
따라서 어떤 우두머리가 우물에서 어느 곳에서나 빠르게 움직이고 있습니다.
여기서 숫자가 증가하는 것을 볼 수 있습니다.
이 콘솔의 점 로그를 빨리 실행하려고합니다.
한 번 더 새로 고침하고 이번에는 동맹 자체를 바꾸고 싶다고합시다.
개인 동맹을 클릭하면 어떤 일이 일어나길 원합니다.
이를 수행하는 데는 몇 가지 방법이 있습니다.
그리고 우리는 가장 단순한 것으로 시작하여 하나의 청취자를 각 동맹 자에게 머리로 붙이는 것으로 시작합니다.
우리가 결국 할 일은 한 청취자를 UL에 연결 한 다음 그 청취자 내부에 연결하는 것입니다.
우리는 UL 내부의 어떤 거짓말이 하나의 Lessner를 통해 모두 클릭되었는지 발견 할 것입니다.
당분간 우리는 모든 거짓말에 별도의 청취자를 추가 할 것입니다. 그래서 우리 동맹국을 선택하여 시작할 필요가 있습니다. 그래서 우리 동맹국은 문서도 큐어 선택기와 동등합니다.
좋아, 우리는 for 루프를 할 필요가있다.
그래서 var I는 0입니다.
우리가 항상이 일을한다고 말했던 것을 기억하십시오.
그래서 나는 그 길이만큼의 동맹국 들보 다 더하기 플러스처럼.
그리고 여기에서 우리는 실제로 각각의 동맹국에 청취자를 추가 할 것입니다.
그래서 그렇게 보입니다.
Elyse I 그렇게 특정 동맹국과 이벤트 리스너 클릭 기능을 제공하고 조금만 수행했습니다.
그리고 우리가 실행하고 싶은 코드.
클릭 한 동맹국의 색을 바꾸어 보라색으로 변경합시다.
그래서 우리에게는 몇 가지 다른 옵션이 있습니다.
내가해야 할 일은 클릭 한 동맹자를 말하는 것입니다.
그래서 저는이 동맹국을 할 수 있습니다. 비록이 키워드를 사용하는 것이 훨씬 쉬운 방법이기 때문에 정말 좋은 해결책은 아닙니다.
청취자의 내부에서 클릭 한 항목이나 가리킨 항목 또는 키 누르기가 발생한 항목을 나타내는 키워드는 at 이벤트 직전에 이동하는 요소가 무엇이든지 무엇이든간에 을 참고하여.
그래서 저는이 색이 보라색과 같은 도트 스타일을 쓸 수 있습니다.
그리고 실제로 그것은 더 명백한 것입니다.
작은 글꼴입니다.
그래서 분홍색을 그렇게 해보 죠.
나는 들어갔다.
즉시 아무 일도 일어나지 않지만, 동맹국을 클릭하면 분홍색으로 변하는 것을 알 수 있습니다.
그리고 계속 클릭하면 계속 분홍색으로 변합니다. 당신은 말할 수 없습니다.
따라서 개별적으로 반복되는 것들을 선택하고 각각에 이벤트 리스너를 추가하는이 패턴은 실제로 매우 일반적입니다.
우리는 우리가 만드는 다음 몇 가지 프로젝트에서 항상 그것을 볼 것입니다.
여기에서 마지막으로 언급 할 것은 괄호로 함수를 작성하고 여기에 이름을 지정하지 않은 것처럼 여기에서했던 것처럼 익명의 함수를 항상 사용할 필요는 없다는 것입니다.
당신은 그렇게 할 필요가 없습니다.
여기에서했던 것처럼 별도로 명명 된 함수를 선언 할 수 있습니다.
함수 변경 텍스트 그리고 우리가해야 할 일은 이벤트 리스너를 추가하거나 클릭 한 다음 텍스트를 변경하는 버튼을 말하는 것입니다.
우리가 원하는 것이 아닌 함수를 즉시 실행하기 때문에 나중에 괄호를 사용하지 않는다.
따라서 우리는이 함수의 값을 전달하는 중입니다. 기본적으로이 퀵 리스너에 내용을 전달하고 있으며 사용자가이 버튼을 클릭 할 때 실행하려는 함수가 여기에 있습니다.
그러나 아직 실행하지 마십시오.
그래서이 둘은 똑같이 작동 할 것입니다.
그것은 단지 선호의 문제입니다.
대부분의 경우 나중에 발생할 수있는 몇 가지 차이점이 있습니다.
나는 이것을 많이 사용하는 것을 선호한다.
익명의 함수를 사용하지 않는 유일한 방법은 시계 리스너 외부의 다른 곳에서 코드를 다시 사용해야하는 경우입니다.
그래서 개별적으로 직접 실행하거나이 함수를 복제하는 대신 다른 빠른 수신기 대신 실행하고 싶으면 이름을 지정한 다음 두 번 사용하는 이름을 복제합니다.
좋아요. 다음에 당신은 빠른 Wisner 's와 우리가 지난 몇 몇 비디오에서 배운 것들을 사용하여 빠른 연습을 할 수있는 기회를 갖게 될 것입니다.