Utilisation des objets intégrés de JavaScript

JavaScript contient un certain nombre d'objets intégrés qui étendent la flexibilité du langage. Ces objets sont Date, Math, String, Array et Object. Plusieurs de ces objets sont «empruntés» à la spécification du langage Java, mais leur implémentation en JavaScript est différente. Si vous êtes familier avec Java, vous voudrez examiner attentivement les types d'objets intégrés à JavaScript pour éviter toute confusion.

Le modèle objet JavaScript est simple. La plupart de ces objets traitent du contenu de la fenêtre - documents, liens, formulaires, etc. En plus des objets de contenu de fenêtre, JavaScript prend en charge une petite poignée d'objets «intégrés». Ces objets intégrés sont disponibles quel que soit le contenu de la fenêtre et fonctionnent indépendamment de la page chargée par votre navigateur.

Apprendre JavaScript

Cet article fait partie de l'archive de contenu technique JavaWorld. Vous pouvez en apprendre beaucoup sur la programmation JavaScript en lisant les articles de la série JavaScript , gardez simplement à l'esprit que certaines informations sont probablement obsolètes. Voir «Utilisation de JavaScript et des formulaires» et «Débogage de programmes JavaScript» pour en savoir plus sur la programmation avec JavaScript.

Les objets intégrés sont Date, Math, String, Array et Object. Chacun est utilisé d'une manière unique et pas tout à fait cohérente. De plus, les nouvelles versions de JavaScript (comme dans Netscape "Atlas", actuellement en version bêta) implémentent plusieurs de ces objets d'une manière différente de celle de Netscape 2.0. Dans cette colonne, nous aborderons ces objets intégrés et comment les utiliser. Et nous noterons les bizarreries que vous rencontrerez lorsque vous appliquez ces objets à vos pages JavaScript.

Comprendre l'objet string

De tous les objets JavaScript, l'objet String est le plus couramment utilisé. Dans l'implémentation JavaScript Netscape 2.0, de nouveaux objets chaîne sont créés implicitement à l'aide d'une affectation de variable. Par exemple,

var myString = "This is a string";

crée une chaîne, avec le texte spécifié, appelée myString.Dans Netscape 2.0, il n'y a pas d'objet réel appelé string, et la tentative d'instancier un nouvel objet String à l'aide de la nouvelle instruction entraîne une erreur, car String (ou string) n'est pas un mot clé défini . Dans la version Atlas de Netscape, cependant, String est un objet de bonne foi et le mot-clé String peut être utilisé pour créer de nouvelles chaînes. Les deux approches suivantes sont autorisées dans Atlas, mais pas dans Netscape 2.0.

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

et

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

Les objets String ont une propriété: length. La propriété length renvoie la longueur de la chaîne et utilise la syntaxe string.length,où string est le nom de la variable chaîne. Les deux affichages suivants 16.

alert ("This is a string".length)

et

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

Bien qu'il puisse y avoir une seule propriété de chaîne, JavaScript prend en charge un grand nombre de méthodes pouvant être utilisées avec des chaînes. Ces méthodes peuvent être grossièrement divisées en deux grands camps: la gestion des chaînes et le format de texte.

En savoir plus sur JavaWorld

Vous voulez plus d'informations sur les entreprises Java? Recevez la newsletter JavaWorld Enterprise Java dans votre boîte de réception.

Les méthodes de gestion de chaîne comprennent substring, indexOf, lastIndexOfet toLowerCase. Ils sont utilisés pour renvoyer ou modifier le contenu de la chaîne d'une manière ou d'une autre. Par exemple, la méthode substring renvoie une partie spécifiée d'une chaîne. La méthode indexOf détermine l'emplacement d'un caractère ou d'un groupe de caractères dans une chaîne. Et la méthode toLowerCase convertit la chaîne en minuscules. (Comme vous pouvez l'imaginer, il existe également une toUpperCaseméthode.)

Les méthodes de formatage de texte sont utilisées pour formater le texte d'un document d'une manière spéciale et sont fournies comme alternatives à l'utilisation de balises HTML dans le même but. Ces méthodes incluent big, small, sup, sub, anchor, link et blink.

Les méthodes de chaîne peuvent être utilisées directement sur des chaînes ou sur des variables contenant des chaînes. Les méthodes utilisent toujours des parenthèses ouvertes et fermées, même si la méthode n'utilise pas de paramètres. Par exemple, pour convertir du texte en majuscules, utilisez l'un des éléments suivants:

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

ou

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

Dans Netscape 2.0, il n'y a qu'un seul objet String et toutes les chaînes sont créées à partir de celui-ci. Inversement, les chaînes sont des objets de première classe dans Atlas et chaque nouvelle chaîne est traitée comme un objet distinct. Le comportement mono-objet des chaînes dans Netscape 2.0 peut provoquer des effets secondaires subtils. Prenez le court segment de script qui suit. Deux chaînes sont créées: string1et string2. Une nouvelle propriété (appelée extra) est affectée à string1. Pourtant, le message d'alerte montre que la propriété appartient désormais également à string2.

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

Techniquement parlant, les chaînes sont "immuables" en JavaScript. Autrement dit, le contenu de la chaîne est statique et ne peut pas être modifié. Dans Netscape 2.0, JavaScript est capable de modifier une chaîne uniquement en créant un nouvel emplacement en mémoire pour celle-ci. Pour cette raison, un script qui modifie une chaîne plusieurs fois est sujet à des erreurs de mémoire. Chaque fois que la chaîne est modifiée, JavaScript crée un nouvel emplacement en mémoire pour la nouvelle version. De nouvelles chaînes sont créées avant le nettoyage de la mémoire pour détruire l'ancienne chaîne. Finalement, JavaScript utilise toute sa mémoire disponible et une erreur "mémoire insuffisante" se produit.

Un exemple classique de ce problème peut être vu dans les "défileurs de messages" JavaScript populaires, où un message défile dans la barre d'état ou une zone de texte. Pour chaque passage, le scroller redéfinit la variable de chaîne qui est affichée. La mémoire est finalement épuisée car JavaScript crée de nouvelles instances de la chaîne à chaque passage. Par exemple, le script suivant provoquera éventuellement (plus tôt sur certaines plates-formes, telles que Windows 3.1) une erreur «mémoire insuffisante»:

 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 } 

Une simple réécriture évite le problème de la création de nouveaux blocs de mémoire. Supprimez l'affectation de variable myString et analysez le texte directement dans la barre d'état, à l'aide de window.status.

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

(Bien que l'approche ci-dessus évite le problème de réplication d'objet chaîne de JavaScript, des fuites de mémoire se produisent toujours en raison de l'utilisation de setTimeout method. Sur de nombreuses itérations - généralement plusieurs milliers ou plus - setTimeout consommera toute la mémoire disponible, et finalement JavaScript affichera un " message "mémoire insuffisante".)

Pour votre référence, voici les méthodes et propriétés utilisées avec l'objet string de JavaScript:

Propriétés de la chaîne

longueur La longueur d'une chaîne

Méthodes de chaîne

ancre Crée une ancre nommée (cible hypertexte)
gros Définit le texte sur grand
cligner Fait clignoter le texte
audacieux Définit le texte en gras
caractère Renvoie le caractère à une position spécifiée
fixé Définit le texte dans une police à pas fixe
couleur de la police Définit la couleur de la police
taille de police Définit la taille de la police
Indice de Renvoie la première occurrence du caractère x à partir de la position y
italique Définit le texte en italique
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'objet Date de JavaScript permet également de définir l'heure et la date de l'objet Date, mais ceux-ci sont rarement utilisés.)

La construction d'un nouvel objet Date peut prendre plusieurs formes. Pour renvoyer un objet contenant la date et l'heure actuelles, vous utilisez l'objet Date sans paramètres. Dans ce qui suit, date_objest un nouvel objet, contenant la valeur de la date et de l'heure actuelles, telles que définies par l'horloge système de l'ordinateur.

var date_obj = new Date();

Vous pouvez également spécifier une date et une heure données dans le cadre du constructeur de date. L'une ou l'autre de ces méthodes est autorisée - les deux définissent le nouvel objet de date sur le 1er janvier 1997, à minuit heure locale.

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

et

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

Pour utiliser une méthode Date, ajoutez la méthode à l'objet date que vous avez créé précédemment. Par exemple, pour renvoyer l'année en cours, utilisez:

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

Pour votre référence, voici les méthodes prises en charge par l'objet Date de JavaScript.