Menggunakan objek terbina dalam JavaScript

JavaScript menggunakan sebilangan objek bawaan yang memperluas kelenturan bahasa. Objek-objek ini adalah Tarikh, Matematik, Rentetan, Array, dan Objek. Beberapa objek ini "dipinjam" dari spesifikasi bahasa Java, tetapi pelaksanaan JavaScript terhadapnya berbeda. Sekiranya anda sudah biasa dengan Java, anda mesti memeriksa dengan teliti jenis objek bawaan JavaScript untuk mengelakkan kekeliruan.

Model objek JavaScript adalah mudah. Sebilangan besar objek ini berkaitan dengan kandungan tetingkap - dokumen, pautan, borang, dan sebagainya. Selain objek kandungan tetingkap, JavaScript menyokong segelintir kecil objek "bawaan". Objek terbina dalam ini tersedia tanpa mengira kandungan tetingkap dan beroperasi secara berasingan dari halaman apa pun yang dimuatkan oleh penyemak imbas anda.

Belajar JavaScript

Artikel ini adalah sebahagian daripada arkib kandungan teknikal JavaWorld. Anda dapat belajar banyak tentang pengaturcaraan JavaScript dengan membaca artikel dalam siri JavaScript , hanya perlu diingat bahawa beberapa maklumat mungkin sudah ketinggalan zaman. Lihat "Menggunakan JavaScript dan bentuk" dan "Program Debugging JavaScript" untuk lebih lanjut mengenai pengaturcaraan dengan JavaScript.

Objek terbina dalam adalah Date, Math, String, Array, dan Object. Masing-masing digunakan dengan cara yang unik dan tidak cukup konsisten. Selanjutnya, versi JavaScript yang lebih baru (seperti yang terdapat di Netscape "Atlas," yang kini dalam versi beta) menerapkan beberapa objek ini dengan cara yang berbeda daripada di Netscape 2.0. Di ruangan ini kita akan membincangkan objek terbina dalam ini dan cara menggunakannya. Dan kami akan mencatat kebiasaan yang akan anda hadapi semasa anda menerapkan objek ini ke halaman JavaScript anda.

Memahami objek tali

Dari semua objek JavaScript, objek String adalah yang paling biasa digunakan. Dalam pelaksanaan Netscape 2.0 JavaScript, objek rentetan baru dibuat secara implisit menggunakan tugasan berubah. Sebagai contoh,

var myString = "This is a string";

membuat rentetan, dengan teks yang ditentukan, disebut myString.Dalam Netscape 2.0, tidak ada objek sebenarnya yang disebut string, dan berusaha untuk membuat objek String baru menggunakan pernyataan baru menghasilkan kesalahan, kerana String (atau string) bukan kata kunci yang ditentukan . Dalam versi Atlas Netscape, String adalah objek yang baik, dan kata kunci String dapat digunakan untuk membuat rentetan baru. Dua pendekatan berikut dibenarkan di Atlas, tetapi tidak di Netscape 2.0.

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

dan

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

Objek tali mempunyai satu sifat: panjang. Properti panjang mengembalikan panjang rentetan dan menggunakan sintaks string.length,di mana tali adalah nama pemboleh ubah rentetan. Kedua-dua paparan berikut 16.

alert ("This is a string".length)

dan

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

Walaupun mungkin hanya terdapat satu sifat tali, JavaScript menyokong sebilangan besar kaedah yang dapat digunakan dengan tali. Kaedah-kaedah ini dapat dibahagikan secara kasar kepada dua kubu luas: pengurusan rentetan dan format teks.

Lagi dari JavaWorld

Mahukan lebih banyak berita perusahaan Java? Dapatkan buletin JavaWorld Enterprise Java ke peti masuk anda.

Kaedah pengurusan rentetan termasuk substring, indexOf, lastIndexOf, dan toLowerCase. Ini digunakan untuk mengembalikan atau mengubah kandungan rentetan dengan beberapa cara. Sebagai contoh, kaedah substring mengembalikan bahagian rentetan yang ditentukan. Kaedah indexOf menentukan lokasi watak atau kumpulan watak dalam rentetan. Dan kaedah toLowerCase menukar rentetan menjadi huruf kecil. (Seperti yang anda bayangkan, ada juga toUpperCasemetode.)

Kaedah format teks digunakan untuk memformat teks dalam dokumen dengan cara khusus, dan disediakan sebagai alternatif untuk menggunakan tag HTML untuk tujuan yang sama. Kaedah ini merangkumi besar, kecil, sup, sub, jangkar, pautan, dan berkedip.

Kaedah tali boleh digunakan secara langsung pada rentetan, atau pada pemboleh ubah yang mengandungi rentetan. Kaedah selalu menggunakan tanda kurung terbuka dan tertutup, walaupun kaedah tersebut tidak menggunakan parameter. Sebagai contoh, untuk menukar teks menjadi huruf besar, anda akan menggunakan salah satu daripada yang berikut:

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

atau

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

Di Netscape 2.0 hanya terdapat satu objek String, dan semua tali dibuat daripadanya. Sebaliknya, tali adalah objek kelas pertama di Atlas, dan setiap tali baru diperlakukan sebagai objek yang terpisah. Tingkah laku objek tunggal tali dalam Netscape 2.0 boleh menyebabkan beberapa kesan sampingan yang halus. Ikuti segmen skrip pendek yang berikut. Dua tali dibuat: string1dan string2. Harta baru (disebut tambahan) diberikan kepada string1. Namun mesej amaran menunjukkan bahawa harta itu sekarang milik string2.

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

Secara teknikal, rentetan "tidak berubah" dalam JavaScript. Maksudnya, kandungan rentetan statik, dan tidak dapat diubah. Dalam Netscape 2.0, JavaScript mampu mengubah rentetan hanya dengan membuat lokasi baru dalam memori untuknya. Oleh kerana itu, skrip yang mengubah rentetan berkali-kali terdedah kepada kesalahan ingatan. Setiap kali rentetan diubah, JavaScript membuat lokasi baru dalam memori untuk versi baru. Tali baru dibuat sebelum pengumpulan sampah dilakukan untuk memusnahkan tali lama. Akhirnya, JavaScript menggunakan semua memori yang ada, dan ralat "kehabisan memori" berlaku.

Contoh klasik masalah ini dapat dilihat dalam "scrollers mesej" JavaScript yang popular di mana mesej menatal di bar status atau kotak teks. Untuk setiap hantaran, scroller mentakrifkan semula variabel rentetan yang dipaparkan. Memori akhirnya habis kerana JavaScript membuat contoh rentetan baru dengan setiap hantaran. Sebagai contoh, skrip berikut akhirnya (lebih cepat di beberapa platform, seperti Windows 3.1) menyebabkan ralat "kehabisan memori":

 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 } 

Penulisan semula yang sederhana dapat mengelakkan masalah membuat blok memori baru. Padamkan tugasan pemboleh ubah myString, dan huraikan teks terus ke bar status, menggunakan window.status.

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

(Walaupun pendekatan di atas menghindari masalah replikasi objek string-JavaScript, kebocoran memori masih terjadi karena penggunaan setTimeout method. Lebih dari banyak iterasi - biasanya beberapa ribu atau lebih - setTimeout akan menghabiskan semua memori yang tersedia, dan akhirnya JavaScript akan menampilkan " kehabisan memori ".)

Untuk rujukan anda, berikut adalah kaedah dan sifat yang digunakan dengan objek rentetan JavaScript:

Hartanah Rentetan

panjang Panjang tali

Kaedah Rentetan

sauh Membuat sauh bernama (sasaran hiperteks)
besar Menetapkan teks menjadi besar
sekelip mata Menetapkan teks untuk berkelip
berani Menetapkan teks menjadi tebal
charAt Mengembalikan watak pada kedudukan yang ditentukan
tetap Menetapkan teks dalam fon nada tetap
warna huruf Menetapkan warna fon
Saiz huruf Menetapkan saiz fon
Indeks Mengembalikan kejadian pertama watak x bermula dari kedudukan y
huruf miring Menetapkan teks kepada huruf miring
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)

(Objek Tarikh JavaScript juga menyediakan untuk menetapkan waktu dan tarikh objek Tarikh, tetapi ini jarang digunakan.)

Membina objek Tarikh baru boleh mengambil beberapa bentuk. Untuk mengembalikan objek yang mengandungi tarikh dan waktu semasa, anda menggunakan objek Tarikh tanpa parameter. Berikut ini, date_objadalah objek baru, yang berisi nilai tarikh dan waktu semasa, seperti yang ditetapkan oleh jam sistem komputer.

var date_obj = new Date();

Sebagai alternatif, anda boleh menentukan tarikh dan masa tertentu sebagai sebahagian daripada pembangun tarikh. Salah satu kaedah ini dibenarkan - kedua-duanya menetapkan objek tarikh baru menjadi 1 Januari 1997, pada tengah malam waktu tempatan.

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

dan

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

Untuk menggunakan kaedah Date, tambahkan kaedah tersebut ke objek tarikh yang anda buat sebelumnya. Contohnya, untuk mengembalikan tahun semasa, gunakan:

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

Untuk rujukan anda, berikut adalah kaedah yang disokong oleh objek Tarikh JavaScript.