JS 튜토리얼

자바스크립트 핵심 읽기: 언어 핵심_기본 지식

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:16 PM

javascript핵심

이 책을 읽기 전에 이 JavaScript 핵심을 번역해 준 타오바오 기술팀과 이 책을 쓴 Flanagan에게 감사하다는 말씀을 전하고 싶습니다. 사심 없는 나눔에 감사드리며, 여러분의 노고에 이 글을 바칩니다.

1: JavaScript 언어 핵심

이 장 이후에는 주로 자바스크립트의 기본 사항에 중점을 둘 것입니다. 2장에서는 자바스크립트 주석, 세미콜론, 유니코드 문자 집합을 설명합니다. 3장은 주로 자바스크립트 변수와 할당에 대해 설명합니다.

다음은 처음 두 장의 핵심 사항을 보여주는 몇 가지 예제 코드입니다.

코드 복사 코드는 다음과 같습니다.

JavaScript에서 가장 중요한 유형은 객체와 배열입니다. 6장에서는 객체를 소개하고, 7장에서는 배열을 소개합니다. 객체와 배열은 JavaScript에서 매우 중요합니다. 이 책의 어디에서나 볼 수 있을 정도로 많습니다.

코드 복사 코드는 다음과 같습니다.

위 코드에서 대괄호를 통해 배열 요소를 정의하고 중괄호를 통해 객체 속성 이름과 속성 값 간의 매핑 관계를 정의하는 구문은 Chen Wei의 초기화 표현식(initializer 표현식)이며, 이는 Chapter에서 특별히 소개됩니다. 4. 표현식은 javascript입니다. 값을 얻기 위해 계산할 수 있는 의 구문입니다. "," 및 "[]"를 사용하여 객체 속성 또는 배열 요소의 값을 참조하여 표현식을 구성합니다.

자바스크립트에서 표현식을 작성하는 가장 일반적인 방법은 다음 코드와 같은 연산자입니다

코드 복사 코드는 다음과 같습니다.

//Operator는 연산자 역할을 하며 새로운 값을 생성합니다
//가장 일반적인 산술 연산자
3 2 // =>5 더하기
3-2 // =>뺄셈
3*2 // =>곱셈
~                                      // => Point[1].x -point[0].x //=>복잡한 작업도 평소처럼 작동할 수 있습니다
"3" "2" // => 32. 덧셈 연산도 완료할 수 있고, 문자열 연결도 완료할 수 있습니다.
                          //Javascript는 일부 산술 연산자를 약식 형식으로 정의합니다.
                var count = 0 //변수 정의
카운트 ; //1씩 증가
세다--; Count = 2; // 자체증가 2와 "Count = Count 2;" 작성방법은 동일합니다
Count *= 3 // 자가 탑승 3. "Count = Count *3;" Count // = & gt; 6: 변수 이름 자체도 표현식입니다
//동등 관계 연산자는 두 값이 동일한지 여부를 확인하는 데 사용됩니다
//부등식, 초과, 미만 연산자의 결과는 참 또는 거짓입니다
var x=2,y=3;                    x == y;                                                                           x! = y; > ~                 x y;                                                              x >= y;                                              "two"=="3"; //false 두 문자열이 동일하지 않습니다
"two" > " three"; //true "tw"는 "th"보다 알파벳 인덱스가 더 큽니다.
                   false == (x>y);             //ture false =false;
//논리 연산자는 부울 값의 조합 또는 부정입니다.
(x == 2)&&(y==3); //=>true 두 비교 모두 참입니다.&&는 "AND"입니다
(x > 3) || (y false 비교는 "또는"을 의미하지 않습니다.
(x == y); //=>부정을 나타냅니다

자바스크립트의 "문구"가 표현식이라면 전체 문장을 문장이라고 부르는데, 이에 대해서는 5장에서 자세히 설명하겠습니다.

위 코드에서 세미콜론으로 끝나는 줄은 모두 명령문입니다. 대략적으로 말하면 표현식은 값(또는 포함된 값은 우리가 신경 쓰지 않는 값)만 계산하지만 프로그램의 실행 상태를 변경합니다. 위에서는 변수선언문과 대입문을 살펴보았습니다. 또 다른 유형의 명령문은 조건부 판단, 루프 등의 "제어 구조"입니다. 기능 소개 후 관련 샘플 코드를 제공합니다.

함수는 한 번 정의하면 여러 번 사용할 수 있는 이름과 매개변수가 포함된 JavaScript 코드 세그먼트입니다. 8장에서는 함수를 형식적으로 자세히 설명합니다. 객체 및 배열과 마찬가지로 함수도 이 책의 여러 곳에서 언급됩니다. 다음은 몇 가지 간단한 예제 코드입니다.

코드 복사 코드는 다음과 같습니다.

                     //함수는 여러 번 전달될 수 있는 처리 매개변수가 포함된 자바스크립트 코드 세그먼트입니다. 

                function plus1(x) { //plus1이라는 함수는 매개변수 x로 정의됩니다

Return x 1; //전달된 값보다 1이 큰 값을 반환합니다. 

~                                   // 함수의 코드 블록은 중괄호로 묶인 부분입니다 

               plus1(y) //

VAR SQUARE = ​​​​FUNCTION (X) {// 함수는 변수에 할당할 수 있는 값입니다 

Return x*x; // 함수의 값을 계산합니다 

}; // 할당문의 끝을 보냅니다 

             square(plus1(y));

함수와 객체를 함께 작성하면 함수가 "메서드"를 프로그래밍합니다.

코드 복사 코드는 다음과 같습니다.

//함수가 객체의 속성에 값을 할당할 때 이를 
이라고 부릅니다.
//"메서드", 모든 JavaScript 개체에는 메서드가 포함되어 있습니다. 

Var a = []; // 빈 배열 생성 

               a.push(1,2,3);
              a.reverse();
~ |
                               //자식의 메소드를 정의할 수 있으며 "this" 키워드가 정의 메소드입니다 

~                                       객체에 대한 참조 여기서의 예는 위에서 언급한 두 지점의 위치 정보를 포함하는 배열입니다. 

POINTS.DIST = 함수 () {// 두 점 사이의 거리를 정의하여 두 점 사이의 거리를 계산합니다 

Var p1 = this [0] // 이 키워드를 통해 현재 배열 참조 

                    var p2 =this[1] //호출된 배열의 처음 두 요소를 가져옵니다. 

Var a = p2.x- p1.y; // 좌표축 위의 X 거리 

              var b =p2.y - p1.y; //y 좌표축의 거리

                     return Math.sqrt(a * a "we call it" b * b); //피타고라스 정리

                };        //Math.sqrt()는 제곱근을 계산합니다

Points.dist() // => 두 점 사이의 거리를 구합니다.

이제 제어문의 몇 가지 예를 들어보겠습니다. 여기에 있는 예제 함수 본문에는 가장 일반적인 자바스크립트 제어문이 포함되어 있습니다.

코드 복사

코드는 다음과 같습니다.

//여기의 자바스크립트 문은 이 구문을 사용하여 조건부 판단과 루프를 포함합니다. 

//Java C 및 기타 언어와 유사한 구문 사용 ​​

             function abs(x) { //절대값 함수 찾기

If (x >= 0) { //if

Return x; //참이면 이 코드를 실행하세요

} 그렇지 않으면 {// false가 실행됩니다. 

                       -x를 반환합니다.

                }

            }

             function Factprial(n) { //계승 계산

                    var product = 1 //제품에 값을 1로 할당

While (n & gt; 1) {// () 값 표현식은 {} 콘텐츠 
를 실행합니다.
제품 *= n; //제품 = 제품 * n의 약어

n--; // n = n-1 쓰기 

|
                    //제품 반품

            }

                Factprial(4) // =>24 1*4*3*2 document.write(factprial(4))

             function Factorial2(n) { //루프를 작성하는 또 다른 방법

              var i, 제품 = 1 //

                     for (i = 2; i 
Product *= i; // 순환 본문, 원형 본문에 코드가 하나만 있는 경우 {} 생략 

                      제품 반품; //좋은 계승값을 계산하여 반환

            }

                   factorial2(5) //document.write(factorial2(5)) =>120: 1*2*3*4*5

JavaScript는 객체지향 프로그래밍 언어이지만 기존의 페이지 객체와는 매우 다릅니다. 9장에서는 JavaScript의 객체지향 특성을 자세히 설명할 것입니다. 이 책의 가장 긴 장의 일부.

다음은 간단한 예입니다. 이 코드는 2D 면 형상의 점을 나타내기 위해 자바스크립트에서 클래스를 정의하는 방법을 보여줍니다. 이 클래스에 의해 인스턴스화된 객체에는 변경 지점에서 원점까지의 거리를 계산하는 데 사용되는 r()이라는 메서드가 있습니다.

코드 복사 코드는 다음과 같습니다.

//새 포인트 객체를 초기화하는 생성자를 정의합니다

              function Point(x, y) { //생성자는 일반적으로 대문자로 시작합니다 

This.x = x; //초기화된 인스턴스를 참조하는 키워드

                   this.y = y //객체의 속성인 저장 함수 매개변수 

            }

//new 키워드와 생성자를 사용하여 인스턴스 생성

               var p = new Point(1, 1) //평면 기하학의 점 1,1,

//생성자 프로토타입 객체를 통해 값 할당

// Point 객체를 정의하러 왔습니다 

Point.prototype.r = function() {

                     return Math.sqrt( //x 제곱 y 제곱의 제곱근을 반환합니다. 

This.x * this.x //this는 이 메소드를 전달하는 객체를 나타냅니다. 

This.y * this.y);

            };

//포인트 인스턴스 객체 p(및 모든 포인트 인스턴스 객체)는 r() 메서드를 상속합니다

                 p.r() // => 1.4142135623730951 /document.write(p.r())

9장은 첫 번째 부분의 핵심입니다. 다음 장에서는 산발적인 확장이 이루어지며 JavaScript 탐색이 끝날 것입니다.

10장에서는 주로 정규식을 사용한 텍스트 일치 패턴에 대해 설명합니다.

11장은 핵심 JavaScript 언어 의 하위 집합과 상위 집합입니다.

클라이언트 측 자바스크립트의 내용을 입력하기 전에 12장에서는 웹 외부의 자바스크립트 실행 환경 두 가지만 소개하면 됩니다.

2. 클라이언트 자바스크립트

자바스크립트 언어의 핵심 부분에는 상호 참조가 많아 지식 계층 구조가 명확하지 않습니다. 클라이언트 측 JavaScript의 콘텐츠 레이아웃이 많이 변경되었습니다. 이 장을 따르면 웹 브라우저에서 JavaScript를 사용할 수 있습니다. (그러나 이 책을 읽으면서 자바스크립트를 배우고 싶다면 두 번째 부분에만 집중하면 안 된다.) 13장은 두 번째 부분의 첫 번째 장으로, 이 장에서는 웹 브라우저에서 자바스크립트를 실행시키는 방법을 소개한다. 14장에서는 웹 브라우저 스크립팅 기술을 설명하고 클라이언트 측 JavaScript의 중요한 전역 기능을 다룹니다.

예:

코드 복사 코드는 다음과 같습니다.

함수 moveon() {
//대화상자를 통해 질문하기
var 답변 = 확인("준비됐나요?");
//확인을 클릭하면 브라우저가 새 페이지를 로드합니다
(대답) window.location = "http://www.baidu.com";
}
//1분(60000밀리초) 후에 이 함수를 실행합니다
setTimeout(moveon,300);

15장은 JavaScript가 HTML 스타일 정의 콘텐츠의 표시를 조작하는 방법을 설명합니다. 15장의 내용은 스크립트를 통해 HTML 문서의 콘텐츠를 조작하는 보다 실용적이며 선택하는 방법을 보여줍니다. 특정 웹 페이지 요소, html 요소의 속성을 설정하는 방법, 요소의 내용을 수정하는 방법, 문서에 새 노드를 추가하는 방법

다음 예제 함수는 기본 기사 콘텐츠를 찾고 수정하는 방법을 보여줍니다

코드 복사 코드는 다음과 같습니다.

// 문서 내 특정 정보의 영역 트리에 있는 슈퍼 디버깅 정보
//이 요소가 문서에 없으면 새로 만듭니다.
기능 디버그(msg) {
//html 요소의 id 속성을 보고 문서의 디버깅 부분을 찾습니다.
var log = document.getElementById("debuglog");

//요소가 없으면 새로 만듭니다.
               if (!log) {
                    log = document.createElement("div") //새 div 요소 생성
~ >                            log.innerHTML = "

디버그 로그

" //초기 콘텐츠 맞춤설정
document.body.appendChild(log); //문서 끝에 추가
}
//

에 메시지를 포함하고 로그에 추가합니다<br>
               var pre = document.createElement("pre") //사전 요소 생성<br>
               var text = document.createElement(msg) //텍스트 노드에 메시지 포함 <br>
                pre.appendChild(text) //텍스트가 pre<br>에 추가됩니다.
                log.appendChild(pre) //pre가 로그에 추가됩니다<br>
}<br>
<br>

16장에서는 요소를 조작하기 위해 자바스크립트를 사용하는 방법에 대해 설명합니다. 이는 일반적으로 요소의 스타일 및 클래스 속성을 사용합니다.

코드 복사 코드는 다음과 같습니다.

function hide(e, reflow) { //jvascript e를 통해 요소를 조작하고 요소를 숨깁니다.
                            if (리플로우) { //두 번째 매개변수가 true인 경우
                        e.style.display = "none" //이 요소를 숨기고 차지하는 공간도 판매됩니다
                    } else {
                       e.style.visibility = "hidden" //e를 숨기고 차지하는 공간을 유지합니다.
                }
            }
function 하이라이트(e) { //CSS를 설정하여 e를 강조

If (!e.className) e.className = "highcss";
그 외 e.className = "highcss";
}

JavaScript를 통해 요소의 내용과 CSS 스타일을 제어할 수 있으며, 이벤트 핸들러를 통해 문서 동작을 정의할 수도 있습니다. 이벤트 핸들러는 특정 이벤트가 발생하면 브라우저 센터에 등록된 JavaScript 함수입니다. 기능.
일반적으로 우리가 관심을 두는 이벤트 유형은 마우스 클릭과 키보드 키 이벤트입니다(스마트폰은 다양한 터치 이벤트입니다). 즉, 브라우저가 문서 로드를 완료할 때, 사용자가 창 크기를 변경하거나 사용자가 양식에 데이터를 입력할 때 휴먼 이벤트가 트리거됩니다.

17장에서는 타임 핸들러를 정의하고 등록하는 방법과 이벤트 발생 시 브라우저가 타임 핸들러를 호출하는 방법을 자세히 설명합니다.

이벤트 핸들러를 맞춤설정하는 가장 간단한 방법은 on이 붙은 HTML 속성에 콜백을 바인딩하는 것입니다. 간단한 프로그램 테스트를 작성할 때 가장 실용적인 방법은 콜백을 "onclick" 핸들러에 바인딩하는 것입니다. 위의 debug() 및 hide() 함수가 debug.js 및 hide.js 파일에 저장된다고 가정하면 간단한 html 테스트 파일을 사용하여 onclick 속성에 대한 이벤트 핸들러를 지정할 수 있습니다. 다음과 같이

코드 복사 코드는 다음과 같습니다.