10,000 단어 그래픽 JavaScript 노트 요약

변수

• 변수는 정의만 하고 초기값은 할당하지 않습니다. 기본값은 undefine입니다.
• 변수를 정의할 때 반드시 var로 작성해야 합니다. (var로 정의하지 말고 직접 값을 할당하면 오류가 발생하지 않습니다.) , 그러나 범위 문제가 발생함)

변수 선언 개선

• 모든
• 코드를 실행하기 전에 js는 사전 구문 분석 단계를 거쳐 모든 변수의 정의를 미리 읽습니다.
• 참고: 변수 선언 승격은 정의만 승격하지만 값은 승격하지 않습니다.

console.log (a); // 먼저 변수 var a = 12를 사용합니다. // 그런 다음

데이터

• 유형은

  • 숫자
    • 입니다

    .

    • 크거나 작거나 정수이거나 부동 소수점이거나 양수이거나 음수이거나 모두
    • 숫자형의 숫자입니다. (절대값은 더 작습니다.) 3e8 3^8 입니다
    • . 이진수 값은 0b 로 시작하고, 8진수는 0 으로 시작하고, 16진수는 0x 로 시작합니다.
    • 숫자 NaN 아닌, 즉 "숫자가 아님"이지만 숫자 유형의 값입니다(수학 연산에서 결과가 숫자일 수 없으며 결과는 종종 NaN, NaN == NaN, 결과는 false입니다.
    • 무한대 무한 또는 극소

  • 문자열

    • 문자열 일반 방법 방법

    함수	charAt
    ()는	지정된 위치를 가져옵니다. 문자(경계를 벗어남)는 빈 문자열입니다.
    하위

    문자열

    ()	하위 문자열 추출 substr
    ()	문자열 추출
    Slice()	하위 문자열 추출
    toUpperCase()	문자열을 대문자로 변경
    toLowerCase()	문자열을 소문자로 변경
    indexOf()	문자열 검색(패턴 일치)

    • substring(a, b)
    a에서 시작하고 b에서 끝나는 부분 문자열. 두 번째 매개 변수가 생략되면 반환된 부분 문자열은
    • 문자열
    • 의 끝 부분으로 이동합니다. a > b인 경우 자동으로 십진수로 조정됩니다.
    • , b), 길이 b의 하위 문자열은 a에서 시작합니다. 두 번째 매개변수가 생략되면 반환된 하위 문자열은 문자열의 끝으로 이동합니다. a는 음수일 수 있으며, 이는
    • 슬라이스(a, b) A를
    나타냅니다.
    • a에서 시작하고 b에서 끝나는 부분 문자열. 두 매개변수 모두 음수일 수 있습니다. a는 b보다 작아야 합니다. 그렇지 않으면 결과가 없습니다(빈

  • 문자열

  • )

    • . 고유한 값은 하나만 있습니다:

  • Null

    • 객체를 파괴하거나 배열을 파괴하거나 이벤트 리스너를 삭제해야 하는 경우 일반적으로 이를 null로 설정합니다.

• 복잡한 데이터 유형:

  • 객체
  • 배열
  • 함수
  • RegExp
  • Date
  • Map
  • Set
  • ...

Typeof 연산자는

다음과 같습니다

값 또는 변수를 감지하는 데 사용됩니다.

// numbertypeof 'niubi'; // 문자열

데이터 유형 변환에서는

**Number ()**Function을 사용합니다.

// String --> Number Number('123'); // 123Number('123.4'); // 123.4Number('123 year'); ('2e3'); // 2000Number(''); // NaN// 불리언 값 --> Number(true) // 0 // 정의되지 않음 및 null - -> Number Number(undefine); // NaNNumber(null); // 0

**parseInt()** 함수는 문자열을 정수로 변환

하고 숫자가 아닌 첫 번째 문자 뒤의 모든 문자를 자동으로 자릅니다. charparseInt

('3.14'); // 3parseInt('3.14는 pi'); // 3parseInt('Pi는 3.14'); // NaNparseInt('3.99')

; 문자열을 부동 소수점 숫자로 변환합니다. 숫자가

아닌 첫 번째 문자와 소수점이 아닌 소수점 뒤의 모든 문자를 자동으로 자릅니다.

parseFloat('3.14') // 3.14parseFloat('3.14 is pi'); // 3.14parseFloat('Pi

와

문자열

로 변환하며 결과는 NaN입니다.

끈. 과학적 표기법과 소수가 아닌 숫자는 10진수 값으로 변환됩니다.

String(123); // '123'String(123.4) // '123.4'String(2e3); // '2000'String(NaN ); // 'NaN'String(Infinity); // 'Infinity'String(0xf); // '15'String(true) // 'true'String(false); // 'undefine'String(null); // 'null'

**Boolean()** 함수

// 숫자 --> 부울 값 ​​0과 NaN은 false로 변환되고 나머지는 trueBoolean(123)으로 변환됩니다. ; // trueBoolean(0); // falseBoolean(Infinity); // trueBoolean(-Infinity); // true// 부울 값 -> false로 변환 값은 true로 변환됩니다. Boolean('abc'); // trueBoolean('false'); // true// 정의되지 않음 --> 부울 값은 falseBoolean( undefine); // falseBoolean(null) ; // false

**prompt()** 함수가 입력 상자를 표시합니다.

var num = 프롬프트('첫 번째 숫자를 입력하세요') // 반환 값은 문자열

표현식입니다. 연산자

적 유형 변환

(수학 연산에 포함됨) 피연산자가 숫자 유형이 아닌 경우 JavaScript는 자동으로 피연산자를 숫자 유형으로 변환합니다.

암시적 변환의 핵심은 내부적으로 Number() 함수를 호출하는 것입니다.

3 * '4' // 12true + true // 2false + 2 // 23 * '2 days' // NaN

toFixed(a) 메서드는 소수점 이하 자릿수를 유지합니다

. Math.pow(2, 3) // 2^3Math.sqrt(81) // 9Math. ceil() // 반올림 Math.floor () // 반올림

관계 연산자

=== // 모두 같음!== // 모두 같지 않음 // 두 개의 등호 == 연산자는 값의 유형을 비교하지 않습니다. 암시적 변환 후 값을 비교합니다. 1 == true // true1===true // false0 == false // true0 === false // false0 == 정의되지 않음 // false0 === undef // falseundefine == null // trueundefine == = null // false

**isNaN()** 함수는 변수 값이 NaN인지 여부를 확인

하지만 isNaN()은 사용하기 쉽지 않습니다. Number()에 전달된 변수의 실행 결과가 NaN이면 isNaN( ) 함수는 true

단락 평가를

. a && ba는 true이고 값은 a입니다. a는 false이고 값은 a

||ba입니다. true, 값은 a, a는 false, 값은 b

논리 연산 우선 순위 : non--> and- -> 또는

종합 연산 연산 순서 : non--> 수학적 연산 --> 관계 연산 --> 논리 연산

흐름 제어문

난수 함수 Math.random()

[a, b] 간격의 정수를 얻습니다. 공식은 다음과 같습니다.parseInt(Math .random() * (b - a + 1))

array

var arr = [' A', 'B', 'C', 'D']; var arr = new Array('A', 'B', 'C', 'D');var arr = new Array(4); 길이가 4인 경우 각 항목은 정의되지 않습니다.

첨자가 ​​범위를 벗어나 액세스되면 정의되지 않음이 반환됩니다.

var arr = [2, 6, 7, 3 ];arr[6] = 4;console.log(arr); 이번에는 아래 첨자가 범위를 벗어났고 오류가 보고되지 않지만 배열이 확장됩니다. 아래 첨자 6은 4이고 중간은 비어 있습니다.

Array.isArray() 메서드를 사용하여 배열

함수

함수 정의를

. // 일반 함수 fun() {
    //함수 본문문}//익명함수 var fun = function () {
    // 함수 본문문}

함수 선언의 승격

fun(); function fun() { // 파싱 전 단계에서 승격됩니다. Alert("함수 실행");}// 함수로 함수가 정의된 경우 표현식, 프로모션 기능이 없습니다. fun(); // 오류가 발생합니다. var fun = function () {
    Alert("함수 실행됨");}

함수 우선순위 승격

// 함수 우선순위 승격 // 함수 표현식 승격 후 승격, 승격된 함수를 재정의할 수 없음 fun() // 팝업 Bvar fun = function () {
    경고('A');}함수 fun() {
    Alert('B');}fun(); // 팝업 A.

실제 매개변수 개수가 형식

1. 매개변수 개수보다 많습니다
2. . 매개변수의 형식 매개변수 값은 undefined

인수 배열 객체

1. 함수 내의 인수는 배열과 유사한
2. 객체
입니다.
3. 0부터 시작하는 자연수 시퀀스이며 길이 속성과 배열이 있습니다. 마찬가지로 대괄호를 사용하여 객체의 특정 속성 값에 액세스할 수 있지만

var 선언

선언

된 변수는 전역 변수, var 없이 선언된 변수는 함수

내 전역 변수, var로 선언된 변수는 지역 변수, var 없이 선언된 변수는 전역 변수입니다

. , 둘 다 window 객체의 속성 중 하나입니다. var로 선언된 변수는 삭제할 수 없고, var 없이 선언한 변수는 삭제할 수 있습니다!

반환 값

함수 sum(a, b) {
    

b

;}var result = sum(3, 5); //

함수가 값을 반환하지 않으면 결과는 정의되지 않습니다.

) 이 함수의 메소드

는

각각 배열의 앞 항목과 뒤 항목을 나타냅니다. 교체가 필요한 경우 양수가 반환되고, 그렇지 않으면 음수가 반환됩니다.

55]; arr.sort(함수 (a, b) {
    만약 (a > b) {
        1을 반환합니다.
    }
    return -1;})

;

배열 deep clone

var arr1

= [1, 2, 3, [4, 5]]; function deepClone( arr) {
    var 결과 = [];
    for (var i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
            result.push(deepClone(arr[i]));
        } 또 다른 {
            result.push(arr[i]);
        }
    }
    return result;}

함수 내부에 정의

된

로컬 함수

fun() 함수 내부에서만 호출할 수 있습니다.
    함수 내부() {
        console.log('안녕하세요');
    }
    inner(); // 내부 함수 호출} fun();

범위 체인

함수 중첩에서 변수는 내부에서 외부로 계층별로 정의를 찾습니다.

var a = 10; () {
    var c = 30;
    함수 내부() {
        var a = 40;
        변수 d = 50;
        console.log(a, b, c, d); // 변수를 사용할 때 js는 현재 레이어에서 시작하여 레이어별로 정의를 찾습니다.}
    inner();}fun();

클로저

클로저는 함수 자체와 함수가 선언된 환경 상태의 조합입니다.

함수가 선언된 환경이 아니더라도 함수는 정의된 환경을 "기억"할 수 있습니다. 호출되면 정의된 환경의 변수에 액세스할 수도 있습니다.

js에서는 함수가 생성될 때마다 클로저가 생성되지만 클로저 기능을 사용하려면 종종 함수가 필요합니다.

클로저의 기능을

관찰할 수 있도록 "다른 장소에서" 실행됩니다

. :

1. 메모리: 클로저가 생성되면 해당 기능이 위치한 환경의 상태는 항상 메모리에 유지되며 자동으로 유지되지 않습니다. 외부 함수가 호출된 후 지워집니다.

   함수 재미() {
       var 이름 = '뉴비';
       함수 innerFun() {
           경고(이름);
       }
       

return innerFun;}var inn = fun();inn(); //

2. 전용 변수를 시뮬레이션하기

   위해

3. 내부 함수를 외부 실행으로 이동했습니다.

function fun() {

4.     var a = 0;
       반환 함수() {
           경고(a);
       }}var getA = fun();getA()

함수 fun() {
    var a = 0;
    반품 {
        getA: 함수 () {
            반환하다;
        },
        추가: 함수() {
            ++;
        }, 
        힘: 함수 () {
            *= 2;
        }
    };}var obj = fun();console.log(obj.getA());obj.add();

참고 : 클로저는 남용될 수 없습니다. 그렇지 않으면 웹 페이지에서 성능 문제가 발생할 수 있으며 심각한 경우에는 메모리 누수로 이어집니다.

함수 IIFE

특수 작성 방법을 즉시 호출합니다. 일단 정의되면 즉시 호출되는

함수를 함수 표현식으로 변환해야 호출할 수 있습니다.

(function() { // 함수를 괄호를 통해 표현식으로 변환 // 명령문})() ;+ 함수() {
    경고(1);}();-function() {
    Alert(1);}();

1. 변수에 값을 할당하는 데 사용할 수 있습니다.

   var age = 12; var title = (function () {
       if (나이 < 18) {
           '어린이'를 반환합니다.
       } 또 다른 {
           if (성별 == '남성') {
               '미스터'를 반환합니다.
           } 또 다른 {
               'Ms'를 반환합니다.
           }
       }})();

2. 일부 상황(예: for 루프)에서는 전역 변수가 지역 변수로 변경되며 구문이 더 간결해집니다.

var i = 0; i < 5; 나++) {
    arr.push(함수 () {
        경고(i);     
    });}arr[2](); // 팝업 5

해결 방법:

var arr = [];for (var i = 0; i < 5; i++) {
    (함수 (i) {
        arr.push(함수() {
            경고(i);
        });
    })(i);}arr[2](); // 2개의

DOM

nodeType 공통 속성 값

노드 nodeType 속성은 이 노드의 특정 유형을 표시할 수 있습니다.

문서 객체는

주로 문서 객체에 의존하여 요소 노드

에 액세스합니다

.

문서 객체는 또한 전체 HTML 문서를 나타냅니다. 노드 트리.

일반적인 메서드

document.getElementById()

페이지에 동일한 ID를 가진 요소가 있는 경우 첫 번째

<p id = "box

">나는 상자입니다</p><p id = "para">나는 단락입니다</p>

var box = document.getElementById('box'); var para = document.getElementById('para');

getElementsByTagName()

배열은 순회에 편리하므로

페이지 노드에 지정된 태그 이름이 하나만 있어도 요소 노드를 일괄적으로 조작할 수 있으며 길이가 1인 배열도 가져옵니다.

모든 노드 요소는 또한 getElementsByTagName() 메서드를 호출하여 그 안에 있는 특정 클래스의 요소 노드를 가져옵니다.

<p>Paragraph</p> <p>Paragraph</p> <p>Paragraph</p><p>Paragraph</p>

var ps = document.getElementsByTagName('p');

getElementsByClassName()

<p class ="spec">Box</p><p class ="spec ">Box</p><p class = "spec">Box< /p><p class = "spec">Box</p>

var spec_ps = document.getElementsByClassName('spec');

querySelector()

이 메소드를 충족하는 요소가 여러 개인 경우 페이지에서 하나의 요소만 가져올 수 있습니다. 조건에 따라 첫 번째 요소

<p id = "box1">

    <p>단락</p>
    <p class = "spec">단락</p>
    <p>단락</p>
    <p>Paragraph</p></p>

var the_p = document.querySelector('#box1 .spec');

querySelectAll()

은 페이지에 일치하는 노드가 하나만 있는 경우에도 길이가 1인

배열을

선택기를

실행하려면

window.onload = function() {} 이벤트를 사용합니다(window 객체에 이벤트 리스너를 추가하면 onload는 페이지가 로드되었음을 나타냄). 그러면 페이지가 로드된 후 지정된 코드가 실행된

노드 간의 관계는

nextElementSibling 텍스트 노드도 노드에 속하므로

공통 노드 관계 함수를 작성하기 위해

.
    <p id = "box1">
        <p>단락</p>
        <p class = "spec">단락</p>
        <p>단락</p>
        <p>단락</p>
	</p>
    <스크립트>
        var box = document.getElementById('box1');
        var spec = document.getElementsByClassName('spec');
        // 요소의 모든 하위 요소 노드를 반환하는 함수를 캡슐화합니다. 이는 하위 함수 getChildren(node) {와 유사합니다.
            var 어린이 = [];
            // node의 모든 자식 노드를 순회하여 각 바이트의 nodeType 속성이 1인지 확인합니다.
            // 1이면 결과 배열을 푸시합니다. for (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i] == 1) {
                    children.push(node.childNodes[i]);
                }
            }
            아이들을 돌려 보내십시오;
        }
       
        // PreviousElementSibling function getElementPrevSibling(node) {와 유사하게 요소의 이전 요소 형제 노드를 반환할 수 있는 함수를 캡슐화합니다.
            var o = 노드;
            while (o.previousSibling != null) {
                if (o.prebiousSibling.nodeType == 1) {
                    // 루프를 종료하고 return o.previousSibling을 찾습니다.
                }
                o = o.previousSibling;
            }
            null을 반환;
        }
        
        // 요소의 모든 요소 형제 노드를 반환할 수 있는 함수를 캡슐화합니다. function getAllElementSibling(node) {
            var prevs = [];
            var nexts = [];
            var o = 노드;
            while (o.previousSibling != null) {
                if (o.previousSibling.nodeType == 1) {
                    prevs.unshift(o.previousSibling);
                }
                o = o.previousSibling;
            }
            o = 노드;
            while (o.nextSibling != null) {
                if (o.nextSibling.nodeType == 1) {
                    nexts.push(o.nextSibling);
                }
                o = o.nextSibling;
            }
            return prevs.concat(nexts);
        }
    </script></body>

요소 노드의 콘텐츠를 변경합니다.

두 가지 관련 속성을 사용하여 요소 노드의 콘텐츠를 변경할 수 있습니다.

• innerHTML은

  HTML 구문의 노드에 있는 콘텐츠

• 만

  설정할 수 있습니다

.

• 일반 텍스트 형식의 노드입니다

.
    <p id = "상자"></p>
    <스크립트>
        var oBox = document.getElementById('box');
        oBox.innerHTML = '<ul><li>우유</li><li>커피</li></ul>'; // HTML 구문 분석 가능 // oBox.innerText = 'niub'; be plain text</script></body>

요소 노드의 CSS 스타일을 변경하는 것은

인라인 스타일 속성을 설정하는 것과 동일합니다.

oBox.style.BackgroundColor = 'red' // CSS 속성은 카멜 표기법으로 작성해야 합니다. oBox.style .BackgroundImage = ' url(images/1.jpg)';oBox.style.fontSize = '32px';

HTML

속성을 src, href 등과 같은 표준 W3C 속성으로 변경하려면 직접 클릭하세요. 변경

oImg.src = 'image/2.jpg';

W3C 표준을 준수하지 않는 속성의 경우 setAttribute() 및 getAttribute()를 사용하여

<body>를

    <p id = "상자"></p>
    <스크립트>
        var box = document.getElementById('box');
        box.setAttribute('data-n', 10); // 값이 10인 data-n 속성을 추가합니다.
        var n = box.getAttribute('date-n');
        경고(n);
    </script></body>

노드 생성

document.createElement() 메소드는 지정된 태그 이름을 가진 HTML 요소를 생성하는 데 사용됩니다.

var op = document.createElement('p');

새로 생성된 노드는 "고아 노드"입니다. DOM 트리에 마운트되지 않아 볼 수 없습니다.

이미 DOM 트리에 있는 모든 노드는

고아 노드를 삽입하려면 계속해서 addChild() 또는 insertBefore() 메서드를 사용해야 합니다.

내부에 고아 노드를 마운트하고 마지막 하위 노드가 될 수 있는appendChild() 메소드

상위 node.appendChild(고아 노드)

이미 DOM 트리에 있는 모든 노드는 고아 노드를 마운트할 수 있는 insertBefore() 메소드를 호출할 수 있습니다. node 그 내부로 가서 "benchmark child node" 이전에 노드의 상위 노드가 됩니다.

.insertBefore(orphan node, benchmark node);

모바일 노드가

DOM 트리에 마운트된 노드를appendChild() 또는 insertBefore로 만드는

새 상위 node.appendChild(이미 상위가 있는 노드)

로 이동됩니다

DOM 트리에서 동시에 노드를 찾을 수 없습니다. 두 위치에서 
노드를 삭제합니다
 .

DOM.removeChild에서

상위 노드를

자식

)

메소드는 노드를 복제할 수 있습니다.

매개변수는 부울이며, true인 경우 해당 노드의 모든 하위 노드도 복제됩니다.

var orphan node = old node.cloneNode(); var orphan node = old Node.cloneNode(true)

event

• common 마우스 이벤트 모니터링

이벤트

onmouseenter가 버블링되지 않음 onmouseover 버블링

• 일반 키보드 이벤트 모니터링

• 일반 양식 이벤트 수신

• 일반 페이지 이벤트 리스너

상자 중첩 시 이벤트 수신 순서 실행 순서

<p id = "box1">
    <p id = "박스2">
        <p id = "box3"></p>
    </p></p><스크립트>
    var oBox1 = document.getElementById('box1');
    var oBox2 = document.getElementById('box2');
    var oBox3 = document.getElementById('box3');
    
    oBox1.onclick = 함수 () {
        console.log('box1');
    };
    
    oBox2.onclick = 함수 () {
        console.log('box2');
    };
    
    oBox3.onclick = 함수 () {
        console.log('box3');
    };
    // 가장 안쪽 상자를 클릭하면 전파 방향은 내부에서 외부입니다.</script>

이벤트 전파

이벤트의 전파는 먼저 외부에서 내부로, 그 다음 내부에서 외부로 진행됩니다(가장 안쪽 레이어를 먼저 캡처한 다음 버블링하는 것이 아니라 코드 작성 순서에 따라 결정됩니다. 이름이 같은 상자). 동일한 스테이지 및 순서에 관련됩니다. 동일한 요소가 설정된 경우 동일한 이름의 이벤트가 두 개 이상 있는 경우 DOM0 레벨에 나중에 작성된 이벤트가 먼저 작성된 이벤트를 덮어쓰고 DOM2 레벨에서 순서대로 실행됩니다.

onxxxx(DOM0 레벨 이벤트 모니터링)는 버블링 단계만 모니터링할 수 있으므로 관찰된 결과는 내부에서 외부

addEventListener() 메서드(DOM 레벨 2 이벤트 모니터링)

oBox.addEventListener('click', function() {
 

이벤트

함수

는 다음과 같습니다.}, true); // 세 번째 매개변수가 true이면 캡처 단계를 수신하고, false이면 버블링 단계를 수신합니다.

이 이벤트의 세부 정보를 캡슐화하는 개체인 형식 매개 변수

이 매개 변수는 일반적으로 event라는 단어나 문자 e로 표시됩니다.

oBox.onmousemove = function (e) {
 //객체 e는 이 이벤트의 "이벤트 객체"입니다.};

객체 관련 속성

• 마우스 위치 관련 속성

이 이벤트가 트리거될 때 마우스 위치의 속성 속성 속성

• e .charCode 및 e.keyCode 속성

e.charCode 속성은 일반적으로 onkeypress 이벤트에서 사용자가 입력한 문자의 "문자 코드"를 나타내는 데 사용됩니다.

문자 코드 번호

0

~	숫자
9	48 ~ 57
대문자 A ~ Z	65 ~ 90
소문자 a ~ z	97 ~ 122

e.keyCode 속성은 일반적으로 onkeydown 및 onkeyup 이벤트에서 누른 키의 "키코드"를 나타내는 데 사용됩니다. 사용자가

40

키	코드
번호 0 ~ 숫자 9	48 ~ 57
문자 부분 대문자 및 소문자 a ~ z	65 ~ 90
4방향 키 ← ↑ → ↓	37, 38, 39,
Enter 키	13
Space 키	32

기본 이벤트 방지

e .preventDefault() 메서드는 이벤트에 의해 생성된 "기본 작업"을 방지하는 데 사용됩니다.

e.stopPropagation() 메서드는 이벤트가 계속해서 전파되는 것을 방지하는 데 사용됩니다

. 일괄 추가 이벤트 청취

• 등록은 일정량의 리소스를 소비합니다

• 이벤트를 일괄적으로 추가하면 모니터가 너무 많아지고 메모리가 많이 소모됩니다.

이벤트를

수신하는 각 이벤트는 일정량의 시스템 메모리를 소비하며, 이벤트를 일괄적으로 추가하면 리스너가 너무 많아지고 메모리 사용량도 늘어납니다. 메모리 소비(일괄적으로 추가해야 하는 유사한 요소가 많은 경우 이벤트 위임을 통해 메모리 오버헤드를 줄일 수 있음)

이벤트 버블링 메커니즘을 사용하여 하위 요소의 이벤트를 상위 요소에 대한 참고 사항에 위임

할 수 없습니다. 이벤트를 조상 요소에 버블링합니다.

동적 요소 노드가 트리에 추가되면 이벤트 위임을 사용하여 트리에 새로 추가된 요소가 이벤트 수신

관련

타이머

setInterval() 함수는 각 호출 사이에 고정된 간격으로 함수를 반복적으로 호출할 수 있습니다.

setInterval(function () {
    // 이 함수는 고정된 간격으로 자동 호출됩니다.}, 2000); // 두 번째 매개변수는 간격(밀리초)입니다. // 이 함수는 3번째, 4번째... 매개변수를 받을 수 있으며 순서대로 전달됩니다. setInterval(function (a, b) { 함수를 입력합니다.
    // 형식 매개변수 a의 값은 88, 형식 매개변수 b의 값은 66}, 2000, 88, 66) // 세 번째 매개변수부터 함수에 전달되는 매개변수를 나타냅니다. // 명명된 함수는 setIntervalvar에도 전달됩니다. function fun() {
    console.log(++a);};setInterval(fun, 1000);

타이머 지우기

clearInterval() 함수는 타이머를 지울 수 있습니다.

// 타이머를 설정하고 타이머 변수를 사용하여 타이머를 수신합니다. var 타이머 = setInterval(function ( ) {
    }, 2000);//버튼을 클릭하면 타이머가 지워집니다. oBtn.onclick = function () {
    

(

timer); };

Delayer

setTimeout() 함수는 지정된 시간이 지나면 함수가 한 번만 실행되고 반복적으로 실행되지 않습니다.

    // 이 함수는 2초 후에 한 번 실행됩니다.}, 2000);clearTimeout(timer); //

비동기식으로

. 비동기식이 완료되면 다른 명령문을 계속 실행하기 위해 CPU를 차단하지 않습니다. "가 실행됩니다. (콜백)

setInterval() 및 setTimeout()은 두 개의 비동기 명령문입니다.

setTimeout(function () {
    console.log('A');}, 2000); // 비동기 문 console.log('B'); // 비동기 문은 프로그램의 정상적인 실행을 차단하지 않습니다. // 실행 결과 BA

함수는

실행을

a function Once 마지막으로 실행 주기가 설정된 실행 기간보다 커진 후에만 두 번째 실행이 허용됩니다.

var lock = true function that need throttling () {
    // 잠금이 닫히면 if(!lock)이 실행되지 않습니다. return;
    // 함수의 핵심문 // Lock lock = false;
    
    //지정된 밀리초 후에 잠금을 엽니다. setTimeout(function () {
        잠금 = 사실;
    }, 2000);}

BOM

BOM(브라우저 개체 모델, 브라우저 개체 모델)은 JS가 브라우저 창과 상호 작용하는 인터페이스입니다.

개체

는 현재 js 스크립트가 실행되는 창이며 이 창에는 DOM이 포함되어 있습니다. 구조, 창 .document 속성은

탭 기능이 있는 브라우저에서 각 탭에는 자체 창 개체가 있습니다. 즉, 동일한 창의 탭은 창 개체가 됩니다

1. .

   var a = 10; console.log(window.a == a); // true

   이는 여러 js 파일이 전역 범위를 공유한다는 것을 의미합니다. 즉, js 파일에는 범위 격리 기능이

2. 일반적으로

없습니다.

3. setInterval(), Alert() 및 기타 내장 함수와 같은

   메서드는

   일반적으로 창의 메서드입니다.

창 크기 관련 속성

스크롤 막대 없이 창의 너비를 얻으려면 document.documentElement.clientWidth를 사용합니다.

창의 크기

조정 이벤트

스크롤 높이

window.scrollY 속성은 픽셀 값을 나타냅니다.

document.documentElement는 세로 방향으로 스크롤됩니다. .scrollTop 속성은

더

나은 브라우저 호환성을 위해 일반적으로 두 속성을 함께 작성합니다.

var scrollTop = window.documentElement.scrollTop;

documentElement.scrollTop은 읽기 전용이 아니며 window .scrollY는 읽기 전용

스크롤 이벤트입니다.

창이 스크롤된 후 window.onscroll 또는 window.addEventListener('scroll')를 사용하여 트리거할 수 있습니다. 이벤트 핸들러 함수

Navigator 객체를

관련 속성 및 식별 속성이 포함된 navigator 객체를 검색할 수 있습니다.

기록 개체

창 .history 개체는 브라우저 세션 기록을 작동

하기 위한 인터페이스를 제공합니다. 일반적인 작업은 브라우저

의 뒤로 버튼을 클릭하는 것과 동일합니다.

Location 객체

window.location

과 동일

합니다. 이 속성에 값을 할당하여 브라우저에 명령을 내릴 수 있습니다.

= 'http://www.baidu.com';window.location.href = 'http://www.baidu.com';

• 현재 페이지를 다시 로드하려면

  위치의 reload 메소드를 호출하여 현재 페이지를 다시 로드할 수 있습니다. PARAMET은

  Window.Location.Reload (True)

  를 통해

• Window.location.location.search

  get get get quess query 매개

변수

입니다

이 요소에서 조상

요소를 포지셔닝하는 조상 요소로 가장 가까운 요소는 속성을

추가 할 때이를

사용

합니다

값

사이의 매핑 관계를 나타내는 "키 값 쌍"모음.

    이름 : 'Xiao Ming',
    나이 : 12,
    섹스 : '남성',
    

• 취미

• :

'

,'프로그래밍 '};

• 속성 이름은 JS 식별자 이름 지정 규칙을 준수하지 않으므로 사각형 브래킷을 사용하여

• 속성 이름이 변수 형태로 저장되면

  var obj = {

  형식으로 사각형 브래킷을 사용해야합니다.

      A : 1,
      B : 2,
      C : 3}; var key = 'b'; console.log (obj.key); // obj [key

]

;
    A : 10}; obj.b

=

40

;

    A : 1,
    b : 2};

객체 객체 메소드

속성 값이 함수 인 경우 객체 메소드

var xiaoming = {.
    이름 : 'Xiao Ming',
    나이 : 12,
    섹스 : '남성',
    취미 : [ '축구', '수영', '프로그래밍'],
    '좋아하는 책': 'Shuke and Beta',
    SayHello : function () {
        Console.log ( 'Hello');
    }};

객체

... in ... roop을 사용하지만 객체의 각 키를

(var k in obj) {{{{{{
    console.log ( '속성' + k + '의 값은' + obj [k]);}

물체의 딥 클론

var obj1 = {
    A : 1, 
    B : 2, 
    C : [33, 44, {
        M : 55,
        N : 66,
        P : [77, 88]
    }]}; 함수 DeepClone (O) {
    if (array.isarray (o)) {
        var result = [];
        for (var i = 0; i <o.length; i ++) {
            result.push (DeepClone (O [i]));
        }
    } else if (typeof o == 'Object') {
        var result = {};
        for (var k in o) {
            결과 [k] = 딥 클론 (O [k]);
        }
    } 또 다른 {
        var result = o;
    }
    return

;

​

​

​

​

​

​

)

함수

.
    Alert (this.c + this.m + this.e + b1 + b2);} sum.call (Xiaoming, 5, 3); 3];

함수가

없더라도

1. 컨텍스트
2. 객체를 자동으로 반환합니다.

/ {} 이것은이 빈 개체를 가리 킵니다 .a = 3;
    this.b = 5; // {a : 3, b : 5}
    // return this;} var obj = new fun (); console.log (

OBJ

)

;

    this.name = 이름;
    this.나이 = 나이;
    this.sex = sex;} var xiaoming = new People ( '小明', 12, 'male'); var xiaoming = new People ( '小红', 10, 'female'); var xiaogang = 새로운 사람들 ( '小 小'갱', '남성

• '
• ;

새

• 개체를 구성하십시오

.
    this.name = 이름;
    this.나이 = 나이;
    this.sex = 섹스;
    this.sayhello = function () {
        Console.log ( 'I am' + this.name);
    

=

새로운 사람들 ( 'xiaoming', 'male'); xiaoming.sayhello ()

; 기본적으로 생성자 속성은 함수를 다시 가리 킵니다.

생성자의 프로토 타입은 인스턴스의 프로토 타입입니다.

프로토 타입 체인 검색

인스턴스는 프로토 타입의 속성과 방법에 액세스 할 수 있습니다

.
    this.name = 이름;
    this.나이 = 나이;
    this.sex =} people.prototype.nationality = 'China'; (Xiaoming .nationality);

hasOwnProperty ()

이 방법은 실제로 "특정 속성 또는 방법

Xiaoming을 소유하고 있는지 확인할 수 있습니다 ( 'name');

의

거짓은

xiaoming /의 자체 속성 또는 방법 '이름'

인지 확인할 수 없습니다

// Xiaoming의 // true'Sex '에서 // true'Sex'에서 // Xiaoming // Xiaoming의 True'Sex ''Xiaoming // true

메소드에 대한 메소드에 대한 메소드에

대한 메소드 추가 방법을 인스턴스에 직접 추가하는 방법 : 각 인스턴스의 메소드 기능은 메모리가 다릅니다. 이 방법의 함수는 메모리 낭비를 유발하며, 이는 프로토 타입에 메소드를 작성하여 해결할 수 있습니다.

기능인 (이름, 나이, 섹스) {
    this.name = 이름;
    this.나이 = 나이;
    this.sex = sex;} people.prototype.sayhello = function () {
    console.log ( 'am' + this.name);}; var xiaoming = 새로운 사람들 ( 'xiaoming', 12, 'male'); xiaoming.sayhello ()

;

배열 프로토 타입 체인

상속은

1. 프로토 타입 체인의 도움으로 구현되어

학생의 프로토 타입 속성이 학부모 클래스의 인스턴스를 가리킨 다음 학생의 방법을 학생의 프로토 타입에 추가 할 수 있습니다.

프로토 타입 체인을 통한 상속 문제는

• 부모 클래스의 속성에 참조 유형 값이있는 경우 서브 클래스의 모든 인스턴스에 의해 공유됩니다
• . 수퍼 클래스로 정의 된 많은 속성.

• 서브 클래스의

2. 생성자는

프로토 타입의 참조 유형 값과 서브 클래스의 무능한 생성자로 인한 문제를 해결하기 위해

일반적으로 사용됩니다. "객체"또는 "클래식 상속"으로 알려져

Function People (이름, 성별, 연령)을

바인딩하십시오

    this.name = 이름;
    this.sex = 섹스;
    this.나이 = 나이;
    this.arr = [1, 2, 3];} 기능 학생 (이름, 성별, 연령, 학교, SID) {
    사람들.
    this.school = 학교 ';
    this.sid = sid;} var xiaoming = 새로운 학생 ( 'Xiao Ming', 'Male', 12, 'School', 123456

)

3. ;

유산은 의사 클래스 상속

단점이라고도합니다.

결합 된 상속의 가장 큰 문제는 상황에 관계없이 슈퍼 클래스 생성자가 두 번 호출된다는 것입니다. 서브 클래스 프로토 타입을 만들 때 한 번, 다른 시간은 서브 클래스 생성자 내부입니다.

프로토 타입은

객체를

상속

, {// 아니오.
    } // 프로토 타입에서 동일한 이름으로 속성을 마스킹 할 수 있습니다});

생성자를 생성하기 위해 "많은 노력을 기울일 필요가 없지만"새로운 객체가 기존 객체와 "유사"되기를 원한다면 Object.create ()를 사용할 수 있습니다. 프로토 타입 상속

객체 .Create () 고유 한 쓰기 메소드는

하위 버전 브라우저에서 개체를 구현합니다.

// Douglas Crockford가 작성한 함수 // 기능 함수는 O를 프로토 타입으로 사용하여 새 개체 기능 객체를 작성하는 것입니다 (o ) {
    // 임시 생성자 기능 생성 f () {}
    //이 임시 생성자의 프로토 타입이 O를 가리키도록하므로 새 개체가 생성하는 __proto__가 O를 가리 킵니다.
    F. 프로토 타입 = O;
    New F ();}

기생 상속

사용하여 객체 가이 함수로 전달되는 한이 객체를 "기본"으로 사용하여 새 개체를 만들고 새 개체를 만들 수 있습니다. 새 개체를 새 개체에 할당합니다

.
    var p = object.create (o);
    p.display = function () {
        Console.log (111);
    }
    반환 p;}

단점 :

재사용 기능이 없기 때문에 효율성이 줄어 듭니다 (방법은 프로토 타입에 기록되지

않음

)

.

, SuperType) {
    var 프로토 타입 = Object.Create (superType.prototype);
    subtype.prototype = 프로토 타입;
}

// 부모 클래스 기능 사람 (이름, 성별, 나이) {
    this.name = 이름;
    this.sex = 섹스;
    this.나이 = 나이;
}

people.prototype.sayhello = function () {
    Console.log ( "Hello");
}
people.prototype.sleep = function () {
    Console.log ( "수면");
}

// 서브 클래스 기능 학생 (이름, 성별, 연령, 학교, SID) {
    사람들.
    this.school = 학교;
    this.sid = sid;
}

inheritPrototype (학생, 사람);
    Console.log ( "시험");
};

var xiaoming = 신입생 ( 'Xiao Ming', 'Male', 12, 'School', 123456);

연산자의 인스턴스

는 "객체가 특정 클래스의 인스턴스인지 여부"

xiaoming instation의 인스턴스인지 여부를 감지하는 데 사용됩니다.

내장 된 생성자

JavaScript

에는 많은 내장 생성자가 있습니다. 예를 들어 배열은 기능 유형의 생성자이며 객체는 객체 유형의 생성자

입니다 이 유형의 모든 방법은 기능의 프로토 타입에 내장 된 생성자에 정의되므로 특정 유형의 함수를 확장하기 위해 새로운 메소드를 추가 할 수 있습니다.

내장 된 생성자 :

Object.prototype는 모든 것의 프로토 타입 체인의 종점입니다.

모든 함수는 "새"기능으로 간주 될 수 있으므로 함수 클래스의 객체이기도합니다.

래퍼 클래스

생성자의 프로토 타입에서

Math Object

Math.pow ()를

Math.sqrt ()
math.ceil () // Round Up Math.floor () // Round Down Math.round () // Round Up Math.Max ​​() // 매개 변수 목록의 최대 값 Math.min ()

// ARR ARRAY의 최대 값을 계산합니다 var arr = [3, 6, 9, 2];
var max = math.max.apply (null, arr);

date 객체

새 날짜 () 현재 시간의 날짜 객체를 가져옵니다 (2020, 11, 1). 2020-12-01 ')

공통

있습니다

.

(

timeStamp

)에 의해 timeStamp를

var d = d.gettime ()

;

1. /内容/ syntax form

var str = '123456'; var regxp = /^ d를

정규 표현식을 만듭니다.

{6} $/; if (regxp.text (str)) {
	경고 ( '규칙에 따른다');} else {
	Alert ( '규칙을 충족하지 않음');}

2. 새로운 regexp ( 'content')

var regxp2 = new regexp ( '^\ d {6} $')

metacharacter

. 기호의 특별한 의미가있는 경우 기호 자체를 표현하기 위해 A 추가 할 수

있습니다

.

사각형 브래킷.

/^[by]  d {7} $ /

대시 사용 - 문자 범위를 지정하려면 ^

정량기

.

.

을

사용

됩니다

문자열을

(

     
// indexof ()와 매우 유사한 검색 () 메소드는 찾은 첫 번째 인덱스를 반환하거나 찾을 수없는 경우 -1을 반환합니다.
var result1 = str.search (/ d+/g);
var result2 = str.search (/m/g);
Console.log (결과 1);
Console.log (result2);

// match () 메소드는 찾은 배열을 반환합니다.
var result3 = str.match (/ d+/g);
Console.log (result3); // [ "123", "4567", "89"]

// () 메소드를 대체하고 var result4 = str.replace (/[az] +/g, '*'); ; //*123*4567*89

// split () 메소드, 문자열을 배열 var result5 = str.split (/ d+/g)로 분할;
Console.log (result5); // [ "ABC", "def", "ghi", ""]