Tema3.1. Objetos Predefinidos
Tema3.1. Objetos Predefinidos
Tema3.1. Objetos Predefinidos
Objetos Predefinidos
Objetos Numéricos
Objetos Alfanuméricos
Objeto Date
Expresiones regulares
Modelos de Objetos del Navegador
Tema 3.1.
Objetos Predefinidos
En JavaScript la mayoría de las cosas son objetos, desde características del núcleo de
JavaScript como strings o arrays hasta las APIs del navegador hechas en JavaScript
Un objeto es una colección de datos relacionados y/o funcionalidad que constan de:
• propiedades. Variables o valores y funciones, que se denominan
• métodos. Funcionalidad cuando están dentro de objetos
Tema 3.1.
Objetos Predefinidos
Objetos Numéricos
• Objeto Number. Permite expresar cualquier valor como un número. En caso de que
la conversión no sea posible, se devuelve el valor NaN (Not a Number)
Number(“1.95”) 1.95
Number(“1,95”) NaN
Number(true) 1
Number(“Hola”) NaN
Tema 3.1.
Objetos Predefinidos
Objetos Numéricos
PROPIEDADES MÉTODOS
String(“1.95”) “1.95”
String(“1,95”) “1,95”
String(true) “true”
String(“Hola”) “Hola”
String(NaN) “NaN”
MÉTODOS
getDate() Día del mes. setDate() Actualiza el día mes
getDay() Día de la semana setTime() Actualiza la fecha completa
getMonth() Mes setMonth() Cambia el mes
getHours() Hora setHours() Actualiza la hora
getMinutes() Minutos setMinutes() Cambia los minutos
getSeconds() Segundos setSeconds() Cambia los segundos
getFullYear() Año con todos los dígitos setFullYear() Cambia el año
Tema 3.1.
Objetos Predefinidos
Objeto Date
Métodos del objeto Date
8548000
toString Convierte un objeto Date a una cadena
var fecha= new Date();
var cadena = fecha.toString();
toISOString Devolver un objeto Date como una cadena, usando el estándar ISO
var fecha= new Date();
var cadena = d.toISOString();
2016-10-02T19:35:27.823Z
Tema 3.1.
Objetos Predefinidos
Objeto Date
PRÁCTICA
Con las expresiones anteriores se validarán todas las cadenas que contengan algún
número, como ‘101 Dálmatas’ ó ‘786’.
Modificador i
Cuando al validar letras del alfabeto no se desea distinguir entre
mayúsculas y minúsculas:
let er=/a/;
console.log(er.test("pizza")); // Escribe true
console.log(er.test("TACO")); // Escribe false
let er2=/a/i;
console.log(er2.test("'pizza")); // Escribe true
console.log(er2.test(" TACO")); // Escribe true
Modificador ^
Fuerza que la cadena empiece por el carácter inmediatamente posterior
let er = /^a/;
console.log(er.test("pizza")); // Escribe false
console.log(er.test("TACO")); // Escribe false
console.log(er.test("armario")); // Escribe true
Tema 3.1.
Objetos Predefinidos
Expresiones regulares
Modificador $
El símbolo del dólar, $, fuerza a que la cadena termine por el carácter inmediatamente
anterior:
let er = /pon$/;
console.log(er.test("ponderado")); //Escribe false
console.log(er.test("posicion")); // Escribe false
console.log(er.test("tapon")); // Escribe true
Modificador .
El símbolo del punto representa un carácter cualquiera:
let er = /ar.on/;
console.log(er.test("arcon")); // Escribe true
console.log(er.test("arpon")); // Escribe true
console.log(er.test("Aaron")); // Escribe false
Modificador []
Establecen caracteres opcionales. La expresión la cumpliría cualquier cadena que contenga
alguno de los elementos indicados entre corchetes:
let er = /[aeiou]/;
console.log(er.test("SOs")); // Escribe false
console.log(er.test("col")); // Escribe true
console.log(er.test("Pfff!")); //Escribe false
Tema 3.1.
Objetos Predefinidos
Expresiones regulares
Modificador [^expresión]
Indica un carácter no permitido. Por ejemplo, la siguiente expresión significa que solo
se validarán las cadenas que no sean completamente numéricas:
let er =/[^0-9]/;
console.log(er.test("cabo")); // Escribe true
console.log(er.test("526")); // Escribe false
console.log(er.test("bueno"));// Escribe true
console.log(er.test("'p4sswOrd"));// Escribe true
Tema 3.1.
Objetos Predefinidos
Expresiones regulares
Modificadores de cardinalidad
Se trata de símbolos que permiten configurar repeticiones de expresiones
Metodo Utilidad
exp? Halla ninguna o una vez el elemento exp. Por ejemplo, /a?sa?/ coincide con «as
en <pecas» y «asa» en «casados».
Si se usa inmediatamente después de cualquiera de los cuantificadores *, +,?,
o {}, hace que el cuantificador no sea maximalista (es decir, que coincida
el mínimo número de veces), a diferencia del predeterminado, que es maximalista
(coincide con el máximo número de veces).
exp* Concuerda cero o más veces con el elemento exp.
Por ejemplo, /ho*/ coincide con «muchoooo» en <tace muchoooo calor> y «h
en «El vehículo está ardiendo», pero nada en “Para de ladrar”
exp+ Encuentra una o más veces el elemento exp, equivalente a {1,}.
Por ejemplo, /r+/ coincide con la letra «r» en «Brody» y con todas las letras «>
en <Brrrrrr! >».
exp{n} Donde n es un número entero positivo, concuerda exactamente con n apariciones
del elemento exp.
Por ejemplo, /r{2}/ no coincide con la «r» de «Brody, pero coincide con todas
las «> de «carro» y las dos primeras «» en <Brrrrrr!».
Tema 3.1.
Objetos Predefinidos
Expresiones regulares
Metodo Utilidad
exp{n,} Donde n es un número entero positivo, concuerda con al menos n apariciones
del elemento exp.
Por ejemplo, /a{2,}/ no coincide con las «a» en «maracaná-, pero coincide
Con todas las «a» en <maamaa» y en <caaaaaaaraaaamelo».
exp{n,m) Donde n es 0 o un número entero positivo, m es un número entero positivo y m>n coincide con al
menos n y como máximo m apariciones del elemento exp.
Por ejemplo, /e{1,3}/ no coincide con nada en «castaña, la «e en «mesa,
las dos «e» en <peero» y las tres primeras «e» en «seeeeeguro.
Modificador ()
Permiten agrupar expresiones, aumentando la complejidad del patrón. Ej: para validar una
cadena del tipo “maria#5jorge#9”, habría que indicarle que el patrón es una cadena de 5
letras, de la a a la z, después el símbolo #, después un número de «O a 9, y después
repetir lo anterior. Toca la expresión que va entre paréntesis es lo que debería repetirse:
let er = /([a-z]{5}#[0-9]){2}/;
console.log(er.test("maria#5jorge#9"));
console.log(er.test("maria#5jorge#"));
Tema 3.1.
Objetos Predefinidos
Expresiones regulares
Modificador |
Indica una opción, es decir, valida lo que está a su izquierda o lo que está a su derecha. Por
ejemplo, para validar un teléfono móvil en España (nueve dígitos que deben comenzar por
6, 7 u 8):
let er = /(6|7|8)([0-9]{8})/;
console.log(er.test("615833678")); // Escribe true
console.log(er.test("715833678")); // Escribe true
console.log(er.test("815833678")); // Escribe true
console.log(er.test("515833678")); // Escribe false
console.log(er.test("915833678")); // Escribe false
console.log(er.test("61583678")); // Escribe false
Modificadores abreviados
Se trata de un conjunto de símbolos a los que precede la barra invertida, que funcionan
muy bien con Unicode y permiten escribir expresiones de una forma mas ágil :
Tema 3.1.
Objetos Predefinidos
Expresiones regulares
Símbolo Utilidad
\d Cualquier digito numérico.
\D Cualquier carácter salvo los dígitos numéricos.
\s Espacio en blanco.
\S Cualquier carácter salvo el espacio en blanco.
\w Cualquier carácter alfanumérico: [a-zA-Z0-9].
\W Cualquier carácter que no sea alfanumérico: [^a-zA-Z0-9].
\0 Carácter nulo.
\n Carácter de nueva línea.
\t Carácter tabulador.
\\ El símbolo \.
\” Comillas dobles.
\’ Comillas simples.
\c Escapa el carácter c.
\000 Carácter Unicode empleando la notación octal.
\xff Carácter ASCII empleando la notación hexadecimal.
\ufff Carácter Unicode empleando la notación hexadecimal.
Tema 3.1.
Objetos Predefinidos
Expresiones regulares
Método exec()
Se utiliza para realizar la búsqueda de las coincidencias de una expresión regular en
una cadena específica, devolviendo un array en caso de éxito o null en caso contrario.
Es una alternativa más potente que test(), y muestra más información de las
coincidencias.
Ejemplo
i: da igual mayusc que minusc y g: de global
let ex=/sendero\s(arenoso).+?noche/ig;
let res=ex.exec(‘El sendero arenoso de noche puede ser peligroso’);
console.log(res);
Tema 3.1.
Objetos Predefinidos
Expresiones regulares
PRÁCTICA
Browser Object Model o BOM. Permite acceder y modificar las propiedades de las
ventanas del propio navegador.
Mediante BOM, es posible redimensionar y mover la ventana del navegador, modificar el
texto que se muestra en la barra de estado y realizar muchas otras manipulaciones no
relacionadas con el contenido de la página HTML.
⁻ Window
⁻ Navigator
⁻ Screen
⁻ History
⁻ Location
Tema 3.1.
Objetos Predefinidos
Modelos de objetos del navegador
Nos permiten controlar diferentes características del navegador, como crear ventanas o
mensajes en la barra de estado
window
anchor link
html body
Los objetos se encuentran en todos los navegadores y su función es idéntica
Tema 3.1.
Objetos Predefinidos
Modelos de objetos del navegador
Objeto Window
• Es la mayor posición jerárquica.
• Su función es la de representar la instancia del navegador.
• Con éste objeto podemos gestionar la ventana del navegador.
• Se considera un objeto implícito –no es necesario nombrarlo para acceder a los
objetos que dependen de él-
• Objeto global. Cualquier variable global puede ser accedida gestionándola como
propiedad del objeto window.
Tipos de ventanas:
• Permiten la interacción con el usuario
• Tipos de ventanas de dialogo:
⁻ Modales. Fuerza la interacción con el usuario.
⁻ No modales. Podemos minimizarla sin respuesta y continuar con el flujo de
ejecución.
Tema 3.1.
Objetos Predefinidos
Modelos de objetos del navegador
Objeto Window. Navegación de ventanas
Permite abrir nuevas ventanas, crear ventanas modales, volver hacia atrás o ir hacia otra
localización.
MÉTODOS
PROPIEDADES
Hacer una página que muestre en la barra de estado la hora de hoy con el
formato hora:minuto:segundo. Conseguir que se actualice cada 1000
milisegundos. Además, incluir unos botones que permitan:
• Cerrar la ventana.
• Mover la ventana a la posición 300,300 de la pantalla.
• Cambiar el tamaño de la ventana a 200x200 pixeles
Tema 3.1.
Objetos Predefinidos
Modelos de objetos del navegador
Objeto Navigator
Podremos acceder a información acerca del navegador que está utilizando el usuario
para ver la página
Propiedad Descripción
clipboard Devuelve un objeto para trabajar con el portapapeles
cookieEnabled Devuelve true si las cookies están habilitadas
geolocation Devuelve un objeto con la localización del usuario
languaje Devuelve el idioma del navegador
Storage Devuelve true si el navegador está online
userAgent Devuelve información completa sobre navegador del usuario
Tema 3.1.
Objetos Predefinidos
Modelos de objetos del navegador
Objeto Navigator
let info="clipboard: "+navigator.clipboard+"\n";
info+="cookieenabled:
"+navigator.cookieEnabled+"\n";
info+="geolocation: "+navigator.geolocation+"\n";
info+="language: "+navigator.language+"\n";
info+="online: "+navigator.onLine+"\n";
info+="plugins: "+navigator.plugins+"\n";
info+="storage: "+navigator.storage+"\n";
info+="userAgent: "+navigator.userAgent+"\n";
console.log(info);
Tema 3.1.
Objetos Predefinidos
Modelos de objetos del navegador
Objeto Screen
Corresponde a la pantalla utilizada por el usuario. Todas sus propiedades son de lectura.
Propiedad Descripción
availHeight Altura de la pantalla, en píxeles
availWidth Anchura de la pantalla, en píxeles
colorDepth Devuelve la profundidad de color de la pantalla
height Altura completa de la pantalla del usuario
pixelDepth Devuelve la profundidad de bits de la pantalla
width Anchura completa de la pantalla del usuario
orientation Devuelve un objeto con información de la orientación de la
pantalla. Es una propiedad experimental, que puede ver
modificado su funcionamiento en el futuro.
Tema 3.1.
Objetos Predefinidos
Modelos de objetos del navegador
Objeto Screen
with(screen){
alert("ancho: "+width+"\n"+
"ancho libre: "+availWidth +"\n"+
"alto: "+height+"\n"+
"alto libre: "+availHeight+"\n"+
"color: :"+colorDepth+"\n"+
"orientacion: "+orientation+"\n"+
"orientacion tipo: "+orientation.type);
};
Tema 3.1.
Objetos Predefinidos
Modelos de objetos del navegador
Objeto Document
Cuando visualizamos una página web todos sus objetos visualizados quedan representados
y accesible para nuestro código dentro del objeto document
Objetos Descripción
anchors …. Se trata de un array con todas las anclas del documento.
Propiedad Descripción
title Título del documento que aparece en la parte superior izquierda de
la ventana del navegador
URL …. Devuelve el URL del documento actual. Es lo mismo que la propiedad
location.href
Métodos Descripción
write(texto), writein(texto) Escribe texto HTML en un documento. Writein añade al final
un salto de línea <BR>
open () …. Permite escribir sobre el documento
Tema 3.1.
Objetos Predefinidos
Modelos de objetos del navegador
Objeto Document
El objeto document es el que tiene el contenido de toda la página que se está
visualizando. Esto incluye el texto, imágenes, enlaces, formularios, ...
<script type=“text/javascript”>
with(document){
alert(
"domain: "+domain +"\n"+
"lastModified: "+ lastModified +"\n"+
"URL: "+URL);
};
</script>
document
Tema 3.1.
Objetos Predefinidos
Modelos de objetos del navegador
Objeto History
Objeto destinado a almacenar el historial de páginas visitadas. Su utilidad más
interesante reside en el método go(), que permite moverse por el historial. Así go(-1) es
equivalente a back() y go(1) a forward().
Tema 3.1.
Objetos Predefinidos
Modelos de objetos del navegador
Objeto Location
Permite conocer información sobre el documento actualmente cargado en el navegador
y consultar las diferentes partes que forman una URL (dominio, protocolo, puerto)
Propiedades Descripción
href Devuelve el URL completo. Se permite modificar el valor de href:
console.log(location.href);
location.href="https://www.google.es";
hash Obtiene # seguido del marcador indicado en la URL. Ej: si la url es
https://www.miweb.es/prueba#ancla devolvería #ancla
host Devuelve la cadena formada por nombrehost:puerto de la URL
hostname Devuelve dominio de la URL. Por ejemplo miweb.es
pathname Devuelve la ruta que se sigue dentro del servidor web hasta alcanzar
la página actual
port Almacena el número de puerto de la URL