데이터 js 객체가 생성되는 위치입니다. 중첩된 개체, 배열 또는 JSON에 액세스하고 처리하려면 어떻게 해야 합니까? 데이터 구조의 "깊이"를 알 수 없는 경우 어떻게 해야 합니까?
JavaScript에는 세 가지 유형의 객체가 있습니다. 내장 객체, 브라우저 객체, 프로그래머가 직접 생성한 객체입니다(그림 2.1).
쌀. 2.1. JavaScript의 객체
이러한 각 유형에는 고유한 목적과 특성이 있습니다.
내장 객체아래에는 해당 객체를 먼저 정의하지 않고도 JavaScript 스크립트에서 속성과 메서드를 사용할 수 있는 내장 객체가 나열되어 있습니다.
여기서 *는 Microsoft JScript 버전 3.0에 정의된 기본 제공 개체를 나타냅니다. 이 버전은 Microsoft Internet Explorer 브라우저 버전 4.0에서 구현됩니다.
내장 객체는 문자열, 달력 날짜, 배열, 숫자 등을 사용하여 다양한 작업을 수행하는 데 매우 편리합니다. 이를 통해 프로그래머는 문자열 변환이나 수학 함수 계산과 같은 다양한 일상적인 작업을 수행할 필요가 없습니다.
내장 객체로 작업하는 방법은 무엇입니까?
충분히 간단합니다. 프로그램은 개체의 인스턴스를 만든 다음 개체의 속성과 메서드에 액세스합니다.
실제적인 예로, 현재 날짜와 시간을 표시하는 HTML 문서를 생각해 보십시오. 이 문서의 소스 텍스트는 목록 2.1에서 찾을 수 있습니다.
목록 2.1. 파일 2장/날짜/date.html
날짜 및 시간 표시 날짜 및 시간 표시여기에서 JavaScript 스크립트는 모든 C++ 팬에게 친숙한 new 키워드와 매개변수 없이 Date 생성자를 사용하여 Data 객체를 생성합니다.
var dt; dt = 새로운 날짜();이러한 방식으로 생성된 데이터 개체는 사용자의 현재 로컬 날짜(해당 HTML 문서를 다운로드한 웹 서버가 아님)로 초기화됩니다.
다음 줄은 날짜 텍스트 문자열을 생성합니다.
szDate = "날짜: " + dt.getDate() + "." + dt.getMonth() + "." +dt.getYear();여기에서는 각각 getDate, getMonth 및 getYear 메소드를 사용하여 달력 날짜, 월 및 연도 값을 얻습니다. 이러한 메소드는 현재 날짜를 포함하는 dt 객체에서 호출됩니다.
날짜 텍스트 문자열은 문서 객체에 정의된 쓰기 메소드를 사용하여 HTML 문서로 출력됩니다.
document.write(szDate);우리는 이 책의 첫 번째 장에 제공된 예제 시나리오에서 이미 이 방법을 사용했습니다.
Date 객체에는 현재 시간에 대한 정보도 포함되어 있습니다. 이 정보는 getHours, getMinutes 및 getSeconds 메소드(각각 시, 분, 초)를 사용하여 표시하기 위해 검색됩니다.
document.write("시간: " + dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds());Microsoft Internet Explorer 버전 4.0 브라우저 창에서 볼 때 HTML 문서의 모양은 그림 1에 나와 있습니다. 2.2.
쌀. 2.2. 현지 날짜 및 시간 보기
나중에 자료를 연구하면서 다른 내장 객체의 사용법을 보여 드리겠습니다.
브라우저 개체JavaScript 관점에서 보면 브라우저는 계층적으로 구성된 개체 모음으로 보입니다. 이러한 개체의 속성과 메서드에 액세스하면 브라우저 창, 이 창에 로드된 HTML 문서는 물론 HTML 문서에 배치된 개별 개체에 대해 다양한 작업을 수행할 수 있습니다. 예를 들어, HTML 문서를 로드하여 새 브라우저 창을 만들고, HTML 문서의 텍스트를 동적으로 생성하고, HTML 문서에 정의된 양식 필드에 액세스하는 등의 작업을 수행할 수 있습니다.
브라우저 객체는 JavaScript가 사용자 및 브라우저 창에 로드된 HTML 문서는 물론 브라우저 자체와 상호 작용하는 인터페이스입니다. JavaScript에서는 이러한 개체에 해당하는 클래스를 기반으로 새 클래스를 만들 수 없지만 브라우저 개체의 속성과 메서드를 사용할 수 있습니다.
브라우저 개체 계층브라우저 개체의 계층 구조는 그림 1에 개략적으로 표시되어 있습니다. 2.2.
쌀. 2.2. 브라우저 개체 계층
창 개체는 계층 구조의 루트에 있습니다. HTML 문서가 브라우저 창에 로드되면 해당 개체 내에 문서, 상위, 프레임, 위치 및 상단 등의 다른 개체가 생성됩니다.
프레임이 있는 HTML 문서를 브라우저 창에 로드하면 각 프레임마다 별도의 창이 생성되고 이 창은 창 개체로 생성됩니다.
문서 개체에는 다른 개체가 포함되어 있으며 그 구성은 브라우저 창에 로드된 HTML 문서에 의해 완전히 결정됩니다. 이는 양식, 다른 HTML 문서에 대한 링크 또는 동일한 문서 내의 로컬 링크, 문서의 URL을 정의하는 객체 등이 될 수 있습니다.
문서에 양식이 포함된 경우 해당 양식은 계층적 개체 집합으로도 표시됩니다. 양식 개체에는 버튼, 스위치, 텍스트 정보 입력 필드 등의 개체가 포함될 수 있습니다.
위에 나열된 개체의 속성에 액세스함으로써 JavaScript 스크립트는 제목과 같은 HTML 문서의 다양한 특성을 결정할 수 있습니다. HTML 문서에 정의된 양식 필드의 내용뿐만 아니라 문서에 있는 모든 링크에 액세스할 수 있습니다.
객체와 관련된 이벤트브라우저 개체에 관해 매우 중요한 사항을 하나 더 만들어 보겠습니다.
이러한 각 개체는 JavaScript 스크립트에서 처리가 가능한 특정 이벤트 집합과 연결됩니다.
예를 들어 onLoad 및 onUnload 이벤트는 window 개체와 연결됩니다. 이러한 이벤트 중 첫 번째는 브라우저가 창과 그 안에 있는 모든 프레임(해당 프레임이 창에 정의된 경우) 로드를 완료할 때 발생합니다. 두 번째 이벤트는 사용자가 브라우저 창을 닫거나 다른 문서로 전환하여 문서를 종료할 때 발생합니다.
예를 들어 JavaScript 스크립트는 사용자에게 환영 메시지를 표시하거나 onLoad 이벤트를 처리할 때 추가 정보를 묻는 메시지를 표시할 수 있습니다. 창이 종료되면(onUnload 이벤트가 발생하는 경우) 스크립트는 해당 창과 관련된 모든 리소스를 해제하거나 모니터 화면에 메시지를 표시할 수 있습니다.
이벤트는 다른 브라우저 개체와도 연결됩니다. 이러한 개체를 설명할 때 이에 대해 이야기하겠습니다.
프로그래머가 만든 클래스를 기반으로 하는 개체C++ 프로그래밍 언어 초보자를 위한 수많은 책에서는 클래스를 일반 필드 외에도 이 데이터 작업을 위해 함수 메서드가 정의되는 데이터 구조로 상상하는 것을 제안합니다. 따라서 JavaScript 언어에서는 자신만의 클래스를 만드는 데 정반대의 방법이 사용됩니다.
JavaScript 클래스는 데이터 역할을 하는 속성을 정의하는 함수로 생성됩니다. 메소드의 경우 함수로도 정의되지만 별도로 정의됩니다.
구체적인 예를 들어 보겠습니다.
가상의 전화 데이터베이스 항목을 보관하기 위한 클래스를 만들어야 한다고 가정해 보겠습니다. 이 클래스에서는 이름, 성, 전화번호, 주소를 저장하기 위한 속성과 무단 액세스로부터 보호되는 레코드에 대한 특수 속성을 제공해야 합니다. 추가적으로, 그림 1과 같이 객체의 내용을 표 형식으로 표시하도록 설계된 방법의 개발이 필요합니다. 2.3.
쌀. 2.3. 게시물 내용 보기
먼저 myRecord라는 자체 클래스를 만들어 보겠습니다. 아직 메소드가 없을 수도 있습니다. 나중에 추가하겠습니다.
필수 클래스는 다음과 같이 생성됩니다.
function myRecord(이름, 가족, 전화, 주소) ( this.name = 이름; this.family = 가족; this.phone = 전화; this.address = 주소; this.secure = false; )우리 클래스에 대한 설명이 생성자 함수에 지나지 않는다는 것을 쉽게 알 수 있습니다. 생성자 매개변수는 클래스를 기반으로 객체가 생성될 때 객체의 속성을 설정하기 위한 것입니다.
속성은 이름에 대한 간단한 참조와 그 뒤에 오는 this 키워드로 정의됩니다. 여기서 이 키워드는 생성자가 호출되는 개체, 즉 생성되는 개체의 속성을 문이 참조한다는 것을 나타냅니다.
생성자는 secure라는 속성을 false로 초기화합니다. 해당 매개변수는 생성자에 제공되지 않으며 이는 상당히 허용됩니다.
특정 클래스를 사용하는 방법은 무엇입니까?
이 클래스를 기반으로 임의 개수의 객체를 생성할 수 있습니다. 아래에는 myRecord 클래스를 기반으로 두 개의 개체 rec1 및 rec2가 생성되는 JavaScript 스크립트의 일부가 나와 있습니다.
var Rec1; var Rec2; rec1 = new myRecord("Ivan", "Ivanov", "000-322-223", "Malaya Bolshaya st., 225, apt. 226"); rec2 = new myRecord("페트르", "페트로프", "001-223-3334", "Bolshaya Malaya st., 552, apt. 662"); Rec2.secure = 사실;객체는 C++ 및 Java로 프로그램을 작성한 사람들에게 친숙한 new 연산자를 사용하여 생성됩니다. 여기서는 생성자에 매개변수를 전달하여 생성된 객체의 속성을 초기화합니다.
secure라는 속성의 경우, rec2 객체에서는 후자가 생성된 후 초기화됩니다. true 값이 기록됩니다. Rec1 객체의 보안 속성을 변경하지 않았으므로 false로 저장됩니다.
이제 우리의 임무는 우리가 정의한 클래스에 printTableHead, printTableEnd 및 printRecord라는 새 메서드를 추가하는 것입니다. 이 메소드 중 처음 두 개는 각각 테이블의 시작 및 끝 부분과 레코드 내용을 반영하는 세 번째 테이블 행을 HTML 문서로 출력합니다.
myRecord 클래스의 새로운 정의는 아래에 요약되어 있습니다.
function printTableHead() ( . . . ) function printTableEnd() ( . . . ) function printRecord() ( . . . ) function myRecord(이름, 가족, 전화, 주소) ( this.name = 이름; this.family = family ; this.phone = 전화; this.secure = false;여기에서는 생성자를 정의하기 전에 클래스의 함수 메서드에 대한 정의를 배치했습니다. 또한 생성자에 새 속성 정의가 추가되었습니다.
this.printRecord = printRecord; this.printTableHead = printTableHead; this.printTableEnd = printTableEnd;클래스가 이런 방식으로 정의되면 객체를 생성하고 특정 메서드를 호출할 수 있습니다.
rec1.printTableHead(); rec1.printRecord(); rec1.printTableEnd(); rec2.printTableHead(); Rec2.printRecord(); rec2.printTableEnd();위의 그림 1에 표시된 문서로 돌아갑니다. 2.3에서는 전체 소스 텍스트를 제공합니다(목록 2.2).
목록 2.2. 파일 Chapter2/NewObject/NewObject.html
항목 보기 항목 보기우리는 관례대로 HTML 문서의 헤더 영역에 새로운 클래스 myRecord의 정의와 해당 메서드를 배치했습니다.
printTableHead 메소드는 HTML 문서의 테이블 헤더를 인쇄합니다. 이 헤더의 모양은 개체 속성의 내용에 따라 달라집니다.
먼저 printTableHead 메소드는 보안 속성을 확인하고 다음 키워드를 사용하여 해당 값을 가져옵니다.
var szSec = ""; if(this.secure) szSec = "(보안)"; else szSec = " (보안되지 않음)".fontcolor("red");여기서 이 키워드는 printTableHead 메소드가 호출된 객체의 속성을 사용해야 함을 의미합니다.
secure 속성의 내용이 true이면 문자열 "(Secure)"가 텍스트 변수 szSec에 기록됩니다. false인 경우 이 변수에 "(Unsecure)" 문자열이 기록되고 문자열 색상이 빨간색으로 설정됩니다.
JavaScript에서는 모든 텍스트 문자열(리터럴 포함)이 내장 String 클래스의 객체이므로 이 클래스에 정의된 메서드를 호출할 수 있습니다. 특히, Fontcolor 메소드를 사용하면 우리가 사용한 선의 색상을 설정할 수 있습니다.
다음으로 printTableHead 메소드는 명령문을 HTML 문서로 출력합니다.
"); }
클래스에 정의된 마지막 메소드는 printRecord입니다. 방금 설명한 printTableHead 함수에 의해 HTML 문서에 정의된 테이블의 행으로 개체의 처음 네 가지 속성의 내용을 인쇄합니다.
객체 속성의 내용은 기울임꼴로 인쇄되며, 이를 italics 메소드라고 합니다:
document.write("위에서 myRecord 클래스의 정의를 이미 설명했습니다.
이제 HTML 문서의 본문에 있는 스크립트의 두 번째 부분으로 이동하겠습니다.
여기서는 myRecord 클래스를 기반으로 두 개의 객체인 rec1과 rec2를 생성한 다음, rec2 객체의 secure 속성을 true로 설정합니다.
보시다시피, 자체 클래스를 사용하면 가상 전화 데이터베이스의 기록 내용을 초기화하고 표시하는 작업이 크게 단순화되었습니다. 실제로 우리는 이 작업을 클래스에 미리 정의된 여러 메서드를 호출하는 것으로 줄였습니다.
이 챕터에서는:
JavaScript에는 스크립트를 작성할 때 사용할 수 있는 사전 정의된 개체가 많이 있습니다. 여기에는 Array, Boolean, Date, Function, Math, Number, RegExp 및 String과 같은 객체와 기본 객체 Object가 포함됩니다. 이전 버전의 언어에는 문서 개체(창, 문서)도 포함되어 있었지만 이제는 JavaScript 언어의 핵심에서 제외되고 DOM(문서 개체 모델)의 정의에 속합니다. 나중에 논의됩니다. 그러나 이러한 개체(문서 및 창)의 일부 속성은 이미 우리에게 익숙합니다.
그러나 현대 개념의 내장 JavaScript 객체로 돌아가 보겠습니다. Math 및 Date를 제외한 모든 내장 객체에는 생성자 및 프로토타입과 같은 속성이 있습니다. 기존 개체에 새 속성을 추가하는 데 사용되며 Function 개체의 컨텍스트에서 설명됩니다.
물체모든 JavaScript 객체는 Object 객체의 자손입니다. 따라서 이 개체의 모든 속성과 메서드는 다른 JavaScript 개체에서도 사용할 수 있습니다.
Object 개체에는 생성자와 프로토타입이라는 두 가지 속성만 정의되어 있습니다. 생성자 속성은 객체의 프로토타입, 즉 이름뿐만 아니라 전체 함수를 생성하는 함수를 정의합니다. 즉, 일부 테스트 개체가 정의되고 이 tmp 개체의 인스턴스가 생성될 때 옵션을 고려하십시오.
함수 test(version) ( this.version = version; ) tmp = new test(1);
이 경우 생성자 속성을 사용하면 테스트 개체의 소스 코드를 볼 수 있습니다(그림 4.6).
경고(tmp.constructor);
쌀. 4.6.
그러나 이 속성에는 한 가지 제한 사항이 있습니다. 내장된 JavaScript 개체의 코드를 인쇄할 수 없습니다. 이 경우 출력 정보는 프로토타입 함수의 이름과 문자열 ""로 제한됩니다.
프로토타입 속성의 경우 현재 개체의 프로토타입 기능에 액세스할 수 있습니다. 이 속성을 사용하면 객체 프로토타입의 특성을 변경할 수 있습니다. 예를 들어 프로토타입 속성을 사용하여 test 유형의 객체에 대한 새 속성을 추가할 수 있습니다.
Test.prototype.comment = "새 주석 속성";
이제 이미 생성된 tmp 인스턴스를 포함하여 test 유형의 모든 개체에는 다음 확인을 적용하여 쉽게 확인할 수 있는 comment 속성이 있습니다.
경고(tmp.comment);
게다가 비슷한 방식으로 내장 JavaScript 객체를 현대화하는 것도 가능합니다. 예를 들어 설명과 같은 속성을 배열에 추가해야 하는 경우 Array 객체의 프로토타입을 참조하고 해당 속성을 추가하여 이를 수행할 수 있습니다(물론 현재 시나리오 내에서만 가능합니다!).
Array.prototype.description = "";
메소드의 경우 Object 객체에 대해 정의된 메소드가 5개 정도 더 많습니다. 이는 toSource, toString, watch, unwatch 및 valueOf이며, 이에 대한 간략한 설명은 표 4.10에 나와 있습니다.
toString 및 valueOf 메소드는 거의 모든 내장 JavaScript 객체에 적용되며 일반적으로 변환이 필요할 때 인터프리터에 의해 자동으로 호출됩니다. toSource 메소드의 경우 실제로는 생성자 속성에 대한 작업만 수행합니다.
Netscape 4 브라우저(현재 Mozilla에서도 지원됨)에 도입된 독점 확장인 나머지 감시 및 감시 해제 방법은 스크립트 디버깅을 위한 것입니다. 프로그램 디버깅 문제는 이 발행물의 틀 내에서 고려되지 않으므로 이러한 방법을 설명하는 것은 의미가 없습니다. 그러나 혹시라도 Sea Monkey(Firefox 브라우저는 아님)에 스크립트 디버거인 JavaScript Debugger가 있다는 점을 참고하세요.
배열 객체배열 변수에는 편의를 위해 단일 변수로 표시되는 정렬된 값 집합이 포함됩니다. 우리는 이미 배열을 한 번 이상 접했습니다(인수 배열만 기억하세요). 이제 배열의 모든 속성과 적용의 미묘함을 이해할 차례입니다.
다른 프로그래밍 언어와 달리 JavaScript에는 배열 데이터 유형이 없습니다. 그러나 이러한 제한은 미리 정의된 배열 객체인 Array를 사용할 수 있다는 사실로 인해 극복됩니다. 배열 객체를 생성하려면 다음 구문 중 하나를 사용할 수 있습니다.
ArrayName = 새 Array(element1, element2, ... elementN) ArrayName = 새 Array(ArrayLength)
첫 번째 경우에는 배열의 모든 구성 요소가 나열되고 두 번째 경우에는 요소 수가 간단히 표시됩니다. 배열을 선언할 때 리터럴을 사용하는 것도 가능합니다:
컴퓨터 = ["PC", "Mac", "Sun"];
배열 요소를 값으로 채우고 일반적으로 배열 요소에 액세스하려면 요소 인덱스를 사용할 수 있습니다. 배열 요소의 인덱스는 0부터 시작한다는 점을 고려해야 합니다.
Var 색상 = new Array(3); 색상 = "빨간색"; 색상 = "파란색"; 색상 = "녹색";
배열을 선언할 때 배열을 직접 채우려면 JavaScript 언어에서 제공하는 기능을 사용하는 것이 편리한 경우가 많습니다.
Var colors = new Array("빨간색","파란색","녹색");
배열의 길이(배열을 구성하는 요소의 수)를 확인하려면 length 속성을 사용해야 합니다.
Var NumColors = colors.length;
length 속성 외에도 JavaScript는 배열 작업을 위한 여러 가지 다른 속성과 메서드도 제공합니다. 특히, Array 객체의 속성에는 길이 외에도 모든 객체에 공통적으로 사용되는 생성자와 프로토타입은 물론 정규식과 함께 배열을 사용하기 위한 인덱스 및 입력 속성도 포함됩니다.
메소드의 경우 표준 toSource, toString 및 valueOf 외에도 배열에는 표 4.11에 나열된 자체 메소드가 12개 이상 제공됩니다.
| 연결 | 두 배열을 병합하고 새 배열을 반환합니다. |
| 가입하다 | 모든 배열 요소를 하나의 문자열로 연결합니다. |
| 팝 | 배열에서 마지막 요소를 제거하고 반환합니다. |
| 푸시 | 배열 끝에 하나 이상의 요소를 추가하고 새 길이를 반환합니다. |
| 뒤집다 | 배열의 요소를 이동하여 첫 번째 요소가 마지막 요소가 되고 그 반대의 경우도 마찬가지입니다. |
| 옮기다 | 배열의 첫 번째 요소를 제거하고 반환합니다. |
| 일부분 | 배열 요소의 일부를 제거하고 새 배열을 반환합니다. |
| 접착 | 배열에서 요소를 추가 및/또는 제거합니다. |
| 종류 | 배열 요소를 알파벳순으로 정렬합니다. |
| 변속 해제 | 배열의 시작 부분에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다(MSIE 5.5 및 6에서 이 메서드는 아무것도 반환하지 않음). |
몇 가지 방법을 더 자세히 살펴보겠습니다. 따라서 concat 메소드를 사용하면 2개의 배열을 하나로 결합할 수 있습니다.
Var a = new Array("A1", "A2"); var b = new Array("B1", "B2"); var ab = a.concat(b);
여기서 변수 ab는 서로 붙어 있는 두 배열의 4개 요소를 모두 포함하는 배열이 됩니다. 이제 이러한 배열에 조인 메서드를 적용하면 결과는 이 배열의 모든 요소를 쉼표로 구분하여 포함하는 문자열이 됩니다.
Str = ab.join(); // str = "A1,A2,B1,B2"를 얻습니다.
pop 메소드의 경우 동일한 배열에 적용하면 "B2"라는 답이 나오며 배열은 처음 세 값으로 잘립니다. 반면에 Shift 메소드는 첫 번째 요소(이 경우 "A1")를 반환하고 배열에서도 동일한 작업을 수행합니다. 유일한 차이점은 나머지 요소가 앞으로 이동한다는 점입니다.
이러한 메서드와 다른 배열 메서드가 어떻게 작동하는지 더 잘 이해하려면 목록 4.3의 다음 예를 살펴보세요.
목록 4.3. 배열 작업
동일한 예를 array.html 파일에서 볼 수 있으며 동시에 브라우저에서 해당 작업의 모든 결과를 볼 수 있습니다(그림 4.7 참조).
쌀. 4.7. splice 메소드 사용 결과: 반환된 배열 및 변경 사항
배열은 다차원일 수도 있습니다. 배열의 요소는 다른 배열이 될 수 있습니다. 이 경우 배열 요소에 액세스하려면 다음 구문을 사용하십시오.
Array2D="요소 0,0" Array2D="요소 0,1" ... Array2D[N][N]="요소 N,N"
2차원 배열을 채우고 출력하는 예제는 arrays.html 파일에서 찾을 수 있으며, 거의 모든 배열 메서드에 대한 대화형 예제도 있습니다.
부울 객체부울 객체는 동일한 이름의 데이터 유형에 대한 래퍼입니다. 부울 유형의 객체를 정의하려면 다음 구문을 사용하십시오.
BooleanObj = 새 부울(값)
여기서 값은 필요한 경우 true 또는 false로 변환되는 초기화 표현식입니다. 0, null, false, NaN, 정의되지 않음, 빈 문자열 등의 값을 지정하면 Boolean 객체의 초기화 결과는 false가 되고, 다른 값의 경우 결과는 true가 됩니다.
기본 부울 값인 true 및 false를 부울 객체의 true 및 false 데이터 유형과 혼동해서는 안 됩니다. 예를 들어 변수 x를 선언하고 false로 초기화된 부울 객체의 값을 할당하면 비교 시 여전히 true로 평가됩니다.
X = new Boolean(false); // (x)를 비교하면 참이 됩니다.
동시에 기본 데이터 유형 false를 변수에 할당하면 정확히 다음을 받게 됩니다.
X = 거짓; // (x)를 비교하면 false가 됩니다.
이 객체의 실제 사용에 관해서는 다른 유형의 값을 부울로 변환하는 함수로 사용할 수 있습니다.
A = 100; x = 부울(a); // x는 (x)인 경우 참이 됩니다 (...)
그러나 실제로는 필요한 경우 JavaScript 인터프리터가 이러한 변환을 자동으로 수행하기 때문에 이 작업을 수행할 가능성이 거의 없습니다. 위의 예에서는 즉시 "if (a) ..."라고 쓸 수 있으며 필요한 변환이 필요합니다. 이 경우에는 어떤 경우에도 수행됩니다.
날짜 객체JavaScript는 날짜 작업을 위한 특별한 데이터 유형을 제공하지 않습니다. 그러나 배열과 마찬가지로 특별한 데이터 개체가 있습니다. 다음 방법 중 하나를 사용하여 날짜 객체를 생성할 수 있습니다.
새 날짜() 새 날짜(밀리초) 새 날짜("Date_as_string")
첫 번째 경우에는 Date 객체가 현재 시간으로 생성되고, 두 번째 경우에는 1970년 1월 1일 이후 경과된 밀리초 수를 지정해야 합니다. 날짜가 문자열로 지정되면 "2005년 2월 28일" 형식이어야 합니다. 연도, 월, 일 등의 정수 값을 사용하여 날짜를 설정할 수도 있습니다.
새 날짜(년, 월, 일 [, 시, 분, 초, 밀리초])
물론 이 경우에는 초와 밀리초를 지정하지 않아도 됩니다. 특히 이전 버전의 브라우저에서는 밀리초가 지원되지 않았기 때문입니다. 또한 버전 1.3 이전의 JavaScript는 1970년 1월 1일 이전 날짜를 지원하지 않습니다. 줄에 표시된 값의 형식은 연도가 4자리 숫자(2자리 숫자를 지정하면 1900이 추가됨)이고 월 숫자는 0( 1월) ~ 11일(12월), 날짜는 0 ~ 31입니다. 따라서 시간 값도 제한됩니다. 시간의 경우 0 ~ 23의 정수, 초 및 분의 경우 0 ~ 59, 밀리초 - 0부터 999까지. 따라서 객체 Date 유형의 값으로 2005년 5월 9일을 지정하려면 다음과 같이 작성해야 합니다.
Var anyday = new Date(2005, 5, 9);
현재 날짜 및 시간 값을 가져와야 하는 경우에는 매개변수가 전혀 필요하지 않습니다.
Var now = new Date();
JavaScript 1.3부터 날짜 범위는 1970년 1월 1일 전후로 최대 1억일까지 가능합니다(총합으로 거의 55만년입니다!). 동일한 버전에서는 세기 변경과 관련된 오류를 방지하기 위해 연도를 항상 4자리 형식으로 표시해야 한다는 요구 사항이 있었습니다.
Date 개체를 사용하려면 생성자와 프로토타입이라는 두 가지 속성과 원하는 날짜 부분(연도, 월, 일, 시간)을 선택하고 이를 하나의 형식으로 표시할 수 있는 다양한 메서드가 있습니다. 등. 이들 모두는 표 4.12에 나열되어 있습니다.
| get날짜() | 해당 월의 날짜를 현지 시간으로 반환합니다. |
| getDay() | 현지 시간으로 요일을 반환합니다. |
| getFullYear() | 현지 시간으로 연도를 반환합니다. |
| getHours() | 현재 시간(시)을 현지 시간으로 반환합니다. |
| get밀리초() | 현재 시간(밀리초)을 현지 시간으로 반환합니다. |
| getMinutes() | 현재 시간(분)을 현지 시간으로 반환합니다. |
| get월() | 현재 시간(월)을 현지 시간으로 반환합니다. |
| getSeconds() | 현재 시간(초)을 현지 시간으로 반환합니다. |
| getTime() | 현재 시간을 현지 시간의 수량으로 반환합니다. |
| getTimezoneOffset() | 현지 시간의 GMT를 기준으로 시간 오프셋을 분 단위로 반환합니다. |
| getUTCDate() | 세계시(Universal Time)로 해당 월의 날짜를 반환합니다. |
| getUTCDay() | 세계시(Universal Time)로 요일을 반환합니다. |
| getUTCFullYear() | 세계시(Universal Time)로 연도를 반환합니다. |
| getUTCHours() | 현재 시간(시간)을 세계시로 반환합니다. |
| getUTCM밀리초() | 현재 시간(밀리초)을 세계시로 반환합니다. |
| getUTCMinute() | 현재 시간(분)을 세계시로 반환합니다. |
| getUTC월() | 현재 시간(월)을 세계시(Universal Time)로 반환합니다. |
| getUTC초() | 현재 시간(초)을 세계시로 반환합니다. |
| getYear() | 시대에 뒤쳐진. 연도를 짧은(2자리) 세계시 형식으로 반환합니다. |
| 구문 분석(날짜_문자열) | 1970년 1월 1일부터 매개변수에 지정된 값까지 경과된 밀리초 수를 현지 시간으로 반환합니다. |
| setDate(일) | 해당 월의 날짜를 현지 시간으로 설정합니다. |
| setFullYear(년) | 연도를 현지 시간으로 설정합니다. |
| setHours(시간) | 현지 시간으로 시간(시)을 설정합니다. |
| setMilliseconds(밀리초) | 현지 시간으로 시간(밀리초)을 설정합니다. |
| setMinutes(분) | 현지 시간으로 시간(분)을 설정합니다. |
| setMonth(월) | 시간(월)을 현지 시간으로 설정 |
| setSeconds(초) | 현지 시간으로 시간(초)을 설정합니다. |
| setTime(밀리초) | 특정 날짜의 시간을 현지 시간으로 밀리초 단위로 설정합니다. |
| setUTCDate(일) | 세계시(Universal Time)로 월의 날짜를 설정합니다. |
| setUTCFullYear(연도) | 연도를 세계시(Universal Time)로 설정합니다. |
| setUTCHours(시간) | 세계시(Universal Time)로 시간(시)을 설정합니다. |
| SetUTCM밀리초(밀리초) | 세계시(Universal Time)로 시간(밀리초)을 설정합니다. |
| setUTCMinutes(분) | 세계시(Universal Time)로 시간(분)을 설정합니다. |
| setUTCMonth(월) | 세계시(Universal Time)로 시간(월)을 설정합니다. |
| setUTCSeconds(초) | 세계시(Universal Time)로 시간(초)을 설정합니다. |
| setYear(년) | 시대에 뒤쳐진. 연도를 현지 시간으로 설정합니다. 연도 값에는 두 자리 형식이 허용됩니다. |
| toGMT문자열() | 시대에 뒤쳐진. 날짜를 GMT 시간에 해당하는 문자열로 변환합니다. |
| toLocaleString() | 날짜 및 시간을 로컬 시스템 설정 형식에 해당하는 문자열로 반환합니다. |
| toLocaleDateString() | 로컬 시스템 설정의 형식에 해당하는 문자열로 날짜를 반환합니다. |
| toLocaleTimeString() | 로컬 시스템 설정에 따라 형식화된 문자열로 시간을 반환합니다. |
| toSource() | 리터럴 표현으로 날짜 객체를 반환합니다. |
| toString() | 문자열 표현으로 날짜 객체를 반환합니다. |
| toUTC문자열() | 날짜를 세계시 형식의 문자열로 변환합니다. |
| UTC(매개변수) | 세계시 기준으로 1970년 1월 1일 이후 경과된 밀리초 수를 반환합니다. 매개변수는 연도, 월, 일뿐만 아니라 (선택 사항) 시, 분, 초, 밀리초도 나타냅니다. |
| 가치() | 날짜를 기본 값으로 반환합니다. |
이러한 풍부한 메소드에도 불구하고 Date 객체를 사용하는 것은 매우 간단합니다. 메소드 이름 지정 원리를 이해하면 됩니다.
- "set"으로 시작하는 메소드는 Date 객체의 날짜와 시간을 설정하기 위한 것입니다.
- "get"으로 시작하는 메소드는 Date 객체에서 날짜, 시간 또는 그 일부를 검색하기 위한 것입니다.
- "to"로 시작하는 메소드는 날짜와 시간(또는 그 일부)을 문자열 값으로 반환합니다.
- "UTC"를 포함하는 방법은 세계시 형식(즉, 현재 시간대에 대한 오프셋을 고려하여 그리니치 표준시를 표시함)으로 작동한다는 점에서만 유사한 방법과 다릅니다.
따라서 남은 것은 필요한 경우 UTC를 사용하여 원하는 매개 변수를 가져오거나 설정하기 위해 날짜 또는 시간의 필요한 부분의 이름을 가져오거나 설정하기 위해 추가하는 것입니다. 글쎄요, "사람의" 형태로 결과를 얻어야 한다면 to 메소드를 사용하세요. 또한 연도 작업을 하려면 항상 전체 형식 함수(즉, getYear가 아닌 getFullYear 또는 getUTCFullYear)만 사용해야 한다는 점을 기억해야 합니다.
JavaScript에서 날짜의 문자열 표현은 다음 형식을 갖습니다.
요일 월 일 년 시:분:초 GMT±오프셋
날짜 표현을 명확하게 확인하고 동시에 toString과 같은 함수가 작동하는 방식을 고려하기 위해 이들이 모두 출력으로 반환하는 내용을 살펴보겠습니다. 이 경우 특정 기능의 작동을 보기 위해 가장 먼저 떠오르는 것은 문서에 대한 텍스트 출력을 사용하는 것입니다.
Document.writeln(DateObject.toString()); document.writeln(DateObject.toGMTString()); // 등.
하지만 실제로는 기능이 많기 때문에 어떤 작업이 수행되었는지 미리 적어 두는 것이 좋습니다.
Document.writeln("DateObject.toString()" + DateObject.toString());
이제 실제로 이런 방식으로 몇 줄을 출력하고 싶은지 다시 생각해 보겠습니다. 모든 텍스트 편집기에서 지원하는 복사하여 붙여넣기 방법을 고려하더라도 다음과 같은 오류로부터 보호되지는 않습니다.
Document.writeln("DateObject.toLocaleString()" + DateObject.toString());
그러나 IBM의 모토처럼 사람은 생각해야 하고 기계는 작동해야 합니다. 따라서 컴퓨터를 작동시키는 방법과 동시에 추가 바이트의 코드를 입력할 필요가 없도록 하는 방법에 대해 생각해 보겠습니다. 이를 위해 목록 4.4를 살펴보겠습니다.
목록 4.4. 다양한 날짜 유형 및 평가 함수 출력
날짜 객체 메소드
우선, 실제로 문서에서 날짜를 어떤 형식으로든 표시하는 printDate 함수를 정의합니다. 보다 정확하게는 우리의 경우 날짜를 표시하지만 원칙적으로 허용되는 인수가 완전한 JavaScript 코드 조각이라면 무엇이든 출력할 수 있습니다. 이 경우 먼저 코드가 있는 그대로 표시되고(즉, 문자열 변수가 원래 형식으로 인쇄됨) eval 함수를 사용하여 실행 결과가 표시됩니다. 결과적으로 이러한 함수를 한 번 작성하면 나중에 전체 문서에서 해당 함수를 참조할 수 있으므로 거의 동일한 텍스트를 두 번 입력할 필요가 없습니다.
출력 함수 다음에는 값 2005, 세 번째 달(1월은 0이므로 4월), 첫 번째 날, 14시간, 30분, 45초가 할당된 Date 유형의 개체가 생성됩니다. 다음으로, 쓰기를 위해 문서가 열리고 Date 객체의 6가지 다른 메서드에 대해 printDate 함수가 순차적으로 호출됩니다. 이 스크립트의 결과는 메서드의 값 쌍과 작업 결과를 콜론으로 구분하여 포함하는 6줄입니다(그림 4.8).
쌀. 4.8. 다른 방법을 사용하여 동일한 날짜 출력
프로그램 내부 표현에 날짜를 표시하는 toSource 메소드는 Mozilla 브라우저에서만 지원됩니다. 또한 다른 모든 방법으로 날짜를 표시하는 형식도 브라우저마다 약간 다를 수 있습니다. 이러한 예제를 다양한 보기 프로그램에 로드하여 생성되는 내용을 직접 확인할 수 있습니다(date.html 파일).
함수 객체사전 정의된 Function 객체는 함수로 실행되어야 하는 JavaScript 코드 라인을 정의합니다. Function 개체를 선언하려면 다음 구문을 사용합니다.
FunctionName = 새 함수([인수1, 인수2, ...인수N], FunctionBody)
이 경우 기존 객체의 변수 이름이나 속성 이름을 함수 이름으로 사용할 수 있습니다. 객체의 이벤트 핸들러 값으로 Function 유형의 객체를 지정할 수도 있습니다. "문서 로딩 완료"(document.onload)와 같은 자체 이벤트 핸들러를 만들고 싶다면 다음과 같이 작성할 수 있습니다.
Document.onload = new Function([Argument1, ...argumentN], FunctionBody);
이 경우 인수는 함수에 전달된 매개변수이고, 함수 본문은 이 함수 개체에 액세스할 때 실행해야 하는 실제 코드입니다. 예를 들어, 숫자를 제곱하는 데 사용할 객체의 다음 버전을 작성할 수 있습니다.
Var SquareObj = new Function("x", "return x*x");
여기서 SquareObj는 변수의 이름이고, x는 수신된 인수이며, “return x*x”는 함수의 본문입니다. 함수의 본문뿐만 아니라 함수가 받아들이는 인수도 따옴표로 묶여 있으며, 객체 유형의 이름은 JavaScript에서 관례적으로 대문자(Function)로 표기된다는 점에 주의하세요. .
이런 방식으로 생성된 변수를 사용하는 것은 다른 유형의 변수를 사용하는 것과 유사합니다.
Var a = 5 + SquareObj(2); // 9를 얻습니다
실제로 Function 유형의 객체는 항상 function 키워드를 사용하여 선언된 일반 함수로 표현될 수 있습니다. 따라서 동일한 2제곱승은 다음과 같이 설명할 수 있습니다.
함수 SquareFunc(x) ( x*x 반환; )
따라서 이러한 메서드(이 경우 프로시저가 아닌 "순수한" 형식의 함수)에 의해 선언된 함수를 비슷한 방식으로 사용할 수 있습니다.
Var a = 5 + SquareFunc(2); // 또한 9를 얻습니다.
따라서 Function 객체를 사용하여 변수에 값을 함수로 할당하는 것은 함수 자체를 선언하는 것과 같습니다. 그러나 동시에 이러한 접근 방식에는 차이가 있습니다. SquareObj가 Function 개체를 사용하여 생성된 개체에 대한 참조 값을 갖는 변수인 경우 SquareFunc는 함수의 이름입니다. 따라서 프로그램 실행 중에도 다르게 동작합니다. 함수 유형의 객체에 대해 인터프리터는 변수(이 경우 SquareObj)를 발견할 때마다 전체 함수 코드를 평가하고 일반적인 방식으로 선언된 함수의 경우 코드는 첫 번째 통로에서만 평가됩니다. 함수가 일회성 작업을 수행하는 경우 이 차이는 중요하지 않을 수 있지만 Function 개체에서 생성된 변수를 사용하면 루프에서 프로그램의 효율성이 크게 감소합니다. 따라서 실제로 함수 개체를 사용하는 경우는 매우 드물지만 그럼에도 불구하고 때로는 다른 개체에 메서드를 추가하는 경우와 같이 편리할 수 있습니다.
Function 객체에는 표준 JavaScript 속성 생성자와 프로토타입은 물론 자체 속성도 많이 있습니다.
인수(arguments.callee 함수의 매개변수에 해당하는 배열)는 함수의 본문에 해당합니다. Arguments.caller (구식) – 객체가 호출된 함수의 이름을 나타냅니다. args.length – 함수 매개변수의 수를 나타냅니다. length – 함수에서 예상하는 인수 수를 나타냅니다(argument.length의 경우처럼 수신된 수가 아님).
주목
모든 인수 속성은 함수 "내부"에서만 볼 수 있으며 JavaScript 1.4부터 인수는 더 이상 Function 개체의 속성이 아니라 모든 함수에 암시적으로 존재하는 독립적인 지역 변수입니다. 실제로 함수에는 길이라는 하나의 속성만 남았습니다.
속성 외에도 Function 개체에는 여러 가지 메서드가 있습니다. 따라서 apply 메소드를 사용하면 한 객체의 메소드를 다른 객체에 적용할 수 있고, call 메소드를 사용하면 현재 객체의 컨텍스트에서 다른 객체의 메소드를 호출할 수 있습니다. 불행하게도 실제로 이러한 방법을 구현하는 데는 분명히 부족한 점이 많습니다. 따라서 남은 것은 Function 개체에도 사용할 수 있는 표준 JavaScript 메서드 toString, toSource 및 valueOf를 언급하는 것뿐입니다.
수학 객체Math는 기본 수학 상수와 메서드 및 속성 기능을 포함하는 내장 JavaScript 개체입니다. 예를 들어 Math 객체의 PI 속성에는 대략 3.1416에 해당하는 Pi(π) 값이 포함되어 있으며 sin 메서드는 지정된 숫자의 사인을 반환합니다.
Math 개체에는 숫자 π 외에도 다음과 같은 속성이 있습니다.
- E – 자연 로그의 밑(약 2.718)
- LN10 – 10의 자연 로그(약 2.302)
- LN2 – 2의 자연 로그(약 0.693)
- LOG10E – E의 10진수 로그(약 0.434)
- LOG2E – E의 이진 로그(약 1.442)
- SQRT1_2 - 0.5의 제곱근(약 0.707)
- SQRT2 – 2의 제곱근(약 1.414)
Math 개체의 모든 속성은 미리 정의된 상수이므로 Math 유형의 다른 개체를 만드는 것은 필요하지 않을 뿐만 아니라 허용되지도 않으며 항상 같은 방식으로 액세스해야 합니다. 예를 들면 다음과 같습니다.
Var CircleLength = 직경 * Math.PI;
Math 개체는 속성 외에도 기본 수학 함수에 해당하는 메서드도 정의합니다. 이들 모두는 표 4.13에 나열되어 있습니다.
| 절대(숫자) | 인수의 절대값을 반환합니다. |
| atan2(y,x) | -? 범위의 숫자를 반환합니다. to?는 x축과 점(x,y) 사이의 각도(라디안)를 나타냅니다. 첫 번째 인수는 Y 좌표입니다. |
| 특급(숫자) | E를 지정된 거듭제곱으로 반환합니다(지수 로그). |
| 천장(번호), 층(번호) | 더 큰(ceil) 또는 더 작은(floor) 정수에 가장 가까운 값을 반환합니다. |
| 최소(숫자1, 숫자2), 최대(숫자1, 숫자2) | 비교되는 두 인수 중 더 작은(최소) 또는 더 큰(최대) 수를 반환합니다. |
| sin(숫자),cos(숫자), tan(숫자),asin(숫자), acos(숫자),atan(숫자) | 표준 삼각 함수(사인, 코사인, 탄젠트, 아크사인, 아크코사인 및 아크탄젠트)의 결과를 반환합니다. |
| pow(기본, 지수) | 밑을 지수 거듭제곱으로 반환합니다. |
| 무작위의() | 0과 1 사이의 의사 난수를 반환합니다. |
| 라운드(숫자) | 가장 가까운 정수로 반올림된 값을 반환합니다. |
| sqrt(숫자) | 숫자의 제곱근을 반환합니다. |
속성과 마찬가지로 Math 객체의 메서드를 사용하려면 객체의 복사본이 아닌 객체 자체를 참조해야 합니다. 예를 들어, 원의 면적을 기준으로 지름을 반환하는 함수를 작성해 보겠습니다.
함수 CircleDiam(Square) ( Radius = Math.sqrt(Square / Math.PI) ; )
실제로 사용하려면 프롬프트 및 경고 방법을 사용할 수 있습니다.
Var sq = 프롬프트("지역을 입력하세요",1); var di = CircleDiam(sq); Alert("원의 지름: "+di);
Math 객체의 이러한 메소드와 기타 메소드의 작동은 math.html 파일에서 볼 수 있습니다.
숫자 객체Number 객체는 간단한 숫자 유형의 객체 표현입니다. "최대 수", "숫자가 아님" 및 "무한대"와 같은 숫자 상수에 대한 특수 속성이 있습니다. Number 유형의 새 객체를 생성하려면 다음 구문을 사용하십시오.
새 번호(값)
실제로 Number 개체의 가장 일반적인 용도는 해당 상수를 사용하여 인수의 유효성을 검사하고 런타임 오류를 추적하는 것입니다. 예를 들어, 변수 값이 숫자인지 여부를 확인하려면 다음 방법을 사용할 수 있습니다.
If (x!=Number.NaN);
이 경우 변수 x에 숫자가 포함되어 있으면 조건은 "숫자가 아님"을 의미하는 특수 값인 NaN과 비교되므로 true가 됩니다. NaN 외에도 다른 특수 값을 사용할 수 있습니다. 모두 Number 객체의 속성입니다.
- MAX_VALUE – 가능한 최대 수
- MIN_VALUE – 가능한 최소 수
- NaN – 숫자가 아님
- NEGATIVE_INFINITY - "음의 무한대", 오버플로 시 반환되는 특수 값
- POSITIVE_INFINITY - "양의 무한대", 오버플로 시 반환되는 특수 값
이러한 속성은 모두 상수이므로 이를 사용하기 위해 새 Number 개체를 만들 필요가 없습니다. 위의 속성 외에도 표준 생성자 및 프로토타입 속성도 Number에 대해 정의됩니다.
물론 Number 객체에는 속성 외에도 메서드도 있습니다. 표준 toSource, toString 및 valueOf 메소드 외에도 JavaScript 1.5에서는 Number 객체의 3가지 새로운 기본 메소드인 toExponential, toFixed 및 toPrecision을 도입했습니다. 이들 모두는 하나의 형식 또는 다른 형식을 기반으로 숫자를 문자열로 변환하도록 설계되었습니다. 따라서 toExponential 메서드는 숫자를 지수가 있는 숫자인 문자열로 변환하고, toFixed 메서드는 이를 고정된 소수 자릿수를 포함하는 숫자를 포함하는 문자열로 변환하며, toPrecision 메서드는 조건에 따라 이러한 메서드 중 하나를 사용합니다. 숫자와 할당된 소수 자릿수.
해당 구문을 고려하여 이러한 메서드를 더 자세히 살펴보겠습니다.
Method([문자 수])
분명히, 모든 메소드에서 자릿수는 소수 자릿수를 나타내지만, toFixed 메소드의 경우 기본값(즉, 아무것도 지정되지 않은 경우)이 0인 경우 toExponential 및 toPrecision의 경우 이는 필요한 소수 자릿수입니다. 전체 숫자를 표시합니다. 이 모든 메소드의 작동과 차이점을 더 잘 이해하기 위해 목록 4.5의 예를 사용하여 살펴보겠습니다.
목록 4.5. toExponential, toFixed 및 toPrecision 메소드
Number 객체의 메서드
여기서도 (목록 4.4에서와 같이) 먼저 표현식을 인쇄한 다음 그 해석 결과를 인쇄하는 함수를 사용했지만 이 경우에는 이를 printNumber라고 불렀습니다. 다음은 계산이 수행될 변수의 실제 선언입니다. 이 경우에는 Number 유형의 객체로 선언했지만 실제로는 간단한 변수 선언(x = 12.45678)으로 제한할 수도 있었습니다. 마지막으로, 문서가 쓰기 위해 열리고 변수 x의 값이 명시적인 변환 없이 먼저 문서에 인쇄됩니다(그러나 실제로는 toString() 메서드가 여기에 자동으로 적용된다는 것을 이미 알고 있습니다). 그런 다음 문제의 세 가지 메서드가 모두 먼저 숫자 문자를 지정하지 않고 호출한 다음 매개변수 2와 4를 사용하여 호출합니다. 이 스크립트의 결과는 "표현식: 처리 결과" 쌍을 포함하는 10줄입니다(그림 4.9).
쌀. 4.9.
결론적으로 이러한 방법은 JavaScript 1.5에서만 나타 났으며 따라서 Netscape 4, MSIE 4/5 및 Opera 브라우저 버전 7.0까지는 작동하지 않습니다. 동시에 Math 개체의 round() 메서드보다 출력에서 숫자 형식 지정에 더 많은 유연성을 제공합니다.
2011-08-01 // 질문, 제안, 의견이 있으신가요? 당신은 할 수 있습니다
XHTML/HTML4 시대로 돌아가 보면 개발자에게는 임의의 DOM 관련 데이터를 저장하는 데 사용할 수 있는 몇 가지 옵션이 있었습니다. 자신만의 속성을 만들 수 있지만 이는 위험했습니다. 코드가 유효하지 않고 브라우저가 데이터를 무시할 수 있으며 이름이 표준 HTML 속성과 일치하면 문제가 발생할 수 있습니다.
따라서 대부분의 개발자는 추가 행을 저장하는 유일한 합리적인 방법인 class 또는 rel 속성을 고수했습니다. 예를 들어 Twitter 메시지 타임라인과 같은 메시지를 표시하는 위젯을 생성한다고 가정해 보겠습니다. 이상적으로 JavaScript는 코드를 다시 작성하지 않고도 구성 가능해야 하므로 다음과 같이 클래스 속성에 사용자 ID를 정의합니다.
우리의 JavaScript 코드는 ID가 msglist 인 요소를 찾습니다. 스크립트를 사용하여 user_로 시작하는 클래스를 검색하며, 여기서는 "bob"이 사용자 ID가 되고 해당 사용자의 모든 메시지가 표시됩니다.
최대 메시지 수를 설정하고 6개월(180일)이 지난 메시지를 건너뛰고 싶다고 가정해 보겠습니다.
클래스 속성은 매우 빠르게 복잡해집니다. 실수하기가 더 쉽고 JavaScript에서 문자열을 구문 분석하는 것이 점점 더 어려워집니다.
HTML5 데이터 속성다행히 HTML5에는 사용자 정의 속성을 사용하는 기능이 도입되었습니다. data- 접두사가 붙은 소문자 이름을 사용할 수 있습니다. 예를 들면 다음과 같습니다.
맞춤 데이터 속성:
- 이는 문자열입니다. JSON과 같은 문자열로 표현되거나 인코딩될 수 있는 모든 정보를 저장할 수 있습니다. 유형 캐스팅은 JavaScript를 사용하여 수행되어야 합니다.
- 적합한 HTML5 요소나 속성이 없는 경우에 사용해야 합니다.
- 해당 페이지만 참조하세요. 마이크로포맷과 달리 검색 엔진, 크롤러 등 외부 시스템에서는 무시되어야 합니다.
모든 브라우저에서는 getAttribute 및 setAttribute 메소드를 사용하여 데이터 속성을 가져오고 변경할 수 있습니다.
Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("데이터 목록-크기", +show+3);
이는 작동하지만 이전 브라우저와의 호환성을 유지하는 데에만 사용해야 합니다.
JavaScript 처리 예제 2: jQuery 라이브러리의 data() 메서드jQuery 1.4.3부터 data() 메소드는 HTML5 데이터 속성을 처리합니다. data- 접두사를 명시적으로 지정할 필요가 없으므로 다음과 같은 코드가 작동합니다.
Var msglist = $("#msglist"); var show = msglist.data("목록 크기"); msglist.data("목록 크기", show+3);
그러나 jQuery는 그러한 속성의 값을 적절한 유형(부울, 숫자, 객체, 배열 또는 null)으로 변환하려고 시도하며 DOM에 영향을 미칠 것이라는 점에 유의하십시오. setAttribute 와 달리 data() 메소드는 data-list-size 속성을 물리적으로 대체하지 않습니다. jQuery 외부에서 해당 값을 확인하면 여전히 5입니다.
JavaScript 처리 예제 3: 데이터 세트 작업을 위한 API마지막으로 DOMStringMap 객체를 반환하는 HTML5 데이터 세트로 작업하기 위한 API가 있습니다. 데이터 속성은 데이터 접두사 없이 객체에 매핑되고, 이름에서 하이픈이 제거되고, 이름 자체가 camelCase로 변환된다는 점을 기억하는 것이 중요합니다. 예를 들면 다음과 같습니다.
| 속성 이름 | 데이터세트 API 이름 |
| 데이터 사용자 | 사용자 |
| 데이터 최대화 | 최대 |
| 데이터 목록 크기 | 목록크기 |
새로운 코드:
Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;
이 API는 모든 최신 브라우저에서 지원되지만 IE10 이하에서는 지원되지 않습니다. 이러한 브라우저에 대한 해결 방법이 있지만 이전 브라우저용으로 글을 작성하는 경우 jQuery를 사용하는 것이 더 실용적일 수 있습니다.
JavaScript에서 날짜와 시간을 다룰 때 Date 객체를 사용합니다. 날짜와 시간을 가지고 얼마나 자주 작업을 해야 하는지 설명할 필요는 없을 것 같습니다. 그리고 이 기사에서는 JavaScript로 이를 수행하는 방법을 배웁니다.
평소처럼 Date 객체의 생성자부터 시작하겠습니다. 그 중 4개가 있습니다. 첫 번째는 매개변수가 없는 생성자이며 현재 시간과 날짜를 반환합니다.
Var 날짜 = 새 날짜();
document.write(날짜);
결과적으로 "Thu Oct 14 2010 11:42:06 GMT+0400"과 같은 내용이 표시됩니다.
Date 객체의 두 번째 생성자는 매개변수가 1개인 생성자입니다. 이 매개변수에는 1970년 1월 1일(Unix 시대 탄생) 이후 경과된 밀리초 수가 포함됩니다. 예를 들어 다음과 같습니다.
Var 날짜 = 새 날짜(135253235);
document.write(날짜);
결과적으로 "Fri Jan 02 1970 16:34:13 GMT+0300"이 표시됩니다.
다음 생성자를 사용하면 연도, 월, 일 매개변수를 사용하여 Date 객체를 생성할 수 있습니다.
Var date = new Date(2010, 0, 12);
document.write(날짜);
결과: "2010년 1월 12일 화요일 00:00:00 GMT+0300". 또한 0월은 1월이고 11월은 12월입니다.
그리고 JavaScript의 Date 클래스에 대한 마지막 생성자를 사용하면 연도, 월, 일, 시, 분, 초 등 모든 날짜 및 시간 매개변수를 사용하여 Date 객체를 생성할 수 있습니다.
Var date = new Date(2010, 0, 12, 23, 45, 12);
document.write(날짜);
"2010년 1월 12일 화요일 23:45:11 GMT+0300"이라는 줄이 표시됩니다. 이것이 개발자가 우리에게 제공한 모든 JavaScript Date 객체 생성자입니다.
Date 클래스에는 특별한 속성이 없으므로 바로 메서드로 넘어가겠습니다. 정확히 동일하게 작동하지만 각각 고유한 날짜 및 시간 요소를 반환하는 메서드 그룹으로 바로 시작해 보겠습니다.
Var 날짜 = 새 날짜();
document.write("연도 - " + date.getFullYear() + "
");
document.write("월 - " + date.getMonth() + "
");
document.write("숫자 - " + date.getDate() + "
");
document.write("요일 - " + date.getDay() + "
");
document.write("시간 - " + date.getHours() + "
");
document.write("분 - " + date.getMinutes() + "
");
document.write("두 번째 - " + date.getSeconds() + "
");
document.write("밀리초 - " + date.getMilliseconds() + "
");
document.write("1970년 1월 1일 이후 경과된 밀리초 수 - " + date.getTime() + "
");
이 스크립트를 실행하면 이러한 각 방법의 기능을 즉시 이해할 수 있습니다. 제가 주목하고 싶은 유일한 점은 요일 번호 매기기도 0부터 시작한다는 것입니다. 또한 일요일의 인덱스는 0이고 토요일의 인덱스는 6입니다.
비슷한 방법이 있지만 그리니치 표준시로 날짜와 시간을 표시합니다. 다음 코드를 작성해 보겠습니다.
Var 날짜 = 새 날짜();
document.write("연도 - " + date.getUTCFullYear() + "
");
document.write("월 - " + date.getUTCMonth() + "
");
document.write("숫자 - " + date.getUTCDate() + "
");
document.write("요일 - " + date.getUTCDay() + "
");
document.write("시간 - " + date.getUTCHours() + "
");
document.write("분 - " + date.getUTCMinutes() + "
");
document.write("두 번째 - " + date.getUTCSeconds() + "
");
document.write("밀리초 - " + date.getUTCMilliseconds() + "
");
이 스크립트를 실행하면 그리니치의 현재 날짜와 시간을 알 수 있습니다.
get() 메소드의 반대는 set() 메소드입니다. 전자가 특정 값을 반환하면 후자는 반대로 값을 변경합니다. 사실, 이 대본을 제공하지 않을 수도 있지만, 질문이 남지 않도록 해보자:
Var 날짜 = 새 날짜();
date.setFullYear(1990);
날짜.setMonth(11);
날짜.setDate(15);
날짜.setHours(9);
날짜.setMinutes(20);
날짜.setSeconds(0);
date.setMilliseconds(10);
document.write(날짜);
setDay() 메소드가 존재하지 않는다는 것을 알아차렸기를 바랍니다. 즉, 연도, 월, 날짜에 따라 요일이 선택됩니다.
그리니치에도 비슷한 방법이 있습니다. 예를 들어 setUTCMonth() 메서드가 사용되는 월을 변경하려면 UTC 접두사만 추가됩니다.
마지막 메소드는 setTime() 입니다. 1970년 1월 1일 이후 경과된 밀리초 수를 매개변수로 사용합니다.
Date.setTime(39293012);
document.write(날짜);
결과적으로 "Thu Jan 01 1970 13:54:53 GMT+0300"이 표시됩니다.
이것이 JavaScript의 Date 개체의 모든 생성자와 메서드입니다.
이번 강의에서는 Javascript 객체에 대한 주제를 다룹니다. 우리는 사용자 정의 개체에 대해 이야기할 것입니다: JavaScript에서 개체 만들기, 개체 속성 및 메서드 작업, JavaScript 프로토타입에 대한 작업. 위치, 네비게이터, 화면 개체 작업에 대해 간략하게 설명합니다.
이 사이트의 목적은 사용자에게 언어 작업에 대한 실용적인 기술을 제공하는 것입니다. 복잡성이 증가함에 따라 제시되고 명확하고 해결된 예제가 지원되는 JavaScript에 대한 실험실 작업을 통해 연구 중인 자료를 쉽게 이해하고 "살아있는" 동적 웹 페이지를 독립적으로 만드는 방법을 배울 수 있습니다.
JavaScript에는 여러 유형의 객체가 있습니다.
- 내장 객체
- 브라우저 객체
- 프로그래머가 독립적으로 생성하는 객체(사용자 정의)
내장 객체는 미리 정의된 객체입니다... 대부분은 이전 강의에서 이미 다루었습니다.
JavaScript의 브라우저 객체에 대해서는 다음 강의에서 다루겠습니다.
이제 JavaScript의 사용자 정의 개체에 대해 알아볼 시간입니다.
- 물체
- 숫자(숫자 처리)
- 문자열(문자열 처리)
- 정렬
- 수학(수학 공식, 함수 및 상수)
- 날짜(날짜 및 시간 작업)
- 정규식
- 전역(해당 속성 Infinity, NaN, 정의되지 않음)
- 기능
객체를 생성하는 방법에는 2가지가 있습니다:
var object_name = new Object(); object_name.property = value;// 점 표기 object_name["property"] = value;// 대괄호 표기
중요: 숫자를 값으로 사용할 수 없다는 점은 주목할 가치가 있습니다. myObg.rost = 2 // 불가능합니다! myObg.rost = "2" // 가능
예: 속성 이름(값)을 사용하여 myBrowser 객체를 생성합니다. ) 및 버전(값 " 9.0 »)
✍ 해결 방법 1:
var myBrowser = new Object(); myBrowser.name= "마이크로소프트 인터넷 익스플로러"; myBrowser["version"]= "9.0";
예: 색상 및 브랜드 속성을 사용하여 두 개의 컬렉션 개체(car 및 moto)를 만듭니다. 인쇄 속성 값 색상물체에 자동차및 속성 상표물체에 모토.
✍ 해결책:
| var 자동차 = 새로운 객체(); car.color = "흰색" ; car.maxSpeed = 220 ; car.brand = "닛산" ; document.write ("자동차의 색상은 다음과 같습니다: " + car.color ) ; var moto = ( 색상: "파란색", HorsePower: 130, 브랜드: "야마하" ) ; document.write ("오토바이 제조사: " + moto.brand ) ; |
var 자동차 = 새로운 객체(); car.color = "흰색"; 자동차.최대속도=220; car.brand = "닛산"; document.write("자동차의 색상은 다음과 같습니다: " + car.color); var moto = ( 색상: "파란색", HorsePower: 130, 브랜드: "야마하" ); document.write("오토바이 제조업체는 다음과 같습니다: " + moto.brand);
자바스크립트에서 객체 작업 시 "For Each" 루프
이 디자인에 대해서는 이미 많은 내용이 언급되어 있습니다.
javascript의 for in 루프는 배열, 컬렉션 및 객체를 반복하도록 설계되었습니다.
for in을 사용하는 예를 살펴보겠습니다.
| 1 2 3 4 5 6 7 8 | var myBrowser = new Object(); myBrowser.name = "마이크로소프트 인터넷 익스플로러" ; myBrowser[ "version" ] = "9.0" ; for (var a in myBrowser) ( Alert(a) ; // myBrowser 객체의 속성을 반복합니다. 이름, 버전을 반환합니다. Alert(myBrowser[ a] ) ; // 속성 값을 반환합니다 ) |
var myBrowser = new Object(); myBrowser.name= "마이크로소프트 인터넷 익스플로러"; myBrowser["version"]= "9.0"; for (var a in myBrowser) ( Alert(a); // myBrowser 객체의 속성을 반복합니다. 이름, 버전을 반환합니다. Alert(myBrowser[a]); // 속성 값을 반환합니다 )
생성자 클래스 생성은 두 단계로 수행됩니다.
생성자를 사용하여 객체 클래스 만들기(생성자 클래스 만들기):
함수 Object_class_name(sv1, sv2)( this.sv1 = 값; this.sv2 = 값; )
객체 클래스의 생성자를 기반으로 새 객체를 생성합니다.
var object_name = new class_name("stack_value1","staff_value2");
var object_name =새 클래스_이름(); object_name.stv1="값_stv1"; object_name.stv2="값_stv2";
생성자 클래스의 이름은 대문자로 쓰는 것이 관례입니다!
예를 살펴보겠습니다:
예: 객체 클래스에 대한 생성자를 생성하고 이 클래스를 기반으로 객체 생성: 속성 이름(값)을 사용하여 myBrowser 객체를 생성합니다. “마이크로소프트 인터넷 익스플로러”) 및 버전(값 " 9.0 »)
개방형 솔루션
| 1 2 3 4 5 6 7 8 | function 브라우저(이름, 버전) ( this .name = 이름; this .version = 버전; ) var myBrowser = new Browser("Microsoft Internet Explorer" , "9.0" ) ; 경고(myBrowser.name) ; 경고(myBrowser.version) ; |
function 브라우저(이름, 버전)( this.name = 이름; this.version = 버전; ) var myBrowser = new Browser("Microsoft Internet Explorer","9.0"); 경고(myBrowser.name); 경고(myBrowser.version);
이제 객체를 생성하는 첫 번째 방법과 다시 비교해 보겠습니다.
// 컬렉션 개체 var myBrowser = (이름: "Microsoft Internet Explorer", 버전: "7.0"); 경고(myBrowser.name); 경고(myBrowser.version); // 다음 줄은 유효하지 않습니다! var myBrowser1 = new myBrowser("MozillaFirefox","3.5"); // 사실이 아니다! !!
중요: 컬렉션 객체를 생성할 때 클래스가 아니기 때문에 클래스의 인스턴스를 생성할 수 없습니다.
js 작업 6_1. 이름, 부서, 전화번호, 급여 등 특정 회사의 직원에 대한 정보가 포함된 Employee 개체를 만듭니다(생성자 함수와 this 키워드 사용). 객체 인스턴스 생성
자바스크립트에서 객체 속성에 접근하기개체_이름. property_name
| 1 2 | Agent007.Name = "본드" ; 경고(에이전트007.이름) ; |
Agent007.Name = "본드"; 경고(에이전트007.이름);
기본 속성이란 무엇입니까?
생성자 함수를 사용하면 객체에 기본 속성을 할당할 수 있습니다. 생성된 개체의 각 인스턴스에는 이러한 속성이 있습니다.
| 1 2 3 4 5 6 7 8 9 10 | function Student(이름, 전화) ( this .name = 이름; this .phone = "22-22-22" ; // 기본 속성! ) var ivanov = new Student("Ivan" , "33-33-33" ) ; 경고(ivanov.name) ; // "Ivan" 경고를 발행합니다 (ivanov.phone ) ; // "22-22-22"가 표시됩니다. ivanov.phone = "33-33-33" ; //기본 속성 변경 경고(ivanov.phone) ; // "33-33-33"을 반환합니다. |
function Student(이름, 전화) ( this.name=name; this.phone="22-22-22"; // 기본 속성! ) var ivanov = new Student("Ivan","33-33-33" ) ; 경고(ivanov.name); // "Ivan" 경고를 발행합니다(ivanov.phone); // "22-22-22"가 표시됩니다. ivanov.phone="33-33-33"; //기본 속성 변경 경고(ivanov.phone); // "33-33-33"을 반환합니다.
객체 클래스에 속성 추가
다음에 대한 속성 값을 추가할 수 있습니다.
- 객체의 특정 인스턴스
- 객체의 전체 클래스
속성 추가 특정(인스턴스) 객체:
개체_이름. property_name = 값
ivanov.biology = "훌륭함";
중요: 이 예에서는 개체 클래스가 아닌 특정 개체에 대해 속성이 설정되었습니다.
속성 추가 수업에사물:
class_name.prototype. property_name = 값
Student.prototype.biology = "훌륭함";
중요: 이 예에서는 속성(기본적으로)이 객체 클래스에 대해 설정되었습니다! 이는 프로토타입을 사용하여 수행됩니다. 프로토타입 - 구조를 정의하는 객체
| 1 2 | Student.prototype.email = " [이메일 보호됨]" ; Alert(ivanov.email ) ; // 표시됩니다. " [이메일 보호됨]" |
Student.prototype.email=" [이메일 보호됨]"; Alert(ivanov.email); // 표시됩니다. " [이메일 보호됨]"
예: 객체의 모든 속성을 값과 함께 표시하는 예
| 1 2 3 4 5 6 7 8 9 | var summerTour= ( 터키: 2000 , 스페인: 3000 , 이집트: 1000 ) ; var 옵션; for (summerTour의 옵션) ( document.write (옵션 + ":" + summerTour[ 옵션] + " " ) ; } |
var summerTour=( 터키: 2000, 스페인: 3000, 이집트: 1000 ); var 옵션; for (summerTour의 옵션)( document.write(option + ":" + summerTour + "
");
}
Javascript 프로토타입(소개)
프로토타입을 사용하여 자바스크립트 클래스를 구축하는 방법의 예를 살펴보겠습니다.
예: 이름(이름), 모델(모델), 색상(색상)의 세 가지 속성이 있는 Car(자동차) 객체 클래스를 만듭니다. 특정 속성 값을 사용하여 클래스의 인스턴스를 만듭니다. 그런 다음 생성된 인스턴스를 통해 다음을 추가합니다. 수업에특정 기본값을 가진 소유자 속성( 이바노프). 생성된 인스턴스의 모든 속성값을 출력합니다.
| function Car(이름, 모델, 색상) ( /* 자동차 객체 생성자*/ this .name = 이름; this .model = 모델; this .color = color; ) var myCar= new Car; myCar.name = "메르세데스" ; myCar.model = "600" ; myCar.color = "녹색" ; Car.prototype .owner = "이바노프" ; /* 새 속성 추가*/ Alert(myCar.name + " " + myCar.model + " " + myCar.color + " " + myCar.owner ) ; |
function Car(이름, 모델, 색상) ( /* 자동차 객체 생성자*/ this.name = 이름; this.model = 모델; this.color = color; ) var myCar=new Car; myCar.name="메르세데스"; myCar.model="600"; myCar.color="녹색"; Car.prototype.owner = "이바노프"; /* 새 속성 추가*/ Alert(myCar.name+" "+myCar.model+" "+myCar.color+" "+myCar.owner);
js 작업 6_2. Employee 객체의 생성된 인스턴스를 통한 js 6_1 작업의 경우 객체 클래스에 새 주소 속성을 추가합니다.
자바스크립트 객체 메소드객체 메소드 생성
예: 브라우저 화면에 이 개체의 속성에 대한 정보를 표시하는 브라우저 개체 생성자에 aboutBrowser 메서드를 추가합니다.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | function showBrowser() ( document.write("Browser: " + this .name + " " + this .version ) ; ) function Browser(이름, 버전) ( this .name = 이름; this .version = 버전; this .aboutBrowser = showBrowser; ) var myBrowser= new Browser("Microsoft Internet Explorer" , 8.0 ) ; myBrowser.aboutBrowser(); |
function showBrowser() ( document.write("Browser: " + this.name + " " + this.version); ) function Browser(이름, 버전) ( this.name = 이름; this.version = 버전; this.aboutBrowser = showBrowser; ) var myBrowser=new Browser("Microsoft Internet Explorer",8.0); myBrowser.aboutBrowser();
function Browser(이름, 버전) ( this.name = 이름; this.version = 버전; this.aboutBrowser = function())( document.write("Browser: " + name + " " + version); ) ) var myBrowser = new Browser("Microsoft Internet Explorer",8.0); myBrowser.aboutBrowser();
js 작업 6_3. 다음을 기준으로 여행 비용을 계산하는 방법을 사용하여 여행사 운영을 위한 개체 클래스(투어)를 만듭니다. 인원수 * 일수 * 국가 관세. 속성 값을 사용하여 turkeyTour 개체의 인스턴스를 만듭니다. 화면에 모든 개체 속성을 표시합니다. 함수를 기반으로 계산 개체 메서드를 만듭니다.
내장 객체(프로토타입)에 속성 및 메서드 추가
JavaScript는 프로토타입 기반 OOP(객체 지향 프로그래밍) 언어입니다.
프로토타입 - 구조를 정의하는 객체
예제를 사용하여 프로토타입 작업을 살펴보겠습니다.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* 프로토타입 변경 */ // 내장 객체에 기본 속성 추가 String .prototype .color = "black" ; // 내장 객체에 메소드 추가(변경) String .prototype .write = stringWrite; function stringWrite() ( document.write ("" ) ; document.write (this .toString () ) ; document.write ("" ) ; ) // 수정된 클래스 사용 var s = new String ("이것은 문자열입니다. " ) ; s.color = "빨간색" ; s.write(); |
/* 프로토타입 변경 */ // 내장 객체에 기본 속성 추가 String.prototype.color = "black"; // 내장 객체에 메소드 추가(변경) String.prototype.write = stringWrite; function stringWrite())( document.write(""); document.write(this.toString()); document.write(""); ) // 수정된 클래스 사용 var s = new String("This is a 끈"); s.color = "빨간색"; s.write();
중요: Math 객체에는 속성이나 메서드를 추가할 수 없습니다.
js 작업 6_4. 작업을 완료하려면 프로그램 코드를 추가하세요. 단어를 인쇄하는 내장 String 클래스에 printMe() 메서드를 추가하세요. "만세!"헤더(h... 태그), 사용자 지정 수준()으로.
헤더 수준(1, 2...6)을 String 클래스의 속성으로 추가할 수 있습니다.
HTML에서 제목 태그가 어떤 모습이어야 하는지 기억해 봅시다.
코드를 완성하세요:
| 1 2 3 4 5 6 7 8 | 문자열 .prototype .uroven = "1" ; ... 기능 printZagolovok () ( ... ... ) var s= new ...; ... |
String.prototype.uroven="1"; ... 기능 printZagolovok ()( ... ... ) var s=new ...; ...
요약: JavaScript에서 사용자 정의 개체를 사용하는 두 가지 옵션을 다시 비교해 보겠습니다.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var myBook= 새 개체() ; myBook.title = "책"
;
myBook.price
=
"200"
;
alert(myBook[
"title"
]
)
;
// 1-й вариант обращения к свойствам
alert(meBook.price
)
;
// 2-й вариант обращения к свойствам
function
myBookShow()
{
for
(var
i in
myBook)
{
document.write
(i+
": "
+
myBook[
i]
+
"!} " ) ; // 속성을 통해 반복 ) ) myBook.show = myBookShow; myBook.show () ; |
var myBook=new Object(); myBook.title="책";
myBook.price="200";
alert(myBook["title"]); // 1-й вариант обращения к свойствам
alert(meBook.price); // 2-й вариант обращения к свойствам
function myBookShow()
{
for (var i in myBook)
{
document.write(i+": "+myBook[i]+"!}
"); // 속성을 통해 반복 ) ) myBook.show=myBookShow; myBook.show();
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function myBook(title, 가격) ( // 속성 정의 this .title = title; this .price = 가격; // 메서드 정의 this .show = show; function show() ( document.write ("Title: " + this . title ) ; document.write ( "가격: " + this .price ) var book = new myBook ( "책" , 200 ) ; book.show(); |
function myBook(title,price)( // 속성 정의 this.title = title; this.price = Price; // 메소드 정의 this.show = show; function show() ( document.write("Title: " + this . title); document.write("가격: " + this.price); var book = new myBook("책", 200); 책.쇼();> 홈페이지로 이동 ... ...
*복합: 메뉴 항목 수, 이름 및 URL사용자에게 요청해야 함
팁: show() 메서드에서 화면에 문자열을 표시하려면 document.write() 메서드를 사용하세요.
예제를 사용하여 JavaScript에서 Navigator 개체를 사용하는 방법을 살펴보겠습니다.
예: 다음을 표시하는 함수를 작성하세요.
- 브라우저 이름
- 브라우저 언어
- OS 이름
- 쿠키가 활성화되어 있나요?
- 사용자가 인터넷에 연결되어 있나요?
- 화면 해상도
- 색심도
- 로드된 페이지 주소
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var 옵션; // navigator 객체의 모든 속성을 표시합니다 for (navigator의 옵션) ( document.write (option + " : " + navigator[ option] + " " ) ; ) // 객체 탐색기의 특정 속성을 찾는 함수 userDetails () ( document.write (" 브라우저 이름: "+navigator.userAgent+" " ); document.write ("브라우저 언어: " + navigator.언어 + " " ); document.write("OS 이름: " + navigator.oscpu + " " ); document.write (" 쿠키가 활성화되어 있습니까: " + navigator.cookieEnabled + " " ); document.write ("인터넷이 연결되어 있습니까: " + navigator.nLine + " " ) ; ) userDetails() ; |
var 옵션; // (navigator의 옵션)( document.write(option + " : " + navigator+ ")에 대한 navigator 객체의 모든 속성을 표시합니다.
"); ) // 객체 탐색기의 특정 속성을 찾는 함수 userDetails ()( document.write("
브라우저 이름: "+navigator.userAgent+"
"); document.write("브라우저 언어: " + navigator.언어 + "
"); document.write("OS 이름: " + navigator.oscpu + "
"); document.write("쿠키가 활성화되어 있습니까: " + navigator.cookieEnabled + "
"); document.write("인터넷이 연결되어 있습니까: " + navigator.nLine + "
"); ) userDetails();
예제를 사용하여 JavaScript에서 Screen 개체를 사용하는 방법을 살펴보겠습니다.
function userDetails ()( document.write("해상도: " + screen.width + " x " + screen.height + "
"); document.write("색상 심도: " + screen.colorDepth + " x " + screen.height + "
"); ) userDetails();
예제를 사용하여 JavaScript에서 Location 개체를 사용하는 방법을 살펴보겠습니다.
| 1 2 3 4 | function userDetails() ( document.write("로드된 페이지 주소: " + location.href + " " ) ; ) userDetails() ; |
function userDetails ()( document.write("로드된 페이지 주소: " + location.href + "
"); ) userDetails();
결론:
- new 키워드와 함께 표현식을 사용하면 객체의 인스턴스, 즉 객체의 구체적인 인스턴스화를 생성할 수 있습니다.
- 또한, 자바스크립트 프로토타입 속성 덕분에 사용자가 고안했지만 원래 내장 객체에는 없었던 객체에 새로운 속성과 메소드를 추가하는 것이 가능합니다.
- 객체 생성을 사용하여 데이터베이스를 생성할 수 있습니다.