이 책을 읽기 전에이 JavaScript Core와 Flanagan 이이 책을 쓴 Taobao 기술 팀에게 감사의 말씀을 전합니다. 이타적인 공유에 감사 드리며,이 메모 만 당신의 노력에 전념합니다.
1 : JavaScript 언어 코어
이 장 후에는 주로 JavaScript의 기본 사항에 중점을 둘 것입니다. 2 장 우리는 JavaScript의 의견, 세미콜론 및 유니 코드 문자 세트를 설명 할 것입니다. 3 장은 주로 JavaScript의 변수와 할당을 설명하는 더 흥미로울 것입니다.
다음은 처음 두 장의 주요 내용을 설명하기위한 몇 가지 예제 코드입니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
// 이중 슬래시의 내용은 주석에 속합니다.
// 여기에서 주석을주의 깊게 읽으면 JavaScript 코드가 설명됩니다.
// 변수는 값을 나타내는 상징적 이름입니다.
// 변수는 var 키워드를 통해 선언됩니다
var x; // 변수 선언 x
// 값은 기호를 통해 변수에 할당 할 수 있습니다.
x = 0; // 변수 x의 값은 이제 0입니다
x // 변수 이름으로 값을 얻습니다.
// JavaScript는 여러 데이터 유형을 지원합니다
x = 1; //숫자
x = 0.01; // 정수와 실수는 데이터 유형을 공유합니다
x = "Hello World"; // 텍스트 문자열을 이중 인용문으로 구성합니다
x = 'Hello World'; // 단일 따옴표도 문자열을 형성합니다.
x = true; // 부울
x = 거짓; // 또 다른 부울 값
x = null; // null은 특별한 값입니다. 비어 있음을 의미합니다
x = 정의되지 않은; // 정의되지 않은 및 null은 매우 유사합니다
</스크립트>
JavaScript에서 가장 중요한 유형은 객체와 어레이입니다. 6 장에서 개체를 소개하고 7 장에서 배열을 소개합니다. 객체와 배열은 JavaScript에서 매우 중요합니다. 이 책의 모든 곳에서 볼 수 있도록 너무 많이.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
// JavaScript에서 가장 중요한 유형은 객체입니다
// 객체는 이름/값 쌍의 모음 또는 매핑 된 값에 대한 문자열 값 모음입니다.
var book = {// 객체는 곱슬 괄호로 둘러싸여 있습니다.
주제 : "JavaScript", // 속성 "주제"의 값은 JavaScript입니다
FAT : TRUE // 속성의 가치는 사실입니다.
}; // 오른쪽 끝에있는 곱슬 괄호.
// "." 또는 "[]".
book.topic // => "JavaScript"
예약 [ "fat"] // => True 속성을 얻는 또 다른 방법,
book.author = "ahthw"; // 할당으로 새 속성을 만듭니다
book.content = {}; // {}는 빈 개체입니다. 속성이 없습니다
// javaScript는 또한 배열을 지원합니다 (배열별로 인덱스 된 목록)
var primes = [2, 3, 5, 7]; // 4 값의 조합이 있으며, 경계는 "[" ""]로 그려집니다.
Primes [0] // => 2 : 배열의 첫 번째 객체, 색인은 0입니다.
Primes.length // => 4, 배열의 요소 수입니다
Primes [primes.length-1] // => 7 : 배열의 마지막 요소
Primes [4] = 9; // 과제에 따라 새로운 요소를 추가합니다
Primes [4] = 11; // 할당별로 기존 요소를 변경합니다
val empty = []; // 비어있는 배열, 0 요소가 있습니다
빈.length // => : 0
// 배열과 객체에는 다른 배열 또는 객체를 포함 할 수 있습니다.
var point = [// 두 가지 요소가있는 배열
{x : 0, y : 0}, // 각 요소는 객체입니다
{x : 1, y : 1}
];
var data = {// 두 속성을 포함하는 객체입니다
시험 1 : [[1,2], [3,4]], // 각 객체는 배열입니다
시험 2 : [[2,3], [4,5]] // 배열의 요소도 배열입니다
};
</스크립트>
정사각형 브래킷을 통해 배열 요소를 정의하고 곱슬 괄호를 통해 객체 속성 이름과 속성 값 간의 매핑 관계를 정의하는 위 코드의 구문. 4 장은 구체적으로 도입됩니다. 표현식은 JavaScript의 문구입니다. 이 문구는 값을 얻기 위해 계산 될 수 있으며, "및"[] "를 통해 객체 속성 또는 배열 요소의 값을 참조하여 표현식을 형성 할 수 있습니다.
JavaScript에서 가장 일반적인 표현식 쓰기 방법은 다음 코드 (Oprator)와 같은 연산자입니다.
코드 사본은 다음과 같습니다.
// 연산자로서 운영자는 새 값을 생성합니다
// 가장 일반적인 산술 연산자입니다
3+2 // => 5 추가
3-2 // => 뺄셈
3*2 // => 배수
3/2 // => 디비전
포인트 [1] .x -Point [0] .X // => 복잡한 작업도 평소와 같이 작동 할 수 있습니다
"3"+"2"// => 32. 추가 작업 또는 문자열 스 플라이 싱을 완료 할 수 있습니다.
// JavaScript는 일부 산술 연산자를 약어로 정의합니다
var count = 0; // 변수를 정의합니다
카운트 ++; // 1 씩 증가합니다
세다--; // 1 만 감소
count += 2; // 자동 점수 2는 "count = count + 2;"와 동일합니다.
count *= 3 // 곱하기 3. "count = count *3;"과 같은 방식으로. 작성되었습니다
count // => 6 : 변수 이름 자체는 또한 표현식입니다.
// 평등 관계 연산자는 두 값이 동일한지 여부를 결정하는 데 사용됩니다.
// 연산자보다 적은 수준보다 크고, 불균형, 더 큰 작동 결과는 true 또는 false입니다.
var x = 2, y = 3; // 여기서 동일 부호는 비교적 동일하지 않은 할당을 의미합니다
x == y; // => false 동일
엑스! = y; // => 참
x <y; // => true :보다 적습니다
x <= y; // true는 그 이상 또는 동일합니다
x> y; // 거짓보다 더 큰
x> = y; // 거짓보다 크거나 동일합니다
"두"== "3"; // false 두 줄은 같지 않습니다
"두"> "3"; // 알파벳의 "TW"의 색인은 "th"보다 큽니다.
false == (x> y); // false = false;
// 논리 연산자는 병합되거나 부울 값을 역전시킵니다
(x == 2) && (y == 3); // => true 두 비교는 모두 사실입니다. && is "and"
(x> 3) || (y <3); // => 거짓 비교도 마찬가지입니다. || "또는"
! (x == y); // => 참! 역 검색을 나타냅니다
JavaScript의 "문구"가 표현 인 경우, 전체 문장을 진술이라고하며 5 장에서 자세히 설명됩니다.
위의 코드에서 세미콜론으로 끝나는 줄은 모두 진술입니다. 대략적인 방식으로 표현식은 하나의 값 (또는 포함 된 값과 관련이없는 값) 만 계산하지만 프로그램의 실행 상태를 변경합니다. 위에서, 가변 선언 진술 및 할당 진술이 나타났습니다. 다른 유형의 진술은 조건부 판단 및 루프와 같은 "제어 구조"입니다. 기능을 도입 한 후 관련 예제 코드를 제공합니다.
함수는 한 번에 여러 번 정의하고 사용할 수있는 이름과 매개 변수가있는 JavaScript 코드 스 니펫입니다. 8 장에서는 공식적으로 기능을 자세히 설명합니다. 객체 및 어레이와 마찬가지로 기능은이 책의 여러 곳에서 언급되어 있으므로 여기에 간단한 예제 코드가 있습니다.
코드 사본은 다음과 같습니다.
// 함수는 처리 매개 변수가있는 JavaScript 코드 세그먼트이며 여러 번 전송할 수 있습니다.
function plus1 (x) {// 매개 변수 x와 함께 plus1이라는 함수를 정의합니다.
x + 1을 반환합니다. // 통과 된 것보다 1 큰 값을 반환합니다.
} // 함수의 코드 블록은 곱슬 괄호로 감겨있는 부분입니다.
plus1 (y) //
var square = function (x) {// 함수는 변수에 할당 할 수있는 값입니다.
X*X를 반환합니다. // 함수의 값을 계산합니다
}; // 세미콜론은 할당 문의 끝을 나타냅니다
정사각형 (plus1 (y)); // 하나의 표현식에서 하나의 기능
함수와 객체가 함께 기록되면 함수는 "메소드"(메소드)로 프로그래밍됩니다.
코드 사본은 다음과 같습니다.
// 함수가 객체의 속성에 할당되면 호출합니다.
// "메소드", 모든 javaScript 객체에는 메소드가 포함되어 있습니다
var a = []; // 빈 배열을 만듭니다
a.push (1,2,3); // 배열에 객체를 푸시 () 메소드에 추가합니다
A.Reverse (); // 데이터 반전
// document.write (a)
// 하위 방법을 정의 할 수 있습니다. 키워드 "this"는 정의 방법입니다
//의 객체에 대한 참조, 여기에 예제는 위에서 언급 한 두 개의 포인트 위치 정보를 포함하는 배열입니다.
points.dist = function () {// 두 지점 사이의 거리를 계산하는 메소드 정의
var p1 = 이것 [0]; //이 키워드를 통해 현재 배열에 대한 참조를 가져옵니다.
var p2 = 이것 [1]; // 호출 된 배열의 첫 두 요소를 얻으십시오.
var a = p2.x- p1.y; // X 좌표 축의 거리
var b = p2.y -p1.y; // y 좌표 축의 거리
return math.sqrt (a * a + "우리는 그것을 부릅니다" + b * b); // 피타고라스 정리
}; //math.sqrt ()는 제곱근을 계산합니다
points.dist () // => 두 지점 사이의 거리를 찾으십시오
이제 통제 진술의 예를 제시하십시오. 여기서 예제 기능에는 신체에서 가장 일반적인 JavaScript 제어 문이 포함되어 있습니다.
코드 사본은 다음과 같습니다.
// 여기서 JavaScript 문은이 구문을 사용하여 조건부 판단 및 루프를 포함합니다.
// Java C ++ 및 기타 언어와 유사한 구문이 사용됩니다.
함수 abs (x) {// 절대 값 함수를 찾으십시오
if (x> = 0) {// if
반환 x; // true 인 경우이 코드를 실행하십시오
} else {// false execute
return -x;
}
}
기능 FactPrial (n) {// Factorial을 계산합니다
var product = 1; // 1의 값을 제품에 할당합니다
while (n> 1) {// value expression ()가 true 일 때 {} 컨텐츠를 실행하는 루프
제품 *= n; // 제품 = 제품 * 약어
N--; // n = n-1 쓰기 방법
} // 루프가 끝납니다
반품 제품; // 제품을 반환합니다
}
사실 (4) // => 24 1*4*3*2 document.write (사실 (4))
function factorial2 (n) {// 루프를 쓰는 또 다른 방법
var i, 곱 = 1; //
for (i = 2; i <= n; i ++) // i를 2에서 n으로 증가시킵니다.
제품 *= i; // 루프 바디에 코드 문장이 하나만 있으면 {}를 생략하십시오.
반품 제품; // 좋은 계승을 계산하고 반환합니다.
}
factorial2 (5) //document.write(5)) => 120 : 1*2*3*4*5
JavaScript는 객체 지향 프로그래밍 언어이지만 기존 페이지 객체와는 매우 다릅니다. 9 장에서는 객체 지향 JavaScript를 자세히 설명합니다. 이 장에는 많은 샘플 코드가 있으며이 책에서 가장 긴 장입니다.
간단한 예는 다음과 같습니다.이 코드는 JavaScript에서 클래스를 정의하여 2D면의 지오메트리 포인트를 나타내는 방법을 보여줍니다. 이 클래스에서 인스턴스화 된 객체에는 변경 사항에서 원점까지의 거리를 계산하는 r ()라는 메소드가 있습니다.
코드 사본은 다음과 같습니다.
// 새 포인트 객체를 초기화하려면 생성자를 정의합니다
기능 지점 (x, y) {// 생성자는 일반적으로 대문자로 시작합니다.
this.x = x; // 키워드는 초기화 된 인스턴스를 나타냅니다
this.y = y; // 객체의 속성으로 스토리지 함수 매개 변수
}
// 새 키워드와 생성자를 사용하여 인스턴스를 만듭니다
var p = 새로운 포인트 (1, 1); // 평면 형상에서 1, 1, 1,
// 생성자 프로토 타입 객체를 통해 값을 할당합니다
// 포인트 객체의 메소드를 정의합니다
point.prototype.r = function () {
return math.sqrt (// X Square + Y Square의 제곱근을 반환합니다.
this.x * this.x + // 이것은이 방법을 전달하는 객체를 나타냅니다.
this.y * this.y);
};
// 포인트 인스턴스 객체 p (및 모든 포인트 인스턴스 개체)는 메소드 r ()를 상속합니다.
pr () // => 1.4142135623730951 /document.write (pr ())
9 장은 첫 번째 부분의 본질입니다 . 후속 챕터는 산발적으로 확장되어 자바 스크립트 탐색이 끝날 것입니다.
10 장에서는 주로 정규 표현식으로 수행되는 텍스트 매칭 패턴에 대해 이야기합니다.
11 장 Gypsum JavaScript의 주요 언어 핵심 하위 집합 및 슈퍼 세트 .
클라이언트에 JavaScript의 내용을 입력하기 전에 12 장 우리는 웹 외부에서 두 개의 JavaScript 실행 환경 만 소개합니다.
2. 클라이언트 JavaScript
JavaScript 언어의 핵심 부분에 컨텐츠 지식 지점에는 많은 상호 참조가 있으며 지식 감각은 명확하지 않습니다. 클라이언트 측에서 JavaScript의 컨텐츠 오케스트레이션이 많이 바뀌 었습니다. 이 장에 따르면 웹 브라우저에서 JavaScript를 사용할 수 있습니다. (그러나이 책을 읽어 JavaScript를 배우고 싶다면 두 번째 부분에만 집중할 수는 없습니다) 13 장은 두 번째 부분의 첫 번째 부분으로, 웹 브라우저에서 JavaScript를 실행하는 방법을 소개합니다. 14 장에서는 웹 브라우저 스크립팅 기술을 설명하고 클라이언트 Javascipt의 중요한 글로벌 기능을 다룹니다.
예를 들어:
코드 사본은 다음과 같습니다.
함수 moveon () {
// 대화 상자를 통해 질문을합니다
var asure = 확인 ( "준비 되었습니까?");
// 확인을 클릭하면 브라우저에 새 페이지가로드됩니다.
if (답변) window.location = "http://www.baidu.com";
}
// 1 분 후이 함수를 실행합니다 (60000 밀리 초)
settimeout (Moveon, 300);
제 15 장은 JavaScript가 HTML 스타일을 조작하여 컨텐츠의 디스플레이 방법을 정의하는 방법을 알려줍니다 . 15 장의 내용은 더 실용적입니다. 스크립트를 통해 특정 웹 페이지 요소를 선택하는 방법, 요소의 내용이 수정 된 경우 HTML 요소의 속성을 설정하는 방법 및 문서에 새 노드를 추가하는 방법을 보여줍니다.
다음 예제 기능은 기본 기사 내용을 찾고 수정하는지 보여줍니다.
코드 사본은 다음과 같습니다.
// 문서의 지정된 정보와 지역 트리가 정보 디버깅 정보입니다.
//이 요소가 문서에 존재하지 않으면
기능 디버그 (MSG) {
// HTML 요소의 ID 속성을 보면 문서의 디버깅 부분을 찾습니다.
var log = document.getElementById ( "debuglog");
// 요소가 존재하지 않으면 a
if (! log) {
log = document.createElement ( "div"); // 새 div 요소를 만듭니다
log.id = "Debuglog"; // 각 요소의 ID에 값을 할당합니다
log.innerhtml = "<h1> 디버그 로그 </h1>"; // 초기 컨텐츠를 사용자 정의합니다
document.body.appendChild (로그); // 문서 끝에 추가하십시오
}
// <fre>에 메시지를 포함시키고 로그에 추가하십시오.
var pre = document.createelement ( "pre"); // 사전 요소를 만듭니다
var text = document.createelement (msg); // 텍스트 노드에 msg를 포함시킵니다
pre. AppendChild (텍스트); // 사전에 텍스트를 추가합니다
log.appendChild (pre); // 로그에 사전 추가
}
16 장에서는 JavaScript를 사용하여 요소의 스타일 및 클래스 속성을 사용하는 방법에 대해 이야기합니다 .
코드 사본은 다음과 같습니다.
함수 숨기기 (e, reflow) {// 요소 조작 및 jvaScript를 통해 요소를 숨기십시오.
if (reflow) {// 두 번째 매개 변수가 true 인 경우
e.style.display = "none"//이 요소를 숨기고 공간이 판매됩니다.
} 또 다른 {
e.style.visibility = "숨겨진"; // e를 숨기고, 필요한 공간을 유지합니다
}
}
함수 하이라이트 (e) {// CSS를 설정하여 E를 강조 표시합니다
if (! e.classname) e.classname = "highcss";
또 다른
e.classname += "highcss";
}
컨텐츠 및 CSS 스타일의 요소는 JavaScript를 통해 제어 할 수 있으며 문서 동작은 이벤트 처리기를 통해 정의 될 수도 있습니다. 이벤트 처리는 브라우저 센터에 등록 된 자바 스크립트 기능입니다. 특정 이벤트가 발생하면 브라우저는이 기능을 호출 할 수 있습니다.
일반적으로 우리가 집중하는 이벤트 유형은 마우스 클릭 및 키보드 키 이벤트입니다 (스마트 폰은 다양한 터치 이벤트입니다). 또는 브라우저가 문서로드를 완료하면 사용자가 창 크기를 변경하거나 사용자가 양식으로 데이터를 입력 할 때 사람 이벤트가 트리거됩니다.
17 장에서는 시간 핸들러를 정의하고 등록하는 방법 및 이벤트가 발생할 때 브라우저가 호출하는 방법에 대해 자세히 설명합니다.
이벤트 핸들러를 사용자 정의하는 가장 쉬운 방법은 콜백을 HTML에 의해 접두사에 바인딩하는 것입니다. 간단한 프로그램 테스트를 작성할 때 가장 실용적인 방법은 콜백을 "Onclick"핸들러에 바인딩하는 것입니다. 위의 Debug () 및 hide () 함수가 위의 Debug.js 및 Hide.js 파일에 저장되었다고 가정하면 Onclick 속성에 대한 이벤트 핸들러를 지정할 수 있습니다. 다음과 같이
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
// 문서의 지정된 정보와 지역 트리가 정보 디버깅 정보입니다.
//이 요소가 문서에 존재하지 않으면
기능 디버그 (MSG) {
// HTML 요소의 ID 속성을 보면 문서의 디버깅 부분을 찾습니다.
var log = document.getElementById ( "debuglog");
// 요소가 존재하지 않으면 a
if (! log) {
log = document.createElement ( "div"); // 새 div 요소를 만듭니다
log.id = "Debuglog"; // 각 요소의 ID에 값을 할당합니다
log.innerhtml = "<h1> 디버그 로그 </h1>"; // 초기 컨텐츠를 사용자 정의합니다
document.body.appendChild (로그); // 문서 끝에 추가하십시오
}
// <fre>에 메시지를 포함시키고 로그에 추가하십시오.
var pre = document.createelement ( "pre"); // 사전 요소를 만듭니다
var text = document.createelement (msg); // 텍스트 노드에 msg를 포함시킵니다
pre. AppendChild (텍스트); // 사전에 텍스트를 추가합니다
log.appendChild (pre); // 로그에 사전 추가
}
함수 숨기기 (e, reflow) {// 요소 조작 및 jvaScript를 통해 요소를 숨기십시오.
if (reflow) {// 두 번째 매개 변수가 true 인 경우
e.style.display = "none"//이 요소를 숨기고 공간이 판매됩니다.
} 또 다른 {
e.style.visibility = "숨겨진"; // e를 숨기고, 필요한 공간을 유지합니다
}
}
함수 하이라이트 (e) {// CSS를 설정하여 E를 강조 표시합니다
if (! e.classname) e.classname = "highcss";
또 다른
e.classname += "highcss";
}
</스크립트>
안녕하세요
<버튼 onclick = "숨기기 (this, true); 디버그 ( '숨기기 버튼 1');"> hide1 </button>
<버튼 onclick = "hide (this); debug ( 'Hide Button 2');"> hide2 </butotn>
다음 클라이언트 JavaScript는 이벤트를 사용하여 매우 중요한 이벤트를 제공합니다. "로드"이벤트는 첸 넥싱을 처리하기위한 이벤트를 등록합니다. 동료들은 또한 "클릭"이벤트 처리기를 등록하는보다 진보 된 방법을 보여줍니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
// "로드"이벤트는 문서가로드 된 후에 만 해고 될 수 있습니다.
// JavaScript 코드를 실행하기 전에로드 이벤트가 발생할 때까지 기다려야하는 경우
Window.onload = function () {
// 문서에서 모든 IMG 태그를 찾으십시오
var images = document.getElementsByTagName ( "IMG");
// 이미지를 통해 전송하고 각 노드의 클릭 이벤트에 핸들러를 추가합니다.
// 사진을 클릭 할 때 사진을 숨 깁니다
for (var i = 0; i <images.length; i ++) {
var imge = 이미지 [i];
if (imge.addeventListener) // 시간 핸들러를 등록하는 다른 방법
imge.addeventListener ( "클릭", 숨기기, 거짓);
else // 이전 IE8의 이전 작업과 호환됩니다
imge.attachevent ( "Onclick", Hide);
}
// 위의 등록 된 이벤트 처리 기능입니다
함수 숨기기 (EVNET) {
event.target.style.visibility = "숨겨진";
}
};
</스크립트>
15-17 장에서는 JavaScript를 사용하여 웹 페이지의 내용, 스타일 및 동작을 제어하는 방법 (이벤트 처리)을 알려줍니다 . 이 장에서는 API에 대해 약간 복잡하며 지금까지 브라우저 호환성이 좋지 않습니다. 그렇기 때문에 많은 JavaScript 프로그래머가 코딩 작업을 단순화하기 위해 "라이브러리"또는 "프레임 워크"를 사용하기로 선택합니다. 가장 인기있는 것은 jQuery입니다. 19 장에서는 jQuery 라이브러리를 소개합니다
코드 사본은 다음과 같습니다.
기능 디버그 (MSG) {
var log = $ ( "#debuglog");
if (log.length == 0) {
log = $ ( "<div id = 'debuglog'> <h1> debuglog </h1> </div>");
log.appendto (document.body);
}
document.write (로그)
log.append ($ ( "<pre/>"). 텍스트 (msg));
};
우리가 언급 한 두 번째 부분의 네 장은 모두 웹 페이지에서 논의됩니다. 후속 4 장은 매장에 중점을두고 웹 응용 프로그램으로 전환 할 것입니다. 이러한 내용은 내용을 작성하고 조작하는 방법에 대해서는 논의되지 않습니다. 스타일과 번성하는 스크립트는 웹 브라우저를 사용하여 문서를 렌더링합니다. 대신 웹 브라우저를 애플리케이션 플랫폼으로 사용하는 방법을 설명하십시오. 보다 복잡하고 세련된 클라이언트 웹 응용 프로그램 및 최신 브라우저를 지원하기위한 API를 설명합니다.
18 장에서는 JavaScript를 사용하여 HTTP 요청을 시작하는 방법을 설명합니다.
20 장에서는 데이터 저장 메커니즘과 클라이언트 애플리케이션의 세션 상태 유지 보수에 대해 설명합니다 . 21 장에서는 HTML5가 구동하는 새로운 세대의 응용 프로그램 API/네트워크 스토리지 그래픽을 다룹니다. 이들은 새로운 API를 지원하는 브라우저 개발을 기반으로합니다. Zhejiang은 JavaScript 프로그래머로서 가장 흥미로운 순간입니다. 지난 4 장에는 샘플 코드가 많지 않습니다. 다음 예제는이 새로운 API를 사용합니다.