Donde se genera el objeto data js. ¿Cómo puedo acceder y procesar objetos anidados, matrices o JSON? Qué hacer si desconozco la “profundidad” de la estructura de datos
Hay tres tipos de objetos en JavaScript: objetos integrados, objetos del navegador y objetos que el programador crea él mismo (Figura 2.1).
Arroz. 2.1. Objetos en JavaScript
Cada uno de estos tipos tiene su propio propósito y sus propias características.
Objetos incorporadosA continuación, enumeramos los objetos integrados cuyas propiedades y métodos están disponibles en scripts JavaScript sin definir primero estos objetos:
Aquí, * indica objetos integrados definidos en Microsoft JScript versión 3.0. Esta versión está implementada en la versión 4.0 del navegador Microsoft Internet Explorer.
Los objetos integrados son muy convenientes para realizar diversas operaciones con cadenas, fechas del calendario, matrices, números, etc. Liberan al programador de realizar diversas operaciones de rutina, como convertir cadenas o calcular funciones matemáticas.
¿Cómo trabajar con objetos integrados?
Suficientemente simple. El programa crea instancias de objetos y luego accede a las propiedades y métodos de los objetos.
Como ejemplo práctico, considere un documento HTML que muestra la fecha y hora actuales. El texto fuente de este documento se puede encontrar en el Listado 2.1.
Listado 2.1. Archivo capítulo2/fecha/fecha.html
Mostrar fecha y hora Mostrar fecha y horaAquí, el script JavaScript crea un objeto de datos usando la nueva palabra clave, familiar para todos los fanáticos de C++, y el constructor Date sin parámetros:
var dt; dt = nueva fecha();El objeto de datos creado de esta manera se inicializa con la fecha local actual del usuario (no con el servidor web desde el que se descargó el documento HTML correspondiente).
La siguiente línea genera una cadena de texto de fecha:
szDate = "Fecha: " + dt.getDate() + "." + dt.getMonth() + "." +dt.getAño();El valor de la fecha del calendario, el número de mes y el número de año se obtienen aquí utilizando los métodos getDate, getMonth y getYear, respectivamente. Estos métodos se llaman en un objeto dt que contiene la fecha actual.
La cadena de texto de fecha se envía al documento HTML utilizando el método de escritura definido en el objeto del documento:
documento.write(szDate);Ya hemos utilizado este método en los escenarios de ejemplo presentados en el primer capítulo de nuestro libro.
Tenga en cuenta que el objeto Fecha también contiene información sobre la hora actual. Esta información se recupera para su visualización mediante los métodos getHours, getMinutes y getSeconds (horas, minutos y segundos, respectivamente):
document.write("Hora: " + dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds());La apariencia de un documento HTML cuando se ve en la ventana del navegador Microsoft Internet Explorer versión 4.0 se muestra en la Fig. 2.2.
Arroz. 2.2. Ver fecha y hora locales
Demostraremos el uso de otros objetos incorporados más adelante a medida que estudiemos el material.
Objetos del navegadorDesde una perspectiva de JavaScript, el navegador parece ser una colección de objetos organizada jerárquicamente. Al acceder a las propiedades y métodos de estos objetos, puede realizar varias operaciones en la ventana del navegador, el documento HTML cargado en esta ventana, así como en objetos individuales colocados en el documento HTML. Por ejemplo, puede crear nuevas ventanas del navegador cargando documentos HTML en ellas, generar dinámicamente el texto de un documento HTML, acceder a campos de formulario definidos en un documento HTML, etc.
Los objetos del navegador son la interfaz a través de la cual JavaScript interactúa con el usuario y el documento HTML cargado en la ventana del navegador, así como con el propio navegador. En JavaScript, no puede crear nuevas clases basadas en las clases correspondientes a estos objetos, pero las propiedades y métodos de los objetos del navegador están disponibles para usted.
Jerarquía de objetos del navegadorLa jerarquía de los objetos del navegador se muestra esquemáticamente en la Fig. 2.2.
Arroz. 2.2. Jerarquía de objetos del navegador
El objeto de ventana está en la raíz de la jerarquía. Cuando se carga un documento HTML en una ventana del navegador, se crean otros objetos dentro de ese objeto: documento, padre, marco, ubicación y parte superior.
Si se carga un documento HTML con marcos en una ventana del navegador, se crea una ventana separada para cada marco y esta ventana se crea como un objeto de ventana.
El objeto del documento contiene otros objetos, cuya composición está completamente determinada por el documento HTML cargado en la ventana del navegador. Pueden ser formularios, enlaces a otros documentos HTML o enlaces locales dentro del mismo documento, objetos que definen la URL del documento, etc.
Si el documento contiene formularios, también se representan como un conjunto jerárquico de objetos. Un objeto de formulario puede contener objetos como botones, interruptores y campos para ingresar información de texto.
Al acceder a las propiedades de los objetos enumerados anteriormente, un script JavaScript puede determinar varias características de un documento HTML, como el título. Tiene acceso a todos los enlaces colocados en el documento, así como al contenido de los campos del formulario definidos en el documento HTML.
Eventos relacionados con objetos.Hagamos una nota más muy importante con respecto a los objetos del navegador.
Cada uno de estos objetos está asociado con un conjunto específico de eventos, cuyo procesamiento es posible en un script JavaScript.
Por ejemplo, los eventos onLoad y onUnload están asociados con el objeto de ventana. El primero de estos eventos ocurre cuando el navegador termina de cargar la ventana y todos los marcos que contiene (si esos marcos están definidos en la ventana). El segundo evento ocurre cuando el usuario finaliza el documento cerrando la ventana del navegador o cambiando a otro documento.
El script JavaScript podría, por ejemplo, mostrar un mensaje de bienvenida al usuario o solicitar información adicional al manejar el evento onLoad. Cuando finaliza una ventana (cuando se genera el evento onUnload), el script puede liberar cualquier recurso asociado con esa ventana o mostrar un mensaje en la pantalla del monitor.
Los eventos también están asociados con otros objetos del navegador. Hablaremos de ellos al describir estos objetos.
Objetos basados en clases creadas por el programador.Numerosos libros para principiantes en el lenguaje de programación C++ sugieren imaginar una clase como una estructura de datos, donde, además de los campos ordinarios, se definen métodos de funciones para trabajar con estos datos. Entonces, en el lenguaje JavaScript, se utiliza exactamente el método opuesto para crear sus propias clases.
Una clase de JavaScript se crea como una función que define propiedades que actúan como datos. En cuanto a los métodos, también se definen como funciones, pero por separado.
Pongamos un ejemplo específico.
Digamos que necesitamos crear una clase para contener una entrada de base de datos telefónica imaginaria. En esta clase, debemos proporcionar propiedades para almacenar nombre, apellido, número de teléfono, dirección, así como un atributo especial para registros que están protegidos contra el acceso no autorizado. Además, es necesario desarrollar métodos diseñados para mostrar el contenido de un objeto en forma tabular, como se muestra en la Fig. 2.3.
Arroz. 2.3. Ver el contenido de las publicaciones.
En primer lugar, creemos nuestra propia clase llamada myRecord. Puede que aún no tenga ningún método, los agregaremos más adelante.
La clase requerida se crea de la siguiente manera:
función myRecord(nombre, familia, teléfono, dirección) ( this.name = nombre; this.family = familia; this.phone = teléfono; this.address = dirección; this.secure = false; )Es fácil ver que la descripción de nuestra clase no es más que una función constructora. Los parámetros del constructor están destinados a establecer las propiedades de un objeto cuando se crea en función de una clase.
Las propiedades se definen mediante simples referencias a sus nombres, seguidas de la palabra clave this. Esta palabra clave aquí indica que la declaración hace referencia a las propiedades del objeto para el cual se llama al constructor, es decir, el objeto que se está creando.
Observe que nuestro constructor inicializa una propiedad llamada segura en falso. El parámetro correspondiente no se proporciona en el constructor, lo cual es bastante aceptable.
¿Cómo utilizar una clase específica?
Según esta clase, puede crear una cantidad arbitraria de objetos. A continuación proporcionamos un fragmento de un script JavaScript, donde se crean dos objetos rec1 y rec2 basados en la clase myRecord:
var rec1; var rec2; rec1 = new myRecord("Ivan", "Ivanov", "000-322-223", "Calle Malaya Bolshaya, 225, apto. 226"); rec2 = new myRecord("Petr", "Petrov", "001-223-3334", "Calle Bolshaya Malaya, 552, apto. 662"); rec2.secure = verdadero;Los objetos se crean utilizando el nuevo operador, familiar para quienes han escrito programas en C++ y Java. Aquí pasamos parámetros al constructor para inicializar las propiedades de los objetos creados.
En cuanto a la propiedad denominada seguridad, en el objeto rec2 se inicializa después de crear este último. Se escribe en él el valor verdadero. No cambiamos la propiedad segura del objeto rec1, por lo que se almacena como falso.
Ahora nuestra tarea es agregar nuevos métodos llamados printTableHead, printTableEnd y printRecord a la clase que definimos. Los dos primeros de estos métodos generan en el documento HTML, respectivamente, el fragmento inicial y final de la tabla, y el tercero, las filas de la tabla que reflejan el contenido de los registros.
La nueva definición de la clase myRecord se resume a continuación:
función printTableHead() ( . . . ) función printTableEnd() ( . . . ) función printRecord() ( . . . ) función myRecord(nombre, familia, teléfono, dirección) ( this.name = nombre; this.family = familia ; este.teléfono = teléfono; este.secure = falso; este.printTableHead;Aquí, antes de la definición del constructor, hemos colocado definiciones para los métodos de función de nuestra clase. Además, se ha añadido la definición de nuevas propiedades al constructor:
this.printRecord = imprimirRegistro; this.printTableHead = imprimirTableHead; this.printTableEnd = imprimirTableEnd;Una vez que la clase está definida de esta manera, puedes crear objetos y llamar a métodos específicos:
rec1.printTableHead(); rec1.printRecord(); rec1.printTableEnd(); rec2.printTableHead(); rec2.printRecord(); rec2.printTableEnd();Volviendo al documento mostrado arriba en la Fig. 2.3, presentamos su texto fuente completo (Listado 2.2).
Listado 2.2. Archivo capítulo2/NewObject/NewObject.html
Ver entradas Ver entradasColocamos la definición de la nueva clase myRecord y sus métodos en el área del encabezado del documento HTML, como es habitual.
El método printTableHead imprime el encabezado de la tabla en un documento HTML. La apariencia de este encabezado depende del contenido de las propiedades del objeto.
Primero, el método printTableHead verifica la propiedad segura y obtiene su valor usando la palabra clave this:
var szSec = ""; if(this.secure) szSec = "(Seguro)"; else szSec = " (No seguro)".fontcolor("rojo");Aquí esta palabra clave significa que es necesario utilizar la propiedad del objeto para el cual se llamó al método printTableHead.
Si el contenido de la propiedad segura es verdadero, la cadena "(Secure)" se escribe en la variable de texto szSec. Si es falso, la cadena "(No seguro)" se escribe en esta variable y el color de la cadena se establece en rojo.
Dado que en JavaScript todas las cadenas de texto (incluidos los literales) son objetos de la clase String incorporada, puede llamar a métodos definidos en esta clase para ellos. En particular, el método fontcolor te permite establecer el color de una línea, que es el que usamos.
A continuación, el método printTableHead genera la declaración en el documento HTML.
"); }
El último método definido en nuestra clase se llama printRecord. Imprime el contenido de las primeras cuatro propiedades del objeto como una fila de la tabla definida en el documento HTML mediante la función printTableHead que acabamos de describir.
Tenga en cuenta que el contenido de las propiedades del objeto está impreso en cursiva, por lo que llamamos al método de cursiva:
documento.escribir("Ya hemos descrito la definición de la clase myRecord arriba.
Pasemos ahora a la segunda parte de nuestro script, ubicada en el cuerpo del documento HTML.
Aquí creamos dos objetos rec1 y rec2 basados en la clase myRecord y luego configuramos la propiedad segura del objeto rec2 en verdadero.
Como puede ver, usar nuestra propia clase simplificó enormemente la tarea de inicializar y mostrar el contenido de los registros en nuestra base de datos telefónica imaginaria. De hecho, hemos reducido esta tarea a llamar a varios métodos definidos de antemano en nuestra clase.
En este capítulo:
JavaScript tiene una serie de objetos predefinidos que puede utilizar al escribir scripts. Estos incluyen objetos como Array, Boolean, Date, Function, Math, Number, RegExp y String, así como el objeto primitivo Object. En versiones anteriores del lenguaje, los objetos de documento (ventana, documento) también se incluían en él, pero ahora están excluidos del núcleo del lenguaje JavaScript y pertenecen a la definición del modelo de objetos de documento (DOM), que será discutido después. Sin embargo, algunas propiedades de estos objetos (documento y ventana) ya nos resultan familiares.
Sin embargo, volvamos a los objetos JavaScript integrados en el concepto moderno. Todos los objetos integrados, excepto Math y Date, tienen propiedades como constructor y prototipo. Se utilizan para agregar nuevas propiedades a objetos existentes y se describen en el contexto de un objeto Función.
ObjetoTodos los objetos JavaScript son descendientes del objeto Object. Por lo tanto, todas las propiedades y métodos de este objeto también están disponibles para cualquier otro objeto JavaScript.
Sólo hay 2 propiedades definidas para el objeto Object: constructor y prototipo. La propiedad del constructor define una función que crea un prototipo de un objeto: la función completa, no solo su nombre. En otras palabras, considere la opción cuando se define algún objeto de prueba y se crea una instancia de este objeto tmp:
Prueba de función (versión) ( this.version = versión; ) tmp = nueva prueba (1);
En este caso, utilizando la propiedad del constructor, puede ver el código fuente del objeto de prueba (Fig. 4.6):
Alerta(tmp.constructor);
Arroz. 4.6.
Esta propiedad, sin embargo, tiene una limitación: no puede imprimir el código de objetos JavaScript integrados: en tales casos, la información de salida se limita al nombre de la función prototipo y la cadena "".
En cuanto a la propiedad prototipo, le permite acceder a la función prototipo del objeto actual. El uso de esta propiedad permite cambiar las características del prototipo del objeto. Por ejemplo, puedes agregar una nueva propiedad para un objeto de tipo prueba usando la propiedad prototipo:
Test.prototype.comment = "Nueva propiedad de comentario";
Ahora todos los objetos de tipo test, incluida la instancia tmp ya creada, tendrán la propiedad comentario, que es fácil de verificar aplicando la siguiente verificación:
Alerta (tmp.comentario);
Además, es posible modernizar los objetos JavaScript integrados de forma similar. Por ejemplo, si necesitamos agregar una propiedad como una descripción a las matrices, podemos hacerlo (¡solo dentro del escenario actual, por supuesto!) haciendo referencia al prototipo del objeto Array y agregándole la propiedad correspondiente:
Array.prototype.description = "";
En cuanto a los métodos, hay un poco más definidos para el objeto Objeto: hasta 5 de ellos. Estos son toSource, toString, watch, unwatch y valueOf; su breve descripción se proporciona en la Tabla 4.10.
Los métodos toString y valueOf se aplican a casi todos los objetos JavaScript integrados y, por lo general, el intérprete los llama automáticamente cuando se necesita una conversión. En cuanto al método toSource, en realidad solo hace el trabajo para la propiedad del constructor.
Los métodos restantes de vigilancia y desvigilancia, extensiones propietarias introducidas en el navegador Netscape 4 (ahora también compatible con Mozilla), están destinados a depurar scripts. Dado que la cuestión de la depuración de programas no se considerará en el marco de esta publicación, no tiene sentido describir estos métodos. Pero por si acaso, puedes tener en cuenta que Sea Monkey (pero no el navegador Firefox) tiene un depurador de scripts: JavaScript Debugger.
Objeto de matrizLas variables de matriz contienen conjuntos ordenados de valores, representados como una única variable por conveniencia. Ya nos hemos encontrado con matrices más de una vez (solo recuerde las matrices de argumentos), ahora es el momento de comprender todas sus propiedades y sutilezas de aplicación.
A diferencia de otros lenguajes de programación, JavaScript no tiene un tipo de datos de matriz. Pero esta limitación se supera debido al hecho de que puede utilizar un objeto de matriz predefinido: Array. Para crear un objeto de matriz, puede utilizar una de las siguientes sintaxis:
ArrayName = nueva matriz (elemento1, elemento2, ... elementoN) ArrayName = nueva matriz (ArrayLength)
En el primer caso, se enumeran todos los componentes de la matriz, en el segundo, simplemente se indica el número de elementos. También es posible utilizar literales al declarar una matriz:
Computadoras = ["PC", "Mac", "Sol"];
Para llenar los elementos de la matriz con valores, así como para acceder a los elementos de la matriz en general, puede utilizar el índice de elementos. Hay que tener en cuenta que el índice de los elementos del array empieza desde cero:
Var colores = nueva matriz (3); colores = "Rojo"; colores = "Azul"; colores = "Verde";
Muy a menudo es conveniente utilizar la capacidad proporcionada por el lenguaje JavaScript para llenar una matriz directamente al declararla:
Var colores = new Array("Rojo","Azul","Verde");
Para saber la longitud de una matriz (la cantidad de elementos que componen la matriz), debe usar la propiedad de longitud:
Var NumColors = colores.longitud;
Además de la propiedad de longitud, JavaScript también proporciona otras propiedades y métodos para trabajar con matrices. En particular, las propiedades del objeto Array, además de la longitud, incluyen el constructor y el prototipo, que son universales para todos los objetos, así como las propiedades de índice y de entrada destinadas al uso de matrices junto con expresiones regulares.
En cuanto a los métodos, además de los estándares toSource, toString y valueOf, las matrices están equipadas con una docena más propias, enumeradas en la Tabla 4.11.
| concat | Fusiona dos matrices y devuelve una nueva |
| unirse | Concatena todos los elementos de la matriz en una cadena |
| estallido | Elimina el último elemento de una matriz y lo devuelve. |
| empujar | Agrega uno o más elementos al final de la matriz y devuelve su nueva longitud |
| contrarrestar | Mueve los elementos de un array para que el primero pase a ser el último y viceversa |
| cambio | Elimina el primer elemento de una matriz y lo devuelve. |
| rebanada | Elimina parte de los elementos de la matriz y devuelve una nueva matriz. |
| empalme | Agrega y/o elimina un elemento de una matriz |
| clasificar | Ordena los elementos de la matriz alfabéticamente |
| desacelerar | Agrega uno o más elementos al comienzo de la matriz y devuelve la nueva longitud de la matriz (en MSIE 5.5 y 6, este método no devuelve nada) |
Veamos algunos métodos con más detalle. Entonces, usando el método concat puedes combinar 2 matrices en una:
Var a = nueva matriz ("A1", "A2"); var b = nueva matriz ("B1", "B2"); var ab = a.concat(b);
Aquí la variable ab se convertirá en una matriz que contiene los 4 elementos de las dos matrices que se están pegando. Si ahora aplicamos el método de unión a dicha matriz, el resultado será una cadena que contiene todos los elementos de esta matriz, separados por comas:
Cadena = ab.join(); // obtener cadena = "A1,A2,B1,B2"
En cuanto al método pop, si lo aplicamos a la misma matriz, obtendremos "B2" como respuesta y la matriz se recortará a los primeros tres valores. El método shift, por otro lado, devuelve el primer elemento (en nuestro caso, “A1”) y hace lo mismo con el array, con la única diferencia de que los elementos restantes se desplazan hacia adelante.
Para comprender mejor cómo funcionan estos y otros métodos de matriz, considere el siguiente ejemplo del Listado 4.3.
Listado 4.3. Trabajar con matrices
El mismo ejemplo se puede ver en el archivo array.html, al mismo tiempo se pueden ver todos los resultados de su trabajo en el navegador (ver Fig. 4.7).
Arroz. 4.7. El resultado de usar el método de empalme: la matriz devuelta y los cambios
Las matrices también pueden ser multidimensionales, es decir. un elemento de una matriz puede ser otra matriz. En este caso, para acceder a un elemento de la matriz, utilice la siguiente sintaxis:
Array2D="Elemento 0,0" Array2D="Elemento 0,1" ... Array2D[N][N]="Elemento N,N"
Se puede encontrar un ejemplo de cómo llenar y generar una matriz bidimensional en el archivo arrays.html, y también hay un ejemplo interactivo para casi todos los métodos de matriz.
Objeto booleanoUn objeto booleano es un contenedor para el tipo de datos del mismo nombre. Para definir un objeto de tipo booleano, utilice la siguiente sintaxis:
BooleanObj = nuevo booleano (valor)
Aquí el valor es una expresión de inicialización que se convertirá en verdadero o falso si es necesario. Si especifica un valor como 0, nulo, falso, NaN, indefinido o la cadena vacía, el resultado de inicializar un objeto booleano será falso y, en el caso de cualquier otro valor, el resultado será verdadero.
Los valores booleanos primitivos verdadero y falso no deben confundirse con los tipos de datos verdadero y falso de un objeto booleano. Por ejemplo, si declara una variable x y le asigna el valor de un objeto booleano inicializado como falso, aún así se evaluará como verdadero cuando se compare:
X = nuevo booleano (falso); // al comparar si (x) obtenemos verdadero
Al mismo tiempo, si simplemente asigna el tipo de datos primitivo falso a una variable, recibirá exactamente eso:
X = falso; // al comparar si (x) obtenemos falso
En cuanto al uso práctico de este objeto, se puede utilizar como función para convertir valores de cualquier otro tipo a booleanos:
A = 100; x = booleano(a); // x será verdadero si (x) (...)
Pero, de hecho, es poco probable que haga esto, ya que, si es necesario, el intérprete de JavaScript realiza dichas transformaciones automáticamente; en el ejemplo anterior, podría escribir inmediatamente "si (a) ...", y la transformación necesaria en este caso se hará en cualquier caso.
Objeto de fechaJavaScript no proporciona un tipo de datos especial para trabajar con fechas; sin embargo, al igual que con las matrices, hay un objeto de datos especial; Puede utilizar cualquiera de los siguientes métodos para crear un objeto de fecha:
Nueva fecha() nueva fecha(milisegundos) nueva fecha("Fecha_como_cadena")
En el primer caso se crea un objeto Fecha con la hora actual, en el segundo se debe especificar el número de milisegundos que han pasado desde el 1 de enero de 1970. Si la fecha se especifica como una cadena, entonces debe tener el formato "28 de febrero de 2005". También es posible configurar la fecha utilizando valores enteros para año, mes, día, etc.:
Nueva fecha (año, mes, día [, hora, minuto, segundo, milisegundo])
Por supuesto, en este caso, puede evitar especificar segundos y milisegundos, especialmente porque los milisegundos ni siquiera eran compatibles con las versiones anteriores de los navegadores. Además, JavaScript anterior a la versión 1.3 no admite fechas anteriores al 1 de enero de 1970. En cuanto al formato de los valores que se indican en la línea, el año es cualquier número de 4 dígitos (si especifica un número de 2 dígitos, se le agregará 1900), el número del mes es de 0 ( enero) al 11 (diciembre), y el día es de 0 a 31. En consecuencia, los valores de tiempo también son limitados: para las horas será un número entero de 0 a 23, para segundos y minutos, de 0 a 59, y durante milisegundos, de 0 a 999. Por lo tanto, para que el valor del objeto Tipo de fecha especifique el 9 de mayo de 2005, debe escribir:
Var cualquier día = nueva fecha (2005, 5, 9);
Y si necesita obtener el valor de fecha y hora actuales, entonces no se requiere ningún parámetro:
Var ahora = nueva fecha();
Desde JavaScript 1.3, el rango de fechas puede ser de hasta 100 millones de días antes y después del 01/01/1970 (¡eso es casi 550 mil años en total!). En la misma versión, existía el requisito de indicar siempre el año en formato de cuatro dígitos, para evitar errores asociados al cambio de siglos.
Para trabajar con el objeto Fecha, existen 2 propiedades: constructor y prototipo, así como muchos métodos que le permiten seleccionar la parte deseada de la fecha (año, mes, día, hora), mostrarla en un formato u otro. etc. Todos ellos se enumeran en la tabla 4.12.
| obtener la fecha() | Devuelve el día del mes en hora local. |
| obtenerDía() | Devuelve el día de la semana en hora local. |
| obtenerAñoCompleto() | Devuelve el año en hora local. |
| obtenerHoras() | Devuelve la hora actual (horas) en hora local. |
| obtenerMilisegundos() | Devuelve la hora actual (milisegundos) en hora local |
| obtenerMinutos() | Devuelve la hora actual (minutos) en hora local. |
| obtenerMes() | Devuelve la hora actual (mes) en hora local. |
| obtenerSegundos() | Devuelve la hora actual (segundos) en hora local. |
| consigue tiempo() | Devuelve la hora actual como una cantidad en hora local. |
| getTimezoneOffset() | Devuelve la diferencia horaria en minutos con respecto a GMT en hora local |
| obtenerUTCDate() | Devuelve el día del mes en tiempo universal. |
| obtenerUTCDay() | Devuelve el día de la semana en tiempo universal. |
| getUTCFullYear() | Devuelve el año en Tiempo Universal |
| getUTCHours() | Devuelve la hora actual (horas) en tiempo universal. |
| getUTCMilisegundos() | Devuelve la hora actual (milisegundos) en hora universal. |
| obtenerUTCMinutos() | Devuelve la hora actual (minutos) en tiempo universal. |
| obtenerUTCMes() | Devuelve la hora actual (mes) en hora universal. |
| obtenerUTCSegundos() | Devuelve la hora actual (segundos) en hora universal. |
| obtenerAño() | Anticuado. Devuelve el año en formato de hora universal corto (dos dígitos) |
| analizar (cadena_fecha) | Devuelve el número de milisegundos que han transcurrido desde el 1 de enero de 1970 hasta el valor especificado en el parámetro, en hora local. |
| establecer fecha (día) | Establece el día del mes en hora local. |
| establecerAñoCompleto(año) | Establece el año en hora local. |
| establecer Horas (horas) | Establece la hora (horas) en hora local. |
| setMillisegundos (milisegundos) | Establece el tiempo (milisegundos) en hora local. |
| establecerMinutos(minutos) | Establece la hora (minutos) en hora local. |
| establecerMes(mes) | Establece la hora (mes) en hora local. |
| setSeconds (segundos) | Establece el tiempo (segundos) en hora local. |
| setTime (milisegundos) | Establece la hora en milisegundos para una fecha específica en hora local |
| establecerUTCDate(día) | Establece el día del mes en tiempo universal. |
| setUTCFullYear (año) | Establece el año en tiempo universal. |
| setUTCHours(horas) | Establece la hora (horas) en tiempo universal. |
| EstablecerUTCMisegundos(milisegundos) | Establece la hora (milisegundos) en tiempo universal. |
| setUTCMinutes (minutos) | Establece la hora (minutos) en tiempo universal. |
| establecerUTCMes(mes) | Establece la hora (mes) en tiempo universal. |
| setUTCSegundos (segundos) | Establece el tiempo (segundos) en tiempo universal. |
| establecerAño(año) | Anticuado. Establece el año en hora local; se acepta un formato de dos dígitos para el valor del año |
| toGMTString() | Anticuado. Convierte una fecha en una cadena correspondiente a la hora GMT |
| toLocaleString() | Devuelve la fecha y la hora como una cadena correspondiente en formato a la configuración del sistema local |
| toLocaleDateString() | Devuelve la fecha como una cadena correspondiente al formato de la configuración del sistema local |
| toLocaleTimeString() | Devuelve la hora como una cadena formateada según la configuración del sistema local. |
| a la fuente() | Devuelve un objeto de fecha en representación literal |
| Encadenar() | Devuelve un objeto de fecha en representación de cadena |
| toUTCString() | Convierte una fecha en una cadena en formato de hora universal |
| UTC(parámetros) | Devuelve el número de milisegundos transcurridos desde el 1 de enero de 1970 en tiempo universal. Los parámetros indican el año, el mes y el día, así como (opcionalmente) horas, minutos, segundos y milisegundos. |
| valor de() | Devuelve la fecha como un valor primitivo. |
A pesar de la abundancia de métodos, trabajar con el objeto Date es bastante simple: solo necesita comprender el principio de nombrar los métodos:
- los métodos que comienzan con "set" sirven para configurar la fecha y la hora en objetos Date;
- los métodos que comienzan con "get" sirven para recuperar la fecha, la hora o partes de la misma de los objetos Date;
- los métodos que comienzan con "to" devuelven la fecha y la hora (o partes de ellas) como valores de cadena;
- Los métodos que contienen "UTC" se diferencian de otros similares solo en que funcionan con el formato de hora universal (es decir, muestran la hora media de Greenwich, teniendo en cuenta el desplazamiento relativo a la zona horaria actual).
Así, solo queda agregar para obtener o configurar el nombre de la parte necesaria de la fecha u hora para obtener o configurar el parámetro deseado, si es necesario, también usando UTC. Bueno, cuando necesites obtener el resultado en forma "humana", utiliza los métodos to. También debes recordar que para trabajar con el año siempre debes usar solo funciones de formato completo (es decir, getFullYear o getUTCFullYear, y no getYear).
La representación de cadena de una fecha en JavaScript tiene el siguiente formato:
Día de la semana Mes Fecha Año Horas:Minutos:Segundos GMT±Compensación
Para ver claramente la representación de fechas y, al mismo tiempo, considerar cómo funcionan funciones como toString, veamos lo que devuelven todas como resultado. En este caso, lo primero que nos puede venir a la mente al ver el funcionamiento de una función concreta es utilizar la salida de texto a un documento:
Document.writeln(DateObject.toString()); document.writeln(DateObject.toGMTString()); // etc.
Pero, de hecho, dado que hay muchas funciones, sería bueno escribir de antemano qué tipo de acción se realizó:
Document.writeln("DateObject.toString()" + DateObject.toString());
Ahora pensemos nuevamente en cuántas líneas realmente queremos generar de esta manera. Incluso si considera el método de copiar y pegar admitido por todos los editores de texto, esto no protegerá contra errores como este:
Document.writeln("DateObject.toLocaleString()" + DateObject.toString());
Pero como dice el lema de IBM, la gente debería pensar y las máquinas deberían funcionar. Entonces, pensemos en cómo hacer que la computadora funcione, al mismo tiempo que nos ahorramos la necesidad de ingresar bytes adicionales de código, para lo cual recurrimos al Listado 4.4.
Listado 4.4. Generando diferentes tipos de fechas y la función de evaluación
Métodos de objeto de fecha
En primer lugar, define la función printDate, que, de hecho, muestra la fecha de una forma u otra en el documento. Más precisamente, muestra la fecha en nuestro caso, pero en principio puede generar cualquier cosa siempre que el argumento que acepte sea una pieza completa de código JavaScript. En este caso, el código primero se muestra tal cual (es decir, la variable de cadena se imprime en su forma original) y luego se muestra el resultado de la ejecución, para lo cual se utiliza la función eval. Como resultado, después de haber escrito dicha función una vez, podrá consultarla posteriormente en todo el documento, ahorrándose la necesidad de ingresar casi el mismo texto dos veces.
A continuación de la función de salida se crea un objeto de tipo Fecha, al que se le asigna el valor 2005, 3er mes (abril, ya que enero es cero), 1er día, 14 horas, 30 minutos, 45 segundos. A continuación, se abre el documento para escribir y se llama secuencialmente a la función printDate para 6 métodos diferentes del objeto Date. El resultado de este script serán 6 líneas que contienen pares de valores del método y el resultado de su trabajo, separados por dos puntos (Fig. 4.8).
Arroz. 4.8. Generar la misma fecha usando diferentes métodos
Cabe señalar que el método toSource, que muestra la fecha en la representación interna del programa, sólo es compatible con los navegadores Mozilla. Además, el formato para mostrar fechas mediante todos los demás métodos también puede diferir ligeramente en diferentes navegadores. Puede cargar un ejemplo de este tipo en varios programas de visualización y comprobar usted mismo lo que producen (archivo date.html).
Objeto de funciónUn objeto Función predefinido define una línea de código JavaScript que debe ejecutarse como una función. Para declarar un objeto Función, utilice la siguiente sintaxis:
NombreFunción = nueva Función([argumento1, argumento2, ...argumentoN], CuerpoFunción)
En este caso, el nombre de cualquier variable o propiedad de un objeto existente se puede utilizar como nombre de la función. También es posible especificar un objeto de tipo Función como valor para el controlador de eventos del objeto. Digamos que si queremos crear nuestro propio controlador de eventos como "carga de documento completa" (document.onload), podemos escribir esto:
Document.onload = nueva Función([Argumento1, ...argumentoN], CuerpoFunción);
Los argumentos en este caso son parámetros pasados a la función y el cuerpo de la función es el código real que debe ejecutarse al acceder a este objeto de función. Por ejemplo, puedes escribir esta versión de un objeto que se usará para elevar al cuadrado un número:
Var SquareObj = nueva función("x", "return x*x");
Aquí SquareObj es el nombre de la variable, x es el argumento recibido y "return x*x" es el cuerpo de la función. Preste atención al hecho de que no solo el cuerpo de la función, sino también los argumentos que acepta están entre comillas, y también que el nombre del tipo de objeto, como es habitual en JavaScript, se escribe con letra mayúscula (Función) .
Usar variables creadas de esta manera es similar a usar variables de cualquier otro tipo:
Var a = 5 + SquareObj(2); // obtener 9
De hecho, un objeto de tipo Función siempre se puede representar como una función normal declarada utilizando la palabra clave function. Entonces, la misma elevación a la segunda potencia se puede describir de la siguiente manera:
Función SquareFunc(x) ( return x*x; )
En consecuencia, puede utilizar una función declarada mediante dicho método (en este caso, una función en su forma "pura", y no un procedimiento), de manera similar:
Var a = 5 + FunciónCuadrada(2); // también obtenemos 9
Por lo tanto, asignar un valor a una variable como una función usando un objeto Función es lo mismo que declarar una función en sí. Pero al mismo tiempo, estos enfoques tienen una diferencia: si SquareObj es una variable cuyo valor es una referencia a un objeto creado usando un objeto Función, entonces SquareFunc es el nombre de la función. En consecuencia, también se comportan de manera diferente durante la ejecución del programa: para un objeto de tipo función, el intérprete evaluará todo el código de la función cada vez que encuentre una variable (en nuestro caso, SquareObj), y para funciones declaradas de la forma habitual, el El código se evalúa solo en el primer pasillo. Esta diferencia puede no ser significativa si la función realiza un trabajo único, pero el uso de variables creadas a partir del objeto Función reduce significativamente la eficiencia del programa en bucles. Por lo tanto, en la práctica, el uso de objetos de función es muy raro, pero, sin embargo, a veces pueden resultar convenientes, por ejemplo, para agregar métodos a otros objetos.
El objeto Función tiene el constructor y prototipo de propiedades estándar de JavaScript, así como algunas propias:
Argumentos (una matriz correspondiente a los parámetros de la función arguments.callee) corresponde al cuerpo de la función. arguments.caller (obsoleto): indica el nombre de la función desde la cual se llamó el objeto; argumentos.length: indica el número de parámetros de la función. longitud – indica el número de argumentos esperados por la función (y no el número recibido, como es el caso con argumento.longitud);
ATENCIÓN
Todas las propiedades de los argumentos solo se pueden ver "desde dentro" de la función y, a partir de JavaScript 1.4, los argumentos ya no son una propiedad del objeto Función, sino que son una variable local independiente, implícitamente presente en cualquier función. De hecho, para Función solo queda 1 propiedad propia: longitud.
Además de las propiedades, el objeto Función tiene varios métodos. Por lo tanto, el método de aplicación le permite aplicar un método de un objeto a otro, y el método de llamada le permite llamar a un método de otro objeto en el contexto del actual. Desafortunadamente, la implementación de estos métodos en la práctica deja claramente mucho que desear. Así que todo lo que queda es mencionar los métodos estándar de JavaScript toString, toSource y valueOf, que también están disponibles para el objeto Function.
Objeto matemáticoMath es un objeto JavaScript integrado que tiene constantes matemáticas básicas y funciones como métodos y propiedades. Por ejemplo, la propiedad PI del objeto Math contiene el valor de Pi (π), que es aproximadamente igual a 3,1416, y el método sin devuelve el seno del número especificado.
Además del número π, el objeto Math tiene las siguientes propiedades:
- E – base de logaritmos naturales (aproximadamente 2,718)
- LN10 – logaritmo natural de 10 (aproximadamente 2,302)
- LN2 – logaritmo natural de 2 (aproximadamente 0,693)
- LOG10E – logaritmo decimal de E (aproximadamente 0,434)
- LOG2E – logaritmo binario de E (aproximadamente 1,442)
- SQRT1_2 – raíz cuadrada de 0,5 (aproximadamente 0,707)
- SQRT2 – raíz cuadrada de 2 (aproximadamente 1,414)
Dado que todas las propiedades del objeto Math son constantes predefinidas, crear otros objetos del tipo Math no solo no es necesario, sino también inaceptable, y siempre se debe acceder a ellos de la misma manera, por ejemplo:
Var LongitudCírculo = diámetro * Math.PI;
Además de las propiedades, el objeto Math también define métodos que corresponden a funciones matemáticas básicas. Todos ellos se enumeran en la tabla 4.13.
| abs(número) | Devuelve el valor absoluto del argumento. |
| atan2(y, x) | Devuelve un número en el rango de -? a?, que representa el ángulo (en radianes) entre el eje x y el punto (x,y). Tenga en cuenta que el primer argumento es la coordenada Y. |
| exp(número) | Devuelve E a la potencia especificada (logaritmo exponencial) |
| techo(número), piso(número) | Devuelve el valor que es el entero más grande (techo) o más pequeño (piso) más cercano |
| min(número1, número2), max(número1, número2) | Devuelve el número menor (min) o mayor (max) de los dos argumentos que se comparan. |
| sin(número),cos(número), tan(número),asin(número), acos(número),atan(número) | Devuelve el resultado de funciones trigonométricas estándar: seno, coseno, tangente, arcoseno, arcocoseno y arcotangente. |
| pow(base, exponente) | Devuelve la base a la potencia del exponente. |
| aleatorio() | Devuelve un número pseudoaleatorio entre 0 y 1 |
| número redondeado) | Devuelve el valor redondeado al entero más cercano |
| raíz cuadrada (número) | Devuelve la raíz cuadrada de un número |
Al igual que con las propiedades, para utilizar los métodos de un objeto Math, debe hacer referencia al objeto en sí en lugar de a copias del mismo. Por ejemplo, escribamos una función que devolverá el diámetro según el área del círculo:
Función CircleDiam(Cuadrado) ( Radio = Math.sqrt(Cuadrado / Math.PI); )
Para usarlo en la práctica, puede utilizar los métodos de aviso y alerta:
Var sq = Prompt("Ingresar área",1); var di = CircleDiam(sq); alerta("Diámetro del círculo: "+di);
El funcionamiento de estos y otros métodos del objeto Math se puede ver en el archivo math.html.
Objeto numéricoEl objeto Número es una representación de objeto de tipos numéricos simples. Tiene propiedades especiales para constantes numéricas, como "número máximo", "no es un número" e "infinito". Para crear un nuevo objeto de tipo Número, utilice la siguiente sintaxis:
Nuevo número (valor)
En la práctica, el uso más común del objeto Número es utilizar sus constantes para validar argumentos y realizar un seguimiento de los errores en tiempo de ejecución. Por ejemplo, para comprobar si el valor de una variable es un número o no, puedes utilizar este método:
Si (x!=Número.NaN);
En este caso, la condición será verdadera si la variable x contiene un número, ya que se compara con un valor especial: NaN, que significa "no es un número". Además de NaN, puede utilizar otros valores especiales; todos ellos son propiedades del objeto Número:
- MAX_VALUE – número máximo posible
- MIN_VALUE – número mínimo posible
- NaN – no es un número
- NEGATIVE_INFINITY – “infinito negativo”, un valor especial devuelto en caso de desbordamiento
- POSITIVE_INFINITY – “infinito positivo”, un valor especial devuelto en caso de desbordamiento
Todas estas propiedades son constantes, por lo que no es necesario crear un nuevo objeto Número para usarlas. Además de las propiedades anteriores, las propiedades estándar del constructor y del prototipo también se definen para Número
Además de las propiedades, el objeto Número, por supuesto, también tiene métodos. Además de los métodos estándar toSource, toString y valueOf, JavaScript 1.5 introdujo 3 nuevos métodos nativos del objeto Number: toExponential, toFixed y toPrecision. Todos ellos están diseñados para convertir números en cadenas en función de un formato u otro. Así, el método toExponential convierte un número en una cadena como un número con un exponente, el método toFixed lo convierte en una cadena que contiene un número con un número fijo de decimales y el método toPrecision utiliza uno de estos métodos, dependiendo de la número y el número de decimales asignados.
Exploremos estos métodos con más detalle, para lo cual consideramos su sintaxis:
Método([Número de caracteres])
Obviamente, para todos los métodos, el número de dígitos indica el número de decimales, pero si para el método toFixed el valor predeterminado (es decir, si no se especifica nada) es 0, entonces para toExponential y toPrecision es el número de decimales requeridos. para mostrar el número completo. Para comprender mejor el funcionamiento y las diferencias de todos estos métodos, veámoslos usando el ejemplo del Listado 4.5:
Listado 4.5. Métodos toExponential, toFixed y toPrecision
Métodos del objeto Número
Aquí nuevamente (como en el Listado 4.4) usamos una función que imprime primero la expresión y luego el resultado de su interpretación, pero en este caso la llamamos imprimirNúmero. Luego viene la declaración real de la variable sobre la cual se realizarán los cálculos. En este caso lo declaramos como un objeto de tipo Número, aunque, en realidad, podríamos habernos limitado a una simple declaración de variable (x = 12,45678). Finalmente, el documento se abre para escritura y primero se imprime en él el valor de la variable x sin ninguna conversión explícita (pero ya sabemos que, de hecho, el método toString() se aplica automáticamente aquí), después de lo cual se aplican los tres métodos en cuestión. se llaman primero sin especificar los caracteres numéricos, y luego con los parámetros 2 y 4. El resultado de este script serán 10 líneas que contienen pares “expresión: resultado del procesamiento” (Fig. 4.9).
Arroz. 4.9.
En conclusión, cabe señalar una vez más que estos métodos aparecieron solo en JavaScript 1.5 y, en consecuencia, no funcionan en los navegadores Netscape 4, MSIE 4/5 y Opera hasta la versión 7.0. Al mismo tiempo, proporcionan más flexibilidad a la hora de formatear números en la salida que, por ejemplo, el método round() del objeto Math.
2011-08-01 // ¿Alguna pregunta, sugerencia, comentario? Puede
En los días de XHTML/HTML4, los desarrolladores solo tenían unas pocas opciones que podían usar para almacenar datos arbitrarios relacionados con DOM. Podrías inventar tus propios atributos, pero esto era arriesgado: tu código no sería válido, los navegadores podrían ignorar tus datos y podría causar problemas si el nombre coincidiera con los atributos HTML estándar.
Por lo tanto, la mayoría de los desarrolladores se apegaron a los atributos class o rel ya que eran la única forma razonable de almacenar filas adicionales. Por ejemplo, digamos que estamos creando un widget para mostrar mensajes como una línea de tiempo de mensajes de Twitter. Idealmente, JavaScript debería ser configurable sin tener que reescribir el código, por lo que definimos el ID de usuario en el atributo de clase, así:
Nuestro código JavaScript buscará un elemento con ID msglist. Usando el script, buscaremos clases que comiencen con user_ y "bob" en nuestro caso será la ID del usuario y mostraremos todos los mensajes de ese usuario.
Digamos que también nos gustaría establecer una cantidad máxima de mensajes y omitir mensajes de más de seis meses (180 días):
Nuestro atributo de clase se satura muy rápidamente: es más fácil cometer un error y analizar cadenas en JavaScript se vuelve cada vez más difícil.
Atributos de datos HTML5Afortunadamente, HTML5 introdujo la posibilidad de utilizar atributos personalizados. Puede utilizar cualquier nombre en minúscula con el prefijo data- , por ejemplo:
Atributos de datos personalizados:
- Estas son cadenas: puede almacenar en ellas cualquier información que pueda representarse o codificarse como una cadena, como JSON. La conversión de tipos debe realizarse utilizando JavaScript
- debe usarse en casos donde no hay elementos o atributos HTML5 adecuados
- consulte sólo la página. A diferencia de los microformatos, los sistemas externos, como los motores de búsqueda y los rastreadores, deben ignorarlos.
Todos los navegadores le permiten obtener y cambiar atributos de datos utilizando los métodos getAttribute y setAttribute:
Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("tamaño-lista-datos"); msglist.setAttribute("tamaño-lista-datos", +show+3);
Esto funciona, pero sólo debe usarse para mantener la compatibilidad con navegadores más antiguos.
Ejemplo No. 2 de procesamiento en JavaScript: el método data() de la biblioteca jQueryA partir de jQuery 1.4.3, el método data() maneja atributos de datos HTML5. No es necesario especificar explícitamente el prefijo de datos, por lo que un código como este funcionará:
Var lista de mensajes = $("#lista de mensajes"); var show = msglist.data("tamaño de lista"); msglist.data("tamaño de lista", show+3);
Sin embargo, tenga en cuenta que jQuery intenta convertir los valores de dichos atributos a tipos apropiados (booleanos, números, objetos, matrices o nulos) y afectará al DOM. A diferencia de setAttribute, el método data() no reemplazará físicamente el atributo data-list-size; si verifica su valor fuera de jQuery, seguirá siendo 5.
Ejemplo No. 3 de procesamiento de JavaScript: API para trabajar con conjuntos de datosFinalmente, tenemos una API para trabajar con conjuntos de datos HTML5 que devuelve un objeto DOMStringMap. Es importante recordar que los atributos de datos se asignan a un objeto sin prefijos de datos, se eliminan los guiones de los nombres y los nombres mismos se convierten a camelCase, por ejemplo:
| Nombre del Atributo | Nombre de API del conjunto de datos |
| usuario de datos | usuario |
| máximo de datos | máximo |
| tamaño-lista-de-datos | tamaño de lista |
Nuestro nuevo código:
Var msglist = document.getElementById("msglist"); var mostrar = msglist.dataset.listSize; msglist.dataset.listSize = +mostrar+3;
Esta API es compatible con todos los navegadores modernos, pero no con IE10 e inferiores. Existe una solución alternativa para estos navegadores, pero probablemente sea más práctico usar jQuery si escribe para navegadores más antiguos.
Cuando trabaja con fecha y hora en JavaScript, utiliza el objeto Fecha. Creo que no es necesario explicar con qué frecuencia hay que trabajar con fecha y hora. Y en este artículo aprenderá cómo hacer esto en JavaScript.
Empecemos, como siempre, con los constructores del objeto Date. Hay cuatro de ellos. El primero es un constructor sin parámetros y devuelve la hora y fecha actuales:
Fecha var = nueva fecha();
documento.escribir(fecha);
Como resultado, verá algo como esto: "Jueves 14 de octubre de 2010 11:42:06 GMT+0400".
El segundo constructor del objeto Date es un constructor de un parámetro. Este parámetro contiene el número de milisegundos que han pasado desde el 01/01/1970 (el nacimiento de la era Unix). Por ejemplo, así:
Fecha var = nueva fecha (135253235);
documento.escribir(fecha);
Como resultado, verá lo siguiente: "Viernes 02 de enero de 1970 16:34:13 GMT+0300".
El siguiente constructor le permite crear un objeto Fecha con los siguientes parámetros: año, mes y día:
Fecha var = nueva fecha (2010, 0, 12);
documento.escribir(fecha);
Resultado: "martes 12 de enero de 2010 00:00:00 GMT+0300". Tenga en cuenta también que el mes 0 es enero y el mes 11 es diciembre.
Y el último constructor de la clase Date en JavaScript te permite crear un objeto Date con todos los parámetros de fecha y hora: año, mes, día, horas, minutos y segundos.
Fecha var = nueva fecha (2010, 0, 12, 23, 45, 12);
documento.escribir(fecha);
Obtendrá esta línea: "Martes 12 de enero de 2010 23:45:11 GMT+0300". Esos son todos los constructores de objetos de fecha de JavaScript que nos han proporcionado los desarrolladores.
La clase Date no tiene propiedades especiales, así que vayamos directamente a los métodos. Comencemos de inmediato con un grupo de métodos que funcionan exactamente igual, pero cada uno de ellos devuelve su propio elemento de fecha y hora:
Fecha var = nueva fecha();
document.write("Año - " + fecha.getFullYear() + "
");
document.write("Mes - " + fecha.getMes() + "
");
document.write("Número - " + fecha.getDate() + "
");
document.write("Día de la semana - " + fecha.getDay() + "
");
document.write("Hora - " + fecha.getHours() + "
");
document.write("Minuto - " + fecha.getMinutes() + "
");
document.write("Segundo - " + fecha.getSeconds() + "
");
document.write("Milisegundos - " + fecha.getMillisegundos() + "
");
document.write("Número de milisegundos que han pasado desde el 01/01/1970 - " + date.getTime() + "
");
Al ejecutar este script, comprenderá instantáneamente qué hace cada uno de estos métodos. Lo único que me gustaría señalar es que la numeración de los días de la semana también empieza desde cero. Además, el domingo tiene un índice de 0 y el sábado tiene un índice de 6.
Existen métodos similares, pero que muestran la fecha y la hora en el meridiano de Greenwich. Escribamos este código:
Fecha var = nueva fecha();
document.write("Año - " + fecha.getUTCFullYear() + "
");
document.write("Mes - " + fecha.getUTCMonth() + "
");
document.write("Número - " + fecha.getUTCDate() + "
");
document.write("Día de la semana - " + fecha.getUTCDay() + "
");
document.write("Hora - " + fecha.getUTCHours() + "
");
document.write("Minuto - " + fecha.getUTCMinutes() + "
");
document.write("Segundo - " + fecha.getUTCSeconds() + "
");
document.write("Milisegundo - " + fecha.getUTCMillisegundos() + "
");
Al ejecutar este script, descubrirá la fecha y hora actuales en Greenwich.
Lo opuesto a los métodos get() son los métodos set(). Si los primeros devuelven ciertos valores, los segundos, por el contrario, los cambian. En realidad, puede que no dé este guión, pero para que no queden dudas, hagámoslo:
Fecha var = nueva fecha();
fecha.setFullYear(1990);
fecha.setMonth(11);
fecha.setDate(15);
fecha.setHours(9);
fecha.setMinutes(20);
fecha.setSeconds(0);
fecha.setMillisegundos(10);
documento.escribir(fecha);
Espero que hayas notado que el método setDay() no existe. Esto significa que el día de la semana se selecciona en función del año, mes y fecha.
También existen métodos similares para Greenwich. Solo se agrega el prefijo UTC, por ejemplo, para cambiar el mes se usa el método setUTCMonth().
Y el último método es setTime() . Toma como parámetro el número de milisegundos que han pasado desde el 01/01/1970:
Fecha.setTime(39293012);
documento.escribir(fecha);
Como resultado, verá esto: "Jueves 01 de enero de 1970 13:54:53 GMT+0300".
Esos son todos los constructores y métodos del objeto Date en JavaScript.
La lección cubrirá los temas de los objetos Javascript. Hablaremos sobre objetos personalizados: crear un objeto en JavaScript, trabajar con propiedades y métodos de objetos, así como prototipos de JavaScript. Describe brevemente cómo trabajar con objetos Ubicación, Navegador y Pantalla.
El objetivo del sitio es proporcionar a los usuarios habilidades prácticas para trabajar con el idioma. El trabajo de laboratorio en JavaScript, presentado a medida que aumenta su complejidad y respaldado por ejemplos claros y resueltos, le permitirá comprender fácilmente el material en estudio y aprender a crear de forma independiente páginas web dinámicas y "vivas".
Hay varios tipos de objetos en JavaScript:
- objetos incorporados
- objetos del navegador
- Objetos que el programador crea de forma independiente (definidos por el usuario).
Los objetos integrados son objetos predefinidos,... La mayoría de los cuales ya se han tratado en lecciones anteriores.
Hablaremos sobre los objetos del navegador en javaScript en lecciones posteriores.
Ahora es el momento de familiarizarse con los objetos personalizados en javaScript.
- Objeto
- Número (procesamiento de números)
- Cadena (procesamiento de cadenas)
- Formación
- Matemáticas (fórmulas matemáticas, funciones y constantes)
- Fecha (trabajando con fechas y horas)
- ExpReg
- Global (sus propiedades Infinity, NaN, indefinidas)
- Función
Hay 2 formas de crear objetos:
var nombre_objeto = nuevo objeto(); nombre_objeto.property = valor;// notación de puntos nombre_objeto["propiedad"] = valor;// notación entre corchetes
Importante: Vale la pena señalar que no puedes usar un número como valor: myObg.rost = 2 // ¡IMPOSIBLE! myObg.rost = "2" // posible
Ejemplo: crear un objeto myBrowser con nombre de propiedades (valor ) y versión (valor " 9.0 »)
✍ Solución 1:
var miNavegador = nuevo Objeto(); myBrowser.name= "Microsoft Internet Explorer"; miNavegador["versión"]= "9.0";
Ejemplo: crear dos objetos de colección (coche y moto) con propiedades de color y marca. Imprimir valor de propiedad color en el objeto auto y propiedades marca en el objeto moto.
✍ Solución:
| var coche = nuevo Objeto(); coche.color = "Blanco"; coche.maxSpeed = 220 ; coche.marca = "Nissan"; document.write ("El auto tiene el color: " + car.color ); var moto = (color: "Azul", caballosPotencia: 130, marca: "Yamaha" ); document.write ("La motocicleta está hecha por: " + moto.brand ); |
var coche = nuevo Objeto(); coche.color = "Blanco"; coche.maxSpeed=220; coche.marca = "Nissan"; document.write("El coche tiene el color: " + coche.color); var moto = ( color: "Azul", caballosPotencia: 130, marca: "Yamaha" ); document.write("La moto tiene fabricante: " + moto.brand);
Bucle "para cada" cuando se trabaja con objetos en javascript
Ya se ha dicho bastante sobre este diseño.
El bucle for in en javascript está diseñado para iterar a través de matrices, colecciones y objetos.
Veamos un ejemplo del uso de for en:
| 1 2 3 4 5 6 7 8 | var miNavegador = nuevo Objeto(); myBrowser.name = "Microsoft Internet Explorer"; miNavegador[ "versión" ] = "9.0" ; for (var a in myBrowser) ( alert(a); // Itera a través de las propiedades del objeto myBrowser. Devolverá nombre, versión alert(myBrowser[ a] ); // Devuelve los valores de propiedad) |
var miNavegador = nuevo Objeto(); myBrowser.name= "Microsoft Internet Explorer"; miNavegador["versión"]= "9.0"; for (var a in myBrowser) ( alert(a); // Itera a través de las propiedades del objeto myBrowser. Devolverá nombre, versión alert(myBrowser[a]); // Devuelve los valores de propiedad)
La creación de clases de constructor se realiza en dos etapas:
Crear una clase de objeto usando un constructor (crear clases de constructor):
función Nombre_clase_objeto(sv1, sv2)( this.sv1 = valor; this.sv2 = valor; )
Crear un nuevo objeto basado en el constructor de una clase de objeto:
var nombre_objeto = nuevo nombre_clase("valor_pila1","valor_personal2");
var nombre_objeto =nuevo nombre_clase(); nombre_objeto.stv1="valor_stv1"; nombre_objeto.stv2="valor_stv2";
¡Es costumbre escribir el nombre de la clase constructora con mayúscula!
Veamos un ejemplo:
Ejemplo: crear un constructor para una clase de objetos y crear un objeto basado en esta clase: crear un objeto myBrowser con propiedades nombre (valor "Microsoft Internet Explorer") y versión (valor " 9.0 »)
Solución abierta
| 1 2 3 4 5 6 7 8 | función Navegador (nombre, versión) ( este .nombre = nombre; este .versión = versión; ) var myBrowser = nuevo Navegador ("Microsoft Internet Explorer", "9.0"); alerta(miNavegador.nombre); alerta(miNavegador.versión); |
función Navegador (nombre, versión)( this.name = nombre; this.version = versión; ) var myBrowser = new Browser("Microsoft Internet Explorer","9.0"); alerta(miNavegador.nombre); alerta(miNavegador.versión);
Entonces, comparemos nuevamente con el primer método de creación de objetos:
// objeto de colección var myBrowser = (nombre: "Microsoft Internet Explorer", versión: "7.0"); alerta(miNavegador.nombre); alerta(miNavegador.versión); // ¡la siguiente línea no es válida! var miBrowser1 = new miBrowser("MozillaFirefox","3.5"); // ¡NO ES VERDAD! !!
Importante: Al crear un objeto de colección, no puedes crear una instancia de la clase, ya que no es una clase.
js tarea 6_1. Cree un objeto Empleado que contenga información sobre los empleados de una determinada empresa, como Nombre, Departamento, Teléfono, Salario (use la función constructora y la palabra clave this). Crear una instancia de objeto
Accediendo a las propiedades del objeto en javascriptNombre del objeto. nombre de la propiedad
| 1 2 | agente007.Nombre = "Vínculo"; alerta(agente007.Nombre); |
agente007.Nombre = "Vínculo"; alerta(agente007.Nombre);
¿Qué es una propiedad predeterminada?
La función constructora le permite asignar propiedades predeterminadas a un objeto. Cada instancia del objeto que se crea tendrá estas propiedades.
| 1 2 3 4 5 6 7 8 9 10 | función Estudiante(nombre, teléfono) (este .nombre = nombre; este .teléfono = "22-22-22"; // ¡propiedad predeterminada!) var ivanov = nuevo Estudiante("Ivan", "33-33-33") ; alerta (ivanov.nombre) ; // emitirá la alerta "Ivan" (ivanov.phone); // mostrará "22-22-22" ivanov.phone = "33-33-33"; //cambiar la alerta de propiedad predeterminada (ivanov.phone); // devolverá "33-33-33" |
función Estudiante(nombre, teléfono) ( this.name=nombre; this.phone="22-22-22"; // ¡propiedad predeterminada! ) var ivanov = new Estudiante("Ivan","33-33-33" ) ; alerta(ivanov.nombre); // emitirá la alerta "Ivan" (ivanov.phone); // mostrará "22-22-22" ivanov.phone="33-33-33"; //cambiar la alerta de propiedad predeterminada (ivanov.phone); // devolverá "33-33-33"
Agregar propiedades a una clase de objeto
Se puede agregar un valor de propiedad para:
- una instancia específica de un objeto;
- toda una clase de objetos
Agregar propiedades a un especifico(instancia) objeto:
nombre del objeto. nombre_propiedad = valor
ivanov.biology = "excelente";
Importante: En el ejemplo, la propiedad se establece para un objeto específico y no para una clase de objetos.
Agregar propiedades a la clase objetos:
nombre_clase.prototipo. nombre_propiedad = valor
Student.prototype.biology = "excelente";
Importante: En el ejemplo, la propiedad (por defecto) está configurada para una clase de objetos. Esto se hace usando prototipo; prototipo: un objeto que define una estructura
| 1 2 | Estudiante.prototipo.correo electrónico = " [correo electrónico protegido]" ; alerta(ivanov.email ); // mostrará " [correo electrónico protegido]" |
Estudiante.prototipo.email=" [correo electrónico protegido]"; alerta(ivanov.email); // mostrará " [correo electrónico protegido]"
Ejemplo: ejemplo de visualización de todas las propiedades de un objeto con valores
| 1 2 3 4 5 6 7 8 9 | var summerTour= (turquía: 2000, españa: 3000, egipto: 1000); opción var; para (opción en summerTour) ( document.write (opción + ":" + summerTour[ opción] + " " ) ; } |
var summerTour=( turquía: 2000, españa: 3000, egipto: 1000 ); opción var; para (opción en summerTour)( document.write(opción + ":" + summerTour + "
");
}
Prototipos de Javascript (introducción)
Veamos un ejemplo de cómo se crean clases de JavaScript utilizando prototipos.
Ejemplo: cree una clase de objeto Car (automóvil) con tres propiedades: nombre (nombre), modelo (modelo), color (color). Cree una instancia de una clase con valores de propiedad específicos. Luego, a través de la instancia creada, agregue a la clase propiedad del propietario con un valor predeterminado específico ( Ivánov). Imprime todos los valores de propiedad de la instancia creada.
| function Coche(nombre, modelo, color) ( /* constructor de objetos de coche*/ this .name = nombre; this .model = modelo; this .color = color; ) var myCar= new Car; miCoche.nombre = "Mercedes"; miCoche.modelo = "600"; miCoche.color = "verde"; Coche.prototipo .propietario = "Ivanov" ; /* agregar una nueva propiedad*/ alert(myCar.name + " " + myCar.model + " " + myCar.color + " " + myCar.propietario); |
function Coche(nombre, modelo, color) ( /* constructor de objetos de coche*/ this.name = nombre; this.model = modelo; this.color = color; ) var myCar=new Car; miCoche.nombre="Mercedes"; miCoche.model="600"; miCoche.color="verde"; Coche.prototipo.propietario = "Ivanov"; /* agregar una nueva propiedad*/ alert(myCar.name+" "+myCar.model+" "+myCar.color+" "+myCar.owner);
js tarea 6_2. Para la tarea js 6_1 a través de la instancia creada del objeto Empleado, agregue una nueva propiedad de dirección a la clase de objeto
Métodos de objetos JavaScriptCrear un método de objeto
Ejemplo: agregue un método aboutBrowser al constructor del objeto del navegador, que mostrará información sobre las propiedades de este objeto en la pantalla del navegador.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | función showBrowser() ( document.write("Navegador: " + este .nombre + " " + esta .versión ); ) función Navegador(nombre, versión) ( este .nombre = nombre; esta .versión = versión; este .aboutBrowser = mostrarBrowser; ) var myBrowser= nuevo navegador("Microsoft Internet Explorer", 8.0); miBrowser.aboutBrowser(); |
función showBrowser() ( document.write("Navegador: " + this.name + " " + this.version); ) function Browser(nombre, versión) ( this.name = nombre; this.version = versión; this.aboutBrowser = showBrowser; ) var myBrowser=nuevo navegador("Microsoft Internet Explorer",8.0); miBrowser.aboutBrowser();
función Navegador(nombre, versión) ( this.name = nombre; this.version = versión; this.aboutBrowser = function())( document.write("Navegador: " + nombre + " " + versión); ) ) var myBrowser = nuevo navegador ("Microsoft Internet Explorer", 8.0); miBrowser.aboutBrowser();
js tarea 6_3. Crear una clase de objeto (Tour) para la operación de una empresa de viajes con un método para calcular el costo de un viaje basado en: número de personas * cantidad de días * tarifa del país. Cree una instancia de un objeto TurkeyTour con valores de propiedad. Muestra todas las propiedades del objeto en la pantalla. Cree un método de objeto de cálculo basado en una función.
Agregar propiedades y métodos a objetos integrados (prototipo)
JavaScript es un lenguaje POO (programación orientada a objetos) basado en prototipos.
Prototipo: un objeto que define una estructura.
Veamos cómo trabajar con prototipos usando un ejemplo:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* Cambiando el prototipo */ // Agregando una propiedad predeterminada al objeto incorporado String .prototype .color = "black" ; // Agregar (cambiar) un método al objeto integrado String .prototype .write = stringWrite; función stringWrite() ( document.write ("" ); document.write (this .toString () ); document.write ("" ); ) // usa la clase modificada var s = new String ("Esta es una cadena " ); s.color = "rojo"; s.escribir(); |
/* Cambiando el prototipo */ // Agregando una propiedad predeterminada al objeto incorporado String.prototype.color = "black"; // Agregar (cambiar) un método a un objeto integrado String.prototype.write = stringWrite; función stringWrite())( document.write(""); document.write(this.toString()); document.write(""); ) // usa la clase modificada var s = new String("Este es un cadena"); s.color = "rojo"; s.escribir();
Importante: No puede agregar propiedades o métodos a un objeto Math.
js tarea 6_4. Agregue el código del programa para completar la tarea: agregue el método printMe() a la clase String incorporada, que imprime la palabra "¡Hurra!" como encabezado (etiqueta h...), nivel especificado por el usuario ().
El nivel de encabezado (1, 2...6) se puede agregar como una propiedad de la clase String.
Recordemos cómo deberían verse las etiquetas de encabezado en HTML:
Completa el código:
| 1 2 3 4 5 6 7 8 | Cadena .prototype .uroven = "1"; ... función imprimirZagolovok () ( ... ... ) var s= nuevo ...; ... |
String.prototype.uroven="1"; ... función imprimirZagolovok ()( ... ... ) var s=nuevo ...; ...
Resumen: comparemos nuevamente dos opciones para usar objetos personalizados en JavaScript:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var miLibro= nuevo Objeto () ; miLibro.title = "libro"
;
myBook.price
=
"200"
;
alert(myBook[
"title"
]
)
;
// 1-й вариант обращения к свойствам
alert(meBook.price
)
;
// 2-й вариант обращения к свойствам
function
myBookShow()
{
for
(var
i in
myBook)
{
document.write
(i+
": "
+
myBook[
i]
+
"!} " ); // Iterar a través de las propiedades ) ) myBook.show = myBookShow; myBook.show (); |
var miLibro=nuevo Objeto(); myBook.title="libro";
myBook.price="200";
alert(myBook["title"]); // 1-й вариант обращения к свойствам
alert(meBook.price); // 2-й вариант обращения к свойствам
function myBookShow()
{
for (var i in myBook)
{
document.write(i+": "+myBook[i]+"!}
"); // Iterar a través de las propiedades ) ) myBook.show=myBookShow; myBook.show();
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function myBook(title, price) ( // definiendo las propiedades this .title = title; this .price = precio; // definiendo el método this .show = show; function show() ( document.write ("Título: " + this .título); documento.escribir ("Precio:" + este .precio) ) var libro = nuevo miLibro ("Libro", 200); libro.mostrar(); |
function myBook(title,price)( // definiendo propiedades this.title = title; this.price = precio; // definiendo el método this.show = show; function show() ( document.write("Título: " + this . título); document.write("Precio: " + this.price libro = nuevo miLibro("Libro", 200); libro.mostrar();> Ir a la página de inicio ... ...
*Complejo: número de elementos del menú, sus nombres y URL debe ser solicitado al usuario
Consejo: para mostrar una cadena en la pantalla en el método show(), use el método document.write()
Veamos el uso del objeto Navigator en javaScript usando un ejemplo:
Ejemplo: escriba una función que muestre:
- nombre del navegador
- idioma del navegador
- nombre del sistema operativo
- ¿Están habilitadas las cookies?
- ¿Está el usuario conectado a Internet?
- resolución de la pantalla
- profundidad del color
- dirección de la página cargada
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | opción var; // muestra todas las propiedades del objeto del navegador para (opción en el navegador) ( document.write (opción + " : " + navegador[ opción] + " " ); ) // función para buscar propiedades específicas de la función del navegador de objetos userDetails () ( document.write (" Nombre del navegador: "+navigator.userAgent+" " ); document.write ("Idioma del navegador: " + navegador.idioma + " " ); document.write("Nombre del sistema operativo: " + navigator.oscpu + " " ); document.write (" ¿Están habilitadas las cookies: " + navigator.cookieEnabled + " " ); document.write ("¿Está conectado Internet: " + navigator.nLine + "? " ) ; ) Detalles de usuario() ; |
opción var; // muestra todas las propiedades del objeto del navegador para (opción en el navegador)( document.write(opción + " : " + navegador+ "
"); ) // función para buscar propiedades específicas de la función del navegador de objetos userDetails ()( document.write("
Nombre del navegador: "+navigator.userAgent+"
"); document.write("Idioma del navegador: " + navegador.idioma + "
"); document.write("Nombre del sistema operativo: " + navigator.oscpu + "
"); document.write("¿Están habilitadas las cookies? " + navigator.cookieEnabled + "
"); document.write("¿Está conectado Internet: " + navigator.nLine + "
"); ) Detalles de usuario();
Veamos el uso del objeto Screen en javaScript usando un ejemplo:
función userDetails ()( document.write("Resolución: " + screen.width + " x " + screen.height + "
"); document.write("Profundidad de color: " + pantalla.colorDepth + " x " + pantalla.altura + "
"); ) Detalles de usuario();
Veamos el uso del objeto Ubicación en javaScript usando un ejemplo:
| 1 2 3 4 | función userDetails() ( document.write("Dirección de página cargada: " + ubicación.href + " " ) ; ) Detalles de usuario() ; |
función userDetails ()( document.write("Dirección de página cargada: " + ubicación.href + "
"); ) Detalles de usuario();
Conclusiones:
- Usando expresiones con la nueva palabra clave, puede crear instancias de objetos, es decir, instancias concretas de ellos.
- Además, gracias a la propiedad del prototipo de JavaScript, es posible agregar nuevas propiedades y métodos a objetos inventados por el usuario y que no estaban presentes en los objetos integrados originales.
- La creación de objetos se puede utilizar para crear bases de datos.