창문
Window 객체는 글로벌 범위 일뿐 만 아니라 브라우저 창을 나타냅니다.
창 객체에는 내면과 내부 속성이있어 브라우저 창의 내부 너비와 높이를 얻을 수 있습니다. 내부 너비와 높이는 메뉴 막대, 도구 모음, 테두리 등과 같은 자리 표시 자 요소를 제거한 후 웹 페이지를 표시하는 데 사용되는 순 폭과 높이를 나타냅니다. 외부 폭과 외부 속성도있어 브라우저 창의 전체 너비와 높이를 얻을 수 있습니다.
다시 채우다:
웹 페이지의 가시적 영역 폭 : document.body.clientwidth 웹 페이지의 가시 영역 높이 : document.body.clientHeight 웹 페이지의 가시 영역 너비 : Document.Body.OffsetWidth (가장자리의 너비 및 스크롤 막대 포함) 웹 페이지의 가시 영역 높이 : Body.offsegeight (web the the the web the the web page). document.body.scrollwidth 웹 페이지의 전체 텍스트 높이 : document.body.scrollheight 롤아웃중인 웹 페이지의 높이 : document.body.scrolltop 또는 jquery (document) .scrolltop () 롤아웃중인 웹 페이지의 왼쪽 측면 : window.scrollleft body page : screentoft winder screenft the screen the screen the screen the screen the screen the screen wee Window.screen.Height 화면 해상도 너비 : Window.screen.width 사용 가능한 작업 공간 높이 : Window.Screen.availHeight 사용 가능한 작업 공간 너비 : Window.Screen.availWidth 화면 색상 숫자 : screen.colordepth 화면 픽셀/인치 비율 : Window.screen.devicexdpi height the the the the the the the the the the the the brower the winder. 브라우저 창의 너비 : $ (창) .width ()
특별 1 : document.body.scrolltop에 대한 솔루션은 항상 0 var scrollpos입니다. if (typeof window.pageyOffset! = 'undefined') {scrollpos = window.pageyOffset; } else if (typeof document.compatmode! = 'undefined'&& document.compatmode! = 'backcompat') {scrollpos = document.documentElement.scrolltop; } else if (typeof document.body! = 'undefined') {scrollpos = document.body.scrolltop; } alert (scrollpos); 특별 2 : 웹 페이지의 전체 텍스트 너비 : "+ document.body.scrollwidth; 웹 페이지의 전체 텍스트 높이 :"+ document.body.scrollheight; 위의 기능은 때때로 얻을 수 없으므로 다음 방법을 사용하십시오. var xscroll, yscroll; if (wind yscroll = window.innerHeight + Window.scrollMaxy; } else if (document.body.scrollHeight> document.body.off.offSetheight) {// 모든 탐색기 Mac xScroll = document.body.scrollwidth; yscroll = document.body.scrollheight; } else {// Explorer Mac ... Explorer 6 Strict, Mozilla 및 Safari xscroll = document.body.offsetwidth에서도 작동합니다. yscroll = document.body.offsetheight; }항해자
네비게이터 객체는 브라우저의 정보를 나타냅니다. 가장 일반적으로 사용되는 속성은 다음과 같습니다.
• navigator.appname : 브라우저 이름;
• Navigator.Appversion : 브라우저 버전;
• Navigator.language : 브라우저에서 설정 한 언어;
• navigator.platform : 운영 체제 유형;
• navigator.useragent : 브라우저에서 설정 한 사용자 에이전트 문자열.
다른 브라우저에 대해 다른 코드를 작성하려면 초보자는 예를 들어 브라우저 버전을 판단하는 데 사용하는 것을 좋아합니다.
var width; if (getieversion (navigator.useragent) <9) {width = document.body.clientWidth;} else {width = window.innerWidth;} 그러나 이것은 판단이 부정확 할 수 있으며 코드를 유지하기가 어렵습니다. 올바른 방법은 존재하지 않는 속성에 대해 undefined 반환의 JavaScript 기능을 최대한 활용하고 단락 연산자를 직접 사용하는 것입니다 || 계산하려면 :
var width = window.innerWidth || document.body.clientWidth;
화면
화면 객체는 화면의 정보를 나타냅니다. 일반적인 속성은 다음과 같습니다.
• screen.width : 픽셀의 화면 너비;
• 화면. 높이 : 화면 높이, 픽셀;
• screen.colordepth : 8, 16, 24와 같은 색상 숫자 수를 반환합니다.
위치
위치 객체는 현재 페이지의 URL 정보를 나타냅니다. 예를 들어, 완전한 URL :
http://www.example.com:8080/path/index.html?a=1&b=2#top
location.href 사용하여 얻을 수 있습니다. URL의 각 부분의 값을 얻으려면 다음과 같이 쓸 수 있습니다.
위치. 보호 콜; // 'http'location.host; // 'www.example.com'location.port; // '8080'Location.PathName; // '/path/index.html'location.search; // '? a = 1 & b = 2'location.hash; // '맨 위'
새 페이지를로드하려면 location.assign ()을 호출 할 수 있습니다. 현재 페이지를 다시로드하려면 location.reload () 메소드를 호출하는 것이 매우 편리합니다.
문서
문서 객체는 현재 페이지를 나타냅니다. HTML은 DOM 형태의 브라우저에서 트리 구조로 표시되므로 문서 개체는 전체 DOM 트리의 루트 노드입니다.
문서의 제목 속성은 html 문서의 <title> xxx </title>에서 읽지 만 동적으로 변경할 수 있습니다.
문서 개체에는 또한 쿠키 속성이있어 현재 페이지의 쿠키를 얻을 수 있습니다.
쿠키는 서버에서 보낸 키 가치 식별자입니다. HTTP 프로토콜은 상태가 없기 때문에 서버는 이에 의해 전송 된 사용자의 요청을 구별 할 수 있으며 쿠키로 구별 할 수 있습니다. 사용자가 성공적으로 로그인하면 서버는 사용자 = ABC123XYZ (암호화 된 문자열)와 같은 쿠키를 브라우저로 보냅니다. 그런 다음 브라우저가 웹 사이트를 방문하면이 쿠키를 요청 헤더에 첨부하고 서버는 쿠키를 기반으로 사용자를 구별 할 수 있습니다.
쿠키는 또한 표시된 페이지의 언어 등과 같은 웹 사이트의 일부 설정을 저장할 수도 있습니다.
JavaScript는 문서를 통해 현재 페이지의 쿠키를 읽을 수 있습니다.
문서 .cookie; // 'v = 123; 기억 = 참으로 기억하십시오. 선호 = zh '
JavaScript는 페이지에서 쿠키를 읽을 수 있고 사용자의 로그인 정보는 일반적으로 쿠키에도 존재하므로 보안 위험이 크게 발생합니다. HTML 페이지에 타사 JavaScript 코드를 도입하는 것이 허용되기 때문입니다.
<!-현재 페이지는 wwwexample.com-> <html> <head> <script src = "http://www.foo.com/jquery.js"> </script> </head> </html>입니다.
도입 된 타사의 JavaScript에 악성 코드가 존재하는 경우 www.foo.com 웹 사이트는 www.example.com 웹 사이트의 사용자 로그인 정보를 직접 얻게됩니다.
이 문제를 해결하기 위해 서버는 쿠키를 설정할 때 httponly를 사용할 수 있습니다. httponly를 설정하는 쿠키는 JavaScript에서 읽지 않습니다. 이 동작은 브라우저에서 구현되며 주류 브라우저는 httponly 옵션을 지원합니다. 보안을 보장하기 위해 서버는 쿠키를 설정할 때 항상 httponly 사용을 고집해야합니다.
document.write ()는 새 콘텐츠를 문서에 출력합니다
문서가로드 된 후 Document.Write가 실행되면 전체 HTML 페이지가 덮어 씁니다.
참조 : http://www.w3school.com.cn/tiy/t.asp?f=js_write_over
Dom | 문서
// id 'test'로 노드를 반환합니다. var test = document.getElementById ( 'test'); // 노드 테스트에서 모든 직접 하위 노드를 가져옵니다. var cs = test.children; var first = test.firstelementchild;
두 번째 방법은 querySelector() 및 querySelectorAll() 사용하는 것입니다. 선택기 구문을 이해 한 다음 조건을 사용하여 노드를 얻습니다. 더 편리합니다.
// QuerySelector를 통해 ID Q1을 사용하여 노드를 가져옵니다. var q1 = docum
엄격하게 말하면, 여기서 DOM 노드는 요소를 말하지만 DOM 노드는 실제로 노드입니다. HTML에는 노드에는 많은 종류의 요소, 댓글, cdata_section 등이 포함되어 있으며 루트 노드 문서 유형이 포함됩니다. 그러나 대부분의 경우 우리는 요소, 즉 실제로 페이지 구조를 제어하고 다른 유형의 노드를 무시하는 노드에만 관심이 있습니다. 루트 노드 문서는 자동으로 글로벌 변수 문서에 바인딩되었습니다.
DOM을 수정하십시오
CSS 수정도 일반적인 작업입니다. DOM 노드의 스타일 속성은 모든 CSS에 해당하며 직접 검색하거나 설정할 수 있습니다. CSS는 Font-Size와 같은 이름을 허용하지만 JavaScript의 유효한 속성 이름은 아니므로 JavaScript의 낙타 스타일 이름으로 다시 작성해야합니다.
// get <p id = "p-id"> ... </p> var p = document.getElementById ( 'p-id'); // set css : p.style.color = '#ff0000'; p.style.fontsize = '20px';
DOM을 삽입하십시오
새 노드를 삽입하는 두 가지 방법이 있습니다. 하나는 AppendChild를 사용하여 부모 노드의 마지막 자식 노드에 자식 노드를 추가하는 것입니다. 예를 들어:
<!-html 구조-> <p id = "js"> javaScript </p> <div id = "list"> <p id = "scheme"> scheme </p> </div>
<div id="list"> 의 마지막 항목에 <p id="js">JavaScript</p> 추가하십시오.
var js = document.getElementById ( 'js'), list = document.getElementById ( 'list'); list.appendChild (js);
이제 HTML 구조는 다음과 같습니다.
<!-html 구조-> <div id = "list"> <p id = "scheme"> scheme </p> <p id = "js"> javaScript </p> </div>
삽입 된 js 노드는 현재 문서 트리에 이미 존재하기 때문에이 노드는 먼저 원래 위치에서 삭제 된 다음 새 위치에 삽입됩니다.
종종 제로에서 새 노드를 생성하고 지정된 위치에 삽입합니다.
haskell = document.createelement ( 'p');
노드를 동적으로 생성 한 다음 DOM 트리에 추가하면 많은 기능이 달성 될 수 있습니다. 예를 들어, 다음 코드는 <style> 노드를 동적으로 생성하고 <head> 노드의 끝에 추가하여 문서에 새 CSS 정의를 동적으로 추가합니다.
var d = document.creeLement ( 'style'); d.setattribute ( 'type', 'text/css'); d.innerhtml = 'p {color : red}'; document.getElementsByTagName ( 'head') [0] .AppendChild (d);삽입
지정된 위치에 하위 노드를 삽입하려면 어떻게해야합니까? ParentElement.insertbefore (Newlement, ReferenceElement)를 사용할 수 있습니다. 하위 노드는 기준선 전에 삽입됩니다.
여러 번, 부모 노드의 모든 어린이를 고려해야합니다. 이는 어린이 속성을 반복하여 구현할 수 있습니다.
var i, c, list = document.getElementById ( 'list'); for (i = 0; i <list.children.length; i ++) {c = list.children [i]; // I-th Child 노드 받기}DOM 삭제
노드를 삭제하려면 먼저 노드 자체와 부모 노드를 얻은 다음 부모 노드의 removechild를 호출하여 자체를 삭제해야합니다.
// 노드를 삭제할 노드를 가져옵니다 : var self = document.getElementById ( 'to-be-removed'); // 부모 노드 가져옵니다 : var parent = self.parentElement; // 삭제 : var removed = parent.removechild (self); 제거 === 자아; // 진실
삭제 된 노드가 더 이상 문서 트리에 없지만 실제로는 여전히 메모리에 있으며 언제든지 다른 위치에 추가 할 수 있음을 알았습니다.
부모 노드의 자식을 가로 지르고 삭제 작업을 수행 할 때, Children 속성은 읽기 전용 속성이며 자식 노드가 변경 될 때 실시간으로 업데이트됩니다. 따라서 여러 노드를 삭제할 때 어린이 속성이 항상 변경되고 있음을 주목하는 것이 중요합니다.
작동 양식
양식 자체가 DOM 트리이기 때문에 JavaScript를 사용하여 양식을 조작하는 것은 작동 DOM과 유사합니다.
그러나 양식의 입력 상자, 드롭 다운 상자 등은 사용자 입력을받을 수 있으므로 JavaScript를 사용하여 양식을 작동하면 사용자가 입력 한 컨텐츠를 얻거나 입력 상자에 새 컨텐츠를 설정할 수 있습니다.
주로 HTML 양식에 대한 다음 입력 컨트롤이 있습니다.
• 해당 <input type = "text"> 인 텍스트 상자는 텍스트를 입력하는 데 사용됩니다.
• 해당 <입력 유형 = "Password"> 인 비밀번호 상자는 비밀번호를 입력하는 데 사용됩니다.
• 해당 <입력 유형 = "Radio"> 인 라디오 박스는 항목을 선택하는 데 사용됩니다.
• 확인란, 해당 <입력 유형 = "Checkbox">는 여러 항목을 선택하는 데 사용됩니다.
• 해당 <select> 인 드롭 다운 상자는 항목을 선택하는 데 사용됩니다.
• 숨겨진 텍스트, 해당 <입력 유형 = "hidden">은 사용자에게 보이지 않지만 양식이 제출되면 숨겨진 텍스트가 서버로 전송됩니다.
가치를 얻으십시오
<input> 노드에 대한 참조를 얻으면 해당 사용자 입력 값을 얻기 위해 값을 직접 호출 할 수 있습니다.
// <입력 유형 = "text"id = "email"> var input = document.getElementById ( 'email'); input.value; // '사용자가 입력 한 값'
이 방법은 text , password , hidden 및 select 에 적용 할 수 있습니다. 그러나 라디오 및 확인란의 경우 value 속성은 항상 HTML 사전 설정 값을 반환하며 실제로 사용자가 " checked 된"옵션이 있는지 여부는 다음과 같이 판단해야합니다.
// <label> <input type = "radio"name = "Weekday"id = "monday"value = "1"> 월요일 </label> // <label> <입력 유형 = "radio"name "="weekday "id ="value = "2"> 화요일 </label> var mon = document.getElementByid ( 'monday'); var tue = document.getelementByid; // '1'tue.value; // '2'mon.Checked; // true 또는 false
값을 설정하십시오
값을 설정하는 것은 값을 얻는 것과 비슷합니다. 텍스트, 비밀번호, 숨겨진 및 선택의 경우 값을 직접 설정할 수 있습니다.
// <입력 유형 = "text"id = "email"> var input = document.getElementById ( 'email'); input.value = '[email protected]'; // 텍스트 상자의 내용이 업데이트되었습니다.
라디오 및 확인란의 경우 확인을 true 또는 false로 설정하십시오.
HTML5 제어
HTML5는 많은 수의 표준 컨트롤을 추가했으며 일반적으로 사용되는 것은 날짜, DateTime, DateTime-Local, Color 등을 포함합니다. 모두 <input> 태그를 사용합니다.
<입력 유형 = "날짜"값 = "2015-07-01">
<입력 유형 = "dateTime-local"value = "2015-07-01T02 : 03 : 04">
<입력 유형 = "color"value = "#ff0000">
HTML5를 지원하지 않는 브라우저는 새로운 컨트롤을 인식 할 수 없으며이를 유형 = "텍스트"로 표시합니다. HTML5를 지원하는 브라우저는 포맷 된 문자열을 얻습니다. 예를 들어, 유형 = "날짜"입력 값은 YYYY-MM-DD 형식의 유효한 날짜 또는 빈 문자열로 보장됩니다.
양식을 제출하십시오
마지막으로 JavaScript는 양식 제출을 두 가지 방법으로 처리 할 수 있습니다 (AJAX 메소드는 다음 장에서 도입 됨).
첫 번째 방법은 <form> 요소의 제출 () 메소드를 통해 양식을 제출하는 것입니다. 예를 들어, <버튼> 이벤트를 클릭하면 JavaScript 코드로 양식을 제출하십시오.
<form id = "test-form"> <input type = "text"name = "test"> <button type = "button"onclick = "doSubmitform ()"> 제출 </button> </form> <cript> function dosubmitform () {var form = document.getElementById ( 'Tred-form'); // 여기에서 양식 입력을 수정할 수 있습니다 ... // 양식 제출 : form.submit ();} </script> 이 방법의 단점은 브라우저의 정상 제출을 방해한다는 것입니다. 브라우저는 기본적으로 <button type="submit"> 클릭 할 때 양식을 제출하거나 사용자가 마지막 입력 상자에서 Enter 키를 누릅니다. 따라서 두 번째 방법은 <form> 자체의 onsubmit 이벤트에 응답하고 양식을 제출할 때 변경하는 것입니다.
<form id = "test-form"onsubmit = "return checkmit ()"> <input type = "text"name = "test"> <버튼 유형 = "제출"> 제출 </button> </form> <cript> function checkform () {var form = document.getElementById ( 'treed-form'); // 여기에서 양식 입력을 수정할 수 있습니다 ... // 다음 단계를 계속하십시오 : True;} </script> return true 는 브라우저에 계속 제출하도록 지시해야합니다. return false 브라우저가 양식을 계속 제출하지 않습니다. 이 상황은 일반적으로 사용자의 입력 오류에 해당하며 사용자에게 오류 메시지가 표시되고 양식이 종료됩니다.
<input> 확인하고 수정할 때 <input type="hidden"> 을 최대한 활용하여 데이터를 전달하십시오.
예를 들어, 많은 로그인 양식은 사용자가 사용자 이름과 암호를 입력하기를 원하지만 보안상의 이유로 양식을 제출할 때는 일반 텍스트 암호를 전송하지 않고 비밀번호의 MD5를 전송합니다. 일반 JavaScript 개발자는 <input> 직접 수정합니다.
<form id = "login-form"method = "post"onsubmit = "return checkm ()"> <input type = "text"id = "username"name = "username"> <input type "id ="password "name ="password "> <button type ="제출 "> var pwd = var elecce (pwerd); // 사용자가 입력 한 일반 텍스트를 md5로 변경합니다 : pwd.value = tomd5 (pwd.value); // 다음 단계로 계속하십시오 : true;} </script>
이 방법은 괜찮은 것 같지만 사용자가 제출할 암호를 입력하면 비밀번호 상자가 갑자기 여러 * 에서 32 * 로 표시됩니다 (MD5에는 32자가 있으므로).
사용자의 입력을 변경하지 않으려면 <input type="hidden"> 사용하여 구현할 수 있습니다.
<form id = "login-form"method = "post"onsubmit = "return checkm ()"> <input type = "text"id = "username"name = "username"> <input type = "indup-password"> <input type = "hidden"id = "md5-password"password "> <button> <bultip type ="sumb "> checkform () {var input_pwd = document.getElementById ( 'input-password'); var md5_pwd = document.getElementById ( 'md5-password'); // 사용자가 입력 한 일반 텍스트를 md5로 변경합니다 : md5_pwd.value = tomd5 (input_pwd.value); // 다음 단계로 계속하십시오 : true;} </script>MD5-PASSWORD의 ID가있는 <input>는 marked name = "password"이며, 사용자가 입력 한 ID는 이름 속성이없는 입력 -PASSWORD입니다. 이름 속성이없는 데이터 <입력>은 제출되지 않습니다.
작동 파일
HTML 양식에서 파일을 업로드 할 수있는 유일한 컨트롤은 <input type = "file">입니다.
참고 : 양식에 <input type = "file">가 포함 된 경우 양식의 ENCTYPE는 멀티 파트/양식 데이터로 지정되어야하며, 브라우저가 멀티 파트/양식 데이터 형식으로 양식 데이터를 올바르게 인코딩하고 보낼 수 있도록 메소드를 게시물로 지정해야합니다.
보안상의 이유로 브라우저를 사용하면 사용자가 <input type = "file">을 클릭하여 로컬 파일을 선택할 수 있습니다. javaScript를 사용하여 <input type = "file">에 값을 할당하면 효과가 없습니다. 사용자가 파일을 업로드하기로 선택하면 JavaScript는 파일의 실제 경로를 얻을 수 없습니다.
업로드 할 파일 :
일반적으로 업로드 된 파일은 백엔드 서버에서 처리됩니다. JavaScript는 사용자가 유효하지 않은 형식으로 파일을 업로드하지 못하도록 양식을 제출할 때 파일 확장을 확인할 수 있습니다.
var f = document.getElementById ( 'test-file-upload'); var filename = f.Value; // 'c : /fakepath/test.png'if (! filename ||! 거짓 반환;}
파일 API
JavaScript는 사용자가 업로드 한 파일, 특히 파일 컨텐츠를 읽을 수없는 파일에 대해 매우 제한되어 있으므로 Flash와 같은 타사 플러그인을 사용하여 작동 파일이 필요한 많은 웹 페이지를 구현해야합니다.
html5의 인기로 새로 추가 된 파일 API를 사용하면 JavaScript가 파일 컨텐츠를 읽고 더 많은 파일 정보를 얻을 수 있습니다.
HTML5의 파일 API는 파일 정보를 얻고 파일을 읽을 수있는 파일과 Filereader의 두 가지 주요 개체를 제공합니다.
다음 예제는 사용자가 선택한 이미지 파일을 읽고 <div>에서 이미지를 미리보기 방법을 보여줍니다.
이미지 미리보기 :
var fileInput = document.getElementById ( 'test-image-file'), info = document.getElementById ( 'test-file-info'), preview = document.getElementById ( 'test-image-preview'); // 이벤트를 듣습니다 : fileInput.addeventListener ( 'change', function () {// 배경 이미지 : preview.style.backgroundimage = ''; // 파일이 선택되었는지 확인하십시오 : if (! fileInput.value) {info.innerhtml = '파일 선택 없음'; return : var file = // // info.innerhtml = 'file :' + file.name + '<br>' + 'size :' + file.size + '<br>' + 'modified :' + file.lastModifiedDate; 이미지! '; dataurl의 형태 : reader.readasdataurl (file);});위의 코드는 HTML5의 파일 API를 통해 파일 내용을 읽는 방법을 보여줍니다. DataUrl 형식으로 읽은 파일은 데이터와 유사한 문자열입니다. image/jpeg; base64,/9j/4aaqsk ... (Base64 인코딩). 그것은 종종 이미지를 설정하는 데 사용됩니다. 서버 측 처리가 필요한 경우 문자열 base64의 문자를 서버로 보내고 Base64로 해독하여 원본 파일의 이진 내용을 가져옵니다.
콜백
위의 코드는 또한 단일 스레드 실행 모드 인 JavaScript의 중요한 기능을 보여줍니다. JavaScript에서, 브라우저의 JavaScript 실행 엔진은 JavaScript 코드를 실행할 때 항상 단일 스레드 모드로 실행됩니다. 즉, 언제든지 JavaScript 코드가 동시에 1 스레드 이상을 실행하는 것은 불가능합니다.
단일 스레드 모드에서 멀티 태스킹을 처리하는 방법을 물어볼 수 있습니까?
JavaScript에서는 멀티 태스킹이 실제로 위의 코드와 같이 비동기식으로 호출됩니다.
reader.readasdataurl (파일);
파일 내용을 읽기 위해 비동기 작업이 시작됩니다. 비동기 조작이기 때문에 작업이 JavaScript 코드로 언제 끝나는 지 알 수 없으므로 먼저 콜백 기능을 설정해야합니다.
reader.onload = function (e) {// 파일을 읽을 때이 함수는 자동으로 호출됩니다.};파일 읽기가 완료되면 JavaScript 엔진은 자동으로 설정 한 콜백 기능을 호출합니다. 콜백 함수가 실행되면 파일을 읽으므로 콜백 함수 내에서 파일 내용을 안전하게 얻을 수 있습니다.
위의 기사는 JavaScript 브라우저 개체에 대해 간단히 이야기합니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.