JavaScript의 내장 객체 사용

JavaScript는 언어의 유연성을 확장하는 여러 내장 객체를 자랑합니다. 이러한 개체는 날짜, 수학, 문자열, 배열 및 개체입니다. 이러한 객체 중 일부는 Java 언어 사양에서 "차용"되었지만 JavaScript의 구현 방식은 다릅니다. Java에 익숙하다면 혼동을 피하기 위해 JavaScript의 내장 객체 유형을주의 깊게 검토해야합니다.

JavaScript 객체 모델은 간단합니다. 이러한 개체의 대부분은 문서, 링크, 양식 등의 창 내용을 처리합니다. 윈도우 콘텐츠 객체 외에도 JavaScript는 소수의 "내장"객체를 지원합니다. 이러한 기본 제공 개체는 창 내용에 관계없이 사용할 수 있으며 브라우저가로드 한 페이지에 관계없이 독립적으로 작동합니다.

JavaScript 배우기

이 기사는 JavaWorld 기술 컨텐츠 아카이브의 일부입니다. JavaScript 시리즈의 기사를 읽으면 JavaScript 프로그래밍에 대해 많은 것을 배울 수 있습니다. 일부 정보는 구식 일 가능성이 있음을 명심하십시오. JavaScript를 사용한 프로그래밍에 대한 자세한 내용은 "JavaScript 및 양식 사용"및 "JavaScript 프로그램 디버깅"을 참조하십시오.

기본 제공 개체는 날짜, 수학, 문자열, 배열 및 개체입니다. 각각은 독특하고 일관성이없는 방식으로 사용됩니다. 또한 최신 버전의 JavaScript (현재 베타 버전 인 Netscape "Atlas"에 있음)는 Netscape 2.0 에서와는 다른 방식으로 이러한 개체 중 일부를 구현합니다. 이 칼럼에서는 이러한 내장 개체와 사용 방법에 대해 설명합니다. 그리고 이러한 개체를 JavaScript 페이지에 적용 할 때 발생하는 단점을 기록 할 것입니다.

문자열 객체 이해

모든 자바 스크립트 객체 중에서 String 객체가 가장 일반적으로 사용됩니다. Netscape 2.0 JavaScript 구현에서 새 문자열 객체는 변수 할당을 사용하여 암시 적으로 생성됩니다. 예를 들면

var myString = "This is a string";

라는 지정된 텍스트와 문자열을 생성 myString.넷스케이프 2.0에서는이 문자열이라는 실제 객체가없고, 문자열 (또는 문자열)와 같은 오류에 새로운 문 결과를 사용하여 새 문자열 객체를 생성하려고 시도하는 것은 정의 키워드 아니다 . 그러나 Netscape의 Atlas 버전에서 String은 진정한 객체이며 String 키워드를 사용하여 새 문자열을 만들 수 있습니다. 다음 두 가지 접근 방식은 Atlas에서 허용되지만 Netscape 2.0에서는 허용되지 않습니다.

var myString = new String(); myString = "This is a string";

var myString = new String ("This is a string");

문자열 객체에는 길이라는 하나의 속성이 있습니다. length 속성은 문자열의 길이를 반환하고 string.length,string이 문자열 변수의 이름 인 구문을 사용합니다 . 다음 디스플레이 모두 16.

alert ("This is a string".length)

var myString = "This is a string"; alert (myString.length);

문자열 속성이 하나만있을 수 있지만 JavaScript는 문자열과 함께 사용할 수있는 많은 메서드를 지원합니다. 이러한 방법은 크게 문자열 관리와 텍스트 형식의 두 가지 범주로 나눌 수 있습니다.

JavaWorld의 더보기

더 많은 Java 엔터프라이즈 뉴스를 원하십니까? 받은 편지함으로 전달되는 JavaWorld Enterprise Java 뉴스 레터를 받으십시오.

문자열 관리 방법은 다음과 같습니다 substring, indexOf, lastIndexOf,와 toLowerCase. 이들은 어떤 식 으로든 문자열의 내용을 반환하거나 변경하는 데 사용됩니다. 예를 들어 하위 문자열 메서드는 문자열의 지정된 부분을 반환합니다. indexOf 메서드는 문자열에서 문자 또는 문자 그룹의 위치를 ​​결정합니다. 그리고 toLowerCase 메서드는 문자열을 소문자로 변환합니다. (상상할 수 있듯이 toUpperCase방법도 있습니다.)

텍스트 서식 방법은 문서의 텍스트 서식을 특정 방식으로 지정하는 데 사용되며 동일한 용도로 HTML 태그를 사용하는 대신 제공됩니다. 이러한 방법에는 big, small, sup, sub, anchor, link 및 blink가 포함됩니다.

문자열 메서드는 문자열 또는 문자열을 포함하는 변수에서 직접 사용할 수 있습니다. 메서드는 매개 변수를 사용하지 않더라도 항상 여는 괄호와 닫힌 괄호를 사용합니다. 예를 들어 텍스트를 대문자로 변환하려면 다음 중 하나를 사용합니다.

var tempVar = "this text is now upper case".toUpperCase();

또는

var myString = "this text is now upper case"; var tempVar = myString.toUpperCase();

Netscape 2.0에는 하나의 String 개체 만 있으며 모든 문자열이 여기에서 생성됩니다. 반대로 문자열은 Atlas에서 일류 객체이며 각각의 새로운 문자열은 별도의 객체로 취급됩니다. Netscape 2.0에서 문자열의 단일 객체 동작은 약간의 부작용을 일으킬 수 있습니다. 다음에 나오는 짧은 스크립트 부분을 살펴보십시오. 두 개의 문자열이 생성됩니다 : string1string2. 새 속성 (추가라고 함)이 string1에 할당됩니다. 그러나 경고 메시지는 속성이 이제 string2에도 속함을 보여줍니다.

 string1 = "this is string 1" string2 = "this is string 2" string1.extra = "new property" alert (string2.extra) 

기술적으로 말하면 문자열은 JavaScript에서 "불변"합니다. 즉, 문자열의 내용은 정적이며 변경할 수 없습니다. Netscape 2.0에서 JavaScript는 메모리에 새 위치를 만들어야 만 문자열을 수정할 수 있습니다. 이 때문에 문자열을 여러 번 수정하는 스크립트는 메모리 오류가 발생하기 쉽습니다. 문자열이 변경 될 때마다 JavaScript는 새 버전을 위해 메모리에 새 위치를 만듭니다. 이전 문자열을 파괴하기 위해 가비지 콜렉션이 발생하기 전에 새 문자열이 작성됩니다. 결국 JavaScript는 사용 가능한 모든 메모리를 사용하고 "메모리 부족"오류가 발생합니다.

이 문제의 전형적인 예는 상태 표시 줄이나 텍스트 상자에서 메시지가 스크롤되는 인기있는 JavaScript "메시지 스크롤러"에서 볼 수 있습니다. 각 패스에 대해 스크롤러는 표시되는 문자열 변수를 재정의합니다. JavaScript는 각 패스마다 문자열의 새 인스턴스를 만들기 때문에 결국 메모리가 고갈됩니다. 예를 들어, 다음 스크립트는 결국 (Windows 3.1과 같은 일부 플랫폼에서 더 빨리) "메모리 부족"오류를 발생시킵니다.

 var count = 0; var text = "This is a test of a JavaScript scroller. "; scroll(); function scroll () { var myString = text.substring (count, text.length) + text.substring (0, count) window.status = myString if (count < text.length) count ++; else count = 0; setTimeout ("scroll()", 333); // 333ms is the minimum delay for Netscape 2.0 } 

간단한 재 작성은 새로운 메모리 블록 생성 문제를 방지합니다. myString 변수 할당을 삭제하고 window.status를 사용하여 텍스트를 상태 표시 줄에 직접 구문 분석합니다.

window.status = text.substring (count, text.length) + text.substring (0, Count)

(위의 접근 방식은 JavaScript의 문자열-객체 복제 문제를 피할 수 있지만, setTimeout method. 메모리 부족 "메시지.)

참고로 JavaScript의 문자열 객체에 사용되는 메서드와 속성은 다음과 같습니다.

문자열 속성

길이 문자열의 길이

문자열 방법

명명 된 앵커 (하이퍼 텍스트 대상)를 만듭니다.
텍스트를 크게 설정
힐끔 보다 텍스트를 깜박임으로 설정
굵게 텍스트를 굵게 설정
문자 지정된 위치에있는 문자를 반환합니다.
결정된 고정 피치 글꼴로 텍스트 설정
글자 색 글꼴 색상을 설정합니다
글꼴 크기 글꼴 크기 설정
indexOf 위치 y에서 시작하는 첫 번째 문자 x를 반환합니다.
기울임 꼴 텍스트를 기울임 꼴로 설정합니다.
lastIndexOf Returns the last occurrence of character x starting from position y
link Creates a hyperlink
small Sets text to small
strike Sets text to strikeout
sub Sets text to subscript
substring Returns a portion of a string
sup Sets text to superscript
toLowerString Converts a string to lowercase
toUpperString Converts a string to uppercase

Using JavaScript as a scientific calculator

JavaScript's Math object provides advanced arithmetic and trigonometric functions, expanding on JavaScript's basic arithmetic operators (plus, minus, multiply, divide). The Math object in JavaScript is borrowed from Java. In fact, the implementation of the Math object in JavaScript closely parallels the Math class in Java, except that the JavaScript Math object offers fewer methods.

JavaScript's Math object properties are treated as constants. In fact, the property names are in all upper-case, following the usual convention of capitalizing variable constants. These properties return often-used values, including pi and the square root of 2. The Math methods are used in mathematical and trigonometric calculations. Handy Math-object methods include ceil, floor, pow, exp (exponent), max, min, round, and random. (Random is only available when using the X Window platform, however.)

The Math object is static, so you don't need to create a new Math object in order to use it. To access the properties and method of the Math object, you merely specify the Math object, along with the method or property you wish. For example, to return the value of pi, you use:

var pi = Math.PI;

Similarly, to use a math method you provide the name of the method, along with the parameters you wish to use. For example, to round the value of pi, you'd use:

var pi = Math.PI; var pieAreRound = Math.round(pi); // displays 3

Note that you must specify the Math object by name for each Math method/property you wish to use. JavaScript does not recognize the keywords PI and round all by themselves. Exception: you may use the with statement to associate the names of methods and properties with the Math object. This technique is a handy space-saver when you must use several Math properties and methods. The previous example can be written as

with (Math) { var pi = PI; var pieAreRound = round(pi); alert (pieAreRound) }

For your reference, here are the properties and methods supported by JavaScript's Math object.

Math Properties

E Euler's constant
LN2 The natural logarithm of 2
LN10 The natural logarithm of 10
LOG2E The base 2 logarithm of e
LOG10E The base 10 logarithm of e
PI The numeric equivalent of PI: 3.14 etc.
SQRT1_2 The square root of one-half
SQRT2 The square root of 2

Math Methods

abs Returns the absolute value of a number
acos Returns the arc cosine of a number
asin Returns the arc sine of a number
atan Returns the arc tangent of a number
ceil Returns the least integer greater than or equal to a number
cos Returns the cosine of a number
exp Returns e (Euler's constant) to the power of a number
floor Returns the greatest integer less than or equal to its argument
log Returns the natural logarithm (base e) of a number
max Returns the greater of two values
min Returns the lesser of two values
pow Returns the value of a number times a specified power
random Returns a random number (X-platforms only)
round Returns a number rounded to the nearest whole value
sin Returns the sine of a number
sqrt Returns the square root of a number
tan Returns the tangent of a number

Asking JavaScript for a date

Also borrowed by Java is the Date object, which can be used in JavaScript to determine the current time and date. A popular JavaScript application of the Date object is displaying a digital clock in a text box. The script uses the Date object to update the clock once every second. You also use the Date object to perform date math. For example, your script might determine the number of days between now and a certain future date. You can use this to display a "countdown," such as the number of days left of your company's big sale.

JavaScript treats the Date object like a constructor class. To use Date you must create a new Date object; you can then apply the various Date methods to get and set dates. (The Date object has no properties.) If you're familiar with the Date class in Java, you'll find the properties of the JavaScript Date object largely the same. The most commonly used methods are the get methods, which obtain the time and date of the value in the Date object. These methods are:

  • getHours() - Returns the hour
  • getMinutes() - Returns the minutes
  • getSeconds() - Returns the seconds
  • getYear() - Returns the year ("96" is 1996)
  • getMonth() - Returns the month ("0" is January)
  • getDate() - Returns the day of the month
  • getDay() - Returns the day of the week ("0" is Sunday)

(JavaScript의 Date 객체는 Date 객체의 시간과 날짜 설정을 제공하지만 거의 사용되지 않습니다.)

새로운 Date 객체를 생성하는 것은 여러 형태를 취할 수 있습니다. 현재 날짜와 시간이 포함 된 객체를 반환하려면 매개 변수없이 Date 객체를 사용합니다. 다음 date_obj은 컴퓨터의 시스템 시계에서 설정 한 현재 날짜 및 시간 값을 포함하는 새 개체입니다.

var date_obj = new Date();

또는 날짜 생성자의 일부로 주어진 날짜와 시간을 지정할 수 있습니다. 이러한 방법 중 하나가 허용됩니다. 둘 다 새 날짜 개체를 1997 년 1 월 1 일 자정 현지 시간으로 설정합니다.

var date_obj = new Date ("January 1 1997 00:00:00")

var date_obj = new Date (97, 0, 1, 12, 0, 0)

Date 메서드를 사용하려면 이전에 만든 날짜 개체에 메서드를 추가합니다. 예를 들어 현재 연도를 반환하려면 다음을 사용합니다.

var now = new Date(); var yearNow = now.getYear();

참고로 JavaScript의 Date 객체에서 지원하는 메서드는 다음과 같습니다.