Utilizzo degli oggetti incorporati di JavaScript

JavaScript mette in mostra una serie di oggetti incorporati che estendono la flessibilità del linguaggio. Questi oggetti sono Date, Math, String, Array e Object. Molti di questi oggetti sono "presi in prestito" dalla specifica del linguaggio Java, ma la loro implementazione da parte di JavaScript è diversa. Se hai familiarità con Java, ti consigliamo di esaminare attentamente i tipi di oggetti incorporati di JavaScript per evitare qualsiasi confusione.

Il modello a oggetti JavaScript è semplice. La maggior parte di questi oggetti si occupa del contenuto della finestra: documenti, collegamenti, moduli e così via. Oltre agli oggetti di contenuto finestra, JavaScript supporta una piccola manciata di oggetti "incorporati". Questi oggetti integrati sono disponibili indipendentemente dal contenuto della finestra e funzionano indipendentemente dalla pagina caricata dal browser.

Imparare JavaScript

Questo articolo fa parte dell'archivio dei contenuti tecnici di JavaWorld. Puoi imparare molto sulla programmazione JavaScript leggendo gli articoli della serie JavaScript , ma tieni presente che alcune delle informazioni potrebbero essere obsolete. Vedere "Utilizzo di JavaScript e moduli" e "Debug di programmi JavaScript" per ulteriori informazioni sulla programmazione con JavaScript.

Gli oggetti incorporati sono Date, Math, String, Array e Object. Ciascuno viene utilizzato in modo unico e non del tutto coerente. Inoltre, le versioni più recenti di JavaScript (come si trova in Netscape "Atlas", attualmente in beta) implementano molti di questi oggetti in un modo diverso rispetto a Netscape 2.0. In questa colonna affronteremo questi oggetti incorporati e come usarli. E prenderemo nota delle stranezze che incontrerai quando applicherai questi oggetti alle tue pagine JavaScript.

Capire l'oggetto stringa

Di tutti gli oggetti JavaScript, l'oggetto String è il più comunemente usato. Nell'implementazione JavaScript di Netscape 2.0, i nuovi oggetti stringa vengono creati implicitamente utilizzando un'assegnazione di variabile. Per esempio,

var myString = "This is a string";

crea una stringa, con il testo specificato, chiamata myString.In Netscape 2.0, non esiste un oggetto chiamato stringa e il tentativo di istanziare un nuovo oggetto String utilizzando la nuova istruzione restituisce un errore, poiché String (o stringa) non è una parola chiave definita . Nella versione Atlas di Netscape, tuttavia, String è un oggetto autentico e la parola chiave String può essere utilizzata per creare nuove stringhe. I seguenti due approcci sono consentiti in Atlas, ma non in Netscape 2.0.

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

e

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

Gli oggetti stringa hanno una proprietà: length. La proprietà length restituisce la lunghezza della stringa e utilizza la sintassi in string.length,cui stringa è il nome della variabile stringa. Entrambi i seguenti display 16.

alert ("This is a string".length)

e

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

Sebbene possa essere presente una sola proprietà di stringa, JavaScript supporta un gran numero di metodi che possono essere utilizzati con le stringhe. Questi metodi possono essere approssimativamente suddivisi in due ampi campi: gestione delle stringhe e formato del testo.

Altro da JavaWorld

Desideri altre notizie aziendali su Java? Ricevi la newsletter JavaWorld Enterprise Java consegnata nella tua casella di posta.

Metodi di gestione String includono substring, indexOf, lastIndexOf, e toLowerCase. Questi vengono utilizzati per restituire o modificare in qualche modo il contenuto della stringa. Ad esempio, il metodo della sottostringa restituisce una parte specificata di una stringa. Il metodo indexOf determina la posizione di un carattere o di un gruppo di caratteri in una stringa. E il metodo toLowerCase converte la stringa in minuscolo. (Come puoi immaginare, c'è anche un toUpperCasemetodo.)

I metodi di formattazione del testo vengono utilizzati per formattare il testo in un documento in un modo speciale e sono forniti come alternative all'utilizzo di tag HTML per lo stesso scopo. Questi metodi includono big, small, sup, sub, anchor, link e blink.

I metodi stringa possono essere utilizzati direttamente su stringhe o su variabili che contengono stringhe. I metodi utilizzano sempre parentesi aperte e chiuse, anche se il metodo non utilizza parametri. Ad esempio, per convertire il testo in maiuscolo, dovresti utilizzare uno dei seguenti:

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

o

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

In Netscape 2.0 esiste un solo oggetto String e da esso vengono create tutte le stringhe. Al contrario, le stringhe sono oggetti di prima classe in Atlas e ogni nuova stringa viene trattata come un oggetto separato. Il comportamento a oggetto singolo delle stringhe in Netscape 2.0 può causare alcuni sottili effetti collaterali. Prendi il breve segmento del copione che segue. Vengono create due stringhe: string1e string2. Una nuova proprietà (chiamata extra) viene assegnata a string1. Tuttavia il messaggio di avviso mostra che anche la proprietà ora appartiene a string2.

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

Tecnicamente parlando, le stringhe sono "immutabili" in JavaScript. Ovvero, il contenuto della stringa è statico e non può essere modificato. In Netscape 2.0, JavaScript è in grado di modificare una stringa solo creando una nuova posizione in memoria per essa. Per questo motivo, uno script che modifica una stringa molte volte è soggetto a errori di memoria. Ogni volta che la stringa viene modificata, JavaScript crea una nuova posizione in memoria per la nuova versione. Le nuove stringhe vengono create prima che avvenga la garbage collection per distruggere la vecchia stringa. Alla fine, JavaScript utilizza tutta la memoria disponibile e si verifica un errore di "memoria insufficiente".

Un classico esempio di questo problema può essere visto nei popolari "scrutatori di messaggi" JavaScript, in cui un messaggio scorre nella barra di stato o in una casella di testo. Per ogni passaggio, lo scroller ridefinisce la variabile stringa visualizzata. Alla fine la memoria si esaurisce perché JavaScript crea nuove istanze della stringa a ogni passaggio. Ad esempio, il seguente script alla fine (prima su alcune piattaforme, come Windows 3.1) causerà un errore di "memoria insufficiente":

 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 } 

Una semplice riscrittura evita il problema di creare nuovi blocchi di memoria. Elimina l'assegnazione della variabile myString e analizza il testo direttamente sulla barra di stato, utilizzando window.status.

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

(Sebbene l'approccio precedente eviti il ​​problema della replica di oggetti stringa di JavaScript, si verificano ancora perdite di memoria a causa dell'uso di setTimeout method. Nel corso di molte iterazioni, in genere diverse migliaia o più, setTimeout consumerà tutta la memoria disponibile e alla fine JavaScript visualizzerà un " messaggio di memoria esaurita.)

Come riferimento, ecco i metodi e le proprietà utilizzati con l'oggetto stringa di JavaScript:

Proprietà stringa

lunghezza La lunghezza di una stringa

Metodi di stringa

ancora Crea un'ancora con nome (destinazione ipertestuale)
grande Imposta il testo in grande
sbattere le palpebre Imposta il testo in modo che lampeggi
grassetto Imposta il testo in grassetto
charAt Restituisce il carattere in una posizione specificata
fisso Imposta il testo con carattere a passo fisso
colore del carattere Imposta il colore del carattere
dimensione del font Imposta la dimensione del carattere
indice di Restituisce la prima occorrenza del carattere x a partire dalla posizione y
corsivo Imposta il testo in corsivo
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)

(L'oggetto Date di JavaScript fornisce anche l'impostazione dell'ora e della data dell'oggetto Date, ma questi sono usati raramente.)

La costruzione di un nuovo oggetto Date può assumere diverse forme. Per restituire un oggetto contenente la data e l'ora correnti, si utilizza l'oggetto Date senza parametri. Di seguito date_objè riportato un nuovo oggetto, contenente il valore della data e dell'ora correnti, come impostato dall'orologio di sistema del computer.

var date_obj = new Date();

In alternativa, è possibile specificare una data e un'ora come parte del costruttore della data. Uno di questi metodi è consentito: entrambi impostano il nuovo oggetto data al 1 gennaio 1997, a mezzanotte, ora locale.

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

e

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

Per utilizzare un metodo Date, aggiungi il metodo all'oggetto data creato in precedenza. Ad esempio, per restituire l'anno corrente, usa:

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

Come riferimento, ecco i metodi supportati dall'oggetto Date di JavaScript.