윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 69강 - 빠지고 넘어온 내용 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 69강 - 빠지고 넘어온 내용

페이지 정보

조회: 1,203

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

윤인성님의 javascript강의 청각장애인을 위한 자막

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 임원 3판 69 광대

있구요
이번 강의에서는 지금까지 생략하고 넘어와 떤 두가지 내용에 대해서
살펴보도록 하겠습니다
일단 첫 번째로 생각하고 넘어갔던 녀석은
도큐먼트 점 레디 라는 녀석입니다
요녀석 같은 경우에는 이벤트 를 연결하는 거구요
레디 라는 이벤트를 연결을 하는데 사실 정확하게는 도큐먼트 점
애들 이벤트 리스너 에서 톰 컨텐츠로 dd 라는 이벤트를 불러오는 거라고
생각을 해 주시면 되겠습니다
사실 우리가 이전에 윈도우 점 온로드 라는 걸로
요 이벤트 부분을 살펴 봤었는데요 사실 윈도우 점 업로드는 윈도우가
로드될 때 고
도큐먼트 점 도큐먼트 콘텐츠 로 어디 드 같은 경우에는 도미 모두 로드가
될 때 불러 가지기 때문에 위의 녀석보다 는 아래 녀석을 사용하는 것이
조금 더 뭐 명확하다고 할 수 있습니다
사실 큰 차이는 없다고 생각을 하지만요 어쨌거나 도큐먼트 점 레디 라는
것을 위쪽에 써서 일반적으로 제이쿼리 프로그램을 작성하는 것이 일반적이고
요 요 녀석이 너무 자주 사용되기 때문에 쉽게 사용할 수 있게 달라 뒤에
곧바로 함수를 넣게 되면 위와 같은 역할을 수행한다.고 생각을 해 주시면
되겠습니다
간단하게 얼얼 뚜루 모레 d 로 연결을 하는 경우 그리고 그냥
요걸로 곧바로 입력하는 경우 두가지 사용을 해보도록 하겠습니다
사실 목 같은 거기 때문에 큰 의미는 없지만 실행에서 어떻게 출력되는 지
한번 살펴보겠습니다
저장하고 실행하게 되면 레지 라는 녀석이 먼저 나오고 이어서 요 달라
표시 제이쿼리 표시하고 괄호 열고 다꾸 가 나오는 모습을 확인할 수
있습니다
따라서 요렇게 사용되는 경우도 많고 요렇게 사용되는 경우도 많은데 모두
다 윈도우 점 온 로드와 비슷한 기능을 한다. 라고 기억해 주시면
되겠습니다
추가적으로 우리가 10 사장을 건너뛰어 썼는데요 여기에서 파인드 메서드
만 살펴보도록 하겠습니다
간단한 예를 한번 들어 보도록 할텐데요 일단 div 태그를 하나 만들고
div 태그 내부에 에
어펜드 를 사용해서 내부의 다 강 h1 태그 1 왕 그리고
p 태그를 하나 만들어 주도록 하겠습니다
아 내부의 글자는 뭐 헬로 라는 글자와 함께
음 리튬 닷컴에서 만들어진 문자를 간단하게
붙여서 위쪽에 다 넣어 주도록 하겠습니다
이어서 요녀석을 어펜드 투에서
바디 태그 내부에 다 붙여 주도록 하겠는데요
요걸 반복문을 돌려서
3개의 화면에 다 놓아 주도록 하겠습니다
어쨌거나 이렇게 놓고 한번 저장을 하고 코드를 실행해 보게 되면 지금
화면과 같이 나오게 될 텐데요
잠시 a1000 태그의 닫는다 로가 잘 못해서 이렇게 나왔는데 수정을
하고 다시 실행하게 되면 지금 화면처럼 나오는 모습을 확인할 수 있습니다
이때 만약 이 클릭 이벤트를 연결을 하고
클릭을 했을 때 자기 자신 내부에 있는 p 태그에 색상을 바꾸고 싶다고
해봅시다
만약에 p 태그에 색상을 바꾼다 라고 하고
요런식으로 입력을 하게 되면
코드를 저장하고 실행했을 때 클릭하면 모든 p 태그가 변경되게 됩니다
따라서 이 p 태그를 제한할 수 있는 방법이 필요한데요
이제 안 할 수 있는 방법에 크게 두 가지가 있습니다 일단 첫번째 방법은
자기 자신 내부에서 파인드 라는 녀석을 사용하고 파인더로 p 태그를 찾고
색상을 변경해 주는 것입니다
그리고 두번째는 요피 뒤에다가 디스 라는 이름으로 컨텍스트 매개 변수를
넣어 주는 건데요
두가지 모두 비슷한 방법인데 위쪽 걸 사용하는게 요 파인드 를 사용해서
추가적인 확장을 할 때 조금 더 쉽기 때문에 위에꺼 를 사용하는 것을
추천드립니다
어쨌거나 요런식으로 코드를 저장하고 실행 해 보게 되면 클릭할 했을 때
이 녀석 자기 내부에 있는 p 태그만 붉은색으로 변하는 모습을 볼 수
있습니다
어쨌거나 이렇게 레디 메서드와 파인더 메서드 두 가지를 더 추가적으로
기억을 해 주시면 되겠습니다
뭐 이 책에서 다루지 않는 내용들이 좀 있는데요 이 이외에 제이쿼리 관련
내용은 책을 꼭 읽어 보시면 좋겠습니다
사실 만들면서 필요해서 제가 찾아 보았던 내용들을 대부분 넣어 보았던
거기 때문에 읽어 보시다보면 요 내용만으로도 굉장히 많은 것을 만드실 수
있을 거라고 생각을 합니다.