DOUG 로이드 :이 비디오에서는, 우리는 원 별도의 관심을 불러
아주 특별한에 자바 스크립트의 요소
당신이 편리하다는 사실을 발견 때구나
웹 페이지를 조작하는 작업을하고 웹 페이지의 내용을 변경
즉석에서.
그리고 그의 개념이다 문서 객체 모델.
같은 그래서 우리는에 우리의 비디오에서 본 자바 스크립트 객체는 매우 유연합니다.
>> 그리고 그들은 다양한 분야를 포함 할 수 있습니다.
그리고 우리는 많이 다루지 않았지만 세부 사항, 해당 필드 또는 속성,
즉, 우리는 아마 더 많은 것 적절하게 전화
심지어 개체의 컨텍스트에서 이러한 속성은 다른 객체가 될 수 있습니다.
그리고 그 객체의 내부 다른 객체가 될 수 있습니다.
>> 이 매우 큰 개체가 다른 개체의 많은
의 그것의 내부, 어떤 종류의 큰 나무의이 아이디어를 생성합니다.
이제, 문서 객체 인 자바 스크립트에서 아주 특별한 객체
즉, 전체 웹을 구성합니다 우산의 종류에 따라 페이지
개체.
그리고 문서의 내부 목적은 제시 객체
웹 페이지의 머리와 몸.
>> 그 안에는 다른입니다 개체 등등 등등,
전체 웹 페이지가 될 때까지 이 큰 객체로 구성되었다.
거꾸로, 바로 여기에 무엇입니까?
글쎄, 우리가 작동하는 방법을 알고 자바 스크립트 객체와.
>> 우리가 객체가 있다면 그 것을, 우리의 전체 웹 페이지를 말한다
올바른를 호출하여 의미 방법은 그 객체를 조작하는
또는 특정 수정 속성, 우리
의 요소를 변경할 수 우리의 페이지 프로그래밍
자바 스크립트를 사용하는 대신 필요 HTML, 말과 일을 코드.
그래서 여기의 예 웹 페이지 매우 간단, 맞죠?
그것은 HTML 태그, 머리를 가지고있다.
>> 의 내부 제목, 안녕하세요 세계가있다.
그 때 나는 몸을 가지고있다.
그 안에서, 내가 가진 세 가지 다른 것들.
나는, H2 헤더 태그가 단락 및 링크.
이것은 매우 단순한 웹 페이지이다.
>> 그럼, 수있는 문서 등이 Look 객체?
음, 약간의 아마 처음에는 무서운.
그러나 그것은 정말 큰 나무입니다.
그것의 매우 루트 문서이다.
>> 문서가 다른입니다 내부 내 페이지의 HTML 참조 객체입니다.
그리고 내 페이지의 HTML이 모두입니다.
그리고 HTML의 내부 개체, 나는 머리 개체가,
이는이 모든 것을 의미한다.
>> 그리고 거기의 내부, 나는 제목 개체가 있습니다.
그리고 거기의 내부에, 나는 또 다른이 그건 그냥 인사 세계의 객체.
나는 내 몸을 가질 수 이 같은 표현.
>> 내 몸의 내부, 나는 H2가 개체 및 단락에 대한 P 객체
및 링크에 대한 객체입니다.
그리고이 전체 계층 구조 큰 나무로 표현 될 수있다
작은 작은 많은 물건은 나오는.
지금, 물론, 경우 우리는, 프로그래밍있어
큰 나무 같은 것을 생각하지 않습니다.
우리는 실제보고 싶어 코드와 관련된 것들.
>> 그리고 다행히도, 우리는 할 수 우리의 개발자 도구를 사용하여
실제로 살펴보고 이 웹 사이트의 문서 객체.
그리고 이제 그렇게 할 수 있습니다.
그래서 브라우저 탭을 열었습니다.
>> 그리고 개발자 도구를 열었다.
그리고 자바 스크립트가 내 비디오에, 나는 콘솔이 아니라고 언급
유일한 곳 어디 우리는 정보를 인쇄,
또한 장소 어디 우리는 입력 정보를 수 있습니다.
이런 맥락에서 어떤 나는 말할거야
내가 다시 좀하고 싶습니다 문서 객체,
그래서 그것을 한 번 봐 가지고 시작할 수 있습니다.
그래서 나는 이것을 어떻게 할 수 있는가?
글쎄, 내가 원하는 경우 정말 멋지게 정리,
나는 console.dir, D-I-R을 말하는거야. 지금, 난 그냥 인쇄에 CONSOLE.LOG를 사용
무언가 아주 간단합니다.
그러나 나는이를 구성하려면 계층 적 객체처럼,
나는 그것이 일종의 구조화 할 디렉토리 구조 등을 포함한다.
>> 그래서 문서를 console.dir 싶다.
나는 Enter 키를 누르거야.
그리고 바로 아래에 지금, 나는 여기에서 확대합니다
나는이 응답 문서를 가지고 그 옆에 작은 화살표가.
지금, 나는이 화살표를 열 때, 물건을 많이있을 것입니다.
>> 그러나 우리는 많이 무시하는거야 그것과 초점의 단지 종류의
가장 중요한 부분에, 우리 때문에 이 문서를 탐색 할 수 시작할 수 있습니다.
DOM보다 훨씬 더있다 노드와 자식 노드 바로 부모입니다.
보조 물건을 많이가있다.
>> 그래서 나는이를 열거야.
그리고 전체 많아요 물건의이 나타납니다.
하지만 걱정 모두이다 바로 여기, 자식 노드.
의 그을 열어 보자.
>> 거기의 내부 봐요 익숙한 일, HTML.
우리의 문서의 내부 그래서 한 단계 아래로, HTML.
나는를 엽니 다.
우리는 무엇을 기대?
>> 당신이 우리의 다이어그램에서 기억 경우, 우리는 HTML 내부에 무엇을 찾을 것인가?
트리 아래에 어떤 두 개의 노드인가?
의 알아 보자.
우리는 HTML을 엽니 다.
우리는 자식 노드 아래로 이동합니다.
>> 개폐 팝.
머리와 몸이있다.
그리고 우리는 머리를 열 수 있습니다.
자식 노드로 이동합니다.
음, 제목이있다.
>> 그리고 우리가 갈 수 있고, 이 같은에 영원히.
우리는뿐만 아니라 몸이 작업을 수행 할 수 있습니다.
그러나 우리가 볼 수있는 방법이있다 큰 개체로 구성 문서.
우리가 보면 그리고 큰 많이 보이는 개체
코드처럼, 그것은 우리가 시작할 수 있다는 것을 의미한다 사용이 큰 객체를 조작하는
코드는 무엇을 변경하는 우리의 웹 사이트는 보이는 것 같은 느낌이 든다.
>> 그래서 매우 강력한 도구입니다 우리는 지금 우리의 처분에 있습니다.
우리가 방금 본 그래서, 문서 객체 자체
그것의 내부의 모든 개체 다만, 속성과 메소드를
우리가 한 모든 다른 개체와 같은 자바 스크립트에서 함께 일하고.
그러나 우리는 이러한 속성을 사용할 수 있으며 종류의 드릴 다운 그 방법을 사용
그리고 큰 문서에서하면 얻을 하부 및 더 낮은,
미세하고 미세한 입자 세부 사항, 우리까지
매우 특정 부분에 도착 우리의 우리가 변경하고자하는 웹 페이지를 참조하십시오.
>> 그리고 우리는의 속성을 업데이트 할 때 개체를 문서 또는 그 메소드를 호출,
일이 우리의 웹 페이지에서 일어날 수 있습니다.
그리고 우리는 어떤 상쾌 할 필요가 없습니다 이러한 변경 사항을 적용합니다.
>> 그리고 그에게 정말 멋진 기능입니다 우리가 코드로 작업 할 때이있다.
그래서 이러한 속성 중 일부 무엇인가 문서 객체의 부분이 있습니까?
글쎄, 당신은 아마 보았다 그들 중 몇 정말 빨리
우리가 압축하는 한 같은 거대한 문서를 통해
객체 우리는 단지 웹 브라우저에서 보았다.
>> 그러나 이들 중 몇 내부 HTML 같은 것들이있을 수 있습니다.
그리고 당신도 나를 기억 수도 있습니다 자바 스크립트 비디오에서 이것을 사용하여
맨 마지막에 때 이벤트에 대해 얘기했다.
이 내부 HTML은 무엇입니까?
음, 그냥 무슨 태그 사이에.
>> 그리고 내부 HTML, 예를 들면, 타이틀의
우리가 보관 한 경우 태그에가는 잠시 전에 예를 들어 그
안녕하세요 세계했을 것이다.
즉 우리의 페이지의 제목이었다.
다른 속성 노드 이름을 포함하는
HTML의 이름이고 제목과 같은 요소입니다.
ID입니다 ID, HTML 요소의 속성.
>> 우리가 특별히 표시 할 수 있음을 기억하자 우리의 HTML의 특정 요소
일반적으로 ID 속성과 CSS의 맥락에서 유용,
특히.
에 대한 참조 부모 노드, 그냥 저 위의 DOM의 내용.
그리고 자식 노드, 인 아래로 나를 아래 무엇을 참조.
그리고 우리는 많이 보았다 다만 통해 찾고.
우리가 가진 방법 자식 노드, 즉이다 트리에 더 낮은.
>> 속성 그건 그냥 배열이다 HTML의 요소의 속성.
따라서 특성의 예는 수도 당신은 이미지 태그가있는 경우 수,
보통 소스 속성을 가지고 어쩌면 높이 및 폭 특성.
그리고 그것은 단지 배열 될 것이다 관련된 모든 속성의
그 HTML 요소.
>> 스타일이 다른 하나입니다 CSS를 상징 하는가
특정 요소의 스타일.
그리고 나중에이에 비디오, 우리는 특별히거야
레버리지 스타일은 몇 가지로 만들려면 우리의 웹 사이트에 대한 변경.
그래서 사람들은 몇 가지 특성이 있습니다.
>> 또한 몇 가지가 있습니다 우리가 할 수있는 방법
또한 더 빨리 어쩌면 분리하는 데 사용 문서 객체의 요소.
아마도, 가장 다양한 이러한 것을 getElementById의.
그래서, 때문에 같은 것을 말할 수있다 이 문서에있어서의 기억
, document.getElementById를 객체.
>> 그리고 그 괄호 안에 지정 특정 ID를 가진 HTML 요소
내가 이전했다고 속성 설정하고, 나는 즉시거야
해당 요소에서 오른쪽으로 이동 전체 웹 사이트의.
그래서 어쩌면 드릴 필요가 없습니다 모든 단일 계층을 통해 아래로.
난 그냥 그것을 찾기 위해이 방법을 사용할 수 있습니다, 종류의 열 추구 미사일처럼,
권리?
그냥 가서 발견 정확히이 찾고있는 사람이 있는지.
>> GetElementsByTagName입니다 정신에 매우 유사합니다.
어쩌면이 모두를 찾아 낼 것입니다 굵은 태그 또는 P 태그의 모든
나에게 모든 것을 배열을 제공 나는 그와 함께 일할 수있다.
에 ap​​pendChild 뭔가를 추가 아래 트리에서 한 수준.
>> 그래서 나는 완전히 새로운를 추가 할 수 있습니다 요소 한 수준 낮은.
아니면 내가의 요소를 제거 할 수 있습니다 뿐만 아니라 내가 원하는 경우 한 단계 낮은
내 웹 페이지에서 무언가를 삭제합니다.
이제, 빠른 코딩 노트와 빠른 두통은 희망, 메모를 저장.
>> getElementById-- D는 소문자입니다.
나는 얼마나 많은 시간을 말할 수 없다 사용 getElementById와 대문자
이 D.
정말 흔한 일 때문에.
우리가 단어 ID를 작성하는 경우, 그것은있어 일반적으로 자본 나는 자본 D.
그리고 내 코드는 작동하지 않습니다.
그리고 그 이유를 알아낼 수 없습니다.
이건 정말, 정말, 정말입니다 모두가 만드는 일반적인 버그,
에도 전문가 영원히 이렇게되었다.
그러니, getElementById 인식, 그 D는 소문자입니다.
희망, 그 여러 저장 상심의 적어도 분.
>> 그래서이 모든 것이 우리에게 무엇을 말해 주는가?
우리는 이러한 방법이있다.
우리는 이러한 속성을 가지고있다.
이제, 우리는에서 시작하는 경우 문서, 문서.
무엇이든, 우리는 지금 어떤 얻을 수 있습니다 우리의 웹 페이지의 한 조각
우리는 JavaScript를 사용하도록 다만이 메서드를 호출하여
과 특성을 활용 우리는 다양한 위치에서 찾을 수있다.
>> 이것은,이 말의 얻을 수 있습니다 document.getElementById를,
어쩌면 긴 태그 이름을 가지고, 어쩌면 당신은 나중에 더 많은 통화를 할.
상황이 조금 장황 얻을 수 있습니다.
그리고 프로그래머, 당신은했듯이 아마이 영상의 많은 볼,
우리는 말의 일을 좋아하지 않는다.
>> 우리는 빨리 일을 할 수 있도록하고자.
그래서 우리는 더 싶습니다 간결한 방법은 무엇인가 대답.
그래서에 리드 이런 종류의 뭔가의 개념은 jQuery를했다.
이제 jQuery를 자바 스크립트 없습니다.
그것은 자바 스크립트의 일부가 아니다.
>> 그것은 기록 된 라이브러리입니다 일부 자바 스크립트 프로그래머
약 10 년 전.
그리고 그 목표는이 무엇을 단순화하는 것입니다 라는 클라이언트 측 스크립트, 어떤
우리가 무엇인지 기본적으로 DOM 조작에 대한 이야기​​.
그래서 만약 내가 수정 싶어 내 웹 페이지의 배경색, 어쩌면
특정 사업부.
>> 자, 내가 분명히 받고 있어요 ElementById colorDiv.
그리고 나는 그것의 배경 색상을 설정합니다.
난 그냥 순수 자바 스크립트를 사용하고있는 경우 문서 객체 모델을 사용하여,
맞아, 물건을 많이입니까? 중요 document.getElementById
colorDiv.style.backgroundColor 녹색 =.
>> 아휴.
즉, 말을 많이했다.
너무 입력 할 수있는 많은입니다.
그리고 jQuery를, 우리는 아마 말할 수있다 이 조금 더 간결하게.
그것을있는 떨어져 무역은 어쩌면 조금의 비트 갑자기 더 애매한,
권리?
>> 적어도 긴 조금 더 우리가 무슨 일을하는지에 대한 설명 적.
이 달러 기호, 괄호, 작은 따옴표, 해시, colorDiv, 오른쪽?
그게 무슨 뜻 이죠?
글쎄, 그건 그냥 기본적이다 document.getElementById를 colorDiv.
>> 그러나 속기 이런 종류의 jQuery를 사용하여 그것을하는 방법.
그냥 지금 살펴 보자 다른 몇 가지 방법에
내가 실제로 수 있음 이 문서 개체를 사용하여
모델 내 사이트의 조각을 조작 할 수 있습니다.
특히, 우리는거야 조작 작업을 할
특정의 색 웹 페이지에 사업부, colorDiv.
그럼 그 살펴 보자.
괜찮아.
그래서 페이지입니다.
당신이 다운로드 할 때 그것은 test.html를 불렀다 이것은 당신이 어설프게하려는 경우.
그리고 나는 잔뜩있어 이 페이지의 버튼.
그리고 각각의 기능을 말하는거야 배경 색, 녹색, 보라색 들면
오렌지, 레드, 블루, 하나의 기능 배경 색상, 이벤트 핸들러
배경색 및 jQuery를 사용 대.
나는 무엇을 이야기하고 때 나는이 일을 해요?
그래서 우리는 버튼을 봤어요.
자, 살펴 보자 여기에 소스 코드의 일부.
우리는 test.html를 시작합니다.
배경 그래서 각각의 기능 색상은 내가 여기에 입력 한 것입니다.
나를 조금 스크롤 보자.
>> 그리고 당신은 내가를 알 수 있습니다 이 버튼을 정의한
이 버튼을 클릭하면 대답, 보라색려면 함수를 호출합니다.
이 버튼을 클릭하면, 오히려, 함수가 녹색으로 전화,
빨간색으로, 오렌지를 설정, 파란색 전원을 켭니다.
당신은 아마이 있음을 추측 할 수 최고의 디자인은 아마 아니다
감각, 오른쪽?
>> 내가 할 수 있다면 좋을 것입니다 보다 일반적인 접근 방식을 가지고있다.
음, 우리는 먼저 살펴 보겠습니다 그 5 가지 기능이 무엇인지에
중요 document.getElementById 보라색 ​​colorDiv.style.background =
빨강, 녹색, 오렌지 각각 파란색.
그래서,하지 특히​​ 최고의 디자인.
>> 버튼의 다음 세트 나는 내가 작성한되고있다
라는 하나의 함수 그 분명히 색상을 변경
인수로 문자열을 받아들입니다.
그래서이 조금 더 낫다.
빨간색, 보라색, 녹색, 오렌지,, 푸른 이제 인수입니다.
그래서 더 일반적인를 작성했습니다 경우 자바 스크립트 기능,
이는 다음과 같을 수 있습니다.
내가 전달하고있다.
이 기능은 색상을 변경입니다 컬러라는 인수를 기대.
그리고 설정 말하는거야 색상 배경​​ 색상.
그래서 여기에 내가 여기있어 무엇을 나타냅니다.
그래서 조금 더 낫다.
>> 그러나 나는 할 수 있습니다 보다 더 잘 할.
우리가 살펴 봐야 아래로 이동하는 경우 이벤트 핸들러 상황에서,
이제 모든 호출은 같은 모양.
당신에 대한 기억이 있다면 우리의 이벤트 핸들러에 대한 논의,
나는의에 대한 정보를 얻을 수 있습니다 이 버튼을 클릭하고를 사용했다.
>> 그래서 event.JavaScript에, 나는했습니다 작성된 색상 변경 이벤트, 어떤
클릭 된 버튼을 파악한다.
즉, 트리거 선의 오브젝트.
그리고 여기, 정말 말의 가져옵니다.
하지만 내가 뭘하는 난입니다 배경 설정
triggerObject inner.HTML에 색상.
즉, 텍스트의 버튼 태그 사이.
>> 그리고 나는 분명히해야 소문자를 설정합니다.
그리고 그것이 내가 전체를 변환 할 수있는 방법 문자열을 사용하여 자바 스크립트에서 소문자로
그 방법은 소문자로.
나는 색상을 설정할 때 때문에, 내가 여기서 할 노력하고있어로,
색상은 모두 소문자이어야한다.
>> 하지만 내가 가진 버튼, 우리는 또 다른 모습을 가지고가는 경우에,
텍스트가 있다는 것을 알 보라색에 대한 자본 P로 작성.
그 다음에 아주 여기에 바닥 나는 분명히
시도뿐만 아니라이 사용 jQuery를 수행.
이 경우, 사실이 아니에요 모든 함수를 호출.
난 그냥 클래스를 해요, 상기 한 이 버튼에 사용하는 것은 JQ 버튼입니다.
이게 다예요.
>> 어떻게 jQuery를 내가 뭘하는지 알고 있나요?
그런데, 이것은 장점 중 하나이다 jQuery를의 단점을 슬래시.
그것은 나를 일을하도록 허용 할 수 있습니다 매우 간결하지만, 아마
같은 직관적으로.
아마도 그 다른 세 만들 조금 더 내가 뭘하는지 감지.
여기에,하지만, 무슨 일이야?
>> 분명히, 작성 익명 함수
그로드 할 때마다 내 문서 그래서 document.ready, 준비
일부 기능이 일어날 것입니다.
기본적으로 때 문서가 준비?
내 페이지가로드 할 때이다.
>> 그래서 빨리 내 페이지가로드로, 기능에 따라 항상 준비가되어 있습니다.
그것은 말한다 경우 유형 jQButton의 대상, 또는 클래스 jQButton이 클릭되었을 경우,
이 기능을 실행합니다.
그래서 여기에 익명의 기능이다, 다른 하나의 내부에 정의.
>> 내 전체 문맥 그래서 여기에 지금까지 내 페이지입니다
이로드 할 때이 함수를 호출합니다.
그리고이 기능을 기다리고 있습니다 단추를 클릭합니다.
그리고 버튼을 클릭, JQ 구체적 버튼 클릭,
그것은이 다른 호출 기능을 것입니다
배경을 설정합니다 colorDiv의 색이 될
어떤 텍스트는 태그 사이에 있습니다.
>> 이것은의 개념이다 어떤 버튼은 클릭했다.
그러나 그렇지 않으면,이 일종의입니다 이벤트와 유사한 행동.
그냥 같은 방식의 I jQuery를이를 표현하는 것입니다.
다시 말하지만, 그것은 아마 더 많은 협박.
그것은만큼 분명하지 않다 event.js 같은,
이는 어쩌면 조금 더 자세한하지만 조금 덜
협박.
>> 그러나 우리는 브라우저를 통해 다시 팝업 경우 창, 내가 잘 clicking-- 시작하면,
그 보라색으로 변경되었습니다.
이것은 스트링 방법을 사용하여 녹색이다.
이는 이벤트 핸들러를 이용하여 오렌지색이다.
>> 이것은 바로, jQuery를 사용하여 빨간색?
그들은 모두 정확히 같은 동작합니다.
그들은 단지 그것을 다른 사용 할 문제를 해결하기 위해 접근한다.
에 더 많은있다 jQuery를 다음 우리는 확실히있어
이 비디오에 대해 이야기 할 것입니다.
당신이 더 많은 것을 배우고 싶은 경우에, 당신은 할 수 문서의 jQuery를 정렬로 이동
약 꽤 자세한 내용을 보려면 이 매우 유연 라이브러리, 어떤
클라이언트 쪽 일을 위해 중대하다 이러한 우리가 무엇을하고 있는지와 같은 스크립팅
모양을 조작하는 우리의 웹 페이지의 느낌
문서 객체 모델.
나는 더그 로이드입니다.
이 CS50입니다.