완전한 JavaScript 구현은 ECMAScript (Core), BOM (Browser Object Model) 및 DOM (문서 개체 모델)의 세 부분으로 구성되어야한다는 것을 알고 있습니다.
오늘 저는 주로 Bom과 Dom을 배웁니다.
BOM :
BOM은 웹 페이지 컨텐츠와 관련이없는 브라우저의 기능에 액세스하기위한 많은 객체를 제공합니다 (이것은 DOM 비즈니스입니다). 현재, BOM은 W3C에 의해 HTML5 사양으로 옮겨졌다.
창 개체 :
BOM의 핵심은 브라우저의 인스턴스를 나타냅니다. JavaScript를 통해 브라우저 창에 액세스하는 인터페이스와 ecmascript에서 지정된 글로벌 개체입니다. 즉, 웹 페이지에 정의 된 모든 객체, 가변 및 기능은 Window가 글로벌 객체로 Window가 있으므로 Paresinint ()와 같은 방법에 액세스 할 수있는 권한이 있습니다. (고도 III에서 발췌). 또한 웹 페이지에 프레임이 포함 된 경우 각 프레임에는 고유 한 윈도우 객체가 있으며 프레임 컬렉션 (Index 0 Starts, LTR, TTB)에 저장됩니다.
우선, 글로벌 실행 환경의 변수와 함수는 모두 창 객체의 속과 방법입니다. 물론 글로벌 변수와 직접 정의 된 창 속성 사이에는 약간의 차이가 있습니다. 글로벌 변수 (정확하게는 글로벌 변수가 명시 적으로 선언되어야 함) 삭제를 사용할 수 없지만 창 속성은 정상입니다. 또한, 선언되지 않은 변수에 액세스하려고 시도하면 오류가 발생하지만 쿼리 창 개체를 사용하는 데 아무런 문제가 없습니다.
그렇다면 창의 공통 속성이나 방법은 무엇입니까?
1. 이름, 각 창 객체에는 프레임 이름이 포함 된 이름 속성이 있습니다. 일반적으로 창 관계와 프레임 워크를 이해합니다.
2. 창 위치 방법 : Moveto (x 새로운 위치의 x 좌표, 새 위치의 y 좌표), MoveBy (수평 이동 x, 수직 운동 y). 이 두 가지 방법은 프레임 워크에는 적용되지 않습니다.
3. 창 크기 속성 : 내면/높이 (시야의 크기 (테두리 너비 제외)/ *즉, 사파리, 파이어 폭스 */), 외부 위/높이 (브라우저 창의 크기를 반환합니다/ *IE, Safari, Firefox */). 크롬에서 내부 및 외부는 모두보기 영역의 크기를 반환합니다.
물론, resizeto (새 창 너비, 새 창 높이), 크기 조정 (원래 너비까지 원래 높이에 비해 Y를 증가)으로 윈도우 크기를 변경할 수 있습니다. 이 러브 송 방법은 프레임 워크 구조에는 적용되지 않습니다.
4.window.open (URL, 창 대상, 기능 문자열, 새 페이지가 브라우저 기록에서 현재로드 된 페이지의 부울을 대체하는지 여부)는 특정 URL로 이동하거나 새 창을 열는 데 사용됩니다. 창 대상이 지정되고 창 대상이 기존 창 또는 프레임의 이름 인 경우 지정된 URL이 이름이 바뀌는 창이나 프레임에로드됩니다. 그렇지 않으면 열리는 새 창의 이름이 대상 창으로 명명됩니다. 물론 Window Target이 지정할 수있는 키워드는 _self, _parent, _top, _blank입니다.
<a href = // www.vevb.com> me를 클릭하십시오 </a> <cript> var link = document.getElementsByTagName ( "a") [0]; 알림 (link.nodename); window.onload = function () {link.onclick = function () {window.open (link.href, "good", "width = 400px, height = 300px"); 거짓을 반환합니다. }} </스크립트기능 문자열의 특정 설정은 여기에 자세히 설명되어 있지 않습니다. 관심이 있으시면 여기를 클릭하십시오
5. 단일 스레드 언어로서 JS는 여전히 특정 순간에 코드 실행을 예약 할 수 있도록 시간 초과 값 (지정된 이벤트 후 코드 실행) 및 간격 시간 값 (지정된 시간에 한 번 루프)을 설정할 수 있습니다.
시간 초과 호출 : settimeout (JS 코드 문자열, 밀리 초 시간). 단일 스레드 언어로서 JS 작업 대기열은 한 번에 하나의 코드 만 실행할 수 있습니다. 설정 시간 간격 후 작업 대기열이 비어 있으면 코드 문자열이 실행됩니다. 그렇지 않으면 실행하기 전에 이전 코드가 실행될 때까지 기다려야합니다.
var al = settimeout (function () {alert ( "good");}, 5000); 경고 (al); // 2여기서 나는 5 초 후에 익명의 기능을 불러서 출력했다. 2를 표시하기 위해 창에 경고 상자가 나타났습니다. settimeout () 함수가 숫자 ID를 반환한다는 것을 알 수 있습니다. 그런 다음이 ID를 통해 타임 아웃 호출을 지우고 Cleartimeout (ID)를 사용하여 지우실 수 있습니다.
간접 호출 : setInterVal (), 허용하는 매개 변수는 settimeout ()와 동일하며 숫자 ID를 반환하고 clareTimeout ()로 지우 셨습니다.
6. 시스템 대화 상자 방법 : Alert (), 확인 (), Prompt () 등이 이전 블로그에 작성되어 여기를 클릭하십시오.
위치 개체
BOM의 물체가 아니라 위치는 창 객체의 속성입니다. 물론, 그것은 또한 나중에 논의 될 DOM의 문서 개체의 속성이기도합니다. 즉, Window.Location 및 Document.Location은 동일한 개체를 참조하십시오.
위치 개체 속성 목록, 이러한 속성을 수정하면 새 페이지를로드하고 기록에서 새 레코드를 생성 할 수 있습니다. location.replace ()를 사용하면 더 이상 과거 기록에서 새로운 레코드가 생성되지 않습니다.
| 해시시 | "#내용물" | ""가 아닌 URL에서 해시를 반환합니다. |
| 주인 | "www.google.com" | 서버 이름과 포트 번호를 반환합니다 (있는 경우) |
| 호스트 이름 | "www.google.com" | 포트 번호가없는 서버 이름을 반환합니다 |
| href | "www.google.com" | 현재 페이지의 전체 URL을 반환하고 호출 할당 () |
| PathName | ''/wileycda/' | 디렉토리 이름으로 돌아갑니다 |
| 포트 | "8080" | 포트 번호를 반환합니다. 그렇지 않은 경우 빈 문자열을 반환합니다. |
| 규약 | "http :" | 페이지에서 사용하는 프로토콜로 돌아갑니다 |
| 찾다 | "? = JavaScript" | 물음표로 시작하여 쿼리 문자열을 반환합니다 |
Navigator Object : 브라우저를 식별하는 데 사용되는 사실상 표준 및 특성 및 방법은 주로 브라우저 유형을 감지하는 데 사용됩니다.
나머지는 히스토리 개체 (역사적 기록 저장) 및 화면 객체 (클라이언트 기능 표시)와 같습니다. JS의 프로그래밍은 그다지 효과적이지 않기 때문에 반복하지 않을 것입니다.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
돔 :
DOM은 XML을 기반으로 HTML에 대해 확장되는 API이며, DOM은 노드 트리에 의존하여 확장됩니다.
우선, 문서 노드는 각 노드의 루트 노드임을 분명히해야합니다. 문서 노드에는 하나의 하위 노드, 즉 HTML (문서 요소) 만 가지고 있습니다.
노드 유형 :
DOM1의 인터페이스는 모든 노드 유형 (텍스트 노드, 속성 노드, 요소 노드)에 의해 구현 되며이 인터페이스는 JS의 노드 유형으로 구현됩니다.
각 노드가 소유 한 Nodetype 속성. 12 숫자 값, 요소-1, 속성-2, 텍스트-3으로 표시됩니다.
Nodename 속성, 요소 노드 노드의 경우 Nodename의 값은 레이블 이름입니다.
nodevalue 속성, 요소 노드 노드의 경우 nodevalue 값은 null입니다.
노드 관계 : 각 노드에는 Childnodes 속성이 있으며, 이는 Nodelist (클래스 어레이 객체) 객체를 저장합니다. 각 노드에는 부모 노드를 가리키는 부모 노드 속성이 있습니다. Childnodes의 노드는 동일한 ParentNode를 가지고 있습니다. 이전의시 블링 및 넥타이 특성을 사용하여 형제 노드에 액세스하십시오. 동시에, Childnodes [0] == Firstchild, Childnodes [childnodes.length-1] == lastchild.
작동 노드 : AppendChild (), 노드를 Nodelist의 끝까지 밀고 새로 추가 된 노드를 반환하십시오. insertbefore (), 노드를 Nodelist 헤더로 반환하고 새 노드를 반환합니다. ReplaceChild (Newchild, Targetchild)는 대상 노드를 대체합니다. 원래 노드는 여전히 문서에 있지만 위치는 없습니다. RemoveChild (Tragetchild)는 노드를 제거하며 효과는 ReplaceChild ()와 유사합니다. CloneChild (부울)는 사실 일 때 완전한 복제 (전체 노드 및 하위 노드)를 의미하며, 거짓은 기본 복제를 의미합니다.
문서 유형 :
문서를 나타내고 문서 개체는 전체 HTML 페이지를 나타내는 HTMLDDDocument (문서 유형에서 상속) 인스턴스입니다. 동시에, Douent 객체는 또한 창 객체의 속성이므로 글로벌 객체로 액세스 할 수 있습니다. document.firstchild == html. document.body == body. document.doctype ---> 참조 <! doctype>. Doucment.title ---> Title Document.url ---> location.url.
찾기 요소 : getElementById (), getElementsByTagName (), getElementsByClassName ().
문서 작성 : write (), writeEln (), Open (), Close ()
요소 유형 :
getAttribute (), 클래스의 기능을 가져오고 클래스 이름 대신 "클래스"를 사용하고 ementcle.className을 사용할 때 클래스 속성을 얻을 수 있습니다.
setattribute (), 기능이 존재하면 기능을 설정합니다. 그렇지 않으면 만들어집니다.
RemoveAttribute ()는 요소 특성을 완전히 제거합니다.
CreateElement (), 새 요소를 만듭니다.
텍스트 유형 :
createTextNode ()는 텍스트 노드를 만듭니다. 텍스트 노드가 인접 동포 노드에 연결되면 두 텍스트가 공간없이 연결됩니다.
The above article's composition of JavaScript------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------