JavaScript_javascript 기술 소개

이 글은 참고 매뉴얼이 아닙니다. JS에 대한 전반적인 이해를 돕기 위한 글입니다. JS의 자세한 구문과 활용이 필요하시면 w3school을 방문해 주세요

자바스크립트란 무엇인가요?

자바스크립트의 탄생

1995년경 세계 주류 대역폭은 28.8Kbps였으며, 현재 세계 평균 다운로드 대역폭은 21.9Mbps입니다(데이터 출처: http://www.netindex.com). 당시 네티즌들은 양식을 제출할 때마다 서버로부터 응답을 받기까지 오랜 시간을 기다려야 했고, 몇 분을 기다린 후에도 특정 항목이 누락되었다는 응답을 받을 수도 있었습니다. 사용자 경험을 향상시키기 위해 간단한 형태 판단을 실현할 수 있는 브라우저 클라이언트에 내장된 스크립트가 탄생했습니다.

JavaScript는 1995년 출시 예정인 Netscape Navigator 2.0(NN2.0)을 위해 Netscape에서 근무하던 Brendan Eich에 의해 처음 개발되었습니다. 당시에는 LiveScript라고 불렸습니다. 당시 매우 유명했던 Sun 회사와 협력 중이었기 때문에 당시의 추세인 Java 언어를 따라잡기 위해 이 언어를 JavaScript라고 명명했습니다.

JavaScript와 Java는 어떤 관계인가요?

이것은 JavaScript를 접한 일반인의 첫 반응이기도 하며, 이 언어에서 가장 비판받는 문제 중 하나이기도 합니다.

엄밀히 말하면 상관없습니다. 연결을 해야 한다면 함수, 객체 지향 아이디어, 판단 구조, 루프 문 등 중 일부가 동일할 수도 있지만 이는 분명히 Java의 특허가 아니라 프로그래밍 언어의 합의입니다.

JavaScript 표준화 및 개발 이력

JavaScript가 출시되었을 때 더 나은 사용자 경험을 제공하는 NN 브라우저가 브라우저 시장을 장악했고 Microsoft가 따라잡았습니다. IE3가 출시되었을 때 Microsoft는 JScript라는 이름으로 VBScript를 출시했는데 이는 실제로 Netscape의 JavaScript(현재 용어로 모방)와 크게 다르지 않았습니다. Microsoft와의 경쟁에 직면한 Netscape와 Sun은 JavaScript를 표준화하기 위해 JavaScript 초안을 ECMA(유럽 컴퓨터 제조업체 협회)에 제출했고 마침내 ECMAScript의 첫 번째 버전(ECMA-262)이 형성되었습니다.

흥미롭게도 Netscape가 JavaScript를 표준화한 이후 내부 문제가 발생하고 JavaScript 연구가 정체되었습니다. Microsoft는 이를 기회로 삼아 ECMA 사양을 준수하는 최초의 JavaScript 엔진을 내장한 IE4를 예정보다 1년 앞당겼습니다. . 또한 Microsoft 시스템은 점차 컴퓨터 운영 체제 시장을 점유하고 사전 설치된 IE 브라우저 시장 점유율이 점차 증가하며 NN은 계속해서 시장에서 축출되고 있습니다. 그러나 마이크로소프트가 최대 라이벌을 잃으면서 개발의욕을 잃었다. IE6~IE8은 인터페이스 렌더링과 스크립트 실행 측면에서 서로 호환되지 않아 브라우저 역사상 이상한 꽃이 되었고 프런트엔드의 저주가 됐다. 개발자.

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

1.v1 1997년 6월 초판
2.v2 1998년 6월 ISO/IEC16262 국제 표준
과 일치하도록 형식이 개정되었습니다. 3.v3 1999년 12월 강력한 정규식, 향상된 텍스트 체인 처리, 새로운 제어 지침, 예외 처리, 명확한 오류 정의, 숫자 출력 형식 지정 및 기타 변경 사항
4.v4는 아직 완성되지 않았습니다...클래스, 네임스페이스 등의 정의가 더 명확해질 수도 있습니다...
5.v5 2009년 12월 구조적 오류를 방지하기 위해 보다 철저한 오류 검사를 제공하는 데 사용되는 하위 집합인 "엄격 모드"가 추가되었습니다. 버전 3의 많은 모호한 사양을 명확하게 하고 해당 사양과 일관되게 다른 실제 구현의 동작을 수용합니다. getter 및 setter, JSON 지원, 개체 속성에 대한 보다 완전한 반영 등 일부 새로운 기능이 추가되었습니다.

****2004년 6월, 유럽 컴퓨터 제조업체 협회는 ECMAScript의 확장인 ECMA-357 표준을 발표했습니다. 이는 E4X(ECMAScript for XML)라고도 합니다.

JavaScript와 ECMAScript는 어떤 관계인가요?

사실 질문은 JavaScript, JScript, ECMAScript의 관계가 무엇인지가 되어야 합니다. 실제로 ECMAScript는 일반적인 사양이며 JScript는 이 사양에 따라 개발되었으며 ECMAScript와 호환되지만 ECMAScript 이상의 기능을 포함합니다. 그러나 어느 것이든 가장 먼저 등장하고 가장 큰 영향력을 미쳤다는 이유만으로 지금은 흔히 자바스크립트라고 불리며, 그 이름이 오늘날까지 전해지고 있다.

자바스크립트는 무엇을 할 수 있나요?

웹페이지에서 논리적 처리가 필요한 모든 작업은 JavaScript로 완료할 수 있습니다. 예:

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

• 양식 확인
•애니메이션 효과
•웹 게임
•카운트다운
•…

이 언어를 배우고 나면 많은 응용 프로그램을 찾을 수 있을 것이라고 여기에서는 자세히 설명하지 않겠습니다.

왜 JavaScript를 배워야 할까요?

1. 선택의 여지가 없기 때문에 JavaScript만이 일반적으로 사용되는 모든 브라우저를 제어할 수 있으며 JavaScript는 세상에서 가장 중요한 프로그래밍 언어 중 하나입니다. 웹 기술을 배우려면 JavaScript를 배워야 합니다.

2. JavaScript는 아름답고 좋은 언어이므로 배워야 합니다

자바스크립트의 포지셔닝

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

1. 자바스크립트는 컴파일이 필요하지 않고 자바스크립트 파싱 엔진에 의해 파싱되어 실행되는 경량의 스크립팅 언어입니다(일반적으로 브라우저를 의미하며 물론 노드와 같은 파서도 제외되지 않습니다)
2. JavaScript에는 비기능적 언어 기능, 기능적 언어 기능 및 동적 언어 기능이 있으며 구문이 매우 유연합니다
3. JavaScript는 객체지향 프로그래밍 언어입니다. JavaScript 세계에는 모든 것이 객체라는 말이 있습니다. 상속은 프로토타입 상속을 기반으로 합니다. (이전에 프로토타입 상속을 구체적으로 설명하는 글을 쓴 적이 있습니다.)
4. 자바스크립트는 C와 유사한 언어이므로 C를 배운 사람이라면 누구나 쉽게 자바스크립트를 시작할 수 있습니다
5. JavaScript 작성에는 컴파일러가 필요하지 않고 텍스트 편집기만 필요합니다(메모장은 필요하지 않으며 여기에서는 숭고한 텍스트를 적극 권장합니다)

자바스크립트에는 어떤 기능이 있나요?

이제 모든 사람이 사용하는 JavaScript는 DOM, BOM 및 ECMAScript(또는 핵심 js)의 세 부분으로 구성됩니다.

돔

여기에서는 모든 사람이 HTML과 CSS에 대해 어느 정도 이해하고 있다고 가정합니다. HTML과 CSS를 건너뛰고 이 글을 바로 읽으려면 여기를 먼저 읽어보세요.

DOM, 문서 객체 모델

XHTML에서는 태그를 올바르게 닫고 중첩해야 한다는 것을 알고 있습니다. 태그를 중첩하면 부모-자식 관계(또는 조상-하위 관계)가 생성됩니다. DOM은 DOM 트리를 쉽게 조작할 수 있는 수많은 API를 제공합니다. 나중에 JS DOM에 관해 구체적으로 기사를 쓸 예정입니다.

DOM을 사용하면 페이지 콘텐츠를 동적으로 수정하고 스타일을 조정할 수 있습니다. 이는 JS의 다양성을 보여주는 것이기도 합니다.

봄

BOM, 브라우저 객체 모델

본체가 브라우저가 된다는 점을 제외하면 DOM과 유사합니다. 브라우저는 또한 다수의 API를 제공하며 그 중 일부는 JS에 공개되어 브라우저 창을 작동하는 방법을 제공합니다.

일반적인 용도:

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

1. 새 브라우저 창을 팝업하는 기능
2. 브라우저 창을 이동하고 닫고 크기를 변경하는 기능
3. 웹 브라우저의 상세 정보를 제공할 수 있는 네비게이션 객체
4. 브라우저가 로드한 페이지에 대한 자세한 정보를 제공할 수 있는 로컬 개체
5. 사용자의 화면 해상도에 대한 자세한 정보를 제공하는 화면 개체
6. 쿠키 지원
7. Internet Explorer는 BOM을 확장하여 ActiveX 개체 클래스를 포함하고 ActiveX 개체는 JavaScript를 통해 구현할 수 있습니다.

ECMAScript 코어

JS 코어라고도 하며, 무엇이라고 부르든 의미는 동일합니다. 모두 변수 정의, 가비지 수집, 구문, 범위 등을 포함하여 JS 언어의 핵심 구성 요소를 나타냅니다. 이러한 API만 사용해야 하는 위에서 언급한 DOM 및 BOM과 달리 ECMAScript 코어는 언어의 본질이며 지속적인 연구가 필요합니다. 다음 장에서는 JS의 구문에 대해 더 자세히 설명합니다.

JavaScript 사용

인라인

인라인은 태그로 작성된 JavaScript입니다. 예를 들어 HTML로 작성합니다.

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

클릭

버튼을 클릭하면 "클릭하세요"라는 팝업 상자가 나타납니다.
그러나 이는 유지 관리에 큰 문제를 가져오기 때문에 강력히 권장되지 않습니다. 이벤트를 변경해야 할 때마다 먼저 요소를 찾은 다음 해당 자바스크립트 콘텐츠를 수정해야 하며 이러한 자바스크립트 코드는 재사용할 수 없습니다.

또한 태그에 작성된 이벤트는 'on'이 있어야 하며 js는 이벤트를 통해서만 태그에 도입될 수 있으며 간단한 js 표현식은 작성할 수 없습니다

내장형

임베디드는 HTML의 스크립트 태그에 js 코드를 작성하는 것을 의미합니다. 방법은 다음과 같이 HTML에 새 스크립트 태그를 추가한 다음 태그 중간에 js 코드를 삽입하는 것입니다.

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

           클릭
본문>

var btn = document.getElementById("btn");

         btn.onclick = function() {<br>
Alert("클릭하세요");<br>
}<br>
 <br>

인라인을 사용하면 인라인보다 훨씬 더 자유롭게 작성할 수 있고, 따옴표 이스케이프 문제도 피할 수 있으며, 유지 관리도 더 쉬워집니다. 하지만 이 코드는 이 페이지에만 적용 가능하고 다른 페이지에서는 사용할 수 없다는 문제도 있습니다.

외부링크

외부링크 방식은 위 두 형태의 단점을 모두 해결해줍니다. 방법은 다음과 같습니다.

먼저 새 파일을 만들고 접미사를 .js로 변경하세요. 예를 들어 새 click.js 파일을 만든 다음 방금 작성한 인라인에 js 코드를 복사합니다(스크립트 태그는 포함되지 않음)

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

var btn = document.getElementById("btn");
btn.onclick = function() {
​​ Alert("클릭하세요");
}

그런 다음 스크립트 태그를 통해 HTML에

을 소개합니다.

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

           클릭
본문>

이것의 장점은 동일한 js 코드를 여러 HTML 페이지에서 공유할 수 있다는 점입니다. 단점은 파일 수가 늘어나고 요청에 소요되는 시간이 늘어나므로 코드의 재사용성이 향상되어야 하며, js 파일은 결국 병합되어야 합니다(다른 js 파일을 하나의 js 파일로 병합)